/*
Theme Name: Ookla Packaging
Theme URI: https://example.com/ookla-packaging
Author: ZAin Ahmad
Description: Lightweight custom WordPress theme foundation for the Ookla Packaging website. Built for ACF-driven custom development with performance-first asset loading.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: ookla-packaging
Tags: custom-logo, custom-menu, featured-images, responsive-layout
*/

/* WordPress reads this file for theme metadata. Front-end styles are loaded from assets/css/main.css. */

/* =====================================
   OOKLA HERO SECTION
===================================== */


.ookla-hero{
    width:100%;
    min-height:800px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
}


.hero-wrapper{
    max-width:1240px;
    width:calc(100% - 40px);
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}


.hero-content{
    width:50%;
    z-index:2;
}


.hero-image{
    width:50%;
    z-index:2;
}


.hero-image img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
}



/* HERO BADGE */

.hero-badge{

    display:inline-flex;
    align-items:center;

    background:#D9B688;
    color:#36301A;

    font-family:'Montserrat',sans-serif;
    font-weight:500;

    font-size:16px;
    line-height:24px;

    padding:8px 20px;

    border-radius:30px;

    margin-bottom:28px;

}



/* HERO TITLE */


.hero-content h1{

    font-family:'Montserrat',sans-serif;

    font-weight:600;

    font-size:55px;

    line-height:68.33px;

    letter-spacing:0;

    color:#ffffff;

    margin:0 0 20px;

}



/* HERO DESCRIPTION */


.hero-content p{

    font-family:'Montserrat',sans-serif;

    font-weight:500;

    font-size:16.53px;

    line-height:29.96px;

    letter-spacing:0;

    color:#ffffff;

    max-width:500px;

    margin:0 0 40px;

}




/* BUTTONS */


.hero-buttons{

    display:flex;
    align-items:center;
    gap:18px;

}



.hero-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:48px;

    padding:0 38px;

    border-radius:8px;

    font-family:'Montserrat',sans-serif;

    font-size:16px;

    font-weight:500;

    transition:.3s ease;

}




.hero-btn.primary{

    background:#D9B688;

    color:#111710;

}



.hero-btn.primary:hover{

    background:#ffffff;

}



.hero-btn.secondary{

    border:1px solid #D9B688;

    color:#D9B688;

    background:transparent;

}



.hero-btn.secondary:hover{

    background:#D9B688;

    color:#111710;

}



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


@media(max-width:991px){


    .ookla-hero{

        min-height:auto;

        padding:80px 0;

    }


    .hero-wrapper{

        flex-direction:column;

        gap:50px;

    }



    .hero-content,
    .hero-image{

        width:100%;

    }



    .hero-content h1{

        font-size:42px;

        line-height:52px;

    }



}



@media(max-width:600px){


    .ookla-hero{

        padding:60px 0;

    }



    .hero-badge{

        font-size:12px;

        line-height:20px;

    }



    .hero-content h1{

        font-size:34px;

        line-height:42px;

    }



    .hero-content p{

        font-size:15px;

        line-height:26px;

    }



    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }



    .hero-btn{

        width:100%;

    }


}

/* ===========================
   STATS BAR
=========================== */


.ookla-stats-bar{

background:#203B2B;

border-radius:25px;

margin: -70px auto 0 auto;

max-width:calc(1240px - 0px);

position:relative;
padding: 35px 0;
z-index:2;

}



.stats-wrapper{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 45px;

}



.stat-item{

display:flex;

align-items:center;

gap:18px;

}



.stat-icon img{

width:45px;

height:45px;

}



.stat-content h3{

margin:0;

color:#ffffff;

font-family:'Montserrat';

font-size:28px;

font-weight:600;

line-height:1.2;

}



.stat-content p{

margin:4px 0 0;

color:#ffffff;

font-family:'Montserrat';

font-size:15px;

font-weight:400;

}



@media(max-width:991px){


.stats-wrapper{

flex-wrap:wrap;

gap:30px;

padding:30px;

}



.stat-item{

width:45%;

}


}



@media(max-width:600px){


.stat-item{

width:100%;

}


.stats-wrapper{

padding:25px;

}


}

/* =========================================================
   PRODUCT CATEGORY SECTION
   WooCommerce Product Categories Cards
   ========================================================= */


.product-category-section{

    padding:90px 0;

}


/* Section Heading */

.product-category-section .section-heading{

    text-align:center;
    margin-bottom:55px;

}


.product-category-section .divider{

    width:190px;
    margin:0 auto 20px;

}


.product-category-section .divider img{

    width:100%;
    height:auto;

}


.product-category-section .section-heading span{

    display:block;

    font-size:16px;

    font-weight:700;

    color:#D7A869;

    margin-bottom:8px;

}



.product-category-section .section-heading h2{

    font-size:32px;

    font-weight:600;

    color:#111710;

    margin:0;

}


.product-category-section .section-heading h2 strong{

    color:#006B61;

    text-decoration:underline;

    text-underline-offset:8px;

}



/* Product Cards Grid */


.product-category-grid{

    display:grid;

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

    gap:24px;

}



/* Card */


.category-card{

    background:#f8f0e7;

    border:1px solid #e4d7c8;

    border-radius:18px;

    padding:50px 25px 30px;

    text-align:center;

    min-height:210px;

    transition:.3s ease;

}



.category-card:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 25px rgba(0,0,0,.08);

}



/* Image */


.cat-image{

    height:100px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

}



.cat-image img{

    max-height:95px;

    width:auto;

    object-fit:contain;

}



/* Title */


.category-card h3{

    font-size:16px;

    font-weight:700;

    color:#111710;

    margin-bottom:10px;

}



/* Description */


.category-card p{

    font-size:13px;

    line-height:1.5;

    color:#555;

    margin:0;
    font-weight: 500;

}




/* View All Button */


.view-all-btn{

    display:block;

    width:max-content;

    margin:35px 0 0 auto;

    background:#203b2b;

    color:white;

    padding:16px 45px;

    border-radius:8px;

    font-size:15px;

    font-weight:500;

    transition:.3s ease;

}



.view-all-btn:hover{

    background:#d9b688;

    color:#000000;

}



/* Responsive */


@media(max-width:991px){


.product-category-grid{

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

}


}



@media(max-width:600px){


.product-category-section{

    padding:60px 0;

}


.product-category-grid{

    grid-template-columns:1fr;

}


.product-category-section .section-heading h2{

    font-size:26px;

}


.view-all-btn{

    margin:30px auto 0;

}


}

/* =========================================================
   START : Custom Packaging Hero Section
========================================================= */


