@font-face {
    font-family: Rag-Regular;
    src: url(./fonts/Rag-Regular.otf);
}

@font-face {
    font-family: Rag-NarrowRegular;
    src: url(./fonts/Rag-NarrowRegular.otf);
}

@font-face {
    font-family: Rag-Bold;
    src: url(./fonts/Rag-Bold.otf);
}

@font-face {
    font-family: Rag-Black;
    src: url(./fonts/Rag-Black.otf);
}

::-webkit-scrollbar{
   width:calc(10/1920*100dvw);
   background-color: transparent;
   
}

::-webkit-scrollbar-thumb{
    background-color: rgba(58, 58, 59, 0.35);
    border-radius: var(--30);
}

:root{
    /*colors variables*/
    --dark:#224B4C;
    --background:#e6e9eb;
    --white:#ffffff;
    --black: #3a3a3b;
    --black-opacity:#737576;
    --nav_hover:#abd4c46b;
    --light_green:#abd4c4;
    --border:#91A5A6;
    --green-dot:#B9E56F;
    --info:#F6F7F8;
    --teal:#209BA3;
    --border-contact:#999999;
    --place-holder:#BFC1C2;
    --dark-70:rgba(34, 75, 76, 0.70);


    /*corner radius*/
    --18:0.938dvw;
    --30:1.563vw;
    --33:1.719svw;
}


html{
    cursor: url(./cursor/cursor.svg), auto;
}
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Rag-Regular;
   font-size: 1.25rem;
}

body a{
    text-decoration: none;
}

@media only screen and (max-device-width: 430px) and (orientation:portrait){/*for mobile portrait*/
    body{
        height: fit-content;
        width: 100dvw;
        overflow: hidden;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

    body .allbody{
        height: 100dvh;
        width: 100dvw;
        overflow-x: hidden;
       overflow-y: scroll;
    }

    body .active{
        top: 0;
        left: 0;
        position: absolute;
        height: 100dvh;
        width: 100dvw;
        background-color: var(--teal);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    body .active img{
        width: 22%;
        aspect-ratio: 1/1;
        animation: loading 2.01s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
    }

    @keyframes loading {
        from{
            scale: 100%;
        }
        33.33%{
            scale:96%;
        }
        66.66%{
            scale: 100%;
        }
        to{
            scale: 100%;

        }
    }

    body .menu-section{
        display: none;
 
     } 
 
     @keyframes disappear {
         0% {
             transform: translateY(0);
         }
         100% {
             transform: translateY(-100%);
         }
     }
     
     body .menu-section.activate.closing {
         transition: all 0.8s ease;
         animation: disappear 0.8s ease forwards;
     } 
     body .menu-section.activate{
         display: flex;
         flex-direction: column;
         position: absolute;
         top:0;
         height: 100vh;
         width: 100dvw;
         background-color: var(--dark-70);
         backdrop-filter: blur(2.778vw);
         border-radius:  0  0 5vw 5vw  ;
         animation: occur 0.8s ease;
         transition: all 0.8s ease;
     }
 
     @keyframes occur {
         0%{
             transform: translateY(-100%);
 
         }
         100%{
             transform: translateY(0);
 
         }
     }
 
     body .menu-section.activate .btn-hold{
         width: 100%;
         height:8.889dvw;
         display: flex;
         align-items: center;
         justify-content: right;
         margin-top: 9.722dvw;
     }
 
     body .menu-section.activate .btn-hold button{
         height: 8.889dvw;
         aspect-ratio: 1/1;
         margin-right: 6.944dvw;
         background-color: transparent;
         border:none;
         display: flex;
         align-items: center;
         justify-content: center;
     }
 
     body .menu-section.activate .btn-hold button img{
         height: 100%;
         width: 100%;
         object-fit: cover;
         object-position: center;
     }
 
     body .menu-section.activate ul{
         height: fit-content;
         width: fit-content;
         display: flex;
         flex-direction: column;
         gap:5.625dvw;
         margin-left: 8.958vw;
         margin-top: 2.778vw;
     }
 
     body .menu-section.activate ul li{
         background-color: transparent;
     }
 
 
     body .menu-section.activate ul li a{
         font-size: 5.625dvw;
         color: var(--white);
         font-weight: 100;
     }


    body .pages{ /*the class name of all subpages*/
        min-height: 100vh;
        width: 100%;
        overflow-y: scroll;
        
    }

    body #landing{
        height: fit-content;
        width:100dvw;
        overflow-y: scroll;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content: center;
        
    }

    body #landing .container{
        height: fit-content;
        width: 91.66%;
        background-color: var(--background);
        display: flex;
        flex-direction: column;
        align-items:center;
        border-radius: 4.167vw;
        margin: 5vw  0 5vw 0;
        overflow-y: scroll;
    }

    body #landing .container nav{
        height: 7.911dvw;
        width: 88%;
        display: flex;
        flex-direction: row;
        align-items:center;
        justify-content: space-between;
        margin-top: 4.722dvw;
    }

    body #landing .container nav .logo{
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container nav .logo #logo{
        height:7.911dvw;
        width: 26.225dvw;
        object-fit: cover;
        object-position: center;
    }

    body #landing .container nav ul{
        display: none;
    }


    body #landing .container nav button{
        height:4.444dvw;
        width:4.981dvw;
        border:none;
        background-color: transparent;
        background-image: url(./icons/menu.svg);
        background-size: cover;
        background-position:center;
    }

    body #landing .container .scroll{
        width: 88.86%;
        height: fit-content;
        margin-top: 8.333vw;
        display: flex;
        flex-direction: column;
    }

    body #landing .container .scroll .header{
        height: fit-content;
        width: fit-content;
        display: flex;
        flex-direction:column;
    }

    body #landing .container .scroll .box .header h1{
        font-family: Rag-Bold;
        font-size:9.722dvw;
        color: var(--dark);
        line-height:9.992dvw;
        text-transform: capitalize;
    }

    body #landing .container .scroll .box .header p{
        font-weight: 100;
        font-size: 5dvw;
        color: var(--dark);
        margin-top: 4.167dvw;
    }

    body #landing .container .scroll .box article{
        margin-top:8.333dvw;
        font-weight: 100;
        font-size: 5.278dvw;
        color: var(--dark);
        line-height:6.944dvw;
        word-wrap: break-word;
        word-break: keep-all;
    }

    body #landing .container .scroll .box:nth-child(2){
        margin-top:13.333vw;
    }

    body #landing .container .scroll .box .header h2{
        font-family: Rag-Bold;
        font-size:8.2dvw;
        color: var(--dark);
        text-transform: capitalize;
    }

    body #landing .container #article{
        font-family:Rag-NarrowRegular;
        font-size:5dvw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        margin-bottom: 5.556dvw;
        font-weight: 100;


}

