/* ==========================================================
   MVPROMOCODES LAYOUT
   Version: 1.0
========================================================== */

/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:min(1240px,calc(100% - 40px));

    margin-inline:auto;

}

/* ==========================================================
   SECTION
========================================================== */

.section{

    padding:90px 0;

}

.section-sm{

    padding:60px 0;

}

.section-lg{

    padding:120px 0;

}

/* ==========================================================
   HEADER
========================================================== */

.site-header{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid #E2E8F0;

    transition:.35s;

}

.site-header.scrolled{

    box-shadow:

        0 10px 35px rgba(15,23,42,.08);

}

/* ==========================================================
   NAVBAR
========================================================== */

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:82px;

}

/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:#0F172A;

}

.logo img{

    width:44px;

    height:44px;

}

.logo strong{

    display:block;

    font-size:20px;

    font-weight:800;

}

.logo small{

    display:block;

    color:#64748B;

    font-size:13px;

}

/* ==========================================================
   NAVIGATION
========================================================== */

.nav-menu{

    display:flex;

    align-items:center;

    gap:32px;

}

.nav-menu a{

    color:#334155;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.nav-menu a:hover{

    color:#16A34A;

}

/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */

.mobile-toggle{

    display:none;

    background:none;

    border:none;

    font-size:28px;

    cursor:pointer;

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    padding:100px 0 80px;

    background:linear-gradient(
        180deg,
        #F8FAFC 0%,
        #FFFFFF 100%
    );

}

.hero-grid{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    align-items:center;

    gap:80px;

}

.hero-content h1{

    font-size:clamp(2.6rem,5vw,4.2rem);

    line-height:1.1;

    font-weight:900;

    color:#0F172A;

}

.hero-content p{

    font-size:1.15rem;

    line-height:1.9;

    color:#475569;

    max-width:720px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

/* ==========================================================
   SECTION TITLE
========================================================== */

.section-title{

    text-align:center;

    max-width:760px;

    margin:0 auto 60px;

}

.section-title h2{

    font-size:clamp(2rem,4vw,3rem);

    font-weight:800;

    color:#0F172A;

}

.section-title p{

    margin-top:18px;

    font-size:1.05rem;

    color:#64748B;

    line-height:1.9;

}

/* ==========================================================
   GRID SYSTEM
========================================================== */

.grid{

    display:grid;

    gap:32px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

/* ==========================================================
   FLEX HELPERS
========================================================== */

.flex{

    display:flex;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/* ==========================================================
   FEATURE SECTION
========================================================== */

.feature-grid{

    display:grid;

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

    gap:32px;

}

/* ==========================================================
   GUIDES GRID
========================================================== */

.guides-grid{

    display:grid;

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

    gap:32px;

}

/* ==========================================================
   AUTHOR SECTION
========================================================== */

.author-section{

    max-width:900px;

    margin:auto;

}

/* ==========================================================
   FAQ SECTION
========================================================== */

.faq-container{

    max-width:900px;

    margin:auto;

}

/* ==========================================================
   TABLE WRAPPER
========================================================== */

.table-wrapper{

    overflow-x:auto;

    margin-top:40px;

}

/* ==========================================================
   FOOTER
========================================================== */

.site-footer{

    background:#0F172A;

    color:#CBD5E1;

    padding:90px 0 40px;

    margin-top:100px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

}

.footer-column{

    display:flex;

    flex-direction:column;

}

.footer-column:first-child{

    padding-right:30px;

}

/* ==========================================================
   ARTICLE LAYOUT
========================================================== */

.article-container{

    max-width:860px;

    margin:auto;

}

.article-content{

    line-height:1.9;

    font-size:1.08rem;

}

.article-content h2{

    margin:70px 0 25px;

}

.article-content h3{

    margin:50px 0 20px;

}

.article-content p{

    margin-bottom:22px;

}

.article-content ul,
.article-content ol{

    margin:20px 0 25px 28px;

}

.article-content li{

    margin-bottom:12px;

}

.article-content img{

    margin:45px auto;

    border-radius:18px;

}

/* ==========================================================
   CONTENT WIDTHS
========================================================== */

.content-sm{

    max-width:760px;

    margin:auto;

}

.content-md{

    max-width:920px;

    margin:auto;

}

.content-lg{

    max-width:1100px;

    margin:auto;

}

/* ==========================================================
   PAGE HEADER
========================================================== */

.page-header{

    padding:90px 0 60px;

    text-align:center;

}

.page-header h1{

    font-size:clamp(2.5rem,5vw,4rem);

    font-weight:900;

    color:#0F172A;

}

.page-header p{

    margin-top:20px;

    color:#64748B;

    font-size:1.1rem;

    line-height:1.8;

    max-width:760px;

    margin-inline:auto;

}

/* ==========================================================
   BREADCRUMB
========================================================== */

.breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:25px;

    font-size:.95rem;

}

.breadcrumb a{

    color:#16A34A;

    text-decoration:none;

}

.breadcrumb span{

    color:#94A3B8;

}

/* ==========================================================
   SIDEBAR
========================================================== */

.page-grid{

    display:grid;

    grid-template-columns:2.2fr .8fr;

    gap:50px;

}

.sidebar{

    position:sticky;

    top:120px;

    align-self:start;

}

/* ==========================================================
   CTA SECTION
========================================================== */

.cta-section{

    background:linear-gradient(135deg,#16A34A,#22C55E);

    color:#fff;

    border-radius:32px;

    padding:70px;

    text-align:center;

}

.cta-section h2{

    color:#fff;

    font-size:2.5rem;

}

.cta-section p{

    max-width:700px;

    margin:20px auto 35px;

    color:rgba(255,255,255,.92);

}

/* ==========================================================
   SPACING HELPERS
========================================================== */

.py-40{padding:40px 0;}
.py-60{padding:60px 0;}
.py-80{padding:80px 0;}
.py-100{padding:100px 0;}

.pb-0{padding-bottom:0;}
.pt-0{padding-top:0;}

.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

.mx-auto{

    margin-left:auto;

    margin-right:auto;

}

/* ==========================================================
   RESPONSIVE LAYOUT
========================================================== */

@media (max-width:1100px){

    .hero-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .page-grid{

        grid-template-columns:1fr;

    }

    .sidebar{

        position:static;

    }

    .footer-grid{

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

    }

    .grid-4{

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

    }

}

@media (max-width:768px){

    .section{

        padding:70px 0;

    }

    .hero{

        padding:70px 0;

    }

    .grid-2,
    .grid-3,
    .grid-4,
    .feature-grid,
    .guides-grid,
    .footer-grid{

        grid-template-columns:1fr;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .navbar{

        min-height:72px;

    }

    .mobile-toggle{

        display:block;

    }

    .nav-menu{

        display:none;

    }

    .cta-section{

        padding:40px 30px;

    }

}

@media (max-width:480px){

    .container{

        width:calc(100% - 24px);

    }

    .section{

        padding:60px 0;

    }

    .page-header{

        padding:70px 0 40px;

    }

}