.custom-packaging-hero{

    position:relative;

    overflow:hidden;

    background:#fbeee5;

    min-height:650px;

    display:flex;

    align-items:center;

}



/* ACF Background Image */

.packaging-bg-image{

    position:absolute;

    inset:0;

    background-size:contain;

    background-position:center;

    background-repeat:no-repeat;

    opacity:1;

    z-index:0;

}



/* Soft Animated Background Effect */


/*.custom-packaging-hero:before{*/

/*    content:"";*/

/*    position:absolute;*/

/*    width:500px;*/

/*    height:500px;*/

/*    border-radius:50%;*/

/*    background:rgba(215,168,105,.15);*/

/*    top:-200px;*/

/*    left:-150px;*/

/*    animation:heroMove 8s infinite alternate ease-in-out;*/

/*}*/



/*.custom-packaging-hero:after{*/

/*    content:"";*/

/*    position:absolute;*/

/*    width:400px;*/

/*    height:400px;*/

/*    border-radius:50%;*/

/*    background:rgba(35,67,51,.08);*/

/*    right:-150px;*/

/*    bottom:-150px;*/

/*    animation:heroMoveTwo 10s infinite alternate ease-in-out;*/

/*}*/



@keyframes heroMove{


from{

transform:translateY(0);

}


to{

transform:translateY(40px);

}


}


@keyframes heroMoveTwo{


from{

transform:translateX(0);

}


to{

transform:translateX(-40px);

}


}





.custom-packaging-wrapper{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}




.custom-packaging-content{

    width:45%;

}



.packaging-badge{

font-family:Montserrat,sans-serif;

font-size:22.89px;

line-height:31.78px;

font-weight:600;

color:#C08A43;

margin-bottom:15px;

}



.packaging-title{

font-family:Montserrat,sans-serif;

font-size:50px;

line-height:100%;

font-weight:700;

color:#111710;

margin-bottom:25px;

}



.packaging-title span{

color:#C08A43;

}



.packaging-description{

font-family:Montserrat,sans-serif;

font-size:18.1px;

line-height:27px;

font-weight:500;

color:#111710;

}



.packaging-description ul{

list-style:none;

padding:0;

margin-top:25px;

}



.packaging-description li{

margin-bottom:12px;

display:flex;

align-items:center;

gap:10px;

}



.packaging-description li:before{

content:"✓";

background:#234333;

color:white;

width:17px;

height:17px;

border-radius:50%;

font-size:11px;

display:flex;

align-items:center;

justify-content:center;

}




.custom-packaging-image{

width:52%;

text-align:right;

}




.custom-packaging-image img{

width: 1200px;
max-width: 1000px;

}



/*.floating-box{*/

/*animation:floatBox 5s infinite ease-in-out;*/

/*}*/



@keyframes floatBox{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-12px);

}


}




/* Tablet */

@media(max-width:991px){


.custom-packaging-hero{

padding:70px 0;

background:#f5e7d8;

}



.packaging-bg-image{

display:none;

}


.custom-packaging-wrapper{

flex-direction:column;

}



.custom-packaging-content,
.custom-packaging-image{

width:100%;

}



.custom-packaging-content{

text-align:center;

}



.custom-packaging-image{

text-align:center;

}



.packaging-title{

font-size:42px;

}



}




/* Mobile */

@media(max-width:600px){


.custom-packaging-hero{

min-height:auto;

padding:50px 0;

}



.packaging-badge{

font-size:18px;

}



.packaging-title{

font-size:34px;

}



.packaging-description{

font-size:15px;

line-height:24px;

}



}



.custom-packaging-hero .packaging-btn{

    display:inline-flex !important;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:#D7A869 !important;

    color:#111710 !important;

    padding:14px 25px;

    border-radius:8px;

    font-family:Montserrat,sans-serif;

    font-size:15px;

    font-weight:600;

    line-height:1;

    text-decoration:none !important;

    margin-top:25px;

    border:none;

    transition:.3s ease;

}



.custom-packaging-hero .packaging-btn span{

    font-size:18px;

}



.custom-packaging-hero .packaging-btn:hover{

    background:#111710 !important;

    color:#ffffff !important;

}





/* =========================================================
   END : Custom Packaging Hero Section
========================================================= */


/* =========================================================
   START : Brand Logos Marquee Section
========================================================= */


.brand-logo-section{

    position:relative;

    width:100%;

    overflow:hidden;

    padding:45px 0 50px;

    background:#ffffff;

}




/* Heading */

.brand-logo-heading{

    text-align:center;

    margin-bottom:30px;

}


.brand-logo-heading p{

    margin:0;

    font-family:Montserrat,sans-serif;

    font-size:16px;

    line-height:1.4;

    font-weight:600;

    color:#111710;

}





/* =========================================================
   START : Marquee Wrapper
========================================================= */


.brand-logo-marquee{

    position:relative;

    width:100%;

    max-width:100%;

    overflow:hidden;

}





/* Fade */


.brand-logo-marquee::before,
.brand-logo-marquee::after{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    width:100px;

    z-index:2;

    pointer-events:none;

}



.brand-logo-marquee::before{

    left:0;

    background:linear-gradient(
        to right,
        #D9B688,
        transparent
    );

}



.brand-logo-marquee::after{

    right:0;

    background:linear-gradient(
        to left,
        #D9B688,
        transparent
    );

}





/* =========================================================
   START : Moving Track
========================================================= */


.brand-logo-track{


    display:flex;


    align-items:center;


    width:max-content;


    flex-wrap:nowrap;


    gap:30px;


    background:#D9B688;


    will-change:transform;


    animation:brandLogoScroll 60s linear infinite;


}





.brand-logo-item{


    flex:0 0 auto;


    width:180px;


    height:120px;


    display:flex;


    align-items:center;


    justify-content:center;


}





.brand-logo-item img{


    display:block;


    width:auto;


    height:auto;


    max-width:130px;


    max-height:55px;


    object-fit:contain;


    filter:grayscale(100%);


    opacity:.65;


    transition:.3s ease;


}





.brand-logo-item:hover img{


    filter:grayscale(0);


    opacity:1;


    transform:scale(1.08);


}





/* Animation */


@keyframes brandLogoScroll{


    from{

        transform:translateX(0);

    }


    to{

        transform:translateX(-50%);

    }


}






.brand-logo-marquee:hover 
.brand-logo-track{


    animation-play-state:paused;


}





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


@media(max-width:991px){


.brand-logo-section{


    padding:40px 0 45px;


}



.brand-logo-track{


    gap:25px;

}



.brand-logo-item{


    width:140px;

    height:90px;


}



.brand-logo-item img{


    max-width:110px;


    max-height:45px;


}


}





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


