@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: 0px;
   background-color: transparent;
   
}

html{
    cursor: url(./cursor/cursor.svg), auto;
    will-change: auto;
}

: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;
}

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Rag-Regular;
   scrollbar-width:none;
}

body a{
    text-decoration: none;
    cursor: url(./cursor/cursor.svg), auto;
    will-change: auto;
}

@media only screen and (max-device-width: 430px) and (orientation:portrait){/*for mobile portrait*/
    html{
        scroll-behavior: smooth;
    }

    /* body of the index page */
    body{
        height: 100dvh;
        width: 100dvw;
        overflow: hidden;
    }

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

    body .whole-wrapper{
        height: fit-content;
        width: 100dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        scroll-behavior: smooth;
    }

    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%;

        }
    }

    /*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: 100%;
         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 #ourproducts{
        height: fit-content;
        width:91.66%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--background);
        border-radius: 4.167vw;
        margin: 5vw  0 5vw 0;
    }

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

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

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

    body #ourproducts nav ul{
        display: none;
    }

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

    body #ourproducts #intro{
        height:fit-content;
        width:66.667vw;
        margin-top:13.889dvw;
        align-self: flex-start;
        margin-left: 5.833dvw;
    }

    body #ourproducts #intro .words{
        display: flex;
        flex-direction: column;
    }

    body #ourproducts #intro .words h1{
        font-family: Rag-Black;
        font-size:9.167dvw;
        color: var(--black);
        line-height:11.111dvw;
        text-align: left;
    }

    body #ourproducts #intro .words h2{
        font-family: Rag-NarrowRegular;
        font-size: 5.464dvw;
        color: var(--black);
        margin-top:2.778vw;
    }

    body #ourproducts #intro .box{
        font-family: Rag-NarrowRegular;
        height: 10.878dvw;
        width: 52.567dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5.625dvw;
        margin-top: 7.908dvw;
        border-radius: 9.167dvw;
        font-weight: 100;
        background-color: var(--dark);
        color: var(--background);
    }

    body #ourproducts .cover{
        height: fit-content;
        width:81.389dvw;
        display: flex;
        flex-wrap: wrap;
        column-gap: 4.167dvw;
        row-gap: 5.556dvw;
        margin-top: 7.5dvw;
    }

    body #ourproducts .cover #part{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        column-gap: 4.167dvw;
        row-gap: 5.556dvw;

    }

    body #ourproducts .cover #img{
        border-radius: 5dvw;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #ourproducts .cover #img .med-img{
        height: 100%;
        width: 100%;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
    }

    body #ourproducts .cover .img1{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img2{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img3{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img4{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img5{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img6{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img7{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img8{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img9{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img10{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img11{
        width: 100%;
        aspect-ratio: 293/151;
    }


    body #ourproducts .cover #img .logo, body #ourproducts .cover #img .box{
        display: none;
    }

    body #ourproducts footer{
        margin-top:4.167dvw;
        margin-bottom: 2.5dvw;
    }

    body #ourproducts footer article{
        font-family:Rag-NarrowRegular;
        font-size:3.611vw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--dark);
        font-weight: 100;
        opacity: 0.42;
    }

    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;
    }

}

@media only screen and (max-device-height: 430px) and (max-device-width:960px) and (orientation:landscape){/*for mobile landscape*/
    html{
        scroll-behavior: smooth;
    }

    /* body of the index page */
    body{
        height: 100dvh;
        width: 100dvw;
        overflow: hidden;
    }

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

    body .whole-wrapper{
        height: fit-content;
        width: 100dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        scroll-behavior: smooth;
    }
    
    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 #ourproducts{
        height: fit-content;
        width:91.66%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--background);
        border-radius: 4.167vw;
        margin: 5vw  0 5vw 0;
    }

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

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

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

    body #ourproducts nav ul{
        display: none;
    }

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

    body #ourproducts #intro{
        height:fit-content;
        width:66.667vw;
        margin-top:13.889dvw;
        align-self: flex-start;
        margin-left: 5.833dvw;
    }

    body #ourproducts #intro .words{
        display: flex;
        flex-direction: column;
    }

    body #ourproducts #intro .words h1{
        font-family: Rag-Black;
        font-size:9.167dvw;
        color: var(--black);
        line-height:11.111dvw;
        text-align: left;
    }

    body #ourproducts #intro .words h2{
        font-family: Rag-NarrowRegular;
        font-size: 5.464dvw;
        color: var(--black);
        margin-top:2.778vw;
    }

    body #ourproducts #intro .box{
        font-family: Rag-NarrowRegular;
        height: 10.878dvw;
        width: 52.567dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5.625dvw;
        margin-top: 7.908dvw;
        border-radius: 9.167dvw;
        font-weight: 100;
        background-color: var(--dark);
        color: var(--background);
    }

    body #ourproducts .cover{
        height: fit-content;
        width:81.389dvw;
        display: flex;
        flex-wrap: wrap;
        column-gap: 4.167dvw;
        row-gap: 5.556dvw;
        margin-top: 7.5dvw;
    }

    body #ourproducts .cover #part{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        column-gap: 4.167dvw;
        row-gap: 5.556dvw;

    }

    body #ourproducts .cover #img{
        border-radius: 5dvw;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #ourproducts .cover #img .med-img{
        height: 100%;
        width: 100%;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
    }

    body #ourproducts .cover .img1{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img2{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img3{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img4{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img5{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img6{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img7{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img8{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img9{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img10{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img11{
        width: 100%;
        aspect-ratio: 293/151;
    }


    body #ourproducts .cover #img .logo, body #ourproducts .cover #img .box{
        display: none;
    }

    body #ourproducts footer{
        margin-top:4.167dvw;
        margin-bottom: 2.5dvw;
    }

    body #ourproducts footer article{
        font-family:Rag-NarrowRegular;
        font-size:3.611vw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--dark);
        font-weight: 100;
        opacity: 0.42;
    }

    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;
    }

}