body #web-footer{
    display: flex !important;
    align-items: center;
    justify-content: center;
    height:6.944vw;
    width: 100%;
    background-color: var(--light_green);

}

body #web-footer p{
    font-family: Rag-Regular;
    color: var(--dark);
    font-weight: 100;
    font-size: 2.867vw;
}

body #web-footer p a{
    font-family: Rag-Regular;
    color: var(--dark);
    font-weight: 100;
    text-decoration: underline;
    font-size: 2.867vw;
}

}

@media only screen and (max-device-height: 430px) and (max-device-width:960px) and (orientation:landscape){/*for mobile landscape*/
    body{
        height: fit-content;
        width: 100dvw;
        overflow: hidden;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

    body .allbody{
        height: 100dvh;
        width: 100dvw;
        overflow-x: hidden;
       overflow-y: scroll;
    }

    body .active{
        top: 0;
        left: 0;
        position: absolute;
        height: 100dvh;
        width: 100dvw;
        background-color: var(--teal);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    body .active img{
        width: 15%;
        aspect-ratio: 1/1;
        animation: loading 2.01s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
    }

    @keyframes loading {
        from{
            scale: 100%;
        }
        33.33%{
            scale:96%;
        }
        66.66%{
            scale: 100%;
        }
        to{
            scale: 100%;

        }
    }

    /*menu section*/

    body .menu-section{
        display: none;
 
     } 
 
     @keyframes disappear {
         0% {
             transform: translateY(0);
         }
         100% {
             transform: translateY(-100%);
         }
     }
     
     body .menu-section.activate.closing {
         transition: all 0.8s ease;
         animation: disappear 0.8s ease forwards;
     } 
     body .menu-section.activate{
         display: flex;
         flex-direction: column;
         position: absolute;
         top:0;
         height: 113dvw;
         width: 100dvw;
         background-color: var(--dark-70);
         backdrop-filter: blur(2.778vw);
         -webkit-backdrop-filter: blur(2.778vw);
         border-radius:  0  0 5vw 5vw  ;
         animation: occur 0.8s ease;
         transition: all 0.8s ease;
     }
 
     @keyframes occur {
         0%{
             transform: translateY(-100%);
 
         }
         100%{
             transform: translateY(0);
 
         }
     }
 
     body .menu-section.activate .btn-hold{
         width: 100%;
         height:8.889dvw;
         display: flex;
         align-items: center;
         justify-content: right;
         margin-top: 9.722dvw;
     }
 
     body .menu-section.activate .btn-hold button{
         height: 8.889dvw;
         aspect-ratio: 1/1;
         margin-right: 6.944dvw;
         background-color: transparent;
         border:none;
         display: flex;
         align-items: center;
         justify-content: center;
     }
 
     body .menu-section.activate .btn-hold button img{
         height: 100%;
         width: 100%;
         object-fit: cover;
         object-position: center;
     }
 
     body .menu-section.activate ul{
         height: fit-content;
         width: fit-content;
         display: flex;
         flex-direction: column;
         gap:5.625dvw;
         margin-left: 8.958vw;
         margin-top: 2.778vw;
     }
 
     body .menu-section.activate ul li{
         background-color: transparent;
     }
 
 
     body .menu-section.activate ul li a{
         font-size: 5.625dvw;
         color: var(--white);
         font-weight: 100;
     }


    body .pages{ /*the class name of all subpages*/
        min-height: 100vh;
        width: 100%;
        overflow-y: scroll;
        
    }

    body #landing{
        height: fit-content;
        width:100dvw;
        overflow-y: scroll;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content: center;
        
    }

    body #landing .container{
        height: fit-content;
        width: 91.66%;
        background-color: var(--background);
        display: flex;
        flex-direction: column;
        align-items:center;
        border-radius: 4.167vw;
        margin: 5vw  0 5vw 0;
        overflow-y: scroll;
    }

    body #landing .container nav{
        height: 7.911dvw;
        width: 88%;
        display: flex;
        flex-direction: row;
        align-items:center;
        justify-content: space-between;
        margin-top: 4.722dvw;
    }

    body #landing .container nav .logo{
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container nav .logo #logo{
        height:7.911dvw;
        width: 26.225dvw;
        object-fit: cover;
        object-position: center;
    }

    body #landing .container nav ul{
        display: none;
    }


    body #landing .container nav button{
        height:4.444dvw;
        width:4.981dvw;
        border:none;
        background-color: transparent;
        background-image: url(./icons/menu.svg);
        background-size: cover;
        background-position:center;
    }

    body #landing .container .scroll{
        width: 88.86%;
        height: fit-content;
        margin-top: 8.333vw;
        display: flex;
        flex-direction: column;
    }

    body #landing .container .scroll .header{
        height: fit-content;
        width: fit-content;
        display: flex;
        flex-direction:column;
    }

    body #landing .container .scroll .box .header h1{
        font-family: Rag-Bold;
        font-size:9.722dvw;
        color: var(--dark);
        line-height:9.992dvw;
        text-transform: capitalize;
    }

    body #landing .container .scroll .box .header p{
        font-weight: 100;
        font-size: 5dvw;
        color: var(--dark);
        margin-top: 4.167dvw;
    }

    body #landing .container .scroll .box article{
        margin-top:8.333dvw;
        font-weight: 100;
        font-size: 5.278dvw;
        color: var(--dark);
        line-height:6.944dvw;
        word-wrap: break-word;
        word-break: keep-all;
    }

    body #landing .container .scroll .box:nth-child(2){
        margin-top:13.333vw;
    }

    body #landing .container .scroll .box .header h2{
        font-family: Rag-Bold;
        font-size:8.2dvw;
        color: var(--dark);
        text-transform: capitalize;
    }

    body #landing .container #article{
        font-family:Rag-NarrowRegular;
        font-size:5dvw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        margin-bottom: 5.556dvw;
        font-weight: 100;


}

body #web-footer{
    display: flex !important;
    align-items: center;
    justify-content: center;
    height:6.944vw;
    width: 100%;
    background-color: var(--light_green);

}

