@media (min-width: 2555px) {
    .divider-container,.about-third-section{
        padding-inline:0 ;
        margin-inline: auto;
    }
    .about-third-section .btn{
        align-self: flex-end;
    }
    .eight-oils-section .shadow{
        left: 55%;
        top: 55%;
        transform: translate(-50%,-50%);
    }
    .service-slider-section h3{
        align-self: center;
    }
}
@media (max-width: 1500px) {
    /* homepage start */
    .hero-section .slide-1 h1{
        width: 100%;
    }
    .hero-section p{
        width: 55%;
    }
    .floating-images-section .floating-images .large-image{
        width: 288px;
    }
    .floating-images-section .floating-images .small-image1{
        width: 125px;
    }
    .floating-images-section .floating-images .small-image2{
        width: 142px;
    }

    .reach-us a{
        font-size: 225px
    }
    /* homepage end  */
    .about-page-container .page-header{
        height: 100vh;
        width: 100vw;
    }
    .eight-oils-section .eight-oils{
        width: 500px;
    }
    .eight-oils-section .line{
        right: -250px;
        bottom: 300PX;
    }

    /* single service start */
    .single-service-page-container .grid-section{
        padding: 100px 5% 100px 5%;
    }
    .single-service-page-container .image1,.single-service-page-container .image2{
        width: 350px;
    }
    /* single service end */
   
}
@media (max-width: 1300px) {
    .eight-oils-section .line{
        right: -300px;
    }
}
@media (max-width: 1200px) {
    .hero-bottle{
        right: 100px;
    }
    .three-cards {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
        justify-items: center; }
    
    
}
@media (max-width: 1100px) {


 .container{
    padding: 100px 10% 100px 10%;
    margin-inline:auto;
  }
  
 /* homepage start*/

 .swiper.services-cards-container{
    max-width: 720px !important;
 }
 /* floating images section start*/
    .floating-images-section{
        flex-direction: column;
        
    }
    .floating-images-section .text{
        width: 100%;
    }
    .floating-images-section .floating-images{
        width: 90%;
    }
 /* floating images section end*/

 /* homepage end*/
 .about-page-container .page-header{
    height: 80vh;
    margin: 0;
}

}

