body{
    animation:fadeIn 1s ease;
}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

html{
    scroll-behavior:smooth;
}

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

body{
    font-family:'Montserrat', sans-serif;
    background:#181818;
    color:white;
    overflow-x:hidden;
}

/* HEADER */

 .header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:82px;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 28px 0 8px;

    z-index:99999;
}

.logo{

    height:70px;

    width:auto;

    object-fit:contain;

    display:block;
}

/* DESKTOP MENU */

.desktop-menu{

    display:flex;

    gap:28px;

    position:relative;

    z-index:99999;
}

.desktop-menu a{

    text-decoration:none;

    color:#222;

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;

    transition:0.3s;
}

.desktop-menu a:hover{

    opacity:0.6;
}

/* MENU BUTTON */

.menu-btn{

    width:28px;

    display:none;

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

    gap:4px;

    cursor:pointer;
}

.menu-btn span{

    width:5px;

    height:5px;

    background:#222;

    border-radius:50%;
}

/* SIDEBAR */

.sidebar{

    position:fixed;

    top:0;

    right:-100%;

    width:85%;

    max-width:320px;

    height:100vh;

    background:#181818;

    z-index:999999;

    padding:30px;

    transition:0.4s ease;
}

.sidebar.active{

    right:0;
}

.close-btn{

    position:absolute;

    top:15px;

    right:20px;

    font-size:42px;

    color:white;

    cursor:pointer;
}

.sidebar-logo{

    width:180px;

    margin-bottom:40px;

    margin-top:30px;
}

.sidebar a{

    display:block;

    color:white;

    text-decoration:none;

    padding:18px 0;

    border-bottom:1px solid #333;

    font-size:18px;

    letter-spacing:2px;

    transition:0.3s;
}

.sidebar a:hover{

    padding-left:10px;

    color:#ccc;
}

/* HERO */

.hero{

    width:100%;

    height:100vh;

    background:
    linear-gradient(
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.45)
    ),
    url('hero.jpg');

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;
}

/* HERO CONTENT */

.hero-content{

    max-width:700px;

    margin-top:60px;
}

.small-text{

    letter-spacing:5px;

    font-size:14px;

    margin-bottom:20px;

    color:#ddd;
}

.hero-content h1{

    font-size:85px;

    line-height:1;

    margin-bottom:25px;

    font-weight:300;

    letter-spacing:3px;

    text-transform:uppercase;
}

.hero-sub{

    font-size:22px;

    line-height:1.8;

    color:#ddd;

    margin-bottom:35px;
}

/* BUTTON */

.explore-btn{

    display:inline-block;

    padding:15px 35px;

    border:1px solid white;

    color:white;

    text-decoration:none;

    font-size:16px;

    letter-spacing:2px;

    transition:0.4s;
}

.explore-btn:hover{

    background:white;

    color:black;
}

/* ABOUT SECTION */

.about-section{

    background:#f4f4f4;

    padding:120px 8%;
}

.about-container{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:90px;
}

.about-left{

    flex:1;
}

.about-right{

    flex:1;
}

.small-heading{

    font-size:12px;

    letter-spacing:4px;

    color:#777;

    margin-bottom:25px;
}

.about-left h2{

    font-size:58px;

    line-height:1.2;

    font-weight:400;

    color:#111;
}

.about-right p{

    font-size:20px;

    line-height:2;

    color:#444;
}

/* TRUST SECTION */

.trust-section{

    padding:120px 8%;

    background:#181818;

    color:white;

    text-align:center;
}

.trust-section h2{

    font-size:58px;

    font-weight:400;

    line-height:1.2;

    margin-bottom:70px;
}

.trust-grid{

    display:grid;

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

    gap:35px;
}

.trust-card{

    padding:45px;

    border:1px solid rgba(255,255,255,0.08);

    background:#202020;

    text-align:left;

    transition:0.4s;
}

.trust-card:hover{

    transform:translateY(-6px);
}

.trust-card h3{

    font-size:28px;

    margin-bottom:20px;

    font-weight:400;
}

.trust-card p{

    font-size:17px;

    line-height:1.9;

    color:#bbb;
}

/* SERVICES */

.services-section{

    padding:120px 8%;

    background:#f5f5f5;
}

.services-header{

    margin-bottom:70px;
}

.services-header h2{

    font-size:58px;

    font-weight:400;

    color:#111;
}

.services-grid{

    display:grid;

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

    gap:25px;
}

.service-card{

    background:white;

    padding:45px;

    border:1px solid #e5e5e5;

    transition:0.4s;
}

.service-card:hover{

    transform:translateY(-5px);
}

.service-card h3{

    font-size:28px;

    margin-bottom:20px;

    font-weight:400;

    color:#111;
}

.service-card p{

    font-size:17px;

    line-height:1.9;

    color:#555;
}

/* COLLECTIONS */

.collections{

    padding:120px 25px;

    background:#0d0d0d;
}

.collections h2{

    text-align:center;

    font-size:58px;

    margin-bottom:70px;

    font-weight:300;

    letter-spacing:3px;

    text-transform:uppercase;
}