body #web-footer p{
    font-family: Rag-Regular;
    color: var(--dark);
    font-weight: 100;
    font-size: 2.867vw;
}

body #web-footer p a{
    font-family: Rag-Regular;
    color: var(--dark);
    font-weight: 100;
    text-decoration: underline;
    font-size: 2.867vw;
}
}


@media only screen and (min-device-width: 500px) and (orientation: portrait){/*for tablet portarit version*/
    body{
        height: fit-content;
        width: 100dvw;
        overflow: hidden;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

    body .allbody{
        height: 100dvh;
        width: 100dvw;
        overflow-x: hidden;
       overflow-y: scroll;
    }

    body .active{
        top: 0;
        left: 0;
        position: absolute;
        height: 100dvh;
        width: 100dvw;
        background-color: var(--teal);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    body .active img{
        width: 15%;
        aspect-ratio: 1/1;
        animation: loading 2.01s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
    }

    @keyframes loading {
        from{
            scale: 100%;
        }
        33.33%{
            scale:96%;
        }
        66.66%{
            scale: 100%;
        }
        to{
            scale: 100%;

        }
    }

    body .menu-section{
        display: none;
 
     } 
 
     @keyframes disappear {
         0% {
             transform: translateY(0);
         }
         100% {
             transform: translateY(-100%);
         }
     }
     
     body .menu-section.activate.closing {
         transition: all 0.8s ease;
         animation: disappear 0.8s ease forwards;
     } 
     body .menu-section.activate{
         display: flex;
         flex-direction: column;
         position: absolute;
         top:0;
         height: 100vh;
         width: 100dvw;
         background-color: var(--dark-70);
         backdrop-filter: blur(2.778vw);
         border-radius:  0  0 5vw 5vw  ;
         animation: occur 0.8s ease;
         transition: all 0.8s ease;
     }
 
     @keyframes occur {
         0%{
             transform: translateY(-100%);
 
         }
         100%{
             transform: translateY(0);
 
         }
     }
 
     body .menu-section.activate .btn-hold{
         width: 100%;
         height:8.889dvw;
         display: flex;
         align-items: center;
         justify-content: right;
         margin-top: 9.722dvw;
     }
 
     body .menu-section.activate .btn-hold button{
         height: 8.889dvw;
         aspect-ratio: 1/1;
         margin-right: 6.944dvw;
         background-color: transparent;
         border:none;
         display: flex;
         align-items: center;
         justify-content: center;
     }
 
     body .menu-section.activate .btn-hold button img{
         height: 100%;
         width: 100%;
         object-fit: cover;
         object-position: center;
     }
 
     body .menu-section.activate ul{
         height: fit-content;
         width: fit-content;
         display: flex;
         flex-direction: column;
         gap:5.625dvw;
         margin-left: 8.958vw;
         margin-top: 2.778vw;
     }
 
     body .menu-section.activate ul li{
         background-color: transparent;
     }
 
 
     body .menu-section.activate ul li a{
         font-size: 5.625dvw;
         color: var(--white);
         font-weight: 100;
    }

    body #landing{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container{
        position: relative;
        height: 95.66dvh;
        width: 95.66dvw;
        background-image: url(./vectors/container.svg);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        flex-direction: column;
        align-items:center;
        margin: 2.222vw 0 ;
    }

    body #landing .container nav{
        height: 7.911dvw;
        width: 88%;
        display: flex;
        flex-direction: row;
        align-items:center;
        justify-content: space-between;
        margin-top: 4.722dvw;
    }

    body #landing .container nav .logo{
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container nav .logo #logo{
        height:7.911dvw;
        width: 26.225dvw;
        object-fit: cover;
        object-position: center;
    }

    body #landing .container nav ul{
        display: none;
    }


    body #landing .container nav button{
        height:4.444dvw;
        width:4.981dvw;
        border:none;
        background-color: transparent;
        background-image: url(./icons/menu.svg);
        background-size: cover;
        background-position:center;
    }

    body #landing .container .scroll{
        width: 88.86%;
        height: 60%;
        margin-top: 8.333dvw;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overflow-y: scroll;
    }

    body #landing .container .scroll .header{
        height: fit-content;
        width: fit-content;
        display: flex;
        flex-direction:column;
    }

    body #landing .container .scroll .box .header h1{
        font-family: Rag-Bold;
        font-size:8.333dvw;
        color: var(--dark);
        line-height:9.992dvw;
        text-transform: capitalize;
    }

    body #landing .container .scroll .box .header p{
        font-weight: 100;
        font-size: 3.7dvw;
        color: var(--dark);
        margin-top: 4.167dvw;
    }

    body #landing .container .scroll .box article{
        margin-top:8.333dvw;
        font-weight: 100;
        font-size: 3.9dvw;
        color: var(--dark);
        line-height:6.944dvw;
        word-wrap: break-word;
        word-break: keep-all;
    }

    body #landing .container .scroll .box:nth-child(2){
        margin-top:13.333vw;
    }

    body #landing .container .scroll .box .header h2{
        font-family: Rag-Bold;
        font-size:8.2dvw;
        color: var(--dark);
        text-transform: capitalize;
    }

    body #landing .container #article{
        position: absolute;
        font-family:Rag-NarrowRegular;
        font-size:2.2dvw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        font-weight: 100;
        bottom: 2.222dvw;
        right: 2.222vw;
}

body #web-footer{
    display: flex !important;
    align-items: center;
    justify-content: center;
    height:6.944vw;
    width: 100%;
    background-color: var(--light_green);

}

body #web-footer p{
    font-family: Rag-Regular;
    color: var(--dark);
    font-weight: 100;
    font-size: 2.867vw;
}

body #web-footer p a{
    font-family: Rag-Regular;
    color: var(--dark);
    font-weight: 100;
    text-decoration: underline;
    font-size: 2.867vw;
}
}

