.image_holder{
    position: absolute;
    pointer-events: none;
}
/* buttons */
.custom_button {
    font-family: var(--primary_font);
    font-weight: 500;
    padding: 0.8vw 2vw;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1vw;
    transition: background-color 0.3s ease;
}

/* Variants */
.button_primary {
    background-color: var(--primary_color);
    color: #ffffff;
}

.button_secondary {
    background-color: rgb(143, 143, 143);
    color: #ffffff;
}

.custom_button:hover {
    opacity: 0.9;
}

/* navbar */
.mobile_menu{
    display: none;
}

.hero_section {
    position: relative;
    z-index: 1;
    overflow: hidden !important;
    max-height: 83vh;
}

.about_us {
    position: relative;
    z-index: 2;
}

.about_content{
    position: absolute;
    z-index:2;
}
.about_image{
    position: absolute;
    z-index: 1;
}

/* service cards */
.service_card{
    border-top: 3px solid rgb(143, 143, 143);
    position: relative;
}

.service_title h4{
    color: rgb(143, 143, 143);
    transition: all 0.5s ease;
}
.service_title{
    position: absolute;
    z-index: 20;
}
.service_background{
    width: 100%;
    height: 100%;
    background-color: var(--primary_color);
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    opacity: 0%;
    transition: all 0.5s ease;
}

/* Hover effect */
.service_card:hover .service_background {
   opacity: 100%;
    transition: all 0.5s ease;
}
.service_card:hover .service_title>h4{
    color: white;
    transition: all 0.5s ease;
}

/* why choose sections */
.why_icon{
    font-size: 7vw;
}

/* faq sections */
.faq_card{
    border-top: 3px solid rgb(143, 143, 143);
    padding: 0vh 2vw;
}
.question_title{
    color: rgb(143, 143, 143);
}
.answer {
  height: auto;
  padding-bottom: 2vh;
}

/* contacts */
.input{
    padding: 2vh 1.5vw;
    background-color: rgb(216, 216, 216);
    border: none;
    color: black;
    font-size: 1vw;
}

/* footer */
.footer{
    background-color: var(--primary_color);
}

.copyright{
    display: none;
}

/* teams */
.team_card{
    position: relative;
}
.team_image{
    position: absolute;
    z-index: 3;
}
.team_overlay{
    position: absolute;
    z-index: 5;
    background-color: black;
    opacity: 30%;
}
.team_content_holder{
    position: absolute;
    z-index: 7;
    background-color: white;
    width: 70%;
    height: 15%;
    margin-top: 100%;
    padding: 0vh 0.5vw;
}

/* service page */
.service_page_holder, .immigrant{
    position: relative;
    z-index: 100;
}
.package_card{
    background-color: var(--white_color);
    border-radius: 7px;
    padding: 2.5vh 2vw;
}
.general_services{
    padding: 2.5vh 2vw;
    border-radius: 7px;
}

/* FAQ */
.faq{
    min-height: 100vh;
}
.menu_extended{
    position: absolute;
    z-index: 999;
    height: 0vh;
}
.destination-track img{
    height: 40vh;
}
.destination-track {
    display: flex;
    gap: 1vw;
    padding: 2vh 2vw;
    will-change: transform;
}
#globeViz { 
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: var(--light_color);
}
#tooltip { position: absolute; pointer-events: none; background: rgba(0, 0, 0, 0.7); color: white; padding: 5px; border-radius: 3px; display: none; }

canvas { display: block; }


@media (max-width: 999px){
    #globeViz { 
        height: fit-content;
    }
    #globeViz canvas {
        width: 100% !important;
        height: 90% !important;
        border: none;
    }
    .scene-container {
        width: 100% !important;
        height: 100% !important;
    }
    .mobile_menu {
        display: block !important;
    }
    .link_holder_nav h4 {
        display: none;
    }
    .image_holder {
        opacity: 30%;
    }
    .navbar, .menu_extended_navbar{
        padding: 3vh 5vw;
    }
    .hero_content {
        align-items: center !important;
        text-align: center;
    }
    .custom_button{
        font-size: 3vw;
        padding: 2vw 5vw;
    }
    .about_paragraph h4 {
        width: 90% !important;
    }
    .about_image>img{
        margin-top: 10vh !important;
    }
    .why_title_holder h4 {
        width: 100% !important;
    }
    .why_card {
        gap: 2vh;
    }
    .why_icon {
        font-size: 10vw;
    }
    .why_card_holder {
        margin-top: 5vh !important;
    }
    .input{
        font-size: 2.5vw;
    }
    .faq {
        height: fit-content !important;
        padding: 7vh 5vw !important;
    }
    .contact_image {
        display: none;
    }
    .footer_logo h3 {
        display: none;
    }
    .footer {
        grid-template-columns: 1fr 1.2fr 1.2fr !important;
        height: 50vh;
    }
    .mission_vision {
        gap: 2vh;
    }
    .team_card{
        height: 35vh !important;
    }
    .team_content_holder{
        height: 20%;
        margin-top: 70%;
        padding: 0vh 2vw;
    }
    .left_service_hero {
        padding: 0 !important;
        margin-top: 5vh;
    }

    .contact_page {
        height: fit-content;
    }
    .destination-track img {
        height: 25vh;
    }
}

@media (max-width: 699px) {
    .image_holder {
        margin-left: 40%;
    }
    .button_holder_hero{
        flex-direction: column !important;
    }
    .custom_button {
        font-size: 5vw;
        padding: 2vw 10vw;
    }
    .about_image img {
        width: 90% !important;
    }
    .service_title {
        margin-left: 5vw !important;
    }
    .why_card {
        padding: 5vh 0vw !important;
    }
    .why_icon {
        font-size: 15vw;
    }
    .question {
        grid-template-columns: 0.25fr 1fr 0.2fr !important;
    }
    .input {
        font-size: 4.5vw;
    }
    .contact_section form {
        margin-top: 2vh;
    }
    .footer_logo {
        height: 10vh !important;
    }
    .logo_part h4 {
        display: none;
    }
    .footer {
        grid-template-columns: repeat(1, 1fr) !important;
        height: fit-content !important;
        gap: 5vh !important;
        padding: 4vh 7vw !important;
    }
    .socials {
        justify-content: flex-start;
        height: 7vh;
    }
    .footer_logo h3 {
        display: block;
        margin-left: 5vw;
    }
    .contact_footer {
        height: fit-content;
        max-height: 25vh;
    }
    .copyright{
        display: flex;
    }
    .team_holder {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .team_content_holder {
        margin-top: 60%;
    }

    .packages_holder {
        grid-template-columns: repeat(1, 1fr);
    }
    .package_card {
        padding: 2.5vh 5vw
    }
    .package_card ul{
        margin-top: 2vh !important;
    }
}