.grid{

    display:grid;

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

    gap:20px;

    max-width:1200px;

    margin:auto;
}

.card{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

    transition:0.4s;

    box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.card:hover{

    transform:translateY(-8px);
}

.card img{

    width:100%;

    height:340px;

    object-fit:cover;

    display:block;

    transition:0.5s;

    filter:brightness(92%);
}

.card:hover img{

    transform:scale(1.12);
}

.card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.08)
    );

    z-index:1;
}
.card h3{

    position:absolute;

    bottom:25px;

    left:25px;

    font-size:34px;

    font-weight:400;

    letter-spacing:2px;

    color:white;

    z-index:5;

    text-shadow:
    0 3px 10px rgba(0,0,0,0.7);
}
/* MOBILE */

@media(max-width:900px){

    /* HIDE DESKTOP MENU */

    .desktop-menu{

        display:none;
    }

    /* SHOW 9 DOT MENU */

    .menu-btn{

        display:grid;

        width:32px;

        height:32px;

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

        gap:4px;

        cursor:pointer;

        z-index:999999;
    }

    .menu-btn span{

        width:6px;

        height:6px;

        background:#111;

        border-radius:50%;
    }

    /* HEADER */

    .header{

        height:78px;

        padding:0 18px 0 2px;
    }

    .logo{

        height:58px;
    }

    /* SIDEBAR */

    .sidebar{

        width:85%;
    }

    /* HERO */

    .hero{

        height:85vh;
    }

    .hero-content{

        margin-top:60px;
    }

    .hero-content h1{

        font-size:42px;
    }

    .hero-sub{

        font-size:16px;

        line-height:1.7;
    }

    .small-text{

        font-size:12px;

        letter-spacing:4px;
    }

    .explore-btn{

        padding:12px 24px;

        font-size:14px;
    }

    /* ABOUT */

    .about-container{

        flex-direction:column;

        gap:35px;
    }

    .about-left h2{

        font-size:36px;
    }

    .about-right p{

        font-size:17px;

        line-height:1.8;
    }

    /* TRUST */

    .trust-grid{

        grid-template-columns:1fr;
    }

    .trust-section h2{

        font-size:36px;
    }

    .trust-card{

        padding:30px;
    }

    /* SERVICES */

    .services-grid{

        grid-template-columns:1fr;
    }

    .services-header h2{

        font-size:36px;
    }

    .service-card{

        padding:30px;
    }

    /* COLLECTIONS */

    .grid{

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

    gap:14px;
}

   .card img{

    height:180px;
}

  .card h3{

    font-size:18px;

    bottom:14px;

    left:14px;
}

    /* ABOUT PAGE */

    .about-overlay h1{

        font-size:42px;
    }

    .about-overlay p{

        font-size:16px;
    }

    .about-content{

        padding:80px 6%;
    }

    .about-content h2{

        font-size:34px;
    }

    .about-content p{

        font-size:17px;
    }

    .about-content li{

        font-size:16px;
    }
}


/* ABOUT PAGE */

.about-hero{

    height:55vh;

    background:
    linear-gradient(
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.45)
    ),
    url('hero.jpg');

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.about-overlay h1{

    font-size:70px;

    font-weight:300;

    margin-bottom:20px;

    letter-spacing:2px;
}

.about-overlay p{

    font-size:20px;

    letter-spacing:3px;

    color:#ddd;
}

/* ABOUT CONTENT */

.about-content{

    background:#f5f5f5;

    padding:120px 8%;
}

.container{

    max-width:1100px;

    margin:auto;
}

.about-content h2{

    font-size:52px;

    color:#111;

    margin-bottom:30px;

    font-weight:400;
}

.about-content p{

    font-size:20px;

    line-height:2;

    color:#444;

    margin-bottom:30px;
}

.about-content ul{

    margin-top:30px;

    padding-left:20px;
}

.about-content li{

    font-size:19px;

    line-height:2;

    color:#444;
}
/* DROPDOWN */

.dropdown{

    position:relative;
}

.dropdown-content{

    position:absolute;

    top:100%;

    left:0;

    background:#111;

    min-width:190px;

    padding:10px 0;

    border-radius:10px;

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:0.3s ease;

    z-index:99999;
}

.dropdown-content a{

    display:block;

    color:white;

    padding:10px 18px;

    text-decoration:none;

    font-size:12px;

    letter-spacing:1px;

    transition:0.3s;
}

.dropdown-content a:hover{

    background:#1f1f1f;

    padding-left:24px;
}

.dropdown:hover .dropdown-content{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}
/* CONTACT HERO */

.contact-hero{

    width:100%;

    height:55vh;

    background:
    linear-gradient(
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.55)
    ),
    url('hero.jpg');

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;
}

.contact-overlay h1{

    font-size:70px;

    font-weight:300;

    letter-spacing:3px;

    margin-bottom:20px;
}

.contact-overlay p{

    font-size:20px;

    color:#ddd;
}

/* CONTACT PAGE */

.contact-page{

    background:#f5f5f5;

    padding:100px 8%;
}

.contact-box{

    max-width:900px;

    margin:auto;

    text-align:center;
}