@media only screen and (min-device-height: 500px) and (max-device-width:1300px) and (orientation:landscape){/*for tablet portarit landscape*/
    body{
        height: fit-content;
        width: 100dvw;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }


    body .pages{ /*the class name of all subpages*/
        display: flex !important;
        width: 100%;
        scroll-snap-align:center;
        height: 100svh;
    }

    body .active{
        top: 0;
        position: absolute;
        height: 100dvh;
        width: 100dvw;
        background-color: var(--teal);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    body .active img{
        width: 11%;
        aspect-ratio: 1/1;
        animation: loading 2.01s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
    }

    @keyframes loading {
        from{
            scale: 100%;
        }
        33.33%{
            scale:96%;
        }
        66.66%{
            scale: 100%;
        }
        to{
            scale: 100%;

        }
    }

    body .menu-section{
        display: none !important;
 
     }

    body #landing{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container{
        position: relative;
        height: 97.5%;
        width: calc(1876.2/1920*100dvw);
        background-image: url(./vectors/container.svg);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        flex-direction: column;
        align-items:flex-start;
    }

    body #landing .container nav{
        height: calc(52/1920*100dvw);
        width: calc(1796.18/1920*100dvw);
        display: flex;
        flex-direction: row;
        align-items:flex-end;
        justify-content: space-between;
        margin-top: calc(39.53/1920*100dvw);
        margin-left: calc(39.53/1920*100dvw);
    }

    body #landing .container nav .logo{
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container nav .logo #logo{
        height: calc(52/1920*100dvw);
        width: calc(172.11/1920*100dvw);
        object-fit: cover;
        object-position: center;
    }

    body #landing .container nav ul{
        height: calc(52/1920*100dvw);
        width: 17.557dvw;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    
    body #landing .container nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

    body #landing .container nav ul li a{
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

    body #landing .container nav ul li a:hover{
        background-color: var(--nav_hover);
        border-radius: var(--33);
        padding: 0.417dvw 1.042dvw;
    }

    body #landing .container nav button{
        display: none;
    }

    body #landing .container .scroll{
        height:calc(600/1920*100dvw);
        width:calc(1750/1920*100dvw);
        margin-top: calc(52.06/1920*100dvw);
        margin-left: calc(39.53/1920*100dvw);
        overflow: hidden scroll;
        display: flex;
        flex-direction: column;
    }

    body #landing .container .scroll .header{
        height: fit-content;
        width: fit-content;
        display: flex;
        flex-direction:column;
    }

    body #landing .container .scroll .box .header h1{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1920*100dvw);
        text-transform: capitalize;
    }

    body #landing .container .scroll .box .header p{
        font-weight: 100;
        font-size: calc(30/1920*100dvw);
        color: var(--dark);
        margin-top: calc(20/1920*100dvw);
    }

    body #landing .container .scroll .box article{
        margin-top: calc(56.79/1920*100dvw);
        font-weight: 100;
        font-size: calc(30/1920*100dvw);
        color: var(--dark);
        line-height:calc(36/1920*100dvw);
        word-wrap: break-word;
        word-break: keep-all;
    }

    body #landing .container .scroll .box:nth-child(2){
        margin-top: calc(140/1920*100dvw);
    }

    body #landing .container .scroll .box .header h2{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1080*100dvh);
        text-transform: capitalize;
    }


    body #landing .container #article{
        position: absolute;
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        margin-right: calc(29.81/1920*100dvw);
        font-weight: 100;
        bottom: calc(19.32/1920*100dvw);
        right:calc(10/1920*100dvw);

    }

    body #web-footer{
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: calc(45/1920*100dvw);
        width: 100%;
        background-color: var(--dark);
    }
    
    body #web-footer p{
        font-family: Rag-Regular;
        color: var(--background);
        font-weight: 100;
        font-size: calc(19.32/1920*100dvw);
    }
    
    body #web-footer p a{
        font-family: Rag-Regular;
        color: var(--background);
        font-weight: 100;
        text-decoration: underline;
        font-size: calc(19.32/1920*100dvw);
    }
}

