@media screen and (max-width: 1600px) {
    

    /* -------------------- Horizontal - Home Page --------------------- */

    .horizontal-items .horizontal-single-item img{
        max-width: 65% !important;
    }


    /* -------------------- Testimonial - Home Page --------------------- */
    .slider{
        width: 1013px !important;
    }


    /* -------------------- About Section - About Page --------------------- */
    .about__content-text{
        font-size: 1.4em !important;
    }


    .single-tile-wrap p{
        position: initial !important;
    }
}

@media screen and (max-width: 1024px) {
    
    /* -------------------- Preloader - Home Page ---------------------  */

    #text{
        font-size: 4.5rem !important;
    }

    .box, .box_red{
        font-size: 3.21rem !important;
    }

    /* -------------------- HeroSection - Home Page --------------------- */

    .hero__title{
       font-size: 10vh !important;
    }



    /* -------------------- Work Value - Home Page --------------------- */

    .work__values .row{
        grid-template-columns: 1fr !important;
        gap: 50px !important;
    }



    /* -------------------- Page Transition - Home Page --------------------- */

    .page_transition{
        overflow: hidden;
    }

    /* -------------------- Testimonial - Home Page --------------------- */
    .testimonial{
        padding-block: 50px 100px !important;
        overflow: hidden;
    }

    .testi__item{
        height: 20vw !important;
    }

    .slider{
        width: 900px !important;
    }

    /* -------------------- About Section - About Page --------------------- */
    .home-intro{
        padding-top: 100px;
    }

    .about__content-text{
        font-size: 1.1em !important;
    }

}

@media screen and (max-width: 850px) {
    

    /* -------------------- Header - Home Page --------------------- */

    .home-header{
        align-items: baseline !important;
        padding-block: 0px !important;
        min-height: initial !important;
    }
    .header__container{
       display: flex !important;
       justify-content: space-between !important;
    }

    .social__media-container {
        display: none !important;
    }

    .logo_doukkal{
        margin-inline: initial !important;
        margin-left: 75px;
    }

    .header__container .links-wrap .btn-link{
        display: none !important;
    }

    .header__container .links-wrap li:last-child{
        display: block !important;
    }

    .home .header__container .btn-link .btn-click::after{
        background-color: #fff !important;
    }

    .swiper_button-next,.swiper_button-prev{
        display: none !important;
    }

    .logo_doukkal{
        margin-left: 2rem !important;
        width: 100px;
    }


    /* -------------------- Hero - Home Page --------------------- */

    .hero__title{
        font-size: 8vh !important;
    }

    /* -------------------- About - Home Page --------------------- */
    .home-intro{
        padding-top: 75px !important;
    }

    .about__title{
        font-size: 2.5em !important;
        margin-bottom: 1em;
    }
    .home-intro .flex-col:nth-child(2),.home-intro .flex-col:nth-child(1), .home-intro .row.secondary .flex-col:nth-child(1), .home-intro .row.secondary .flex-col:nth-child(2){
      width: 100% !important;
    }

    .home-intro .flex-col:nth-child(1), .home-intro .flex-col:nth-child(2), .home-intro .row.secondary .flex-col:nth-child(1), .home-intro .row.secondary .flex-col:nth-child(2){
        padding: 0 !important;
    }

    .home-intro .row.secondary{
        margin-top: 100px !important;
    }

    .home-intro .row.secondary .flex-col:nth-child(2){
        margin-top: 2em;
    }

    .num_exp
    {
        font-size: 2.5em;
    }


    /* -------------------- Gallery - Home Page --------------------- */
    .work_container{
        grid-template-columns: 1fr !important;
    }

    .work__title{
        font-size: 18px !important;
    }

    .work_container .flex-col img{
        height: 25rem !important;
        object-fit: cover !important;
    }

    /* -------------------- Slider - Home Page --------------------- */
    
    .slider{
        width: 650px !important;
    }


    /* -------------------- About Section - About Page --------------------- */

    .about-round-wrap .row.secondary{
        grid-template-columns: 1fr !important;
    }

    .about-round-wrap .row.secondary .flex-col{
        order: unset !important;
    }

    .about-round-wrap .row.secondary:nth-of-type(odd) .flex-col.reveal{
        order: -1 !important;
    }
    .about__content-text{
        margin-top: .5em !important;
        font-size: 2em !important;
    }


    /* -------------------- Contact Section - Contact Page --------------------- */

    .contact-header{
        padding-top: 150px !important;
    }

    .contact-header .row:nth-child(2){
        padding-top: 3rem !important;
    }

    .contact-header .row:nth-child(2) .links-wrap{
        padding-bottom: 2.5em !important;
    }

}

@media screen and (max-width: 520px) {

    /* -------------------- Preloader - Home Page --------------------- */
     
    #text{
        font-size: 1rem !important;
        line-height: 2.5rem !important;
        display: inline-flex;
        gap: 25px;
    }

    .boxes, .box, .box_red{
        height: 5.5vmin !important;
    }

    .box, .box_red{
        font-size: 1.2rem !important;
    }

    /* -------------------- Header - Home Page --------------------- */
    .logo_doukkal{
        margin-left: 2rem !important;
        width: 70px !important;
    }


    /* -------------------- About - Home Page --------------------- */
    .home-intro .row.secondary .flex-col:nth-child(2){
        align-items: flex-start;
    }


    /* -------------------- Work Values - Home Page --------------------- */
    .starte_num-img{
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .work__values .work__values-items{
        align-items: center !important;
        flex-direction: column;
        row-gap: 3rem;
    }



    /* -------------------- Work Values - Home Page --------------------- */
    .page_transition{
        display: none !important;
    }

    /* -------------------- Testimonial - Home Page --------------------- */

    .testimonial{
        padding-block: 0px !important;
        padding-top: var(--section-padding) !important;
       padding-bottom: var(--section-padding) !important;
    }

    .slider .testi__item{
        height: 50vw !important; 
    }


    /* -------------------- Header Section - About Page --------------------- */

    .home-header .container{
        padding-bottom: 0 !important;
    }


    /* -------------------- About Section - About Page --------------------- */
    .about__title{
        font-size: 1.5em !important;
    }

    .about__splining{
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    .about__content-text{
        font-size: 1.5em !important;
    }

    /* -------------------- Horizontal Section - About Page --------------------- */

    .horizontal-items{
        padding-top: calc(var(--section-padding) * 1) !important;
    }

    .horizontal-items .row{
        width: 100% !important;
        left: 0 !important;
        justify-content: center;
    }

    .horizontal-items .flex-col{
        padding: 1.25vw !important;
        width: 45%;
    }

    .horizontal-items .row-1 .flex-col:nth-child(3), .horizontal-items .row-1 .flex-col:nth-child(4){
        transform: translate(0, 0) !important;
    }

    .horizontal-items .row-2 .flex-col:nth-child(3), .horizontal-items .row-2 .flex-col:nth-child(4){
        display: block !important;
    }

    .horizontal-items .horizontal-single-item img{
        max-width: 55% !important;
    }
}