@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Valley+Sans:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0px;
    padding: 0px;
}

body {
    overflow-x: hidden;
    background: #EFEAE3;
}



header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.layout-padding {
    margin: 1vw 3vw;
}

nav ul {
    display: flex;
    column-gap: 15px;
    list-style: none;
}

nav ul li {
    overflow: hidden;
    padding: 12px 0px;
}


nav ul li a {
    padding: 10px 20px;
    border: 1px solid #0000009c;
    border-radius: 25px;
    font-family: 'Google Sans';
    color: #0000009c;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all ease 0.25s;
    overflow: hidden;
}

nav ul li a::after {
    content: "";
    background-color: #000;
    position: absolute;
    bottom: -110%;
    height: 105%;
    width: 100%;
    left: 0%;
    right: 100%;
    border-radius: 50%;
    z-index: -1;
    transition: all ease 0.25s;
}

nav ul li a:hover::after {
    bottom: 0%;
    border-radius: 20px;

}

nav ul li:hover a {
    color: #FFF;
}


#hero {
    font-family: 'Google Sans';
    color: #000;
    letter-spacing: -1px;
    height: 65vh;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2vw;
    margin-bottom: 2vw;
}

#hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#hero .right-hero h3 {
    font-size: 1.65vw;
    width: 24vw;
    font-weight: 700;
    line-height: 1.65vw;
}

#hero .left-hero h2 {
    font-size: 8vw;
    width: 40vw;
    text-align: right;
    font-weight: 900;
    line-height: 6.5vw;
}

.vss_video {
    z-index: 2;
}

#video_section_second {
    position: relative;
    height: 120vh;
    z-index: 0;
}

#video_section_second video {
    width: 100%;

}

.vss_video video {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    position: relative;
}


#video_orange_cir {
    height: 35vw;
    width: 45vw;
    position: absolute;
    top: -6.5vw;
    right: -5vw;
    z-index: -1;

}


#video_orange_child_one {
    width: 100%;
    height: 100%;
    background-color: orangered;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;

    filter: blur(30px);
    position: absolute;
}

#video_orange_child_two {
    width: 30vw;
    height: 30vw;
    background-color: orangered;
    border-radius: 50%;
    filter: blur(30px);
    position: absolute;
    z-index: 4;
    animation: anime1 3s linear infinite alternate;
}


#video_orange_child_three {
    width: 30vw;
    height: 30vw;
    border-radius: 50%;
    background-color: orangered;
    filter: blur(30px);
    position: absolute;
    animation: anime1 6s linear infinite alternate;
    background: linear-gradient(#FE320A, #fe570a);
    z-index: 4;
}

@keyframes anime1 {
    from {
        transform: translate(55%, -3%);
    }

    to {
        transform: translate(30%, -30%);
    }
}


@keyframes anime2 {
    from {
        transform: translate(5%, 5%);
    }

    to {
        transform: translate(0%, 10%);
    }
}


#moving-text .con h3 {
    font-family: 'Google Sans';
    color: #000;
    font-size: 10rem;
    text-transform: uppercase;
}

.con .circle {
    background-color: orangered;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: relative;
    top: -20px;
}

.con {
    white-space: nowrap;
    display: inline-block;
    animation: moving_fold_two 30s linear infinite;
}

.con div {
    display: inline-block;
    margin: 0px 10px;
}

#moving-text {
    overflow-x: hidden;
    white-space: nowrap;
    padding: 9vh 0vh;
}


@keyframes moving_fold_two {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}

#section_thrid {
    padding: 10vh 0vh;
    height: 80vh;
}

#section_thrid .sec_thrid_left h3 {
    font-family: 'Google Sans';
    color: #000;
    font-size: 3rem;
    letter-spacing: -2px;
    line-height: 3rem;
}

#section_thrid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10vh;
}

.s_th_r_r_para p {
    font-family: 'Google Sans';
    color: #000;
    letter-spacing: -1px;
    font-size: 1rem;
    line-height: 1.5rem;
}

.sec_th_r_rap {
    padding: 1.5rem;
    border-radius: 10px;
    background-color: #FFF;
}

.s_th_r_rap_img img {
    border-radius: 10px;
    width: 100%;
    height: 175px;
    margin-bottom: 20px;
    object-fit: cover;
}

.sec_thrid_left {
    width: 42vw;
}

.sec_thrid_right {
    width: 20vw;
    position: relative;
    top: 10vw;
    margin-right: 5vw;
}

.sec_thrid_left {
    position: relative;
    z-index: 4;
}