@media only screen and (min-device-height: 768px) and (max-device-width: 1194px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){/*ipad 11.9 inch landscape*/

    /* body of the index page */
    body{
        height: fit-content;
        width: 100dvw;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }


    body .pages{ /*the class name of all subpages*/
        display: flex !important;
        width: 100%;
        scroll-snap-align:center;
        height: 100svh;
    }

    body .active{
        top: 0;
        position: absolute;
        height: 100dvh;
        width: 100dvw;
        background-color: var(--teal);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    body .active img{
        width: 11%;
        aspect-ratio: 1/1;
        animation: loading 2.01s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
    }

    @keyframes loading {
        from{
            scale: 100%;
        }
        33.33%{
            scale:96%;
        }
        66.66%{
            scale: 100%;
        }
        to{
            scale: 100%;

        }
    }

    body .menu-section{
        display: none !important;
 
     }

    body #landing{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container{
        position: relative;
        height: 97.5%;
        width: calc(1876.2/1920*100dvw);
        background-image: url(./vectors/container.svg);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        flex-direction: column;
        align-items:flex-start;
    }

    body #landing .container nav{
        height: calc(52/1920*100dvw);
        width: calc(1796.18/1920*100dvw);
        display: flex;
        flex-direction: row;
        align-items:flex-end;
        justify-content: space-between;
        margin-top: calc(39.53/1920*100dvw);
        margin-left: calc(39.53/1920*100dvw);
    }

    body #landing .container nav .logo{
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container nav .logo #logo{
        height: calc(52/1920*100dvw);
        width: calc(172.11/1920*100dvw);
        object-fit: cover;
        object-position: center;
    }

    body #landing .container nav ul{
        height: calc(52/1920*100dvw);
        width: 17.557dvw;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    
    body #landing .container nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

    body #landing .container nav ul li a{
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

    body #landing .container nav ul li a:hover{
        background-color: var(--nav_hover);
        border-radius: var(--33);
        padding: 0.417dvw 1.042dvw;
    }

    body #landing .container nav button{
        display: none;
    }

    body #landing .container .scroll{
        height:calc(600/1920*100dvw);
        width:calc(1750/1920*100dvw);
        margin-top: calc(52.06/1920*100dvw);
        margin-left: calc(39.53/1920*100dvw);
        overflow: hidden scroll;
        display: flex;
        flex-direction: column;
    }

    body #landing .container .scroll .header{
        height: fit-content;
        width: fit-content;
        display: flex;
        flex-direction:column;
    }

    body #landing .container .scroll .box .header h1{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1920*100dvw);
        text-transform: capitalize;
    }

    body #landing .container .scroll .box .header p{
        font-weight: 100;
        font-size: calc(30/1920*100dvw);
        color: var(--dark);
        margin-top: calc(20/1920*100dvw);
    }

    body #landing .container .scroll .box article{
        margin-top: calc(56.79/1920*100dvw);
        font-weight: 100;
        font-size: calc(30/1920*100dvw);
        color: var(--dark);
        line-height:calc(36/1920*100dvw);
        word-wrap: break-word;
        word-break: keep-all;
    }

    body #landing .container .scroll .box:nth-child(2){
        margin-top: calc(140/1920*100dvw);
    }

    body #landing .container .scroll .box .header h2{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1080*100dvh);
        text-transform: capitalize;
    }


    body #landing .container #article{
        position: absolute;
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        margin-right: calc(29.81/1920*100dvw);
        font-weight: 100;
        bottom: calc(19.32/1920*100dvw);
        right:calc(10/1920*100dvw);

    }

    body #web-footer{
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: calc(45/1920*100dvw);
        width: 100%;
        background-color: var(--dark);
    }
    
    body #web-footer p{
        font-family: Rag-Regular;
        color: var(--background);
        font-weight: 100;
        font-size: calc(19.32/1920*100dvw);
    }
    
    body #web-footer p a{
        font-family: Rag-Regular;
        color: var(--background);
        font-weight: 100;
        text-decoration: underline;
        font-size: calc(19.32/1920*100dvw);
    }

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1194px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){/*ipad 11.9 inch portrait*/
    body{
        height: fit-content;
        width: 100dvw;
        overflow: hidden;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

    body .allbody{
        height: 100dvh;
        width: 100dvw;
        overflow-x: hidden;
       overflow-y: scroll;
    }

    body .active{
        top: 0;
        left: 0;
        position: absolute;
        height: 100dvh;
        width: 100dvw;
        background-color: var(--teal);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    body .active img{
        width: 15%;
        aspect-ratio: 1/1;
        animation: loading 2.01s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
    }

    @keyframes loading {
        from{
            scale: 100%;
        }
        33.33%{
            scale:96%;
        }
        66.66%{
            scale: 100%;
        }
        to{
            scale: 100%;

        }
    }

    body .menu-section{
        display: none;
 
     } 
 
     @keyframes disappear {
         0% {
             transform: translateY(0);
         }
         100% {
             transform: translateY(-100%);
         }
     }
     
     body .menu-section.activate.closing {
         transition: all 0.8s ease;
         animation: disappear 0.8s ease forwards;
     } 
     body .menu-section.activate{
         display: flex;
         flex-direction: column;
         position: absolute;
         top:0;
         height: 100vh;
         width: 100dvw;
         background-color: var(--dark-70);
         backdrop-filter: blur(2.778vw);
         border-radius:  0  0 5vw 5vw  ;
         animation: occur 0.8s ease;
         transition: all 0.8s ease;
     }
 
     @keyframes occur {
         0%{
             transform: translateY(-100%);
 
         }
         100%{
             transform: translateY(0);
 
         }
     }
 
     body .menu-section.activate .btn-hold{
         width: 100%;
         height:8.889dvw;
         display: flex;
         align-items: center;
         justify-content: right;
         margin-top: 9.722dvw;
     }
 
     body .menu-section.activate .btn-hold button{
         height: 8.889dvw;
         aspect-ratio: 1/1;
         margin-right: 6.944dvw;
         background-color: transparent;
         border:none;
         display: flex;
         align-items: center;
         justify-content: center;
     }
 
     body .menu-section.activate .btn-hold button img{
         height: 100%;
         width: 100%;
         object-fit: cover;
         object-position: center;
     }
 
     body .menu-section.activate ul{
         height: fit-content;
         width: fit-content;
         display: flex;
         flex-direction: column;
         gap:5.625dvw;
         margin-left: 8.958vw;
         margin-top: 2.778vw;
     }
 
     body .menu-section.activate ul li{
         background-color: transparent;
     }
 
 
     body .menu-section.activate ul li a{
         font-size: 5.625dvw;
         color: var(--white);
         font-weight: 100;
    }

    body #landing{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container{
        position: relative;
        height: 95.66dvh;
        width: 95.66dvw;
        background-image: url(./vectors/container.svg);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        flex-direction: column;
        align-items:center;
        margin: 2.222vw 0 ;
    }

    body #landing .container nav{
        height: 7.911dvw;
        width: 88%;
        display: flex;
        flex-direction: row;
        align-items:center;
        justify-content: space-between;
        margin-top: 4.722dvw;
    }

    body #landing .container nav .logo{
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container nav .logo #logo{
        height:7.911dvw;
        width: 26.225dvw;
        object-fit: cover;
        object-position: center;
    }

    body #landing .container nav ul{
        display: none;
    }


    body #landing .container nav button{
        height:4.444dvw;
        width:4.981dvw;
        border:none;
        background-color: transparent;
        background-image: url(./icons/menu.svg);
        background-size: cover;
        background-position:center;
    }

    body #landing .container .scroll{
        width: 88.86%;
        height: 60%;
        margin-top: 8.333dvw;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overflow-y: scroll;
    }

    body #landing .container .scroll .header{
        height: fit-content;
        width: fit-content;
        display: flex;
        flex-direction:column;
    }

    body #landing .container .scroll .box .header h1{
        font-family: Rag-Bold;
        font-size:8.333dvw;
        color: var(--dark);
        line-height:9.992dvw;
        text-transform: capitalize;
    }

    body #landing .container .scroll .box .header p{
        font-weight: 100;
        font-size: 3.7dvw;
        color: var(--dark);
        margin-top: 4.167dvw;
    }

    body #landing .container .scroll .box article{
        margin-top:8.333dvw;
        font-weight: 100;
        font-size: 3.9dvw;
        color: var(--dark);
        line-height:6.944dvw;
        word-wrap: break-word;
        word-break: keep-all;
    }

    body #landing .container .scroll .box:nth-child(2){
        margin-top:13.333vw;
    }

    body #landing .container .scroll .box .header h2{
        font-family: Rag-Bold;
        font-size:8.2dvw;
        color: var(--dark);
        text-transform: capitalize;
    }

    body #landing .container #article{
        position: absolute;
        font-family:Rag-NarrowRegular;
        font-size:2.2dvw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        font-weight: 100;
        bottom: 2.222dvw;
        right: 2.222vw;
}

body #web-footer{
    display: flex !important;
    align-items: center;
    justify-content: center;
    height:6.944vw;
    width: 100%;
    background-color: var(--light_green);

}