@media(max-width:600px){



.brand-logo-section{


    padding:30px 0 35px;


}




.brand-logo-heading p{


    font-size:14px;


}




.brand-logo-track{


    gap:20px;


    animation-duration:35s;


}




.brand-logo-item{


    width:95px;


    height:65px;


}



.brand-logo-item img{


    max-width:75px;


    max-height:35px;


}




.brand-logo-marquee::before,
.brand-logo-marquee::after{


    width:30px;


}



}





/* =========================================================
   GLOBAL MOBILE OVERFLOW FIX
========================================================= */


html,
body{


    max-width:100%;


    overflow-x:hidden;


}






@media(prefers-reduced-motion:reduce){


.brand-logo-track{


    animation:none;


}


}



/* =========================================================
   END : Brand Logos Marquee Section
========================================================= */




/* =========================================================
   START : Why Choose Us Section
========================================================= */


.why-choose-section{

    position:relative;

    width:100%;

    overflow:hidden;

    padding:90px 0 85px;

    background:#09281f;

}


/* Background Image */

.why-choose-background{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    z-index:0;

}



.why-choose-section::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(5,27,20,0.18);

    z-index:1;

}



/* Main Container */

.why-choose-section .ookla-container{

    position:relative;

    z-index:2;

}





/* =========================================================
   HEADING
========================================================= */


.why-choose-heading{

    max-width:850px;

    margin:0 auto 75px;

    text-align:center;

}



.why-choose-eyebrow{

    margin-bottom:15px;

    font-family:Montserrat,sans-serif;

    font-size:13px;

    font-weight:600;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#dda85f;

}



.why-choose-title{

    margin:0 0 20px;

    font-family:Montserrat,sans-serif;

    font-size:56px;

    line-height:1.1;

    font-weight:700;

    color:#ffffff;

}



.why-choose-title span{

    color:#dda85f;

}



.why-choose-intro{

    max-width:720px;

    margin:0 auto;

    font-family:Montserrat,sans-serif;

    font-size:18px;

    line-height:29px;

    font-weight:400;

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

}




/* =========================================================
   CARDS GRID
========================================================= */


.why-choose-grid{

    display:grid;

    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:20px;

    align-items:stretch;

}





/* =========================================================
   CARD
========================================================= */


.why-choose-card{

    position:relative;

    min-width:0;

    min-height:250px;

    padding:75px 22px 35px;


    border:1px solid rgba(221,168,95,.45);

    border-radius:28px;


    text-align:center;


    background:rgba(15,61,46,.45);


    backdrop-filter:blur(5px);

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


    transition:.35s ease;

}



.why-choose-card:hover{

    transform:translateY(-8px);

    border-color:#dda85f;

    background:rgba(20,75,56,.65);

}





/* =========================================================
   ICON
========================================================= */


.why-choose-icon{


    position:absolute;

    top:-55px;

    left:50%;


    transform:translateX(-50%);


    width:110px;

    height:110px;


    display:flex;

    align-items:center;

    justify-content:center;


}



.why-choose-icon img{


    width:150px;

    height:130px;


    max-width:none;


    object-fit:contain;


    display:block;


    transition:.35s ease;


}



.why-choose-card:hover 
.why-choose-icon img{


    transform:scale(1.08);


}




/* =========================================================
   CARD TEXT
========================================================= */


.why-choose-card h3{


    margin:15px 0 15px;


    font-family:Montserrat,sans-serif;


    font-size:18px;


    line-height:1.35;


    font-weight:700;


    color:#ffffff;


}



.why-choose-card p{


    margin:0;


    font-family:Montserrat,sans-serif;


    font-size:14px;


    line-height:23px;


    font-weight:400;


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


}




/* Bottom Gold Line */


.why-choose-card::after{


    content:"";


    position:absolute;


    left:50%;


    bottom:22px;


    transform:translateX(-50%);


    width:35px;


    height:3px;


    border-radius:20px;


    background:#dda85f;


}





/* =========================================================
   BUTTON
========================================================= */


.why-choose-button-wrap{


    margin-top:55px;


    text-align:center;


}



.why-choose-button{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:14px;


    min-width:260px;


    padding:17px 35px;


    border-radius:50px;


    background:#dda85f;


    color:#0d2b21;


    font-family:Montserrat,sans-serif;


    font-size:16px;


    font-weight:700;


    text-decoration:none;


    transition:.3s ease;


}



.why-choose-button:hover{


    background:#ffffff;


    color:#0d2b21;


    transform:translateY(-3px);


}



.why-choose-button span{


    font-size:20px;


}





/* =========================================================
   TABLET RESPONSIVE
========================================================= */


@media(max-width:1200px){


    .why-choose-grid{


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


        row-gap:80px;


    }


}





@media(max-width:768px){


    .why-choose-section{


        padding:65px 0;


    }



    .why-choose-background{


        display:none;


    }



    .why-choose-title{


        font-size:40px;


    }



    .why-choose-intro{


        font-size:16px;


        line-height:26px;


    }



    .why-choose-grid{


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


        gap:80px 20px;


    }


}





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


@media(max-width:520px){


    .why-choose-section{


        padding:55px 0;


    }



    .why-choose-eyebrow{


        font-size:11px;


        letter-spacing:3px;


    }



    .why-choose-title{


        font-size:34px;


    }



    .why-choose-grid{


        grid-template-columns:1fr;


    }



    .why-choose-card{


        max-width:360px;


        width:100%;


        margin:auto;


    }



    .why-choose-button{


        width:100%;


        max-width:320px;


    }


}



/* =========================================================
   END : Why Choose Us Section
========================================================= */

/* =========================================================
   START : Product Showcase Section
========================================================= */


.product-showcase-section{

    padding:90px 0;

    background:#faf7f2;

    overflow:hidden;

}



.product-showcase-section .ookla-container{

    width:100%;

}



/* =========================================================
   START : Heading
========================================================= */


.product-showcase-heading{

    text-align:center;

    max-width:900px;

    margin:0 auto 45px;

}



.product-showcase-eyebrow{

    display:block;

    margin-bottom:15px;

    font-family:Montserrat,sans-serif;

    font-size:14px;

    font-weight:600;

    letter-spacing:6px;

    color:#c08a43;

}



.product-showcase-title{

    margin:0 0 18px;

    font-family:Montserrat,sans-serif;

    font-size:55px;

    line-height:1.1;

    font-weight:700;

    color:#10251d;

}



.product-showcase-title span{

    color:#c08a43;

}



