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

body {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    background: #000;
}/*
[dir="rtl"] {
  text-align: right;
}*/

/*
.main{
    background: url();
}
*/

/* HEADER */
.header {
    position: fixed;
    width: 100%;
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000; 
    transition: background 0.3s ease, padding 0.3s ease; 
}
.header.scrolled {     /* Turns solid black */
    padding: 20px 60px;    /* Slight shrink effect (optional premium touch) */ 
    background: #000;
}

.logo img{
    height: 50px;
    width: 50px;
} 
.nav ul {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav a {
    text-decoration: none;
    color: #a9a9a9;
    font-size: 14px;
    letter-spacing: 1px;
    transition: 0.2s ease-in-out;
    padding-bottom: 5px;
}
.nav a:hover{
    color: #fff;
    transition: 0.2s ease-in-out;
}
.nav .active a{ 
    color: white;
}
.menu-toggle {
    display: none;
    font-size: 28px;
    cursor: pointer;
}

/* Animation */
.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.show {
  opacity: 1;
  transform: translateY(0);
}

 


/* HERO */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../img/bgg.jpg') center/cover no-repeat; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}
 
.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 120px; 
    background: linear-gradient(90deg, #f5f5f5 0%, #d9d9d9 20%, #a6a6a6 40%, #ffffff 50%, #bfbfbf 65%, #e6e6e6 80%, #8c8c8c 100%);
    background-clip: text;
    animation: gradientMove 1s ease infinite;
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
    color: transparent; 
}

@keyframes gradientMove{
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.hero-content h2 { 
    font-size: 48px;
    color: #B48F15; 
}
 
.hero-content h4 {
    font-size: 20px;
    letter-spacing: 3px;
    margin-bottom: 20px;
    color: #fff; 
}

/* MOBILE MENU */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: #000;   /* SOLID BLACK */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s ease;
    z-index: 999;
}

.mobile-menu ul {
    list-style: none;
    text-align: center;
}

.mobile-menu li {
    margin: 25px 0;
}

.mobile-menu a {
    color: #a9a9a9;
    text-decoration: none; 
    letter-spacing: 2px; 
    font-size: 15px; 
    padding-bottom: 5px;
    transition: 0.2s ease-in-out; 
}
.mobile-menu a:hover{
    color: white;
    transition: 0.2s ease-in-out; 
}
.mobile-menu.active {
    right: 0;
}

.body-text{
    padding: 10px 100px;
    background:  url('../img/gradient.png');
    background-position: center;
    background-size: cover;
    padding-bottom: 10vh;
}
.body-text .container-fluid{
    margin-top: 5vh;
}

.body-text h1{
    font-family: 'Playfair Display', serif;
    font-size: 50px; 
    color: #fff;
}
.body-text h1:after{
    content: "";
    display: block;
    background: #e6e6e6;
    height: 1px;
    width: 100px;
    margin-top: 6vh;
}
.body-text p{  
    margin-top: 6vh;
    line-height: 30px;
    letter-spacing: 1.5px;
    font-size: 17px;  
    color: #bfbfbf;
}
.body-text img{
    margin-top: 7vh;
}



.portfolio{
    padding: 10px 100px;  
    background: black;
    padding-bottom: 10vh;
}
.portfolio .container-fluid{
    margin-top: 5vh;
}

.portfolio h1{
    font-family: 'Playfair Display', serif;
    font-size: 50px; 
    color: #fff;
}
.gradient-box {
  position: relative;
  padding: 30px; 
  background: linear-gradient(-140deg, #000 0%, #111 100%);
  margin-top: 10vh;
  color: #fff;  
} 


.extras{
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../img/1540.jpg') center/cover no-repeat; 
    padding: 50px 100px;  
}
 
.extras h3{
    font-family: 'Playfair Display', serif;
    font-size: 45px; 
}
.extras h4{
    font-size: 25px;
    font-family: 'Playfair Display', serif; 
    margin-top: 6vh;
}
.extras h4:after{
    display: block;
    content: "";
    width: 50px;
    height: 1px;
    margin-top: 3vh;
    margin-bottom: 5vh;
    background: #fff;
}
.extras li{
    list-style: none;
    margin-top: 2vh;
}



.services h1 {
    font-family: 'Playfair Display', serif;
    font-size: 80px; 
    background: linear-gradient(90deg, #f5f5f5 0%, #d9d9d9 20%, #a6a6a6 40%, #ffffff 50%, #bfbfbf 65%, #e6e6e6 80%, #8c8c8c 100%);
    background-clip: text;
    animation: gradientMove 1s ease infinite;
    -webkit-background-clip:text;
    -webkit-text-fill-color: transparent;
    color: transparent; 
}

.services{
    padding: 120px 100px;
    background: #000
    background-position: center;
    background-size: cover;
    padding-bottom: 10vh;
}
.services .container-fluid{
    margin-top: 5vh;
}
.services p{
    font-size: 16px;
    color: #a9a9a9;
}

.services .down{
    margin-top: 10vh;
}
.services h4{
    font-size: 30px;
    font-family: 'Playfair Display', serif;
}

.services li{
    list-style: none;
    font-size: 16px;
    margin-top: 3vh;
    color: #a9a9a9;
}

.services input{
    width: 100%;
    padding: 10px 30px;
    color: white;
    font-family: 'Playfair Display', serif;
    background: none;
    border: 1px solid #efefef;
}
.services textarea{
    width: 100%;
    padding: 10px 30px;
    color: white;
    font-family: 'Playfair Display', serif;
    background: none;
    border: 1px solid #efefef;
}
.services button{
    width: 100%;
    padding: 10px 30px;
    color: white;
    font-family: 'Playfair Display', serif;
    background: none;
    border: 1px solid #efefef;
    transition: 0.2s ease-in-out;
}
.services button:hover{
    background: white;
    color: black;
}



.footer{
    padding: 50px 100px;  
}
.footer .container-fluid{
    margin-top: 10vh;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 10vh;
    margin-bottom: 5vh;
}
.footer h1{
    font-family: 'Playfair Display', serif;
    margin-bottom: 3vh;
}
.footer p{
    color: #a9a9a9;
}
.footer li{
    list-style: none;
    margin-top: 3vh;
}
.footer a{
    text-decoration: none;
    color: #a9a9a9;
    transition: 0.2s ease-in-out; 
}
.footer a:hover{
    color: white;
    transition: 0.2s ease-in-out; 
}
.footer h4{
    color: #fff;
    font-size: 14px;
}
.footer span{
    font-size: 20px;
}
.copyright{
    font-family: 'Playfair Display', serif;
    font-size: 12px;
}
.copyright p{
    letter-spacing: 5px;
}

 


























/* RESPONSIVE */
@media (max-width: 992px) {

    .services h1 { 
        font-size: 50px;  
    }
    .services .col-sm-6{
        margin-top: 6vh;
    }
    .services{
        padding: 50px 20px;
    }
    .extras{
        height: unset;
        padding: 20px 20px 70px 20px;
        background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../img/hands.jpg') center/cover no-repeat; 
    }
    .extras .col-sm-6{
        margin-top: 8vh;
    }
    .extras h3{
        font-size: 35px;
        margin-bottom: 2vh;
    }
    .extras h4{
        font-size: 20px;
        margin-top: 4vh;
    }



    .hero-plain{
        height: 30vh;
    }
    .hero-plain-content h1 { 
        font-size: 40px;  
        margin-top: 15vh;
    }
    .plain-text img{
        margin-bottom: 4vh;
    }
    .plain-text{
        padding: 10px 10px;
    }

    .heros-content h1 { 
        font-size: 50px; 
    }
    .footer{
        padding: 10px 20px;  
    }
    .footer h1{
        font-size: 30px;
        letter-spacing: 3px;
    }
    .footer .col-xs-2{
        width: 50%;
        margin-top: 5vh;
    }
    .footer .container-fluid{  
        padding-bottom: 10vh;
        margin-bottom: 3vh;
    }
    .copyright{
        padding-bottom: 5vh;
    }
    .body-text{
        padding: 10px 10px;
        padding-bottom: 10vh;
    } 
    .body-text img{
        margin-top: 6vh;
    }
    .body-text h1{
        font-size: 40px;
        line-height: 60px;
    }

    .portfolio{
        padding: 10px 10px;
        padding-bottom: 10vh;
    }  
    .portfolio h1{
        font-size: 40px;
        line-height: 60px;
    }
    .gradient-box{
        margin-top: 2vh;
        height: 600px !important;
    }


    .nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .mobile-menu a:hover{
        color: #fff;
        transition: 0.2s ease-in-out;
    }
    .mobile-menu .active a{
        color: white;
    }

    .hero-content h1 {
        font-size: 50px;
    }

    .hero-content h4{
        font-size: 16px;
        margin-top: -3vh;
    }

    .logo img{
        height: 30px;
        width: 30px;
    }
    .header{
        padding: 20px 30px;
        background: unset; /* Transparent background */
        backdrop-filter: unset; /* Glass effect */
    }
    .header.scrolled {
        background: #000;      /* Turns solid black */
        padding: 10px 30px; */   /* Slight shrink effect (optional premium touch) */ 
    }
}