/*==================================================
    JJ Timberland
    Main Stylesheet
===================================================*/

/*==============================
        Google Fonts
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:wght@500;600;700;800&display=swap');


/*==============================
        CSS Variables
==============================*/
:root{

    --primary:#8B5E3C;
    --secondary:#4E342E;
    --accent:#C89B3C;
    --dark:#1E1E1E;
    --white:#ffffff;
    --light:#f8f8f8;
    --text:#666666;
    --border:#ececec;

    --transition:.4s ease;
    --radius:12px;
    --shadow:0 15px 45px rgba(0,0,0,.12);

}

/*==============================
        Reset
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    /* font-family:'Poppins',sans-serif; */
      /* font-family: "Noto Sans", sans-serif; */
  /* font-family: "Roboto Slab", serif; */


  font-family: "Playfair Display", serif;
    color:var(--text);
    background:#fbfaf6;
    overflow-x:hidden;

}



/* .noto-sans-<uniquifier> {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
} */



img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    transition:var(--transition);

}

ul{
    list-style:none;
    padding:0;
    margin:0;
}

section{

    position:relative;
    padding:100px 0;
    transition: 0.4s;

}

.container{

    max-width:1320px;

}

h1,h2,h3,h4,h5{

    font-family:'Playfair Display',serif;
    color:var(--dark);

}

p{

    line-height:1.9;
    margin-bottom:0;

}

/*==============================
        Navbar
==============================*/

/* .navbar{

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    padding: 22px 0;

    background: #171717;

    transition: all .4s ease;

}

.navbar.scrolled{
 background: #ffffff;

    padding: 14px 0;

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

.logo-box{

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

}

.logo-icon{

    width:55px;
    height:55px;
    background:linear-gradient(135deg,#8B5E3C,#B9845B);
    border-radius:50%;

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

    color:#fff;
    font-size:22px;

}

.logo-text h4{

    margin:0;
    color:#ffffff;
    font-size:26px;
    font-weight:700;
    transition:.4s;

}

.logo-text span{

    color:#ffffff;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:11px;
    transition:.4s;

}

.navbar.scrolled .logo-text h4,
.navbar.scrolled .logo-text span{

    color:#222;

}

.navbar-nav{

    gap:18px;

}

.nav-link{

    color:#ffffff;
    font-size:15px;
    font-weight:500;
    position:relative;

}

.navbar.scrolled .nav-link{

    color:#222;

}

.nav-link::after{

    content:'';
    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px; */



    /* background:var(--accent); */



    /* transition:.35s;

}

.nav-link:hover::after{

    width:100%;

}

.nav-link:hover{

    color:var(--accent);

} */




.dropdown-menu{

    border:none;
    border-radius:12px;
    padding:15px;
    box-shadow:var(--shadow);

}

.dropdown-item{

    padding:12px 18px;
    border-radius:8px;
    transition:.35s;

}

.dropdown-item:hover{

    background:linear-gradient(135deg,#8B5E3C,#B9845B);
    color:white;

}


.dropdown-toggle i {
    font-size: 12px;
    margin-left: 6px;
    transition: 0.3s;
}

.nav-link:hover .fa-chevron-down {
    transform: rotate(180deg);
}

.dropdown-toggle::after {
    border-top-color: #222 !important;
}






/*=====================================
        SUB MENU
======================================*/

/* .dropdown-submenu{

    position:relative;

}

.dropdown-submenu>.submenu{

    position:absolute;

    top:0;

    left:100%;

    min-width:240px;

    background:#fff;

    border-radius:12px;

    padding:10px 0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    list-style:none;

}

.dropdown-submenu:hover>.submenu{

    opacity:1;

    visibility:visible;

}

.submenu .dropdown-item{

    padding:12px 22px;

    transition:.3s;

}

.submenu .dropdown-item:hover{

    background:#8B5E3C;

    color:#fff;

}

.submenu-toggle{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.submenu-toggle i{

    font-size:12px;

} */






/*==============================
        Quote Button
==============================*/

.quote-btn{

    background:var(--accent);
    color:#fff;

    padding:14px 28px;
    border-radius:40px;

    display:inline-flex;
    align-items:center;
    gap:10px;

    font-weight:600;

    transition:.35s;

}

.quote-btn:hover{

    background:var(--primary);
    color:#fff;

    transform:translateY(-4px);

}

/*==============================
        Mobile Menu
==============================*/

.menu-btn{

    color:#fff;
    font-size:28px;

}

.navbar.scrolled .menu-btn{

    color:#222;

}

/*==============================
        Buttons
==============================*/

.btn-primary-custom{

    background:var(--primary);
    color:#fff;
    padding:16px 38px;
    border-radius:40px;

    display:inline-flex;
    align-items:center;
    gap:12px;

    font-weight:600;

    transition:.35s;
     position:relative;

    overflow:hidden;

}

.btn-primary-custom:hover{

    background:var(--accent);
    color:#fff;
    transform:translateY(-5px);

}

.btn-outline-custom{

    border:2px solid #fff;
    color:#fff;

    padding:16px 38px;

    border-radius:40px;

    display:inline-flex;
    gap:10px;

    transition:.35s;

}

.btn-outline-custom:hover{

    background:#fff;
    color:#222;

}

.btn-primary-custom::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(255,255,255,.18),

        transparent

    );

    transform:translateX(-100%);

    transition:.6s;

}


.btn-primary-custom:hover::before{

    transform:translateX(100%);

}




/*==============================
        Section Heading
==============================*/

.section-subtitle{

    color:var(--accent);

    text-transform:uppercase;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:12px;

}

.section-title{

    font-size:56px;
    font-weight:700;
    line-height:1.15;
    margin-bottom:20px;

}

/*==============================
        Utilities
==============================*/

.radius{

    border-radius:18px;

}

.shadow-lg-custom{

    box-shadow:var(--shadow);

}

.bg-light-custom{

    background:#f8f8f8;

}

.text-primary-custom{

    color:var(--primary);

}





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

.hero-section{

    position:relative;

    min-height:100vh;

    /* background:url('../images/hero/hero-bg.jpg')
    center center/cover no-repeat; */

    display:flex;

    align-items:center;

    overflow:hidden;

}



.hero-overlay{

    position:absolute;

    inset:0;

    background:rgb(0 0 0 / 62%);

}

.hero-section .container{

    position:relative;
    z-index:2;

}

.hero-subtitle{

    display:inline-block;

    color:#C89B3C;

    letter-spacing:3px;

    font-size:15px;

    font-weight:600;

    margin-bottom:20px;

}

.hero-title{

    color:#fff;

    font-size:74px;

    line-height:1.1;

    font-weight:700;

    margin-bottom:30px;

}

.hero-title span{

    color:#C89B3C;

}