@media only screen and (min-device-width: 500px) and (orientation: portrait){/*for tablet portarit version*/

    html{
        scroll-behavior: smooth;
    }

    /* body of the index page */
    body{
        height: 100dvh;
        width: 100dvw;
        overflow: hidden;
    }

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

    body .whole-wrapper{
        height: fit-content;
        width: 100dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        scroll-behavior: smooth;
    }
    
    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: 100%;
         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 #ourproducts{
        height: fit-content;
        width:91.66%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--background);
        border-radius: 4.167vw;
        margin: 5vw  0 5vw 0;
    }

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

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

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

    body #ourproducts nav ul{
        display: none;
    }

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

    body #ourproducts #intro{
        height:fit-content;
        width:66.667vw;
        margin-top:13.889dvw;
        align-self: flex-start;
        margin-left: 5.833dvw;
    }

    body #ourproducts #intro .words{
        display: flex;
        flex-direction: column;
    }

    body #ourproducts #intro .words h1{
        font-family: Rag-Black;
        font-size:9.167dvw;
        color: var(--black);
        line-height:11.111dvw;
        text-align: left;
    }

    body #ourproducts #intro .words h2{
        font-family: Rag-NarrowRegular;
        font-size: 5.464dvw;
        color: var(--black);
        margin-top:2.778vw;
    }

    body #ourproducts #intro .box{
        font-family: Rag-NarrowRegular;
        height: 10.878dvw;
        width: 52.567dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5.625dvw;
        margin-top: 7.908dvw;
        border-radius: 9.167dvw;
        font-weight: 100;
        background-color: var(--dark);
        color: var(--background);
    }

    body #ourproducts .cover{
        height: fit-content;
        width:81.389dvw;
        display: flex;
        flex-wrap: wrap;
        column-gap: 4.167dvw;
        row-gap: 5.556dvw;
        margin-top: 7.5dvw;
    }

    body #ourproducts .cover #part{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        column-gap: 4.167dvw;
        row-gap: 5.556dvw;

    }

    body #ourproducts .cover #img{
        border-radius: 5dvw;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #ourproducts .cover #img .med-img{
        height: 100%;
        width: 100%;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
    }

    body #ourproducts .cover .img1{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img2{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img3{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img4{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img5{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img6{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img7{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img8{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img9{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img10{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img11{
        width: 100%;
        aspect-ratio: 293/151;
    }


    body #ourproducts .cover #img .logo, body #ourproducts .cover #img .box{
        display: none;
    }

    body #ourproducts footer{
        margin-top:4.167dvw;
        margin-bottom: 2.5dvw;
    }

    body #ourproducts footer article{
        font-family:Rag-NarrowRegular;
        font-size:3.611vw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--dark);
        font-weight: 100;
        opacity: 0.42;
    }

    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;
    }


}

