@media only screen and (max-width: 1760px) {
    
    /*------------------------------------*\
    # DOCTORS
    \*------------------------------------*/

    .doctor-img-buttons{
        font-size: .8rem;
        padding: 10px;
    }
}

@media only screen and (max-width: 1640px) {

    /*------------------------------------*\
    # DOCTORS
    \*------------------------------------*/

    .doctors{
        gap: 40px;
    }
    .doctors .doctor-item-wrapper{
        width: calc(33% - 80px / 3);
    }

}

@media only screen and (max-width: 1440px) {
    :root{
        --header-width: 100px; 
    }
    .intro-route-link svg{
        width: 70px;
    }



    /*------------------------------------*\
    # HEADER
    \*------------------------------------*/

    .header-menu-wrapper.active .header-menu-item ul{
        grid-template-columns: repeat(3, 1fr);
    }



    /*------------------------------------*\
    # INTRO
    \*------------------------------------*/

    .intro-img-logos{
        flex-wrap: wrap;
        margin: 0 var(--header-width) 0 min(17.5%, 100px);
    }
    .intro-img-logos img{
        max-width: 170px;
        max-height: 90px;
    }



    /*------------------------------------*\
    # DOCTORS
    \*------------------------------------*/

    .doctor-item-wrapper{
        padding: 30px 30px 10px 30px;
    }



    /*------------------------------------*\
    # MEDICAL DEPARTMENTS
    \*------------------------------------*/

    .section-medical-departments{
        gap: 40px;
    }
    .medical-department-item-wrapper{
        width: calc(33% - 120px / 4);
    }
    .medical-department-item-wrapper{
        padding: 30px 30px 10px 30px;
    }




    /*------------------------------------*\
    # BLOG
    \*------------------------------------*/

    .section-news{
        gap: 40px;
    }
    .blog-item-wrapper{
        padding: 30px 30px 10px 30px;
    }



    /*------------------------------------*\
    # PARTNERS
    \*------------------------------------*/
    
    .partner-item-wrapper{
        width: 20%;
    }



    /*------------------------------------*\
    # FOOTER
    \*------------------------------------*/

    .footer-department-wrapper{
        width: 33.33% !important;
    }
}

@media only screen and (max-width: 1248px){
    :root{
        font-size: 16px;
        --header-width: 90px; 
    }



    /*------------------------------------*\
    # BLOG
    \*------------------------------------*/
    
    .section-blogs{
        gap: 40px;
    }
    .blog-item-wrapper{
        width: calc(50% - 40px / 2);
        padding: 20px 20px 10px 20px;
    }



    /*------------------------------------*\
    # PARTNERS
    \*------------------------------------*/
    
    .partner-item-wrapper{
        width: 25%;
    }
    .partner-item .partner-img{
        max-width: 150px;
        max-height: 70px;
    }



    /*------------------------------------*\
    # FOOTER
    \*------------------------------------*/

    .footer-department-wrapper{
        width: 50% !important;
    }
}

