/*fonts*/
/*logo*/
/*section*/
/*menu*/
/*video*/
/*box content*/
@font-face {
  font-family: GeorgiaPro-Light;
  src: url('./font/GeorgiaPro-Light.ttf');
}

:root {
    --base-font-size: 16px;
    --heading-font-font-family: "GeorgiaPro-Light";
    --heading-font-font-style: normal;
    --heading-font-font-weight: 500;
    --heading-font-text-transform: none;
    --heading-font-letter-spacing: 0em;
    --heading-font-line-height: 1.4em;
    --body-font-font-family: Arial,Helvetica,sans-serif;
    --body-font-font-weight: 400;
    --body-font-text-transform: none;
    --body-font-letter-spacing: 0em;
    --body-font-line-height: 1.8em;
    --meta-font-font-family: "GeorgiaPro-Light";
    --meta-font-font-style: normal;
    --meta-font-font-weight: 400;
    --meta-font-text-transform: none;
    --meta-font-letter-spacing: 0em;
    --meta-font-line-height: 1.2em;
    --heading-1-size: 4rem;
    --heading-1-size-value: 4;
    --heading-2-size: 2.6rem;
    --heading-2-size-value: 2.6;
    --heading-3-size: 1.8rem;
    --heading-3-size-value: 1.8;
    --heading-4-size: 1.2rem;
    --heading-4-size-value: 1.2;
}

@font-face {
  font-family: Helvetica-Neue-LT-Pro-55-Roman;
  src: url('./font/helvetica-neue-lt-pro/Helvetica-Neue-LT-Pro-55-Roman.otf');
}



/*html basic*/

.mobile-menu a {
        font-size: calc(1.2vh + 4vw);
    }

h1 {
    font-size: calc(1.8vw);
}

p {
    font-size: calc(0.5vh + 1vw); /* Adjusts based on height and width */
}

p b {
    font-size: calc(0.7vh + 1vw); /* Adjusts based on height and width */
}

p span{
       font-size: calc(0.7vh + 1vw); /* Adjusts based on height and width */
}

a{
    font-size: calc(0.5vh + 1vw); /* Adjusts based on height and width */
    transition: 0.6s;
}


a:hover{
    font-size: calc(4.55vw);
}



body, html {
            height: 100%;
            margin: 0;
            color: white;
            scroll-behavior: smooth; /* Enables smooth scrolling */
            font-family: 'GeorgiaPro-Light';

        }

           body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
    opacity: 0.3;
}




  /* Logo styles */
        .logo {
            transition: all 0.5s ease;
        }

      .logo.home {
    width: calc(35vw);
}

.logo.other {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 20;
    background: #2c3955;
    padding: 10px 80% 10px 3%;
}

  


/*section*/

       .section {
            height: 100vh;
            display: flex;
            justify-content:center;
            gap: 10px;
            flex-direction: column;
            padding: 0 60px;
            width: 58%;
            position: relative;
            scroll-snap-align: start;
            scroll-snap-stop: always;
            transition: transform 0.8s ease-in-out; /* Adjust the 0.8s to control speed */
            
        }
        
        .section .box{
            height: 70vh;
        }

  #section-home {
    width: calc(45vw);
}

.section p {
    text-align: left;
    padding: 0 10px;
            font-weight: 100;
}


/*home section*/

   #section-home {
    padding: 3%;
}

 #section-home a {
    color: #fff;
    text-decoration: none;
    font-size: calc(1.35vw);
    margin: -10px 0 0 0;
    transition: 0.6s;
    position: relative;
    position: absolute;
    bottom: 10%;
}

#section-home a::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: #fff;
    transition: width 0.4s ease;
}

#section-home a:hover::before {
    width: calc(5.4vw);
}

        #section-home h1 {
    margin: 18px 0;
    color: #ffffff;
   margin-left: calc(6.6vw);
}

        #section-home img.logo {
            max-width: 100%;
            height: auto; /* Keep aspect ratio */
            display: block;
         
        }


/* Menu Container */
.section-menu {
    position: fixed;
    top: 50%;
    right: 4%;
    transform: translateY(-58%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Menu Links */




        /* Burger Menu Icon */
.burger {
    cursor: pointer;
    position: fixed;
    top: 30px;
    right: 50px;
    z-index: 30;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 30px;
}

.burger div {
    width: 100%;
    height: 3px;
    margin: 10px 0;
    background-color: #fff;
    transition: all 0.3s ease;
}

/* Burger icon active state */
.burger.active .line1 {
    transform: rotate(-45deg) translate(-18px, 18px);
}

.burger.active .line2 {
    opacity: 0;
}

.burger.active .line3 {
    transform: rotate(45deg);
}


/* Mobile Menu (hidden by default) */
#mobileMenu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    background: rgb(0 0 0 / 94%);
    padding: 90px 10px;
    border-radius: 5px;
    z-index: 30;
    width: 100%;
    height: 100%;
}

/* Mobile Menu Links */

.mobile-menu {
    display: flex;
    width: 100%;
    height: 100%;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    flex-direction: column;
}

.mobile-menu a {
  
     text-align: center;
     justify-content: center;
    flex-direction: column;
    color: white;
    text-decoration: none;
    transform: translateY(-18px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}




/* Slide-In Effect */
.mobile-menu a.slide-in {
    transform: translateY(0); /* Slide to original position */
    opacity: 1; /* Fade in */
}


.menu-link {
    position: relative; /* Position relative for brackets */
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}

/* Animated Brackets */
.menu-link::before, .menu-link::after {
    content: ''; /* Empty content for brackets */
    transition: opacity 0.3s ease;
    opacity: 0; /* Hidden by default */
}

/* Left and Right Brackets */


.menu-link.active {
    color: #007BFF; /* Change text color on active */
}

/* Hover Effect */
.menu-link:hover {
    color: #0056b3; /* Change color on hover */
}

/* Style when active or hovered */
.section-menu a {
    color: #abc7ff;
    text-transform: uppercase;
    padding: 3px 0;
}

.section-menu a:hover, .section-menu a.active {
    color: #fff; /* Change color on hover or active */
}


/*video area*/

  /* Video Background */
        .video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
            filter: brightness(0.9);
           
        }

/*       box content */

.box {
    background: #00000082;
    padding: 18px 30px;
    text-align: center;
}

.contact {
    width: 100%;
}

.information {
    display: flex;
}




.box p b{
   
    color: #abc7ff;
}



/*icon*/
.social-media {
    text-align: center;
}

.fa {
    color: #ffffff;
    font-size: calc(1.50vw);
}

.disclaimer {
    position: fixed;
    bottom: 0;
    right: 3%;
    z-index: 2;
    text-transform: uppercase;
   
}

.disclaimer p {
        font-size: calc(0.3vh + 1vw);
}