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

body button{
    cursor: url(./cursor/cursor.svg), auto;
}

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

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

    body .whole-wrapper{
        height:99.9svh;
        width: 100%;
        overflow-y: scroll;
        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.778);
        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{
        display: none !important;
    }

    body .handheld{
        display: flex !important;
        height:fit-content;
        width: 100%;
    }

    body #handheld-landing{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 1.667svw;
        overflow: hidden;
    }

    body #handheld-landing .header{
        width:91.66%;
        aspect-ratio: 0.58/1;
        background-image: url(./vectors/handheld_background.png);
        background-repeat: no-repeat; /* Prevent tiling */
        background-size:cover; /* Cover the entire section */
        background-position: center; /* Center the image */
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        overflow: hidden;
        border-radius: var(--33);
        margin-top: 3.488dvw; 
    }

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

    body #handheld-landing .header nav .logo{ /* anchor tag which contain the logo */
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #handheld-landing .header nav .logo #logo{ /*raisin pharma logo in navbar*/
        height:7.911dvw;
        width: 26.225dvw;
        object-fit: cover;
        object-position: center;
    }

    body #handheld-landing .header 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 #handheld-landing .header h2{
        font-family: Rag-Black;
        font-size:9.167dvw;
        color: var(--black);
        line-height:11.111dvw;
        text-align: center;
        margin-top:13.889dvw;

    }

    body #handheld-landing .header main{
        font-family: Rag-NarrowRegular;
        font-size: 5.464dvw;
        text-align: center;
        color: var(--black);
        margin-top: 8.333dvw;
        line-height:7.222dvw;
        width: 80%;
    }

    body #handheld-landing .header .btnholder{
        height: fit-content;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:9.647vw;
        gap: 2.5dvw;
    }

    body #handheld-landing .header .btnholder .btn{
        font-family: Rag-NarrowRegular;
        border: 0.278dvw solid ;
        height: 11.111dvw;
        width: 39.167dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4.356dvw;
        border-radius: 8.333dvw;
        font-weight: 200;
    }

    body #handheld-landing .header .btnholder a:nth-child(1) .btn{
        border: 0.278vw solid var(--dark);
        color: var(--dark);
    }

    body #handheld-landing .header .btnholder a:nth-child(2) .btn{
        border: 0.278vw solid var(--dark);
        color: var(--background);
        background-color: var(--dark);
    }

    body #handheld-landing .header #breathing{
        z-index: -1;
        height: fit-content;
        width: fit-content;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        transform: translateX(0);
      }
      
    body #handheld-landing .header .container {
          position: relative;
          width: 73.03dvw;
          height: 37.639dvw;
          display: flex;
          justify-content: center;
          align-items: flex-end;

          
        }

    body #handheld-landing .header .circles {
          position: absolute;
          bottom: 0;
          transition: transform 0.6s ease-in-out;
        }


    body #handheld-landing .header .half-circle {
          position: absolute;
          border-radius: 73.03vw 73.03vw 0 0;
          transform: translateX(-50%);
          bottom: 0;
          background-position: center;
          background-size: cover;
        }

    body #handheld-landing .header .half-circle:nth-child(1){
        width: 73.03dvw;
        height: 37.639dvw;
          background-image: url(./vectors/biggest{with\ the\ issue\ fized}.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(2) {
          width:69.776dvw;
          height:35.961dvw;
          background-image: url(./vectors/1.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(3) {
          width:58.273dvw;
          height:30.021dvw;
          background-image: url(./vectors/2.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(4) {
          width:46.77dvw;
          height:24.085dvw;
          background-image: url(./vectors/3.svg);
        }
      

    body #handheld-landing #heart{
        position: absolute;
        width:60.833dvw;
        height: 60.903vw;
        bottom: 0.556dvw;
    }



    body #handheld-landing footer{
        width:91.66%;
        height: 11.111dvw;
        border-radius:3.333dvw;
        background-color: var(--dark);
        margin-bottom: 3.488dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--background);
        font-family: Rag-NarrowRegular;
        text-transform: capitalize;
        font-size: 5.367dvw;
    }


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

    body #handheld-products .wrapper{
        width:91.66%;
        aspect-ratio:1/2;
        background-color: var(--background);
        border-radius: 5dvw;
        margin: 4.722dvw 4.722dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body #handheld-products .wrapper h2{
        font-family: Rag-Bold;
        font-size: 9.167dvw;
        color: var(--black);
        margin: 16.667dvw 0 0 5.833dvw;
        align-self: flex-start;
    }

    body #handheld-products .wrapper p{
        font-family: Rag-NarrowRegular;
        font-size: 5.556dvw;
        margin: 1.389dvw 0 0 6.258dvw;
        height: fit-content;
        width: fit-content;
        align-self: flex-start;
    }

    body #handheld-products .wrapper #med-box{
        height: fit-content;
        width:81.389dvw;
        display: flex;
        flex-wrap: wrap;
        gap: 4.167vw;
        margin-top: 4.972dvw;
    }

    body #handheld-products .wrapper #med-box img:nth-child(1){
        width: 100%;
        aspect-ratio: 293/151;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper #med-box img:nth-child(2){
        width:38.611dvw;
        aspect-ratio: 139/153;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper #med-box img:nth-child(3){
        width:38.611dvw;
        aspect-ratio: 139/153;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper .btn{
        height: 10.878dvw;
        width: 52.567dvw;
        border: 0.278dvw solid var(--dark);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9.167dvw;
        font-family: Rag-NarrowRegular;
        font-size: 5.625dvw;
        margin-top: 7.908dvw;
        color: var(--dark);
    }


    body #handheld-about{  /*css of about page in mobile*/
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #handheld-about .wrapper{
        width:91.66%;
        aspect-ratio:1/2;
        background-color: var(--background);
        border-radius: 5dvw;
        margin: 4.722dvw 4.722dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body #handheld-about .wrapper h2:nth-child(1){
        font-weight: 100;
        font-size: 9.167dvw;
        text-align: center;
        color: var(--dark);
        margin-top: 11.111dvw;
    }

    body #handheld-about .wrapper h2:nth-child(2){
        font-family: Rag-Bold;
        font-size: 9.167dvw;
        text-align: center;
        color: var(--dark);
        margin-top: 4.722dvw;
        width: 55.556dvw;
        line-height: 11.111dvw;
    }

    body #handheld-about .wrapper p{
        width: 54.167dvw;
        text-align: center;
        font-size: 4.722dvw;
        height: fit-content;
        color: var(--dark);
        margin-top: 5.556dvw;
    }

    body #handheld-about .wrapper #img-holder{
        position:relative;
        width: 79.722dvw;
        height: 55.278dvw;
        border-radius: 9.167dvw;
        margin-top: 9.167dvw;
        background: linear-gradient(to bottom, rgb(0, 0, 0,0.5), rgb(0, 0, 0,0.5));
    }

    body #handheld-about .wrapper #img-holder::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 79.722dvw;
    height: 55.278dvw;
    border-radius: 9.167dvw;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5),rgba(255, 255, 255, 0));
    }

    body #handheld-about .wrapper #img-holder img{
        height: 100%;
        width: 100%;
        border-radius: 9.167dvw;
        overflow: hidden;
        transition: all 0.7s ease;
    }

    body #handheld-about .wrapper #img-holder .dot-holder{
        position:absolute;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 59.722dvw;
        height: 3.333vw;
        bottom:4.167vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 12;
    }

    body #handheld-about .wrapper #img-holder .dot-holder button{
        height:3.333vw;
        aspect-ratio: 1/1;
        border: none;
        border-radius: 50%;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    body #contact{
        display: flex !important;
        height: fit-content;
        width: 100%;
    }

    body #contact .holder{
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: fit-content;
        width: 100%;
        gap: 5.556dvw;
        background-color: var(--dark);
    }

    body #contact .holder #figure{
        height: fit-content;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--33);
        width: 91.66%;
    }

    body #contact .holder #figure .heroback{
       display: none;
    }

    body #contact .holder #figure .info{
        height:fit-content;
        width:100%;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
        border-radius: 4.167dvw;
        gap: 2.442dvw;
        margin-bottom: 4.167dvw;
        padding: 3.056vw 0 ;
    }

    body #contact .holder #figure .info section{
        height:13.889dvw;
        width:95%;
        background-color: var(--info);
        display:flex;
        align-items: center;
        justify-content: left;
        border-radius: 2.222vw;
    }

    body #contact .holder #figure .info section .img{
        width:10.556vw;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background-color: var(--background);
        margin-left: 3.056dvw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder #figure .info section .img img{
        width:6.944vw;
        aspect-ratio: 1/1;
        object-fit:contain;
        object-position: center;
    }

    body #contact .holder #figure .info section aside{
        display: flex;
        flex-direction: column;
        height: fit-content;
        width: fit-content;
        margin-left: 2.222vw;
    }

    body #contact .holder #figure .info section aside h2{
        font-size:3.889dvw;
        color:var(--black);
        font-weight: 100;
        line-height:3.889vw;
    }

    body #contact .holder #figure .info section aside a{
        font-size:2.867vw;
        color:var(--black);
        font-weight: 100;
        text-decoration: underline;
    }



    body #contact .holder #form-holder{
        height: fit-content;
        width: 91.66%;
        background-color: var(--white);
        border-radius: 4.167dvw;
        overflow: hidden;
        margin-top:4.167dvw;
        display: flex;
        flex-direction: column;
    }

    body #contact .holder #form-holder h2{
        font-size:7.311vw;
        color: var(--teal);
        font-weight: 100;
        margin:6.944vw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder h3{
        font-size:9.167dvw;
        font-weight: 100;
        width: 80dvw;
        color: var(--black);
        margin:0.556dvw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder .cover{
        width: 80dvw;
        height:27.222vw;
        border-bottom: 0.417dvw solid var(--border-contact);
        display: flex;
        align-items: first baseline;
        margin:6.944dvw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder .cover p{
        font-size: 4.444dvw;
        font-weight: 100;
        color: var(--black);
        line-height:4.533dvw;
    }

    body #contact .holder #form-holder .cover p span{
        font-size: 4.444dvw;
        color: var(--black);
        line-height:4.533dvw;
        font-weight: 100;
    }

    body #contact .holder #form-holder form{
        height: fit-content;
        width: 80dvw;
        display: flex;
        flex-wrap:wrap;
        gap: 3.611dvw;
        margin:8.333dvw 0 6.111vw 5.556dvw;
    }

    body #contact .holder #form-holder form .boxes{
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        justify-content: space-between;
        height:18.889dvw;
        width: 80dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(4){
        width: 100%;
        height:42.778dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5){
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        gap: 1.944dvw;
    }

    body #contact .holder #form-holder form .boxes label{
        font-size: 4.672dvw;
        font-weight: 100;
        color: var(--black);
        text-transform:capitalize;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) label{
        font-size: 3.783dvw; 
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) input[type="checkbox"]{
        height: 4.722dvw;
        width: 4.722dvw;
        border-radius: 1.111dvw;
    }

    body #contact .holder #form-holder form .boxes input{
        height:10.278dvw;
        background-color: var(--background);
        border: none;
        border-radius: 2.222dvw;
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 3.889dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:2.222vw;
    }

    body #contact .holder #form-holder form .boxes input:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes input::placeholder{
        font-size: 3.889dvw;
        font-weight: 100;
        text-transform: capitalize;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form .boxes textarea{
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        width: 100%;
        height:35dvw;
        font-size: 3.889dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:2.222vw;
        padding-top:1.389vw;
    }

    body #contact .holder #form-holder form .boxes textarea:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes textarea::placeholder{
        font-size: 3.889dvw;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form button{
        height:10.278dvw;
        width:100%;
        color:var(--white);
        border: none;
        background-color: var(--teal);
        font-size: 4.256dvw;
        font-weight: 100;
        border-radius: 2.222dvw;
        margin-top: 5dvw;
       
    }

    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){ /*mobile landscapes*/
    html{
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

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

    body .whole-wrapper{
        height:99.9svh;
        width: 100%;
        overflow-y: scroll;
        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: 113.889vw;
         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{
        display: none !important;
    }

    body .handheld{
        display: flex !important;
        height:fit-content;
        width: 100%;
    }

    body #handheld-landing{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 1.667svw;
        overflow: hidden;
    }

    body #handheld-landing .header{
        width:91.66%;
        aspect-ratio: 0.58/1;
        background-image: url(./vectors/handheld_background.png);
        background-repeat: no-repeat; /* Prevent tiling */
        background-size:cover; /* Cover the entire section */
        background-position: center; /* Center the image */
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        overflow: hidden;
        border-radius: var(--33);
        margin-top: 3.488dvw; 
    }

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

    body #handheld-landing .header nav .logo{ /* anchor tag which contain the logo */
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #handheld-landing .header nav .logo #logo{ /*raisin pharma logo in navbar*/
        height:7.911dvw;
        width: 26.225dvw;
        object-fit: cover;
        object-position: center;
    }

    body #handheld-landing .header 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 #handheld-landing .header h2{
        font-family: Rag-Black;
        font-size:9.167dvw;
        color: var(--black);
        line-height:11.111dvw;
        text-align: center;
        margin-top:13.889dvw;

    }

    body #handheld-landing .header main{
        font-family: Rag-NarrowRegular;
        font-size: 5.464dvw;
        text-align: center;
        color: var(--black);
        margin-top: 8.333dvw;
        line-height:7.222dvw;
        width: 80%;
    }

    body #handheld-landing .header .btnholder{
        height: fit-content;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:9.647vw;
        gap: 2.5dvw;
    }

    body #handheld-landing .header .btnholder .btn{
        font-family: Rag-NarrowRegular;
        border: 0.278dvw solid ;
        height: 11.111dvw;
        width: 39.167dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4.356dvw;
        border-radius: 8.333dvw;
        font-weight: 200;
    }

    body #handheld-landing .header .btnholder a:nth-child(1) .btn{
        border: 0.278vw solid var(--dark);
        color: var(--dark);
    }

    body #handheld-landing .header .btnholder a:nth-child(2) .btn{
        border: 0.278vw solid var(--dark);
        color: var(--background);
        background-color: var(--dark);
    }

    body #handheld-landing .header #breathing{
        z-index: -1;
        height: fit-content;
        width: fit-content;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        transform: translateX(0);
      }
      
    body #handheld-landing .header .container {
          position: relative;
          width: 73.03dvw;
          height: 37.639dvw;
          display: flex;
          justify-content: center;
          align-items: flex-end;

          
        }

    body #handheld-landing .header .circles {
          position: absolute;
          bottom: 0;
          transition: transform 0.6s ease-in-out;
        }

    body #handheld-landing .header .half-circle {
          position: absolute;
          border-radius: 73.03vw 73.03vw 0 0;
          transform: translateX(-50%);
          bottom: 0;
          background-position: center;
          background-size: cover;
        }

    body #handheld-landing .header .half-circle:nth-child(1){
        width: 73.03dvw;
        height: 37.639dvw;
          background-image: url(./vectors/biggest{with\ the\ issue\ fized}.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(2) {
          width:69.776dvw;
          height:35.961dvw;
          background-image: url(./vectors/1.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(3) {
          width:58.273dvw;
          height:30.021dvw;
          background-image: url(./vectors/2.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(4) {
          width:46.77dvw;
          height:24.085dvw;
          background-image: url(./vectors/3.svg);
        }
      
    

    body #handheld-landing #heart{
        position: absolute;
        width:60.833dvw;
        height: 60.903vw;
        bottom: 0.556dvw;
    }



    body #handheld-landing footer{
        width:91.66%;
        height: 11.111dvw;
        border-radius:3.333dvw;
        background-color: var(--dark);
        margin-bottom: 3.488dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--background);
        font-family: Rag-NarrowRegular;
        text-transform: capitalize;
        font-size: 5.367dvw;
    }


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

    body #handheld-products .wrapper{
        width:91.66%;
        aspect-ratio:1/2;
        background-color: var(--background);
        border-radius: 5dvw;
        margin: 4.722dvw 4.722dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body #handheld-products .wrapper h2{
        font-family: Rag-Bold;
        font-size: 9.167dvw;
        color: var(--black);
        margin: 16.667dvw 0 0 5.833dvw;
        align-self: flex-start;
    }

    body #handheld-products .wrapper p{
        font-family: Rag-NarrowRegular;
        font-size: 5.556dvw;
        margin: 1.389dvw 0 0 6.258dvw;
        height: fit-content;
        width: fit-content;
        align-self: flex-start;
    }

    body #handheld-products .wrapper #med-box{
        height: fit-content;
        width:81.389dvw;
        display: flex;
        flex-wrap: wrap;
        gap: 4.167vw;
        margin-top: 4.972dvw;
    }

    body #handheld-products .wrapper #med-box img:nth-child(1){
        width: 100%;
        aspect-ratio: 293/151;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper #med-box img:nth-child(2){
        width:38.611dvw;
        aspect-ratio: 139/153;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper #med-box img:nth-child(3){
        width:38.611dvw;
        aspect-ratio: 139/153;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper .btn{
        height: 10.878dvw;
        width: 52.567dvw;
        border: 0.278dvw solid var(--dark);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9.167dvw;
        font-family: Rag-NarrowRegular;
        font-size: 5.625dvw;
        margin-top: 7.908dvw;
        color: var(--dark);
    }


    body #handheld-about{  /*css of about page in mobile*/
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #handheld-about .wrapper{
        width:91.66%;
        aspect-ratio:1/2;
        background-color: var(--background);
        border-radius: 5dvw;
        margin: 4.722dvw 4.722dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body #handheld-about .wrapper h2:nth-child(1){
        font-weight: 100;
        font-size: 9.167dvw;
        text-align: center;
        color: var(--dark);
        margin-top: 11.111dvw;
    }

    body #handheld-about .wrapper h2:nth-child(2){
        font-family: Rag-Bold;
        font-size: 9.167dvw;
        text-align: center;
        color: var(--dark);
        margin-top: 4.722dvw;
        width: 55.556dvw;
        line-height: 11.111dvw;
    }

    body #handheld-about .wrapper p{
        width: 54.167dvw;
        text-align: center;
        font-size: 4.722dvw;
        height: fit-content;
        color: var(--dark);
        margin-top: 5.556dvw;
    }

    body #handheld-about .wrapper #img-holder{
        position:relative;
        width: 79.722dvw;
        height: 55.278dvw;
        border-radius: 9.167dvw;
        margin-top: 9.167dvw;
        background: linear-gradient(to bottom, rgb(0, 0, 0,0.5), rgb(0, 0, 0,0.5));
    }

    body #handheld-about .wrapper #img-holder::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 79.722dvw;
    height: 55.278dvw;
    border-radius: 9.167dvw;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5),rgba(255, 255, 255, 0));
    }

    body #handheld-about .wrapper #img-holder img{
        height: 100%;
        width: 100%;
        border-radius: 9.167dvw;
        overflow: hidden;
        transition: all 0.7s ease;
    }

    body #handheld-about .wrapper #img-holder .dot-holder{
        position:absolute;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 59.722dvw;
        height: 3.333vw;
        bottom:4.167vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 12;
    }

    body #handheld-about .wrapper #img-holder .dot-holder button{
        height:3.333vw;
        aspect-ratio: 1/1;
        border: none;
        border-radius: 50%;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    body #contact{
        display: flex !important;
        height: fit-content;
        width: 100%;
    }

    body #contact .holder{
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: fit-content;
        width: 100%;
        gap: 5.556dvw;
        background-color: var(--dark);
    }

    body #contact .holder #figure{
        height: fit-content;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--33);
        width: 91.66%;
    }

    body #contact .holder #figure .heroback{
       display: none;
    }

    body #contact .holder #figure .info{
        height:fit-content;
        width:100%;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
        border-radius: 4.167dvw;
        gap: 2.442dvw;
        margin-bottom: 4.167dvw;
        padding: 3.056vw 0 ;
    }

    body #contact .holder #figure .info section{
        height:13.889dvw;
        width:95%;
        background-color: var(--info);
        display:flex;
        align-items: center;
        justify-content: left;
        border-radius: 2.222vw;
    }

    body #contact .holder #figure .info section .img{
        width:10.556vw;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background-color: var(--background);
        margin-left: 3.056dvw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder #figure .info section .img img{
        width:6.944vw;
        aspect-ratio: 1/1;
        object-fit:contain;
        object-position: center;
    }

    body #contact .holder #figure .info section aside{
        display: flex;
        flex-direction: column;
        height: fit-content;
        width: fit-content;
        margin-left: 2.222vw;
    }

    body #contact .holder #figure .info section aside h2{
        font-size:3.889dvw;
        color:var(--black);
        font-weight: 100;
        line-height:3.889vw;
    }

    body #contact .holder #figure .info section aside a{
        font-size:2.867vw;
        color:var(--black);
        font-weight: 100;
        text-decoration: underline;
    }



    body #contact .holder #form-holder{
        height: fit-content;
        width: 91.66%;
        background-color: var(--white);
        border-radius: 4.167dvw;
        overflow: hidden;
        margin-top:4.167dvw;
        display: flex;
        flex-direction: column;
    }

    body #contact .holder #form-holder h2{
        font-size:7.311vw;
        color: var(--teal);
        font-weight: 100;
        margin:6.944vw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder h3{
        font-size:9.167dvw;
        font-weight: 100;
        width: 80dvw;
        color: var(--black);
        margin:0.556dvw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder .cover{
        width: 80dvw;
        height:27.222vw;
        border-bottom: 0.417dvw solid var(--border-contact);
        display: flex;
        align-items: first baseline;
        margin:6.944dvw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder .cover p{
        font-size: 4.444dvw;
        font-weight: 100;
        color: var(--black);
        line-height:4.533dvw;
    }

    body #contact .holder #form-holder .cover p span{
        font-size: 4.444dvw;
        color: var(--black);
        line-height:4.533dvw;
        font-weight: 100;
    }

    body #contact .holder #form-holder form{
        height: fit-content;
        width: 80dvw;
        display: flex;
        flex-wrap:wrap;
        gap: 3.611dvw;
        margin:8.333dvw 0 6.111vw 5.556dvw;
    }

    body #contact .holder #form-holder form .boxes{
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        justify-content: space-between;
        height:18.889dvw;
        width: 80dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(4){
        width: 100%;
        height:42.778dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5){
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        gap: 1.944dvw;
    }

    body #contact .holder #form-holder form .boxes label{
        font-size: 4.672dvw;
        font-weight: 100;
        color: var(--black);
        text-transform:capitalize;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) label{
        font-size: 3.783dvw; 
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) input[type="checkbox"]{
        height: 4.722dvw;
        width: 4.722dvw;
        border-radius: 1.111dvw;
    }

    body #contact .holder #form-holder form .boxes input{
        height:10.278dvw;
        background-color: var(--background);
        border: none;
        border-radius: 2.222dvw;
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 3.889dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:2.222vw;
    }

    body #contact .holder #form-holder form .boxes input:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes input::placeholder{
        font-size: 3.889dvw;
        font-weight: 100;
        text-transform: capitalize;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form .boxes textarea{
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        width: 100%;
        height:35dvw;
        font-size: 3.889dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:2.222vw;
        padding-top:1.389vw;
    }

    body #contact .holder #form-holder form .boxes textarea:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes textarea::placeholder{
        font-size: 3.889dvw;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form button{
        height:10.278dvw;
        width:100%;
        color:var(--white);
        border: none;
        background-color: var(--teal);
        font-size: 4.256dvw;
        font-weight: 100;
        border-radius: 2.222dvw;
        margin-top: 5dvw;
       
    }

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

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

    body .whole-wrapper{
        height:99.9svh;
        width: 100%;
        overflow-y: scroll;
        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{
        display: none !important;
    }

    body .handheld{
        display: flex !important;
        height:fit-content;
        width: 100%;
    }

    body #handheld-landing{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 1.667svw;
        overflow: hidden;
    }

    body #handheld-landing .header{
        width:91.66%;
        aspect-ratio: 0.58/1;
        background-image: url(./vectors/handheld_background.png);
        background-repeat: no-repeat; /* Prevent tiling */
        background-size:cover; /* Cover the entire section */
        background-position: center; /* Center the image */
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        overflow: hidden;
        border-radius: var(--33);
        margin-top: 3.488dvw; 
    }

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

    body #handheld-landing .header nav .logo{ /* anchor tag which contain the logo */
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #handheld-landing .header nav .logo #logo{ /*raisin pharma logo in navbar*/
        height:7.911dvw;
        width: 26.225dvw;
        object-fit: cover;
        object-position: center;
    }

    body #handheld-landing .header 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 #handheld-landing .header h2{
        font-family: Rag-Black;
        font-size:9.167dvw;
        color: var(--black);
        line-height:11.111dvw;
        text-align: center;
        margin-top:13.889dvw;

    }

    body #handheld-landing .header main{
        font-family: Rag-NarrowRegular;
        font-size: 5.464dvw;
        text-align: center;
        color: var(--black);
        margin-top: 8.333dvw;
        line-height:7.222dvw;
        width: 80%;
    }

    body #handheld-landing .header .btnholder{
        height: fit-content;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:9.647vw;
        gap: 2.5dvw;
    }

    body #handheld-landing .header .btnholder .btn{
        font-family: Rag-NarrowRegular;
        border: 0.278vw solid ;
        height: 8.333dvw;
        width: 37.869dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4.356dvw;
        border-radius: 8.333dvw;
        font-weight: 200;
    }

    body #handheld-landing .header .btnholder a:nth-child(1) .btn{
        border: 0.278vw solid var(--dark);
        color: var(--dark);
    }

    body #handheld-landing .header .btnholder a:nth-child(2) .btn{
        border: 0.278vw solid var(--dark);
        color: var(--background);
        background-color: var(--dark);
    }

    body #handheld-landing .header #breathing{
        z-index: -1;
        height: fit-content;
        width: fit-content;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        transform: translateX(0);
      }
      
    body #handheld-landing .header .container {
          position: relative;
          width: 73.03dvw;
          height: 37.639dvw;
          display: flex;
          justify-content: center;
          align-items: flex-end;

          
        }

    body #handheld-landing .header .circles {
          position: absolute;
          bottom: 0;
          transition: transform 0.6s ease-in-out;
        }

    body #handheld-landing .header .half-circle {
          position: absolute;
          border-radius: 73.03vw 73.03vw 0 0;
          transform: translateX(-50%);
          bottom: 0;
          background-position: center;
          background-size: cover;
        }

    body #handheld-landing .header .half-circle:nth-child(1){
        width: 73.03dvw;
        height: 37.639dvw;
          background-image: url(./vectors/biggest{with\ the\ issue\ fized}.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(2) {
          width:69.776dvw;
          height:35.961dvw;
          background-image: url(./vectors/1.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(3) {
          width:58.273dvw;
          height:30.021dvw;
          background-image: url(./vectors/2.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(4) {
          width:46.77dvw;
          height:24.085dvw;
          background-image: url(./vectors/3.svg);
        }
      
    @keyframes breathe {
          0%, 100% {
            transform: scale(0.8);
          }
          50% {
            transform: scale(0.9);
          }
      }

    body #handheld-landing #heart{
        position: absolute;
        width:60.833dvw;
        height: 60.903vw;
        bottom: 0.556dvw;
    }



    body #handheld-landing footer{
        width:91.66%;
        height: 11.111dvw;
        border-radius:3.333dvw;
        background-color: var(--dark);
        margin-bottom: 3.488dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--background);
        font-family: Rag-NarrowRegular;
        text-transform: capitalize;
        font-size: 5.367dvw;
    }


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

    body #handheld-products .wrapper{
        width:91.66%;
        aspect-ratio:1/2;
        background-color: var(--background);
        border-radius: 5dvw;
        margin: 4.722dvw 4.722dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body #handheld-products .wrapper h2{
        font-family: Rag-Bold;
        font-size: 9.167dvw;
        color: var(--black);
        margin: 16.667dvw 0 0 5.833dvw;
        align-self: flex-start;
    }

    body #handheld-products .wrapper p{
        font-family: Rag-NarrowRegular;
        font-size: 5.556dvw;
        margin: 1.389dvw 0 0 6.258dvw;
        height: fit-content;
        width: fit-content;
        align-self: flex-start;
    }

    body #handheld-products .wrapper #med-box{
        height: fit-content;
        width:81.389dvw;
        display: flex;
        flex-wrap: wrap;
        gap: 4.167vw;
        margin-top: 4.972dvw;
    }

    body #handheld-products .wrapper #med-box img:nth-child(1){
        width: 100%;
        aspect-ratio: 293/151;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper #med-box img:nth-child(2){
        width:38.611dvw;
        aspect-ratio: 139/153;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper #med-box img:nth-child(3){
        width:38.611dvw;
        aspect-ratio: 139/153;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper .btn{
        height: 10.878dvw;
        width: 52.567dvw;
        border: 0.278dvw solid var(--dark);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9.167dvw;
        font-family: Rag-NarrowRegular;
        font-size: 5.625dvw;
        margin-top: 7.908dvw;
        color: var(--dark);
    }


    body #handheld-about{  /*css of about page in mobile*/
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #handheld-about .wrapper{
        width:91.66%;
        aspect-ratio:1/2;
        background-color: var(--background);
        border-radius: 5dvw;
        margin: 4.722dvw 4.722dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body #handheld-about .wrapper h2:nth-child(1){
        font-weight: 100;
        font-size: 9.167dvw;
        text-align: center;
        color: var(--dark);
        margin-top: 11.111dvw;
    }

    body #handheld-about .wrapper h2:nth-child(2){
        font-family: Rag-Bold;
        font-size: 9.167dvw;
        text-align: center;
        color: var(--dark);
        margin-top: 4.722dvw;
        width: 55.556dvw;
        line-height: 11.111dvw;
    }

    body #handheld-about .wrapper p{
        width: 54.167dvw;
        text-align: center;
        font-size: 4.722dvw;
        height: fit-content;
        color: var(--dark);
        margin-top: 5.556dvw;
    }

    body #handheld-about .wrapper #img-holder{
        position:relative;
        width: 79.722dvw;
        height: 55.278dvw;
        border-radius: 9.167dvw;
        margin-top: 9.167dvw;
        background: linear-gradient(to bottom, rgb(0, 0, 0,0.5), rgb(0, 0, 0,0.5));
    }

    body #handheld-about .wrapper #img-holder::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 79.722dvw;
    height: 55.278dvw;
    border-radius: 9.167dvw;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5),rgba(255, 255, 255, 0));
    }

    body #handheld-about .wrapper #img-holder img{
        height: 100%;
        width: 100%;
        border-radius: 9.167dvw;
        overflow: hidden;
        transition: all 0.7s ease;
    }

    body #handheld-about .wrapper #img-holder .dot-holder{
        position:absolute;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 59.722dvw;
        height: 3.333vw;
        bottom:4.167vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 12;
    }

    body #handheld-about .wrapper #img-holder .dot-holder button{
        height:3.333vw;
        aspect-ratio: 1/1;
        border: none;
        border-radius: 50%;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    body #contact{
        display: flex !important;
        height: fit-content;
        width: 100%;
    }

    body #contact .holder{
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: fit-content;
        width: 100%;
        gap: 5.556dvw;
        background-color: var(--dark);
    }

    body #contact .holder #figure{
        height: fit-content;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--33);
        width: 91.66%;
    }

    body #contact .holder #figure .heroback{
       display: none;
    }

    body #contact .holder #figure .info{
        height:fit-content;
        width:100%;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
        border-radius: 4.167dvw;
        gap: 2.442dvw;
        margin-bottom: 4.167dvw;
        padding: 3.056vw 0 ;
    }

    body #contact .holder #figure .info section{
        height:13.889dvw;
        width:95%;
        background-color: var(--info);
        display:flex;
        align-items: center;
        justify-content: left;
        border-radius: 2.222vw;
    }

    body #contact .holder #figure .info section .img{
        width:10.556vw;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background-color: var(--background);
        margin-left: 3.056dvw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder #figure .info section .img img{
        width:6.944vw;
        aspect-ratio: 1/1;
        object-fit:contain;
        object-position: center;
    }

    body #contact .holder #figure .info section aside{
        display: flex;
        flex-direction: column;
        height: fit-content;
        width: fit-content;
        margin-left: 2.222vw;
    }

    body #contact .holder #figure .info section aside h2{
        font-size:3.889dvw;
        color:var(--black);
        font-weight: 100;
        line-height:3.889vw;
    }

    body #contact .holder #figure .info section aside a{
        font-size:2.867vw;
        color:var(--black);
        font-weight: 100;
        text-decoration: underline;
    }



    body #contact .holder #form-holder{
        height: fit-content;
        width: 91.66%;
        background-color: var(--white);
        border-radius: 4.167dvw;
        overflow: hidden;
        margin-top:4.167dvw;
        display: flex;
        flex-direction: column;
    }

    body #contact .holder #form-holder h2{
        font-size:7.311vw;
        color: var(--teal);
        font-weight: 100;
        margin:6.944vw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder h3{
        font-size:9.167dvw;
        font-weight: 100;
        width: 80dvw;
        color: var(--black);
        margin:0.556dvw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder .cover{
        width: 80dvw;
        height:27.222vw;
        border-bottom: 0.417dvw solid var(--border-contact);
        display: flex;
        align-items: first baseline;
        margin:6.944dvw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder .cover p{
        font-size: 4.444dvw;
        font-weight: 100;
        color: var(--black);
        line-height:4.533dvw;
    }

    body #contact .holder #form-holder .cover p span{
        font-size: 4.444dvw;
        color: var(--black);
        line-height:4.533dvw;
        font-weight: 100;
    }

    body #contact .holder #form-holder form{
        height: fit-content;
        width: 80dvw;
        display: flex;
        flex-wrap:wrap;
        gap: 3.611dvw;
        margin:8.333dvw 0 6.111vw 5.556dvw;
    }

    body #contact .holder #form-holder form .boxes{
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        justify-content: space-between;
        height:18.889dvw;
        width: 80dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(4){
        width: 100%;
        height:42.778dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5){
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        gap: 1.944dvw;
    }

    body #contact .holder #form-holder form .boxes label{
        font-size: 4.672dvw;
        font-weight: 100;
        color: var(--black);
        text-transform:capitalize;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) label{
        font-size: 3.783dvw; 
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) input[type="checkbox"]{
        height: 4.722dvw;
        width: 4.722dvw;
        border-radius: 1.111dvw;
    }

    body #contact .holder #form-holder form .boxes input{
        height:10.278dvw;
        background-color: var(--background);
        border: none;
        border-radius: 2.222dvw;
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 3.889dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:2.222vw;
    }

    body #contact .holder #form-holder form .boxes input:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes input::placeholder{
        font-size: 3.889dvw;
        font-weight: 100;
        text-transform: capitalize;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form .boxes textarea{
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        width: 100%;
        height:35dvw;
        font-size: 3.889dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:2.222vw;
        padding-top:1.389vw;
    }

    body #contact .holder #form-holder form .boxes textarea:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes textarea::placeholder{
        font-size: 3.889dvw;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form button{
        height:10.278dvw;
        width:100%;
        color:var(--white);
        border: none;
        background-color: var(--teal);
        font-size: 4.256dvw;
        font-weight: 100;
        border-radius: 2.222dvw;
        margin-top: 5dvw;
       
    }

    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;
        overflow-x: hidden;
    }

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

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

    body .pages{ /*the class name of all subpages*/
        display: flex !important;
        width: 100%;
        height: fit-content;
        
    }

    body .handheld{
        display: none !important;
        height:fit-content;
        width: 100%; 

    }

    

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

    /*landing page css*/
    body #landing{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 0.729svw;
        overflow: hidden;    
    }

    body #landing .header { /* Header contains all */
        width: 97.813%;
        aspect-ratio: 16/7.5;
        border-radius: var(--33);
        background-image: url(./vectors/background.svg);
        background-repeat: no-repeat; /* Prevent tiling */
        background-size:cover; /* Cover the entire section */
        background-position:bottom right; /* Center the image */
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        margin-top:1.094vw;
    }

    body #landing .header nav{ /*nav bar of the landing page*/
        height: 2.708dvw;
        width: 95.637%;
        display: flex;
        flex-direction: row;
        align-items:flex-end;
        justify-content: space-between;
        margin-top: 1.51svw;
        margin-left: 1.799svw;
    }

    body #landing .header nav .logo{ /* anchor tag which contain the logo */
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .header nav .logo #logo{ /*raisin pharma logo in navbar*/
        height: 2.708dvw;
        width: 8.964dvw;
        object-fit: cover;
        object-position: center;
    }

    body #landing .header nav ul{ /* navigation link holder*/
        height: 2.188dvw;
        width: fit-content;
        gap: calc(12/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    body #landing .header nav ul li{
        font-family: Rag-NarrowRegular;
        font-size: 1.441dvw;
        color: var(--black-opacity);
    }

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

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

    body #landing .header #intro{ /* introduction box contains h1 div h2 and div#dot */
        width: fit-content;
        height: 19.116dvw;
        margin-left: 1.888dvw;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        margin-top: 3.2dvw;
         
    }
    

    body #landing .header #intro h1{  /* introduction box's h1 */
        font-family: Rag-NarrowRegular;
        font-size: calc(198.47/1920*100dvw);
        line-height: calc(154.80/1920*100dvw);
        text-align: left;
        color: var(--black);
    }

    body #landing .header #intro .box {
        height: 4.271dvw;
        width: 19.216dvw;
        border-radius: 4.271dvw;
        background-color: var(--dark);
        border: calc(3/1920*100dvw) solid transparent;  
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10.943dvw;
        margin-top: 1.943dvw;
        transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out; 
    }
    
    body #landing .header #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
    }
    
    body #landing .header #intro .box p {
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Rag-NarrowRegular;
        font-size: 2.21dvw;
        color: var(--background);
        transition: color 0.12s ease; 

    }
    
    body #landing .header #intro .box:hover p {
        color: var(--dark);
    }

    body #landing .header #intro h2{ /* introduction box's h2 */
        font-family: Rag-NarrowRegular;
        font-size: calc(198.47/1920*100dvw);
        line-height: calc(198.47/1920*100dvw);
        letter-spacing:calc(2/1920*100dvw);
        color: var(--black);
        text-align: left;
        text-size-adjust:auto;
        margin-top:calc(25/1920*100vw);
    }

    body #landing .header #intro .extra{
        height: fit-content;
        width:fit-content;
        display: flex;
    }


    body #landing .header #intro #dot{ /* introduction box's dot */
        height:1.823dvw ;
        width: 1.823dvw;
        background-color: var(--dark);
        border-radius: 50%;
        align-self: last baseline;
        margin-bottom:calc(20/1920*100dvw);
    }

    body #landing .header main{   /*main tag, comes after intro box*/
        font-family:Rag-NarrowRegular;
        font-size: 1.302dvw;
        text-transform: lowercase;
        word-wrap: break-word;
        word-break: keep-all;
        width: 22.76dvw;
        height: fit-content;
        margin-left: 13.831dvw;
        margin-top: 5.365dvw;
        color: var(--black-opacity);
    }

    body #landing .header article{  /*article tag, comes after main tag*/
        position: absolute;
        font-family:Rag-NarrowRegular;
        font-size:1.006dvw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        left: 2.083dvw;
        bottom: 1.126vw;
        color: var(--black-opacity);
    }

    body #landing .header #breathing {
        z-index: -1;
        height: fit-content;
        width: fit-content;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: calc(1089/1920*100dvw);
    }
      
    body #landing .header .container {
        position: relative;
        width: 35.052dvw;
        height: 17.5dvw;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    
    body #landing .header .circles {
        position: absolute;
        bottom: 0;
        transition: all 0.6s ease-in-out;
    }
    
    body #landing .header .half-circle {
        position: absolute;
        border-radius: 15.625dvw 15.625dvw 0 0;
        transform: translateX(-50%); 
        bottom: 0;
        background-position: center;
        background-size: cover;
        /* Set transform origin to bottom center to keep the baseline alignment */
        transform-origin: bottom center;
    }
    
    body #landing .header .half-circle:nth-child(1) {
        width: 33.49dvw;
        height: 16.719dvw;
        background-image: url(./vectors/1.svg);
        /* First semicircle - largest scale change */
        animation: breathe-large 4s ease-in-out infinite;
    }
    
    body #landing .header .half-circle:nth-child(2) {
        width: 27.969dvw;
        height: 13.958dvw;
        background-image: url(./vectors/2.svg);
        /* Second semicircle - medium scale change */
        animation: breathe-medium 4s ease-in-out infinite;
    }
    
    body #landing .header .half-circle:nth-child(3) {
        width: 22.448dvw;
        height: 11.198dvw;
        background-image: url(./vectors/3.svg);
        /* Third semicircle - smallest scale change */
        animation: breathe-small 4s ease-in-out infinite;
    }
    
    
    /* Define separate animations for each semicircle with uniform scaling */
    @keyframes breathe-large {
        0%, 100% {
            transform: translateX(-50%) scale(0.87);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Larger scale for the first semicircle */
        }
    }
    
    @keyframes breathe-medium {
        0%, 100% {
            transform: translateX(-50%) scale(0.82);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Medium scale for the second semicircle */
        }
    }
    
    @keyframes breathe-small {
        0%, 100% {
            transform: translateX(-50%) scale(0.78);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Smaller scale for the third semicircle */
        }
    }

    body #landing footer{ /* it is the footer */
        height: calc(96 / 1080 * 100%);
        width: 97.813%;
        background-color: var(--dark);
        border-radius: var(--30);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.094dvw;
        /* Add padding to help with vertical alignment */
        padding: 0.5dvw 0;
        box-sizing: border-box;
    }

    body #landing footer ul{
        width: 84.219dvw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        /* Remove any margin/padding */
        margin: 0;
        padding: 0;
    }

    body #landing footer ul li{
        font-family: Rag-Regular;
        font-weight: 100;
        font-size: 2.604dvw;
        color: var(--background);
        /* Add these properties for better vertical alignment */
        line-height: 1;
        padding-bottom: 0.3dvw; /* Add slight padding to shift text up */
        display: flex;
        align-items: center;
    }

    body #landing #holder{
        position: absolute;
        height:fit-content;
        width:fit-content;
        z-index: 100;
        right: calc(-50/1920*100dvw);
        bottom: calc(0/1920*100dvw);
    }

    body #landing #canvas {
        position: relative;
        height:17.195dvw;
        width:30.569dvw;
        
      }

      /*about page css*/
      body #about{
        display:flex;
        align-items: center;
        justify-content: center;
    }

    body #about .container{
        display:flex;
        align-items: center;
        justify-content: center;
        width: calc(1876.19/1920*100dvw);
        aspect-ratio:1876.19/1038;
        overflow: hidden;
        border-radius: var(--33);
        margin: calc(21/1920*100dvw) 0 calc(21/1920*100dvw) 0;   
    }

    body #about .container #box1{
        position: relative;
        height: 100%;
        width: 100%;
        transition: all 0.3s ease;
        overflow: hidden;
        background-image: url(./vectors/container.svg);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 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(49/1920*100dvw);
        margin-left: calc(33.65/1920*100dvw);
    }

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

    body #about .container #box1 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 #about .container #box1 nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

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

    body #about .container #box1 .header{
        position: relative;
        height:calc(287.91/1920*100dvw);
        width:calc(1795.02/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: calc(71.67/1920*100dvw);
        margin-left: calc(33.08/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head{
        position: absolute;
        width:calc(1330/1920*100dvw);
        height: 100%;
        left: 0;
    }

    body #about .container #box1 .header #intro-head h3{
        font-family: Rag-Regular;
        font-weight: 100;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(100/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head h2{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head p{
        color: var(--dark);
        width: calc(668/1920*100dvw);
        font-size:calc(30/1920*100dvw);
        font-weight: 100;
        margin-top:calc(13/1920*100dvw);
        height: fit-content;
        line-height:calc(35/1920*100dvw);
    }

    body #about .container #box1 .header #heart-holder{
        position: absolute;
        height: calc(274/1920*100dvw);
        width:calc(999/1920*100dvw);
        right: 0;
        display: grid;
        grid-template-columns: 57.5% 42.5%;
        border-radius: var(--33);
        background-image: url(./vectors/rectangle.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    body #about .container #box1 .header #heart-holder .left{
        height: calc(274/1920*100dvw);
        display: grid;
        grid-template-rows: 50% 50%;
    }

    body #about .container #box1 .header #heart-holder .left .up{
        width: 100%;  
    }

    body #about .container #box1 .header #heart-holder .left .down{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    body #about .container #box1 .header #heart-holder .left .down img {
        height:calc(55/1920*100dvw);
        width: calc(36.34/1920*100dvw);
        transition: transform 0.4s ease,
                    opacity 0.4s ease;
        transform-origin: center center;
        will-change: transform, opacity;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(1){
        margin-left:calc(80.65/1920*100dvw); 
        opacity:0.2;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(2){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.33;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(3){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.46;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(4){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.6;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(5){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.73;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(6){
        margin-left:calc(33.66/1920*100dvw);
        opacity: 0.86;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(7){
    margin-left:calc(37.66/1920*100dvw);
        opacity: 1;
    }

    body #about .container #box1 .header #heart-holder .right{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    } 

    body #about .container #box1 .header #heart-holder .right img{
        height: calc(333.26/1920*100dvw);
        width: calc(332.88/1920*100dvw);
        margin-top: calc(-35/1920*100dvw);
        filter: drop-shadow(0 0 1.563dvw rgba(0, 0, 0, 0.2));
        transition: transform 0.5s cubic-bezier(.45,0,.49,1.01) ;
    }

    body #about .container #box1 .header #heart-holder .right img:hover{
        transform: scale(1.1);
    }

    body #about .container #box1 .story{
        height:calc(423/1920*100dvw);
        width: calc(1793.66/1920*100dvw);
        display: flex;
        align-items: flex-end;
        justify-content: end;
        margin-top: calc(49/1920*100dvw);
        margin-left: calc(40.1/1920*100dvw);
    }

    body #about .container #box1 .story #script{
        height:calc(390.51/1920*100dvw);
        width: calc(1010.08/1920*100dvw);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    body #about .container #box1 .story #script .paragraph{
        height:fit-content;
        width: calc(1010.08/1920*100dvw);
        word-wrap: break-word;
        word-break:keep-all;
        font-size:calc(24.12/1920*100dvw);
        font-weight: 100;
        text-align: left;
        color: var(--dark);
        letter-spacing: 2%;
    }

    body #about .container #box1 .story #script .list{
        height: fit-content;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    body #about .container #box1 .story #script .list aside{
        height: fit-content;
        width: calc(266/1920*100dvw);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 .story #script .list aside h3{
        height: fit-content;
        width: fit-content;
        font-family: Rag-Bold;
        color: var(--dark);
        font-size: calc(88/1920*100dvw);
        line-height:calc(88/1920*100dvw); 
    }

    body #about .container #box1 .story #script .list aside:nth-child(2) h3{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #about .container #box1 .story #script .list aside h3 span{
        font-family: Rag-Bold;
        color: var(--dark);
        font-size: calc(56.69/1920*100dvw);
        line-height:calc(56.69/1920*100dvw);
    }

    body #about .container #box1 .story #script .list aside p{
        font-family: Rag-Regular;
        font-weight: 100;
        color: var(--dark);
        font-size: calc(27/1920*100dvw);
    }

    body #about .container #box1 article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        margin-left:calc(39.07/1920*100dvw);
        margin-top: calc(46.19/1920*100dvw);
    }

    body #about .container #box1 .wrapper{
        position: absolute;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        left: calc(40.1/1920*100dvw);
        top:calc(510/1920*100dvw);
        border-radius: var(--33);
    }

    body #about .container #box1 #box2 #up:hover,body #about .container #box1 #box2 #down:hover{
        transition: all 0.3s ease;
        background-color: var(--nav_hover);
    }

    body #about .container #box1 .wrapper .normal{
        transition: all 0.1ms ease;
        position: relative;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        background-image: url(./vectors/story.png);
        background-position: top;
        background-size: cover;
        border-radius: var(--33);
        overflow: hidden;
    }

    body #about .container #box1 .wrapper .normal #up{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        top: 0;
        right: 0;
    }

    body #about .container #box1 .small-wrapper{
        position: absolute;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        left: calc(40.1/1920*100dvw);
        top:calc(510/1920*100dvw);
        border-radius: var(--33);
    }

    body #about .container #box1 .hide{
        transition: all 0.1ms ease;
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: var(--33);
        background-image: url(./vectors/darkbackground.svg);
        background-position: top;
        background-size: cover;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        overflow: hidden;
    }

    body #about .container #box1 .hide #up{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        top: 0;
        right: 0;
        animation: rotate 0.5s ease reverse;
    }

    body #about .container #box1 .hide #down{
        display: none;
    }

    body #about .container #box1 .hide .wrap{
        display: none;
    }

    body #about .container #box1 .normal #down{
        display: none;

    }
    body #about .container #box1 .normal .wrap{
        display: none;
    }

    body #about .container #box1 .big-wrapper{
        position: absolute;
        display:flex;
        align-items: center;
        justify-content: center;
        width: calc(1876.19/1920*100dvw);
        aspect-ratio: 1876.19/1038;
        border-radius: var(--33);
       
    }

    body #about .container #box1 .visible{
        transition: all 0.1ms ease;
        position:relative;
        display: flex;
        flex-direction: column;
        border-radius: var(--33);
        height:calc(961.99/1920*100dvw) ;
        width:calc(1799/1920*100dvw);
        overflow: hidden;
        background-image: url(./vectors/darkbackground.svg);
        background-position:top;
        background-size: cover;
        background-repeat: no-repeat;
    }

    body #about .container #box1 .visible #up{
        display: none;
    }

    body #about .container #box1 .visible #down{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        transform: rotate(180deg);
        top: 0;
        right: 0;
        animation: rotate 0.5s ease forwards;
    }

    @keyframes rotate{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(180deg);
        }
    }

    body #about .container #box1 .visible .wrap{
        position: relative;
        height: fit-content;
        width: fit-content;
        animation: update 0.6s  cubic-bezier(.45,0,.49,1.01) reverse;
    }

    body #about .container #box1 .visible h2{
        font-family: Rag-Bold;
        font-size:calc(99/1920*100dvw);
        color: var(--background);
        margin-left:calc(78.5/1920*100dvw);
        margin-top:calc(73.86/1920*100dvw);
        height: fit-content;
        width: fit-content;
        line-height:calc(99/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction{
        height:calc(654.82/1920*100dvw);
        width:calc(1639.06/1920*100dvw);
        display: flex;
        justify-content: space-between;
        margin-left:calc(78.5/1920*100dvw);
        margin-top:calc(73.86/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder{
        height:calc(654.82/1920*100dvw);
        width:calc(1072.29/1920*100dvw);
        display: flex;
        flex-direction: column;
        justify-content: left;
    }

    body #about .container #box1 .visible .interaction .text-holder #paragraph{
        width:calc(1072.29/1920*100dvw);
        height: calc(400/1920*100dvw);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 .visible .interaction .text-holder  #paragraph span{
        font-size:calc(28.35/1920*100dvw);
        font-weight: 100;
        color: var(--background);
        word-wrap: break-word;
        word-break: keep-all;
        transition: all 0.5s ease;
    }

    body #about .container #box1 .visible .interaction .text-holder .white-box{
        position: relative;
        height:calc(67/1920*100dvw);
        width:calc(138/1920*100dvw);
        border-radius: var(--33);
        background-color: var(--background);
        margin-left:0.588dvw;
        margin-top: calc(70/1920*100dvw);
        z-index: 100;
        visibility: hidden;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover{
        height:calc(120.35/1920*100dvw);
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:calc(23.97/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box{
        position: relative;
        height:calc(120.35/1920*100dvw);
        width:calc(1039.37/1920*100dvw);
        display: grid;
        grid-template-rows: 38.34% 61.66%;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper{
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        border-bottom: 0.052dvw solid var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p{
        line-height: normal;
        height: fit-content;
        width: fit-content;
        font-family: Rag-Bold;
        font-size: calc(17.01/1920*100dvw);
        color: var(--background); 
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(1){
        margin-right:calc(84/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(2){
        margin-right:calc(81.3/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(3){
        margin-right:calc(92.57/1920*100dvw); 
    }

     body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(4){
        margin-right:calc(87.9/1920*100dvw);
    }

     body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(5){
        margin-right:calc(72.29/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower{
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p{
        height: fit-content;
        width: fit-content;
        text-align: center;
        font-family: Rag-Bold;
        font-size:calc(18/1920*100dvw);
        color: var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(1){
        margin-right: calc(73.47/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(2){
        margin-right: calc(76.75/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(3){
        margin-right: calc(97.81/1920*100dvw); 
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(4){
        margin-right: calc(89.99/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(5){
        margin-right: calc(71.37/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder{
        position: absolute;
        width: calc(907/1920*100dvw);
        height: calc(26/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-between;
        left:calc(67.37/1920*100dvw);
        top:calc(35.53/1920*100dvw);
        z-index: 100;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder #circle{
        height: calc(26/1920*100dvw);
        width: calc(26/1920*100dvw);
        border-radius: 50%;
        background-color: var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder #green-dot{
        position: absolute;
        height: calc(26/1920*100dvw);
        width: calc(26/1920*100dvw);
        border-radius: 50%;
        background-color: var(--green-dot);
        left: 0;
        transition: all 0.6s ease;
        z-index: 100;
    }

    body #about .container #box1 .visible .interaction .image{
        height:100% ;
        width:calc(517/1920*100dvw) ;
        display: flex;
        flex-direction: column;
        align-items:flex-end;
        justify-content: space-between;
    }

    body #about .container #box1 .visible .interaction .image .img{
        height: calc(517/1920*100dvw);
        width:calc(517/1920*100dvw) ;
        object-fit: cover;
        object-position: center;
        border-radius: var(--33);
        transition: all 0.3s ease;
        margin-top: calc(39/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .image article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw) ;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--background);
        opacity: 0.4;
        margin-left: 0.305vw;
        margin-top: 2.131dvw;
        font-weight: 100;
    }

    body #about .container .visible {
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: up 0.5s cubic-bezier(.22,0,.21,1.01) forwards,
                   svgupdate2 0.5s cubic-bezier(.22,0,.21,1.01)  forwards;
    }
    
    body #about .container .hide {
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: down 0.5s cubic-bezier(.22,0,.21,1.01) forwards,
                   svgupdate1 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
       
    }

    @keyframes svgupdate1{
        from{
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.669%{
            
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.67%{
            
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        to{
           background-image: url(./vectors/story.png);
           background-position:top;
           background-size: cover;
           background-repeat: no-repeat;
        }
    }

    @keyframes svgupdate2{
        from{
            
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.669%{
           
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.67%{
            
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        to{
        
           background-image: url(./vectors/darkbackground.svg);
           background-position:top;
           background-size: cover;
           background-repeat: no-repeat;
        }
    }
    
    
    
    body #about .container #box1 .visible .wrap {
        animation: update 0.5s cubic-bezier(.22,0,.21,1.01) reverse;
    }

    body #about .container #box1 .small-wrapper{
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: change2 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
    }

    body #about .container #box1 .big-wrapper{
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: change 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
    }

    @keyframes change {
        from{
            left: calc(40.1/1920*100dvw);
            top:calc(510/1920*100dvw);
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
        to{ 
            left: 0;
            top: 0;
            height:calc(1038/1920*100dvw);
            width: calc(1876.19/1920*100dvw);
            background-color: var(--background);
        }
    }

    @keyframes change2 {
        from{ 
            left: calc(40.1/1920*100dvw);
            top: calc(58/1920*100dvw);
            height:calc(1038/1920*100dvw);
            width: calc(1876.19/1920*100dvw);
        }

        to{
            left: calc(40.1/1920*100dvw);
            top:calc(510/1920*100dvw);
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
    }

    

    @keyframes update {
        from{
            opacity: 1;
        }
        to{
            opacity: 0;
        }
    }
    /* tried purpose*/
    


    @keyframes down {
        from{
            height:calc(961.99/1920*100dvw) ;
            width:calc(1799/1920*100dvw);
        }
        to{
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
    }

    @keyframes up {
        from{
            
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
        
        to{
        height:calc(961.99/1920*100dvw) ;
        width:calc(1799/1920*100dvw);
        }
    }

    /*product page css*/
    body #product{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #product .wrapper{
        width: 100%;
        aspect-ratio: 16/8.7;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-image: url(./vectors/productpage.svg);
        background-position: center;
        background-size: cover;
    }

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

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

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

    body #product .wrapper 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 #product .wrapper nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

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

    body #product .wrapper #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 #product .wrapper #intro .words{
        height: 100%;
        width: calc(1115/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
    }

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

    body #product .wrapper #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);
        margin-left:calc(5/1920*100dvw);
    }

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

    body #product .wrapper #intro .box {
        height: 4.271dvw;
        width: 19.216dvw;
        border-radius: 4.271dvw;
        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);
        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 #product .wrapper #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
        color: var(--dark);
    }

    body #product .wrapper .cover{
        height: calc(504/1920*100dvw);
        width:calc(1805/1920*100dvw);
        margin-left:calc(56/1920*100dvw);
        margin-top: calc(48.31/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: left;
        gap: calc(40.5/1920*100dvw);
    }

    body #product .wrapper .cover #img{
        position: relative;
        transition: all 0.6s ease;
        border-radius: var(--33);
    }

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

    body #product .wrapper .cover .img1{
        height:100%;
        width:calc(764.5/1920*100dvw);
    }

    body #product .wrapper .cover .img2{
        height:100%;
        width:calc(525.1/1920*100dvw);
    }

    body #product .wrapper .cover .img3{
        height:100%;
        width:calc(436.54/1920*100dvw);
    }

    body #product .wrapper .cover #img:hover{
        height:100%;
        width:calc(764.5/1920*100dvw);
    }

    body #product .wrapper .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 #product .wrapper .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 #product .wrapper .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 #product .wrapper .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 #product .wrapper 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);
    }

    body #product .wrapper 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 #product .wrapper footer .line{
        width:calc(1533/1920*100dvw);
        height: fit-content;
        border-top:calc(2/1920*100dvw) solid var(--border);
    }

    /*contact page css*/
    body #contact{
        background-color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder{
        width: 97.656dvw;
        aspect-ratio: 16/8.9;
        background-color: var(--dark);
        border-radius: var(--33);
        display:flex;
        align-items: center;
        justify-content: center;
        gap:calc(22.6/1920*100dvw);
        margin: calc(21/1920*100dvw) 0 calc(21/1920*100dvw) 0;
    }

    body #contact .holder #form-holder , body #contact .holder #figure{
        height:calc(987/1920*100dvw);
        width:41.068dvw;
        border-radius:var(--33);
        overflow-y: scroll;
    }

    body #contact .holder #figure{
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--33);
    }

    body #contact .holder #figure .heroback{
        width:100%;
        height:calc(614.5/1920*100dvw);
        background-image: url(./picture/hero_back.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        align-items: last baseline;
        overflow: hidden;
    }

    body #contact .holder #figure .image{
        width:calc(530/1920*100dvw);
        height:calc(530/1920*100dvw);
        border-radius: var(--33);
        display: flex;
        align-items: last baseline;
        overflow: hidden;
        margin-left: calc(114.7/1920*100dvw);
    }

    

    body #contact .holder #figure .info{
        height:calc(349/1920*100dvw);
        width:100%;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
        border-radius: var(--33);
        gap: calc(20/1920*100dvw);
    }

    body #contact .holder #figure .info section{
        height:calc(85/1920*100dvw);
        width:38.49dvw;
        background-color: var(--info);
        display:flex;
        align-items: center;
        justify-content: left;
        border-radius: var(--33);
    }

    body #contact .holder #figure .info section .img{
        height:2.083dvw;
        width:2.083dvw;
        border-radius: 50%;
        background-color: var(--background);
        margin-left: 1.191vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder #figure .info section .img img{
        height:1.51dvw;
        width:1.51dvw;
        border-radius: 50%;
        object-fit:contain;
        object-position: center;
    }

    

    body #contact .holder #figure .info section aside{
        display: flex;
        flex-direction: column;
        height: fit-content;
        width: fit-content;
        margin-left: 0.971vw;
    }

    body #contact .holder #figure .info section aside h2{
        font-size:calc(24/1920*100dvw);
        color:var(--black);
        font-weight: 100;
        line-height:calc(36/1920*100dvw);
    }

    body #contact .holder #figure .info section aside a{
        font-size:calc(17/1920*100dvw);
        color:var(--black);
        font-weight: 100;
        text-decoration: underline;
    }

    body #contact .holder #form-holder {
        background-color: var(--white);
    }

    body #contact .holder #form-holder h2{
        font-size:calc(28/1920*100dvw);
        color: var(--teal);
        font-weight: 100;
        margin-top: calc(43.41/1920*100dvw);
        margin-left:calc(43.41/1920*100dvw);
    }

    body #contact .holder #form-holder h3{
        font-size:calc(66/1920*100dvw);
        font-weight: 100;
        width: 36.146dvw;
        color: var(--black);
        margin-left: calc(43.41/1920*100dvw);
    }

    body #contact .holder #form-holder .cover{
        margin-left: calc(43.41/1920*100dvw);
        width: 36.578dvw;
        height:calc(101.66/1920*100dvw);
        border-bottom: 0.052dvw solid var(--border-contact);
        display: flex;
        align-items: first baseline;
        margin-top: calc(8.66/1920*100dvw);
    }

    body #contact .holder #form-holder .cover p{
        font-size: calc(24/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:calc(17/1920*100dvw);
    }

    body #contact .holder #form-holder .cover p span{
        font-size: calc(24/1920*100dvw);
        color: var(--black);
        line-height:calc(36/1920*100dvw);
        font-weight: 100;
    }

    body #contact .holder #form-holder form{
        margin-left: calc(43.41/1920*100dvw);
        height: fit-content;
        width: 36.563dvw;
        display: flex;
        flex-wrap:wrap;
        margin-top:calc(39/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes{
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        height: calc(110.88/1920*100dvw);
        width: 17.448dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(2){
        width: 18.229dvw;
       margin-left: calc(15/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(3){
        width: 100%;
        margin-top: calc(3.014/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(4){
        width: 100%;
        height:calc(185.38/1920*100dvw);
        margin-top: calc(3.014/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(5){
        width: 100%;
        height: calc(30/1920*100dvw);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: calc(13.32/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes label{
        font-size: calc(24/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        text-transform:capitalize;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) label{
        margin-left: 1.018dvw;
        font-size: 1.042dvw;
        
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) input[type="checkbox"]{
        height: calc(23.50/1920*100dvw);
        width: 1.224dvw;
        border-radius: var(--18);
    }

    body #contact .holder #form-holder form .boxes input{
        height:calc(72/1920*100dvw);
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 1.146dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:1.21dvw;
    }

    body #contact .holder #form-holder form .boxes input:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes input::placeholder{
        font-size: calc(22/1920*100dvw);
        font-weight: 100;
        text-transform: capitalize;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form .boxes textarea{
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        width: 100%;
        height:calc(149/1920*100dvw);
        font-size: 1.146dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:0.481dvw;
        padding-top:1.181dvw;
    }

    body #contact .holder #form-holder form .boxes textarea:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes textarea::placeholder{
        font-size: calc(22/1920*100dvw);
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form button{
        height:calc(72/1920*100dvw);
        width:100%;
        color:var(--white);
        border: none;
        background-color: var(--teal);
        font-size: 1.406dvw;
        font-weight: 100;
        border-radius: var(--18);
        margin-top: 0.556dvw;
       
    }

    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: 834px) 
and (max-device-width: 1194px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) {
    html{
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

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

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

    body .pages{ /*the class name of all subpages*/
        display: flex !important;
        width: 100%;
        height: fit-content;
        
    }

    body .handheld{
        display: none !important;
        height:fit-content;
        width: 100%; 

    }

    

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

    /*landing page css*/
    body #landing{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 0.729svw;
        overflow: hidden;    
    }

    body #landing .header { /* Header contains all */
        width: 97.813%;
        aspect-ratio: 16/7.5;
        border-radius: var(--33);
        background-image: url(./vectors/background.svg);
        background-repeat: no-repeat; /* Prevent tiling */
        background-size:cover; /* Cover the entire section */
        background-position:bottom right; /* Center the image */
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        margin-top:1.094vw;
    }

    body #landing .header nav{ /*nav bar of the landing page*/
        height: 2.708dvw;
        width: 95.637%;
        display: flex;
        flex-direction: row;
        align-items:flex-end;
        justify-content: space-between;
        margin-top: 1.51svw;
        margin-left: 1.799svw;
    }

    body #landing .header nav .logo{ /* anchor tag which contain the logo */
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .header nav .logo #logo{ /*raisin pharma logo in navbar*/
        height: 2.708dvw;
        width: 8.964dvw;
        object-fit: cover;
        object-position: center;
    }

    body #landing .header nav ul{ /* navigation link holder*/
        height: 2.188dvw;
        width: fit-content;
        gap: calc(12/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    body #landing .header nav ul li{
        font-family: Rag-NarrowRegular;
        font-size: 1.441dvw;
        color: var(--black-opacity);
    }

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

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

    body #landing .header #intro{ /* introduction box contains h1 div h2 and div#dot */
        width: fit-content;
        height: 19.116dvw;
        margin-left: 1.888dvw;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        margin-top: 3.2dvw;
         
    }
    

    body #landing .header #intro h1{  /* introduction box's h1 */
        font-family: Rag-NarrowRegular;
        font-size: calc(198.47/1920*100dvw);
        line-height: calc(154.80/1920*100dvw);
        text-align: left;
        color: var(--black);
    }

    body #landing .header #intro .box {
        height: 4.271dvw;
        width: 19.216dvw;
        border-radius: 4.271dvw;
        background-color: var(--dark);
        border: calc(3/1920*100dvw) solid transparent;  
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10.943dvw;
        margin-top: 1.943dvw;
        transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out; 
    }
    
    body #landing .header #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
    }
    
    body #landing .header #intro .box p {
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Rag-NarrowRegular;
        font-size: 2.21dvw;
        color: var(--background);
        transition: color 0.12s ease; 

    }
    
    body #landing .header #intro .box:hover p {
        color: var(--dark);
    }

    body #landing .header #intro h2{ /* introduction box's h2 */
        font-family: Rag-NarrowRegular;
        font-size: calc(198.47/1920*100dvw);
        line-height: calc(198.47/1920*100dvw);
        letter-spacing:calc(2/1920*100dvw);
        color: var(--black);
        text-align: left;
        text-size-adjust:auto;
        margin-top:calc(25/1920*100vw);
    }

    body #landing .header #intro .extra{
        height: fit-content;
        width:fit-content;
        display: flex;
    }


    body #landing .header #intro #dot{ /* introduction box's dot */
        height:1.823dvw ;
        width: 1.823dvw;
        background-color: var(--dark);
        border-radius: 50%;
        align-self: last baseline;
        margin-bottom:calc(20/1920*100dvw);
    }

    body #landing .header main{   /*main tag, comes after intro box*/
        font-family:Rag-NarrowRegular;
        font-size: 1.302dvw;
        text-transform: lowercase;
        word-wrap: break-word;
        word-break: keep-all;
        width: 22.76dvw;
        height: fit-content;
        margin-left: 13.831dvw;
        margin-top: 5.365dvw;
        color: var(--black-opacity);
    }

    body #landing .header article{  /*article tag, comes after main tag*/
        position: absolute;
        font-family:Rag-NarrowRegular;
        font-size:1.006dvw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        left: 2.083dvw;
        bottom: 1.126vw;
        color: var(--black-opacity);
    }

    body #landing .header #breathing {
        z-index: -1;
        height: fit-content;
        width: fit-content;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: calc(1089/1920*100dvw);
    }
      
    body #landing .header .container {
        position: relative;
        width: 35.052dvw;
        height: 17.5dvw;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    
    body #landing .header .circles {
        position: absolute;
        bottom: 0;
        transition: all 0.6s ease-in-out;
    }
    
    body #landing .header .half-circle {
        position: absolute;
        border-radius: 15.625dvw 15.625dvw 0 0;
        transform: translateX(-50%); 
        bottom: 0;
        background-position: center;
        background-size: cover;
        /* Set transform origin to bottom center to keep the baseline alignment */
        transform-origin: bottom center;
    }
    
    body #landing .header .half-circle:nth-child(1) {
        width: 33.49dvw;
        height: 16.719dvw;
        background-image: url(./vectors/1.svg);
        /* First semicircle - largest scale change */
        animation: breathe-large 4s ease-in-out infinite;
    }
    
    body #landing .header .half-circle:nth-child(2) {
        width: 27.969dvw;
        height: 13.958dvw;
        background-image: url(./vectors/2.svg);
        /* Second semicircle - medium scale change */
        animation: breathe-medium 4s ease-in-out infinite;
    }
    
    body #landing .header .half-circle:nth-child(3) {
        width: 22.448dvw;
        height: 11.198dvw;
        background-image: url(./vectors/3.svg);
        /* Third semicircle - smallest scale change */
        animation: breathe-small 4s ease-in-out infinite;
    }
    
    
    /* Define separate animations for each semicircle with uniform scaling */
    @keyframes breathe-large {
        0%, 100% {
            transform: translateX(-50%) scale(0.87);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Larger scale for the first semicircle */
        }
    }
    
    @keyframes breathe-medium {
        0%, 100% {
            transform: translateX(-50%) scale(0.82);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Medium scale for the second semicircle */
        }
    }
    
    @keyframes breathe-small {
        0%, 100% {
            transform: translateX(-50%) scale(0.78);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Smaller scale for the third semicircle */
        }
    }

    body #landing footer{ /* it is the footer */
        height: calc(96 / 1080 * 100%);
        width: 97.813%;
        background-color: var(--dark);
        border-radius: var(--30);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.094dvw;
        /* Add padding to help with vertical alignment */
        padding: 0.5dvw 0;
        box-sizing: border-box;
    }

    body #landing footer ul{
        width: 84.219dvw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        /* Remove any margin/padding */
        margin: 0;
        padding: 0;
    }

    body #landing footer ul li{
        font-family: Rag-Regular;
        font-weight: 100;
        font-size: 2.604dvw;
        color: var(--background);
        /* Add these properties for better vertical alignment */
        line-height: 1;
        padding-bottom: 0.3dvw; /* Add slight padding to shift text up */
        display: flex;
        align-items: center;
    }

    body #landing #holder{
        position: absolute;
        height:fit-content;
        width:fit-content;
        z-index: 100;
        right: calc(-50/1920*100dvw);
        bottom: calc(0/1920*100dvw);
    }

    body #landing #canvas {
        position: relative;
        height:17.195dvw;
        width:30.569dvw;
        
      }

      /*about page css*/
      body #about{
        display:flex;
        align-items: center;
        justify-content: center;
    }

    body #about .container{
        display:flex;
        align-items: center;
        justify-content: center;
        width: calc(1876.19/1920*100dvw);
        aspect-ratio:1876.19/1038;
        overflow: hidden;
        border-radius: var(--33);
        margin: calc(21/1920*100dvw) 0 calc(21/1920*100dvw) 0;   
    }

    body #about .container #box1{
        position: relative;
        height: 100%;
        width: 100%;
        transition: all 0.3s ease;
        overflow: hidden;
        background-image: url(./vectors/container.svg);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 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(49/1920*100dvw);
        margin-left: calc(33.65/1920*100dvw);
    }

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

    body #about .container #box1 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 #about .container #box1 nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

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

    body #about .container #box1 .header{
        position: relative;
        height:calc(287.91/1920*100dvw);
        width:calc(1795.02/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: calc(71.67/1920*100dvw);
        margin-left: calc(33.08/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head{
        position: absolute;
        width:calc(1330/1920*100dvw);
        height: 100%;
        left: 0;
    }

    body #about .container #box1 .header #intro-head h3{
        font-family: Rag-Regular;
        font-weight: 100;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(100/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head h2{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head p{
        color: var(--dark);
        width: calc(668/1920*100dvw);
        font-size:calc(30/1920*100dvw);
        font-weight: 100;
        margin-top:calc(13/1920*100dvw);
        height: fit-content;
        line-height:calc(35/1920*100dvw);
    }

    body #about .container #box1 .header #heart-holder{
        position: absolute;
        height: calc(274/1920*100dvw);
        width:calc(999/1920*100dvw);
        right: 0;
        display: grid;
        grid-template-columns: 57.5% 42.5%;
        border-radius: var(--33);
        background-image: url(./vectors/rectangle.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    body #about .container #box1 .header #heart-holder .left{
        height: calc(274/1920*100dvw);
        display: grid;
        grid-template-rows: 50% 50%;
    }

    body #about .container #box1 .header #heart-holder .left .up{
        width: 100%;  
    }

    body #about .container #box1 .header #heart-holder .left .down{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    body #about .container #box1 .header #heart-holder .left .down img {
        height:calc(55/1920*100dvw);
        width: calc(36.34/1920*100dvw);
        transition: transform 0.4s ease,
                    opacity 0.4s ease;
        transform-origin: center center;
        will-change: transform, opacity;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(1){
        margin-left:calc(80.65/1920*100dvw); 
        opacity:0.2;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(2){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.33;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(3){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.46;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(4){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.6;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(5){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.73;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(6){
        margin-left:calc(33.66/1920*100dvw);
        opacity: 0.86;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(7){
    margin-left:calc(37.66/1920*100dvw);
        opacity: 1;
    }

    body #about .container #box1 .header #heart-holder .right{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    } 

    body #about .container #box1 .header #heart-holder .right img{
        height: calc(333.26/1920*100dvw);
        width: calc(332.88/1920*100dvw);
        margin-top: calc(-35/1920*100dvw);
        filter: drop-shadow(0 0 1.563dvw rgba(0, 0, 0, 0.2));
        transition: transform 0.5s cubic-bezier(.45,0,.49,1.01) ;
    }

    body #about .container #box1 .header #heart-holder .right img:hover{
        transform: scale(1.1);
    }

    body #about .container #box1 .story{
        height:calc(423/1920*100dvw);
        width: calc(1793.66/1920*100dvw);
        display: flex;
        align-items: flex-end;
        justify-content: end;
        margin-top: calc(49/1920*100dvw);
        margin-left: calc(40.1/1920*100dvw);
    }

    body #about .container #box1 .story #script{
        height:calc(390.51/1920*100dvw);
        width: calc(1010.08/1920*100dvw);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    body #about .container #box1 .story #script .paragraph{
        height:fit-content;
        width: calc(1010.08/1920*100dvw);
        word-wrap: break-word;
        word-break:keep-all;
        font-size:calc(24.12/1920*100dvw);
        font-weight: 100;
        text-align: left;
        color: var(--dark);
        letter-spacing: 2%;
    }

    body #about .container #box1 .story #script .list{
        height: fit-content;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    body #about .container #box1 .story #script .list aside{
        height: fit-content;
        width: calc(266/1920*100dvw);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 .story #script .list aside h3{
        height: fit-content;
        width: fit-content;
        font-family: Rag-Bold;
        color: var(--dark);
        font-size: calc(88/1920*100dvw);
        line-height:calc(88/1920*100dvw); 
    }

    body #about .container #box1 .story #script .list aside:nth-child(2) h3{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #about .container #box1 .story #script .list aside h3 span{
        font-family: Rag-Bold;
        color: var(--dark);
        font-size: calc(56.69/1920*100dvw);
        line-height:calc(56.69/1920*100dvw);
    }

    body #about .container #box1 .story #script .list aside p{
        font-family: Rag-Regular;
        font-weight: 100;
        color: var(--dark);
        font-size: calc(27/1920*100dvw);
    }

    body #about .container #box1 article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        margin-left:calc(39.07/1920*100dvw);
        margin-top: calc(46.19/1920*100dvw);
    }

    body #about .container #box1 .wrapper{
        position: absolute;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        left: calc(40.1/1920*100dvw);
        top:calc(510/1920*100dvw);
        border-radius: var(--33);
    }

    body #about .container #box1 #box2 #up:hover,body #about .container #box1 #box2 #down:hover{
        transition: all 0.3s ease;
        background-color: var(--nav_hover);
    }

    body #about .container #box1 .wrapper .normal{
        transition: all 0.1ms ease;
        position: relative;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        background-image: url(./vectors/story.png);
        background-position: top;
        background-size: cover;
        border-radius: var(--33);
        overflow: hidden;
    }

    body #about .container #box1 .wrapper .normal #up{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        top: 0;
        right: 0;
    }

    body #about .container #box1 .small-wrapper{
        position: absolute;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        left: calc(40.1/1920*100dvw);
        top:calc(510/1920*100dvw);
        border-radius: var(--33);
    }

    body #about .container #box1 .hide{
        transition: all 0.1ms ease;
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: var(--33);
        background-image: url(./vectors/darkbackground.svg);
        background-position: top;
        background-size: cover;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        overflow: hidden;
    }

    body #about .container #box1 .hide #up{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        top: 0;
        right: 0;
        animation: rotate 0.5s ease reverse;
    }

    body #about .container #box1 .hide #down{
        display: none;
    }

    body #about .container #box1 .hide .wrap{
        display: none;
    }

    body #about .container #box1 .normal #down{
        display: none;

    }
    body #about .container #box1 .normal .wrap{
        display: none;
    }

    body #about .container #box1 .big-wrapper{
        position: absolute;
        display:flex;
        align-items: center;
        justify-content: center;
        width: calc(1876.19/1920*100dvw);
        aspect-ratio: 1876.19/1038;
        border-radius: var(--33);
       
    }

    body #about .container #box1 .visible{
        transition: all 0.1ms ease;
        position:relative;
        display: flex;
        flex-direction: column;
        border-radius: var(--33);
        height:calc(961.99/1920*100dvw) ;
        width:calc(1799/1920*100dvw);
        overflow: hidden;
        background-image: url(./vectors/darkbackground.svg);
        background-position:top;
        background-size: cover;
        background-repeat: no-repeat;
    }

    body #about .container #box1 .visible #up{
        display: none;
    }

    body #about .container #box1 .visible #down{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        transform: rotate(180deg);
        top: 0;
        right: 0;
        animation: rotate 0.5s ease forwards;
    }

    @keyframes rotate{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(180deg);
        }
    }

    body #about .container #box1 .visible .wrap{
        position: relative;
        height: fit-content;
        width: fit-content;
        animation: update 0.6s  cubic-bezier(.45,0,.49,1.01) reverse;
    }

    body #about .container #box1 .visible h2{
        font-family: Rag-Bold;
        font-size:calc(99/1920*100dvw);
        color: var(--background);
        margin-left:calc(78.5/1920*100dvw);
        margin-top:calc(73.86/1920*100dvw);
        height: fit-content;
        width: fit-content;
        line-height:calc(99/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction{
        height:calc(654.82/1920*100dvw);
        width:calc(1639.06/1920*100dvw);
        display: flex;
        justify-content: space-between;
        margin-left:calc(78.5/1920*100dvw);
        margin-top:calc(73.86/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder{
        height:calc(654.82/1920*100dvw);
        width:calc(1072.29/1920*100dvw);
        display: flex;
        flex-direction: column;
        justify-content: left;
    }

    body #about .container #box1 .visible .interaction .text-holder #paragraph{
        width:calc(1072.29/1920*100dvw);
        height: calc(400/1920*100dvw);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 .visible .interaction .text-holder  #paragraph span{
        font-size:calc(28.35/1920*100dvw);
        font-weight: 100;
        color: var(--background);
        word-wrap: break-word;
        word-break: keep-all;
        transition: all 0.5s ease;
    }

    body #about .container #box1 .visible .interaction .text-holder .white-box{
        position: relative;
        height:calc(67/1920*100dvw);
        width:calc(138/1920*100dvw);
        border-radius: var(--33);
        background-color: var(--background);
        margin-left:0.588dvw;
        margin-top: calc(70/1920*100dvw);
        z-index: 100;
        visibility: hidden;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover{
        height:calc(120.35/1920*100dvw);
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:calc(23.97/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box{
        position: relative;
        height:calc(120.35/1920*100dvw);
        width:calc(1039.37/1920*100dvw);
        display: grid;
        grid-template-rows: 38.34% 61.66%;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper{
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        border-bottom: 0.052dvw solid var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p{
        line-height: normal;
        height: fit-content;
        width: fit-content;
        font-family: Rag-Bold;
        font-size: calc(17.01/1920*100dvw);
        color: var(--background); 
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(1){
        margin-right:calc(84/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(2){
        margin-right:calc(81.3/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(3){
        margin-right:calc(92.57/1920*100dvw); 
    }

     body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(4){
        margin-right:calc(87.9/1920*100dvw);
    }

     body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(5){
        margin-right:calc(72.29/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower{
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p{
        height: fit-content;
        width: fit-content;
        text-align: center;
        font-family: Rag-Bold;
        font-size:calc(18/1920*100dvw);
        color: var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(1){
        margin-right: calc(73.47/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(2){
        margin-right: calc(76.75/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(3){
        margin-right: calc(97.81/1920*100dvw); 
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(4){
        margin-right: calc(89.99/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(5){
        margin-right: calc(71.37/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder{
        position: absolute;
        width: calc(907/1920*100dvw);
        height: calc(26/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-between;
        left:calc(67.37/1920*100dvw);
        top:calc(35.53/1920*100dvw);
        z-index: 100;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder #circle{
        height: calc(26/1920*100dvw);
        width: calc(26/1920*100dvw);
        border-radius: 50%;
        background-color: var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder #green-dot{
        position: absolute;
        height: calc(26/1920*100dvw);
        width: calc(26/1920*100dvw);
        border-radius: 50%;
        background-color: var(--green-dot);
        left: 0;
        transition: all 0.6s ease;
        z-index: 100;
    }

    body #about .container #box1 .visible .interaction .image{
        height:100% ;
        width:calc(517/1920*100dvw) ;
        display: flex;
        flex-direction: column;
        align-items:flex-end;
        justify-content: space-between;
    }

    body #about .container #box1 .visible .interaction .image .img{
        height: calc(517/1920*100dvw);
        width:calc(517/1920*100dvw) ;
        object-fit: cover;
        object-position: center;
        border-radius: var(--33);
        transition: all 0.3s ease;
        margin-top: calc(39/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .image article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw) ;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--background);
        opacity: 0.4;
        margin-left: 0.305vw;
        margin-top: 2.131dvw;
        font-weight: 100;
    }

    body #about .container .visible {
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: up 0.5s cubic-bezier(.22,0,.21,1.01) forwards,
                   svgupdate2 0.5s cubic-bezier(.22,0,.21,1.01)  forwards;
    }
    
    body #about .container .hide {
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: down 0.5s cubic-bezier(.22,0,.21,1.01) forwards,
                   svgupdate1 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
       
    }

    @keyframes svgupdate1{
        from{
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.669%{
            
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.67%{
            
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        to{
           background-image: url(./vectors/story.png);
           background-position:top;
           background-size: cover;
           background-repeat: no-repeat;
        }
    }

    @keyframes svgupdate2{
        from{
            
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.669%{
           
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.67%{
            
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        to{
        
           background-image: url(./vectors/darkbackground.svg);
           background-position:top;
           background-size: cover;
           background-repeat: no-repeat;
        }
    }
    
    
    
    body #about .container #box1 .visible .wrap {
        animation: update 0.5s cubic-bezier(.22,0,.21,1.01) reverse;
    }

    body #about .container #box1 .small-wrapper{
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: change2 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
    }

    body #about .container #box1 .big-wrapper{
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: change 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
    }

    @keyframes change {
        from{
            left: calc(40.1/1920*100dvw);
            top:calc(510/1920*100dvw);
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
        to{ 
            left: 0;
            top: 0;
            height:calc(1038/1920*100dvw);
            width: calc(1876.19/1920*100dvw);
            background-color: var(--background);
        }
    }

    @keyframes change2 {
        from{ 
            left: calc(40.1/1920*100dvw);
            top: calc(58/1920*100dvw);
            height:calc(1038/1920*100dvw);
            width: calc(1876.19/1920*100dvw);
        }

        to{
            left: calc(40.1/1920*100dvw);
            top:calc(510/1920*100dvw);
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
    }

    

    @keyframes update {
        from{
            opacity: 1;
        }
        to{
            opacity: 0;
        }
    }
    /* tried purpose*/
    


    @keyframes down {
        from{
            height:calc(961.99/1920*100dvw) ;
            width:calc(1799/1920*100dvw);
        }
        to{
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
    }

    @keyframes up {
        from{
            
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
        
        to{
        height:calc(961.99/1920*100dvw) ;
        width:calc(1799/1920*100dvw);
        }
    }

    /*product page css*/
    body #product{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #product .wrapper{
        width: 100%;
        aspect-ratio: 16/8.7;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-image: url(./vectors/productpage.svg);
        background-position: center;
        background-size: cover;
    }

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

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

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

    body #product .wrapper 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 #product .wrapper nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

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

    body #product .wrapper #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 #product .wrapper #intro .words{
        height: 100%;
        width: calc(1115/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
    }

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

    body #product .wrapper #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);
        margin-left:calc(5/1920*100dvw);
    }

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

    body #product .wrapper #intro .box {
        height: 4.271dvw;
        width: 19.216dvw;
        border-radius: 4.271dvw;
        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);
        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 #product .wrapper #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
        color: var(--dark);
    }

    body #product .wrapper .cover{
        height: calc(504/1920*100dvw);
        width:calc(1805/1920*100dvw);
        margin-left:calc(56/1920*100dvw);
        margin-top: calc(48.31/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: left;
        gap: calc(40.5/1920*100dvw);
    }

    body #product .wrapper .cover #img{
        position: relative;
        transition: all 0.6s ease;
        border-radius: var(--33);
    }

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

    body #product .wrapper .cover .img1{
        height:100%;
        width:calc(764.5/1920*100dvw);
    }

    body #product .wrapper .cover .img2{
        height:100%;
        width:calc(525.1/1920*100dvw);
    }

    body #product .wrapper .cover .img3{
        height:100%;
        width:calc(436.54/1920*100dvw);
    }

    body #product .wrapper .cover #img:hover{
        height:100%;
        width:calc(764.5/1920*100dvw);
    }

    body #product .wrapper .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 #product .wrapper .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 #product .wrapper .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 #product .wrapper .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 #product .wrapper 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);
    }

    body #product .wrapper 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 #product .wrapper footer .line{
        width:calc(1533/1920*100dvw);
        height: fit-content;
        border-top:calc(2/1920*100dvw) solid var(--border);
    }

    /*contact page css*/
    body #contact{
        background-color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder{
        width: 97.656dvw;
        aspect-ratio: 16/8.9;
        background-color: var(--dark);
        border-radius: var(--33);
        display:flex;
        align-items: center;
        justify-content: center;
        gap:calc(22.6/1920*100dvw);
        margin: calc(21/1920*100dvw) 0 calc(21/1920*100dvw) 0;
    }

    body #contact .holder #form-holder , body #contact .holder #figure{
        height:calc(987/1920*100dvw);
        width:41.068dvw;
        border-radius:var(--33);
        overflow-y: scroll;
    }

    body #contact .holder #figure{
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--33);
    }

    body #contact .holder #figure .heroback{
        width:100%;
        height:calc(614.5/1920*100dvw);
        background-image: url(./picture/hero_back.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        align-items: last baseline;
        overflow: hidden;
    }

    body #contact .holder #figure .image{
        width:calc(530/1920*100dvw);
        height:calc(530/1920*100dvw);
        border-radius: var(--33);
        display: flex;
        align-items: last baseline;
        overflow: hidden;
        margin-left: calc(114.7/1920*100dvw);
    }

    

    body #contact .holder #figure .info{
        height:calc(349/1920*100dvw);
        width:100%;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
        border-radius: var(--33);
        gap: calc(20/1920*100dvw);
    }

    body #contact .holder #figure .info section{
        height:calc(85/1920*100dvw);
        width:38.49dvw;
        background-color: var(--info);
        display:flex;
        align-items: center;
        justify-content: left;
        border-radius: var(--33);
    }

    body #contact .holder #figure .info section .img{
        height:2.083dvw;
        width:2.083dvw;
        border-radius: 50%;
        background-color: var(--background);
        margin-left: 1.191vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder #figure .info section .img img{
        height:1.51dvw;
        width:1.51dvw;
        border-radius: 50%;
        object-fit:contain;
        object-position: center;
    }

    

    body #contact .holder #figure .info section aside{
        display: flex;
        flex-direction: column;
        height: fit-content;
        width: fit-content;
        margin-left: 0.971vw;
    }

    body #contact .holder #figure .info section aside h2{
        font-size:calc(24/1920*100dvw);
        color:var(--black);
        font-weight: 100;
        line-height:calc(36/1920*100dvw);
    }

    body #contact .holder #figure .info section aside a{
        font-size:calc(17/1920*100dvw);
        color:var(--black);
        font-weight: 100;
        text-decoration: underline;
    }

    body #contact .holder #form-holder {
        background-color: var(--white);
    }

    body #contact .holder #form-holder h2{
        font-size:calc(28/1920*100dvw);
        color: var(--teal);
        font-weight: 100;
        margin-top: calc(43.41/1920*100dvw);
        margin-left:calc(43.41/1920*100dvw);
    }

    body #contact .holder #form-holder h3{
        font-size:calc(66/1920*100dvw);
        font-weight: 100;
        width: 36.146dvw;
        color: var(--black);
        margin-left: calc(43.41/1920*100dvw);
    }

    body #contact .holder #form-holder .cover{
        margin-left: calc(43.41/1920*100dvw);
        width: 36.578dvw;
        height:calc(101.66/1920*100dvw);
        border-bottom: 0.052dvw solid var(--border-contact);
        display: flex;
        align-items: first baseline;
        margin-top: calc(8.66/1920*100dvw);
    }

    body #contact .holder #form-holder .cover p{
        font-size: calc(24/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:calc(17/1920*100dvw);
    }

    body #contact .holder #form-holder .cover p span{
        font-size: calc(24/1920*100dvw);
        color: var(--black);
        line-height:calc(36/1920*100dvw);
        font-weight: 100;
    }

    body #contact .holder #form-holder form{
        margin-left: calc(43.41/1920*100dvw);
        height: fit-content;
        width: 36.563dvw;
        display: flex;
        flex-wrap:wrap;
        margin-top:calc(39/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes{
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        height: calc(110.88/1920*100dvw);
        width: 17.448dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(2){
        width: 18.229dvw;
       margin-left: calc(15/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(3){
        width: 100%;
        margin-top: calc(3.014/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(4){
        width: 100%;
        height:calc(185.38/1920*100dvw);
        margin-top: calc(3.014/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(5){
        width: 100%;
        height: calc(30/1920*100dvw);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: calc(13.32/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes label{
        font-size: calc(24/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        text-transform:capitalize;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) label{
        margin-left: 1.018dvw;
        font-size: 1.042dvw;
        
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) input[type="checkbox"]{
        height: calc(23.50/1920*100dvw);
        width: 1.224dvw;
        border-radius: var(--18);
    }

    body #contact .holder #form-holder form .boxes input{
        height:calc(72/1920*100dvw);
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 1.146dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:1.21dvw;
    }

    body #contact .holder #form-holder form .boxes input:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes input::placeholder{
        font-size: calc(22/1920*100dvw);
        font-weight: 100;
        text-transform: capitalize;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form .boxes textarea{
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        width: 100%;
        height:calc(149/1920*100dvw);
        font-size: 1.146dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:0.481dvw;
        padding-top:1.181dvw;
    }

    body #contact .holder #form-holder form .boxes textarea:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes textarea::placeholder{
        font-size: calc(22/1920*100dvw);
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form button{
        height:calc(72/1920*100dvw);
        width:100%;
        color:var(--white);
        border: none;
        background-color: var(--teal);
        font-size: 1.406dvw;
        font-weight: 100;
        border-radius: var(--18);
        margin-top: 0.556dvw;
       
    }

    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: 1194px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) {
    html{
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

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

    body .whole-wrapper{
        height:99.9svh;
        width: 100%;
        overflow-y: scroll;
        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{
        display: none !important;
    }

    body .handheld{
        display: flex !important;
        height:fit-content;
        width: 100%;
    }

    body #handheld-landing{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 1.667svw;
        overflow: hidden;
    }

    body #handheld-landing .header{
        width:91.66%;
        aspect-ratio: 0.58/1;
        background-image: url(./vectors/handheld_background.png);
        background-repeat: no-repeat; /* Prevent tiling */
        background-size:cover; /* Cover the entire section */
        background-position: center; /* Center the image */
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        overflow: hidden;
        border-radius: var(--33);
        margin-top: 3.488dvw; 
    }

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

    body #handheld-landing .header nav .logo{ /* anchor tag which contain the logo */
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #handheld-landing .header nav .logo #logo{ /*raisin pharma logo in navbar*/
        height:7.911dvw;
        width: 26.225dvw;
        object-fit: cover;
        object-position: center;
    }

    body #handheld-landing .header 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 #handheld-landing .header h2{
        font-family: Rag-Black;
        font-size:9.167dvw;
        color: var(--black);
        line-height:11.111dvw;
        text-align: center;
        margin-top:13.889dvw;

    }

    body #handheld-landing .header main{
        font-family: Rag-NarrowRegular;
        font-size: 5.464dvw;
        text-align: center;
        color: var(--black);
        margin-top: 8.333dvw;
        line-height:7.222dvw;
        width: 80%;
    }

    body #handheld-landing .header .btnholder{
        height: fit-content;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:9.647vw;
        gap: 2.5dvw;
    }

    body #handheld-landing .header .btnholder .btn{
        font-family: Rag-NarrowRegular;
        border: 0.278dvw solid ;
        height: 11.111dvw;
        width: 39.167dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4.356dvw;
        border-radius: 8.333dvw;
        font-weight: 200;
    }

    body #handheld-landing .header .btnholder a:nth-child(1) .btn{
        border: 0.278vw solid var(--dark);
        color: var(--dark);
    }

    body #handheld-landing .header .btnholder a:nth-child(2) .btn{
        border: 0.278vw solid var(--dark);
        color: var(--background);
        background-color: var(--dark);
    }

    body #handheld-landing .header #breathing{
        z-index: -1;
        height: fit-content;
        width: fit-content;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        transform: translateX(0);
      }
      
    body #handheld-landing .header .container {
          position: relative;
          width: 73.03dvw;
          height: 37.639dvw;
          display: flex;
          justify-content: center;
          align-items: flex-end;

          
        }

    body #handheld-landing .header .circles {
          position: absolute;
          bottom: 0;
          transition: transform 0.6s ease-in-out;
        }

    body #handheld-landing .header .half-circle {
          position: absolute;
          border-radius: 73.03vw 73.03vw 0 0;
          transform: translateX(-50%);
          bottom: 0;
          background-position: center;
          background-size: cover;
        }

    body #handheld-landing .header .half-circle:nth-child(1){
        width: 73.03dvw;
        height: 37.639dvw;
          background-image: url(./vectors/biggest{with\ the\ issue\ fized}.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(2) {
          width:69.776dvw;
          height:35.961dvw;
          background-image: url(./vectors/1.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(3) {
          width:58.273dvw;
          height:30.021dvw;
          background-image: url(./vectors/2.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(4) {
          width:46.77dvw;
          height:24.085dvw;
          background-image: url(./vectors/3.svg);
        }
      
    @keyframes breathe {
          0%, 100% {
            transform: scale(0.8);
          }
          50% {
            transform: scale(0.9);
          }
      }

    body #handheld-landing #heart{
        position: absolute;
        width:60.833dvw;
        height: 60.903vw;
        bottom: 0.556dvw;
    }



    body #handheld-landing footer{
        width:91.66%;
        height: 11.111dvw;
        border-radius:3.333dvw;
        background-color: var(--dark);
        margin-bottom: 3.488dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--background);
        font-family: Rag-NarrowRegular;
        text-transform: capitalize;
        font-size: 5.367dvw;
    }


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

    body #handheld-products .wrapper{
        width:91.66%;
        aspect-ratio:1/2;
        background-color: var(--background);
        border-radius: 5dvw;
        margin: 4.722dvw 4.722dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body #handheld-products .wrapper h2{
        font-family: Rag-Bold;
        font-size: 9.167dvw;
        color: var(--black);
        margin: 16.667dvw 0 0 5.833dvw;
        align-self: flex-start;
    }

    body #handheld-products .wrapper p{
        font-family: Rag-NarrowRegular;
        font-size: 5.556dvw;
        margin: 1.389dvw 0 0 6.258dvw;
        height: fit-content;
        width: fit-content;
        align-self: flex-start;
    }

    body #handheld-products .wrapper #med-box{
        height: fit-content;
        width:81.389dvw;
        display: flex;
        flex-wrap: wrap;
        gap: 4.167vw;
        margin-top: 4.972dvw;
    }

    body #handheld-products .wrapper #med-box img:nth-child(1){
        width: 100%;
        aspect-ratio: 293/151;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper #med-box img:nth-child(2){
        width:38.611dvw;
        aspect-ratio: 139/153;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper #med-box img:nth-child(3){
        width:38.611dvw;
        aspect-ratio: 139/153;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper .btn{
        height: 10.878dvw;
        width: 52.567dvw;
        border: 0.278dvw solid var(--dark);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9.167dvw;
        font-family: Rag-NarrowRegular;
        font-size: 5.625dvw;
        margin-top: 7.908dvw;
        color: var(--dark);
    }


    body #handheld-about{  /*css of about page in mobile*/
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #handheld-about .wrapper{
        width:91.66%;
        aspect-ratio:1/2;
        background-color: var(--background);
        border-radius: 5dvw;
        margin: 4.722dvw 4.722dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body #handheld-about .wrapper h2:nth-child(1){
        font-weight: 100;
        font-size: 9.167dvw;
        text-align: center;
        color: var(--dark);
        margin-top: 11.111dvw;
    }

    body #handheld-about .wrapper h2:nth-child(2){
        font-family: Rag-Bold;
        font-size: 9.167dvw;
        text-align: center;
        color: var(--dark);
        margin-top: 4.722dvw;
        width: 55.556dvw;
        line-height: 11.111dvw;
    }

    body #handheld-about .wrapper p{
        width: 54.167dvw;
        text-align: center;
        font-size: 4.722dvw;
        height: fit-content;
        color: var(--dark);
        margin-top: 5.556dvw;
    }

    body #handheld-about .wrapper #img-holder{
        position:relative;
        width: 79.722dvw;
        height: 55.278dvw;
        border-radius: 9.167dvw;
        margin-top: 9.167dvw;
        background: linear-gradient(to bottom, rgb(0, 0, 0,0.5), rgb(0, 0, 0,0.5));
    }

    body #handheld-about .wrapper #img-holder::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 79.722dvw;
    height: 55.278dvw;
    border-radius: 9.167dvw;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5),rgba(255, 255, 255, 0));
    }

    body #handheld-about .wrapper #img-holder img{
        height: 100%;
        width: 100%;
        border-radius: 9.167dvw;
        overflow: hidden;
        transition: all 0.7s ease;
    }

    body #handheld-about .wrapper #img-holder .dot-holder{
        position:absolute;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 59.722dvw;
        height: 3.333vw;
        bottom:4.167vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 12;
    }

    body #handheld-about .wrapper #img-holder .dot-holder button{
        height:3.333vw;
        aspect-ratio: 1/1;
        border: none;
        border-radius: 50%;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    body #contact{
        display: flex !important;
        height: fit-content;
        width: 100%;
    }

    body #contact .holder{
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: fit-content;
        width: 100%;
        gap: 5.556dvw;
        background-color: var(--dark);
    }

    body #contact .holder #figure{
        height: fit-content;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--33);
        width: 91.66%;
    }

    body #contact .holder #figure .heroback{
       display: none;
    }

    body #contact .holder #figure .info{
        height:fit-content;
        width:100%;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
        border-radius: 4.167dvw;
        gap: 2.442dvw;
        margin-bottom: 4.167dvw;
        padding: 3.056vw 0 ;
    }

    body #contact .holder #figure .info section{
        height:13.889dvw;
        width:95%;
        background-color: var(--info);
        display:flex;
        align-items: center;
        justify-content: left;
        border-radius: 2.222vw;
    }

    body #contact .holder #figure .info section .img{
        width:10.556vw;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background-color: var(--background);
        margin-left: 3.056dvw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder #figure .info section .img img{
        width:6.944vw;
        aspect-ratio: 1/1;
        object-fit:contain;
        object-position: center;
    }

    body #contact .holder #figure .info section aside{
        display: flex;
        flex-direction: column;
        height: fit-content;
        width: fit-content;
        margin-left: 2.222vw;
    }

    body #contact .holder #figure .info section aside h2{
        font-size:3.889dvw;
        color:var(--black);
        font-weight: 100;
        line-height:3.889vw;
    }

    body #contact .holder #figure .info section aside a{
        font-size:2.867vw;
        color:var(--black);
        font-weight: 100;
        text-decoration: underline;
    }



    body #contact .holder #form-holder{
        height: fit-content;
        width: 91.66%;
        background-color: var(--white);
        border-radius: 4.167dvw;
        overflow: hidden;
        margin-top:4.167dvw;
        display: flex;
        flex-direction: column;
    }

    body #contact .holder #form-holder h2{
        font-size:7.311vw;
        color: var(--teal);
        font-weight: 100;
        margin:6.944vw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder h3{
        font-size:9.167dvw;
        font-weight: 100;
        width: 80dvw;
        color: var(--black);
        margin:0.556dvw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder .cover{
        width: 80dvw;
        height:27.222vw;
        border-bottom: 0.417dvw solid var(--border-contact);
        display: flex;
        align-items: first baseline;
        margin:6.944dvw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder .cover p{
        font-size: 4.444dvw;
        font-weight: 100;
        color: var(--black);
        line-height:4.533dvw;
    }

    body #contact .holder #form-holder .cover p span{
        font-size: 4.444dvw;
        color: var(--black);
        line-height:4.533dvw;
        font-weight: 100;
    }

    body #contact .holder #form-holder form{
        height: fit-content;
        width: 80dvw;
        display: flex;
        flex-wrap:wrap;
        gap: 3.611dvw;
        margin:8.333dvw 0 6.111vw 5.556dvw;
    }

    body #contact .holder #form-holder form .boxes{
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        justify-content: space-between;
        height:18.889dvw;
        width: 80dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(4){
        width: 100%;
        height:42.778dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5){
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        gap: 1.944dvw;
    }

    body #contact .holder #form-holder form .boxes label{
        font-size: 4.672dvw;
        font-weight: 100;
        color: var(--black);
        text-transform:capitalize;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) label{
        font-size: 3.783dvw; 
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) input[type="checkbox"]{
        height: 4.722dvw;
        width: 4.722dvw;
        border-radius: 1.111dvw;
    }

    body #contact .holder #form-holder form .boxes input{
        height:10.278dvw;
        background-color: var(--background);
        border: none;
        border-radius: 2.222dvw;
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 3.889dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:2.222vw;
    }

    body #contact .holder #form-holder form .boxes input:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes input::placeholder{
        font-size: 3.889dvw;
        font-weight: 100;
        text-transform: capitalize;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form .boxes textarea{
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        width: 100%;
        height:35dvw;
        font-size: 3.889dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:2.222vw;
        padding-top:1.389vw;
    }

    body #contact .holder #form-holder form .boxes textarea:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes textarea::placeholder{
        font-size: 3.889dvw;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form button{
        height:10.278dvw;
        width:100%;
        color:var(--white);
        border: none;
        background-color: var(--teal);
        font-size: 4.256dvw;
        font-weight: 100;
        border-radius: 2.222dvw;
        margin-top: 5dvw;
       
    }

    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: 1024px) 
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape) {
    html{
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

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

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

    body .pages{ /*the class name of all subpages*/
        display: flex !important;
        width: 100%;
        height: fit-content;
        
    }

    body .handheld{
        display: none !important;
        height:fit-content;
        width: 100%; 

    }

    

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

    /*landing page css*/
    body #landing{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 0.729svw;
        overflow: hidden;    
    }

    body #landing .header { /* Header contains all */
        width: 97.813%;
        aspect-ratio: 16/7.5;
        border-radius: var(--33);
        background-image: url(./vectors/background.svg);
        background-repeat: no-repeat; /* Prevent tiling */
        background-size:cover; /* Cover the entire section */
        background-position:bottom right; /* Center the image */
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        margin-top:1.094vw;
    }

    body #landing .header nav{ /*nav bar of the landing page*/
        height: 2.708dvw;
        width: 95.637%;
        display: flex;
        flex-direction: row;
        align-items:flex-end;
        justify-content: space-between;
        margin-top: 1.51svw;
        margin-left: 1.799svw;
    }

    body #landing .header nav .logo{ /* anchor tag which contain the logo */
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .header nav .logo #logo{ /*raisin pharma logo in navbar*/
        height: 2.708dvw;
        width: 8.964dvw;
        object-fit: cover;
        object-position: center;
    }

    body #landing .header nav ul{ /* navigation link holder*/
        height: 2.188dvw;
        width: fit-content;
        gap: calc(12/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    body #landing .header nav ul li{
        font-family: Rag-NarrowRegular;
        font-size: 1.441dvw;
        color: var(--black-opacity);
    }

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

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

    body #landing .header #intro{ /* introduction box contains h1 div h2 and div#dot */
        width: fit-content;
        height: 19.116dvw;
        margin-left: 1.888dvw;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        margin-top: 3.2dvw;
         
    }
    

    body #landing .header #intro h1{  /* introduction box's h1 */
        font-family: Rag-NarrowRegular;
        font-size: calc(198.47/1920*100dvw);
        line-height: calc(154.80/1920*100dvw);
        text-align: left;
        color: var(--black);
    }

    body #landing .header #intro .box {
        height: 4.271dvw;
        width: 19.216dvw;
        border-radius: 4.271dvw;
        background-color: var(--dark);
        border: calc(3/1920*100dvw) solid transparent;  
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10.943dvw;
        margin-top: 1.943dvw;
        transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out; 
    }
    
    body #landing .header #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
    }
    
    body #landing .header #intro .box p {
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Rag-NarrowRegular;
        font-size: 2.21dvw;
        color: var(--background);
        transition: color 0.12s ease; 

    }
    
    body #landing .header #intro .box:hover p {
        color: var(--dark);
    }

    body #landing .header #intro h2{ /* introduction box's h2 */
        font-family: Rag-NarrowRegular;
        font-size: calc(198.47/1920*100dvw);
        line-height: calc(198.47/1920*100dvw);
        letter-spacing:calc(2/1920*100dvw);
        color: var(--black);
        text-align: left;
        text-size-adjust:auto;
        margin-top:calc(25/1920*100vw);
    }

    body #landing .header #intro .extra{
        height: fit-content;
        width:fit-content;
        display: flex;
    }


    body #landing .header #intro #dot{ /* introduction box's dot */
        height:1.823dvw ;
        width: 1.823dvw;
        background-color: var(--dark);
        border-radius: 50%;
        align-self: last baseline;
        margin-bottom:calc(20/1920*100dvw);
    }

    body #landing .header main{   /*main tag, comes after intro box*/
        font-family:Rag-NarrowRegular;
        font-size: 1.302dvw;
        text-transform: lowercase;
        word-wrap: break-word;
        word-break: keep-all;
        width: 22.76dvw;
        height: fit-content;
        margin-left: 13.831dvw;
        margin-top: 5.365dvw;
        color: var(--black-opacity);
    }

    body #landing .header article{  /*article tag, comes after main tag*/
        position: absolute;
        font-family:Rag-NarrowRegular;
        font-size:1.006dvw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        left: 2.083dvw;
        bottom: 1.126vw;
        color: var(--black-opacity);
    }

    body #landing .header #breathing {
        z-index: -1;
        height: fit-content;
        width: fit-content;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: calc(1089/1920*100dvw);
    }
      
    body #landing .header .container {
        position: relative;
        width: 35.052dvw;
        height: 17.5dvw;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    
    body #landing .header .circles {
        position: absolute;
        bottom: 0;
        transition: all 0.6s ease-in-out;
    }
    
    body #landing .header .half-circle {
        position: absolute;
        border-radius: 15.625dvw 15.625dvw 0 0;
        transform: translateX(-50%); 
        bottom: 0;
        background-position: center;
        background-size: cover;
        /* Set transform origin to bottom center to keep the baseline alignment */
        transform-origin: bottom center;
    }
    
    body #landing .header .half-circle:nth-child(1) {
        width: 33.49dvw;
        height: 16.719dvw;
        background-image: url(./vectors/1.svg);
        /* First semicircle - largest scale change */
        animation: breathe-large 4s ease-in-out infinite;
    }
    
    body #landing .header .half-circle:nth-child(2) {
        width: 27.969dvw;
        height: 13.958dvw;
        background-image: url(./vectors/2.svg);
        /* Second semicircle - medium scale change */
        animation: breathe-medium 4s ease-in-out infinite;
    }
    
    body #landing .header .half-circle:nth-child(3) {
        width: 22.448dvw;
        height: 11.198dvw;
        background-image: url(./vectors/3.svg);
        /* Third semicircle - smallest scale change */
        animation: breathe-small 4s ease-in-out infinite;
    }
    
    
    /* Define separate animations for each semicircle with uniform scaling */
    @keyframes breathe-large {
        0%, 100% {
            transform: translateX(-50%) scale(0.87);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Larger scale for the first semicircle */
        }
    }
    
    @keyframes breathe-medium {
        0%, 100% {
            transform: translateX(-50%) scale(0.82);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Medium scale for the second semicircle */
        }
    }
    
    @keyframes breathe-small {
        0%, 100% {
            transform: translateX(-50%) scale(0.78);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Smaller scale for the third semicircle */
        }
    }

    body #landing footer{ /* it is the footer */
        height: calc(96 / 1080 * 100%);
        width: 97.813%;
        background-color: var(--dark);
        border-radius: var(--30);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.094dvw;
        /* Add padding to help with vertical alignment */
        padding: 0.5dvw 0;
        box-sizing: border-box;
    }

    body #landing footer ul{
        width: 84.219dvw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        /* Remove any margin/padding */
        margin: 0;
        padding: 0;
    }

    body #landing footer ul li{
        font-family: Rag-Regular;
        font-weight: 100;
        font-size: 2.604dvw;
        color: var(--background);
        /* Add these properties for better vertical alignment */
        line-height: 1;
        padding-bottom: 0.3dvw; /* Add slight padding to shift text up */
        display: flex;
        align-items: center;
    }

    body #landing #holder{
        position: absolute;
        height:fit-content;
        width:fit-content;
        z-index: 100;
        right: calc(-50/1920*100dvw);
        bottom: calc(0/1920*100dvw);
    }

    body #landing #canvas {
        position: relative;
        height:17.195dvw;
        width:30.569dvw;
        
      }

      /*about page css*/
      body #about{
        display:flex;
        align-items: center;
        justify-content: center;
    }

    body #about .container{
        display:flex;
        align-items: center;
        justify-content: center;
        width: calc(1876.19/1920*100dvw);
        aspect-ratio:1876.19/1038;
        overflow: hidden;
        border-radius: var(--33);
        margin: calc(21/1920*100dvw) 0 calc(21/1920*100dvw) 0;   
    }

    body #about .container #box1{
        position: relative;
        height: 100%;
        width: 100%;
        transition: all 0.3s ease;
        overflow: hidden;
        background-image: url(./vectors/container.svg);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 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(49/1920*100dvw);
        margin-left: calc(33.65/1920*100dvw);
    }

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

    body #about .container #box1 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 #about .container #box1 nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

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

    body #about .container #box1 .header{
        position: relative;
        height:calc(287.91/1920*100dvw);
        width:calc(1795.02/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: calc(71.67/1920*100dvw);
        margin-left: calc(33.08/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head{
        position: absolute;
        width:calc(1330/1920*100dvw);
        height: 100%;
        left: 0;
    }

    body #about .container #box1 .header #intro-head h3{
        font-family: Rag-Regular;
        font-weight: 100;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(100/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head h2{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head p{
        color: var(--dark);
        width: calc(668/1920*100dvw);
        font-size:calc(30/1920*100dvw);
        font-weight: 100;
        margin-top:calc(13/1920*100dvw);
        height: fit-content;
        line-height:calc(35/1920*100dvw);
    }

    body #about .container #box1 .header #heart-holder{
        position: absolute;
        height: calc(274/1920*100dvw);
        width:calc(999/1920*100dvw);
        right: 0;
        display: grid;
        grid-template-columns: 57.5% 42.5%;
        border-radius: var(--33);
        background-image: url(./vectors/rectangle.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    body #about .container #box1 .header #heart-holder .left{
        height: calc(274/1920*100dvw);
        display: grid;
        grid-template-rows: 50% 50%;
    }

    body #about .container #box1 .header #heart-holder .left .up{
        width: 100%;  
    }

    body #about .container #box1 .header #heart-holder .left .down{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    body #about .container #box1 .header #heart-holder .left .down img {
        height:calc(55/1920*100dvw);
        width: calc(36.34/1920*100dvw);
        transition: transform 0.4s ease,
                    opacity 0.4s ease;
        transform-origin: center center;
        will-change: transform, opacity;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(1){
        margin-left:calc(80.65/1920*100dvw); 
        opacity:0.2;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(2){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.33;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(3){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.46;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(5){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.73;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(6){
        margin-left:calc(33.66/1920*100dvw);
        opacity: 0.86;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(7){
    margin-left:calc(37.66/1920*100dvw);
        opacity: 1;
    }

    body #about .container #box1 .header #heart-holder .right{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    } 

    body #about .container #box1 .header #heart-holder .right img{
        height: calc(333.26/1920*100dvw);
        width: calc(332.88/1920*100dvw);
        margin-top: calc(-35/1920*100dvw);
        filter: drop-shadow(0 0 1.563dvw rgba(0, 0, 0, 0.2));
        transition: transform 0.5s cubic-bezier(.45,0,.49,1.01) ;
    }

    body #about .container #box1 .header #heart-holder .right img:hover{
        transform: scale(1.1);
    }

    body #about .container #box1 .story{
        height:calc(423/1920*100dvw);
        width: calc(1793.66/1920*100dvw);
        display: flex;
        align-items: flex-end;
        justify-content: end;
        margin-top: calc(49/1920*100dvw);
        margin-left: calc(40.1/1920*100dvw);
    }

    body #about .container #box1 .story #script{
        height:calc(390.51/1920*100dvw);
        width: calc(1010.08/1920*100dvw);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    body #about .container #box1 .story #script .paragraph{
        height:fit-content;
        width: calc(1010.08/1920*100dvw);
        word-wrap: break-word;
        word-break:keep-all;
        font-size:calc(24.12/1920*100dvw);
        font-weight: 100;
        text-align: left;
        color: var(--dark);
        letter-spacing: 2%;
    }

    body #about .container #box1 .story #script .list{
        height: fit-content;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    body #about .container #box1 .story #script .list aside{
        height: fit-content;
        width: calc(266/1920*100dvw);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 .story #script .list aside h3{
        height: fit-content;
        width: fit-content;
        font-family: Rag-Bold;
        color: var(--dark);
        font-size: calc(88/1920*100dvw);
        line-height:calc(88/1920*100dvw); 
    }

    body #about .container #box1 .story #script .list aside:nth-child(2) h3{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #about .container #box1 .story #script .list aside h3 span{
        font-family: Rag-Bold;
        color: var(--dark);
        font-size: calc(56.69/1920*100dvw);
        line-height:calc(56.69/1920*100dvw);
    }

    body #about .container #box1 .story #script .list aside p{
        font-family: Rag-Regular;
        font-weight: 100;
        color: var(--dark);
        font-size: calc(27/1920*100dvw);
    }

    body #about .container #box1 article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        margin-left:calc(39.07/1920*100dvw);
        margin-top: calc(46.19/1920*100dvw);
    }

    body #about .container #box1 .wrapper{
        position: absolute;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        left: calc(40.1/1920*100dvw);
        top:calc(510/1920*100dvw);
        border-radius: var(--33);
    }

    body #about .container #box1 #box2 #up:hover,body #about .container #box1 #box2 #down:hover{
        transition: all 0.3s ease;
        background-color: var(--nav_hover);
    }

    body #about .container #box1 .wrapper .normal{
        transition: all 0.1ms ease;
        position: relative;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        background-image: url(./vectors/story.png);
        background-position: top;
        background-size: cover;
        border-radius: var(--33);
        overflow: hidden;
    }

    body #about .container #box1 .wrapper .normal #up{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        top: 0;
        right: 0;
    }

    body #about .container #box1 .small-wrapper{
        position: absolute;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        left: calc(40.1/1920*100dvw);
        top:calc(510/1920*100dvw);
        border-radius: var(--33);
    }

    body #about .container #box1 .hide{
        transition: all 0.1ms ease;
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: var(--33);
        background-image: url(./vectors/darkbackground.svg);
        background-position: top;
        background-size: cover;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        overflow: hidden;
    }

    body #about .container #box1 .hide #up{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        top: 0;
        right: 0;
        animation: rotate 0.5s ease reverse;
    }

    body #about .container #box1 .hide #down{
        display: none;
    }

    body #about .container #box1 .hide .wrap{
        display: none;
    }

    body #about .container #box1 .normal #down{
        display: none;

    }
    body #about .container #box1 .normal .wrap{
        display: none;
    }

    body #about .container #box1 .big-wrapper{
        position: absolute;
        display:flex;
        align-items: center;
        justify-content: center;
        width: calc(1876.19/1920*100dvw);
        aspect-ratio: 1876.19/1038;
        border-radius: var(--33);
       
    }

    body #about .container #box1 .visible{
        transition: all 0.1ms ease;
        position:relative;
        display: flex;
        flex-direction: column;
        border-radius: var(--33);
        height:calc(961.99/1920*100dvw) ;
        width:calc(1799/1920*100dvw);
        overflow: hidden;
        background-image: url(./vectors/darkbackground.svg);
        background-position:top;
        background-size: cover;
        background-repeat: no-repeat;
    }

    body #about .container #box1 .visible #up{
        display: none;
    }

    body #about .container #box1 .visible #down{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        transform: rotate(180deg);
        top: 0;
        right: 0;
        animation: rotate 0.5s ease forwards;
    }

    @keyframes rotate{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(180deg);
        }
    }

    body #about .container #box1 .visible .wrap{
        position: relative;
        height: fit-content;
        width: fit-content;
        animation: update 0.6s  cubic-bezier(.45,0,.49,1.01) reverse;
    }

    body #about .container #box1 .visible h2{
        font-family: Rag-Bold;
        font-size:calc(99/1920*100dvw);
        color: var(--background);
        margin-left:calc(78.5/1920*100dvw);
        margin-top:calc(73.86/1920*100dvw);
        height: fit-content;
        width: fit-content;
        line-height:calc(99/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction{
        height:calc(654.82/1920*100dvw);
        width:calc(1639.06/1920*100dvw);
        display: flex;
        justify-content: space-between;
        margin-left:calc(78.5/1920*100dvw);
        margin-top:calc(73.86/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder{
        height:calc(654.82/1920*100dvw);
        width:calc(1072.29/1920*100dvw);
        display: flex;
        flex-direction: column;
        justify-content: left;
    }

    body #about .container #box1 .visible .interaction .text-holder #paragraph{
        width:calc(1072.29/1920*100dvw);
        height: calc(400/1920*100dvw);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 .visible .interaction .text-holder  #paragraph span{
        font-size:calc(28.35/1920*100dvw);
        font-weight: 100;
        color: var(--background);
        word-wrap: break-word;
        word-break: keep-all;
        transition: all 0.5s ease;
    }

    body #about .container #box1 .visible .interaction .text-holder .white-box{
        position: relative;
        height:calc(67/1920*100dvw);
        width:calc(138/1920*100dvw);
        border-radius: var(--33);
        background-color: var(--background);
        margin-left:0.588dvw;
        margin-top: calc(70/1920*100dvw);
        z-index: 100;
        visibility: hidden;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover{
        height:calc(120.35/1920*100dvw);
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:calc(23.97/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box{
        position: relative;
        height:calc(120.35/1920*100dvw);
        width:calc(1039.37/1920*100dvw);
        display: grid;
        grid-template-rows: 38.34% 61.66%;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper{
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        border-bottom: 0.052dvw solid var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p{
        line-height: normal;
        height: fit-content;
        width: fit-content;
        font-family: Rag-Bold;
        font-size: calc(17.01/1920*100dvw);
        color: var(--background); 
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(1){
        margin-right:calc(84/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(2){
        margin-right:calc(81.3/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(3){
        margin-right:calc(92.57/1920*100dvw); 
    }

     body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(4){
        margin-right:calc(87.9/1920*100dvw);
    }

     body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(5){
        margin-right:calc(72.29/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower{
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p{
        height: fit-content;
        width: fit-content;
        text-align: center;
        font-family: Rag-Bold;
        font-size:calc(18/1920*100dvw);
        color: var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(1){
        margin-right: calc(73.47/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(2){
        margin-right: calc(76.75/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(3){
        margin-right: calc(97.81/1920*100dvw); 
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(4){
        margin-right: calc(89.99/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(5){
        margin-right: calc(71.37/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder{
        position: absolute;
        width: calc(907/1920*100dvw);
        height: calc(26/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-between;
        left:calc(67.37/1920*100dvw);
        top:calc(35.53/1920*100dvw);
        z-index: 100;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder #circle{
        height: calc(26/1920*100dvw);
        width: calc(26/1920*100dvw);
        border-radius: 50%;
        background-color: var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder #green-dot{
        position: absolute;
        height: calc(26/1920*100dvw);
        width: calc(26/1920*100dvw);
        border-radius: 50%;
        background-color: var(--green-dot);
        left: 0;
        transition: all 0.6s ease;
        z-index: 100;
    }

    body #about .container #box1 .visible .interaction .image{
        height:100% ;
        width:calc(517/1920*100dvw) ;
        display: flex;
        flex-direction: column;
        align-items:flex-end;
        justify-content: space-between;
    }

    body #about .container #box1 .visible .interaction .image .img{
        height: calc(517/1920*100dvw);
        width:calc(517/1920*100dvw) ;
        object-fit: cover;
        object-position: center;
        border-radius: var(--33);
        transition: all 0.3s ease;
        margin-top: calc(39/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .image article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw) ;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--background);
        opacity: 0.4;
        margin-left: 0.305vw;
        margin-top: 2.131dvw;
        font-weight: 100;
    }

    body #about .container .visible {
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: up 0.5s cubic-bezier(.22,0,.21,1.01) forwards,
                   svgupdate2 0.5s cubic-bezier(.22,0,.21,1.01)  forwards;
    }
    
    body #about .container .hide {
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: down 0.5s cubic-bezier(.22,0,.21,1.01) forwards,
                   svgupdate1 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
       
    }

    @keyframes svgupdate1{
        from{
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.669%{
            
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.67%{
            
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        to{
           background-image: url(./vectors/story.png);
           background-position:top;
           background-size: cover;
           background-repeat: no-repeat;
        }
    }

    @keyframes svgupdate2{
        from{
            
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.669%{
           
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.67%{
            
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        to{
        
           background-image: url(./vectors/darkbackground.svg);
           background-position:top;
           background-size: cover;
           background-repeat: no-repeat;
        }
    }
    
    
    
    body #about .container #box1 .visible .wrap {
        animation: update 0.5s cubic-bezier(.22,0,.21,1.01) reverse;
    }

    body #about .container #box1 .small-wrapper{
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: change2 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
    }

    body #about .container #box1 .big-wrapper{
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: change 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
    }

    @keyframes change {
        from{
            left: calc(40.1/1920*100dvw);
            top:calc(510/1920*100dvw);
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
        to{ 
            left: 0;
            top: 0;
            height:calc(1038/1920*100dvw);
            width: calc(1876.19/1920*100dvw);
            background-color: var(--background);
        }
    }

    @keyframes change2 {
        from{ 
            left: calc(40.1/1920*100dvw);
            top: calc(58/1920*100dvw);
            height:calc(1038/1920*100dvw);
            width: calc(1876.19/1920*100dvw);
        }

        to{
            left: calc(40.1/1920*100dvw);
            top:calc(510/1920*100dvw);
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
    }

    

    @keyframes update {
        from{
            opacity: 1;
        }
        to{
            opacity: 0;
        }
    }
    /* tried purpose*/
    


    @keyframes down {
        from{
            height:calc(961.99/1920*100dvw) ;
            width:calc(1799/1920*100dvw);
        }
        to{
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
    }

    @keyframes up {
        from{
            
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
        
        to{
        height:calc(961.99/1920*100dvw) ;
        width:calc(1799/1920*100dvw);
        }
    }

    /*product page css*/
    body #product{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #product .wrapper{
        width: 100%;
        aspect-ratio: 16/8.7;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-image: url(./vectors/productpage.svg);
        background-position: center;
        background-size: cover;
    }

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

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

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

    body #product .wrapper 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 #product .wrapper nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

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

    body #product .wrapper #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 #product .wrapper #intro .words{
        height: 100%;
        width: calc(1115/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
    }

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

    body #product .wrapper #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);
        margin-left:calc(5/1920*100dvw);
    }

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

    body #product .wrapper #intro .box {
        height: 4.271dvw;
        width: 19.216dvw;
        border-radius: 4.271dvw;
        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);
        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 #product .wrapper #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
        color: var(--dark);
    }

    body #product .wrapper .cover{
        height: calc(504/1920*100dvw);
        width:calc(1805/1920*100dvw);
        margin-left:calc(56/1920*100dvw);
        margin-top: calc(48.31/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: left;
        gap: calc(40.5/1920*100dvw);
    }

    body #product .wrapper .cover #img{
        position: relative;
        transition: all 0.6s ease;
        border-radius: var(--33);
    }

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

    body #product .wrapper .cover .img1{
        height:100%;
        width:calc(764.5/1920*100dvw);
    }

    body #product .wrapper .cover .img2{
        height:100%;
        width:calc(525.1/1920*100dvw);
    }

    body #product .wrapper .cover .img3{
        height:100%;
        width:calc(436.54/1920*100dvw);
    }

    body #product .wrapper .cover #img:hover{
        height:100%;
        width:calc(764.5/1920*100dvw);
    }

    body #product .wrapper .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 #product .wrapper .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 #product .wrapper .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 #product .wrapper .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 #product .wrapper 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);
    }

    body #product .wrapper 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 #product .wrapper footer .line{
        width:calc(1533/1920*100dvw);
        height: fit-content;
        border-top:calc(2/1920*100dvw) solid var(--border);
    }

    /*contact page css*/
    body #contact{
        background-color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder{
        width: 97.656dvw;
        aspect-ratio: 16/8.9;
        background-color: var(--dark);
        border-radius: var(--33);
        display:flex;
        align-items: center;
        justify-content: center;
        gap:calc(22.6/1920*100dvw);
        margin: calc(21/1920*100dvw) 0 calc(21/1920*100dvw) 0;
    }

    body #contact .holder #form-holder , body #contact .holder #figure{
        height:calc(987/1920*100dvw);
        width:41.068dvw;
        border-radius:var(--33);
        overflow-y: scroll;
    }

    body #contact .holder #figure{
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--33);
    }

    body #contact .holder #figure .heroback{
        width:100%;
        height:calc(614.5/1920*100dvw);
        background-image: url(./picture/hero_back.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        align-items: last baseline;
        overflow: hidden;
    }

    body #contact .holder #figure .image{
        width:calc(530/1920*100dvw);
        height:calc(530/1920*100dvw);
        border-radius: var(--33);
        display: flex;
        align-items: last baseline;
        overflow: hidden;
        margin-left: calc(114.7/1920*100dvw);
    }

    

    body #contact .holder #figure .info{
        height:calc(349/1920*100dvw);
        width:100%;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
        border-radius: var(--33);
        gap: calc(20/1920*100dvw);
    }

    body #contact .holder #figure .info section{
        height:calc(85/1920*100dvw);
        width:38.49dvw;
        background-color: var(--info);
        display:flex;
        align-items: center;
        justify-content: left;
        border-radius: var(--33);
    }

    body #contact .holder #figure .info section .img{
        height:2.083dvw;
        width:2.083dvw;
        border-radius: 50%;
        background-color: var(--background);
        margin-left: 1.191vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder #figure .info section .img img{
        height:1.51dvw;
        width:1.51dvw;
        border-radius: 50%;
        object-fit:contain;
        object-position: center;
    }

    

    body #contact .holder #figure .info section aside{
        display: flex;
        flex-direction: column;
        height: fit-content;
        width: fit-content;
        margin-left: 0.971vw;
    }

    body #contact .holder #figure .info section aside h2{
        font-size:calc(24/1920*100dvw);
        color:var(--black);
        font-weight: 100;
        line-height:calc(36/1920*100dvw);
    }

    body #contact .holder #figure .info section aside a{
        font-size:calc(17/1920*100dvw);
        color:var(--black);
        font-weight: 100;
        text-decoration: underline;
    }

    body #contact .holder #form-holder {
        background-color: var(--white);
    }

    body #contact .holder #form-holder h2{
        font-size:calc(28/1920*100dvw);
        color: var(--teal);
        font-weight: 100;
        margin-top: calc(43.41/1920*100dvw);
        margin-left:calc(43.41/1920*100dvw);
    }

    body #contact .holder #form-holder h3{
        font-size:calc(66/1920*100dvw);
        font-weight: 100;
        width: 36.146dvw;
        color: var(--black);
        margin-left: calc(43.41/1920*100dvw);
    }

    body #contact .holder #form-holder .cover{
        margin-left: calc(43.41/1920*100dvw);
        width: 36.578dvw;
        height:calc(101.66/1920*100dvw);
        border-bottom: 0.052dvw solid var(--border-contact);
        display: flex;
        align-items: first baseline;
        margin-top: calc(8.66/1920*100dvw);
    }

    body #contact .holder #form-holder .cover p{
        font-size: calc(24/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:calc(17/1920*100dvw);
    }

    body #contact .holder #form-holder .cover p span{
        font-size: calc(24/1920*100dvw);
        color: var(--black);
        line-height:calc(36/1920*100dvw);
        font-weight: 100;
    }

    body #contact .holder #form-holder form{
        margin-left: calc(43.41/1920*100dvw);
        height: fit-content;
        width: 36.563dvw;
        display: flex;
        flex-wrap:wrap;
        margin-top:calc(39/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes{
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        height: calc(110.88/1920*100dvw);
        width: 17.448dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(2){
        width: 18.229dvw;
       margin-left: calc(15/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(3){
        width: 100%;
        margin-top: calc(3.014/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(4){
        width: 100%;
        height:calc(185.38/1920*100dvw);
        margin-top: calc(3.014/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(5){
        width: 100%;
        height: calc(30/1920*100dvw);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: calc(13.32/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes label{
        font-size: calc(24/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        text-transform:capitalize;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) label{
        margin-left: 1.018dvw;
        font-size: 1.042dvw;
        
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) input[type="checkbox"]{
        height: calc(23.50/1920*100dvw);
        width: 1.224dvw;
        border-radius: var(--18);
    }

    body #contact .holder #form-holder form .boxes input{
        height:calc(72/1920*100dvw);
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 1.146dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:1.21dvw;
    }

    body #contact .holder #form-holder form .boxes input:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes input::placeholder{
        font-size: calc(22/1920*100dvw);
        font-weight: 100;
        text-transform: capitalize;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form .boxes textarea{
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        width: 100%;
        height:calc(149/1920*100dvw);
        font-size: 1.146dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:0.481dvw;
        padding-top:1.181dvw;
    }

    body #contact .holder #form-holder form .boxes textarea:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes textarea::placeholder{
        font-size: calc(22/1920*100dvw);
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form button{
        height:calc(72/1920*100dvw);
        width:100%;
        color:var(--white);
        border: none;
        background-color: var(--teal);
        font-size: 1.406dvw;
        font-weight: 100;
        border-radius: var(--18);
        margin-top: 0.556dvw;
       
    }

    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: 1024px) 
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait) {
    html{
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

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

    body .whole-wrapper{
        height:99.9svh;
        width: 100%;
        overflow-y: scroll;
        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{
        display: none !important;
    }

    body .handheld{
        display: flex !important;
        height:fit-content;
        width: 100%;
    }

    body #handheld-landing{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 1.667svw;
        overflow: hidden;
    }

    body #handheld-landing .header{
        width:91.66%;
        aspect-ratio: 0.58/1;
        background-image: url(./vectors/handheld_background.png);
        background-repeat: no-repeat; /* Prevent tiling */
        background-size:cover; /* Cover the entire section */
        background-position: center; /* Center the image */
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        overflow: hidden;
        border-radius: var(--33);
        margin-top: 3.488dvw; 
    }

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

    body #handheld-landing .header nav .logo{ /* anchor tag which contain the logo */
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #handheld-landing .header nav .logo #logo{ /*raisin pharma logo in navbar*/
        height:7.911dvw;
        width: 26.225dvw;
        object-fit: cover;
        object-position: center;
    }

    body #handheld-landing .header 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 #handheld-landing .header h2{
        font-family: Rag-Black;
        font-size:9.167dvw;
        color: var(--black);
        line-height:11.111dvw;
        text-align: center;
        margin-top:13.889dvw;

    }

    body #handheld-landing .header main{
        font-family: Rag-NarrowRegular;
        font-size: 5.464dvw;
        text-align: center;
        color: var(--black);
        margin-top: 8.333dvw;
        line-height:7.222dvw;
        width: 80%;
    }

    body #handheld-landing .header .btnholder{
        height: fit-content;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:9.647vw;
        gap: 2.5dvw;
    }

    body #handheld-landing .header .btnholder .btn{
        font-family: Rag-NarrowRegular;
        border: 0.278dvw solid ;
        height: 11.111dvw;
        width: 39.167dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4.356dvw;
        border-radius: 8.333dvw;
        font-weight: 200;
    }

    body #handheld-landing .header .btnholder a:nth-child(1) .btn{
        border: 0.278vw solid var(--dark);
        color: var(--dark);
    }

    body #handheld-landing .header .btnholder a:nth-child(2) .btn{
        border: 0.278vw solid var(--dark);
        color: var(--background);
        background-color: var(--dark);
    }

    body #handheld-landing .header #breathing{
        z-index: -1;
        height: fit-content;
        width: fit-content;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        transform: translateX(0);
      }
      
    body #handheld-landing .header .container {
          position: relative;
          width: 73.03dvw;
          height: 37.639dvw;
          display: flex;
          justify-content: center;
          align-items: flex-end;

          
        }

    body #handheld-landing .header .circles {
          position: absolute;
          bottom: 0;
          transition: transform 0.6s ease-in-out;
        }

    body #handheld-landing .header .half-circle {
          position: absolute;
          border-radius: 73.03vw 73.03vw 0 0;
          transform: translateX(-50%);
          bottom: 0;
          background-position: center;
          background-size: cover;
        }

    body #handheld-landing .header .half-circle:nth-child(1){
        width: 73.03dvw;
        height: 37.639dvw;
          background-image: url(./vectors/biggest{with\ the\ issue\ fized}.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(2) {
          width:69.776dvw;
          height:35.961dvw;
          background-image: url(./vectors/1.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(3) {
          width:58.273dvw;
          height:30.021dvw;
          background-image: url(./vectors/2.svg);
        }

    body #handheld-landing .header .half-circle:nth-child(4) {
          width:46.77dvw;
          height:24.085dvw;
          background-image: url(./vectors/3.svg);
        }
      
    @keyframes breathe {
          0%, 100% {
            transform: scale(0.8);
          }
          50% {
            transform: scale(0.9);
          }
      }

    body #handheld-landing #heart{
        position: absolute;
        width:60.833dvw;
        height: 60.903vw;
        bottom: 0.556dvw;
    }



    body #handheld-landing footer{
        width:91.66%;
        height: 11.111dvw;
        border-radius:3.333dvw;
        background-color: var(--dark);
        margin-bottom: 3.488dvw;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--background);
        font-family: Rag-NarrowRegular;
        text-transform: capitalize;
        font-size: 5.367dvw;
    }


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

    body #handheld-products .wrapper{
        width:91.66%;
        aspect-ratio:1/2;
        background-color: var(--background);
        border-radius: 5dvw;
        margin: 4.722dvw 4.722dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body #handheld-products .wrapper h2{
        font-family: Rag-Bold;
        font-size: 9.167dvw;
        color: var(--black);
        margin: 16.667dvw 0 0 5.833dvw;
        align-self: flex-start;
    }

    body #handheld-products .wrapper p{
        font-family: Rag-NarrowRegular;
        font-size: 5.556dvw;
        margin: 1.389dvw 0 0 6.258dvw;
        height: fit-content;
        width: fit-content;
        align-self: flex-start;
    }

    body #handheld-products .wrapper #med-box{
        height: fit-content;
        width:81.389dvw;
        display: flex;
        flex-wrap: wrap;
        gap: 4.167vw;
        margin-top: 4.972dvw;
    }

    body #handheld-products .wrapper #med-box img:nth-child(1){
        width: 100%;
        aspect-ratio: 293/151;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper #med-box img:nth-child(2){
        width:38.611dvw;
        aspect-ratio: 139/153;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper #med-box img:nth-child(3){
        width:38.611dvw;
        aspect-ratio: 139/153;
        border-radius: 5dvw;
        object-fit: cover;
        object-position: center;
        box-shadow: 0 0.833vw 2.222vw var(--black-opacity);
    }

    body #handheld-products .wrapper .btn{
        height: 10.878dvw;
        width: 52.567dvw;
        border: 0.278dvw solid var(--dark);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9.167dvw;
        font-family: Rag-NarrowRegular;
        font-size: 5.625dvw;
        margin-top: 7.908dvw;
        color: var(--dark);
    }


    body #handheld-about{  /*css of about page in mobile*/
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #handheld-about .wrapper{
        width:91.66%;
        aspect-ratio:1/2;
        background-color: var(--background);
        border-radius: 5dvw;
        margin: 4.722dvw 4.722dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body #handheld-about .wrapper h2:nth-child(1){
        font-weight: 100;
        font-size: 9.167dvw;
        text-align: center;
        color: var(--dark);
        margin-top: 11.111dvw;
    }

    body #handheld-about .wrapper h2:nth-child(2){
        font-family: Rag-Bold;
        font-size: 9.167dvw;
        text-align: center;
        color: var(--dark);
        margin-top: 4.722dvw;
        width: 55.556dvw;
        line-height: 11.111dvw;
    }

    body #handheld-about .wrapper p{
        width: 54.167dvw;
        text-align: center;
        font-size: 4.722dvw;
        height: fit-content;
        color: var(--dark);
        margin-top: 5.556dvw;
    }

    body #handheld-about .wrapper #img-holder{
        position:relative;
        width: 79.722dvw;
        height: 55.278dvw;
        border-radius: 9.167dvw;
        margin-top: 9.167dvw;
        background: linear-gradient(to bottom, rgb(0, 0, 0,0.5), rgb(0, 0, 0,0.5));
    }

    body #handheld-about .wrapper #img-holder::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 79.722dvw;
    height: 55.278dvw;
    border-radius: 9.167dvw;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5),rgba(255, 255, 255, 0));
    }

    body #handheld-about .wrapper #img-holder img{
        height: 100%;
        width: 100%;
        border-radius: 9.167dvw;
        overflow: hidden;
        transition: all 0.7s ease;
    }

    body #handheld-about .wrapper #img-holder .dot-holder{
        position:absolute;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 59.722dvw;
        height: 3.333vw;
        bottom:4.167vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 12;
    }

    body #handheld-about .wrapper #img-holder .dot-holder button{
        height:3.333vw;
        aspect-ratio: 1/1;
        border: none;
        border-radius: 50%;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    body #contact{
        display: flex !important;
        height: fit-content;
        width: 100%;
    }

    body #contact .holder{
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: fit-content;
        width: 100%;
        gap: 5.556dvw;
        background-color: var(--dark);
    }

    body #contact .holder #figure{
        height: fit-content;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--33);
        width: 91.66%;
    }

    body #contact .holder #figure .heroback{
       display: none;
    }

    body #contact .holder #figure .info{
        height:fit-content;
        width:100%;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
        border-radius: 4.167dvw;
        gap: 2.442dvw;
        margin-bottom: 4.167dvw;
        padding: 3.056vw 0 ;
    }

    body #contact .holder #figure .info section{
        height:13.889dvw;
        width:95%;
        background-color: var(--info);
        display:flex;
        align-items: center;
        justify-content: left;
        border-radius: 2.222vw;
    }

    body #contact .holder #figure .info section .img{
        width:10.556vw;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background-color: var(--background);
        margin-left: 3.056dvw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder #figure .info section .img img{
        width:6.944vw;
        aspect-ratio: 1/1;
        object-fit:contain;
        object-position: center;
    }

    body #contact .holder #figure .info section aside{
        display: flex;
        flex-direction: column;
        height: fit-content;
        width: fit-content;
        margin-left: 2.222vw;
    }

    body #contact .holder #figure .info section aside h2{
        font-size:3.889dvw;
        color:var(--black);
        font-weight: 100;
        line-height:3.889vw;
    }

    body #contact .holder #figure .info section aside a{
        font-size:2.867vw;
        color:var(--black);
        font-weight: 100;
        text-decoration: underline;
    }



    body #contact .holder #form-holder{
        height: fit-content;
        width: 91.66%;
        background-color: var(--white);
        border-radius: 4.167dvw;
        overflow: hidden;
        margin-top:4.167dvw;
        display: flex;
        flex-direction: column;
    }

    body #contact .holder #form-holder h2{
        font-size:7.311vw;
        color: var(--teal);
        font-weight: 100;
        margin:6.944vw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder h3{
        font-size:9.167dvw;
        font-weight: 100;
        width: 80dvw;
        color: var(--black);
        margin:0.556dvw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder .cover{
        width: 80dvw;
        height:27.222vw;
        border-bottom: 0.417dvw solid var(--border-contact);
        display: flex;
        align-items: first baseline;
        margin:6.944dvw 0 0 5.556dvw;
    }

    body #contact .holder #form-holder .cover p{
        font-size: 4.444dvw;
        font-weight: 100;
        color: var(--black);
        line-height:4.533dvw;
    }

    body #contact .holder #form-holder .cover p span{
        font-size: 4.444dvw;
        color: var(--black);
        line-height:4.533dvw;
        font-weight: 100;
    }

    body #contact .holder #form-holder form{
        height: fit-content;
        width: 80dvw;
        display: flex;
        flex-wrap:wrap;
        gap: 3.611dvw;
        margin:8.333dvw 0 6.111vw 5.556dvw;
    }

    body #contact .holder #form-holder form .boxes{
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        justify-content: space-between;
        height:18.889dvw;
        width: 80dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(4){
        width: 100%;
        height:42.778dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5){
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        gap: 1.944dvw;
    }

    body #contact .holder #form-holder form .boxes label{
        font-size: 4.672dvw;
        font-weight: 100;
        color: var(--black);
        text-transform:capitalize;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) label{
        font-size: 3.783dvw; 
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) input[type="checkbox"]{
        height: 4.722dvw;
        width: 4.722dvw;
        border-radius: 1.111dvw;
    }

    body #contact .holder #form-holder form .boxes input{
        height:10.278dvw;
        background-color: var(--background);
        border: none;
        border-radius: 2.222dvw;
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 3.889dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:2.222vw;
    }

    body #contact .holder #form-holder form .boxes input:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes input::placeholder{
        font-size: 3.889dvw;
        font-weight: 100;
        text-transform: capitalize;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form .boxes textarea{
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        width: 100%;
        height:35dvw;
        font-size: 3.889dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:2.222vw;
        padding-top:1.389vw;
    }

    body #contact .holder #form-holder form .boxes textarea:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes textarea::placeholder{
        font-size: 3.889dvw;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form button{
        height:10.278dvw;
        width:100%;
        color:var(--white);
        border: none;
        background-color: var(--teal);
        font-size: 4.256dvw;
        font-weight: 100;
        border-radius: 2.222dvw;
        margin-top: 5dvw;
       
    }

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

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


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

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

    body .handheld{
        display: none !important;
        height:fit-content;
        width: 100%; 

    }

    

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

    /*landing page css*/
    body #landing{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 0.729svw;
        overflow: hidden;    
    }

    body #landing .header { /* Header contains all */
        width: 97.813%;
        aspect-ratio: 16/7.5;
        border-radius: var(--33);
        background-image: url(./vectors/background.svg);
        background-repeat: no-repeat; /* Prevent tiling */
        background-size:cover; /* Cover the entire section */
        background-position:bottom right; /* Center the image */
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        margin-top:1.094vw;
    }

    body #landing .header nav{ /*nav bar of the landing page*/
        height: 2.708dvw;
        width: 95.637%;
        display: flex;
        flex-direction: row;
        align-items:flex-end;
        justify-content: space-between;
        margin-top: 1.51svw;
        margin-left: 1.799svw;
    }

    body #landing .header nav .logo{ /* anchor tag which contain the logo */
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .header nav .logo #logo{ /*raisin pharma logo in navbar*/
        height: 2.708dvw;
        width: 8.964dvw;
        object-fit: cover;
        object-position: center;
    }

    body #landing .header nav ul{ /* navigation link holder*/
        height: 2.188dvw;
        width: fit-content;
        gap: calc(12/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    body #landing .header nav ul li{
        font-family: Rag-NarrowRegular;
        font-size: 1.441dvw;
        color: var(--black-opacity);
    }

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

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

    body #landing .header #intro{ /* introduction box contains h1 div h2 and div#dot */
        max-width: 95dvw;
        min-width: 85dvw;
        height: 19.116dvw;
        margin-left: 1.888dvw;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        margin-top: 3.2dvw;
         
    }
    

    body #landing .header #intro h1{  /* introduction box's h1 */
        font-family: Rag-NarrowRegular;
        font-size: calc(198.47/1920*100dvw);
        line-height: calc(154.80/1920*100dvw);
        text-align: left;
        color: var(--black);
    }

    body #landing .header #intro .box {
        height: 4.271dvw;
        width: 19.216dvw;
        border-radius: 4.271dvw;
        background-color: var(--dark);
        border: calc(3/1920*100dvw) solid transparent;  
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10.943dvw;
        margin-top: 1.943dvw;
        transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out; 
    }
    
    body #landing .header #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
    }
    
    body #landing .header #intro .box p {
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Rag-NarrowRegular;
        font-size: 2.21dvw;
        color: var(--background);
        transition: color 0.12s ease; 

    }
    
    body #landing .header #intro .box:hover p {
        color: var(--dark);
    }

    body #landing .header #intro h2{ /* introduction box's h2 */
        font-family: Rag-NarrowRegular;
        font-size: calc(198.47/1920*100dvw);
        line-height: calc(198.47/1920*100dvw);
        letter-spacing:calc(10/1920*100dvw);
        color: var(--black);
        text-align: left;
        text-size-adjust:auto;
        margin-top:calc(25/1920*100vw);
    }

    body #landing .header #intro .extra{
        height: fit-content;
        width:fit-content;
        display: flex;
    }


    body #landing .header #intro #dot{ /* introduction box's dot */
        height:1.823dvw ;
        width: 1.823dvw;
        background-color: var(--dark);
        border-radius: 50%;
        align-self: last baseline;
        margin-bottom:calc(20/1920*100dvw);
    }

    body #landing .header main{   /*main tag, comes after intro box*/
        font-family:Rag-NarrowRegular;
        font-size: 1.302dvw;
        text-transform: lowercase;
        word-wrap: break-word;
        word-break: keep-all;
        width: 22.76dvw;
        height: fit-content;
        margin-left: 13.831dvw;
        margin-top: 5.365dvw;
        color: var(--black-opacity);
    }

    body #landing .header article{  /*article tag, comes after main tag*/
        position: absolute;
        font-family:Rag-NarrowRegular;
        font-size:1.006dvw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        left: 2.083dvw;
        bottom: 1.126vw;
        color: var(--black-opacity);
    }

    body #landing .header #breathing {
        z-index: -1;
        height: fit-content;
        width: fit-content;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: calc(1089/1920*100dvw);
    }
      
    body #landing .header .container {
        position: relative;
        width: 35.052dvw;
        height: 17.5dvw;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    
    body #landing .header .circles {
        position: absolute;
        bottom: 0;
        transition: all 0.6s ease-in-out;
    }
    
    body #landing .header .half-circle {
        position: absolute;
        border-radius: 15.625dvw 15.625dvw 0 0;
        transform: translateX(-50%); 
        bottom: 0;
        background-position: center;
        background-size: cover;
        /* Set transform origin to bottom center to keep the baseline alignment */
        transform-origin: bottom center;
    }
    
    body #landing .header .half-circle:nth-child(1) {
        width: 33.49dvw;
        height: 16.719dvw;
        background-image: url(./vectors/1.svg);
        /* First semicircle - largest scale change */
        animation: breathe-large 4s ease-in-out infinite;
    }
    
    body #landing .header .half-circle:nth-child(2) {
        width: 27.969dvw;
        height: 13.958dvw;
        background-image: url(./vectors/2.svg);
        /* Second semicircle - medium scale change */
        animation: breathe-medium 4s ease-in-out infinite;
    }
    
    body #landing .header .half-circle:nth-child(3) {
        width: 22.448dvw;
        height: 11.198dvw;
        background-image: url(./vectors/3.svg);
        /* Third semicircle - smallest scale change */
        animation: breathe-small 4s ease-in-out infinite;
    }
    
    
    /* Define separate animations for each semicircle with uniform scaling */
    @keyframes breathe-large {
        0%, 100% {
            transform: translateX(-50%) scale(0.87);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Larger scale for the first semicircle */
        }
    }
    
    @keyframes breathe-medium {
        0%, 100% {
            transform: translateX(-50%) scale(0.82);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Medium scale for the second semicircle */
        }
    }
    
    @keyframes breathe-small {
        0%, 100% {
            transform: translateX(-50%) scale(0.78);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Smaller scale for the third semicircle */
        }
    }
    

    body #landing footer{ /* it is the footer */
        height: calc(96 / 1080 * 100%);
        width: 97.813%;
        background-color: var(--dark);
        border-radius: var(--30);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.094dvw;
        /* Add padding to help with vertical alignment */
        padding: 0.5dvw 0;
        box-sizing: border-box;
    }
    
    body #landing footer ul{
        width: 84.219dvw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        /* Remove any margin/padding */
        margin: 0;
        padding: 0;
    }

    body #landing footer ul li{
        font-family: Rag-Regular;
        font-weight: 100;
        font-size: 2.604dvw;
        color: var(--background);
        /* Add these properties for better vertical alignment */
        line-height: 1;
        padding-bottom: 0.3dvw; /* Add slight padding to shift text up */
        display: flex;
        align-items: center;
    }

    body #landing #holder{
        position: absolute;
        height:17.195dvw;
        width:30.569dvw;
        z-index: 400;
        right: calc(-50/1920*100dvw);
        bottom: calc(0/1920*100dvw);
    }

    body #landing #canvas {
        position: relative;
        height:17.195dvw;
        width:30.569dvw;
        
      }

      /*about page css*/
      body #about{
        display:flex;
        align-items: center;
        justify-content: center;
    }

    body #about .container{
        display:flex;
        align-items: center;
        justify-content: center;
        width: calc(1876.19/1920*100dvw);
        aspect-ratio:1876.19/1038;
        overflow: hidden;
        border-radius: var(--33);
        margin: calc(21/1920*100dvw) 0 calc(21/1920*100dvw) 0;   
    }

    body #about .container #box1{
        position: relative;
        height: 100%;
        width: 100%;
        transition: all 0.3s ease;
        overflow: hidden;
        background-image: url(./vectors/container.svg);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 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(49/1920*100dvw);
        margin-left: calc(33.65/1920*100dvw);
    }

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

    body #about .container #box1 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 #about .container #box1 nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

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

    body #about .container #box1 .header{
        position: relative;
        height:calc(287.91/1920*100dvw);
        width:calc(1795.02/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: calc(71.67/1920*100dvw);
        margin-left: calc(33.08/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head{
        position: absolute;
        width:calc(1330/1920*100dvw);
        height: 100%;
        left: 0;
    }

    body #about .container #box1 .header #intro-head h3{
        font-family: Rag-Regular;
        font-weight: 100;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(100/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head h2{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head p{
        color: var(--dark);
        width: calc(668/1920*100dvw);
        font-size:calc(30/1920*100dvw);
        font-weight: 100;
        margin-top:calc(13/1920*100dvw);
        height: fit-content;
        line-height:calc(35/1920*100dvw);
    }

    body #about .container #box1 .header #heart-holder{
        position: absolute;
        height: calc(274/1920*100dvw);
        width:calc(999/1920*100dvw);
        right: 0;
        display: grid;
        grid-template-columns: 57.5% 42.5%;
        border-radius: var(--33);
        background-image: url(./vectors/rectangle.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    body #about .container #box1 .header #heart-holder .left{
        height: calc(274/1920*100dvw);
        display: grid;
        grid-template-rows: 50% 50%;
    }

    body #about .container #box1 .header #heart-holder .left .up{
        width: 100%;  
    }

    body #about .container #box1 .header #heart-holder .left .down{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    body #about .container #box1 .header #heart-holder .left .down img {
        height:calc(55/1920*100dvw);
        width: calc(36.34/1920*100dvw);
        transition: transform 0.4s ease,
                    opacity 0.4s ease;
        transform-origin: center center;
        will-change: transform, opacity;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(1){
        margin-left:calc(80.65/1920*100dvw); 
        opacity:0.2;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(2){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.33;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(3){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.46;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(4){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.6;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(5){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.73;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(6){
        margin-left:calc(33.66/1920*100dvw);
        opacity: 0.86;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(7){
    margin-left:calc(37.66/1920*100dvw);
        opacity: 1;
    }

    body #about .container #box1 .header #heart-holder .right{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    } 

    body #about .container #box1 .header #heart-holder .right img{
        height: calc(333.26/1920*100dvw);
        width: calc(332.88/1920*100dvw);
        margin-top: calc(-35/1920*100dvw);
        filter: drop-shadow(0 0 1.563dvw rgba(0, 0, 0, 0.2));
        transition: transform 0.5s cubic-bezier(.45,0,.49,1.01) ;
    }

    body #about .container #box1 .header #heart-holder .right img:hover{
        transform: scale(1.1);
    }

    body #about .container #box1 .story{
        height:calc(423/1920*100dvw);
        width: calc(1793.66/1920*100dvw);
        display: flex;
        align-items: flex-end;
        justify-content: end;
        margin-top: calc(49/1920*100dvw);
        margin-left: calc(40.1/1920*100dvw);
    }

    body #about .container #box1 .story #script{
        height:calc(390.51/1920*100dvw);
        width: calc(1010.08/1920*100dvw);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    body #about .container #box1 .story #script .paragraph{
        height:fit-content;
        width: calc(1010.08/1920*100dvw);
        word-wrap: break-word;
        word-break:keep-all;
        font-size:calc(24.12/1920*100dvw);
        font-weight: 100;
        text-align: left;
        color: var(--dark);
        letter-spacing: 2%;
    }

    body #about .container #box1 .story #script .list{
        height: fit-content;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    body #about .container #box1 .story #script .list aside{
        height: fit-content;
        width: calc(266/1920*100dvw);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 .story #script .list aside h3{
        height: fit-content;
        width: fit-content;
        font-family: Rag-Bold;
        color: var(--dark);
        font-size: calc(88/1920*100dvw);
        line-height:calc(88/1920*100dvw); 
    }

    body #about .container #box1 .story #script .list aside:nth-child(2) h3{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #about .container #box1 .story #script .list aside h3 span{
        font-family: Rag-Bold;
        color: var(--dark);
        font-size: calc(56.69/1920*100dvw);
        line-height:calc(56.69/1920*100dvw);
    }

    body #about .container #box1 .story #script .list aside p{
        font-family: Rag-Regular;
        font-weight: 100;
        color: var(--dark);
        font-size: calc(27/1920*100dvw);
    }

    body #about .container #box1 article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        margin-left:calc(39.07/1920*100dvw);
        margin-top: calc(46.19/1920*100dvw);
    }

    body #about .container #box1 .wrapper{
        position: absolute;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        left: calc(40.1/1920*100dvw);
        top:calc(510/1920*100dvw);
        border-radius: var(--33);
    }

    body #about .container #box1 #box2 #up:hover,body #about .container #box1 #box2 #down:hover{
        transition: all 0.3s ease;
        background-color: var(--nav_hover);
    }

    body #about .container #box1 .wrapper .normal{
        transition: all 0.1ms ease;
        position: relative;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        background-image: url(./vectors/story.png);
        background-position: top;
        background-size: cover;
        border-radius: var(--33);
        overflow: hidden;
    }

    body #about .container #box1 .wrapper .normal #up{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        top: 0;
        right: 0;
    }

    body #about .container #box1 .small-wrapper{
        position: absolute;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        left: calc(40.1/1920*100dvw);
        top:calc(510/1920*100dvw);
        border-radius: var(--33);
    }

    body #about .container #box1 .hide{
        transition: all 0.1ms ease;
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: var(--33);
        background-image: url(./vectors/darkbackground.svg);
        background-position: top;
        background-size: cover;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        overflow: hidden;
    }

    body #about .container #box1 .hide #up{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        top: 0;
        right: 0;
        animation: rotate 0.5s ease reverse;
    }

    body #about .container #box1 .hide #down{
        display: none;
    }

    body #about .container #box1 .hide .wrap{
        display: none;
    }

    body #about .container #box1 .normal #down{
        display: none;

    }
    body #about .container #box1 .normal .wrap{
        display: none;
    }

    body #about .container #box1 .big-wrapper{
        position: absolute;
        display:flex;
        align-items: center;
        justify-content: center;
        width: calc(1876.19/1920*100dvw);
        aspect-ratio: 1876.19/1038;
        border-radius: var(--33);
       
    }

    body #about .container #box1 .visible{
        transition: all 0.1ms ease;
        position:relative;
        display: flex;
        flex-direction: column;
        border-radius: var(--33);
        height:calc(961.99/1920*100dvw) ;
        width:calc(1799/1920*100dvw);
        overflow: hidden;
        background-image: url(./vectors/darkbackground.svg);
        background-position:top;
        background-size: cover;
        background-repeat: no-repeat;
    }

    body #about .container #box1 .visible #up{
        display: none;
    }

    body #about .container #box1 .visible #down{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        transform: rotate(180deg);
        top: 0;
        right: 0;
        animation: rotate 0.5s ease forwards;
    }

    @keyframes rotate{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(180deg);
        }
    }

    body #about .container #box1 .visible .wrap{
        position: relative;
        height: fit-content;
        width: fit-content;
        animation: update 0.6s  cubic-bezier(.45,0,.49,1.01) reverse;
    }

    body #about .container #box1 .visible h2{
        font-family: Rag-Bold;
        font-size:calc(99/1920*100dvw);
        color: var(--background);
        margin-left:calc(78.5/1920*100dvw);
        margin-top:calc(73.86/1920*100dvw);
        height: fit-content;
        width: fit-content;
        line-height:calc(99/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction{
        height:calc(654.82/1920*100dvw);
        width:calc(1639.06/1920*100dvw);
        display: flex;
        justify-content: space-between;
        margin-left:calc(78.5/1920*100dvw);
        margin-top:calc(73.86/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder{
        height:calc(654.82/1920*100dvw);
        width:calc(1072.29/1920*100dvw);
        display: flex;
        flex-direction: column;
        justify-content: left;
    }

    body #about .container #box1 .visible .interaction .text-holder #paragraph{
        width:calc(1072.29/1920*100dvw);
        height: calc(400/1920*100dvw);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 .visible .interaction .text-holder  #paragraph span{
        font-size:calc(28.35/1920*100dvw);
        font-weight: 100;
        color: var(--background);
        word-wrap: break-word;
        word-break: keep-all;
        transition: all 0.5s ease;
    }

    body #about .container #box1 .visible .interaction .text-holder .white-box{
        position: relative;
        height:calc(67/1920*100dvw);
        width:calc(138/1920*100dvw);
        border-radius: var(--33);
        background-color: var(--background);
        margin-left:0.588dvw;
        margin-top: calc(70/1920*100dvw);
        z-index: 100;
        visibility: hidden;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover{
        height:calc(120.35/1920*100dvw);
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:calc(23.97/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box{
        position: relative;
        height:calc(120.35/1920*100dvw);
        width:calc(1039.37/1920*100dvw);
        display: grid;
        grid-template-rows: 38.34% 61.66%;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper{
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        border-bottom: 0.052dvw solid var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p{
        line-height: normal;
        height: fit-content;
        width: fit-content;
        font-family: Rag-Bold;
        font-size: calc(17.01/1920*100dvw);
        color: var(--background); 
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(1){
        margin-right:calc(84/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(2){
        margin-right:calc(81.3/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(3){
        margin-right:calc(92.57/1920*100dvw); 
    }

     body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(4){
        margin-right:calc(87.9/1920*100dvw);
    }

     body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(5){
        margin-right:calc(72.29/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower{
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p{
        height: fit-content;
        width: fit-content;
        text-align: center;
        font-family: Rag-Bold;
        font-size:calc(18/1920*100dvw);
        color: var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(1){
        margin-right: calc(73.47/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(2){
        margin-right: calc(76.75/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(3){
        margin-right: calc(97.81/1920*100dvw); 
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(4){
        margin-right: calc(89.99/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(5){
        margin-right: calc(71.37/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder{
        position: absolute;
        width: calc(907/1920*100dvw);
        height: calc(26/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-between;
        left:calc(67.37/1920*100dvw);
        top:calc(35.53/1920*100dvw);
        z-index: 100;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder #circle{
        height: calc(26/1920*100dvw);
        width: calc(26/1920*100dvw);
        border-radius: 50%;
        background-color: var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder #green-dot{
        position: absolute;
        height: calc(26/1920*100dvw);
        width: calc(26/1920*100dvw);
        border-radius: 50%;
        background-color: var(--green-dot);
        left: 0;
        transition: all 0.6s ease;
        z-index: 100;
    }

    body #about .container #box1 .visible .interaction .image{
        height:100% ;
        width:calc(517/1920*100dvw) ;
        display: flex;
        flex-direction: column;
        align-items:flex-end;
        justify-content: space-between;
    }

    body #about .container #box1 .visible .interaction .image .img{
        height: calc(517/1920*100dvw);
        width:calc(517/1920*100dvw) ;
        object-fit: cover;
        object-position: center;
        border-radius: var(--33);
        transition: all 0.3s ease;
        margin-top: calc(39/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .image article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw) ;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--background);
        opacity: 0.4;
        margin-left: 0.305vw;
        margin-top: 2.131dvw;
        font-weight: 100;
    }

    body #about .container .visible {
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: up 0.5s cubic-bezier(.22,0,.21,1.01) forwards,
                   svgupdate2 0.5s cubic-bezier(.22,0,.21,1.01)  forwards;
    }
    
    body #about .container .hide {
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: down 0.5s cubic-bezier(.22,0,.21,1.01) forwards,
                   svgupdate1 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
       
    }

    @keyframes svgupdate1{
        from{
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.669%{
            
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.67%{
            
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        to{
           background-image: url(./vectors/story.png);
           background-position:top;
           background-size: cover;
           background-repeat: no-repeat;
        }
    }

    @keyframes svgupdate2{
        from{
            
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.669%{
           
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.67%{
            
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        to{
        
           background-image: url(./vectors/darkbackground.svg);
           background-position:top;
           background-size: cover;
           background-repeat: no-repeat;
        }
    }
    
    
    
    body #about .container #box1 .visible .wrap {
        animation: update 0.5s cubic-bezier(.22,0,.21,1.01) reverse;
    }

    body #about .container #box1 .small-wrapper{
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: change2 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
    }

    body #about .container #box1 .big-wrapper{
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: change 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
    }

    @keyframes change {
        from{
            left: calc(40.1/1920*100dvw);
            top:calc(510/1920*100dvw);
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
        to{ 
            left: 0;
            top: 0;
            height:calc(1038/1920*100dvw);
            width: calc(1876.19/1920*100dvw);
            background-color: var(--background);
        }
    }

    @keyframes change2 {
        from{ 
            left: calc(40.1/1920*100dvw);
            top: calc(58/1920*100dvw);
            height:calc(1038/1920*100dvw);
            width: calc(1876.19/1920*100dvw);
        }

        to{
            left: calc(40.1/1920*100dvw);
            top:calc(510/1920*100dvw);
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
    }

    

    @keyframes update {
        from{
            opacity: 1;
        }
        to{
            opacity: 0;
        }
    }
    /* tried purpose*/
    


    @keyframes down {
        from{
            height:calc(961.99/1920*100dvw) ;
            width:calc(1799/1920*100dvw);
        }
        to{
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
    }

    @keyframes up {
        from{
            
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
        
        to{
        height:calc(961.99/1920*100dvw) ;
        width:calc(1799/1920*100dvw);
        }
    }

    /*product page css*/
    body #product{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #product .wrapper{
        width: 100%;
        aspect-ratio: 16/8.7;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-image: url(./vectors/productpage.svg);
        background-position: center;
        background-size: cover;
    }

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

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

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

    body #product .wrapper 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 #product .wrapper nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

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

    body #product .wrapper #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 #product .wrapper #intro .words{
        height: 100%;
        width: calc(1115/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
    }

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

    body #product .wrapper #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);
        margin-left:calc(5/1920*100dvw);
    }

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

    body #product .wrapper #intro .box {
        height: 4.271dvw;
        width: 19.216dvw;
        border-radius: 4.271dvw;
        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);
        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 #product .wrapper #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
        color: var(--dark);
    }

    body #product .wrapper .cover{
        height: calc(504/1920*100dvw);
        width:calc(1805/1920*100dvw);
        margin-left:calc(56/1920*100dvw);
        margin-top: calc(48.31/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: left;
        gap: calc(40.5/1920*100dvw);
    }

    body #product .wrapper .cover #img{
        position: relative;
        transition: all 0.6s ease;
        border-radius: var(--33);
    }

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

    body #product .wrapper .cover .img1{
        height:100%;
        width:calc(764.5/1920*100dvw);
    }

    body #product .wrapper .cover .img2{
        height:100%;
        width:calc(525.1/1920*100dvw);
    }

    body #product .wrapper .cover .img3{
        height:100%;
        width:calc(436.54/1920*100dvw);
    }

    body #product .wrapper .cover #img:hover{
        height:100%;
        width:calc(764.5/1920*100dvw);
    }

    body #product .wrapper .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 #product .wrapper .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 #product .wrapper .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 #product .wrapper .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 #product .wrapper 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);
    }

    body #product .wrapper 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 #product .wrapper footer .line{
        width:calc(1533/1920*100dvw);
        height: fit-content;
        border-top:calc(2/1920*100dvw) solid var(--border);
    }

    /*contact page css*/
    body #contact{
        background-color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder{
        width: 97.656dvw;
        aspect-ratio: 16/8.9;
        background-color: var(--dark);
        border-radius: var(--33);
        display:flex;
        align-items: center;
        justify-content: center;
        gap:calc(22.6/1920*100dvw);
        margin: calc(21/1920*100dvw) 0 calc(21/1920*100dvw) 0;
    }

    body #contact .holder #form-holder , body #contact .holder #figure{
        height:calc(987/1920*100dvw);
        width:41.068dvw;
        border-radius:var(--33);
        overflow-y: scroll;
    }

    body #contact .holder #figure{
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--33);
    }

    body #contact .holder #figure .heroback{
        width:100%;
        height:calc(614.5/1920*100dvw);
        background-image: url(./picture/hero_back.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        align-items: last baseline;
        overflow: hidden;
    }

    body #contact .holder #figure .image{
        width:calc(530/1920*100dvw);
        height:calc(530/1920*100dvw);
        border-radius: var(--33);
        display: flex;
        align-items: last baseline;
        overflow: hidden;
        margin-left: calc(114.7/1920*100dvw);
    }

    

    body #contact .holder #figure .info{
        height:calc(349/1920*100dvw);
        width:100%;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
        border-radius: var(--33);
        gap: calc(20/1920*100dvw);
    }

    body #contact .holder #figure .info section{
        height:calc(85/1920*100dvw);
        width:38.49dvw;
        background-color: var(--info);
        display:flex;
        align-items: center;
        justify-content: left;
        border-radius: var(--33);
    }

    body #contact .holder #figure .info section .img{
        height:2.083dvw;
        width:2.083dvw;
        border-radius: 50%;
        background-color: var(--background);
        margin-left: 1.191vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder #figure .info section .img img{
        height:1.51dvw;
        width:1.51dvw;
        object-fit:contain;
        object-position: center;
    }

    

    body #contact .holder #figure .info section aside{
        display: flex;
        flex-direction: column;
        height: fit-content;
        width: fit-content;
        margin-left: 0.971vw;
    }

    body #contact .holder #figure .info section aside h2{
        font-size:calc(24/1920*100dvw);
        color:var(--black);
        font-weight: 100;
        line-height:calc(36/1920*100dvw);
    }

    body #contact .holder #figure .info section aside a{
        font-size:calc(17/1920*100dvw);
        color:var(--black);
        font-weight: 100;
        text-decoration: underline;
    }

    body #contact .holder #form-holder {
        background-color: var(--white);
    }

    body #contact .holder #form-holder h2{
        font-size:calc(28/1920*100dvw);
        color: var(--teal);
        font-weight: 100;
        margin-top: calc(43.41/1920*100dvw);
        margin-left:calc(43.41/1920*100dvw);
    }

    body #contact .holder #form-holder h3{
        font-size:calc(66/1920*100dvw);
        font-weight: 100;
        width: 36.146dvw;
        color: var(--black);
        margin-left: calc(43.41/1920*100dvw);
    }

    body #contact .holder #form-holder .cover{
        margin-left: calc(43.41/1920*100dvw);
        width: 36.578dvw;
        height:calc(101.66/1920*100dvw);
        border-bottom: 0.052dvw solid var(--border-contact);
        display: flex;
        align-items: first baseline;
        margin-top: calc(8.66/1920*100dvw);
    }

    body #contact .holder #form-holder .cover p{
        font-size: calc(24/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:calc(17/1920*100dvw);
    }

    body #contact .holder #form-holder .cover p span{
        font-size: calc(24/1920*100dvw);
        color: var(--black);
        line-height:calc(36/1920*100dvw);
        font-weight: 100;
    }

    body #contact .holder #form-holder form{
        margin-left: calc(43.41/1920*100dvw);
        height: fit-content;
        width: 36.563dvw;
        display: flex;
        flex-wrap:wrap;
        margin-top:calc(39/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes{
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        height: calc(110.88/1920*100dvw);
        width: 17.448dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(2){
        width: 18.229dvw;
       margin-left: calc(15/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(3){
        width: 100%;
        margin-top: calc(3.014/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(4){
        width: 100%;
        height:calc(185.38/1920*100dvw);
        margin-top: calc(3.014/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(5){
        width: 100%;
        height: calc(30/1920*100dvw);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: calc(13.32/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes label{
        font-size: calc(24/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        text-transform:capitalize;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) label{
        margin-left: 1.018dvw;
        font-size: 1.042dvw;
        
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) input[type="checkbox"]{
        height: calc(23.50/1920*100dvw);
        width: 1.224dvw;
        border-radius: var(--18);
    }

    body #contact .holder #form-holder form .boxes input{
        height:calc(72/1920*100dvw);
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 1.146dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:1.21dvw;
    }

    body #contact .holder #form-holder form .boxes input:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes input::placeholder{
        font-size: calc(22/1920*100dvw);
        font-weight: 100;
        text-transform: capitalize;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form .boxes textarea{
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        width: 100%;
        height:calc(149/1920*100dvw);
        font-size: 1.146dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:0.481dvw;
        padding-top:1.181dvw;
    }

    body #contact .holder #form-holder form .boxes textarea:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes textarea::placeholder{
        font-size: calc(22/1920*100dvw);
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form button{
        height:calc(72/1920*100dvw);
        width:100%;
        color:var(--white);
        border: none;
        background-color: var(--teal);
        font-size: 1.406dvw;
        font-weight: 100;
        border-radius: var(--18);
        margin-top: 0.556dvw;
       
    }

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

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

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

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

    body .handheld{
        display: none !important;
        height:fit-content;
        width: 100%; 

    }

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

    /*landing page css*/
    body #landing{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        gap: 0.729svw;
        overflow: hidden;    
    }

    body #landing .header { /* Header contains all */
        width: 97.813%;
        aspect-ratio: 16/7.5;
        border-radius: var(--33);
        background-image: url(./vectors/background.svg);
        background-repeat: no-repeat; /* Prevent tiling */
        background-size:cover; /* Cover the entire section */
        background-position:bottom right; /* Center the image */
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        margin-top:1.094vw;
    }

    body #landing .header nav{ /*nav bar of the landing page*/
        height: 2.708dvw;
        width: 95.637%;
        display: flex;
        flex-direction: row;
        align-items:flex-end;
        justify-content: space-between;
        margin-top: 1.51svw;
        margin-left: 1.799svw;
    }

    body #landing .header nav .logo{ /* anchor tag which contain the logo */
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #landing .header nav .logo #logo{ /*raisin pharma logo in navbar*/
        height: 2.708dvw;
        width: 8.964dvw;
        object-fit: cover;
        object-position: center;
    }

    body #landing .header nav ul{ /* navigation link holder*/
        height: 2.188dvw;
        width: fit-content;
        gap: calc(12/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    body #landing .header nav ul li{
        font-family: Rag-NarrowRegular;
        font-size: 1.441dvw;
        color: var(--black-opacity);
    }

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

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

    body #landing .header #intro{ /* introduction box contains h1 div h2 and div#dot */
        max-width: 95dvw;
        min-width: 85dvw;
        height: 19.116dvw;
        margin-left: 1.888dvw;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        margin-top: 3.2dvw;
         
    }
    

    body #landing .header #intro h1{  /* introduction box's h1 */
        font-family: Rag-NarrowRegular;
        font-size: calc(198.47/1920*100dvw);
        line-height: calc(154.80/1920*100dvw);
        text-align: left;
        color: var(--black);
    }

    body #landing .header #intro .box {
        height: 4.271dvw;
        width: 19.216dvw;
        border-radius: 4.271dvw;
        background-color: var(--dark);
        border: calc(3/1920*100dvw) solid transparent;  
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10.943dvw;
        margin-top: 1.943dvw;
        transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out; 
    }
    
    body #landing .header #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
    }
    
    body #landing .header #intro .box p {
        height: fit-content;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Rag-NarrowRegular;
        font-size: 2.21dvw;
        color: var(--background);
        transition: color 0.12s ease; 

    }
    
    body #landing .header #intro .box:hover p {
        color: var(--dark);
    }

    body #landing .header #intro h2{ /* introduction box's h2 */
        font-family: Rag-NarrowRegular;
        font-size: calc(198.47/1920*100dvw);
        line-height: calc(198.47/1920*100dvw);
        letter-spacing:calc(10/1920*100dvw);
        color: var(--black);
        text-align: left;
        text-size-adjust:auto;
        margin-top:calc(25/1920*100vw);
    }

    body #landing .header #intro .extra{
        height: fit-content;
        width:fit-content;
        display: flex;
    }


    body #landing .header #intro #dot{ /* introduction box's dot */
        height:1.823dvw ;
        width: 1.823dvw;
        background-color: var(--dark);
        border-radius: 50%;
        align-self: last baseline;
        margin-bottom:calc(20/1920*100dvw);
    }

    body #landing .header main{   /*main tag, comes after intro box*/
        font-family:Rag-NarrowRegular;
        font-size: 1.302dvw;
        text-transform: lowercase;
        word-wrap: break-word;
        word-break: keep-all;
        width: 22.76dvw;
        height: fit-content;
        margin-left: 13.831dvw;
        margin-top: 5.365dvw;
        color: var(--black-opacity);
    }

    body #landing .header article{  /*article tag, comes after main tag*/
        position: absolute;
        font-family:Rag-NarrowRegular;
        font-size:1.006dvw;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        left: 2.083dvw;
        bottom: 1.126vw;
        color: var(--black-opacity);
    }

    body #landing .header #breathing {
        z-index: -1;
        height: fit-content;
        width: fit-content;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: calc(1089/1920*100dvw);
    }
      
    body #landing .header .container {
        position: relative;
        width: 35.052dvw;
        height: 17.5dvw;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    
    body #landing .header .circles {
        position: absolute;
        bottom: 0;
        transition: all 0.6s ease-in-out;
    }
    
    body #landing .header .half-circle {
        position: absolute;
        border-radius: 15.625dvw 15.625dvw 0 0;
        transform: translateX(-50%); 
        bottom: 0;
        background-position: center;
        background-size: cover;
        /* Set transform origin to bottom center to keep the baseline alignment */
        transform-origin: bottom center;
    }
    
    body #landing .header .half-circle:nth-child(1) {
        width: 33.49dvw;
        height: 16.719dvw;
        background-image: url(./vectors/1.svg);
        /* First semicircle - largest scale change */
        animation: breathe-large 4s ease-in-out infinite;
    }
    
    body #landing .header .half-circle:nth-child(2) {
        width: 27.969dvw;
        height: 13.958dvw;
        background-image: url(./vectors/2.svg);
        /* Second semicircle - medium scale change */
        animation: breathe-medium 4s ease-in-out infinite;
    }
    
    body #landing .header .half-circle:nth-child(3) {
        width: 22.448dvw;
        height: 11.198dvw;
        background-image: url(./vectors/3.svg);
        /* Third semicircle - smallest scale change */
        animation: breathe-small 4s ease-in-out infinite;
    }
    
    
    /* Define separate animations for each semicircle with uniform scaling */
    @keyframes breathe-large {
        0%, 100% {
            transform: translateX(-50%) scale(0.87);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Larger scale for the first semicircle */
        }
    }
    
    @keyframes breathe-medium {
        0%, 100% {
            transform: translateX(-50%) scale(0.82);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Medium scale for the second semicircle */
        }
    }
    
    @keyframes breathe-small {
        0%, 100% {
            transform: translateX(-50%) scale(0.78);
        }
        50% {
            transform: translateX(-50%) scale(0.9); /* Smaller scale for the third semicircle */
        }
    }
    
    

    body #landing footer{ /* it is the footer */
        height: calc(96 / 1080 * 100%);
        width: 97.813%;
        background-color: var(--dark);
        border-radius: var(--30);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.094dvw;
        /* Add padding to help with vertical alignment */
        padding: 0.5dvw 0;
        box-sizing: border-box;
    }
    
    body #landing footer ul{
        width: 84.219dvw;
        display: flex;
        align-items: center;
        justify-content: space-around;
        /* Remove any margin/padding */
        margin: 0;
        padding: 0;
    }

    body #landing footer ul li{
        font-family: Rag-Regular;
        font-weight: 100;
        font-size: 2.604dvw;
        color: var(--background);
        /* Add these properties for better vertical alignment */
        line-height: 1;
        padding-bottom: 0.3dvw; /* Add slight padding to shift text up */
        display: flex;
        align-items: center;
    }

    body #landing #holder{
        position: absolute;
        height:fit-content;
        width:fit-content;
        z-index: 100;
        right: calc(-50/1920*100dvw);
        bottom: calc(0/1920*100dvw);
    }

    body #landing #canvas {
        position: relative;
        height:17.195dvw;
        width:30.569dvw;
        
      }

      /*about page css*/
      body #about{
        display:flex;
        align-items: center;
        justify-content: center;
    }

    body #about .container{
        display:flex;
        align-items: center;
        justify-content: center;
        width: calc(1876.19/1920*100dvw);
        aspect-ratio:1876.19/1038;
        overflow: hidden;
        border-radius: var(--33);
        margin: calc(21/1920*100dvw) 0 calc(21/1920*100dvw) 0;   
    }

    body #about .container #box1{
        position: relative;
        height: 100%;
        width: 100%;
        transition: all 0.3s ease;
        overflow: hidden;
        background-image: url(./vectors/container.svg);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 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(49/1920*100dvw);
        margin-left: calc(33.65/1920*100dvw);
    }

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

    body #about .container #box1 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 #about .container #box1 nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

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

    body #about .container #box1 .header{
        position: relative;
        height:calc(287.91/1920*100dvw);
        width:calc(1795.02/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: calc(71.67/1920*100dvw);
        margin-left: calc(33.08/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head{
        position: absolute;
        width:calc(1330/1920*100dvw);
        height: 100%;
        left: 0;
    }

    body #about .container #box1 .header #intro-head h3{
        font-family: Rag-Regular;
        font-weight: 100;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(100/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head h2{
        font-family: Rag-Bold;
        font-size: calc(81/1920*100dvw);
        color: var(--dark);
        line-height:calc(90/1920*100dvw);
    }

    body #about .container #box1 .header #intro-head p{
        color: var(--dark);
        width: calc(668/1920*100dvw);
        font-size:calc(30/1920*100dvw);
        font-weight: 100;
        margin-top:calc(13/1920*100dvw);
        height: fit-content;
        line-height:calc(35/1920*100dvw);
    }

    body #about .container #box1 .header #heart-holder{
        position: absolute;
        height: calc(274/1920*100dvw);
        width:calc(999/1920*100dvw);
        right: 0;
        display: grid;
        grid-template-columns: 57.5% 42.5%;
        border-radius: var(--33);
        background-image: url(./vectors/rectangle.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    body #about .container #box1 .header #heart-holder .left{
        height: calc(274/1920*100dvw);
        display: grid;
        grid-template-rows: 50% 50%;
    }

    body #about .container #box1 .header #heart-holder .left .up{
        width: 100%;  
    }

    body #about .container #box1 .header #heart-holder .left .down{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    body #about .container #box1 .header #heart-holder .left .down img {
        height:calc(55/1920*100dvw);
        width: calc(36.34/1920*100dvw);
        transition: transform 0.4s ease,
                    opacity 0.4s ease;
        transform-origin: center center;
        will-change: transform, opacity;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(1){
        margin-left:calc(80.65/1920*100dvw); 
        opacity:0.2;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(2){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.33;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(3){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.46;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(4){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.6;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(5){
        margin-left:calc(35.66/1920*100dvw);
        opacity: 0.73;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(6){
        margin-left:calc(33.66/1920*100dvw);
        opacity: 0.86;
    }

    body #about .container #box1 .header #heart-holder .left .down img:nth-child(7){
    margin-left:calc(37.66/1920*100dvw);
        opacity: 1;
    }

    body #about .container #box1 .header #heart-holder .right{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    } 

    body #about .container #box1 .header #heart-holder .right img{
        height: calc(333.26/1920*100dvw);
        width: calc(332.88/1920*100dvw);
        margin-top: calc(-35/1920*100dvw);
        filter: drop-shadow(0 0 1.563dvw rgba(0, 0, 0, 0.2));
        transition: transform 0.5s cubic-bezier(.45,0,.49,1.01) ;
    }

    body #about .container #box1 .header #heart-holder .right img:hover{
        transform: scale(1.1);
    }

    body #about .container #box1 .story{
        height:calc(423/1920*100dvw);
        width: calc(1793.66/1920*100dvw);
        display: flex;
        align-items: flex-end;
        justify-content: end;
        margin-top: calc(49/1920*100dvw);
        margin-left: calc(40.1/1920*100dvw);
    }

    body #about .container #box1 .story #script{
        height:calc(390.51/1920*100dvw);
        width: calc(1010.08/1920*100dvw);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    body #about .container #box1 .story #script .paragraph{
        height:fit-content;
        width: calc(1010.08/1920*100dvw);
        word-wrap: break-word;
        word-break:keep-all;
        font-size:calc(24.12/1920*100dvw);
        font-weight: 100;
        text-align: left;
        color: var(--dark);
        letter-spacing: 2%;
    }

    body #about .container #box1 .story #script .list{
        height: fit-content;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    body #about .container #box1 .story #script .list aside{
        height: fit-content;
        width: calc(266/1920*100dvw);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 .story #script .list aside h3{
        height: fit-content;
        width: fit-content;
        font-family: Rag-Bold;
        color: var(--dark);
        font-size: calc(88/1920*100dvw);
        line-height:calc(88/1920*100dvw); 
    }

    body #about .container #box1 .story #script .list aside:nth-child(2) h3{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #about .container #box1 .story #script .list aside h3 span{
        font-family: Rag-Bold;
        color: var(--dark);
        font-size: calc(56.69/1920*100dvw);
        line-height:calc(56.69/1920*100dvw);
    }

    body #about .container #box1 .story #script .list aside p{
        font-family: Rag-Regular;
        font-weight: 100;
        color: var(--dark);
        font-size: calc(27/1920*100dvw);
    }

    body #about .container #box1 article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw);
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--black-opacity);
        margin-left:calc(39.07/1920*100dvw);
        margin-top: calc(46.19/1920*100dvw);
    }

    body #about .container #box1 .wrapper{
        position: absolute;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        left: calc(40.1/1920*100dvw);
        top:calc(510/1920*100dvw);
        border-radius: var(--33);
    }

    body #about .container #box1 #box2 #up:hover,body #about .container #box1 #box2 #down:hover{
        transition: all 0.3s ease;
        background-color: var(--nav_hover);
    }

    body #about .container #box1 .wrapper .normal{
        transition: all 0.1ms ease;
        position: relative;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        background-image: url(./vectors/story.png);
        background-position: top;
        background-size: cover;
        border-radius: var(--33);
        overflow: hidden;
    }

    body #about .container #box1 .wrapper .normal #up{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        top: 0;
        right: 0;
    }

    body #about .container #box1 .small-wrapper{
        position: absolute;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        left: calc(40.1/1920*100dvw);
        top:calc(510/1920*100dvw);
        border-radius: var(--33);
    }

    body #about .container #box1 .hide{
        transition: all 0.1ms ease;
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: var(--33);
        background-image: url(./vectors/darkbackground.svg);
        background-position: top;
        background-size: cover;
        height: calc(423/1920*100dvw);
        width: calc(656/1920*100dvw);
        overflow: hidden;
    }

    body #about .container #box1 .hide #up{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        top: 0;
        right: 0;
        animation: rotate 0.5s ease reverse;
    }

    body #about .container #box1 .hide #down{
        display: none;
    }

    body #about .container #box1 .hide .wrap{
        display: none;
    }

    body #about .container #box1 .normal #down{
        display: none;

    }
    body #about .container #box1 .normal .wrap{
        display: none;
    }

    body #about .container #box1 .big-wrapper{
        position: absolute;
        display:flex;
        align-items: center;
        justify-content: center;
        width: calc(1876.19/1920*100dvw);
        aspect-ratio: 1876.19/1038;
        border-radius: var(--33);
       
    }

    body #about .container #box1 .visible{
        transition: all 0.1ms ease;
        position:relative;
        display: flex;
        flex-direction: column;
        border-radius: var(--33);
        height:calc(961.99/1920*100dvw) ;
        width:calc(1799/1920*100dvw);
        overflow: hidden;
        background-image: url(./vectors/darkbackground.svg);
        background-position:top;
        background-size: cover;
        background-repeat: no-repeat;
    }

    body #about .container #box1 .visible #up{
        display: none;
    }

    body #about .container #box1 .visible #down{
        transition: all 0.3s ease;
        position: absolute;
        height: calc(70/1920*100dvw);
        width: calc(70/1920*100dvw);
        background-color: transparent;
        background-image: url(./vectors/up.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        border: none;
        transform: rotate(180deg);
        top: 0;
        right: 0;
        animation: rotate 0.5s ease forwards;
    }

    @keyframes rotate{
        from{
            transform: rotate(0deg);
        }
        to{
            transform: rotate(180deg);
        }
    }

    body #about .container #box1 .visible .wrap{
        position: relative;
        height: fit-content;
        width: fit-content;
        animation: update 0.6s  cubic-bezier(.45,0,.49,1.01) reverse;
    }

    body #about .container #box1 .visible h2{
        font-family: Rag-Bold;
        font-size:calc(99/1920*100dvw);
        color: var(--background);
        margin-left:calc(78.5/1920*100dvw);
        margin-top:calc(73.86/1920*100dvw);
        height: fit-content;
        width: fit-content;
        line-height:calc(99/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction{
        height:calc(654.82/1920*100dvw);
        width:calc(1639.06/1920*100dvw);
        display: flex;
        justify-content: space-between;
        margin-left:calc(78.5/1920*100dvw);
        margin-top:calc(73.86/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder{
        height:calc(654.82/1920*100dvw);
        width:calc(1072.29/1920*100dvw);
        display: flex;
        flex-direction: column;
        justify-content: left;
    }

    body #about .container #box1 .visible .interaction .text-holder #paragraph{
        width:calc(1072.29/1920*100dvw);
        height: calc(400/1920*100dvw);
        display: flex;
        flex-direction: column;
    }

    body #about .container #box1 .visible .interaction .text-holder  #paragraph span{
        font-size:calc(28.35/1920*100dvw);
        font-weight: 100;
        color: var(--background);
        word-wrap: break-word;
        word-break: keep-all;
        transition: all 0.5s ease;
    }

    body #about .container #box1 .visible .interaction .text-holder .white-box{
        position: relative;
        height:calc(67/1920*100dvw);
        width:calc(138/1920*100dvw);
        border-radius: var(--33);
        background-color: var(--background);
        margin-left:0.588dvw;
        margin-top: calc(70/1920*100dvw);
        z-index: 100;
        visibility: hidden;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover{
        height:calc(120.35/1920*100dvw);
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:calc(23.97/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box{
        position: relative;
        height:calc(120.35/1920*100dvw);
        width:calc(1039.37/1920*100dvw);
        display: grid;
        grid-template-rows: 38.34% 61.66%;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper{
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        border-bottom: 0.052dvw solid var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p{
        line-height: normal;
        height: fit-content;
        width: fit-content;
        font-family: Rag-Bold;
        font-size: calc(17.01/1920*100dvw);
        color: var(--background); 
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(1){
        margin-right:calc(84/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(2){
        margin-right:calc(81.3/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(3){
        margin-right:calc(92.57/1920*100dvw); 
    }

     body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(4){
        margin-right:calc(87.9/1920*100dvw);
    }

     body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #upper p:nth-child(5){
        margin-right:calc(72.29/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower{
        width:calc(1039.37/1920*100dvw);
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p{
        height: fit-content;
        width: fit-content;
        text-align: center;
        font-family: Rag-Bold;
        font-size:calc(18/1920*100dvw);
        color: var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(1){
        margin-right: calc(73.47/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(2){
        margin-right: calc(76.75/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(3){
        margin-right: calc(97.81/1920*100dvw); 
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(4){
        margin-right: calc(89.99/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box #lower p:nth-child(5){
        margin-right: calc(71.37/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder{
        position: absolute;
        width: calc(907/1920*100dvw);
        height: calc(26/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: space-between;
        left:calc(67.37/1920*100dvw);
        top:calc(35.53/1920*100dvw);
        z-index: 100;
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder #circle{
        height: calc(26/1920*100dvw);
        width: calc(26/1920*100dvw);
        border-radius: 50%;
        background-color: var(--background);
    }

    body #about .container #box1 .visible .interaction .text-holder .cover .animated-box .circles-holder #green-dot{
        position: absolute;
        height: calc(26/1920*100dvw);
        width: calc(26/1920*100dvw);
        border-radius: 50%;
        background-color: var(--green-dot);
        left: 0;
        transition: all 0.6s ease;
        z-index: 100;
    }

    body #about .container #box1 .visible .interaction .image{
        height:100% ;
        width:calc(517/1920*100dvw) ;
        display: flex;
        flex-direction: column;
        align-items:flex-end;
        justify-content: space-between;
    }

    body #about .container #box1 .visible .interaction .image .img{
        height: calc(517/1920*100dvw);
        width:calc(517/1920*100dvw) ;
        object-fit: cover;
        object-position: center;
        border-radius: var(--33);
        transition: all 0.3s ease;
        margin-top: calc(39/1920*100dvw);
    }

    body #about .container #box1 .visible .interaction .image article{
        font-family:Rag-NarrowRegular;
        font-size:calc(19.32/1920*100dvw) ;
        text-transform: capitalize;
        width: fit-content;
        height: fit-content;
        color: var(--background);
        opacity: 0.4;
        margin-left: 0.305vw;
        margin-top: 2.131dvw;
        font-weight: 100;
    }

    body #about .container .visible {
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: up 0.5s cubic-bezier(.22,0,.21,1.01) forwards,
                   svgupdate2 0.5s cubic-bezier(.22,0,.21,1.01)  forwards;
    }
    
    body #about .container .hide {
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: down 0.5s cubic-bezier(.22,0,.21,1.01) forwards,
                   svgupdate1 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
       
    }

    @keyframes svgupdate1{
        from{
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.669%{
            
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.67%{
            
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        to{
           background-image: url(./vectors/story.png);
           background-position:top;
           background-size: cover;
           background-repeat: no-repeat;
        }
    }

    @keyframes svgupdate2{
        from{
            
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.669%{
           
            background-image: url(./vectors/story.png);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        26.67%{
            
            background-image: url(./vectors/darkbackground.svg);
            background-position:top;
            background-size: cover;
            background-repeat: no-repeat;
        }
        to{
        
           background-image: url(./vectors/darkbackground.svg);
           background-position:top;
           background-size: cover;
           background-repeat: no-repeat;
        }
    }
    
    
    
    body #about .container #box1 .visible .wrap {
        animation: update 0.5s cubic-bezier(.22,0,.21,1.01) reverse;
    }

    body #about .container #box1 .small-wrapper{
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: change2 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
    }

    body #about .container #box1 .big-wrapper{
        transition: all 0.5s cubic-bezier(.22,0,.21,1.01);
        animation: change 0.5s cubic-bezier(.22,0,.21,1.01) forwards;
    }

    @keyframes change {
        from{
            left: calc(40.1/1920*100dvw);
            top:calc(510/1920*100dvw);
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
        to{ 
            left: 0;
            top: 0;
            height:calc(1038/1920*100dvw);
            width: calc(1876.19/1920*100dvw);
            background-color: var(--background);
        }
    }

    @keyframes change2 {
        from{ 
            left: calc(40.1/1920*100dvw);
            top: calc(58/1920*100dvw);
            height:calc(1038/1920*100dvw);
            width: calc(1876.19/1920*100dvw);
        }

        to{
            left: calc(40.1/1920*100dvw);
            top:calc(510/1920*100dvw);
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
    }

    

    @keyframes update {
        from{
            opacity: 1;
        }
        to{
            opacity: 0;
        }
    }
    /* tried purpose*/
    


    @keyframes down {
        from{
            height:calc(961.99/1920*100dvw) ;
            width:calc(1799/1920*100dvw);
        }
        to{
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
    }

    @keyframes up {
        from{
            
            height: calc(423/1920*100dvw);
            width: calc(656/1920*100dvw);
        }
        
        to{
        height:calc(961.99/1920*100dvw) ;
        width:calc(1799/1920*100dvw);
        }
    }

    /*product page css*/
    body #product{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #product .wrapper{
        width: 100%;
        aspect-ratio: 16/8.7;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-image: url(./vectors/productpage.svg);
        background-position: center;
        background-size: cover;
    }

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

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

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

    body #product .wrapper 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 #product .wrapper nav ul li {
        font-family: Rag-NarrowRegular;
        font-size: calc(27.66/1920*100dvw);
        color: var(--black-opacity);
        transition: all 0.2s ease;
    }

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

    body #product .wrapper #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 #product .wrapper #intro .words{
        height: 100%;
        width: calc(1115/1920*100dvw);
        display: flex;
        flex-wrap: wrap;
    }

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

    body #product .wrapper #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);
        margin-left:calc(5/1920*100dvw);
    }

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

    body #product .wrapper #intro .box {
        height: 4.271dvw;
        width: 19.216dvw;
        border-radius: 4.271dvw;
        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);
        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 #product .wrapper #intro .box:hover {
        background-color: transparent;
        border-color: var(--dark);
        color: var(--dark);
    }

    body #product .wrapper .cover{
        height: calc(504/1920*100dvw);
        width:calc(1805/1920*100dvw);
        margin-left:calc(56/1920*100dvw);
        margin-top: calc(48.31/1920*100dvw);
        display: flex;
        align-items: center;
        justify-content: left;
        gap: calc(40.5/1920*100dvw);
    }

    body #product .wrapper .cover #img{
        position: relative;
        transition: all 0.6s ease;
        border-radius: var(--33);
    }

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

    body #product .wrapper .cover .img1{
        height:100%;
        width:calc(764.5/1920*100dvw);
    }

    body #product .wrapper .cover .img2{
        height:100%;
        width:calc(525.1/1920*100dvw);
    }

    body #product .wrapper .cover .img3{
        height:100%;
        width:calc(436.54/1920*100dvw);
    }

    body #product .wrapper .cover #img:hover{
        height:100%;
        width:calc(764.5/1920*100dvw);
    }

    body #product .wrapper .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 #product .wrapper .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 #product .wrapper .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 #product .wrapper .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 #product .wrapper 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);
    }

    body #product .wrapper 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 #product .wrapper footer .line{
        width:calc(1533/1920*100dvw);
        height: fit-content;
        border-top:calc(2/1920*100dvw) solid var(--border);
    }

    /*contact page css*/
    body #contact{
        background-color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder{
        width: 97.656dvw;
        aspect-ratio: 16/8.9;
        background-color: var(--dark);
        border-radius: var(--33);
        display:flex;
        align-items: center;
        justify-content: center;
        gap:calc(22.6/1920*100dvw);
        margin: calc(21/1920*100dvw) 0 calc(21/1920*100dvw) 0;
    }

    body #contact .holder #form-holder , body #contact .holder #figure{
        height:calc(987/1920*100dvw);
        width:41.068dvw;
        border-radius:var(--33);
        overflow-y: scroll;
    }

    body #contact .holder #figure{
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: space-between;
        border-radius: var(--33);
    }

    body #contact .holder #figure .heroback{
        width:100%;
        height:calc(614.5/1920*100dvw);
        background-image: url(./picture/hero_back.png);
        background-position: center;
        background-size: cover;
        border-radius: var(--33);
        display: flex;
        align-items: last baseline;
        overflow: hidden;
    }

    body #contact .holder #figure .image{
        width:calc(530/1920*100dvw);
        height:calc(530/1920*100dvw);
        border-radius: var(--33);
        display: flex;
        align-items: last baseline;
        overflow: hidden;
        margin-left: calc(114.7/1920*100dvw);
    }

    

    body #contact .holder #figure .info{
        height:calc(349/1920*100dvw);
        width:100%;
        display: flex;
        flex-direction:column;
        align-items: center;
        justify-content: center;
        background-color: var(--white);
        border-radius: var(--33);
        gap: calc(20/1920*100dvw);
    }

    body #contact .holder #figure .info section{
        height:calc(85/1920*100dvw);
        width:38.49dvw;
        background-color: var(--info);
        display:flex;
        align-items: center;
        justify-content: left;
        border-radius: var(--33);
    }

    body #contact .holder #figure .info section .img{
        height:2.083dvw;
        width:2.083dvw;
        border-radius: 50%;
        background-color: var(--background);
        margin-left: 1.191vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body #contact .holder #figure .info section .img img{
        height:1.51dvw;
        width:1.51dvw;
        object-fit:contain;
        object-position: center;
    }

    

    body #contact .holder #figure .info section aside{
        display: flex;
        flex-direction: column;
        height: fit-content;
        width: fit-content;
        margin-left: 0.971vw;
    }

    body #contact .holder #figure .info section aside h2{
        font-size:calc(24/1920*100dvw);
        color:var(--black);
        font-weight: 100;
        line-height:calc(36/1920*100dvw);
    }

    body #contact .holder #figure .info section aside a{
        font-size:calc(17/1920*100dvw);
        color:var(--black);
        font-weight: 100;
        text-decoration: underline;
    }

    body #contact .holder #form-holder {
        background-color: var(--white);
    }

    body #contact .holder #form-holder h2{
        font-size:calc(28/1920*100dvw);
        color: var(--teal);
        font-weight: 100;
        margin-top: calc(43.41/1920*100dvw);
        margin-left:calc(43.41/1920*100dvw);
    }

    body #contact .holder #form-holder h3{
        font-size:calc(66/1920*100dvw);
        font-weight: 100;
        width: 36.146dvw;
        color: var(--black);
        margin-left: calc(43.41/1920*100dvw);
    }

    body #contact .holder #form-holder .cover{
        margin-left: calc(43.41/1920*100dvw);
        width: 36.578dvw;
        height:calc(101.66/1920*100dvw);
        border-bottom: 0.052dvw solid var(--border-contact);
        display: flex;
        align-items: first baseline;
        margin-top: calc(8.66/1920*100dvw);
    }

    body #contact .holder #form-holder .cover p{
        font-size: calc(24/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        line-height:calc(17/1920*100dvw);
    }

    body #contact .holder #form-holder .cover p span{
        font-size: calc(24/1920*100dvw);
        color: var(--black);
        line-height:calc(36/1920*100dvw);
        font-weight: 100;
    }

    body #contact .holder #form-holder form{
        margin-left: calc(43.41/1920*100dvw);
        height: fit-content;
        width: 36.563dvw;
        display: flex;
        flex-wrap:wrap;
        margin-top:calc(39/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes{
        display: flex;
        flex-direction: column;
        align-items: first baseline;
        height: calc(110.88/1920*100dvw);
        width: 17.448dvw;
    }

    body #contact .holder #form-holder form .boxes:nth-child(2){
        width: 18.229dvw;
       margin-left: calc(15/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(3){
        width: 100%;
        margin-top: calc(3.014/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(4){
        width: 100%;
        height:calc(185.38/1920*100dvw);
        margin-top: calc(3.014/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes:nth-child(5){
        width: 100%;
        height: calc(30/1920*100dvw);
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: calc(13.32/1920*100dvw);
    }

    body #contact .holder #form-holder form .boxes label{
        font-size: calc(24/1920*100dvw);
        font-weight: 100;
        color: var(--black);
        text-transform:capitalize;
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) label{
        margin-left: 1.018dvw;
        font-size: 1.042dvw;
        
    }

    body #contact .holder #form-holder form .boxes:nth-child(5) input[type="checkbox"]{
        height: calc(23.50/1920*100dvw);
        width: 1.224dvw;
        border-radius: var(--18);
    }

    body #contact .holder #form-holder form .boxes input{
        height:calc(72/1920*100dvw);
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 1.146dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:1.21dvw;
    }

    body #contact .holder #form-holder form .boxes input:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes input::placeholder{
        font-size: calc(22/1920*100dvw);
        font-weight: 100;
        text-transform: capitalize;
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form .boxes textarea{
        background-color: var(--background);
        border: none;
        border-radius: var(--18);
        width: 100%;
        height:calc(149/1920*100dvw);
        font-size: 1.146dvw;
        font-weight: 100;
        color: var(--black);
        padding-left:0.481dvw;
        padding-top:1.181dvw;
    }

    body #contact .holder #form-holder form .boxes textarea:focus{
        outline: none !important;   
        border: none !important;
        background-color: var(--background) !important;
    }

    body #contact .holder #form-holder form .boxes textarea::placeholder{
        font-size: calc(22/1920*100dvw);
        color: var(--place-holder);
    }

    body #contact .holder #form-holder form button{
        height:calc(72/1920*100dvw);
        width:100%;
        color:var(--white);
        border: none;
        background-color: var(--teal);
        font-size: 1.406dvw;
        font-weight: 100;
        border-radius: var(--18);
        margin-top: 0.556dvw;
       
    }

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



}