/* ==========================================
   DEKAMAX PREMIUM THEME
========================================== */

:root{
    --primary:#102A56;
    --secondary:#173E7A;
    --gold:#D4AF37;
    --gold-light:#E8C55A;
    --gold-dark:#B88A17;
    --white:#ffffff;
    --light:#F8FAFC;
    --gray:#6B7280;
    --text:#2D3748;
    --border:#EDF2F7;
    --shadow:0 20px 60px rgba(16,42,86,.08);
    --shadow-lg:0 35px 80px rgba(16,42,86,.12);
    --radius:24px;
}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;
    font-family:'Poppins',sans-serif;

}

html,
body{

    margin:0;

    padding:0;

    overflow-x:hidden;
    font-family:'Poppins',sans-serif;

}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:#fff;
    overflow-x:hidden;
}

/* ==========================================
   COMMON
========================================== */

section{
    padding:40px 0;
    position:relative;
}

img{
    max-width:100%;
    transition:.5s;
}

a{
    text-decoration:none;
}
h1,h2,h3,h4,h5,h6,p,a,span,li,button,input,li{
    font-family:'Poppins',sans-serif;

}

.section-subtitle{

    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:700;
    display:inline-block;
    margin-bottom:15px;
}

.section-title h2{

    font-size:48px;
    font-weight:800;
    color:var(--primary);
    margin-bottom:20px;
}

.section-title p{

    color:var(--gray);
    max-width:700px;
    margin:auto;
    line-height:30px;
}

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

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

.navbar::after{

    content:'';

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

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

}

/* Mobile Menu Button */

.navbar-toggler{
    border:2px solid rgba(255,255,255,.7);
    border-radius:10px;
    padding:8px 10px;
    box-shadow:none !important;
}

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

.navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* ==========================================
   PREMIUM GRADIENT NAVBAR
========================================== */

.header-wrapper{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

}

.navbar{

    margin:0;

    padding:20px 0;

    width:100%;

    /* background:linear-gradient(
        90deg,
        #102A56 0%,
        #12366A 35%,
        #173E7A 60%,
        #2B5D98 82%,
        #D4AF37 100%
    );

    box-shadow:0 15px 45px rgba(16,42,86,.18);
    -bs-navbar-color: rgba(255,255,255,.85);

    --bs-navbar-hover-color: #FFD166;

    --bs-navbar-active-color: #FFD166; */


}

.nav-link{

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

    font-weight:600;

    margin:0 20px;

    position:relative;

    transition:.35s;

    font-size: 20px;

}

.nav-link:hover{

    color:#FFD166;

}

.nav-link.active{

    color:#FFD166;

}

.nav-link::after{

    content:'';

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    border-radius:20px;

    background: linear-gradient(
        90deg,
        #D4AF37,
        #FFD166,
        #E8C55A
    );

    transition:.35s;

}

.nav-link:hover::after,
.nav-link.active::after{

    width:100%;

}



/* ==========================================
   BUTTONS
========================================== */

.btn{

    border-radius:60px;
    padding:15px 38px;
    font-weight:600;
    transition:.4s;
}

.btn-gold{

    background:white;

    color:#102A56;

    font-weight:700;

    border-radius:40px;

    padding:14px 32px;

    border:none;

    transition:.3s;

    box-shadow:0 10px 25px rgba(255,255,255,.20);

}

.btn-gold:hover{

    background:#F5F5F5;

    color:#102A56;

    transform:translateY(-4px);

}

.btn-outline{

    border:2px solid var(--primary);
    color:var(--primary);
}

.navbar-brand img{

    height:75px;

}

