@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --color1: black;
    --color2: #0100fe;
    --color3: white;
}

.nav_link_holder a{
    position: relative;
}
.nav_link_holder a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0.3vh;
    bottom: -0.5vh;
    left: 0;
    background-color: var(--color2);
    transition: width 0.3s ease-in-out;
}
.nav_link_holder a:hover::after {
    width: 100%;
}
/* For active page */
.nav_link_holder a.active::after {
    width: 100%;
}
/* Hide active underline when hovering any nav link */
.nav_link_holder:hover a.active::after {
    width: 0;
}
.menu_extend{
    width: 8vw;
    height: 7vh;
    max-height: 7vh;
    outline: none;
    border: none;
    background-color: var(--color2);
}
.icon{
    font-size: 2vw;
}
.menu_extend{
    position: relative;
    overflow: hidden;
}
.menu_extend_content{
    color: var(--color3);
    z-index: 90;
    position:relative;
}
.menu_extend_anim{
    background-color: var(--color1);
    height: 0%;
    transition: all 0.25s ease-in-out;
    position: absolute;
    border-radius: 60%;
    z-index: 1;
}
.menu_extend:hover .menu_extend_anim{
    height: 100%;
    width: 100%;
    border-radius: 0%;
    transition: all 0.25s ease-in-out;
}
.hero_section{
    height: 85vh;
}
.secondary_button{
    width: 15vw;
    height: 7vh;
    background-color: var(--color3);
    border: 0.2vw solid var(--color1);
}
.primary_button{
    width: 15vw;
    height: 7vh;
    background-color: var(--color2);
    border: 0.2vw solid var(--color2);
    border: none;
}
.button{
    position: relative;
    overflow: hidden;
}
.button_content{
    position: relative;
    z-index: 40;
}
.button_overlay{
    background-color: var(--color1);
    position: absolute;
    z-index: 30;
    top: 100%;
    transition: all 0.25s ease-in-out;
}
.button:hover .button_overlay{
    top: 0%;
    transition: all 0.25s ease-in-out;
}
.button:hover .button_content{
    color: var(--color3);
    transition: all 0.25s ease-in-out;
}
.right_hero {
    height: 80vh;
    overflow: hidden;
    position: relative;
}

.scroll-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1vw;
    height: 100%;
    padding: 1vw;
}

.scroll-track {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1vw;
    transform: translateY(0);
    min-height: max-content;
}

.scroll-column img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 0.7vw;
}

::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }


.primary_link{
    background-color: var(--color2);
    width: 12vw;
    height: 5vh;
}

.cards_process{
    overflow: hidden;
}
.step_image{
    height: 30vh;
    object-fit: cover;
}
.service_card {
    position: relative;
    padding-left: 2.5vw;
    padding-top: 5vh;
    padding-bottom: 5vh;
    border-left: none;
}

.card-border {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.4vw;
    height: 0;
    background-color: var(--color1);
}

.service_image_holder {
    height: 60vh;
    width: 100%;
    overflow: hidden;
}

.service_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}
.cta{
    position: relative;
}
.cta_background{
    background-color: var(--color2);
    height: 40vh;
    position: relative;
}
.cta_image{
    height: 150%;
    z-index: 30;
}
.cta_title{
    position: absolute;
    z-index: 40;
}
.secondary_link{
    background-color: var(--color3);
    border: 0.15vw solid var(--color1);
}
.footer_link{
    font-weight: 400;
    transition: 0.2s all ease-in-out;
}
.footer_link:hover{
    font-weight: 600;
    transition: 0.2s all ease-in-out;
}
.copyright{
    margin-top: 10vh;
}
.aboutus_image, .founder_image{
    width: 100%;
    object-fit: cover;
    box-shadow: rgba(0, 0, 0, 0.35) 0vw 0.26vw 0.78vw;
}
.service_img{
    object-fit: cover;
    height: 50vh;
}
.contact_div{
    border-left: 0.4vw solid var(--color2);
    padding: 0vh 1vw;
}
.map{
    height: 50vh;
}
.menu_extend{
    display: none;
}
.menu_extended{
    overflow: hidden;
    background-color: var(--color1);
    position: absolute;
    z-index: 400;
    height: 0vh;
}
.main_container{
    position: relative;
    z-index: 200;
}
@media (max-width: 1023px){
    .nav_link_holder{
        display: none;
    }
    .menu_extend{
        width: 20vw;
    }
    .icon{
        font-size: 4vw;
    }
    .hero_button_holder .button{
        width: 100%;
    }
    .left_hero{
        height: 40%;
    }
    .hero_section{
        flex-direction: column-reverse;
    }
    .navbar{
        margin-top: 2.5vh;
    }
    .left_about{
        gap: 2vw;
    }
    .right_about{
        display: none;
    }
    .primary_link{
        width: 100%;
    }
    .process_subtitle{
        width: 75%;
    }
    .card_holder_process{
        margin-top: 2.5vh;
        flex-direction: column;
        margin-bottom: 2.5vh;
    }
    .step_image{
        height: 15vh;
        margin-bottom: 1vh;
    }
    .cta_image {
        height: 100%;
        opacity: 40%;
    }
    .footer{
        flex-direction: column-reverse;
        gap: 5vh;
    }
    .footer_links{
        align-items: flex-start;
    }
    .copyright{
        display: none;
    }  
    .about_page {
        flex-direction: column-reverse;
    }
    .contact_holders{
        padding: 0;
        flex-direction: column;
        gap: 5vh;
    }
    .map{
        height: 40vh;
    }
    .contact_div{
        border-left: 0.7vw solid var(--color2);
    }
    .service_page_holder{
        flex-direction: column;
    }
    .service_holder_alt{
        flex-direction: column-reverse;
    }
    .service_img{
        height: 100%;
        width: 100%;
    }
    .menu_extend{
        display: block;
    }
    .navbar{
        height: 10vh;
    }
}
@media (max-width: 699px){
    .icon{
        font-size: 6vw;
    }
    .left_hero{
        height: 60vh;
        justify-content: space-evenly;
    }
    .process{
        align-items: flex-start;
    }
    .process_subtitle {
        width: 100%;
        text-align: justify;
    }
    .services{
        align-items: flex-start;
    }
    .service_subtitle{
        text-align: left;
        width: 100%;
    }
    .services_holder{
        position: relative;
    }
    .service_image_holder {
        z-index: 30;
        position: absolute;
        opacity: 30%;
    }
    .services_div_holder {
        position: relative;
        z-index: 50;
    }
    .about_page:first-of-type{
        padding-bottom: 2vh;
    }
}