.contact-box h2{

    font-size:52px;

    color:#111;

    margin-bottom:45px;

    font-weight:400;
}

.contact-info p{

    font-size:22px;

    color:#444;

    margin-bottom:28px;

    line-height:1.8;
}

.contact-info i{

    margin-right:15px;

    color:#111;
}

/* FULL MAP */

.full-map iframe{

    width:100%;

    height:500px;

    border:0;

    display:block;
}

/* MOBILE */

@media(max-width:768px){

    .contact-overlay h1{

        font-size:42px;
    }

    .contact-overlay p{

        font-size:16px;
    }

    .contact-box h2{

        font-size:34px;
    }

    .contact-info p{

        font-size:17px;
    }

    .full-map iframe{

        height:320px;
    }
}
/* HOME PAGE CONTACT SECTION */

.contact-section{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:70px;

    padding:110px 8%;

    background:#f5f5f5;
}

.contact-left{

    flex:1;

    max-width:500px;
}

.contact-right{

    flex:1;
}

.contact-left h2{

    font-size:54px;

    color:#111;

    margin-bottom:30px;

    font-weight:400;
}

.contact-details p{

    font-size:20px;

    line-height:2;

    color:#555;

    margin-bottom:14px;
}

.contact-right iframe{

    width:100%;

    height:420px;

    border:none;

    border-radius:14px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.15);
}

/* MOBILE */

@media(max-width:768px){

    .contact-section{

        flex-direction:column;

        text-align:center;

        gap:40px;

        padding:80px 6%;
    }

    .contact-left h2{

        font-size:36px;
    }

    .contact-details p{

        font-size:16px;

        line-height:1.8;
    }

    .contact-right iframe{

        height:280px;
    }
}
/* TOP CONTACT BAR */

.top-contact{

    margin-top:82px;

    background:#111;

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 8%;

    font-size:14px;
}

.top-contact i{

    margin-right:10px;

    color:#d4af37;
}

/* FOOTER */

.footer-section{

    background:#111;

    color:white;

    padding:70px 8% 25px;
}

.footer-grid{

    display:grid;

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

    gap:50px;

    margin-bottom:40px;
}

.footer-box h3{

    margin-bottom:25px;

    font-size:24px;

    font-weight:400;
}

.footer-box p{

    color:#bbb;

    line-height:2;

    margin-bottom:12px;
}

.footer-box a{

    display:block;

    color:#bbb;

    text-decoration:none;

    margin-bottom:15px;

    transition:0.3s;
}

.footer-box a:hover{

    color:white;

    padding-left:5px;
}

/* SOCIAL */

.social-icons{

    display:flex;

    gap:18px;

    font-size:22px;
}

.social-icons i{

    cursor:pointer;

    transition:0.3s;
}

.social-icons i:hover{

    color:#d4af37;
}

/* FOOTER BOTTOM */

.footer-bottom{

    border-top:1px solid #333;

    padding-top:22px;

    text-align:center;

    color:#888;

    font-size:14px;
}

/* WHATSAPP */

.whatsapp{

    position:fixed;

    right:18px;

    bottom:18px;

    width:65px;

    height:65px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:34px;

    text-decoration:none;

    z-index:999999;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.35);
}

/* MOBILE */

@media(max-width:768px){

    .top-contact{

        flex-direction:column;

        gap:10px;

        text-align:center;

        font-size:13px;
    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;
    }

    .whatsapp{

        width:58px;

        height:58px;

        font-size:28px;
    }
}

/* MOBILE */

@media(max-width:768px){

    .about-hero{

        height:45vh;

        padding:20px;
    }

    .about-overlay h1{

        font-size:42px;
    }

    .about-overlay p{

        font-size:16px;
    }

    .about-content{

        padding:80px 6%;
    }

    .about-content h2{

        font-size:34px;
    }

    .about-content p{

        font-size:17px;

        line-height:1.9;
    }

    .about-content li{

        font-size:16px;
    }
}
/* DESKTOP DROPDOWN */

.dropdown{

    position:relative;
}

.dropdown-content{

    position:absolute;

    top:100%;

    left:0;

    background:#111;

    min-width:220px;

    border-radius:10px;

    padding:10px 0;

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:0.3s ease;
}
/* PROFESSIONAL MOBILE SIDEBAR */

.mobile-menu-item{

    border-bottom:1px solid #333;
}

.mobile-main{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    color:white;

    font-size:18px;
}

.arrow-btn{

    width:42px;

    height:42px;

    border:none;

    background:#2a2a2a;

    color:white;

    cursor:pointer;

    font-size:16px;

    border-radius:4px;
 transition:0.3s;
}

.mobile-submenu{

    max-height:0;

    overflow:hidden;

    transition:0.4s ease;

    padding-left:20px;
}

.mobile-menu-item.active .mobile-submenu{

    max-height:500px;
}
.mobile-submenu a{

    display:block;

    padding:14px 0;

    color:#bbb;

    text-decoration:none;

    font-size:16px;

    border-bottom:1px solid #222;
}

.mobile-menu-item.active .mobile-submenu{

    max-height:500px;
}

.mobile-menu-item.active .arrow-btn{

    transform:rotate(180deg);
}