body, html{
        width : 100%;
        height : 100%;
        margin : 0;
        padding : 0;
        font-family: 'Montserrat', sans-serif;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;  
        scroll-behavior: smooth;
        min-width : 100%;
        overflow-x: hidden;
    }

    body > div{
        scroll-snap-align: start;
    }

    *{
        font-family: 'Montserrat', sans-serif;
    }

    ::-webkit-scrollbar {
        width: 5px;
    }

    ::-webkit-scrollbar-track {
        background: #f0f0f0;  /* track color */
        border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--sub-theme);      /* draggable part color */
        border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--main-theme);      /* hover effect */
    }

    :root{
        --main-theme : #0C4E90;
        --sub-theme : #44CCE9;
        --orange : #ED6F30;
    }

    .hero-leftside{
        box-sizing: border-box;
        height : 85%;
        padding-left :5vw;
        padding-bottom: 10vh;
    }
    #topbar{
        display : flex;
        flex-direction: row;
        width : 100%;
        box-sizing: border-box;
        height : 15%;
        padding : 0 1vw;
        align-items: center;
    }

    #topbar > button{
        margin-left : auto;
    }

    .inquire{
        background-color: #2DC0E3;
        color : white;
        border-radius: 10px;
        border : none;
        height : 40%;
        box-sizing: border-box;
        padding : 0 3%;
        font-weight : bold;
        display: flex;
        align-items: center;
        justify-content: center;
        gap : 10%;
        white-space: nowrap;
        align-self: center;
    }

    #hero{
        width : 100%;
        height : 100svh;
        box-sizing: border-box;
        position: relative;
        overflow : hidden;
    }

    .herotext{
        animation: fadeCycle 9s infinite;
    }

    .herotext:nth-child(1) { animation-delay: -6s; opacity : 0}
    .herotext:nth-child(2) { animation-delay: -3s; opacity : 0}
    .herotext:nth-child(3) { animation-delay: -0s; opacity : 0}

    @keyframes fadeCycle {
        0%   { opacity: 1; }
        33%   { opacity: 1; }
        34%   { opacity: 0; }
        100% { opacity: 0; }
    }

    .hero-main-image,.hero-sub-image1,.hero-sub-image2{
        right : -5%;
        position: absolute;
        width : 40%;
        top: 60%;
        object-fit: contain;
        animation: changeImage 9s infinite;
        opacity : 0;
        transform-origin: center center; 
    }

    .hero-main-image { animation-delay: -6s;}
    .hero-sub-image1 { animation-delay: -3s;}
    .hero-sub-image2 { animation-delay: -0s;}

    @keyframes changeImage {
        0%   { transform: translateY(-60%) scale(0.3) translateX(-200%); opacity: 0.5; z-index: 0; }
        1%   { transform: translateY(-60%) scale(1) translateX(0); opacity: 1; z-index: 1; }
        33%  { transform: translateY(-60%) scale(1) translateX(0); opacity: 1; z-index: 1; }
        34%  { transform: translateY(-60%) scale(0.3) translateX(200%); opacity: 0.5; z-index: 0; }
        66%  { transform: translateY(-60%) scale(0.3) translateX(200%); opacity: 0.5; z-index: 0; }
        67%  { transform: translateY(-60%) scale(0.3) translateX(-200%); opacity: 0.5; z-index: 0; }
        100% { transform: translateY(-60%) scale(0.3) translateX(-200%); opacity: 0.5; z-index: 0; }
    }

    @keyframes changeImageMobile {
        0%   { transform: translate(-50%,-50%) scale(0.3) translateX(-200%); opacity: 0.5; z-index: 0; }
        1%   { transform: translate(-50%,-50%) scale(1) translateX(0); opacity: 1; z-index: 1; }
        33%  { transform: translate(-50%,-50%) scale(1) translateX(0); opacity: 1; z-index: 1; }
        34%  { transform: translate(-50%,-50%) scale(0.3) translateX(200%); opacity: 0.5; z-index: 0; }
        66%  { transform: translate(-50%,-50%) scale(0.3) translateX(200%); opacity: 0.5; z-index: 0; }
        67%  { transform: translate(-50%,-50%) scale(0.3) translateX(-200%); opacity: 0.5; z-index: 0; }
        100% { transform: translate(-50%,-50%) scale(0.3) translateX(-200%); opacity: 0.5; z-index: 0; }
    }

    .herotext-main{
        padding : 0;
        margin : 0;
        color : var(--sub-theme);
        font-size : 4rem;
        font-weight: bold;
        white-space: nowrap;
    }

    .herotext-sub{ 
        padding : 0;
        margin : 0;
        color : black;
        font-size : 4rem;
        font-weight: lighter;
        white-space: nowrap;
    }

    .herotext{
        border-left : 0.3vw solid #E8E8E8;
        box-sizing: border-box;
        padding-left: 5vw;
        gap : 5vw;
    }

    .herotext h1{
        width : 5vw;
    }

    .hero-box-full{
        width : 100%
    }

    .hero-box-max{
        height : 100%
    }

    .hero-box-half{
        width : 50%
    }

    .align-start{
        align-items: flex-start;
    }

    .align-center{
        align-items: center;
        justify-content: center;
    }

    .text-gap{
        gap : 1rem;
    }

    .bottom{
        margin-top: auto;
    }

    .flexcolumn{
        display: flex;
        flex-direction: column;
        gap : 1rem;
    }

    .flexrow{
        display: flex;
        flex-direction: row;
    }

    .circle{
        z-index : -1;
        aspect-ratio: 1/1;
        border : 1px solid var(--orange);
        background-color: transparent;
        border-radius: 50%;
        display: inline-block;
        padding : 5%;
    }

    .links{
        display : flex;
        flex-direction: row;
    }


    #about{
        position: relative; 
        padding : 5vw 5vw;
        box-sizing: border-box;
        width : 100%;
        height : 100svh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap : 5vw;
        overflow : hidden;
        view-timeline-name: --aboutTimeline;
    }

    #about *{
        animation: popIn linear forwards;
        animation-timeline: --aboutTimeline;
        animation-range: entry 0% exit 100%;
        animation-fill-mode: both;
    }

    #about .bigc{
        width : 40%;
        border : none;
    }

    #about .midc{
        position : absolute;
        left : -4vw;
        bottom : 15vh;
        width : 20%;
    }

    #about .smallc{
        position : absolute;
        right : 42%;
        top  : 23%;
        width : 5%;    
    }
    .about-texts{
        display: flex;
        flex-direction: column;
        width : 40%;
    }

    .about-title{
        color : black;
        font-size : 40px;
    }

    .about-description{
        line-height: 1.5;
    }

    #vision{
        padding : 5vw 5vw;
        box-sizing: border-box; 
        width : 100%;
        height : 100svh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5vh;
        view-timeline-name: --vmTimeline;
    }

    .icons{
        width : 100%;
        height : 40%;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("./images/vm.png");
        gap : 23vw;   
    }

    .icons > img{
        object-fit: contain;
        width : 15%;
        animation: popIn linear forwards;
        animation-timeline: --vmTimeline;
        animation-range: entry 0% exit 100%;
        animation-fill-mode: both;
    }

    .vm-texts{
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width : 100%;
        gap : 10vw;
        animation: fadeBottom linear forwards;
        animation-timeline: --vmTimeline;
        animation-range: entry 0% exit 100%;
        animation-fill-mode: both;
    }


    .vm-texts > div{
        display: flex;
        align-items: center;
        width : 30%;
    }

    .vm-title{
        color : black;
    }

    .vm-description{
        line-height: 1.5;
    }

    #future{
        padding : 10vh 5vw;
        box-sizing: border-box; 
        width : 100%;
        height : 100svh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap : 10vw;
        overflow : hidden;
        view-timeline-name: --futureTimeline;
    }

    .future-texts{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content : center;
        text-align: center;
        animation: fadeBottom linear forwards;
        animation-timeline: --futureTimeline;
        animation-range: entry 0% exit 100%;
        animation-fill-mode: both;
    }

    .future-title{
        font-weight: bold;
        color : var(--main-theme);
    }

    .future-cards{
        width : 100%;
        height : 60%;
        position: relative;
        display: flex;
        flex-direction: row;
        gap : 2vw;
        align-items: center;
        justify-content: center;
    }

    .future-cards img{
        height : 30%;
        object-fit: contain;
    }

    .future-cards > div{
        text-align: center;
        line-height: 1.5;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        border : 3px solid var(--main-theme);
        padding : 5%;
        width : 15%;
        height : 60%;
    }

    #future p{
        padding :0;
        margin : 0;
    }

    .card-top{
        transform: translateY(-20%);
        animation: fadeTop linear forwards;
        animation-timeline: --futureTimeline;
        animation-range: entry 0% exit 100%;
        animation-fill-mode: both;
    }

    .card-bottom{
        animation: fadeBottom linear forwards;
        animation-timeline: --futureTimeline;
        animation-range: entry 0% exit 100%;
        animation-fill-mode: both;
    }

    #services{
        padding : 10vh 5vw;
        box-sizing: border-box; 
        width : 100%;
        height : 100svh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap : 10vw;
        overflow : hidden;
        view-timeline-name: --servicesTimeline;
    }

    #services :not(img){
        animation: fadeBottom linear forwards;
        animation-timeline: --servicesTimeline;
        animation-range: entry 0% exit 100%;
        animation-fill-mode: both;
    }

    #services img{
        object-fit: contain;
        aspect-ratio: 1/1;
        width : 25%;
        box-sizing: border-box;
        align-self: flex-start;
        animation: popIn linear forwards;
        animation-timeline: --servicesTimeline;
        animation-range: entry 0% exit 100%;
        animation-fill-mode: both;
    }

    #services > .flexcolumn > *{
        text-align: center;
        margin : 0;
        padding : 0%;
    }

    #services > .flexcolumn h3{
        color : var(--sub-theme);
    }

    #services > .flexcolumn h1{
        font-size : 2.5rem;
    }

    #services > .flexrow{
        gap : 5vw;
    }

    .service-items > div{
        flex : 1;
    }
    
    #contact{
        box-sizing: border-box;
        width : 100%;
        height : 100svh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap : 5vw;
        padding : 0 5vw 0 5vw;
        overflow : hidden;
    }

    .contact-form{
        z-index :2; 
        padding : 1% 2%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width : 50%;
        height : 90%;
        background-color: white;
        transition: all 0.3s ease; 
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 4px 0 8px rgba(0, 0, 0, 0.15),10px 2px 20px rgba(0, 0, 0, 0.25);
    }

    .contact-form h1{
        color : var(--sub-theme);
        font-weight: 700;
        box-sizing: border-box;
        padding : 2% 0;
        margin : 0;
        width : 100%;
    }

    .contact-form:hover,.contact-form:focus-within{
        height : 90%;
    }

    .contact-form:hover .forms, .contact-form:focus-within .forms{
        opacity : 1;
    }

    .forms{
        padding : 0 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap : 1vh;
        height : 90%;
        width : 100%;
        opacity: 1;
        transition: all 0.1s ease; 
    }

    .forms > label{
        color : var(--main-theme);
        text-align: left;
        width : 100%;
    }

    .forms > input[type="text"],.forms > textarea{
        border-radius: 5px;
        box-sizing: border-box;
        padding : 1%;
        width : 100%;
        border : 1px solid var(--main-theme);
        margin-bottom : 2%;
    }

    .forms > textarea{
        aspect-ratio: 3/1;
        resize: none;
        width: 100%;
    }

    .form-submit{
        background-color: var(--sub-theme);
        border-radius: 5px;
        box-sizing: border-box;
        padding : 2%;
        width : 100%;
        border : none;
        color : white;
        font-weight: bold;
    }

    .contact-map{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start ;
        height: 100%;
        aspect-ratio: 1/1;
    }

    .contact-info{
        height : 90%;
        width : 50%;
    }

    .contact-info-cards{
        border-radius: 10px;
        box-shadow: 4px 0 8px rgba(0, 0, 0, 0.15),10px 2px 20px rgba(0, 0, 0, 0.25);
        box-sizing :border-box;
        padding : 2%;
        flex :1 ;
        width : 100%;
        background-color: white;
        align-items: center;

    }

    .google-map {
        border-radius: 10px;
        box-shadow: 4px 0 8px rgba(0, 0, 0, 0.15),10px 2px 20px rgba(0, 0, 0, 0.25);
        flex: 3;           /* Takes remaining vertical space */
        width: 100%;       /* Full width */
    }

    .google-map iframe {
        border-radius: 10px;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .contact-info-cards p{
        padding : 0;
        margin : 0;
    }

    .contact-info-cards p:nth-child(1){
        color : var(--sub-theme);
        font-weight: bold;
    }

    .contact-info-cards img{
        color : var(--sub-theme);
        height : 30%;   
        margin : 0 5%;
    }
    
    #footer{
        box-sizing: border-box;
        padding : 0 1vw;
        width : 100%;
        height : 13vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    #footer img{
        height : 100%;
    }

    #footer a, #topbar a{
        height : 30%;
        color : black;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .left{
        margin-right : auto;
    }

    .logo{
        object-fit: contain;
        height : 100%;
        margin-right : 2vw;
    }
    
    .pp-main{
        margin : 0;
        padding : 5%;
        width : 80%;
    }

    .pp-main p{
        line-height : 1.5;
    }
        
    .pp-title-sub{
        font-weight : 600;
        font-size : 4rem;
        color : var(--sub-theme);
        margin : 0;
    }

    .pp-main-topic{
        font-weight : 600;
        font-size : 4rem;
    }

    .pp-title-main{
        font-weight : 600;
        font-size : 4rem;
        margin: 0 0 0 1rem;
        color : var(--main-theme);
    }


    @media (max-width: 1024px) {
        .desktop-only{
            display : none;
        }
        .hero-main-image,.hero-sub-image1,.hero-sub-image2{
            height : 40%;
            top : 50%;
            left : 50%;  
            animation: changeImageMobile 9s infinite;
        }

        .hero-main-image { 
            animation-delay: -6s;
        }
        .hero-sub-image1 { 
            animation-delay: -3s;
        }
        .hero-sub-image2 { 
            animation-delay: 0s;
        }

        .herotext-sub, .herotext-main{
            font-size : 25px;
        }

        .hero-leftside{
            width : 100%;
        }

        button{
            font-size : 10px;
        }

        p{
            font-size : 10px;
        }

        #about{
            flex-direction: column;
            text-align: center;
        }

        #about .bigc{
            height: 40%;
            width : auto;
        }

        #about .midc{
            position : absolute;
            left : 0;
            bottom: auto;
            top : 15vh;
            width : 20%;
        }

        #about .smallc{
            position : absolute;
            right : 0%;
            top : 50%;
            width : 10%;    
        }

        .about-texts{
            width: 100%;
            box-sizing: border-box;
            padding: 0 5vw;
        }

        .vm-texts{
            align-items: flex-start;
        }

        .icons{
            gap : 20%;
        }

        .future-cards img{
            width : 20%;
        }
        .future-cards{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            grid-template-rows: repeat(2, 1fr);
        }

        .future-cards > div{
            padding: 5%;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            gap: 5%;
        }

        .card-top{
            transform: translateY(0);
            animation: fadeBottom linear forwards;
            animation-timeline: --futureTimeline;
            animation-range: entry 0% exit 100%;
            animation-fill-mode: both;
        }

        #services {
            box-sizing: border-box;
            padding : 10%;
        }

        h1{
            font-size : 20px;
        }

        h3{
            font-size : 10px;
        }

        #services > .flexcolumn h1 {
            font-size: 1.5rem;
        }

        .service-items{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            grid-template-rows: repeat(2, 1fr);
        }

        #contact{
            height : 200svh;
            flex-direction: column;
            padding : 5vw 5vw;
        }

        .contact-info{
            padding : 5%;
            width : 100%;
        }

        .forms > label, .forms > input[type="text"]{
            font-size : 10px;
        }

        .contact-form{
            padding : 1% 5%;
            width : 100%;
        }
    }

    @keyframes fadeLeft {
        20% {
            transform: translateX(-200px);
            opacity: 0;
        }
        50% {
            transform: translateX(0px);
            opacity: 1;
        }
        80% {
            transform: translateX(-200px);
            opacity: 0;
        }
    }

    @keyframes fadeRight {
        20% {
            transform: translateX(200px);
            opacity: 0;
        }
        50% {
            transform: translateX(0px);
            opacity: 1;
        }
        80% {
            transform: translateX(200px);
            opacity: 0;
        }
    }

    @keyframes fadeBottom {
        20% {
            transform: translateY(200px);
            opacity: 0;
        }
        50% {
            transform: translateX(0px);
            opacity: 1;
        }
        100% {
            transform: translateY(200px);
            opacity: 0; 
        }
    }

    @keyframes fadeTop {
        20% {
            transform: translateY(200px);
            opacity: 0;
        }
        50% {
            transform: translateY(-20%);
            opacity: 1;
        }
        100% {
            transform: translateY(200px);
            opacity: 0; 
        }
    }

    @keyframes popIn {
        0% {
            transform: scale(0);
            opacity: 0;
        }

        50% {
            transform: scale(1);
            opacity: 1;
        }

        100% {
            transform: scale(0);
        }
    }