.hero-text{

    color:#ececec;

    font-size:18px;

    max-width:620px;

    line-height:1.9;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.scroll-down{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:2;

}

.scroll-down span{

    width:32px;

    height:55px;

    border:2px solid #fff;

    border-radius:30px;

    display:block;

    position:relative;

}

.scroll-down span::before{

    content:"";

    position:absolute;

    left:50%;

    top:10px;

    transform:translateX(-50%);

    width:6px;

    height:10px;

    background:#fff;

    border-radius:50px;

    animation:scroll 2s infinite;

}

@keyframes scroll{

    0%{

        opacity:1;
        top:10px;

    }

    100%{

        opacity:0;
        top:28px;

    }

}




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

.hero-slider{
    position: relative;
}

.heroSwiper{
    width:100%;
    height:100vh;
}

.heroSwiper .swiper-slide{
    overflow:hidden;
}

.hero-bg{
    position:relative;
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgb(0 0 0 / 62%);
}

.hero-bg .container{
    position:relative;
    z-index:5;
}

/*=========================
        Subtitle
==========================*/

.hero-subtitle{

    display:inline-flex;
    align-items:center;
    gap:15px;

    color:#D8A64D;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:15px;

    font-weight:600;

    margin-bottom:25px;

}

.hero-subtitle::after{

    content:"";

    width:70px;

    height:2px;

    background:#D8A64D;

}

/*=========================
        Heading
==========================*/

.hero-title{

    color:#fff;

    font-size:78px;

    line-height:1.08;

    font-weight:700;

    margin-bottom:25px;

}

.hero-title span{

    color:#D8A64D;

}

/*=========================
        Paragraph
==========================*/

.hero-bg p{

    color:#f4f4f4;

    font-size:19px;

    line-height:1.9;

    max-width:620px;

    margin-bottom:40px;

}

/*=========================
        Buttons
==========================*/

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.hero-buttons a{

    min-width:220px;

    text-align:center;

}

/*=========================
        Navigation
==========================*/

.heroSwiper .swiper-button-next,
.heroSwiper .swiper-button-prev{

    width:60px;

    height:60px;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    transition:.4s;

}

.heroSwiper .swiper-button-next:hover,
.heroSwiper .swiper-button-prev:hover{

    background:#C89B3C;

}

.heroSwiper .swiper-button-next::after,
.heroSwiper .swiper-button-prev::after{

    color:#fff;

    font-size:22px;

    font-weight:700;

}

/*=========================
        Pagination
==========================*/

.heroSwiper .swiper-pagination{

    bottom:45px !important;

}

.heroSwiper .swiper-pagination-bullet{

    width:14px;

    height:14px;

    background:#fff;

    opacity:.5;

}

.heroSwiper .swiper-pagination-bullet-active{

    width:42px;

    border-radius:30px;

    background:#C89B3C;

    opacity:1;

}

/*=========================
        Image Animation
==========================*/

.hero-bg{

    animation:zoomHero 9s linear infinite;

}

@keyframes zoomHero{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.08);

    }

}

/*=========================
        Content Animation
==========================*/

.hero-subtitle,
.hero-title,
.hero-bg p,
.hero-buttons{

    opacity:0;

    transform:translateY(60px);

}

.swiper-slide-active .hero-subtitle{

    animation:fadeUp .8s forwards;

}

.swiper-slide-active .hero-title{

    animation:fadeUp .8s .2s forwards;

}

.swiper-slide-active p{

    animation:fadeUp .8s .4s forwards;

}

.swiper-slide-active .hero-buttons{

    animation:fadeUp .8s .6s forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================
        STATISTICS
===================================*/

/*==============================
        PREMIUM STATS
==============================*/

.stats-section{

    position:relative;

    padding:50px 0;

    background:url(images/about.jpg) center/cover no-repeat;

    overflow:hidden;

}

.stats-overlay{

    position:absolute;

    inset:0;

    /* background:rgba(20,15,10,.75); */

}

.stats-section .container{

    position:relative;

    z-index:2;

}

.stats-heading{

    margin-bottom:60px;

}

.stats-heading .section-title{

    color:#000000;

    margin:20px 0;

}

.stats-heading p{

    max-width:720px;

    margin:auto;

    color:#666;

    font-size:18px;

}

.stats-wrapper{

    background:#2d1c12;

    border:2px solid #C89B3C;

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 30px 60px rgba(0,0,0,.3);

    margin-bottom: 75px;

}

.stat-box{

    position:relative;

    padding:70px 40px;

    text-align:center;

    height:100%;

}

.stat-box.middle{

    border-left:1px solid rgba(200,155,60,.5);

    border-right:1px solid rgba(200,155,60,.5);

}

.stat-circle{

    width:110px;

    height:110px;

    margin:auto;

    margin-bottom:30px;

    border-radius:50%;

    background:linear-gradient(135deg,#8B5E3C,#C89B3C);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    color:#fff;

    border:5px solid rgba(255,255,255,.15);

}

.stat-box h2{

    font-size:72px;

    color:#D8A64D;

    font-weight:700;

    margin-bottom:10px;

}

.stat-box h5{

    color:#fff;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:18px;

}

.line{

    display:block;

    width:70px;

    height:2px;

    background:#C89B3C;

    margin:20px auto;

}

.stat-box p{

    color:#ddd;

    line-height:1.8;

    font-size:16px;

}

.stat-box:hover{

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

}

.stat-box:hover .stat-circle{

    transform:rotateY(180deg);

    transition:.6s;

}

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

.about-section{

    padding:120px 0;
    background-color:#f0e4db;

}

.about-image{

    position:relative;

    height:480px;

}

/* Collage grid layout */

.collage-grid{

    position:relative;

    height:100%;

    width:100%;

    z-index:2;

}

.collage-item{

    position:absolute;

    overflow:hidden;

    border-radius:22px;

    box-shadow:0 20px 45px rgba(43,25,10,.18);

}

.collage-item-main{

    left:0;

    top:0;

    width:58%;

    height:100%;

}

.collage-item-top{

    right:0;

    top:0;

    width:38%;

    height:47%;

}

.collage-item-bottom{

    right:0;

    bottom:0;

    width:38%;

    height:47%;

}

.collage-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .6s cubic-bezier(.2,.8,.2,1);

}

.collage-item:hover img{

    transform:scale(1.07);

}

.collage-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(180deg,rgba(43,25,10,0) 55%,rgba(43,25,10,.35) 100%);

    pointer-events:none;

}

/* Dashed frame accent, offset behind the main image */

.collage-frame{

    position:absolute;

    top:-22px;

    left:-22px;

    width:62%;

    height:55%;

    border:2px dashed #8B5E3C;

    border-radius:22px;

    opacity:.55;

    z-index:1;

}

/* Soft dotted pattern accent */

.collage-dots{

    position:absolute;

    right:-18px;

    top:-18px;

    width:110px;

    height:110px;

    background-image:radial-gradient(#8B5E3C 2.5px,transparent 2.5px);

    background-size:14px 14px;

    opacity:.35;

    z-index:1;

}

/* Floating circular texture badge */

.collage-badge{

    position:absolute;

    left:-30px;

    top:32px;

    width:96px;

    height:96px;

    border-radius:50%;

    overflow:hidden;

    border:5px solid #f0e4db;

    box-shadow:0 15px 35px rgba(43,25,10,.25);

    z-index:3;

}

.collage-badge img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.experience-box{

    position:absolute;

    right:-20px;

    bottom:-30px;

    width:190px;

    background:#8B5E3C;

    color:#fff;

    border-radius:20px;

    text-align:center;

    padding:25px;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

    z-index:3;

}

.experience-box h2{

    color:#fff;

    font-size:52px;

    margin-bottom:5px;

}

.experience-box span{

    font-size:15px;

}

.about-content p{

    font-size:17px;

    line-height:1.9;

    margin-top:20px;

}

.about-features{

    display:grid;

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

    gap:20px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:500;

}

.feature-item i{

    color:#C89B3C;

    font-size:20px;

}



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

.products-section{

    background:#f8f7f4;

    padding:120px 0;

}

.section-description{

    max-width:650px;

    margin:auto;

    color:#666;

}

.product-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    transition:.4s;

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

    height:100%;

}

/* .product-card:hover{

    transform:translateY(-10px);

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

} */

.product-image{

    overflow:hidden;

}

.product-image img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.6s;

}

.product-card:hover img{

    transform:scale(1.08);

}

.product-content{

    padding:30px;

}

.product-content h4{

    margin-bottom:15px;

    font-size:28px;

}