@media only screen and (min-device-height: 500px) and (max-device-width:1300px) and (orientation:landscape){/*for tablet portarit landscape*/
    html{
        scroll-behavior: smooth;
    }

    /* body of the index page */
    body{
        height: fit-content;
        width: 100dvw;
        overflow-x: hidden;
       overflow-y: scroll;
    }

    body .whole-wrapper{
        height: 100vh;
        width: 100%;
        overflow-y: scroll;
        scroll-behavior: smooth;
        
    }


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


    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 #ourproducts{
        max-height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-image: url(./vectors/productpage.svg);
        background-position: center;
        background-size: cover;
    }

    body #ourproducts 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(70/1920*100dvw);
        margin-left: calc(55.55/1920*100dvw);
    }

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

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

    body #ourproducts nav ul{
        height: calc(52/1920*100dvw);
        width: fit-content;
        gap: calc(12/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-around; 
    }

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

    body #ourproducts 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 #ourproducts nav ul li a:hover{
        background-color: var(--nav_hover);
        border-radius: var(--33);
        padding: 0.417dvw 1.042dvw;
    }

    body #ourproducts nav .menu{
        display: none;
    }

    body #ourproducts #intro{
        height:calc(195.74/1920*100dvw);
        width: calc(1692.52/1920*100dvw);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-left:calc(56.48/1920*100dvw);
        margin-top: calc(58.95/1920*100dvw);

    }

    body #ourproducts #intro .words{
        height: 100%;
        width: calc(1106/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
    }

    body #ourproducts #intro .words h1{
        font-size: calc(105/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:normal;
    }

    body #ourproducts #intro .words #dot{
        height:calc(16.08/1920*100dvw);
        width: calc(16.08/1920*100dvw);
        border-radius: 50%;
        background-color: var(--dark);
        margin-top:calc(103/1920*100dvw);
    }

    body #ourproducts #intro .words h2{
        font-size: calc(56/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:calc(0/1920*100dvw);
    }

    body #ourproducts #intro .box {
        height: calc(68/1920*100dvw);
        width: calc(304.5/1920*100dvw);
        font-size: calc(36.31/1920*100dvw);
        font-weight: 100;
        color: var(--background);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--dark);
        border-radius: var(--33);
        margin-top: calc(38.71/1920*100dvw);
        border: calc(3/1920*100dvw) solid transparent; 
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; 
    }
    
    body #ourproducts #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
        color: var(--dark);
    }

    body #ourproducts .cover{
        height: fit-content;
        width:calc(1810/1920*100dvw);
        margin-left:calc(56/1920*100dvw);
        margin-top: calc(60/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
        row-gap: calc(72/1920*100dvw);
    }

    body #ourproducts .cover #part{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
        column-gap: calc(40.5/1920*100dvw);
    }

    body #ourproducts .cover #img{
        height: calc(504/1920*100dvw);
        position: relative;
        transition: all 0.6s ease;
        border-radius: var(--33);
        transition: all 0.6s ease;
    }

    body #ourproducts .cover #part:nth-child(1) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(2) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(1000/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(3) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(4) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #img .med-img{
        height: 100%;
        width: 100%;
        border-radius: var(--33);
        object-fit: cover;
        object-position: center;
    }

    body #ourproducts .cover .img1{
        width:calc(764.5/1920*100dvw);
    }

    body #ourproducts .cover .img2{
        width:calc(525.1/1920*100dvw);
    }

    body #ourproducts .cover .img3{
        width:calc(436.54/1920*100dvw);
    }

    body #ourproducts .cover .img4{
        width:calc(884/1920*100dvw);
    }

    body #ourproducts .cover .img5{
        width:calc(882/1920*100dvw);
    }

    body #ourproducts .cover .img6{
        width:calc(436.54/1920*100dvw);
    }

    body #ourproducts .cover .img7{
        width:calc(525.1/1920*100dvw);
    }

    body #ourproducts .cover .img8{
        width:calc(764.5/1920*100dvw);
    }

    body #ourproducts .cover .img9{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover .img10{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover .img11{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover #img .logo{
        position: absolute;
        height: calc(44/1920*100dvw);
        width:calc(44/1920*100dvw);
        top:calc(15/1920*100dvw);
        right:calc(15.04/1920*100dvw);
        object-fit: cover;
        object-position: center;
        
    }

    body #ourproducts .cover #img .box{
        position: absolute;
        height: calc(127/1920*100dvw);
        width:calc(343/1920*100dvw);
        bottom: calc(28/1920*100dvw);
        left:calc(28/1920*100dvw);
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        border-radius: var(--18);
        background-color:var(--dark);
        mix-blend-mode: overlay;
        backdrop-filter: blur(calc(15/1920*100dvw));
        -webkit-backdrop-filter: blur(calc(15/1920*100dvw));
    }

  

    body #ourproducts .cover #img .box h2{
        font-family:Rag-Bold;
        font-size:calc(30/1920*100dvw);
        width: fit-content;
        color: var(--white);
        margin-left: calc(20.83/1920*100dvw);
        margin-top: calc(15.36/1920*100dvw);
    }

    body #ourproducts .cover #img .box p{
        font-size:calc(23/1920*100dvw);
        width: fit-content;
        color: var(--white);
        font-weight: 100;
        line-height:calc(28/1920*100dvw);
    }

    body #ourproducts footer{
        display: flex;
        align-items: center;
        justify-content:space-between;
        height: fit-content;
        width:calc(1800.3/1920*100dvw);
        margin-left: calc(60.96/1920*100dvw);
        margin-top: calc(71.19/1920*100dvw);
        margin-bottom:calc(39/1920*100dvw);
    }

    body #ourproducts footer article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--dark);
        font-weight: 100;
        opacity: 0.42;
    }

    body #ourproducts footer .line{
        width:calc(1533/1920*100dvw);
        height: fit-content;
        border-top:calc(2/1920*100dvw) solid var(--border);
    }

    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*/
    html{
        scroll-behavior: smooth;
    }

    /* body of the index page */
    body{
        height: fit-content;
        width: 100dvw;
        overflow-x: hidden;
       overflow-y: scroll;
    }

    body .whole-wrapper{
        height: 100vh;
        width: 100%;
        overflow-y: scroll;
        scroll-behavior: smooth;
        
    }


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


    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 #ourproducts{
        max-height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-image: url(./vectors/productpage.svg);
        background-position: center;
        background-size: cover;
    }

    body #ourproducts 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(70/1920*100dvw);
        margin-left: calc(55.55/1920*100dvw);
    }

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

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

    body #ourproducts nav ul{
        height: calc(52/1920*100dvw);
        width: fit-content;
        gap: calc(12/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-around; 
    }

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

    body #ourproducts 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 #ourproducts nav ul li a:hover{
        background-color: var(--nav_hover);
        border-radius: var(--33);
        padding: 0.417dvw 1.042dvw;
    }

    body #ourproducts nav .menu{
        display: none;
    }

    body #ourproducts #intro{
        height:calc(195.74/1920*100dvw);
        width: calc(1692.52/1920*100dvw);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-left:calc(56.48/1920*100dvw);
        margin-top: calc(58.95/1920*100dvw);

    }

    body #ourproducts #intro .words{
        height: 100%;
        width: calc(1106/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
    }

    body #ourproducts #intro .words h1{
        font-size: calc(105/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:normal;
    }

    body #ourproducts #intro .words #dot{
        height:calc(16.08/1920*100dvw);
        width: calc(16.08/1920*100dvw);
        border-radius: 50%;
        background-color: var(--dark);
        margin-top:calc(103/1920*100dvw);
    }

    body #ourproducts #intro .words h2{
        font-size: calc(56/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:calc(0/1920*100dvw);
    }

    body #ourproducts #intro .box {
        height: calc(68/1920*100dvw);
        width: calc(304.5/1920*100dvw);
        font-size: calc(36.31/1920*100dvw);
        font-weight: 100;
        color: var(--background);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--dark);
        border-radius: var(--33);
        margin-top: calc(38.71/1920*100dvw);
        border: calc(3/1920*100dvw) solid transparent; 
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; 
    }
    
    body #ourproducts #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
        color: var(--dark);
    }

    body #ourproducts .cover{
        height: fit-content;
        width:calc(1810/1920*100dvw);
        margin-left:calc(56/1920*100dvw);
        margin-top: calc(60/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
        row-gap: calc(72/1920*100dvw);
    }

    body #ourproducts .cover #part{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
        column-gap: calc(40.5/1920*100dvw);
    }

    body #ourproducts .cover #img{
        height: calc(504/1920*100dvw);
        position: relative;
        transition: all 0.6s ease;
        border-radius: var(--33);
        transition: all 0.6s ease;
    }

    body #ourproducts .cover #part:nth-child(1) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(2) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(1000/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(3) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(4) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #img .med-img{
        height: 100%;
        width: 100%;
        border-radius: var(--33);
        object-fit: cover;
        object-position: center;
    }

    body #ourproducts .cover .img1{
        width:calc(764.5/1920*100dvw);
    }

    body #ourproducts .cover .img2{
        width:calc(525.1/1920*100dvw);
    }

    body #ourproducts .cover .img3{
        width:calc(436.54/1920*100dvw);
    }

    body #ourproducts .cover .img4{
        width:calc(884/1920*100dvw);
    }

    body #ourproducts .cover .img5{
        width:calc(882/1920*100dvw);
    }

    body #ourproducts .cover .img6{
        width:calc(436.54/1920*100dvw);
    }

    body #ourproducts .cover .img7{
        width:calc(525.1/1920*100dvw);
    }

    body #ourproducts .cover .img8{
        width:calc(764.5/1920*100dvw);
    }

    body #ourproducts .cover .img9{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover .img10{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover .img11{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover #img .logo{
        position: absolute;
        height: calc(44/1920*100dvw);
        width:calc(44/1920*100dvw);
        top:calc(15/1920*100dvw);
        right:calc(15.04/1920*100dvw);
        object-fit: cover;
        object-position: center;
        
    }

    body #ourproducts .cover #img .box{
        position: absolute;
        height: calc(127/1920*100dvw);
        width:calc(343/1920*100dvw);
        bottom: calc(28/1920*100dvw);
        left:calc(28/1920*100dvw);
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        border-radius: var(--18);
        background-color:var(--dark);
        mix-blend-mode: overlay;
        backdrop-filter: blur(calc(15/1920*100dvw));
        -webkit-backdrop-filter: blur(calc(15/1920*100dvw));
    }

  

    body #ourproducts .cover #img .box h2{
        font-family:Rag-Bold;
        font-size:calc(30/1920*100dvw);
        width: fit-content;
        color: var(--white);
        margin-left: calc(20.83/1920*100dvw);
        margin-top: calc(15.36/1920*100dvw);
    }

    body #ourproducts .cover #img .box p{
        font-size:calc(23/1920*100dvw);
        width: fit-content;
        color: var(--white);
        font-weight: 100;
        line-height:calc(28/1920*100dvw);
    }

    body #ourproducts footer{
        display: flex;
        align-items: center;
        justify-content:space-between;
        height: fit-content;
        width:calc(1800.3/1920*100dvw);
        margin-left: calc(60.96/1920*100dvw);
        margin-top: calc(71.19/1920*100dvw);
        margin-bottom:calc(39/1920*100dvw);
    }

    body #ourproducts footer article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--dark);
        font-weight: 100;
        opacity: 0.42;
    }

    body #ourproducts footer .line{
        width:calc(1533/1920*100dvw);
        height: fit-content;
        border-top:calc(2/1920*100dvw) solid var(--border);
    }

    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*/
    html{
        scroll-behavior: smooth;
    }

    /* body of the index page */
    body{
        height: 100dvh;
        width: 100dvw;
        overflow: hidden;
    }

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

    body .whole-wrapper{
        height: fit-content;
        width: 100dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        scroll-behavior: smooth;
    }
    
    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: 100%;
         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 #ourproducts{
        height: fit-content;
        width:91.66%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--background);
        border-radius: 4.167vw;
        margin: 5vw  0 5vw 0;
    }

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

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

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

    body #ourproducts nav ul{
        display: none;
    }

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

    body #ourproducts #intro{
        height:fit-content;
        width:66.667vw;
        margin-top:13.889dvw;
        align-self: flex-start;
        margin-left: 5.833dvw;
    }

    body #ourproducts #intro .words{
        display: flex;
        flex-direction: column;
    }

    body #ourproducts #intro .words h1{
        font-family: Rag-Black;
        font-size:9.167dvw;
        color: var(--black);
        line-height:11.111dvw;
        text-align: left;
    }

    body #ourproducts #intro .words h2{
        font-family: Rag-NarrowRegular;
        font-size: 5.464dvw;
        color: var(--black);
        margin-top:2.778vw;
    }

    body #ourproducts #intro .box{
        font-family: Rag-NarrowRegular;
        height: 10.878dvw;
        width: 52.567dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5.625dvw;
        margin-top: 7.908dvw;
        border-radius: 9.167dvw;
        font-weight: 100;
        background-color: var(--dark);
        color: var(--background);
    }

    body #ourproducts .cover{
        height: fit-content;
        width:81.389dvw;
        display: flex;
        flex-wrap: wrap;
        column-gap: 4.167dvw;
        row-gap: 5.556dvw;
        margin-top: 7.5dvw;
    }

    body #ourproducts .cover #part{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        column-gap: 4.167dvw;
        row-gap: 5.556dvw;

    }

    body #ourproducts .cover #img{
        border-radius: 5dvw;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #ourproducts .cover #img .med-img{
        height: 100%;
        width: 100%;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
    }

    body #ourproducts .cover .img1{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img2{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img3{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img4{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img5{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img6{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img7{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img8{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img9{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img10{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img11{
        width: 100%;
        aspect-ratio: 293/151;
    }


    body #ourproducts .cover #img .logo, body #ourproducts .cover #img .box{
        display: none;
    }

    body #ourproducts footer{
        margin-top:4.167dvw;
        margin-bottom: 2.5dvw;
    }

    body #ourproducts footer article{
        font-family:Rag-NarrowRegular;
        font-size:3.611vw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--dark);
        font-weight: 100;
        opacity: 0.42;
    }

    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;
    }


}


