/*==================================================
  Uniform360
==================================================*/

:root {

    --primary: #071c36;
    --secondary: #DCEAF6;
    --gold: #C79B3B;
    --gold:#b3893a;
    --text: #374151;

    --heading: #163A63;

    --white: #fff;

    --light: #F7FAFC;

    --border: #E5E7EB;
    --bg:#eaeef0;

}

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

html {
    scroll-behavior: smooth;
}

body {

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

    color: var(--text);

    background: #ffffff;

    line-height: 1.7;

}

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

.navbar {

    padding: 18px 0;

}

.navbar-brand {

    font-size: 30px;

    font-weight: 700;

    color: var(--primary) !important;

}

.gold {

    color: var(--gold);

}

.nav-link {

    margin: 0 10px;

    font-weight: 500;

    color: #555;

    transition: .3s;

}

.nav-link:hover {

    color: var(--primary);

}

.btn-outline-primary {

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

    color: var(--primary);

    border-radius: 50px;

    padding: 12px 28px;

}

.btn-outline-primary:hover {

    background: var(--primary);

}

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

.hero {

    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background: linear-gradient(135deg, #edf5fd, #dceaf6);

}

.hero::before {

    content: "";

    position: absolute;

    width: 700px;

    height: 700px;

    border-radius: 50%;

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

    top: -250px;

    right: -250px;

}

.hero::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background: rgba(199, 155, 59, .08);

    left: -150px;

    bottom: -150px;

}

.hero .container {

    position: relative;

    z-index: 5;

}

.hero h1 {

    font-size: 56px;

    font-weight: 700;

    color: var(--heading);

    line-height: 1.2;

    margin-bottom: 25px;

}

.hero h1 span {

    color: var(--gold);

}

.hero p {

    font-size: 18px;

    color: #666;

    max-width: 520px;

    margin-bottom: 35px;

}

.hero-buttons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}

.btn-gold {

    background: var(--gold);

    color: white;

    padding: 14px 34px;

    border-radius: 50px;

    font-weight: 600;

    transition: .3s;

}

.btn-gold:hover {

    background: #b88a2e;

    color: white;

}

.hero-image {

    max-width: 100%;

    animation: float 5s ease-in-out infinite;

}