.product-content p{

    margin-bottom:25px;

    color:#666;

}

.product-btn{

    color:#8B5E3C;

    font-weight:600;

}

.product-btn i{

    margin-left:8px;

    transition:.3s;

}

.product-btn:hover i{

    transform:translateX(6px);

}





/*=====================================
        WHY CHOOSE US
======================================*/

.why-section{

    padding:120px 0;

    background:#f0e4db;

}

.why-image{

    position:relative;

}

.why-image img{

    width:100%;

    border-radius:22px;

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

}

.experience-card{

    position:absolute;

    left:-25px;

    bottom:40px;

    width:210px;

    background:#8B5E3C;

    color:#fff;

    padding:30px;

    text-align:center;

    border-radius:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.2);

}

.experience-card h2{

    color:#fff;

    font-size:54px;

    margin-bottom:5px;

}

.experience-card span{

    font-size:15px;

    letter-spacing:1px;

}

.why-text{

    margin-top:20px;

    line-height:1.9;

}

.why-card{

    background:#fff;

    border-radius:16px;

    padding:30px;

    height:100%;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/* .why-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

} */

.why-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#C89B3C;

    color:#fff;

    font-size:26px;

    margin-bottom:20px;

    transition:.35s;

}

.why-card:hover .why-icon{

    transform:rotateY(180deg);

}

.why-card h5{

    margin-bottom:15px;

    font-size:22px;

}

.why-card p{

    color:#666;

    margin-bottom:0;

}



/*=====================================
        OUR PROCESS
======================================*/

.process-section{

    padding:120px 0;

    background:#f8f7f4;

}

.process-card{

    position:relative;

    background:#8b5e3c;

    padding:40px 30px;

    border-radius:18px;

    text-align:center;

    transition:.4s;

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

    height:100%;

}

/* .process-card:hover{

    transform:translateY(-10px);

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

} */

.process-number{

    position:absolute;

    top:20px;

    right:20px;

    font-size:18px;

    font-weight:700;

    color:#ffc853;

}

.process-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:#ba8d3c;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    transition:.35s;

}

.process-card:hover .process-icon{

    transform:rotateY(180deg);

    background:#C89B3C;

}

.process-card h4{

    margin-bottom:15px;

    font-size:26px;

    color: #ffffff;

}

.process-card p{

    color:#ffffff;

    line-height:1.8;

    font-size: 15px;

}

/*=====================================
        NAVBAR 2.0 - UNIQUE RESPONSIVE DESIGN
======================================*/

.header-area{
    position:relative;
    z-index:1000;
}

.navbar{
    --nav-text:#000000;
    --nav-muted:#c9c4b8;
    min-height:102px;
    padding:18px 0;
    background:linear-gradient(180deg, rgb(255 209 148 / 65%), rgba(23, 20, 16, .35));
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 10px 35px rgba(8,18,12,.16);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(4px);
    transition:padding .35s ease, background-color .35s ease, box-shadow .35s ease;
}

.navbar.scrolled{
    --nav-text:#1c2a21;
    --nav-muted:#657067;
    min-height:72px;
    padding:8px 0;
    background:rgba(251,250,246,.96);
    border-bottom-color:rgba(30,47,37,.08);
    box-shadow:0 12px 34px rgba(25,39,30,.12);
}

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

.navbar-brand{
    display:flex;
    align-items:center;
    padding:0;
    z-index:2;
}

.navbar-logo{
    width:190px;
    height:auto;
    transition:.3s ease;
}

.navbar-logo:hover{
    transform:scale(1.05);
}

/*=====================================
        DESKTOP NAV LINKS
======================================*/

.navbar .navbar-nav{
    gap:2px;
}

.navbar .nav-link-wrap{
    display:flex;
    align-items:center;
}

.navbar .nav-link{
    color:var(--nav-text);
    font-size:15px;
    font-weight:600;
    padding:12px 14px !important;
    line-height:1;
    position:relative;
    transition:color .25s ease;
}