@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)*/
    html{
        scroll-behavior: smooth;
    }

    /* body of the index page */
    body{
        height: fit-content;
        width: 100dvw;
        overflow-x: hidden;
       overflow-y: scroll;
    }

    body .whole-wrapper{
        height: 100vh;
        width: 100%;
        overflow-y: scroll;
        scroll-behavior: smooth;
        
    }


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


    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 #ourproducts{
        max-height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-image: url(./vectors/productpage.svg);
        background-position: center;
        background-size: cover;
    }

    body #ourproducts 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(70/1920*100dvw);
        margin-left: calc(55.55/1920*100dvw);
    }

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

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

    body #ourproducts nav ul{
        height: calc(52/1920*100dvw);
        width: fit-content;
        gap: calc(12/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-around; 
    }

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

    body #ourproducts 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 #ourproducts nav ul li a:hover{
        background-color: var(--nav_hover);
        border-radius: var(--33);
        padding: 0.417dvw 1.042dvw;
    }

    body #ourproducts nav .menu{
        display: none;
    }

    body #ourproducts #intro{
        height:calc(195.74/1920*100dvw);
        width: calc(1692.52/1920*100dvw);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-left:calc(56.48/1920*100dvw);
        margin-top: calc(58.95/1920*100dvw);

    }

    body #ourproducts #intro .words{
        height: 100%;
        width: calc(1106/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
    }

    body #ourproducts #intro .words h1{
        font-size: calc(105/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:normal;
    }

    body #ourproducts #intro .words #dot{
        height:calc(16.08/1920*100dvw);
        width: calc(16.08/1920*100dvw);
        border-radius: 50%;
        background-color: var(--dark);
        margin-top:calc(103/1920*100dvw);
    }

    body #ourproducts #intro .words h2{
        font-size: calc(56/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:calc(0/1920*100dvw);
    }

    body #ourproducts #intro .box {
        height: calc(68/1920*100dvw);
        width: calc(304.5/1920*100dvw);
        font-size: calc(36.31/1920*100dvw);
        font-weight: 100;
        color: var(--background);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--dark);
        border-radius: var(--33);
        margin-top: calc(38.71/1920*100dvw);
        border: calc(3/1920*100dvw) solid transparent; 
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; 
    }
    
    body #ourproducts #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
        color: var(--dark);
    }

    body #ourproducts .cover{
        height: fit-content;
        width:calc(1810/1920*100dvw);
        margin-left:calc(56/1920*100dvw);
        margin-top: calc(60/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
        row-gap: calc(72/1920*100dvw);
    }

    body #ourproducts .cover #part{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
        column-gap: calc(40.5/1920*100dvw);
    }

    body #ourproducts .cover #img{
        height: calc(504/1920*100dvw);
        position: relative;
        transition: all 0.6s ease;
        border-radius: var(--33);
        transition: all 0.6s ease;
    }

    body #ourproducts .cover #part:nth-child(1) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(2) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(1000/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(3) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(4) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #img .med-img{
        height: 100%;
        width: 100%;
        border-radius: var(--33);
        object-fit: cover;
        object-position: center;
    }

    body #ourproducts .cover .img1{
        width:calc(764.5/1920*100dvw);
    }

    body #ourproducts .cover .img2{
        width:calc(525.1/1920*100dvw);
    }

    body #ourproducts .cover .img3{
        width:calc(436.54/1920*100dvw);
    }

    body #ourproducts .cover .img4{
        width:calc(884/1920*100dvw);
    }

    body #ourproducts .cover .img5{
        width:calc(882/1920*100dvw);
    }

    body #ourproducts .cover .img6{
        width:calc(436.54/1920*100dvw);
    }

    body #ourproducts .cover .img7{
        width:calc(525.1/1920*100dvw);

    }

    body #ourproducts .cover .img8{
        width:calc(764.5/1920*100dvw);
    }

    body #ourproducts .cover .img9{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover .img10{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover .img11{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover #img .logo{
        position: absolute;
        height: calc(44/1920*100dvw);
        width:calc(44/1920*100dvw);
        top:calc(15/1920*100dvw);
        right:calc(15.04/1920*100dvw);
        object-fit: cover;
        object-position: center;
        
    }

    body #ourproducts .cover #img .box{
        position: absolute;
        height: calc(127/1920*100dvw);
        width:calc(343/1920*100dvw);
        bottom: calc(28/1920*100dvw);
        left:calc(28/1920*100dvw);
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        border-radius: var(--18);
        background-color:var(--dark);
        mix-blend-mode: overlay;
        backdrop-filter: blur(calc(15/1920*100dvw));
        -webkit-backdrop-filter: blur(calc(15/1920*100dvw));
    }

  

    body #ourproducts .cover #img .box h2{
        font-family:Rag-Bold;
        font-size:calc(30/1920*100dvw);
        width: fit-content;
        color: var(--white);
        margin-left: calc(20.83/1920*100dvw);
        margin-top: calc(15.36/1920*100dvw);
    }

    body #ourproducts .cover #img .box p{
        font-size:calc(23/1920*100dvw);
        width: fit-content;
        color: var(--white);
        font-weight: 100;
        line-height:calc(28/1920*100dvw);
    }

    body #ourproducts footer{
        display: flex;
        align-items: center;
        justify-content:space-between;
        height: fit-content;
        width:calc(1800.3/1920*100dvw);
        margin-left: calc(60.96/1920*100dvw);
        margin-top: calc(71.19/1920*100dvw);
        margin-bottom:calc(39/1920*100dvw);
    }

    body #ourproducts footer article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--dark);
        font-weight: 100;
        opacity: 0.42;
    }

    body #ourproducts footer .line{
        width:calc(1533/1920*100dvw);
        height: fit-content;
        border-top:calc(2/1920*100dvw) solid var(--border);
    }

    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*/
    html{
        scroll-behavior: smooth;
    }

    /* body of the index page */
    body{
        height: 100dvh;
        width: 100dvw;
        overflow: hidden;
    }

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

    body .whole-wrapper{
        height: fit-content;
        width: 100dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        scroll-behavior: smooth;
    }
    
    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: 100%;
         width: 100dvw;
         background-color: var(--dark-70);
         backdrop-filter: blur(2.778dvw);
         -webkit-backdrop-filter: blur(2.778dvw);
         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 #ourproducts{
        height: fit-content;
        width:91.66%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--background);
        border-radius: 4.167vw;
        margin: 5vw  0 5vw 0;
    }

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

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

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

    body #ourproducts nav ul{
        display: none;
    }

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

    body #ourproducts #intro{
        height:fit-content;
        width:66.667vw;
        margin-top:13.889dvw;
        align-self: flex-start;
        margin-left: 5.833dvw;
    }

    body #ourproducts #intro .words{
        display: flex;
        flex-direction: column;
    }

    body #ourproducts #intro .words h1{
        font-family: Rag-Black;
        font-size:9.167dvw;
        color: var(--black);
        line-height:11.111dvw;
        text-align: left;
    }

    body #ourproducts #intro .words h2{
        font-family: Rag-NarrowRegular;
        font-size: 5.464dvw;
        color: var(--black);
        margin-top:2.778vw;
    }

    body #ourproducts #intro .box{
        font-family: Rag-NarrowRegular;
        height: 10.878dvw;
        width: 52.567dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5.625dvw;
        margin-top: 7.908dvw;
        border-radius: 9.167dvw;
        font-weight: 100;
        background-color: var(--dark);
        color: var(--background);
    }

    body #ourproducts .cover{
        height: fit-content;
        width:81.389dvw;
        display: flex;
        flex-wrap: wrap;
        column-gap: 4.167dvw;
        row-gap: 5.556dvw;
        margin-top: 7.5dvw;
    }

    body #ourproducts .cover #part{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        column-gap: 4.167dvw;
        row-gap: 5.556dvw;

    }

    body #ourproducts .cover #img{
        border-radius: 5dvw;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #ourproducts .cover #img .med-img{
        height: 100%;
        width: 100%;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
    }

    body #ourproducts .cover .img1{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img2{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img3{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img4{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img5{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img6{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img7{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img8{
        width: 100%;
        aspect-ratio: 293/151;
    }

    body #ourproducts .cover .img9{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img10{
        width:38.611dvw;
        aspect-ratio: 139/151;
    }

    body #ourproducts .cover .img11{
        width: 100%;
        aspect-ratio: 293/151;
    }


    body #ourproducts .cover #img .logo, body #ourproducts .cover #img .box{
        display: none;
    }

    body #ourproducts footer{
        margin-top:4.167dvw;
        margin-bottom: 2.5dvw;
    }

    body #ourproducts footer article{
        font-family:Rag-NarrowRegular;
        font-size:3.611vw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--dark);
        font-weight: 100;
        opacity: 0.42;
    }

    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;
    }
  
}