.btn-outline:hover{

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

/* ==========================================
   HERO
========================================== */
/* .hero-section{

    min-height:100vh;

    padding-top:170px;

    display:flex;

    align-items:center;

    position:relative;

    background:linear-gradient(180deg,#fff,#f7fbff);

} */

/* background circles */

.hero-section::before{

    content:'';
    width:520px;
    height:520px;
    background:rgba(212,175,55,.08);
    border-radius:50%;
    position:absolute;
    right:-180px;
    top:-180px;
}

.hero-section::after{

    content:'';
    width:400px;
    height:400px;
    background:rgba(16,42,86,.05);
    border-radius:50%;
    position:absolute;
    left:-150px;
    bottom:-180px;
}

.hero-badge{

    display:inline-block;
    background:rgba(212,175,55,.12);
    color:var(--gold-dark);
    padding:12px 24px;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
}

.hero-section h1{

    font-size:74px;
    font-weight:800;
    line-height:1.08;
    margin:25px 0;
    color:var(--primary);
}

.hero-section h1 span{

    color:var(--gold);
}

.hero-text{

    color:var(--gray);
    font-size:19px;
    line-height:34px;
    max-width:600px;
}

.hero-buttons{

    display:flex;
    gap:20px;
    margin-top:40px;
}

.hero-image{

    padding:24px;
    background:#fff;
    border-radius:32px;
    box-shadow:var(--shadow-lg);
    position:relative;
    animation:floating 6s ease-in-out infinite;
}

.hero-image img{

    border-radius:24px;
}

.hero-image:hover img{

    transform:scale(1.04);
}

/* ==========================================
   FLOATING EFFECT
========================================== */

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

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

.hero-stats{

    display:flex;
    gap:25px;
    margin-top:60px;
}

.stat-card{

    background:#fff;
    padding:28px;
    border-radius:20px;
    box-shadow:var(--shadow);
    transition:.4s;
    min-width:170px;
}

.stat-card:hover{

    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}

.stat-card h2{

    color:var(--primary);
    font-size:42px;
    font-weight:700;
    margin-bottom:5px;
}

.stat-card span{

    color:var(--gray);
}

/* ==========================================
   TRUST BOXES
========================================== */

.trusted-section{

    background:#F8FAFC;
}

.trust-box{

    background:#fff;
    padding:45px 35px;
    border-radius:24px;
    text-align:center;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    height:100%;
}

.trust-box i{

    font-size:52px;
    color:var(--gold);
    margin-bottom:25px;
}

.trust-box h4{

    color:var(--primary);
    font-weight:700;
    margin-bottom:18px;
}

.trust-box p{

    color:var(--gray);
    line-height:28px;
}

.trust-box:hover{

    transform:translateY(-12px);
    box-shadow:var(--shadow-lg);
}

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

.about-section img{

    border-radius:28px;
    box-shadow:var(--shadow-lg);
}

.about-section h2{

    font-size:48px;
    font-weight:800;
    color:var(--primary);
    margin:20px 0;
}

.about-section p{

    color:var(--gray);
    line-height:32px;
}

.about-card{

    background:#fff;
    padding:30px;
    border-radius:20px;
    text-align:center;
    box-shadow:var(--shadow);
    transition:.4s;
}

.about-card:hover{

    transform:translateY(-10px);
}

.about-card h3{

    color:var(--gold);
    font-size:40px;
    font-weight:700;
}

/* ==========================================
   PRODUCT CARDS
========================================== */

.category-card{

    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.5s;
}

.category-card img{

    width:100%;
    height:250px;
    object-fit:cover;
}

.category-card h4{

    padding:25px 25px 10px;
    color:var(--primary);
    font-weight:700;
}

.category-card p{

    padding:0 25px 30px;
    color:var(--gray);
}

.category-card:hover{

    transform:translateY(-12px);
    box-shadow:var(--shadow-lg);
}

.category-card:hover img{

    transform:scale(1.08);
}

/* ==========================================
   FADE ANIMATION
========================================== */

.fade-up{

    animation:fadeUp 1s ease forwards;
}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

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

@media(max-width:991px){

/* .hero-section{

padding:120px 0 80px;

} */

.hero-section h1{

font-size:50px;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

flex-wrap:wrap;

}

.section-title h2{

font-size:36px;

}

}

@media(max-width:768px){

.hero-section h1{

font-size:40px;

}

.hero-text{

font-size:17px;

line-height:30px;

}

.stat-card{

min-width:100%;

}

.section-title h2{

font-size:30px;

}

}