.navbar .nav-link::after{
    content:'';
    position:absolute;
    left:14px;
    right:14px;
    bottom:6px;
    height:2px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .25s ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{
    transform:scaleX(1);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active{
    color:var(--accent);
}

/* Products dropdown caret (desktop = decorative, mobile = clickable) */
.navbar .dropdown-caret{
    display:none;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    padding:0;
    margin-left:2px;
    color:inherit;
    cursor:pointer;
}

.navbar .nav-arrow{
    font-size:12px;
    color:#000000;
    transition:transform .3s ease, color .25s ease;
}

.navbar .dropdown:hover .nav-arrow{
    color:var(--accent);
}

/*=====================================
        DROPDOWN MENU (Products)
======================================*/

.navbar .dropdown-menu{
    min-width:230px;
    margin-top:0 !important;
    padding:10px;
    border:none;
    background:#fffefb;
    border-radius:10px;
    box-shadow:0 20px 50px rgba(19,32,24,.18);
}

.navbar .dropdown-item{
    padding:12px 14px;
    border-radius:6px;
    color:#344139;
    font-size:14px;
    font-weight:500;
    transition:background-color .2s ease, color .2s ease, padding-left .2s ease;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
    padding-left:19px;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    color:#fff;
}

/*=====================================
        DESKTOP HOVER DROPDOWN
======================================*/

@media (min-width:992px){

    .navbar .dropdown{
        position:relative;
    }

    .navbar .dropdown-menu{
        display:block;
        position:absolute;
        opacity:0;
        visibility:hidden;
        transform:translateY(10px);
        transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
        pointer-events:none;
    }

    .navbar .dropdown:hover>.dropdown-menu,
    .navbar .dropdown:focus-within>.dropdown-menu{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    .navbar .dropdown:hover .nav-arrow{
        transform:rotate(180deg);
    }
}

/*=====================================
        GET A QUOTE BUTTON
======================================*/

.navbar .nav-cta{
    margin-left:16px;
}

.navbar .quote-btn{
    min-height:46px;
    padding:12px 24px;
    background:linear-gradient(135deg,var(--primary),var(--accent));
    border:none;
    border-radius:40px;
    font-size:14px;
    font-weight:700;
    box-shadow:0 10px 24px rgba(139,94,60,.3);
    transition:transform .25s ease, box-shadow .25s ease;
}

.navbar .quote-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(139,94,60,.4);
}

.navbar .quote-btn i{
    transition:transform .25s ease;
}

.navbar .quote-btn:hover i{
    transform:translateX(3px);
}

/*=====================================
        HAMBURGER TOGGLER (unique custom icon)
======================================*/

.navbar .navbar-toggler{
    position:relative;
    z-index:1102;
    width:46px;
    height:46px;
    padding:0;
    border-radius:10px;
    background:rgba(255,255,255,.1);
    transition:background-color .25s ease;
}

.navbar.scrolled .navbar-toggler{
    background:rgba(139,94,60,.1);
}

.navbar .navbar-toggler:focus{
    box-shadow:none;
}

.hamburger{
    position:relative;
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:22px;
    height:16px;
}

.hamburger-line{
    position:absolute;
    width:100%;
    height:2px;
    border-radius:2px;
    background:var(--nav-text);
    transition:transform .35s ease, opacity .25s ease, top .25s ease, background-color .3s ease;
}

.hamburger-line:nth-child(1){ top:0; }
.hamburger-line:nth-child(2){ top:7px; }
.hamburger-line:nth-child(3){ top:14px; }

body.nav-open .hamburger-line:nth-child(1){
    top:7px;
    transform:rotate(45deg);
}

body.nav-open .hamburger-line:nth-child(2){
    opacity:0;
}

body.nav-open .hamburger-line:nth-child(3){
    top:7px;
    transform:rotate(-45deg);
}

/*=====================================
        FOCUS STATES
======================================*/

.navbar-toggler:focus-visible,
.navbar .nav-link:focus-visible,
.navbar .quote-btn:focus-visible,
.navbar .dropdown-item:focus-visible,
.navbar .dropdown-caret:focus-visible{
    outline:3px solid rgba(211,163,92,.5);
    outline-offset:3px;
}

/*=====================================
        TABLET (992px - 1199px) TIGHTENING
======================================*/

@media (max-width:1199.98px) and (min-width:992px){
    .navbar .container{max-width:1140px;}
    .navbar-logo{width:165px;}
    .navbar .nav-link{padding-inline:9px !important;font-size:14px;}
    .navbar .nav-cta{margin-left:8px;}
    .navbar .quote-btn{padding-inline:16px;font-size:13px;}
}

/*=====================================
        MOBILE OFF-CANVAS NAV (<992px)
======================================*/

@media (max-width:991.98px){

    .navbar,
    .navbar.scrolled{
        min-height:70px;
        padding:10px 0;
        background:rgba(20,33,26,.97);
        --nav-text:#f7f4ec;
        --nav-muted:#c9c4b8;
        box-shadow:0 6px 20px rgba(0,0,0,.15);
    }

    .navbar-logo{width:150px;}

    /* Hide the default bootstrap toggler icon styles, we use custom hamburger */
    .navbar .navbar-toggler{display:inline-flex;align-items:center;justify-content:center;}

    /* Off-canvas panel */
    .navbar-collapse-panel{
        position:fixed;
        top:0;
        right:0;
        width:min(340px,86vw);
        height:100vh;
        height:100dvh;
        background:#fbfaf6;
        box-shadow:-15px 0 50px rgba(0,0,0,.35);
        padding:0 0 30px;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        transform:translateX(100%);
        transition:transform .4s cubic-bezier(.4,0,.2,1);
        z-index:1101;
    }

    body.nav-open .navbar-collapse-panel{
        transform:translateX(0);
    }

    .mobile-nav-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:18px 20px;
        border-bottom:1px solid rgba(30,47,37,.08);
        background:linear-gradient(135deg,var(--secondary),var(--primary));
    }

    .mobile-brand img{
        width:120px;
        height:auto;
    }

    .nav-close-btn{
        width:38px;
        height:38px;
        border-radius:50%;
        border:none;
        background:rgba(255,255,255,.15);
        color:#fff;
        font-size:16px;
        display:flex;
        align-items:center;
        justify-content:center;
        transition:background-color .25s ease, transform .25s ease;
    }

    .nav-close-btn:hover{
        background:rgba(255,255,255,.3);
        transform:rotate(90deg);
    }

    .navbar .navbar-nav{
        align-items:stretch !important;
        gap:2px;
        padding:14px 12px;
    }

    .navbar .nav-item{
        border-bottom:1px solid rgba(30,47,37,.06);
    }

    .navbar .nav-item:last-of-type{
        border-bottom:none;
    }

    .navbar .nav-link-wrap{
        display:flex;
        align-items:stretch;
        justify-content:space-between;
    }

    .navbar .nav-link{
        color:#26352b;
        padding:15px 8px !important;
        border-radius:4px;
        width:100%;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link:focus,
    .navbar .nav-link.active{
        color:#8b5e3c;
        background:#f5f1e9;
    }

    .navbar .nav-link::after{
        display:none;
    }

    /* Mobile dropdown caret becomes visible & tappable */
    .navbar .dropdown-caret{
        display:flex;
        width:46px;
        border-radius:4px;
    }

    .navbar .dropdown-caret .nav-arrow{
        color:#5c6b60;
    }

    .navbar .dropdown-caret:hover,
    .navbar .dropdown-caret.active{
        background:#f5f1e9;
    }

    .navbar .dropdown-caret.active .nav-arrow{
        transform:rotate(180deg);
        color:#8b5e3c;
    }

    /* Accordion style submenu, closed by default */
    .navbar .dropdown-menu{
        display:block;
        position:static;
        max-height:0;
        opacity:1;
        visibility:visible;
        overflow:hidden;
        margin:0 !important;
        padding:0 6px;
        box-shadow:none;
        background:#f5f1e9;
        border-radius:8px;
        transition:max-height .35s ease, padding .35s ease;
    }

    .navbar .dropdown-menu.show{
        max-height:260px;
        padding:8px 6px;
        margin-top:4px !important;
    }

    .navbar .dropdown-item{
        color:#3b4a40;
    }

    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:focus{
        padding-left:18px;
    }

    .navbar .nav-cta{
        margin:14px 0 0;
        padding:0 4px;
    }

    .navbar .quote-btn{
        width:100%;
        justify-content:center;
    }
}

@media (max-width:390px){
    .navbar-collapse-panel{
        width:100vw;
    }
    .navbar-logo{width:130px;}
}

/* Dark overlay behind the off-canvas panel */
.nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(10,15,10,.55);
    backdrop-filter:blur(2px);
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
    z-index:1020;
}

body.nav-open .nav-overlay{
    opacity:1;
    visibility:visible;
}

body.nav-open{
    overflow:hidden;
}

@media (min-width:992px){
    .nav-overlay,
    .mobile-nav-header,
    .navbar .nav-close-btn{
        display:none !important;
    }
}



/*=====================================
        FEATURED PROJECTS
======================================*/

.projects-section{

    padding:120px 0;

    background:#f0e4db;

}

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    height:350px;

    cursor:pointer;

}

.project-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.project-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:flex-end;

    flex-direction:column;

    padding:30px;

    background:linear-gradient(to top,
    rgba(0,0,0,.85),
    rgba(0,0,0,.15));

    transition:.4s;

}

.project-overlay span{

    color:#D8A64D;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;

    margin-bottom:10px;

}

.project-overlay h3{

    color:#fff;

    font-size:28px;

    margin-bottom:20px;

}

.project-overlay a{

    color:#fff;

    font-weight:600;

}

.project-overlay a i{

    margin-left:8px;

    transition:.3s;

}

.project-card:hover img{

    transform:scale(1.1);

}

.project-card:hover a i{

    transform:translateX(6px);

}




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

.proprietor-section{

    padding:120px 0;
    background:#f8f7f4;
    position:relative;
    overflow:hidden;

}

.proprietor-image{

    position:relative;

}

.proprietor-image img{

    width: 76%;
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
    margin: 13px;
    margin-left: 15px;

}

.owner-tag{

    position:absolute;

    left:-20px;
    bottom:30px;

    background:#fff;

    padding:14px 30px;

    border-radius:12px;

    font-family:'Playfair Display',serif;
    font-size:24px;

    color:#8B5E3C;

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

}

.proprietor-content h2{

    font-size:56px;

    margin-bottom:10px;

}

.proprietor-content h5{

    color:#C89B3C;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:18px;

    margin-bottom:30px;

}

.proprietor-content p{

    font-size:17px;

    line-height:1.9;

    margin-bottom:25px;

}

.owner-features{

    display:grid;

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

    gap:20px;

    margin:45px 0;

}

.owner-card{

    background:#fff;

    border-radius:18px;

    padding:24px 0px 31px;

    text-align:center;

    box-shadow:0 10px 30px rgb(0 0 0 / 10%);

    transition:.35s;

}

.owner-card:hover{

    transform:translateY(-8px);

}

.owner-card i{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#F4E8DA;

    color:#8B5E3C;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin:0 auto 20px;

}

.owner-card h6{

    font-size:22px;

    margin-bottom:8px;

}

.owner-card span{

    color:#666;

}