@media only screen and (min-device-width: 992px) and (not (-webkit-min-device-pixel-ratio: 2)) and (orientation:landscape){
    html{
        scroll-behavior: smooth;
    }

    /* body of the index page */
    body{
        height: fit-content;
        width: 100dvw;
        overflow-x: hidden;
       overflow-y: scroll;
    }

    body .whole-wrapper{
        height: 100vh;
        width: 100%;
        overflow-y: scroll;
        scroll-behavior: smooth;
        
    }


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


    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 #ourproducts{
        max-height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-image: url(./vectors/productpage.svg);
        background-position: center;
        background-size: cover;
    }

    body #ourproducts 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(70/1920*100dvw);
        margin-left: calc(55.55/1920*100dvw);
    }

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

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

    body #ourproducts nav ul{
        height: calc(52/1920*100dvw);
        width: fit-content;
        gap: calc(12/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-around; 
    }

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

    body #ourproducts 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 #ourproducts nav ul li a:hover{
        background-color: var(--nav_hover);
        border-radius: var(--33);
        padding: 0.417dvw 1.042dvw;
    }

    body #ourproducts nav .menu{
        display: none;
    }

    body #ourproducts #intro{
        height:calc(195.74/1920*100dvw);
        width: calc(1692.52/1920*100dvw);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-left:calc(56.48/1920*100dvw);
        margin-top: calc(58.95/1920*100dvw);

    }

    body #ourproducts #intro .words{
        height: 100%;
        width: calc(1106/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
    }

    body #ourproducts #intro .words h1{
        font-size: calc(105/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:normal;
    }

    body #ourproducts #intro .words #dot{
        height:calc(16.08/1920*100dvw);
        width: calc(16.08/1920*100dvw);
        border-radius: 50%;
        background-color: var(--dark);
        margin-top:calc(103/1920*100dvw);
    }

    body #ourproducts #intro .words h2{
        font-size: calc(56/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:calc(0/1920*100dvw);
    }

    body #ourproducts #intro .box {
        height: calc(68/1920*100dvw);
        width: calc(304.5/1920*100dvw);
        font-size: calc(36.31/1920*100dvw);
        font-weight: 100;
        color: var(--background);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--dark);
        border-radius: var(--33);
        margin-top: calc(38.71/1920*100dvw);
        border: calc(3/1920*100dvw) solid transparent; 
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; 
    }
    
    body #ourproducts #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
        color: var(--dark);
    }

    body #ourproducts .cover{
        height: fit-content;
        width:calc(1810/1920*100dvw);
        margin-left:calc(56/1920*100dvw);
        margin-top: calc(60/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
        row-gap: calc(72/1920*100dvw);
    }

    body #ourproducts .cover #part{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
        column-gap: calc(40.5/1920*100dvw);
    }

    body #ourproducts .cover #img{
        height: calc(504/1920*100dvw);
        position: relative;
        transition: all 0.6s ease;
        border-radius: var(--33);
        transition: all 0.6s ease;
    }

    body #ourproducts .cover #part:nth-child(1) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(2) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(1000/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(3) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(4) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #img .med-img{
        height: 100%;
        width: 100%;
        border-radius: var(--33);
        object-fit: cover;
        object-position: center;
    }

    body #ourproducts .cover .img1{
        width:calc(764.5/1920*100dvw);
    }

    body #ourproducts .cover .img2{
        width:calc(525.1/1920*100dvw);
    }

    body #ourproducts .cover .img3{
        width:calc(436.54/1920*100dvw);
    }

    body #ourproducts .cover .img4{
        width:calc(884/1920*100dvw);
    }

    body #ourproducts .cover .img5{
        width:calc(882/1920*100dvw);
    }

    body #ourproducts .cover .img6{
        width:calc(436.54/1920*100dvw);
    }

    body #ourproducts .cover .img7{
        width:calc(525.1/1920*100dvw);

    }

    body #ourproducts .cover .img8{
        width:calc(764.5/1920*100dvw);
    }

    body #ourproducts .cover .img9{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover .img10{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover .img11{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover #img .logo{
        position: absolute;
        height: calc(44/1920*100dvw);
        width:calc(44/1920*100dvw);
        top:calc(15/1920*100dvw);
        right:calc(15.04/1920*100dvw);
        object-fit: cover;
        object-position: center;
        
    }

    body #ourproducts .cover #img .box{
        position: absolute;
        height: calc(127/1920*100dvw);
        width:calc(343/1920*100dvw);
        bottom: calc(28/1920*100dvw);
        left:calc(28/1920*100dvw);
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        border-radius: var(--18);
        background-color:var(--dark);
        mix-blend-mode: overlay;
        backdrop-filter: blur(calc(15/1920*100dvw));
        -webkit-backdrop-filter: blur(calc(15/1920*100dvw));
    }

  

    body #ourproducts .cover #img .box h2{
        font-family:Rag-Bold;
        font-size:calc(30/1920*100dvw);
        width: fit-content;
        color: var(--white);
        margin-left: calc(20.83/1920*100dvw);
        margin-top: calc(15.36/1920*100dvw);
    }

    body #ourproducts .cover #img .box p{
        font-size:calc(23/1920*100dvw);
        width: fit-content;
        color: var(--white);
        font-weight: 100;
        line-height:calc(28/1920*100dvw);
    }

    body #ourproducts footer{
        display: flex;
        align-items: center;
        justify-content:space-between;
        height: fit-content;
        width:calc(1800.3/1920*100dvw);
        margin-left: calc(60.96/1920*100dvw);
        margin-top: calc(71.19/1920*100dvw);
        margin-bottom:calc(39/1920*100dvw);
    }

    body #ourproducts footer article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--dark);
        font-weight: 100;
        opacity: 0.42;
    }

    body #ourproducts footer .line{
        width:calc(1533/1920*100dvw);
        height: fit-content;
        border-top:calc(2/1920*100dvw) solid var(--border);
    }

    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){
    html{
        scroll-behavior: smooth;
    }

    /* body of the index page */
    body{
        height: fit-content;
        width: 100dvw;
        overflow-x: hidden;
       overflow-y: scroll;
    }

    body .whole-wrapper{
        height: 100vh;
        width: 100%;
        overflow-y: scroll;
        scroll-behavior: smooth;
        
    }


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


    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 #ourproducts{
        max-height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-image: url(./vectors/productpage.svg);
        background-position: center;
        background-size: cover;
    }

    body #ourproducts 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(70/1920*100dvw);
        margin-left: calc(55.55/1920*100dvw);
    }

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

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

    body #ourproducts nav ul{
        height: calc(52/1920*100dvw);
        width: fit-content;
        gap: calc(12/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-around; 
    }

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

    body #ourproducts 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 #ourproducts nav ul li a:hover{
        background-color: var(--nav_hover);
        border-radius: var(--33);
        padding: 0.417dvw 1.042dvw;
    }

    body #ourproducts nav .menu{
        display: none;
    }

    body #ourproducts #intro{
        height:calc(195.74/1920*100dvw);
        width: calc(1692.52/1920*100dvw);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-left:calc(56.48/1920*100dvw);
        margin-top: calc(58.95/1920*100dvw);

    }

    body #ourproducts #intro .words{
        height: 100%;
        width: calc(1106/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
    }

    body #ourproducts #intro .words h1{
        font-size: calc(105/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:normal;
    }

    body #ourproducts #intro .words #dot{
        height:calc(16.08/1920*100dvw);
        width: calc(16.08/1920*100dvw);
        border-radius: 50%;
        background-color: var(--dark);
        margin-top:calc(103/1920*100dvw);
    }

    body #ourproducts #intro .words h2{
        font-size: calc(56/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:calc(0/1920*100dvw);
    }

    body #ourproducts #intro .box {
        height: calc(68/1920*100dvw);
        width: calc(304.5/1920*100dvw);
        font-size: calc(36.31/1920*100dvw);
        font-weight: 100;
        color: var(--background);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--dark);
        border-radius: var(--33);
        margin-top: calc(38.71/1920*100dvw);
        border: calc(3/1920*100dvw) solid transparent; 
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; 
    }
    
    body #ourproducts #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
        color: var(--dark);
    }

    body #ourproducts .cover{
        height: fit-content;
        width:calc(1810/1920*100dvw);
        margin-left:calc(56/1920*100dvw);
        margin-top: calc(60/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
        row-gap: calc(72/1920*100dvw);
    }

    body #ourproducts .cover #part{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
        column-gap: calc(40.5/1920*100dvw);
    }

    body #ourproducts .cover #img{
        height: calc(504/1920*100dvw);
        position: relative;
        transition: all 0.6s ease;
        border-radius: var(--33);
        transition: all 0.6s ease;
    }

    body #ourproducts .cover #part:nth-child(1) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(2) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(1000/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(3) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #part:nth-child(4) #img:hover{
        height: calc(504/1920*100dvw);
        width:calc(764.5/1920*100dvw);
    
    }

    body #ourproducts .cover #img .med-img{
        height: 100%;
        width: 100%;
        border-radius: var(--33);
        object-fit: cover;
        object-position: center;
    }

    body #ourproducts .cover .img1{
        width:calc(764.5/1920*100dvw);
    }

    body #ourproducts .cover .img2{
        width:calc(525.1/1920*100dvw);
    }

    body #ourproducts .cover .img3{
        width:calc(436.54/1920*100dvw);
    }

    body #ourproducts .cover .img4{
        width:calc(884/1920*100dvw);
    }

    body #ourproducts .cover .img5{
        width:calc(882/1920*100dvw);
    }

    body #ourproducts .cover .img6{
        width:calc(436.54/1920*100dvw);
    }

    body #ourproducts .cover .img7{
        width:calc(525.1/1920*100dvw);

    }

    body #ourproducts .cover .img8{
        width:calc(764.5/1920*100dvw);
    }

    body #ourproducts .cover .img9{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover .img10{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover .img11{
        width:calc(575.67/1920*100dvw);
    }

    body #ourproducts .cover #img .logo{
        position: absolute;
        height: calc(44/1920*100dvw);
        width:calc(44/1920*100dvw);
        top:calc(15/1920*100dvw);
        right:calc(15.04/1920*100dvw);
        object-fit: cover;
        object-position: center;
        
    }

    body #ourproducts .cover #img .box{
        position: absolute;
        height: calc(127/1920*100dvw);
        width:calc(343/1920*100dvw);
        bottom: calc(28/1920*100dvw);
        left:calc(28/1920*100dvw);
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        border-radius: var(--18);
        background-color:var(--dark);
        mix-blend-mode: overlay;
        backdrop-filter: blur(calc(15/1920*100dvw));
        -webkit-backdrop-filter: blur(calc(15/1920*100dvw));
    }

  

    body #ourproducts .cover #img .box h2{
        font-family:Rag-Bold;
        font-size:calc(30/1920*100dvw);
        width: fit-content;
        color: var(--white);
        margin-left: calc(20.83/1920*100dvw);
        margin-top: calc(15.36/1920*100dvw);
    }

    body #ourproducts .cover #img .box p{
        font-size:calc(23/1920*100dvw);
        width: fit-content;
        color: var(--white);
        font-weight: 100;
        line-height:calc(28/1920*100dvw);
    }

    body #ourproducts footer{
        display: flex;
        align-items: center;
        justify-content:space-between;
        height: fit-content;
        width:calc(1800.3/1920*100dvw);
        margin-left: calc(60.96/1920*100dvw);
        margin-top: calc(71.19/1920*100dvw);
        margin-bottom:calc(39/1920*100dvw);
    }

    body #ourproducts footer article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--dark);
        font-weight: 100;
        opacity: 0.42;
    }

    body #ourproducts footer .line{
        width:calc(1533/1920*100dvw);
        height: fit-content;
        border-top:calc(2/1920*100dvw) solid var(--border);
    }

    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);
    }
}