@keyframes float {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

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

section {

    padding: 80px 0;

}

section h2 {
    color: var(--primary);
    font-size: 38px;
    text-transform: uppercase;
    font-weight: 600;
}

section p {

    color: #666;

}

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

.category-card {

    background: white;

    border-radius: 25px;

    overflow: hidden;

    transition: .35s;

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

    height: 100%;

}

.category-card:hover {

    transform: translateY(-8px);

}

.category-card img {

    width: 100%;

    height: 250px;

    object-fit: cover;

}

.category-card h4 {

    color: var(--heading);

    margin: 25px 25px 15px;

}

.category-card p {

    margin: 0 25px 15px;

}

.category-card a {

    display: inline-block;

    margin: 0 25px 30px;

    color: var(--gold);

    font-weight: 600;

    text-decoration: none;

}

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

.features {

    background: #F6FAFD;

}

.features i {

    font-size: 46px;

    color: var(--gold);

    margin-bottom: 20px;

}

.features h5 {

    color: var(--heading);

    font-weight: 600;

}

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

.about img {

    border-radius: 20px;

}

.about ul {

    margin: 30px 0;

}

.about li {

    margin-bottom: 15px;

    font-weight: 500;

}

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

footer {

    background: #123A66;

    color: white;

    padding: 70px 0 30px;

}

footer h4,
footer h5 {

    margin-bottom: 20px;

}

footer ul {

    list-style: none;

    padding: 0;

}

footer li {

    margin-bottom: 10px;

}

footer a {

    color: #ddd;

    text-decoration: none;

}

footer a:hover {

    color: white;

}

footer hr {

    margin: 40px 0;

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

}

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

@media(max-width:992px) {

    .hero {

        text-align: center;

        padding: 70px 0;

    }

    .hero h1 {

        font-size: 42px;

    }

    .hero p {

        margin: auto auto 30px;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-image {

        margin-top: 50px;

        max-width: 420px;

    }

    section h2 {

        font-size: 34px;

    }

}

@media(max-width:576px) {

    .hero h1 {

        font-size: 34px;

    }

    section {

        padding: 60px 0;

    }

    .category-card img {

        height: 220px;

    }

    .navbar-brand {

        font-size: 26px;

    }

    .btn-gold,
    .btn-outline-primary {

        width: 100%;

        text-align: center;

    }

    .hero-buttons {

        flex-direction: column;

    }

}

/* ==========================================
   Reveal Animation
========================================== */

.category-card,
.features .col-md-3,
.about img,
.about div,
.hero h1,
.hero p,
.hero-buttons{

    opacity:0;

    transform:translateY(35px);

    transition:all .7s ease;

}

.show{

    opacity:1 !important;

    transform:translateY(0) !important;

}

/* ==========================================
   Image Hover
========================================== */

.category-card img{

    transition:.5s;

}

/* ==========================================
   Back To Top
========================================== */

.top-btn{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:#C79B3B;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

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

}

.top-btn.show{

    opacity:1;

    visibility:visible;

}

.top-btn:hover{

    transform:translateY(-5px);

    background:#b68a2f;

}

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

.navbar{

    transition:.3s;

}

/* ripple */
.btn{
    position:relative;
    overflow:hidden;
}

.ripple{
    position:absolute;
    border-radius:50%;
    transform:scale(0);
    background:rgba(255,255,255,.45);
    animation:ripple .6s linear;
    pointer-events:none;
}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}
/* custom */
img{width: 100%;height: auto;object-fit: cover;}
.menu-extra{width: 75%;}
.navbar-nav{flex:1}
#menu .nav-link{text-transform: uppercase;color: var(--primary);padding-left: 0;margin-right:30px;margin-left: 0;}
.menu-btn{background-color: var(--primary);color: var(--white);text-transform: uppercase;}
.menu-navbar{
    position: absolute;width: 100%;top: 0;left: 0;
}
.hero{padding-top: 100px;
background: linear-gradient(135deg, #eaeef0, #c9e1f1);
}
.hero .badge{color: var(--gold);}
.hero h1{font-size: 50px;}
.hero h1,.hero p{color: var(--primary);}
.btn-primary1{background-color: var(--primary);color: var(--white);}
.btn-primary1:hover{background-color: var(--gold);}
.btn-outline-gold{border:1px solid var(--gold);}
.btn-outline-gold:hover{background-color:var(--gold);}
.hero-buttons .btn{border-radius: 4px;}

.cat-sec{background-color: rgb(224 226 229);}
.cat-title {display: flex;justify-content: center;align-items: center;gap: 30px;}
.cat-title span{width: 80px;height: 2px;background-color: var(--gold);}
.cat-title h2{color: var(--primary);text-transform: uppercase;font-size: 30px;}
.category-card{background-color: rgb(221, 222, 225);border-radius: 4px;}
.category-card h4{text-align: center;}
.category-card a{text-transform: uppercase;color: var(--primary);}

.features{padding: 30px;}
.features .fcard{display: flex;align-items: center;}
.features .fcard h5{font-size: 16px;text-align: left;}
.features .fcard p{font-size: 13px;text-align: left;}
.features .fcard .ico{padding:10px;}

.features1{background-color: var(--primary);}
.features2{background-color: var(--bg);}
.features1 .fcard h5{color: var(--white);}
.features1 .fcard p{color: #ddd;}
.features2 .fcard i{color: var(--heading);}
.about{
    background-image: url(images/bg2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}
.about h2{font-size: 35px;}
.about p{font-size: 18px;color: var(--primary);}



/*=========================================
 FEATURED PRODUCTS
=========================================*/

.featured-products {
    background: var(--secondary);
}

.product-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    height: 100%;
}

.product-card:hover {
    /* transform: translateY(-10px); */
    box-shadow: var(--shadow-lg);
}

.product-card img {
    width: 100%;height: 460px;object-fit: cover;transition: .5s;
}
.product-card:hover img {transform: scale(1.06);}
.product-info {padding: 25px;}
.product-info h5 {margin-bottom: 10px;}
.product-info p {color: #777;margin-bottom: 20px;}

.kslide{
    background: url(images/bg3.jpg) no-repeat ;
    background-size: cover;
}
.kslidebox{position: relative;}
.kslidebox img{position: absolute;left: 0;top: 0;max-width:350px;}
.kslidebox img:first-child{
    position: relative;z-index:4;
}
.kslidebox img:nth-child(2){
    transform: translateX(60px) scale(.85);z-index:3;
}
.kslidebox img:nth-child(3){
    transform: translateX(120px) scale(.7);z-index:2;
}

.wht ul,.wht h2, .wht p{color: #fff;}
.wht h2, .wht p{margin-bottom: 15px;}
.wht .ct{background-color: rgba(0, 0, 0, .6);padding: 100px 0;}
.wht .container{padding-right:30%;padding-left: 0;}
.wht{
    background-image: url(images/y.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.wht ul{padding: 0;}
.wht li{list-style-type: none;padding-right:20px;word-spacing: -1px;}
.wht li span{font-size: 20px;display: block;}
.wht li small{font-size: 14px;}
footer{background-color: var(--primary);}
/* .video-section{
    height: 560px;
    width: 100%;
    position: relative;
}
.video-section video{position: absolute;z-index:1;width: 100%;height: 100%;}
.video-section .v-ct{position: relative;z-index: 2;padding: 30px;} */