body #web-footer p{
    font-family: Rag-Regular;
    color: var(--dark);
    font-weight: 100;
    font-size: 2.867vw;
}

body #web-footer p a{
    font-family: Rag-Regular;
    color: var(--dark);
    font-weight: 100;
    text-decoration: underline;
    font-size: 2.867vw;
}
}

@media only screen and (min-device-height: 834px) and (max-device-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape){/* Styles for 12.9-inch iPad Pro (Landscape)*/

    /* body of the index page */
    body{
        height: fit-content;
        width: 100dvw;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }


    body .pages{ /*the class name of all subpages*/
        display: flex !important;
        width: 100%;
        scroll-snap-align:center;
        height: 100svh;
    }

    body .active{
        top: 0;
        position: absolute;
        height: 100dvh;
        width: 100dvw;
        background-color: var(--teal);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    body .active img{
        width: 11%;
        aspect-ratio: 1/1;
        animation: loading 2.01s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
    }

    @keyframes loading {
        from{
            scale: 100%;
        }
        33.33%{
            scale:96%;
        }
        66.66%{
            scale: 100%;
        }
        to{
            scale: 100%;

        }
    }

    body .menu-section{
        display: none !important;
 
     }

    body #landing{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container{
        position: relative;
        height: 97.5%;
        width: calc(1876.2/1920*100dvw);
        background-image: url(./vectors/container.svg);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        flex-direction: column;
        align-items:flex-start;
    }

    body #landing .container nav{
        height: calc(52/1920*100dvw);
        width: calc(1796.18/1920*100dvw);
        display: flex;
        flex-direction: row;
        align-items:flex-end;
        justify-content: space-between;
        margin-top: calc(39.53/1920*100dvw);
        margin-left: calc(39.53/1920*100dvw);
    }

    body #landing .container nav .logo{
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container nav .logo #logo{
        height: calc(52/1920*100dvw);
        width: calc(172.11/1920*100dvw);
        object-fit: cover;
        object-position: center;
    }

    body #landing .container nav ul{
        height: calc(52/1920*100dvw);
        width: 17.557dvw;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    
    body #landing .container nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

    body #landing .container nav ul li a{
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

    body #landing .container nav ul li a:hover{
        background-color: var(--nav_hover);
        border-radius: var(--33);
        padding: 0.417dvw 1.042dvw;
    }

    body #landing .container nav button{
        display: none;
    }

    body #landing .container .scroll{
        height:60%;
        width:calc(1750/1920*100dvw);
        margin-top: calc(52.06/1920*100dvw);
        margin-left: calc(39.53/1920*100dvw);
        overflow: hidden scroll;
        display: flex;
        flex-direction: column;
    }

    body #landing .container .scroll .header{
        height: fit-content;
        width: fit-content;
        display: flex;
        flex-direction:column;
    }

    body #landing .container .scroll .box .header h1{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1920*100dvw);
        text-transform: capitalize;
    }

    body #landing .container .scroll .box .header p{
        font-weight: 100;
        font-size: calc(30/1920*100dvw);
        color: var(--dark);
        margin-top: calc(20/1920*100dvw);
    }

    body #landing .container .scroll .box article{
        margin-top: calc(56.79/1920*100dvw);
        font-weight: 100;
        font-size: calc(30/1920*100dvw);
        color: var(--dark);
        line-height:calc(36/1920*100dvw);
        word-wrap: break-word;
        word-break: keep-all;
    }

    body #landing .container .scroll .box:nth-child(2){
        margin-top: calc(140/1920*100dvw);
    }

    body #landing .container .scroll .box .header h2{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1080*100dvh);
        text-transform: capitalize;
    }


    body #landing .container #article{
        position: absolute;
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        margin-right: calc(29.81/1920*100dvw);
        font-weight: 100;
        bottom: calc(19.32/1920*100dvw);
        right:calc(10/1920*100dvw);

    }

    body #web-footer{
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: calc(45/1920*100dvw);
        width: 100%;
        background-color: var(--dark);
    }
    
    body #web-footer p{
        font-family: Rag-Regular;
        color: var(--background);
        font-weight: 100;
        font-size: calc(19.32/1920*100dvw);
    }
    
    body #web-footer p a{
        font-family: Rag-Regular;
        color: var(--background);
        font-weight: 100;
        text-decoration: underline;
        font-size: calc(19.32/1920*100dvw);
    }

}