.owner-quote{

    margin-top:45px;

    background:#4E342E;

    padding:35px 158px;

    border-radius:20px;

    color:#fff;

}

.owner-quote i{

    font-size:34px;

    color:#C89B3C;

    margin-bottom:15px;

}

.owner-quote p{

    color:#fff;

    margin-bottom:20px;

}

.owner-quote h4{

    color:#C89B3C;

    margin:0;

}



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

.footer{

    background:#1B1B1B;

    color:#d5d5d5;

    padding:90px 0 20px;

}


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

.footer-logo{

    margin-bottom:25px;

}

.footer-logo a{

    display:inline-block;

}

.footer-logo-img{

    width:220px;
    height:auto;

    transition:0.3s ease;

}

.footer-logo-img:hover{

    transform:scale(1.05);

}

/* .footer-logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}

.footer-logo h3{

    color:#fff;

    margin-bottom:5px;

}

.footer-logo span{

    color:#C89B3C;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:2px;

} */

.footer-text{

    line-height:1.9;

    margin-bottom:30px;

}

.footer h4{

    color:#fff;

    margin-bottom:25px;

}

.footer ul{

    padding:0;

}

.footer ul li{

    list-style:none;

    margin-bottom:15px;

}

.footer ul li a{

    color:#cfcfcf;

    transition:.3s;

}

.footer ul li a:hover{

    color:#C89B3C;

    padding-left:8px;

}

.footer-contact li{

    display:flex;

    gap:15px;

    align-items:flex-start;

}

.footer-contact i{

    color:#C89B3C;

    margin-top:5px;

}

.footer-social{

    display:flex;

    gap:15px;

}

.footer-social a{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#2b2b2b;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    transition:.3s;

}

.footer-social a:hover{

    background:#C89B3C;

    transform:translateY(-5px);

}

.footer hr{

    border-color:rgba(255,255,255,.08);

    margin:50px 0 25px;

}

.footer-bottom{

    color:#999;

}

.footer-bottom span{

    color:#C89B3C;

    font-weight:600;

    transition:.3s;

}


/*=====================================
        POWERED BY
======================================*/

.powered-by{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    transition:.3s ease;
}

.powered-by span{
    color:#d8d8d8;
    font-size:15px;
    font-weight:500;
}

.powered-by img{
    height:34px;
    width:auto;
    transition:.3s ease;
}

.powered-by:hover img{
    transform:scale(1.08);
}

/* .powered-by:hover span{
    color:#C89B3C;
} */



.footer{
    background:
      linear-gradient(rgb(195 170 151), rgb(71 56 42));
    background-size:cover;
    background-position:center;
}

.footer-column{
    position:relative;
}

.footer-column::after{
    content:"";
    position:absolute;
    right:-15px;
    top:10px;
    width:1px;
    height:85%;
    background:rgba(255,255,255,.08);
}

.footer-column:last-child::after{
    display:none;
}

.footer h4{
    position:relative;
    padding-bottom:12px;
}

.footer h4::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:55px;
    height:2px;
    background:#C89B3C;
}

.footer-social a{
    border:1px solid rgba(255,255,255,.15);
    background:transparent;
}

.footer-social a:hover{
    background:#C89B3C;
    transform:translateY(-6px) rotate(360deg);
}


.footer-decoration{
    position:absolute;
    bottom:25px;
    right:50px;
    opacity:.08;
    width:220px;
}


/*=====================================
        SCROLL PROGRESS
======================================*/

#scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:4px;

    background:linear-gradient(90deg,#C89B3C,#8B5E3C);

    z-index:99999;

    transition:width .1s linear;

}

/*=====================================
        BACK TO TOP
======================================*/

#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#8B5E3C;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

    box-shadow:0 15px 35px rgba(0,0,0,.2);

}

#backToTop.show{

    opacity:1;

    visibility:visible;

}

#backToTop:hover{

    background:#C89B3C;

    transform:translateY(-6px);

}




/*=====================================
        WHATSAPP
======================================*/

.whatsapp-btn{

    position:fixed;

    right:30px;

    bottom:140px;

    width:58px;

    height:58px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    z-index:999;

    transition:.35s;

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}

.whatsapp-btn:hover{

    transform:translateY(-5px);

    color:#fff;

}



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

.call-btn{
    
    position:fixed;

    right:30px;

    bottom:210px;

    width:58px;

    height:58px;

    border-radius:50%;

    background:#8B5E3C;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    z-index:999;

    transition:.35s;

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}

.call-btn:hover{

    background:#C89B3C;

    color:#fff;

    transform:translateY(-5px);

}





/*=====================================
    SECTION BACKGROUND SHAPES
======================================*/

.section-shape{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}

.shape-1{
    width:280px;
    height:280px;
    top:-120px;
    left:-120px;

    background:radial-gradient(
        rgba(200,155,60,.08),
        transparent 70%
    );
}

.shape-2{
    width:220px;
    height:220px;
    bottom:-90px;
    right:-90px;

    background:radial-gradient(
        rgba(139,94,60,.08),
        transparent 70%
    );
}

.about-section,
.products-section,
.why-section,
.process-section,
.projects-section,
.sustainability-section{

    position:relative;
    overflow:hidden;

}

.about-section .container,
.products-section .container,
.why-section .container,
.process-section .container,
.projects-section .container,
.sustainability-section .container{

    position:relative;
    z-index:2;

}







.product-card,
.stat-card,
.process-card,
.why-card{

    transition:.45s cubic-bezier(.2,.8,.2,1);

}

.product-card:hover,
.stat-card:hover,
.process-card:hover,
.why-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 70px rgba(0,0,0,.12);

}



.project-card,
.product-image,
.why-image{

    position:relative;

    overflow:hidden;

}

.project-card::before,
.product-image::before,
.why-image::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

    z-index:5;

}

.project-card:hover::before,
.product-image:hover::before,
.why-image:hover::before{

    left:150%;

}




::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f4f4f4;

}

::-webkit-scrollbar-thumb{

    background:#8B5E3C;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#C89B3C;

}








/*=====================================
        PAGE BANNER
======================================*/

/* Teak wood */
.page-banner1{
    position:relative;

    padding:180px 0 110px;

    background:url('../images/gal1.jpg')
    center center/cover no-repeat;
}

.page-banner1 .container{

    position:relative;

    z-index:2;

}


.page-banner1 h1{

    color:#fff;

    font-size:64px;

    margin:20px 0;

    line-height:1.1;

}

.banner-overlay1{

    position:absolute;

    inset:0;

    background:linear-gradient(rgb(14 13 13 / 58%), rgb(0 0 0 / 72%));

}



/* rosewood */



.page-banner2{
    position:relative;

    padding:180px 0 110px;

    background:url('../images/rosewood1.jpg')
    center center/cover no-repeat;
}

.page-banner2 .container{

    position:relative;

    z-index:2;

}


.page-banner2 h1{

    color:#fff;

    font-size:64px;

    margin:20px 0;

    line-height:1.1;

}

.banner-overlay2{

    position:absolute;

    inset:0;

    background:linear-gradient(rgb(14 13 13 / 58%), rgb(0 0 0 / 72%));

}















.page-banner{

    position:relative;

    padding:180px 0 110px;

    background:url('../images/gal10.jpeg')
    center center/cover no-repeat;

}

.banner-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(rgb(11 11 11 / 40%), rgb(0 0 0 / 72%));

}

.page-banner .container{

    position:relative;

    z-index:2;

}

.page-subtitle{

    color:#D8A64D;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:600;

}

.page-banner h1{

    color:#fff;

    font-size:64px;

    margin:20px 0;

    line-height:1.1;

}

.breadcrumb-nav{

    display:flex;

    gap:12px;

    align-items:center;

    color:#fff;

}