.sec_third_circle_first {
    height: 25vw;
    width: 25vw;
    background: linear-gradient(#FE320A, #fe570a);
    border-radius: 50%;
    filter: blur(30px);
    position: absolute;
    left: 20vw;
    top: 5vw;
    z-index: -1;
}

.sec_third_circle_two {
    width: 25vw;
    height: 25vw;
    background-color: #FE320A;
    border-radius: 50%;
    filter: blur(30px);
    position: absolute;
    left: 20vw;
    top: 7.5vw;
    z-index: -1;
}


.heading_fec_sec h3 {
    font-family: 'Google Sans';
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
}

.heading_fec_sec {
    margin-bottom: 12vh;
}

.fec_sec_left h3 {
    font-size: 3rem;
    font-family: 'Google Sans';
    text-transform: capitalize;
}

.fec_sec_right h4 {
    font-size: 1.5rem;
    font-family: 'Google Sans';
    font-weight: 300;
    text-transform: uppercase;
    text-align: right;
}

#fecture_section {
    padding-bottom: 10vh;
}

.fec_sec_right p {
    font-size: 0.85rem;
    font-family: 'Google Sans';
    color: #00000090;
    font-weight: 300;
    text-align: right;
    text-transform: capitalize;
}


.feature_sec_r_main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6vh 6vh;
    border-bottom: 1px solid #ccc;
}

.heading_fec_sec h3 {
    position: relative;
    padding-left: 18px;
}

.heading_fec_sec h3::before {
    position: absolute;
    left: 0px;
    top: 5px;
    background-color: orangered;
    content: "";
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

.feature_sec_r_main {
    position: relative;
    transition: all 0.35s ease-in-out;
    cursor: pointer;
}

.feature_sec_r_main::after {
    position: absolute;
    background-color: goldenrod;
    content: "";
    top: 0px;
    left: 0px;
    height: 0%;
    width: 100%;
    z-index: 0;
    transition: all 0.35s ease-in-out;
}

.feature_sec_r_main:hover::after {
    height: 100%;
}

.feature_sec_r_main * {
    position: relative;
    z-index: 1;
}

.feature_img img {
    height: 80vh;
    width: 25vw;
    border-radius: 20px;
    object-fit: cover;
}



#fecture_section {
    position: relative;
}

.feature_img {
    position: fixed;
    top: 10vh;
    z-index: 5;
    left: 50vw;
    display: none;
}

#section_five {
    display: flex;
    font-family: 'Google Sans';
    align-items: center;
}


.s_f_l_big h3 {
    font-size: 4rem;
    color: #504A45;
    letter-spacing: -2px;
}

.sf_dpe {
    display: flex;
    margin: 4vw 3vw;
    background-color: #000;
    border-radius: 20px;
}

.sec_five_left {
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8vw;
}

.sec_five_right {
    flex-basis: 60%;
}

.s_f_l_para {
    font-family: 'Google Sans';
    min-height: 200px;
}

.s_f_l_para p {
    font-family: 'Google Sans';
    font-size: 1rem;
    color: #FFF;
}

.sec_five_right img {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s_f_l_big {
    margin-bottom: 20px;
    border-left: 2px solid #504A45;
}

.s_f_l_big .active {
    padding-left: 30px;
    color: #FFF;
}

.w_w_w_con {
    padding: 1vw;
    font-family: 'Google Sans';
    font-size: 1rem;
}

#footer {
    background-color: orangered;
    font-family: 'Google Sans';
    padding-top: 3vh;
    padding-left: 2vw;
    padding-right: 2vw;
    margin-top: 10vh;  
}


.w_w_w_img img {
    height: 75px;
    margin-bottom: 20px;
}

.w_w_w_con {
    border-left: 1px solid #ccc;
    padding: 0vw 4vw 0vw 3vw;
}

.f_f_l_heading h4 {
    color: #FFF;
    font-size: 2.5rem;
    line-height: 2.5rem;
}

.footer_first {
    display: flex;
    justify-content: space-between;
    padding: 0vw 5vw;
}

.f_f_para {
    font-size: 1.5rem;
    color: #FFF;
}

.footer_f_left {
    flex-basis: 30%;
}

.footer_f_right {
    flex-basis: 30%;
}

.footer_first {
    margin-top: 15vh;
}

.f_f_form {
    width: 100%;
}

.f_f_email input[type="email"] {
    font-family: 'Google Sans';
    background-color: orangered;
    color: #FFF;
    font-size: 1rem;
    padding: 1rem;
    border: none;
    width: 90%;
    margin-top: 10px;
}

.f_f_email input[type="email"]:focus {
    border: none;
    outline: none;
}

.f_f_email input[type="email"]:active {
    border: none;
    outline: none;
}

.f_f_email input::placeholder {
    color: #FFF;
    font-size: 1rem;
    font-family: 'Google Sans';
}


.f_f_email {
    border-bottom: 1px solid #FFF;
}

.f_f_submit {
    margin-top: 15px;
}