@media (max-width: 1000px) {
    .typed-out-container img{
        width: 90%;
    }
    .only-desktop{
        display: none;
    }
    header .menu{
        display: none;
    }
    header .btn{
        display: none;
    }
    .hamburger{
        display: flex;
    }
    .mobile-menu{
        display: flex;
    }
    .only-mobile{
        display: block;
    }
    .slide-2{
        justify-content: flex-end;
    }
    .hero-bottle{
        /*width: 150px;*/
        width: 90px;
        right: unset !important;
        left: unset !important;
        bottom: 50px;
        position: relative;
    }
    .hero-section .slide-text-container {
        align-items: center !important;
    }
    .slide-2 .slide-text-container p{
        margin-bottom: 50px !important;
    }
    .hero-section .slide-text-container .slide-2{
        align-items: center !important;
    }
    .hero-section h1 .slide-2{
        text-align: center !important;
    }
    .hero-section p .slide-2{
        text-align: center !important;
    }
}
@media (max-width: 900px) {
    ::-webkit-scrollbar {
        display: none;
    }
   
    
    .flex{
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }

    
    .about-page-container .img1{
        width: 230px;
    }
    .about-page-container .img2{
        width: 320px;
    }
    .about-page-container .images-container{
        margin-bottom: 100px;
    }
    .eight-oils-section .line{
        right: -250px;
        bottom: 400PX;
        width: 900px;
    }
   

    .eight-oils-section .fruit1{
        width: 128px;
        left: 0;
    }
    .eight-oils-section .fruit2{
        width: 150px;
        bottom: 0;
      }
   
    .eight-oils-section .fruit3{
        width: 100px;
        right: 0;
    }
    .eight-oils-section .fruit4{
        width: 170px;
        top: 0px;
        right: -50px;
    }
    .eight-oils-section .fruit5{
        width: 200PX;
        right: unset;
        top: unset;
        left: 0 ;
        bottom: 200px;

    }
    .eight-oils-section .fruit6{
        width: 100PX;
        right: 75px;
    }
    .eight-oils-section p{
        font-size: 96px;
    }
    .eight-oils-section .shadow{
        left: 20%;
        bottom: 150px;
    }
    .about-second-section .content{
        /* max-width: 288px; */
    }
    .about-second-section{
        padding: 200px 5% 100px 5%;
    }


    
    .eight-oils-section .eight-oils-container{
        width: 187px;
        height: 600px;
    }
    .back-front{
        width: 136px;
        top: 0;
        height: 375px;
    }
    .eight-oils-section .eight-oils-back-top{
        width: 125px;
        top: 25px;
        left: 35px;
    }
    .eight-oils-section .eight-oils-back-bottom{
        width: 150px;
        height: 375px;
    }
    .eight-oils-section .eight-oils-front{
        height: 300px;
        bottom: 50px;
        left: -800px;
    }
    /* contact us page start */
    .contact-us-page-form .email-phone > *{
        width: 100%;
    }
    .contact-form-section .form-container{
        flex-direction: column;
    }
    .contact-form-section .form-left{
        width: 100%;
    }
    .contact-form-section .form-right{
        width: 100%;
        margin-bottom: 0;
    }
    .contact-form-section .form-right iframe{
        height: 400px;
    }
    /* contact us page end */

    /* services start */
    .service-slider-section{
        padding: 110px 5% ;
    }
    .services-page-container .page-header .header-content-container{
        width: 100%;
    }
    .service-slider-section h3{
        align-self: center;
    }
    /* services end */
    /* single service start */
    .single-service-header{
        padding: 200px 0 50px 0;
    }
    .single-service-page-container .service-content .service-background{
        margin-bottom: 50px;
    }
    .single-service-page-container .grid-container {
        grid-template-columns: 1fr; /* Stack the sections vertically */
    }
  
    .single-service-page-container .left-section, .right-section {
        width: 100%;
    }
    .single-service-page-container .image1,.single-service-page-container .image2{
        width: 250px;
    }
    /* single service end */
}
@media (max-width: 768px) {
    html[lang="ar"] .single-service-header .title-container{
        align-self: center;
    }
       .logo-container img{
        width: 100px !important;
       }
    /* homepage start */
    .slide-3{
        height: 100%;
        width: 100%;
        background: url('/storage/images/homepage/slide3-mobile.png');
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center
      }
    .hero-section h1{
        width: 100%;
    }
    .service-slider-section h3{
        text-align: center;
    }
    .swiper.services-cards-container{
        max-width: 320px !important;
    }
    
    .slide-text-container{
        width: 100%;
        padding: 0 5%;
    }

    /* floating images section start */
    .hero-section{
        align-items: flex-end;
    }
    .hero-section .slide-1{
        padding-top: 150px;
    }
    .hero-section p{
        width: 100%;
    }
    .hero-section .slide-text-container{
        align-items: center;
    }
    .hero-section h1{
        text-align: center;
    }
    .hero-section p{
        text-align: center;
    }
    .floating-images-section {
        gap: 25px;
    }
    .floating-images-section .floating-images .large-image{
        width: 207px;
        height: 300px;
        margin: 0;
    }

    .floating-images-section .floating-images .small-image1{
      width: 150px;
      height: 75px;
      right: -25px;
    }
    .floating-images-section .floating-images .small-image2{
        width: 85px;
        height: 123px;
        right: 0;
    }
    .floating-images-section .content {
        flex-direction: column-reverse;
        gap: 25px;
    }
    .floating-images-section .floating-images{
        padding: 0;
        margin: 0;
        align-self: center;
    }
    /* floating images section end */
    .reach-us{
        height: 70vh;
    }


    .homepage .grid-item{
        border-radius:20px;
    }
    /* homepage end */

    /* about us start */
    .about-page-container .header-content-container{
        padding: 0 5% 124px 5%;
    }
    .about-page-container .innner-container{
        justify-content: flex-start;
    }
    .about-second-section{
        padding: 100px 5%;
    }
    .about-second-section .content{
        max-width: 100%;
    }
    .about-page-container .figure{
        bottom: 100px;
        width: 300px;
        left:50%;
        transform: translateX(-50%);
    }
    .about-page-container .figure-bg1{
        display: none;
    }
      .about-page-container .figure-bg2{
        width: 200px;
        top: 100px;
        left: 100px;
      }
    
    .about-third-section{
        padding-inline: 5%;
    }
   
    .about-page-container .img1{
        width: 115px;
    }
    .about-page-container .img2{
        width: 160px;
    }
    .eight-oils-section{
        padding-top: 0px;
    }
    .eight-oils-section .eight-oils{
        width: 450px;
} 
    .eight-oils-section .fruit1{
        width: 64px;
    }
    .eight-oils-section .leafs{
        width: 150px;
    }
    .eight-oils-section .line{
        width: 700px;
        bottom: 200px;
        right:-300px;
        transform: rotate(15deg);
    }
    .eight-oils-section .shadow{
        width: 600px;
    }
    /* about us end */
    /* contact us start */
    .three-cards {
        grid-template-columns: 1fr; /* 1 column for smaller screens */
    }
    .contact-form-section .form-left{
        padding: 20px;
    }
    /* contact us end */
    /* services start */
    .header-content-container{
        padding-inline: 5%;
    }
    /* services end */
    /* single service start */
    .single-service-page-container .service-content{
        align-items: flex-start;
    }
    .single-service-page-container .image2{
        display: none;
    }
    .services-list .intro-text{
        width: 100%;
    }
    .services-list .image-container img{
        width: 300px;
    }
    /* single service end */
    /* services slider section start*/
    .service-slider-section {
        padding: 100px 5% 0 5%;
    }
    /* services slider section end*/

    .container{
        padding-inline:5%;
    }

}