@media only screen and (min-device-width: 834px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait){/*ipad 12.9 inch portrait*/
    body{
        height: fit-content;
        width: 100dvw;
        overflow: hidden;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }

    body .allbody{
        height: 100dvh;
        width: 100dvw;
        overflow-x: hidden;
       overflow-y: scroll;
    }

    body .active{
        top: 0;
        left: 0;
        position: absolute;
        height: 100dvh;
        width: 100dvw;
        background-color: var(--teal);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    body .active img{
        width: 15%;
        aspect-ratio: 1/1;
        animation: loading 2.01s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
    }

    @keyframes loading {
        from{
            scale: 100%;
        }
        33.33%{
            scale:96%;
        }
        66.66%{
            scale: 100%;
        }
        to{
            scale: 100%;

        }
    }

    body .menu-section{
        display: none;
 
     } 
 
     @keyframes disappear {
         0% {
             transform: translateY(0);
         }
         100% {
             transform: translateY(-100%);
         }
     }
     
     body .menu-section.activate.closing {
         transition: all 0.8s ease;
         animation: disappear 0.8s ease forwards;
     } 
     body .menu-section.activate{
         display: flex;
         flex-direction: column;
         position: absolute;
         top:0;
         height: 100vh;
         width: 100dvw;
         background-color: var(--dark-70);
         backdrop-filter: blur(2.778vw);
         border-radius:  0  0 5vw 5vw  ;
         animation: occur 0.8s ease;
         transition: all 0.8s ease;
     }
 
     @keyframes occur {
         0%{
             transform: translateY(-100%);
 
         }
         100%{
             transform: translateY(0);
 
         }
     }
 
     body .menu-section.activate .btn-hold{
         width: 100%;
         height:8.889dvw;
         display: flex;
         align-items: center;
         justify-content: right;
         margin-top: 9.722dvw;
     }
 
     body .menu-section.activate .btn-hold button{
         height: 8.889dvw;
         aspect-ratio: 1/1;
         margin-right: 6.944dvw;
         background-color: transparent;
         border:none;
         display: flex;
         align-items: center;
         justify-content: center;
     }
 
     body .menu-section.activate .btn-hold button img{
         height: 100%;
         width: 100%;
         object-fit: cover;
         object-position: center;
     }
 
     body .menu-section.activate ul{
         height: fit-content;
         width: fit-content;
         display: flex;
         flex-direction: column;
         gap:5.625dvw;
         margin-left: 8.958vw;
         margin-top: 2.778vw;
     }
 
     body .menu-section.activate ul li{
         background-color: transparent;
     }
 
 
     body .menu-section.activate ul li a{
         font-size: 5.625dvw;
         color: var(--white);
         font-weight: 100;
    }

    body #landing{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container{
        position: relative;
        height: 95.66dvh;
        width: 95.66dvw;
        background-image: url(./vectors/container.svg);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        flex-direction: column;
        align-items:center;
        margin: 2.222vw 0 ;
    }

    body #landing .container nav{
        height: 7.911dvw;
        width: 88%;
        display: flex;
        flex-direction: row;
        align-items:center;
        justify-content: space-between;
        margin-top: 4.722dvw;
    }

    body #landing .container nav .logo{
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container nav .logo #logo{
        height:7.911dvw;
        width: 26.225dvw;
        object-fit: cover;
        object-position: center;
    }

    body #landing .container nav ul{
        display: none;
    }


    body #landing .container nav button{
        height:4.444dvw;
        width:4.981dvw;
        border:none;
        background-color: transparent;
        background-image: url(./icons/menu.svg);
        background-size: cover;
        background-position:center;
    }

    body #landing .container .scroll{
        width: 88.86%;
        height: 60%;
        margin-top: 8.333dvw;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overflow-y: scroll;
    }

    body #landing .container .scroll .header{
        height: fit-content;
        width: fit-content;
        display: flex;
        flex-direction:column;
    }

    body #landing .container .scroll .box .header h1{
        font-family: Rag-Bold;
        font-size:8.333dvw;
        color: var(--dark);
        line-height:9.992dvw;
        text-transform: capitalize;
    }

    body #landing .container .scroll .box .header p{
        font-weight: 100;
        font-size: 3.7dvw;
        color: var(--dark);
        margin-top: 4.167dvw;
    }

    body #landing .container .scroll .box article{
        margin-top:8.333dvw;
        font-weight: 100;
        font-size: 3.9dvw;
        color: var(--dark);
        line-height:6.944dvw;
        word-wrap: break-word;
        word-break: keep-all;
    }

    body #landing .container .scroll .box:nth-child(2){
        margin-top:13.333vw;
    }

    body #landing .container .scroll .box .header h2{
        font-family: Rag-Bold;
        font-size:8.2dvw;
        color: var(--dark);
        text-transform: capitalize;
    }

    body #landing .container #article{
        position: absolute;
        font-family:Rag-NarrowRegular;
        font-size:2.2dvw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        font-weight: 100;
        bottom: 2.222dvw;
        right: 2.222vw;
}

body #web-footer{
    display: flex !important;
    align-items: center;
    justify-content: center;
    height:6.944vw;
    width: 100%;
    background-color: var(--light_green);

}

body #web-footer p{
    font-family: Rag-Regular;
    color: var(--dark);
    font-weight: 100;
    font-size: 2.867vw;
}

body #web-footer p a{
    font-family: Rag-Regular;
    color: var(--dark);
    font-weight: 100;
    text-decoration: underline;
    font-size: 2.867vw;
}
}


 /*for Laptops only */
 @media only screen and (min-device-width: 992px) and (not (-webkit-min-device-pixel-ratio: 2)) and (orientation:landscape){
     /* body of the index page */
     body{
        height: fit-content;
        width: 100dvw;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth;
    }


    body .pages{ /*the class name of all subpages*/
        display: flex !important;
        width: 100%;
        scroll-snap-align:center;
        height: 100vh;
    }

    body .active{
        top: 0;
        position: absolute;
        height: 100dvh;
        width: 100dvw;
        background-color: var(--teal);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    body .active img{
        width: 11%;
        aspect-ratio: 1/1;
        animation: loading 2.01s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
    }

    @keyframes loading {
        from{
            scale: 100%;
        }
        33.33%{
            scale:96%;
        }
        66.66%{
            scale: 100%;
        }
        to{
            scale: 100%;

        }
    }

    body .menu-section{
        display: none !important;
 
     }

    body #landing{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container{
        position: relative;
        height: 97.5%;
        width: calc(1876.2/1920*100dvw);
        background-image: url(./vectors/container.svg);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        flex-direction: column;
        align-items:flex-start;
    }

    body #landing .container nav{
        height: calc(52/1920*100dvw);
        width: calc(1796.18/1920*100dvw);
        display: flex;
        flex-direction: row;
        align-items:flex-end;
        justify-content: space-between;
        margin-top: calc(39.53/1920*100dvw);
        margin-left: calc(39.53/1920*100dvw);
    }

    body #landing .container nav .logo{
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .container nav .logo #logo{
        height: calc(52/1920*100dvw);
        width: calc(172.11/1920*100dvw);
        object-fit: cover;
        object-position: center;
    }

    body #landing .container nav ul{
        height: calc(52/1920*100dvw);
        width: 17.557dvw;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    
    body #landing .container nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

    body #landing .container nav ul li a{
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

    body #landing .container nav ul li a:hover{
        background-color: var(--nav_hover);
        border-radius: var(--33);
        padding: 0.417dvw 1.042dvw;
    }

    body #landing .container nav button{
        display: none;
    }

    body #landing .container .scroll{
        height:60%;
        width:calc(1750/1920*100dvw);
        margin-top: calc(52.06/1920*100dvw);
        margin-left: calc(39.53/1920*100dvw);
        overflow: hidden scroll;
        display: flex;
        flex-direction: column;
    }

    body #landing .container .scroll .header{
        height: fit-content;
        width: fit-content;
        display: flex;
        flex-direction:column;
    }

    body #landing .container .scroll .box .header h1{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1920*100dvw);
        text-transform: capitalize;
    }

    body #landing .container .scroll .box .header p{
        font-weight: 100;
        font-size: calc(30/1920*100dvw);
        color: var(--dark);
        margin-top: calc(20/1920*100dvw);
    }

    body #landing .container .scroll .box article{
        margin-top: calc(56.79/1920*100dvw);
        font-weight: 100;
        font-size: calc(30/1920*100dvw);
        color: var(--dark);
        line-height:calc(36/1920*100dvw);
        word-wrap: break-word;
        word-break: keep-all;
    }

    body #landing .container .scroll .box:nth-child(2){
        margin-top: calc(140/1920*100dvw);
    }

    body #landing .container .scroll .box .header h2{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1080*100dvh);
        text-transform: capitalize;
    }


    body #landing .container #article{
        position: absolute;
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        margin-right: calc(29.81/1920*100dvw);
        font-weight: 100;
        bottom: calc(19.32/1920*100dvw);
        right:calc(10/1920*100dvw);

    }

    body #web-footer{
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: calc(45/1920*100dvw);
        width: 100%;
        background-color: var(--dark);
    }
    
    body #web-footer p{
        font-family: Rag-Regular;
        color: var(--background);
        font-weight: 100;
        font-size: calc(19.32/1920*100dvw);
    }
    
    body #web-footer p a{
        font-family: Rag-Regular;
        color: var(--background);
        font-weight: 100;
        text-decoration: underline;
        font-size: calc(19.32/1920*100dvw);
    }


    

    
}


