*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Open Sans',sans-serif;
}
html {
    scroll-behavior: smooth;
}
/* NAVBAR */
.navbar{
    position:fixed;
    top:0;
    width:100%;
    padding:20px 5%;
    z-index:999;
    transition:.4s;
}

.navbar.scrolled{
    background:#000;
    padding:15px 6%;
}

/* NAV CONTAINER */
.nav-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    width: 300px;
    height: auto;
}

.logo-img {
    width: 300px;
    height: auto;
}

.nav-links{
    list-style:none;
    display:flex;
    gap:25px;
}

.nav-links a{
    color:#fff;
    text-decoration:none;
    font-size:14px;
    transition:.3s;
    text-transform: uppercase;

}

.nav-links a:hover{
    color:#ff3b3b;
}

/* HAMBURGER */
.hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}

.hamburger span{
    width:25px;
    height:3px;
    background:#fff;
}

.mobile-menu{
    position: fixed;
    top: 0;
    right: -100%;
    width: 350px;
    height: 100%;
    padding: 20px;
    background: #000;
    display: flex;
    flex-direction: column;
    transition: .5s;
    z-index: 9999;
}

.mobile-menu a{
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    margin-bottom: 25px;
}

.mobile-menu.active{
    right: 0;
}

/* Close icon */
.close-icon{
    align-self: flex-end;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 20px;
}

/* Example open button */
.menu-btn{
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10000;
}

/* HERO */
.hero{
    height:100vh;
    background:url("images/shop-1024x531.jpg") center/cover no-repeat;
    position:relative;
    background-size: cover;
}

.hero::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    object-fit: cover;
    /* background:rgba(0,0,0,0.65); */
}

.hero-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:start !important;
    color:#fff;
}

.hero-content h1{
    font-size: 52px; font-weight: 300; margin-bottom: 10px; line-height: 1.2; 
    font-family: 'Open Sans', sans-serif;
}
.hero-content p{
    font-size:22px;
    text-align: start !important;
    font-family: 'Open Sans', sans-serif;
}

.hero-btn{
    padding:14px 30px;
    border:none;
    border-radius:30px;
    background:linear-gradient(90deg,#ff2fb3,#ff7b00);
    color:#fff;
    font-weight:600;
    cursor:pointer;
}

/* RESPONSIVE */
@media(max-width:900px){
    .nav-links{display:none;}
    .hamburger{display:flex; margin-right: 10px;}
    .logo-img {
        width: 220px;
        height: auto;
    }
    .hero-content h1{font-size:36px; display: flex;
    justify-content: center !important; align-items: center !important; text-align: center !important;}
}



/* About US Start */
#aboutus {
    -webkit-text-size-adjust: 100%;
    font-family: 'Open Sans', sans-serif;
    color: #777777;
    font-size: 15px;
    line-height: 26px;
    box-sizing: border-box;
    word-wrap: break-word;
    display: block;
    background-attachment: fixed;
    margin: 80px auto;
    padding: 0 40px;
    max-width: 1200px;
}

/* Title */
#aboutus .title {
    text-align: left;
    font-size: 38px;
    font-weight: 300;
    margin-bottom: 30px;
    color: #000;
}

/* Paragraph spacing */
#aboutus p {
    margin-bottom: 20px;
}

/* Tablet */
@media (max-width: 992px) {
    #aboutus {
        padding: 0 25px;
    }

    #aboutus .title {
        font-size: 32px;
    }

    #aboutus {
        font-size: 14px;
        line-height: 24px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    #aboutus {
        padding: 0 18px;
        margin: 60px auto;
    }

    #aboutus .title {
        font-size: 26px;
        margin-bottom: 20px;
    }

    #aboutus {
        font-size: 14px;
        line-height: 22px;
    }
}
/* About US End */


/* Our Team Start */
  