.breadcrumb-nav a{

    color:#D8A64D;

}






/*=====================================
        COMPANY STORY
======================================*/

.company-story{

    padding:120px 0;

    background:#ffffff;

}

.story-image{

    position:relative;

}

.story-image img{

    width:100%;

    border-radius:22px;

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

}

.story-badge{

    position:absolute;

    bottom:35px;

    left:-25px;

    background:#8B5E3C;

    color:#fff;

    width:220px;

    text-align:center;

    padding:30px;

    border-radius:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.2);

}

.story-badge h2{

    color:#fff;

    font-size:54px;

    margin-bottom:5px;

}

.story-feature{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

    background:#f8f7f4;

    padding:18px 22px;

    border-radius:14px;

    transition:.35s;

}

.story-feature:hover{

    transform:translateX(8px);

    background:#fff;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.story-feature i{

    width:55px;

    height:55px;

    background:#C89B3C;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

.story-feature span{

    font-weight:600;

    color:#2d2d2d;

}





/*=====================================
        MISSION & VISION
======================================*/

.mission-vision{

    padding:120px 0;

    background:#f8f7f4;

}

.mission-card{

    background:#fff;

    padding:50px 40px;

    border-radius:22px;

    text-align:center;

    height:100%;

    transition:.35s;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.mission-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.mission-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:linear-gradient(135deg,#8B5E3C,#C89B3C);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:34px;

    transition:.4s;

}

.mission-card:hover .mission-icon{

    transform:rotateY(180deg);
     animation: spin 25s linear infinite;

}


@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}


.mission-card h3{

    font-size:34px;

    margin-bottom:20px;

}

.mission-card p{

    color:#666;

    line-height:1.9;

}




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

/* .cta-section{

    position:relative;

    padding:120px 0;

    background:url('../images/cta-bg.jpg') center center/cover no-repeat;

    overflow:hidden;

}

.cta-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(20,20,20,.82),
        rgba(20,20,20,.65)
    );

}

.cta-section .container{

    position:relative;

    z-index:2;

}

.cta-subtitle{

    display:inline-block;

    color:#C89B3C;

    text-transform:uppercase;

    letter-spacing:3px;

    font-weight:600;

    margin-bottom:20px;

} */

.cta-title{

    color:#fff;

    font-size:56px;

    font-weight:700;

    margin-bottom:25px;

    line-height:1.2;

}

.cta-text{

    color:#d9d9d9;

    max-width:760px;

    margin:0 auto 40px;

    font-size:18px;

    line-height:1.8;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn-outline-light-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    border:2px solid rgba(255,255,255,.8);

    color:#fff;

    border-radius:50px;

    text-decoration:none;

    transition:.35s ease;

}

.btn-outline-light-custom:hover{

    background:#fff;

    color:#1f1f1f;

}


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

.cta-section{

    position:relative;

    padding:120px 0;

    background:url('../images/cta-bg.jpg') center center/cover no-repeat;

    background-attachment:fixed;

    overflow:hidden;

}

.cta-overlay{

    position:absolute;

    inset:0;

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

}

.cta-section .container{

    position:relative;

    z-index:2;

}

.cta-card{

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

    backdrop-filter:blur(8px);

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

    border:1px solid rgba(255,255,255,.12);

    border-radius:20px;

    padding:60px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.cta-subtitle{

    display:inline-block;

    color:#C89B3C;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

}

.cta-card h2{

    color:#ffffff;

    font-size:48px;

    margin-bottom:20px;

    line-height:1.2;

}

.cta-card p{

    color:#e4e4e4;

    font-size:18px;

    line-height:1.8;

    margin-bottom:0;

}



/*=====================================
        PRODUCT CATEGORIES
======================================*/

.product-categories{

    padding:120px 0;

    background:#fff;

}

.category-card{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:20px;

    height:520px;

    text-decoration:none;

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

}

.category-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.category-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    background:linear-gradient(

        rgba(0,0,0,.10),

        rgba(0,0,0,.88)

    );

}

.category-overlay h3{

    color:#fff;

    font-size:34px;

    margin-bottom:15px;

}

.category-overlay p{

    color:#eee;

    line-height:1.8;

}

.category-overlay span{

    color:#C89B3C;

    font-weight:600;

    margin-top:20px;

}

.category-overlay i{

    margin-left:8px;

    transition:.3s;

}

.category-card:hover img{

    transform:scale(1.08);

}

.category-card:hover i{

    transform:translateX(8px);

}





/*=====================================
        PRODUCT DETAILS
======================================*/

.product-details{

    padding:120px 0;

    background:#fff;

}

.product-main-image{

    overflow:hidden;

    border-radius:20px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);
    perspective: 1000px;

}

.product-main-image img{

    width:100%;

    transition:.6s;
    /* transition: transform 0.5s ease, box-shadow 0.5s ease; */

}

.product-main-image:hover img{

    transform:scale(1.08);
      /* filter: brightness(1.05);
     transform: rotateX(10deg) rotateY(-10deg) translateY(-5px); */

}

.product-features{

    display:grid;

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

    gap:18px;

    margin-top: 30px;

}

.feature-box{

    background:#f8f7f4;

    padding:18px;

    border-radius:12px;

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    transition:.35s;

}

.feature-box:hover{

    background:#8B5E3C;

    color:#fff;

}

.feature-box:hover i{

    color:#fff;

}

.feature-box i{

    color:#C89B3C;

}






/*=====================================
        APPLICATIONS
======================================*/

.applications-section{

    padding:120px 0;

    background:#f8f7f4;

}

.application-card{

    background:#fff;

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

    height:100%;

    transition:.35s;

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

}

.application-card:hover{

    transform:translateY(-10px);

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

}



.application-card i{

    width:75px;

    height:75px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#8B5E3C;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    transition:.35s;
   

}

.application-card:hover i{

    background:#C89B3C;

    transform:rotateY(180deg);
    /* transform: rotateX(180deg); */
 animation: spin 1s linear infinite;
}


@keyframes spin {
  100% {    
    transform: rotate(360deg);
  }
}


.application-card h5{

    font-size:22px;

    margin-bottom:15px;

}

.application-card p{

    color:#666;

    line-height:1.8;

}





/*=====================================
        PRODUCT GALLERY
======================================*/

.product-gallery{

    padding:120px 0;

    background:#ffffff;

}

.gallery-item{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:18px;

    height:320px;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

/* .gallery-overlay{

    position:absolute;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.35s;

} */

.gallery-overlay i{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#C89B3C;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    transform:scale(.6);

    transition:.35s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

.gallery-item:hover i{

    transform:scale(1);

}





/*=====================================
        RELATED PRODUCTS
======================================*/

.related-products{

    padding:120px 0;

    background:#f8f7f4;

}

.related-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.4s;

    height:100%;

}

.related-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.related-card img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s;

}

.related-card:hover img{

    transform:scale(1.08);

}

.related-content{

    padding:30px;

}

.related-content h4{

    margin-bottom:15px;

    font-size:28px;

}

.related-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:20px;

}

.related-content a{

    color:#C89B3C;

    font-weight:600;

    text-decoration:none;

}

.related-content a i{

    margin-left:8px;

    transition:.3s;

}

.related-content a:hover i{

    transform:translateX(6px);

}




/*=====================================
        REQUEST QUOTE
======================================*/

.quote-section{

    padding:120px 0;

    background:#ffffff;

}

.quote-form{

    background:#f3efe4;

    padding:45px;

    border-radius:22px;

    box-shadow:0 20px 50px rgb(0 0 0 / 37%);

}