.product-showcase-description{

    max-width:700px;

    margin:auto;

    font-family:Montserrat,sans-serif;

    font-size:18px;

    line-height:30px;

    font-weight:400;

    color:#555;

}



/* =========================================================
   END : Heading
========================================================= */







/* =========================================================
   START : Category Tabs
========================================================= */


.product-showcase-tabs{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:50px;

}



.product-showcase-tab{


    cursor:pointer;


    display:inline-flex;


    align-items:center;


    justify-content:center;



    padding:14px 28px;


    border-radius:50px;


    border:1px solid #ddd3c7;


    background:#ffffff;


    color:#10251d;


    font-family:Montserrat,sans-serif;


    font-size:15px;


    font-weight:600;


    line-height:1;


    transition:.3s ease;


}



.product-showcase-tab span{

    display:none;

}



.product-showcase-tab:hover,
.product-showcase-tab.active{


    background:#12382a;


    color:#ffffff;


    border-color:#12382a;


}



/* =========================================================
   END : Category Tabs
========================================================= */








/* =========================================================
   START : Product Grid
========================================================= */


.product-showcase-grid{

    display:grid;

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

    gap:25px;

}



.product-showcase-card{


    background:#ffffff;


    border-radius:25px;


    overflow:hidden;


    border:1px solid #eee5db;


    transition:.35s ease;


}



.product-showcase-card:hover{


    transform:translateY(-8px);


    box-shadow:0 20px 40px rgba(0,0,0,.08);


}




/* Product Image */


.product-showcase-image{


    height:270px;


    padding:25px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#f5eee5;


}




.product-showcase-image img{


    width:100%;


    height:100%;


    object-fit:contain;


    transition:.35s ease;


}



.product-showcase-card:hover 
.product-showcase-image img{


    transform:scale(1.05);


}





/* Content */


.product-showcase-content{


    padding:25px;


}



.product-showcase-category{


    display:block;


    margin-bottom:10px;


    font-family:Montserrat,sans-serif;


    font-size:12px;


    letter-spacing:3px;


    text-transform:uppercase;


    color:#c08a43;


}




.product-showcase-content h3{


    margin:0 0 12px;


    font-family:Montserrat,sans-serif;


    font-size:22px;


    line-height:1.3;


    font-weight:700;


    color:#10251d;


}




.product-showcase-content p{


    margin:0 0 25px;


    font-family:Montserrat,sans-serif;


    font-size:15px;


    line-height:25px;


    color:#666;


}





.product-showcase-link{


    display:inline-flex;


    align-items:center;


    gap:10px;


    font-family:Montserrat,sans-serif;


    font-size:15px;


    font-weight:600;


    color:#10251d;


    text-decoration:none;


}



.product-showcase-link:hover{


    color:#c08a43;


}



.product-showcase-link span{


    color:#c08a43;


    font-size:20px;


}



/* =========================================================
   END : Product Grid
========================================================= */








/* =========================================================
   START : View All Button
========================================================= */


.product-showcase-button{


    text-align:center;


    margin-top:50px;


}



.product-showcase-button a{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:15px;


    padding:17px 40px;


    border-radius:50px;


    background:#12382a;


    color:#ffffff;


    text-decoration:none;


    font-family:Montserrat,sans-serif;


    font-size:16px;


    font-weight:600;


    transition:.3s ease;


}



.product-showcase-button a:hover{


    background:#c08a43;


}



/* =========================================================
   END : View All Button
========================================================= */








/* =========================================================
   START : Benefits
========================================================= */


.product-showcase-benefits{


    margin-top:70px;


    display:grid;


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


    border-top:1px solid #ddd;


    padding-top:40px;


    gap:20px;


}




.product-showcase-benefit{


    text-align:center;


    display:flex;


    flex-direction:column;


    align-items:center;


    gap:8px;


}



.product-showcase-benefit img{


    width: 65px;
    height: 65px;
    padding: 10px;
    object-fit:contain;
    margin-bottom:8px;
    object-fit:contain;
    flex-shrink:0;
    border:1px solid #000000;
    border-radius:50px;


}



.product-showcase-benefit strong{


    font-family:Montserrat,sans-serif;


    font-size:17px;


    font-weight:700;


    color:#10251d;


}



.product-showcase-benefit small{


    font-family:Montserrat,sans-serif;


    font-size:14px;


    color:#777;


}



/* =========================================================
   END : Benefits
========================================================= */








/* =========================================================
   START : Tablet Responsive
========================================================= */


@media(max-width:1100px){



.product-showcase-grid{


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


}



.product-showcase-benefits{


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


}



}





/* =========================================================
   START : Mobile Responsive
========================================================= */


@media(max-width:600px){



.product-showcase-section{


    padding:60px 0;


}



.product-showcase-title{


    font-size:35px;


}



.product-showcase-description{


    font-size:15px;


    line-height:25px;


}




.product-showcase-tabs{


    justify-content:flex-start;


    flex-wrap:nowrap;


    overflow-x:auto;


    padding-bottom:10px;


}



.product-showcase-tabs::-webkit-scrollbar{


    display:none;


}



.product-showcase-tab{


    white-space:nowrap;


}



.product-showcase-grid{


    grid-template-columns:1fr;


}



.product-showcase-benefits{


    grid-template-columns:1fr;


}




}
/* =========================================================
   START : Product Showcase Benefits
========================================================= */


.product-showcase-benefits{

    margin-top:70px;

    display:grid;

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

    gap:25px;

    border-top:1px solid #ddd;

    padding-top:40px;

}



.product-showcase-benefit{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;
flex-direction: row;
}


.product-showcase-benefit-content{

    display:flex;

    flex-direction:column;

    gap:5px;

}



.product-showcase-benefit strong{

    font-family:Montserrat,sans-serif;

    font-size:17px;

    font-weight:700;

    color:#10251d;

}



.product-showcase-benefit small{

    font-family:Montserrat,sans-serif;

    font-size:14px;

    color:#777;

}



/* =========================================================
   END : Product Showcase Benefits
========================================================= */


/* =========================================================
   END : Product Showcase Section
========================================================= */



/* =========================================================
   START : How It Works Section
========================================================= */

.how-it-works-section{

    position:relative;

    /*min-height:320vh;*/

    background:#faf7f2;

    overflow:clip;

}


/* =========================================================
   START : Sticky Area
========================================================= */

.how-it-works-sticky{

    position:sticky;

    top:0;

    /*height:100vh;*/

    min-height:680px;
    padding:50px 0;

    display:flex;

    align-items:center;

    overflow:hidden;

    background-color:#faf7f2;

    background-image:url('https://www.ooklapackaging.com/wp-content/uploads/how-it-works.webp');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}