#ourteam {
    -webkit-text-size-adjust: 100%;
    font-family: 'Open Sans', sans-serif;
    color: #777777;
    font-size: 13px;
    line-height: 22px;
    cursor: url("data:image/png;base64,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") 2 0, auto !important;
    box-sizing: border-box;
    word-wrap: break-word;
    display: block;
    margin-left: -15px;
    margin-right: -15px;
    padding-top: 80px !important;
    padding-bottom: 60px !important;
    background-image: url("images/about-3-bg-3-1100x436.jpg") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: scroll;
}

#ourteam .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

#ourteam .title {
    font-size: 36px;
    font-weight: 300;
    margin-bottom: 30px;
}

#ourteam p {
    margin-bottom: 18px;
}

@media (max-width: 992px) {
    #ourteam .container {
        padding: 0 25px;
    }

    #ourteam .title {
        font-size: 30px;
    }

    #ourteam {
        font-size: 14px;
        line-height: 24px;
    }
}

@media (max-width: 600px) {
    #ourteam .container {
        padding: 0 18px;
    }

    #ourteam .title {
        font-size: 24px;
    }

    #ourteam {
        font-size: 14px;
        line-height: 22px;
        padding-left: 10px;
        padding-top: 60px !important;
        padding-bottom: 50px !important;
    }
}

/* Our Team End */


.products-heading{
    text-align:center;
    margin-bottom:70px;
    position:relative;
    z-index:2;
}

.products-heading h1{
    color:#fff;
    font-size:42px;
    font-weight:300;
    letter-spacing:3px;
    margin-bottom:20px;
}

/* ICON STYLE */
.bounce-icon{
    color:#fff;
    font-size:32px;
    display:inline-block;
    animation:bounce 1.8s infinite;
    opacity:.85;
}

/* BOUNCE ANIMATION */
@keyframes bounce{
    0%,20%,50%,80%,100%{ transform:translateY(0);}
    40%{ transform:translateY(-15px);}
    60%{ transform:translateY(-8px);}
}

.brands-section{
    padding:120px 20px;
    background:url("img/brands-bg.jpg") center/cover no-repeat;
    background-attachment:fixed;
    position:relative;
    overflow:hidden;
}

/* DARK OVERLAY */
.brands-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,0.92), rgba(0,0,0,0.92));
}

/* ===== CENTER BOX ===== */
.brands-box{
    max-width:1200px;
    margin:auto;
    position:relative;
    z-index:2;
}

/* ===== CATEGORY BLOCK ===== */
.brand-category{
    text-align:center;
    margin-bottom:100px;
}

/* CATEGORY HEADING */
.brand-category h2{
    color:#fff;
    font-weight:300;
    letter-spacing:3px;
    margin-bottom:55px;
    font-size:28px;
    position:relative;
}

/* SMALL LINE UNDER HEADING */
/* .brand-category h2::after{
    content:"";
    width:70px;
    height:2px;
    background:#fff;
    display:block;
    margin:18px auto 0;
    opacity:.5;
} */

/* ===== GRID ===== */
.brand-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:55px 30px;
    justify-items:center;
}

/* ===== ITEM ===== */
.brand-item{
    text-align:center;
    transition:.4s;
}

/* BRAND NAME */
.brand-item span{
    color:#777777;
    display:block;
    margin-bottom:14px;
    font-size:26px;
    letter-spacing:1px;
}

/* ===== PERFECT CIRCLE LOGO ===== */
.brand-item img{
    width:150px;
    height:150px;
    object-fit:contain;
    border-radius:50%;
    transition:all .4s ease;
    box-shadow:0 0 0 rgba(255,255,255,0);
}

/* HOVER EFFECT PREMIUM */
/* .brand-item:hover img{
    transform:scale(1.18);
    box-shadow:0 0 45px rgba(255,255,255,0.28);
} */

/* subtle lift */
/* .brand-item:hover{
    transform:translateY(-6px);
} */