.quote-form .form-control{

    height:58px;

    border:none;

    border-radius:12px;

    background:#fff;

    padding:15px 18px;

    box-shadow:none;

}

.quote-form textarea.form-control{

    height:auto;

    resize:none;

}

.quote-form .form-control:focus{

    border:2px solid #C89B3C;

    box-shadow:none;

}

.quote-info{

    margin-top:40px;

}

.quote-item{

    display:flex;

    gap:18px;

    margin-bottom:30px;

}

.quote-item i{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#8B5E3C;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

.quote-item h6{

    margin-bottom:5px;

    font-weight:700;

}

.quote-item span{

    color:#666;

}







.gallery-filter{

padding:80px 0 40px;

text-align:center;

}

.gallery-filter button{

padding:14px 32px;

border:none;

background:#f4f4f4;

margin:10px;

border-radius:40px;

transition:.3s;

font-weight:600;

}

.gallery-filter button.active,
.gallery-filter button:hover{

background:#8B5E3C;

color:#fff;

}

.gallery-section{

padding-bottom:120px;

}

.gallery-item{

overflow:hidden;

border-radius:18px;

cursor:pointer;

}

.gallery-item img{

width:100%;

height:320px;

object-fit:cover;

transition:.5s;

}

.gallery-item:hover img{

transform:scale(1.08);

}




/*=====================================
        PREMIUM GALLERY
======================================*/

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

}

.gallery-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.6s;

}

.gallery-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.15),

        rgba(0,0,0,.85)

    );

    display:flex;

    justify-content:center;

    align-items:flex-end;

    opacity:0;

    transition:.4s;

    padding:30px;

}

.gallery-content{

    width:100%;

    color:#fff;

}

.gallery-content span{

    color:#C89B3C;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:14px;

}

.gallery-content h4{

    margin:10px 0;

    color:#fff;

}

.gallery-content i{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#C89B3C;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:20px;

    transition:.35s;

}

.gallery-card:hover img{

    transform:scale(1.08);

}

.gallery-card:hover .gallery-overlay{

    opacity:1;

}

.gallery-card:hover i{

    transform:rotate(360deg);

}


.gallery-item{

    transition:.35s;

}







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

.pine-banner{

    background:url('../images/product1.jpg')
    center center/cover no-repeat;

}

.page-banner3{
    background:url('../images/project5.jpg')
    center center/cover no-repeat;
}


.page-banner4{
    background:url('../images/office-desk.jpg')
    center center/cover no-repeat;
}

.page-banner5{
    background:url('../images/project3.jpg')
    center center/cover no-repeat;
}

.page-banner6{
    background:url('../images/door4.jpg')
    center center/cover no-repeat;
}

.page-banner7{
    background:url('../images/floor1.jpg')
    center center/cover no-repeat;
}

.page-banner8{
    background:url('../images/project7.jpg')
    center center/cover no-repeat;
}





/*=====================================
        SPECIFICATIONS
======================================*/

.specification-section{

    padding:120px 0;

    background:#f8f7f4;

}

.specification-table{

    background:#fff;

    padding:35px;

    border-radius:20px;

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

}

.specification-table table{

    margin:0;

}

.specification-table th{

    width:35%;

    background:#8B5E3C;

    color:#fff;

    font-weight:600;

}

.specification-table td{

    vertical-align:middle;

}







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

.contact-banner{

    background:url('../images/project5.jpg') center center/cover no-repeat;

}

/*=====================================
        CONTACT INFO
======================================*/

.contact-info-section{

    padding:120px 0;

    background:#f8f7f4;

}

.contact-card{

    background:#fff;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    height:100%;

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

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-10px);

}

.contact-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:#8B5E3C;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

}

/* .contact-card:hover .contact-icon{
            animation: spin 2s linear infinite;


}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
} */


.contact-card h4{

    margin-bottom:15px;

}

.banner-text{

    color:#ffffff;

    line-height:1.8;

    min-height:60px;

}

.contact-card a{

    color:#C89B3C;

    text-decoration:none;

    font-weight:600;

}




/*=====================================
        CONTACT FORM
======================================*/

.contact-form-section{

    padding:120px 0;

    background:#ffffff;

}

.contact-left p{

    color:#666;

    line-height:1.9;

}

.contact-form-box{

    background:#f8f7f4;

    padding:50px;

    border-radius:20px;

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

}

.contact-form-box label{

    font-weight:600;

    margin-bottom:8px;

    display:block;

}

.contact-form-box .form-control,
.contact-form-box .form-select{

    height:58px;

    border-radius:12px;

    border:1px solid #ddd;

    box-shadow:none;

}

.contact-form-box textarea.form-control{

    height:auto;

    resize:none;

}

.contact-form-box .form-control:focus,
.contact-form-box .form-select:focus{

    border-color:#C89B3C;

    box-shadow:none;

}

.contact-alert{
    margin-bottom:24px;
    padding:16px 18px;
    border-radius:12px;
    font-size:14px;
    line-height:1.6;
    font-weight:600;
    border:1px solid transparent;
}

.contact-alert-success{
    color:#3f5a2f;
    background:#eaf3e2;
    border-color:#c3dcae;
}

.contact-alert-error{
    color:#7a3b28;
    background:#fbe9e4;
    border-color:#f0c3b6;
}



/* --- Grid Wrapper Setup --- */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* --- 1. Outer Card: Creates the 3D Space perspective --- */
.spec-card {
  background-color: transparent;
  height: 240px;             /* Enforces structural consistency across rows */
  perspective: 1000px;       /* Crucial feature for authentic 3D spatial depth */
}

/* Wide layout adjustment for the final application block */
.spec-wide {
  grid-column: 1 / -1; 
  height: auto;
  min-height: 240px;
}

/* --- 2. Inner Wrapper: The element that physically rotates --- */
.spec-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth mechanical feel */
  transform-style: preserve-3d;                             /* Retains 3D context for children */
}

/* --- 3. The Interactive Trigger --- */
.spec-card:hover .spec-card-inner {
  transform: rotateY(180deg);
}

/* --- 4. Face Setup: Shared rules for Front & Back planes --- */
.spec-card-front, 
.spec-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Stops layers from displaying through their opposites */
  backface-visibility: hidden;
  border-radius: 12px;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #f2ece4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* --- 5. Front Face Styling Rules --- */
.spec-card-front {
  color: #333333;
}

.spec-card-front h5, 
.spec-card-front span {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 12px 0 6px 0;
  color: #5c4126;
}

.spec-card-front p {
  margin: 4px 0;
  font-size: 0.95rem;
  color: #666666;
}

/* Circular background setup matching your design icons */
.spec-icon {
  background-color: #fbf6f0;
  color: #5c4126;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  margin-bottom: 8px;
}

/* --- 6. Back Face Styling Rules (Pre-rotated outward) --- */
.spec-card-back {
  background-color: #fcfbfa;  /* Subtle shifting tone background for reverse view */
  color: #5c4126;
  transform: rotateY(180deg); /* Ensures text faces upright post-flip rotation */
}

.spec-card-back h5 {
  margin: 0 0 10px 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.spec-card-back p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #7a6855;
}







/*=====================================
        HARDWOOD COLLECTION
======================================*/

.hardwood-collection{

    padding:120px 0;

    background:#f8f7f4;

}

.wood-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    height:100%;

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

    transition:.35s;

}

.wood-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 60px rgba(0,0,0,.12);

}

.wood-image{

    overflow:hidden;

}

.wood-image img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.6s;

}

.wood-card:hover .wood-image img{

    transform:scale(1.08);

}

.wood-content{

    padding:30px;

}

.wood-tag{

    display:inline-block;

    background:#8B5E3C;

    color:#fff;

    padding:6px 16px;

    border-radius:30px;

    font-size:13px;

    margin-bottom:18px;

}

