/*==================================================
        TENCRETE RESPONSIVE CSS
==================================================*/

/*=========================================
        LARGE DESKTOP
        1400px+
=========================================*/

@media (min-width:1400px){

.hero{

max-width:1400px;

}

.container{

max-width:1350px;

}

.hero h1{

font-size:72px;

}

.page-hero h1{

font-size:70px;

}

}



/*=========================================
        DESKTOP
        1200px
=========================================*/

@media (max-width:1200px){

.hero{

grid-template-columns:1fr;

text-align:center;

gap:80px;

}

.hero p{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.hero-right{

max-width:700px;

margin:auto;

}

.about{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:repeat(2,1fr);

}

}



/*=========================================
        LAPTOP
        992px
=========================================*/

@media (max-width:992px){

.nav-links{

position:fixed;

top:85px;

left:-100%;

width:100%;

height:calc(100vh - 85px);

background:#08101d;

flex-direction:column;

justify-content:flex-start;

padding-top:60px;

transition:.4s;

}

.nav-links.active{

left:0;

}

.menu-btn{

display:flex;

}

.navbar .primary-btn{

display:none;

}

.hero{

padding-top:170px;

}

.hero h1{

font-size:52px;

}

.page-hero h1{

font-size:52px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.social-icons{

justify-content:center;

}

}
/*=========================================
        TABLET
=========================================*/

@media (max-width:768px){

section{

padding:80px 0;

}

.hero{

padding-top:150px;

}

.hero h1{

font-size:42px;

line-height:1.25;

}

.hero p{

font-size:17px;

}

.page-hero{

padding-top:150px;

}

.page-hero h1{

font-size:42px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.primary-btn{

width:240px;

}

.secondary-btn{

width:240px;

}

.hero-stats{

flex-direction:column;

align-items:center;

}

.stat-card{

width:100%;

max-width:320px;

}

.service-grid{

grid-template-columns:1fr;

}

.portfolio-grid{

grid-template-columns:1fr;

}

.pricing-grid{

grid-template-columns:1fr;

}

.testimonial-grid{

grid-template-columns:1fr;

}

.about{

gap:40px;

}

.about-features{

grid-template-columns:1fr;

}

.contact-cta{

padding:60px 30px;

}

.contact-cta h2{

font-size:36px;

}

}
/*=========================================
        MOBILE
=========================================*/

@media (max-width:576px){

.logo{

font-size:22px;

}

.hero{

padding-top:130px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.page-hero h1{

font-size:34px;

}

.section-title h2{

font-size:34px;

}

.about-content h2{

font-size:34px;

}

.contact-cta h2{

font-size:30px;

}

.price{

font-size:46px;

}

.dashboard-card{

padding:18px;

}

.floating-card{

display:none;

}

.service-card{

padding:25px;

}

.price-card{

padding:30px;

}

.testimonial-card{

padding:25px;

}

.footer-grid{

gap:30px;

}

.footer-bottom{

font-size:14px;

}

}
/*=========================================
        EXTRA SMALL DEVICES
=========================================*/

@media (max-width:380px){

.hero h1{

font-size:30px;

}

.page-hero h1{

font-size:30px;

}

.primary-btn{

width:100%;

}

.secondary-btn{

width:100%;

}

.hero-buttons{

width:100%;

}

.hero-badge{

font-size:13px;

padding:10px 15px;

}

.logo{

font-size:20px;

}

.container{

width:94%;

}

}
/*=========================================
        CONTACT RESPONSIVE
=========================================*/

@media(max-width:768px){

.contact-form{

padding:70px 20px;

}

.contact-form form{

padding:30px;

}

.page-hero h1{

font-size:38px;

}

.page-hero p{

font-size:16px;

}

}

/*==================================================
        ABOUT / TEAM RESPONSIVE
==================================================*/

/* TABLET + MOBILE */
@media (max-width:768px){

    /* Team section */

    .team-section{
        padding:70px 20px;
    }

    .team-grid{
        grid-template-columns:1fr;
        gap:25px;
        width:100%;
    }

    .team-card{
        width:100%;
        box-sizing:border-box;
        padding:30px 20px;
    }

    .team-card h3{
        font-size:24px;
    }

    .team-card p{
        font-size:15px;
        line-height:1.7;
    }

    .team-avatar{
        width:80px;
        height:80px;
        font-size:25px;
    }

    .team-phone{
        font-size:14px;
    }

    .team-links{
        gap:12px;
    }

    .section-heading{
        margin-bottom:40px;
    }

    .section-heading h2{
        font-size:32px;
    }

    .section-heading p{
        font-size:15px;
        line-height:1.7;
    }
}


/* SMALL MOBILE */
@media (max-width:576px){

    .team-section{
        padding:60px 15px;
    }

    .team-card{
        padding:25px 18px;
        border-radius:16px;
    }

    .team-card h3{
        font-size:22px;
    }

    .team-card p{
        font-size:14px;
    }

    .team-avatar{
        width:70px;
        height:70px;
        font-size:22px;
    }

    .team-phone{
        font-size:13px;
    }

    .section-heading h2{
        font-size:30px;
    }

}


/* EXTRA SMALL PHONES */
@media (max-width:380px){

    .team-section{
        padding:50px 10px;
    }

    .team-card{
        padding:22px 15px;
    }

    .team-card h3{
        font-size:20px;
    }

    .team-phone{
        font-size:12px;
    }

}

/*==================================================
        MOBILE FULL WIDTH FIX
==================================================*/

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }

    /* Full-width header */
    header {
        width: 100%;
        max-width: 100%;
    }

    .navbar {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Full-width hero */
    .hero {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        box-sizing: border-box;

        grid-template-columns: 1fr;

        padding-left: 20px;
        padding-right: 20px;

        overflow: hidden;
    }

    /* Hero content */
    .hero-left,
    .hero-content,
    .hero-right {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .hero-left {
        text-align: center;
    }

    .hero p {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        width: 100%;
        max-width: 100%;
    }

    /* Remove anything causing horizontal overflow */
    .hero-right {
        overflow: hidden;
    }

}
@media (max-width: 576px) {

    .hero {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero h1 {
        width: 100%;
        max-width: 100%;
        font-size: 34px;
        line-height: 1.2;
        word-wrap: break-word;
    }

    .hero p {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        line-height: 1.7;
    }

}

/* =========================================
   BLOG ARTICLE RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .article-hero {
        padding: 140px 20px 70px;
    }

    .article-hero h1 {
        font-size: 38px;
    }

    .article-intro {
        font-size: 16px;
    }

    .article-section {
        padding: 65px 20px;
    }

    .article-container p {
        font-size: 16px;
        line-height: 1.8;
    }

    .article-container h2 {
        font-size: 28px;
        margin-top: 45px;
    }

    .article-container h3 {
        font-size: 21px;
    }

    .article-cta {
        padding: 35px 25px;
    }

    .article-cta h2 {
        font-size: 27px;
    }

}


@media (max-width: 576px) {

    .article-hero {
        padding-top: 125px;
    }

    .article-hero h1 {
        font-size: 32px;
    }

    .article-category {
        font-size: 12px;
    }

    .article-meta {
        font-size: 13px;
    }

}

/* =========================================
   BLOG MOBILE RESPONSIVE FIX
========================================= */

@media (max-width: 768px) {

    /* Blog cards become one column */
    .blog-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
        gap: 25px;
    }

    /* Make each card fit the screen */
    .blog-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Prevent text from overflowing */
    .blog-card h3,
    .blog-card p,
    .blog-card span {
        overflow-wrap: break-word;
        word-wrap: break-word;
        white-space: normal;
    }

    /* Better card spacing on mobile */
    .blog-card {
        padding: 25px;
    }

    /* Blog image/icon area */
    .blog-card-image {
        width: 100%;
        height: 180px;
    }

    /* Blog title */
    .blog-card h3 {
        font-size: 24px;
        line-height: 1.35;
    }

    /* Blog description */
    .blog-card p {
        font-size: 16px;
        line-height: 1.7;
    }

}

@media (max-width: 480px) {

    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .blog-card {
        width: 100%;
        padding: 22px;
    }

    .blog-card-image {
        height: 160px;
    }

    .blog-card h3 {
        font-size: 22px;
    }

    .blog-card p {
        font-size: 15px;
        line-height: 1.65;
    }

}

/* =========================================
   PRICING - MOBILE RESPONSIVE
   ========================================= */

@media (max-width: 768px) {

    .pricing-section {
        padding: 60px 20px;
    }

    .pricing-section .section-heading h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .pricing-section .section-heading p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Pricing cards */
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
    }

    .pricing-card {
        width: 100%;
        padding: 30px 22px;
    }

    .pricing-card h3 {
        font-size: 22px;
    }

    .pricing-card .price {
        font-size: 38px;
    }

    .pricing-card p {
        font-size: 14px;
    }

    .pricing-card ul {
        text-align: left;
    }

    .pricing-card li {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .pricing-card .primary-btn,
    .pricing-card .secondary-btn {
        width: 100%;
    }
}


/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 480px) {

    .pricing-section {
        padding: 50px 16px;
    }

    .pricing-section .section-heading h2 {
        font-size: 28px;
    }

    .pricing-card {
        padding: 25px 18px;
        border-radius: 16px;
    }

    .pricing-card .price {
        font-size: 34px;
    }

    .pricing-card h3 {
        font-size: 20px;
    }
}

/* =========================================
   PORTFOLIO MOBILE
========================================= */

@media(max-width:768px){

    .portfolio-section{
        padding:70px 0;
    }

    .portfolio-section .section-heading h2{
        font-size:34px;
    }

    .portfolio-section .section-heading p{
        font-size:16px;
    }

    .portfolio-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .portfolio-card{
        padding:30px;
    }

    .portfolio-card h3{
        font-size:25px;
    }

    .portfolio-privacy{
        padding:70px 0;
    }

    .privacy-content{
        grid-template-columns:1fr;
        gap:25px;
        padding:35px 25px;
    }

    .privacy-content h2{
        font-size:30px;
    }

    .privacy-content p{
        font-size:16px;
    }

    .portfolio-cta{
        padding:70px 0;
    }

    .portfolio-cta-content h2{
        font-size:32px;
    }

}