.how-it-works-sticky::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(250,247,242,.12);

    pointer-events:none;

    z-index:0;

}


.how-it-works-sticky .ookla-container{

    position:relative;

    z-index:1;

    width:100%;

}


/* =========================================================
   START : Heading
========================================================= */

.how-it-works-heading{

    max-width:780px;

    margin:0 auto 42px;

    text-align:center;

}


.how-it-works-eyebrow{

    display:block;

    margin-bottom:10px;

    font-family:Montserrat,sans-serif;

    font-size:12px;

    line-height:1;

    font-weight:600;

    letter-spacing:5px;

    color:#c08a43;

}


.how-it-works-title{

    margin:0 0 12px;

    font-family:Montserrat,sans-serif;

    font-size:48px;

    line-height:1.08;

    font-weight:700;

    color:#10251d;

}


.how-it-works-title span{

    color:#c08a43;

}


.how-it-works-description{

    max-width:680px;

    margin:0 auto;

    font-family:Montserrat,sans-serif;

    font-size:15px;

    line-height:24px;

    font-weight:400;

    color:#666;

}


/* =========================================================
   END : Heading
========================================================= */


/* =========================================================
   START : Process Grid
========================================================= */

.how-it-works-grid{

    display:grid;

    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:16px;

    align-items:stretch;

}


/* =========================================================
   START : Process Card
========================================================= */

/* =========================================================
   START : How It Works Card Animation
========================================================= */

.how-it-works-card{

    position:relative;

    min-width:0;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #ded6cc;

    border-radius:18px;

    /* JS animation starts from this state */
   
    transform:translateY(1px) scale(.96);

    
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22,1,.36,1),
        filter .7s ease,
        box-shadow .4s ease;

}


/*
 * Once JS adds this class,
 * the complete card becomes visible.
 */

.how-it-works-card.is-visible{

    opacity:1;

    transform:translateY(0) scale(1);

    filter:blur(0);

    box-shadow:0 16px 35px rgba(16,37,29,.10);

}


/* =========================================================
   END : How It Works Card Animation
========================================================= */


.how-it-works-card:hover{

    transform:translateY(-1px);

    box-shadow:0 20px 40px rgba(16,37,29,.14);

}


/* =========================================================
   START : Card Image
========================================================= */

.how-it-works-image-wrap{

    position:relative;

    height:225px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:#12382a;

    overflow:hidden;

}


.how-it-works-image-wrap::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(221,168,95,.16),
            transparent 65%
        );

    pointer-events:none;

}


.how-it-works-image-wrap img{

    position:relative;

    z-index:1;

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    transition:transform .6s ease;

}


.how-it-works-card:hover
.how-it-works-image-wrap img{

    transform:scale(1.06);

}


/* =========================================================
   END : Card Image
========================================================= */


/* =========================================================
   START : Card Content
========================================================= */

.how-it-works-card-content{

    padding:17px 17px 20px;

    background:#ffffff;

}


.how-it-works-number{

    display:block;

    margin-bottom:6px;

    font-family:Montserrat,sans-serif;

    font-size:12px;

    line-height:1;

    font-weight:700;

    letter-spacing:2px;

    color:#c08a43;

}


.how-it-works-card h3{

    margin:0 0 7px;

    font-family:Montserrat,sans-serif;

    font-size:17px;

    line-height:1.25;

    font-weight:700;

    color:#10251d;

}


.how-it-works-card p{

    margin:0;

    font-family:Montserrat,sans-serif;

    font-size:12px;

    line-height:19px;

    font-weight:400;

    color:#6b6b6b;

}


/* =========================================================
   END : Card Content
========================================================= */


/* =========================================================
   START : Progress
========================================================= */

.how-it-works-progress{

    width:230px;

    height:3px;

    margin:28px auto 0;

    overflow:hidden;

    border-radius:10px;

    background:#dfd6ca;

}


.how-it-works-progress-line{

    display:block;

    width:0;

    height:100%;

    border-radius:10px;

    background:#c08a43;

    transition:width .55s ease;

}


/* =========================================================
   END : Progress
========================================================= */


/* =========================================================
   START : Tablet
========================================================= */

@media(max-width:1100px){

    .how-it-works-section{

        min-height:300vh;

    }


    .how-it-works-title{

        font-size:42px;

    }


    .how-it-works-grid{

        gap:10px;

    }


    .how-it-works-image-wrap{

        height:190px;

        padding:15px;

    }


    .how-it-works-card-content{

        padding:15px;

    }


    .how-it-works-card h3{

        font-size:15px;

    }


    .how-it-works-card p{

        font-size:11px;

        line-height:17px;

    }

}


/* =========================================================
   END : Tablet
========================================================= */


/* =========================================================
   START : Mobile
========================================================= */

@media(max-width:700px){

    .how-it-works-section{

        min-height:auto;

        padding:65px 0;

        overflow:hidden;

        background:#faf7f2;

    }


    .how-it-works-sticky{

        position:relative;

        top:auto;

        height:auto;

        min-height:0;

        display:block;

        padding:0;

        overflow:visible;

        background-image:none;

        background-color:#faf7f2;

    }


    .how-it-works-sticky::before{

        display:none;

    }


    .how-it-works-heading{

        margin-bottom:40px;

    }


    .how-it-works-eyebrow{

        font-size:10px;

        letter-spacing:4px;

    }


    .how-it-works-title{

        font-size:32px;

        line-height:1.12;

    }


    .how-it-works-description{

        padding:0 10px;

        font-size:14px;

        line-height:23px;

    }


    .how-it-works-grid{

        grid-template-columns:1fr;

        gap:20px;

    }


    .how-it-works-card{

        opacity:1;

        transform:none;

        filter:none;

    }


    .how-it-works-card.is-visible{

        transform:none;

    }


    .how-it-works-image-wrap{

        height:260px;

    }


    .how-it-works-card-content{

        padding:20px;

    }


    .how-it-works-card h3{

        font-size:20px;

    }


    .how-it-works-card p{

        font-size:14px;

        line-height:22px;

    }


    .how-it-works-progress{

        display:none;

    }

}


/* =========================================================
   END : Mobile
========================================================= */


/* =========================================================
   START : Reduced Motion
========================================================= */

@media(prefers-reduced-motion:reduce){

    .how-it-works-card{

        opacity:1;

        transform:none;

        filter:none;

        transition:none;

    }

}


/* =========================================================
   END : Reduced Motion
========================================================= */