.wood-content h3{

    margin-bottom:15px;

    font-size:30px;

}

.wood-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:20px;

}

.wood-content ul{

    list-style:none;

    padding:0;

    margin:0 0 25px;

}

.wood-content li{

    margin-bottom:12px;

    color:#555;

}

.wood-content li i{

    color:#C89B3C;

    margin-right:8px;

}

.wood-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#8B5E3C;

    font-weight:600;

    text-decoration:none;

}

.wood-btn:hover{

    color:#C89B3C;

}

.wood-btn i{

    transition:.3s;

}

.wood-btn:hover i{

    transform:translateX(6px);

}



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

.mahogany-banner{

    background:url('../images/mahogany.jpg') center center/cover no-repeat;

}


/*=====================================
        COUNTRY WOOD HERO
======================================*/

.country-banner{

    background:url('../images/country-wood.jpg')
    center center/cover no-repeat;

}






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

.faq-section{

    padding:120px 0;

    background:#faf7f2;

}

.custom-faq{

    max-width:900px;

    margin:auto;

}

.custom-faq .accordion-item{

    border:none;

    border-radius:18px;

    overflow:hidden;

    margin-bottom:18px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.custom-faq .accordion-button{

    background:#fff;

    padding:22px 28px;

    font-size:18px;

    font-weight:600;

    color:#222;

    box-shadow:none;

}

.custom-faq .accordion-button:not(.collapsed){

    background:#b8863b;

    color:#fff;

}

.custom-faq .accordion-body{

    padding:24px 28px;

    color:#666;

    line-height:1.8;

    background:#fff;

}

.custom-faq .accordion-button:focus{

    box-shadow:none;

}

.custom-faq .accordion-button::after{

    transition:.3s;

}

.custom-faq .accordion-button:not(.collapsed)::after{

    filter:brightness(0) invert(1);

}



/*=====================================
        CONTACT MAP
======================================*/

.contact-map{

    margin-top:30px;

    border-radius:20px;

    overflow:hidden;

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

    border:6px solid #fff;

}

.contact-map iframe{

    width:100%;

    height:420px;

    display:block;

    border:0;

}







/*=====================================
        PROJECT PAGES
======================================*/

/*-------------------------------------
        HERO
-------------------------------------*/

.project-banner{
    position:relative;
    padding:180px 0 120px;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    overflow:hidden;
}

.project-banner .banner-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.project-banner .container{
    position:relative;
    z-index:2;
}

.project-banner h1{
    color:#fff;
    font-size:58px;
    font-weight:700;
    margin:20px 0;
    line-height:1.2;
}

.project-banner .banner-text{
    color:#ddd;
    font-size:18px;
    max-width:700px;
    line-height:1.8;
}


/*-------------------------------------
        OVERVIEW
-------------------------------------*/

.project-overview{
    padding:110px 0;
    background:#fff;
}

.project-overview img{
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.project-overview p{
    color:#666;
    line-height:1.9;
    margin-bottom:20px;
}


/*-------------------------------------
        HIGHLIGHTS
-------------------------------------*/

.project-highlights{
    padding:110px 0;
    background:#faf7f2;
}

.highlight-card{
    background:#fff;
    text-align:center;
    padding:45px 30px;
    border-radius:20px;
    transition:.35s;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
    height:100%;
}

.highlight-card:hover{
    transform:translateY(-10px);
}

.highlight-card i{
    width:85px;
    height:85px;
    border-radius:50%;
    background:#b8863b;
    color:#fff;
    font-size:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 25px;
}

.highlight-card h5{
    font-weight:700;
    margin-bottom:15px;
}

.highlight-card p{
    color:#666;
    line-height:1.8;
}


/*-------------------------------------
        MATERIALS
-------------------------------------*/

.materials-section{
    padding:110px 0;
}

.material-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;
}

.material-card:hover{
    transform:translateY(-8px);
}

.material-card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.material-card h4{
    margin:25px 25px 12px;
}

.material-card p{
    color:#666;
    margin:0 25px 25px;
    line-height:1.8;
}

.material-card a{
    display:inline-block;
    margin:0 25px 25px;
    color:#b8863b;
    font-weight:600;
    text-decoration:none;
}

.material-card a:hover{
    color:#000;
}


/*-------------------------------------
        GALLERY
-------------------------------------*/

.project-gallery{
    padding:110px 0;
    background:#faf7f2;
}

.project-gallery img{
    width:100%;
    border-radius:18px;
    transition:.4s;
}

.project-gallery a{
    display:block;
    overflow:hidden;
    border-radius:18px;
}

.project-gallery img:hover{
    transform:scale(1.06);
}


/*-------------------------------------
        RELATED PROJECTS
-------------------------------------*/

.related-projects{
    padding:110px 0;
}

.related-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;
}

.related-card:hover{
    transform:translateY(-8px);
}

.related-card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.related-content{
    padding:30px;
}

.related-content h4{
    margin-bottom:15px;
}

.related-content p{
    color:#666;
    line-height:1.8;
}

.related-content a{
    color:#b8863b;
    font-weight:600;
    text-decoration:none;
}

.related-content a:hover{
    color:#000;
}


/*-------------------------------------
        CTA
-------------------------------------*/

.project-cta{
    padding:110px 0;
}

.project-cta .cta-box{
    border-radius:25px;
    overflow:hidden;
}


/*-------------------------------------
        RESPONSIVE
-------------------------------------*/

@media(max-width:1199px){

.project-banner h1{
    font-size:48px;
}

}

@media(max-width:991px){

.project-banner{
    padding:150px 0 90px;
}

.project-banner h1{
    font-size:42px;
}

.project-overview,
.project-highlights,
.materials-section,
.project-gallery,
.related-projects,
.project-cta{
    padding:90px 0;
}

.material-card img,
.related-card img{
    height:220px;
}

}

@media(max-width:767px){

.project-banner{
    padding:120px 0 70px;
}

.project-banner h1{
    font-size:32px;
}

.project-banner .banner-text{
    font-size:16px;
}

.project-overview,
.project-highlights,
.materials-section,
.project-gallery,
.related-projects,
.project-cta{
    padding:70px 0;
}

.highlight-card{
    padding:35px 25px;
}

.highlight-card i{
    width:70px;
    height:70px;
    font-size:28px;
}

.material-card img,
.related-card img{
    height:200px;
}

}







/*=============================
      Premium Gallery
==============================*/

.project-gallery .gallery-item{
    display:block;
    overflow:hidden;
    border-radius:20px;
    position:relative;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.project-gallery img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:all .5s ease;
    display:block;
}

.project-gallery .gallery-item:hover img{
    transform:scale(1.08);
}

/* Heights */

.project-gallery .large{
    height:640px;
}

.project-gallery .small{
    height:308px;
}

.project-gallery .medium{
    height:320px;
}

/* Optional dark overlay */

.project-gallery .gallery-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.12);
    opacity:0;
    transition:.4s;
}

.project-gallery .gallery-item:hover::after{
    opacity:1;
}

/* Responsive */

@media(max-width:991px){

.project-gallery .large,
.project-gallery .small,
.project-gallery .medium{
    height:300px;
}

}

@media(max-width:767px){

.project-gallery .large,
.project-gallery .small,
.project-gallery .medium{
    height:240px;
}

}







.project-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 12px 24px;
    background: #b8863b;
    color: #fff;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    transition: .35s ease;
}

.project-btn i{
    transition: .35s ease;
}

.project-card:hover .project-btn{
    background: #fff;
    color: #b8863b;
}

.project-card:hover .project-btn i{
    transform: translateX(6px);
}