.f_f_submit button {
    font-family: 'Google Sans';
    background-color: #000;
    color: #FFF;
    padding: 1rem;
    font-size: 1.5rem;
    display: block;
    width: 100%;
    border: none;
    text-transform: capitalize;
    font-weight: 600;
    border-radius: 10px; 
}


.footer_heading_shadow h2 {
    font-size: 25vw;
    color: #FFF; position: relative; z-index: 2; 
}


.f_a_l_div {
    color: #FFF;
    font-family: 'Google Sans';
    font-size: 1.25rem;
}

.footer_address_loc_main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0rem;
    border-top: 2px solid #FFF;
    position: relative; z-index: 3; 
}

.mobile-nav-main{ font-family: 'Google Sans'; font-size: 1rem;  }

.header_menu_icon{     padding: 10px 10px;  
    border: 1px solid #0000009c;
    border-radius: 25px;
    font-family: 'Google Sans';
    color: #0000009c;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all ease 0.25s;
    overflow: hidden; color: #0000009c;  }

.header_menu_icon i{ margin-right: 5px; }
 
.mobile-nav-main{ display: flex; justify-content: space-between; align-items: center; padding: 3vw;  }
.mobile-menu-nav ul{ list-style: none; }
.mobile-menu-nav ul li{ margin-bottom: 2vh; margin-top: 2vh;  }
.mobile-menu-nav ul li a{ color: #000000; font-family: 'Google Sans'; font-size: 2rem; text-decoration: none; }


.mobile-menu{ padding: 6vw 4vw; background-color: #FFF; border-radius: 0px 0px 25px 25px; text-align: right; position: fixed; top: -100vh;  z-index: 9; left: 0px; right: 0px; z-index: 999; transition: all 1s ease-in-out; box-shadow: 0px 10px 0px rgba(0,0,0,0.75)  }

.mobile-menu-close i{ font-size: 1.5rem; font-weight: 300; color: #000000;   }

.mobile-menu-close{ font-family: 'Google Sans' !important;  font-size: 1.5rem; display: inline-flex; align-items: center; justify-content: flex-end; border: 1px solid #0000009c; padding: 0.25rem 0.5rem; border-radius: 30px; color: #000000;    }

.full_black{ background-color: #00000080; position: fixed; top: 0px; width: 100vw; height: 0vh;    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 99; transition: all 1s ease-in-out; border-radius: 0px 0px 30px 30px;  }
 
.mobile-menu-close i{ margin-right: 5px; }

.mobile-nav{ display: none; }
 

@media (max-width: 768px) {
.mobile-nav{ display: block; }
    
    header{ display: none; }
    
    nav{ display: none; }
    #hero{ flex-direction: column-reverse; height: auto; padding: 3vw;  }
    #hero .left-hero h2{   font-size: 15vw; line-height: 15vw; width: 55vw;  }
    #video_orange_cir{ display: none; }
    #hero .right-hero h3{  font-size: 1.5rem; margin-top: 4vh; margin-bottom: 4vh;  
        line-height: 1.75rem;
        width: 80%;
        margin-right: auto;
        max-width: 100%;
 }
    
    .vss_video{ margin-top: 5vh; } 
    
    #video_section_second{ height: auto; }
    
    #moving-text .con h3{ font-size: 2rem; }
    
    .con .circle {
    background-color: orangered;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    position: relative;
    top: -5px;
}
    
  .con div {
    display: inline-block;
    margin: 0px 5px;
}  
    
    #section_thrid{ flex-direction: column; padding: 3vw; height: auto; margin-bottom: 10vh;  }
    
    .sec_thrid_left{ width: auto; }
    .sec_thrid_right{ width: auto; margin-right: auto; }
    
    #section_thrid .sec_thrid_left h3{ font-size: 2rem; line-height: 2.5rem;  }
    .heading_fec_sec{ margin-bottom: auto; }
    
    .feature_img{ display: none !important; }
    .feature_sec_r_main{ padding: 3vh; }
    
    .feature_sec_r_main{ flex-direction: column; align-items: self-start;  }
    .fec_sec_right h4{ text-align: left; }
    .fec_sec_right p{ text-align: left; }
    .fec_sec_left h3{ font-size: 2.5rem; margin-bottom: 10px;  }
    .fec_sec_right h4{ font-size: 1.25rem; }
    .sf_dpe{ flex-direction: column-reverse; }
    .s_f_l_big h3{ font-size: 2.75rem; }
    #who_we_work{ padding-top: 5vh; }
    .who_we_wk_main{ margin-top: 4vh; }
    .who_we_wk_main .w_w_w_con{ padding:  0vh 3vh; }
    .footer_first{ flex-direction: column;  gap: 5vh; margin-bottom: 5vh;   }
    .footer_heading_shadow h2{ font-size: 20vw; }
    .footer_address_loc_main{ flex-wrap: wrap; }
    .f_a_l_div{ flex-basis: 50%; font-size: 1rem; line-height: 2rem;  }
}