/* =========================================================
   END : How It Works Section
========================================================= */



/* =========================================================
   START : Homepage Long Content Section
========================================================= */

.ookla-home-content-section{

    position:relative;

    width:100%;

    /*height:700px;*/

    background:#ffffff;

    overflow:hidden;

}


/* =========================================================
   START : Content Inner
========================================================= */

.ookla-home-content-inner{

    position:relative;

    width:100%;

    height:100%;

    max-width:1240px;

    margin:0 auto;

    padding:70px 30px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;

}


/* =========================================================
   START : Section Label
========================================================= */

.ookla-home-content-label{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

    flex-shrink:0;

}


.ookla-home-content-label span{

    display:block;

    width:32px;

    height:1px;

    background:#c08a43;

}


.ookla-home-content-label strong{

    font-family:Montserrat,sans-serif;

    font-size:11px;

    line-height:1;

    font-weight:600;

    letter-spacing:4px;

    color:#c08a43;

    text-transform:uppercase;

}


/* =========================================================
   START : Main Content Area
========================================================= */

.ookla-home-content{

    position:relative;

    width:100%;

    max-width:1240px;

    height:590px;

    margin:0 auto;

    overflow-y:auto;

    overflow-x:hidden;

    padding-right:20px;

    scroll-behavior:smooth;

}


/* Custom Scrollbar */

.ookla-home-content::-webkit-scrollbar{

    width:5px;

}


.ookla-home-content::-webkit-scrollbar-track{

    background:#f1ede7;

    border-radius:10px;

}


.ookla-home-content::-webkit-scrollbar-thumb{

    background:#c08a43;

    border-radius:10px;

}


/* Firefox */

.ookla-home-content{

    scrollbar-width:thin;

    scrollbar-color:#c08a43 #f1ede7;

}


/* =========================================================
   START : H1
========================================================= */

.ookla-home-content h1{

    margin:0 0 30px;

    font-family:Montserrat,sans-serif;

    font-size:48px;

    line-height:1.15;

    font-weight:700;

    letter-spacing:-1px;

    color:#10251d;

}


/* =========================================================
   START : H2
========================================================= */

.ookla-home-content h2{

    position:relative;

    margin:30px 0 22px;

    padding-left:20px;

    font-family:Montserrat,sans-serif;

    font-size:30px;

    line-height:1.3;

    font-weight:700;

    color:#10251d;

}


.ookla-home-content h2::before{

    content:"";

    position:absolute;

    left:0;

    top:4px;

    width:4px;

    height:30px;

    border-radius:10px;

    background:#c08a43;

}


/* =========================================================
   START : H3
========================================================= */

.ookla-home-content h3{

    margin:38px 0 14px;

    font-family:Montserrat,sans-serif;

    font-size:21px;

    line-height:1.4;

    font-weight:700;

    color:#10251d;

}


/* =========================================================
   START : Paragraph
========================================================= */

.ookla-home-content p{


    margin:0 0 22px;

    font-family:Montserrat,sans-serif;

    font-size:18px;

    line-height:1.9;

    font-weight:400;

    color:#555555;

}


/* First Paragraph */

.ookla-home-content > p:first-of-type{

    font-size:18px;

    line-height:1.85;

    color:#343a35;

}


/* =========================================================
   START : Strong
========================================================= */

.ookla-home-content strong{

    font-weight:700;

    color:#10251d;

}


/* =========================================================
   START : Unordered List
========================================================= */

.ookla-home-content ul{

    margin:25px 0 30px;

    padding:0;

    list-style:none;

}


.ookla-home-content ul li{

    position:relative;

    margin-bottom:13px;

    padding-left:27px;

    font-family:Montserrat,sans-serif;

    font-size:15px;

    line-height:1.7;

    color:#555b56;

}


.ookla-home-content ul li::before{

    content:"";

    position:absolute;

    left:0;

    top:9px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#c08a43;

}


/* =========================================================
   START : Ordered List
========================================================= */

.ookla-home-content ol{

    margin:25px 0 30px;

    padding-left:25px;

}


.ookla-home-content ol li{

    margin-bottom:12px;

    font-family:Montserrat,sans-serif;

    font-size:15px;

    line-height:1.7;

    color:#555b56;

}


/* =========================================================
   START : Blockquote
========================================================= */

.ookla-home-content blockquote{

    margin:40px 0;

    padding:28px 32px;

    border-left:3px solid #c08a43;

    border-radius:0 12px 12px 0;

    background:#faf5ed;

}


.ookla-home-content blockquote p{

    margin:0;

    font-size:18px;

    line-height:1.7;

    font-weight:500;

    color:#10251d;

}


/* =========================================================
   START : Links
========================================================= */

.ookla-home-content a{

    color:#126b59;

    font-weight:600;

    text-decoration:none;

    transition:

        color .25s ease,

        border-color .25s ease;

}


.ookla-home-content a:hover{

    color:#c08a43;

}


/* =========================================================
   START : Horizontal Rule
========================================================= */

.ookla-home-content hr{

    width:100%;

    height:1px;

    margin:45px 0;

    border:0;

    background:#e8e2da;

}


/* =========================================================
   START : Bottom Decoration
========================================================= */

.ookla-home-content-bottom{

    display:flex;

    justify-content:center;

    margin-top:25px;

    flex-shrink:0;

}


.ookla-home-content-bottom span{

    display:block;

    width:70px;

    height:1px;

    background:#c08a43;

}


/* =========================================================
   START : DESKTOP CONTENT FADE EDGES
========================================================= */

.ookla-home-content-inner::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:70px;

    height:45px;

    pointer-events:none;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        #ffffff
    );

}


/* =========================================================
   START : TABLET
========================================================= */

@media(max-width:991px){

    .ookla-home-content-section{

        height:700px;

    }


    .ookla-home-content-inner{

        padding:60px 30px;

    }


    .ookla-home-content{

        max-width:850px;

        height:500px;

    }


    .ookla-home-content h1{

        font-size:42px;

    }


    .ookla-home-content h2{

        font-size:28px;

        margin-top:48px;

    }


    .ookla-home-content p{

        font-size:16px;

        line-height:1.85;

    }

}


/* =========================================================
   START : MOBILE
========================================================= */