/* ===== TABLET ===== */
@media(max-width:992px){
    .brand-grid{
        grid-template-columns:repeat(3,1fr);
        gap:45px 25px;
    }
}

/* ===== MOBILE ===== */
@media(max-width:600px){
    .brand-grid{
        grid-template-columns:repeat(2,1fr);
        gap:40px 20px;
    }

    .brand-item img{
        width:150px;
        height:150px;
        padding:22px;
    }

    .brand-category{
        margin-bottom:70px;
    }
}


/* ================= SERVICES ================= */

.services-section{
    background:#f4f4f4;
    padding:80px 0;
    position:relative;
}

/* dotted pattern background */
.services-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image: radial-gradient(#dcdcdc 1px, transparent 1px);
    background-size: 22px 22px;
    opacity:0.6;
}

.services-section .container{
    position:relative;
    max-width:1100px;
    margin:auto;
    padding:0 40px;
}

.services-title{
    font-size:48px;
    font-weight:300;
    color:#777;
    margin-bottom:25px;
}

.services-text{
    color:#8a8a8a;
    line-height:28px;
    margin-bottom:20px;
    max-width:900px;
}

/* ================= GET IN TOUCH ================= */

.contact-section{
    height:720px;
    background:url("contact.jpg") center/cover no-repeat;
    background-attachment: fixed; 
    position:relative;
    border-top: 10px solid #0097d3 !important;
}

.contact-overlay{
    width:100%;
    padding:80px 0;
    height:100%;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items: flex-start !important;
}

.contact-content{
    /* max-width:1100px; */
    margin:auto 5rem;
    padding:0 40px;
    max-width:1100px;
    color: #777777;
}

.contact-content h2{
    font-size:55px;
    font-weight:300;
    text-align: end !important;
    margin-bottom:30px;
    margin-right: -5rem;
}

.contact-content p{
    font-size:17px;
    margin-bottom:12px;
    opacity:0.9;
}

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

@media(max-width:768px){

.services-title{
    font-size:36px;
}

.contact-content h2{
    font-size:32px;
}

.contact-content{ 
    /* margin:auto 5rem; */
    padding:0 10px !important;
    color: #777777;
}


.contact-section{
    height:420px;
}

.contact-content h2{
    font-size:35px;
    font-weight:300;
    text-align: center !important;
    margin-bottom:30px;
    margin-right: 0rem;
}
}

@media (max-width:480px){
    .contact-content{
        /* margin:auto 5rem; */
        padding:0 30px !important;
        margin: 0;
        color: #777777;
    }
}



/* Footer Styles */
#footer {
    background-color: #1e2536; /* Dark blue background like image */
    color: white;
    padding: 70px 20px 20px !important;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    position: relative;
    border-top: 2px solid #fff ;
}

#footer .footer-logo a img {
    max-width: 400px; /* adjust as per your logo size */
    width: 50%;
    height: auto;
    display: inline-block;
    margin-bottom: 20px;
}

#footer .separator {
    border-top: 1px solid #444; /* thin line like the image */
    width: 90%;
    margin: 20px auto; /* centered line */
}

#footer p, #footer .copyright {
    font-size: 14px;
    color: #ffffff;
    margin-top: 10px;
    font-family: 'Open Sans', sans-serif;

}

#footer .social-links {
    margin: 20px 0;
}

/* Responsive */
@media screen and (max-width: 768px) {
    #footer .footer-logo a img {
        width: 70%;
    }

    #footer .separator {
        width: 80%;
    }

    #footer p, #footer .copyright {
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    #footer .footer-logo a img {
        width: 90%;
    }

    #footer .separator {
        width: 90%;
    }
}


.mail-icon {
    font-size: 60px;
    color: #ff4500; /* Icon color */
    animation: bounce 1s infinite;
    cursor: pointer;
  }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-20px);
    }
    60% {
      transform: translateY(-10px);
    }
}