@media only screen and (min-device-width: 1367px) and (orientation:landscape){
    /* body of the index page */
    body{
       height: fit-content;
       width: 100dvw;
       overflow-x: hidden;
       overflow-y: auto;
       scroll-snap-type: y mandatory;
       scroll-behavior: smooth;
   }


   body .pages{ /*the class name of all subpages*/
       display: flex !important;
       width: 100%;
       scroll-snap-align:center;
       height: 100vh;
   }

   body .active{
       top: 0;
       position: absolute;
       height: 100dvh;
       width: 100dvw;
       background-color: var(--teal);
       z-index: 100;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
   }

   body .active img{
       width: 11%;
       aspect-ratio: 1/1;
       animation: loading 2.01s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
   }

   @keyframes loading {
       from{
           scale: 100%;
       }
       33.33%{
           scale:96%;
       }
       66.66%{
           scale: 100%;
       }
       to{
           scale: 100%;

       }
   }

   body .menu-section{
       display: none !important;

    }

   body #landing{
       display: flex;
       align-items: center;
       justify-content: center;
   }

   body #landing .container{
       position: relative;
       height: 97.5%;
       width: calc(1876.2/1920*100dvw);
       background-image: url(./vectors/container.svg);
       background-position: center;
       background-size: cover;
       border-radius: var(--33);
       display: flex;
       flex-direction: column;
       align-items:flex-start;
   }

   body #landing .container nav{
       height: calc(52/1920*100dvw);
       width: calc(1796.18/1920*100dvw);
       display: flex;
       flex-direction: row;
       align-items:flex-end;
       justify-content: space-between;
       margin-top: calc(39.53/1920*100dvw);
       margin-left: calc(39.53/1920*100dvw);
   }

   body #landing .container nav .logo{
       height: fit-content;
       width: fit-content;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   body #landing .container nav .logo #logo{
       height: calc(52/1920*100dvw);
       width: calc(172.11/1920*100dvw);
       object-fit: cover;
       object-position: center;
   }

   body #landing .container nav ul{
       height: calc(52/1920*100dvw);
       width: 17.557dvw;
       display: flex;
       align-items: center;
       justify-content: space-around;
   }

   
   body #landing .container nav ul li {
       font-family: Rag-NarrowRegular;
       font-size: calc(27.66/1920*100dvw);
       color: var(--black-opacity);
       transition: all 0.2s ease;
   }

   body #landing .container nav ul li a{
       font-family: Rag-NarrowRegular;
       font-size: calc(27.66/1920*100dvw);
       color: var(--black-opacity);
       transition: all 0.2s ease;
   }

   body #landing .container nav ul li a:hover{
       background-color: var(--nav_hover);
       border-radius: var(--33);
       padding: 0.417dvw 1.042dvw;
   }

   body #landing .container nav button{
       display: none;
   }

   body #landing .container .scroll{
       height:60%;
       width:calc(1750/1920*100dvw);
       margin-top: calc(52.06/1920*100dvw);
       margin-left: calc(39.53/1920*100dvw);
       overflow: hidden scroll;
       display: flex;
       flex-direction: column;
   }

   body #landing .container .scroll .header{
       height: fit-content;
       width: fit-content;
       display: flex;
       flex-direction:column;
   }

   body #landing .container .scroll .box .header h1{
       font-family: Rag-Bold;
       font-size: calc(81/1920*100dvw);
       color: var(--dark);
       line-height:calc(90/1920*100dvw);
       text-transform: capitalize;
   }

   body #landing .container .scroll .box .header p{
       font-weight: 100;
       font-size: calc(30/1920*100dvw);
       color: var(--dark);
       margin-top: calc(20/1920*100dvw);
   }

   body #landing .container .scroll .box article{
       margin-top: calc(56.79/1920*100dvw);
       font-weight: 100;
       font-size: calc(30/1920*100dvw);
       color: var(--dark);
       line-height:calc(36/1920*100dvw);
       word-wrap: break-word;
       word-break: keep-all;
   }

   body #landing .container .scroll .box:nth-child(2){
       margin-top: calc(140/1920*100dvw);
   }

   body #landing .container .scroll .box .header h2{
       font-family: Rag-Bold;
       font-size: calc(81/1920*100dvw);
       color: var(--dark);
       line-height:calc(90/1080*100dvh);
       text-transform: capitalize;
   }


   body #landing .container #article{
       position: absolute;
       font-family:Rag-NarrowRegular;
       font-size:calc(19.32/1920*100dvw);
       text-transform: capitalize;
       width: fit-content;
       height: fit-content;
       color: var(--black-opacity);
       margin-right: calc(29.81/1920*100dvw);
       font-weight: 100;
       bottom: calc(19.32/1920*100dvw);
       right:calc(10/1920*100dvw);

   }

body #web-footer{
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: calc(45/1920*100dvw);
    width: 100%;
    background-color: var(--dark);
}

body #web-footer p{
    font-family: Rag-Regular;
    color: var(--background);
    font-weight: 100;
    font-size: calc(19.32/1920*100dvw);
}

body #web-footer p a{
    font-family: Rag-Regular;
    color: var(--background);
    font-weight: 100;
    text-decoration: underline;
    font-size: calc(19.32/1920*100dvw);
}
     
}