@media(max-width:600px){

    .ookla-home-content-section{

        height:700px;

        padding:0;

    }


    .ookla-home-content-inner{

        height:100%;

        padding:50px 22px;

        display:flex;

        justify-content:flex-start;

    }


    .ookla-home-content-label{

        justify-content:center;

        margin-bottom:25px;

    }


    .ookla-home-content-label strong{

        font-size:9px;

        letter-spacing:3px;

    }


    .ookla-home-content-label span{

        width:22px;

    }


    .ookla-home-content{

        height:510px;

        max-width:none;

        padding-right:12px;

    }


    .ookla-home-content h1{

        font-size:32px;

        line-height:1.18;

        letter-spacing:-.5px;

    }


    .ookla-home-content h2{

        margin-top:45px;

        margin-bottom:18px;

        padding-left:16px;

        font-size:24px;

    }


    .ookla-home-content h2::before{

        width:3px;

        height:25px;

    }


    .ookla-home-content h3{

        margin-top:30px;

        font-size:19px;

    }


    .ookla-home-content p{

        font-size:14px;

        line-height:1.85;

        margin-bottom:18px;

    }


    .ookla-home-content > p:first-of-type{

        font-size:15px;

    }


    .ookla-home-content ul{

        margin:20px 0 25px;

    }


    .ookla-home-content ul li{

        font-size:14px;

        padding-left:24px;

    }


    .ookla-home-content ol li{

        font-size:14px;

    }


    .ookla-home-content blockquote{

        margin:30px 0;

        padding:22px 20px;

    }


    .ookla-home-content blockquote p{

        font-size:15px;

    }


    .ookla-home-content-bottom{

        margin-top:25px;

    }


    .ookla-home-content-inner::after{

        bottom:50px;

    }

}


/* =========================================================
   START : REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .ookla-home-content{

        scroll-behavior:auto;

    }

}


/* =========================================================
   END : Homepage Long Content Section
========================================================= */

/* =========================================================
   START : Packaging Banner Image Section
========================================================= */

.packaging-banner-image-section{
    width:100%;
    margin:0;
    padding:0;
    line-height:0;
}

.packaging-banner-image-section img{
    display:block;
    width:100%;
    height:auto;
    max-width:none;
}


/* =========================================================
   END : Packaging Banner Image Section
========================================================= */


/* =========================================================
   VIDEO SHOWCASE SECTION START
========================================================= */


.video-showcase-section{
    background:#ffffff;
    padding:100px 20px;
}


.video-showcase-container{

    max-width:1240px;
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:70px;

}



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


.video-content{

    width:38%;

}



.video-eyebrow{

    display:inline-block;

    font-family:Montserrat,sans-serif;

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#C08A43;

    margin-bottom:15px;

}



.video-main-title{

    font-family:Montserrat,sans-serif;

    font-size:52px;

    line-height:1.15;

    font-weight:700;

    color:#10251d;

    margin:0 0 25px;

}



.video-main-title span{

    color:#C08A43;

}




.video-description{

    font-family:Montserrat,sans-serif;

    font-size:17px;

    line-height:30px;

    font-weight:400;

    color:#555;

    margin-bottom:35px;

}





.video-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;


    background:#10251d;

    color:#ffffff;


    padding:16px 38px;

    border-radius:50px;


    font-family:Montserrat,sans-serif;

    font-size:15px;

    font-weight:600;


    text-decoration:none;


    transition:.3s ease;

}



.video-btn:hover{

    background:#C08A43;

    color:#ffffff;

}






/* =========================================================
   VIDEO GALLERY
========================================================= */


.video-gallery{

    width:62%;

    display:flex;

    align-items:center;

    gap:22px;

}



/* BIG VIDEO */


.main-video-box{

    position:relative;

    flex:1;

    cursor:pointer;

    overflow:hidden;

    border-radius:25px;

}



.main-video-box img{


    width:100%;

    height:450px;

    object-fit:cover;

    display:block;

    transition:.5s ease;

}



.main-video-box:hover img{

    transform:scale(1.05);

}





/* PLAY BUTTON */


.play-video-btn{


    position:absolute;


    top:50%;

    left:50%;


    transform:translate(-50%,-50%);



    width:80px;

    height:80px;



    border-radius:50%;

    border:none;



    background:#C08A43;



    color:#ffffff;


    font-size:28px;


    display:flex;

    align-items:center;

    justify-content:center;



    box-shadow:0 10px 30px rgba(0,0,0,.25);
    z-index: 99999;
    cursor: pointer;



}




.play-video-btn span{

    margin-left:5px;

}






/* =========================================================
   SIDE THUMBNAILS
========================================================= */


.video-thumbnails{


    width:110px;


    height:380px;



    display:flex;

    flex-direction:column;


    gap:18px;



    overflow-y:auto;



    padding:5px;



    scrollbar-width:thin;

    scrollbar-color:#C08A43 transparent;

}




.video-thumbnails::-webkit-scrollbar{

    width:5px;

}


.video-thumbnails::-webkit-scrollbar-thumb{

    background:#C08A43;

    border-radius:20px;

}





.video-thumb{


    cursor:pointer;


    border-radius:15px;


    overflow:hidden;


    border:2px solid transparent;


    transition:.3s ease;


}




.video-thumb img{


    width:100%;


    height:85px;


    object-fit:cover;


    display:block;


}




.video-thumb:hover{


    transform:translateX(-5px);

    border-color:#C08A43;


}



.video-thumb.active{


    border-color:#10251d;

}







/* =========================================================
   POPUP
========================================================= */


.video-popup{


    position:fixed;


    inset:0;


    background:rgba(0,0,0,.85);



    display:none;


    align-items:center;

    justify-content:center;



    z-index:99999;


}



.video-popup.active{


    display:flex;


}





.video-popup-inner{


    width:90%;


    max-width:950px;


    position:relative;


}





.video-popup iframe{


    width:100%;


    height:520px;


    border-radius:15px;


}





.close-video{


    position:absolute;


    right:-10px;


    top:-60px;


    background:none;


    border:none;


    color:#ffffff;


    font-size:55px;


    cursor:pointer;


}





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


@media(max-width:1100px){



.video-showcase-container{

    gap:40px;

}



.video-main-title{

    font-size:42px;

}



.main-video-box img{

    height:380px;

}



.video-thumbnails{

    width:90px;

}



}





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


@media(max-width:768px){


.video-showcase-section{

    padding:70px 20px;

}




.video-showcase-container{


    flex-direction:column;

}



.video-content,

.video-gallery{


    width:100%;

}



.video-content{

    text-align:center;

}




.video-main-title{


    font-size:34px;

}




.video-description{


    font-size:15px;

    line-height:26px;

}




.video-gallery{


    flex-direction:column;


}





.main-video-box img{


    height:280px;


}





.video-thumbnails{


    width:100%;


    height:auto;


    flex-direction:row;


    overflow-x:auto;


}




.video-thumb{


    flex:0 0 110px;


}




.video-thumb img{


    height:75px;


}





.video-popup iframe{


    height:260px;


}


.close-video{


    font-size:40px;


}


}