@media only screen and (max-width: 1024px) {
    :root{
	    font-size: 15px;
        --header-width: 80px;
    }
    .header-menu-wrapper,
    .header-right{
        border: none;
    }
    .main:not(:has(.section-intro-wrapper)){
        padding-top: 0;
    }
    .pad-left{
        padding-left: 0;
    }
    .pad-right{
        padding-right: 0;
    }
    .section-wrapper{
        padding-left: 10px;
        padding-right: 10px;
        overflow-x: clip;
    }
    .sided-section{
        flex-direction: column;
    }
    .sided-section .primary-side,
    .sided-section .secondary-side,
    .sided-section > .half-width,
    .section-intro:has(.intro-container) .secondary-side,
    .section-intro:has(.intro-container) .primary-side{
        width: 100%;
    }
    .section-intro:has(.intro-container) .secondary-side,
    .footer-router{
        min-width: unset;
    }
    .text-container{
        max-width: unset;
    }
    .check-up-side{
        padding-right: 40px;
    }
    .check-up-band{
        width: 40px;
        padding: 10px;
        font-size: 1.1rem;
    }



    /*------------------------------------*\
    # HEADER
    \*------------------------------------*/

    .header-menu-wrapper.active .header-menu-item ul{
        grid-template-columns: repeat(2, 1fr);
    }



    /*------------------------------------*\
    # INTRO
    \*------------------------------------*/

    body > .logo{
        position: static;
        margin-top: var(--header-width);
        padding-left: 10px;
        transform: none !important;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    /* For Preview */
    body > .logo:not([href]){
        padding-top: 0 !important;
        margin-top: 0 !important;
        left: 0 !important;
    }
    .section-intro .text-side{
        padding-top: 0;
    }
    body > .media{
        height: fit-content;
        flex-direction: row;
        top: calc(var(--header-width) / 2);
        left: var(--header-width);
        margin-left: 40px;
        transform: translateY(-50%);
        width: fit-content;
        z-index: 70;
        opacity: 0;
        pointer-events: none;
        transition: 250ms opacity ease-out;
    }
    body:has(.header-menu-wrapper.active) > .media{
        left: var(--header-width);
        opacity: 1;
        pointer-events: all;
    }
    body > .media a{
        pointer-events: none;   
    }
    body:has(.header-menu-wrapper.active) > .media a{
        pointer-events: all;
    }
    .breadcrumb{
        padding-left: 0;
    }
    .intro-router{
        margin: 20px 0;
    }
    .intro-route-link svg{
        width: 60px;
    }
    .section-intro:has(.intro-attachment-link) .img-side{
        margin: 0;
    }
    .intro-img video{
        height: 500px;
    }
    .intro-img-logos{
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 20px;
    }
    .intro-img-logos img{
        max-width: 150px;
        max-height: 70px;
    }
    .intro-container{
        min-width: unset;
        width: 100%;
        padding: 30px 20px;
    }
    .padded{
        padding: 30px 20px;
    }
    .padded,
    .section-intro-detail .primary-side:has(.stain-item){
        padding-left: 20px;
    }
    .stain-red:before, .stain-blue:before {
        width: 60px;
        height: 25px;
    }

    .section-intro{
        padding-left: 0;
    }
    .section-intro .logo{
        padding-top: var(--header-width);
    }
    .section-intro .secondary-side{
        padding-right: 0 !important;
    }
    .intro-img-buttons{
        display: flex;
    }
    .intro-img-buttons a{
        padding: 10px;
    }
    .intro-img img{
        display: block;
    }
    .intro-detail-img{
        aspect-ratio: 1 / 1;
    }
    .intro-detail-img img{
        width: 100%;
    }
    .section-intro-detail .primary-side{
        padding-left: 40px;
    }
    .intro-attachment-link{
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .intro-attachment-link:after{
        position: static;
    }
    .intro-attachment-link:before{
        bottom: 25px;
        left: unset;
        right: 150px;
    }
    .section-intro-detail .primary-side > .text-container.half-width{
        width: 100%;
    }


    
    /*------------------------------------*\
    # TYPOGRAPHY
    \*------------------------------------*/
    
    .header-menu-item{
        font-size: 2rem;
        font-weight: bolder;
    }
    .header-menu-item .sub-menu{
        font-size: 1rem;
    }



    /*------------------------------------*\
    # HEADER
    \*------------------------------------*/
    
    .header-menu-button .icon .line{
        width: 25px;
        height: 2px;
    }
    .header-menu-wrapper.active .icon .line:nth-child(1){
        transform: translateY(9px) rotate(45deg);
    }
    .header-menu-wrapper.active .icon .line:nth-child(3){
        transform: translateY(-9px) rotate(-45deg);
    }
    .header-menu{
        padding: 200px 20px 20px 10px;
        border: none;
    }
    .header-menu-container{
        padding: 0;
    }
    .header-menu-wrapper .logo{
        top: 110px;
        left: 10px;
    }
    .header-menu-item.active .sub-menu{
        padding: 20px 0
    }
    .dsg-button, .intro-img-buttons .dsg-button{
        top: 70vh;
    }



    /*------------------------------------*\
    # VISION
    \*------------------------------------*/
    
    .section-vision .secondary-side:has(.denipol-logo){
        display: none;
    }



    /*------------------------------------*\
    # PARTNERS
    \*------------------------------------*/
    
    .partner-item-wrapper{
        width: 33.33%;
    }



    /*------------------------------------*\
    # BLOG
    \*------------------------------------*/
    
    .section-news{
        gap: 20px;
    }
    .section-intro-detail .primary-side .content{
        max-height: unset !important;
    }
    .section-blogs-wrapper .text-title,
    .section-news-wrapper .text-title{
        padding: 0 0 20px 0;
    }
    .blog-item-wrapper{
        width: calc(50% - 20px / 2);
    }



    /*------------------------------------*\
    # TREATMENT METHODS
    \*------------------------------------*/
    
    .section-treatment-methods .container.padded{
        padding: 20px;
    }



    /*------------------------------------*\
    # CONTACT
    \*------------------------------------*/
    
    form .inputs > input,
    form .inputs > textarea{
        width: 100%;    
        font-weight: 500;
    }
    form .inputs *::placeholder{
        font-weight: 500;
    }



    /*------------------------------------*\
    # APPOINTMENT & E-RESULTS MODALS
    \*------------------------------------*/

    .appointment-modal-wrapper,
    .e-results-modal-wrapper{
        left: 0 !important;
        display: block;
        place-content: end;
    }
    
    .appointment-modal-container,
    .e-results-modal-container{
        position: absolute;
        bottom: 0;
        left: 0;
        max-width: calc(100% - 60px);
    }

    .appointment-modal,
    .e-results-modal{
        padding: 20px;
    }

    .appointment-modal-container:before, .e-results-modal-container:before{
        transform: scale(.7);
        margin-left: 5px;
    }
    .appointment-modal-container .band-item, .e-results-modal-container .band-item{
        width: 60px;
    }
    .appointment-modal-container .band-item:before, .e-results-modal-container .band-item:before, .band-item{
        width: 50px;
        height: 50px;
    }
    .appointment-modal-wrapper:has(.appointment-personal-info-modal.active) .appointment-modal-container:before{
        opacity: 1 !important;
    }
    .appointment-modal-wrapper:has(.appointment-personal-info-modal.active) .appointment-modal-container:after{
        height: calc(100% - 50px) !important;
        padding: 20px 0 !important;
    }


    /* Personal Info Modal */

    .appointment-personal-info-modal.active{
        z-index: 2;
        position: absolute;
        left: 0;
        background-color: var(--denipol-foreground-secondary);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .25);
    }
    .appointment-modal-wrapper:has(.appointment-personal-info-modal.active) .appointment-modal-container{
        z-index: -1;
    }
    .appointment-modal-wrapper:has(.appointment-personal-info-modal.active):before{
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(5, 59, 98, 0.5);
    }



    /*------------------------------------*\
    # DOCTORS
    \*------------------------------------*/
    
    .section-doctors{
        padding: 0 !important;
    }
    .doctors{
        gap: 20px;
    }
    .doctor-item-wrapper{
        padding: 20px 20px 10px 20px;
    }
    .doctor-img{
        pointer-events: all;
    }
    .doctor-info .name{
        display: block;
    }
    
    /* Doctor Detail */

    .section-intro-detail:has(.field) .intro-detail-img{
        aspect-ratio: unset;
        width: 100%;
    }
    .section-intro-detail:has(.field) .intro-detail-img img{
        width: 75%;
        padding-top: 20px;
    }


    /*------------------------------------*\
    # MEDICAL DEPARTMENTS
    \*------------------------------------*/
    
    .section-medical-departments{
        gap: 20px;
    }
    .medical-department-item-wrapper{
        padding: 20px 20px 10px 20px;
    }
    .medical-department-img .inspect{
        background-size: 70%;
    }



    /*------------------------------------*\
    # TREATMENT METHODS
    \*------------------------------------*/
    
    .section-treatment-methods .primary-side .text-container{
        padding-top: 0 !important;
    }



    /*------------------------------------*\
    # FOOTER
    \*------------------------------------*/

    footer{
        padding: 0 !important;
    }
    footer .footer-main{
        flex-direction: column;
    }
    .footer-router,
    .footer-departments{
        width: 100%;
    }
    .footer-router{
        padding: 10px !important;
    }
    .footer-router > *{
        padding-left: 0;
    }
    .footer-router > ul:before{
        content: none;
    }
    .footer-bottom{
        position: static;
    }
    .footer-departments{
        padding: 40px 10px 0 10px;
    }
    .footer-department-img{
        height: 35px;
    }
}

@media only screen and (max-width: 768px){

    /*------------------------------------*\
    # PARTNERS
    \*------------------------------------*/
    
    .blog-item-wrapper{
        width: 100%;
    }
}

@media only screen and (max-width: 535px){

    /*------------------------------------*\
    # APPOINTMENT MODAL
    \*------------------------------------*/
    
    .choosen-doctor-img{
        display: none !important;
    }
    .choosen-doctor-info{
        width: 100%;
    }
}

@media only screen and (max-width: 512px){
    
    /*------------------------------------*\
    # INTRO
    \*------------------------------------*/

    .intro-route-link svg{
        width: 50px;
    }
    .section-intro .intro-route-link{
        font-size: .8rem;
    }



    /*------------------------------------*\
    # PARTNERS
    \*------------------------------------*/
    
    .partner-item-wrapper{
        width: 50%;
    }
}

@media only screen and (max-width: 375px){
    :root{
        font-size: 14px;
        --header-width: 70px
    }
}

@media only screen and (max-width: 325px){

    /*------------------------------------*\
    # PARTNERS
    \*------------------------------------*/
    
    .partner-item-wrapper{
        width: 100%;
    }
}