/* =========================================================
   VIDEO SHOWCASE SECTION END
========================================================= */

/* =========================================================
   START : PERSONALIZED QUOTE SECTION
========================================================= */


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


.quote-section{
    width:100%;
}



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


.quote-top-container{

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    padding:80px 20px 140px;

    position:relative;

}



.quote-top-container:before{

    content:"";

    position:absolute;

    inset:0;

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

}



.quote-inner{

    position:relative;

    z-index:2;

    max-width:1240px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}







/* ================= LEFT CONTENT ================= */


.quote-left{

    width:50%;

}



.quote-eyebrow{

    display:inline-block;

    font-family:Montserrat,sans-serif;

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#C08A43;

    margin-bottom:15px;

}



.quote-title{

    font-family:Montserrat,sans-serif;

    font-size:52px;

    line-height:1.15;

    font-weight:700;

    color:#10251d;

    margin:0 0 20px;

}



.quote-title span{

    color:#C08A43;

}



.quote-description{

    font-family:Montserrat,sans-serif;

    font-size:17px;

    line-height:1.8;

    color:#555;

    max-width:520px;

}







/* ================= FEATURES ================= */


.quote-features{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

    margin-top:35px;

}



.quote-feature{

    display:flex;

    align-items:center;

    gap:12px;

}



.feature-icon{

    width:45px;

    height:45px;

    border-radius:50%;

    border:1px solid #C08A43;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#C08A43;

    font-size:18px;

}



.quote-feature h4{

    margin:0 0 5px;

    font-family:Montserrat,sans-serif;

    font-size:15px;

    color:#10251d;

}



.quote-feature p{

    margin:0;

    font-family:Montserrat,sans-serif;

    font-size:12px;

    color:#666;

    line-height:1.5;

}







/* ================= RIGHT IMAGE ================= */


.quote-right{

    width:50%;

    text-align:center;

}



.quote-right img{

    width:100%;

    max-width:650px;

    height:auto;

}







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


.quote-form-container{

    max-width:1100px;

    margin:-80px auto 0;

    background:#ffffff;

    position:relative;

    z-index:5;

    border-radius:30px;

    padding:50px 45px;

    box-shadow:0 15px 50px rgba(0,0,0,.12);

}






/* ================= GRAVITY FORM ================= */


.quote-form-inner .gform_heading{

    display:none;

}



.quote-form-inner .gfield_label{

    font-family:Montserrat,sans-serif;

    font-size:15px;

    font-weight:600;

    color:#10251d;

    margin-bottom:8px;

}



.quote-form-inner input,
.quote-form-inner select,
.quote-form-inner textarea{


    width:100%;


    border:1px solid #D9B688 !important;


    border-radius:12px !important;


    background:#ffffff !important;


    padding:15px 18px !important;


    font-family:Montserrat,sans-serif;


    font-size:14px;


    color:#333;


    transition:.3s ease;


}





.quote-form-inner input:focus,
.quote-form-inner select:focus,
.quote-form-inner textarea:focus{


    border-color:#C08A43 !important;


    outline:none;


}







/* ================= FORM GRID ================= */


.quote-form-inner .gform_fields{

    row-gap:25px;

}



.quote-form-inner .gfield--width-half{

    grid-column:span 6;

}






/* ================= TEXTAREA ================= */


.quote-form-inner textarea{

    min-height:150px;

    resize:none;

}






/* ================= ARTWORK UPLOAD ================= */


.quote-form-inner .ginput_container_fileupload{


    border:1px dashed #C08A43;


    border-radius:16px;


    padding:35px 25px;


    background:#fffaf3;


    text-align:center;


    transition:.3s ease;


}



.quote-form-inner .ginput_container_fileupload:hover{


    background:#fff5e6;


    border-color:#10251d;


}





.quote-form-inner .gform_drop_area{


    border:none !important;

    background:transparent !important;

    padding:0 !important;

}





.quote-form-inner .gform_drop_instructions{


    font-family:Montserrat,sans-serif;

    color:#555;

    font-size:15px;


}




.quote-form-inner .gform_fileupload_rules{


    font-family:Montserrat,sans-serif;

    font-size:12px;

    color:#777;

}








/* ================= UPLOAD BUTTON ================= */


.quote-form-inner .gform_button_select_files{


    background:#10251d !important;


    color:white !important;


    border:none !important;


    padding:12px 25px !important;


    border-radius:8px !important;


    font-family:Montserrat,sans-serif;


    font-weight:600;


    margin-top:15px;


    cursor:pointer;


}



.quote-form-inner .gform_button_select_files:hover{


    background:#C08A43 !important;


}








/* ================= SUBMIT BUTTON ================= */


.quote-form-inner .gform_button{


    background:#10251d !important;


    color:#ffffff !important;


    border:none !important;


    padding:16px 45px !important;


    border-radius:50px !important;


    font-family:Montserrat,sans-serif;


    font-weight:600;


    cursor:pointer;


    transition:.3s ease;


}



.quote-form-inner .gform_button:hover{


    background:#C08A43 !important;


}


#gfield_upload_rules_1_18{
    display:none;
}
.gchoice {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
}
.gchoice .gfield-choice-input{
    width: 10%;
}
.gfield_radio{
    width:700px;
    grid-column-gap:0px !important;
}
.gform_wrapper.gravity-theme .gfield textarea.medium {
    height: 177px !important;
}
.icon-heading{
    display: flex;
    align-items: center;
    gap: 15px;
}


/* ================= RESPONSIVE TABLET ================= */


@media(max-width:992px){



.quote-inner{

    flex-direction:column;

}



.quote-left,
.quote-right{

    width:100%;

}



.quote-left{

    text-align:center;

}



.quote-description{

    margin:auto;

}



.quote-features{

    justify-content:center;

}



.quote-title{

    font-size:42px;

}




.quote-form-container{

    margin:-50px 20px 0;

}



}








/* ================= RESPONSIVE MOBILE ================= */


@media(max-width:600px){



.quote-top-container{

    padding:60px 20px 100px;

}



.quote-title{

    font-size:34px;

}



.quote-description{

    font-size:15px;

}



.quote-features{

    flex-direction:column;

    align-items:center;

}



.quote-form-container{


    padding:30px 15px;


    border-radius:20px;


}



.quote-form-inner .gfield--width-half{


    grid-column:span 12;


}



}




/* =========================================================
   END : PERSONALIZED QUOTE SECTION
========================================================= */