/**

 * *

 * Style BY: 

 * Last Updated: 28-06

 * */

.popup {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    justify-content: center;

    align-items: center;

    z-index: 999;

}



#uid1 .popup-content { width:56%; }

.popup-content { background: #fff;  padding: 10px;  border-radius: 5px;  position: relative;  text-align: center;  min-width: 70%; width:auto; }



.close-btn { position: absolute; top: 5px; right:4px; font-size: 32px; cursor: pointer; color: #000; line-height: 32px; height: 38px; width: 38px;

    border: 1px solid #000; border-radius: 50%; background: #fff; z-index: 9;

}

.modal-dialog { width: 75%; margin: 0 auto; }



#ba-content .popup-content { width: 65%; }

/*

.beforeaftercontent { display:flex; }

.imagesection {

    background: rgba(246, 246, 246, 1);

    display: flex;

    padding: 7px;

    border-radius: 2px;

    border: 1px solid rgba(0, 0, 0, 0.1);

    margin-right: 10px;

    width:335px; 

}*/

.imagesection span{ font-size:10px; text-transform: uppercase; font-weight: 400; padding-top: 5px; }



.beforeaftercontent {

    display: grid;

    grid-template-columns: repeat(3, 1fr); /* 3 columns */

    grid-template-rows: repeat(2, auto); /* 2 rows */

    gap: 20px; /* Adjust gap as needed */

}



.imagesection {

    display: flex;

    /* flex-direction: column; */

    align-items: center;

    justify-content: center;

    border-radius: 2px;

    border: 1px solid rgba(0, 0, 0, 0.1);

    background: rgba(246, 246, 246, 1);

    padding: 7px;

}

.imagesection .image-before{ margin-right: 5px; } 

.image-before,

.image-after {

    display: flex;

    flex-direction: column;

    align-items: center;

}



/*.image-before img,

.image-after img {

    margin-bottom: 5px; /* Space between image and span */

}*/

.twocol-section.multiple-row h2 { font-weight:600; text-transform:uppercase; }

.twocol-section.multiple-row .twocol-row .content-col { width:40.5% }

.twocol-section.multiple-row .twocol-row .image-col { width:41.7%; }

.twocol-section.single-row .twocol-row .image-col { height:auto; }

p.bigger-text { font-size:20px; letter-spacing:0.5px }



.twocol-section.single-row .twocol-row ul li {

    list-style: none;

    padding-left: 0px;

    position: relative;

}

.twocol-section.single-row .twocol-row ul {

    position: relative;

    padding-left: 30px;

    line-height: 30px;

}



.popup-footernote { font-size: 15px; padding: 20px 0; }

.pb-120 { padding-bottom:120px; }

/* header new logo added */

.header-logo .logo img { height:77px; }

.show-mobile { display:none; }

.popup-content iframe { width:100% }



.gray-bg { background:#f2f2f2; }

.image-bg {

    background-image: url(../Images/bg-gray-tiles-image.jpeg);

    background-repeat: no-repeat;

    background-position: top center;

}

.image-bg .button-primary:after { background: rgba(36, 143, 151, 1); border-radius: 8px; }

.art-facility-section .inner-container .image-col .image { overflow:hidden; }

.image-container {

    display: flex;

    transition: transform 3.0s ease;

}

.image-container img {

    width: 380px;

    height: auto !important;

    transition: transform 2.1s ease;

}



/* Thankyou page design */

.thankyou-content { max-width: 660px; z-index: 9; position: relative; }

.thankyou-content h1 { text-transform:uppercase; font-size: 48px; }

.thankyou-content h3 { text-transform:uppercase; }

.thankyou-content .thankyou-banner-content p { margin-bottom:45px; }

.thankyou-banner-content { background: rgba(255, 255, 255, 0.14); padding: 32px; border-radius: 12px; }

.thankyou-content .thankyou-banner-content ul { padding-left:20px; }

/*.getintouch { padding-top: 40px; }

.getintouch .title { font-size: 24px; text-transform: uppercase; }

.getintouch .reachus { display: inline-flex; width: 100%; }*/

/*.getintouch .reachus img { width:48px; height:48px; padding-right: 8px; }*/

.reachus .call { width:50% }

.reachus p { display: inline; font-weight: 300; }



/* BEfore & After Slider */

.beforeafterslides .items, .beforeafterslides .item { display:inline-flex; }

.beforeafterslides .item .before, .beforeafterslides .item .after {

    flex-direction: column;

    align-items: center;

    display: flex;

}

.beforeafterslides .item span { 

    color: #fff;

    width: 100%;

    text-align: center;

    padding: 8px; 

}

.beforeafterslides .item .paydarlogoo{ background: #fff;

    width: 40px !important;

    height: 40px !important;

    padding: 5px 8px;

    position: absolute;

    left: 45%;

    bottom: 15px;

    border-radius: 44px; 

}

.items .owl-nav {

    position: absolute;

    right: 0;

    top: -50px;

} 

.owl-theme .owl-nav { margin-top:0; }



/* Swiper */

.swiper-slide { justify-content:center; }

.swiper-slide div { width:auto; height:auto; }

.inline-gallery-controls { margin-bottom:25px; display: inline-flex; }

.swiper-nav { display: inline-flex; position: absolute;  right: 0; }

.swiper-container {

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1;

}

.beforeafterslides .inline-gallery-next, .beforeafterslides .inline-gallery-prev {

    height: 40px;

    width: 40px;

    flex-basis: 40px;

    transition: opacity 0.4s ease;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='square' stroke-linejoin='arcs'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");

    background-size: 20px;

    background-position: center;

    background-repeat: no-repeat;

    border-radius: 50px;

    margin-left: 5px;

}

.inline-gallery-controls .inline-gallery-next.swiper-button-disabled, 

.inline-gallery-controls .inline-gallery-prev.swiper-button-disabled { opacity:0.5; }

.swiper-pagination-custom { line-height:25px; }


.beforeafterslides .inline-gallery-prev {

    margin-right: 2px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='square' stroke-linejoin='arcs'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");

}

#_builder-form { border:0px !important; }

.fb-notice { border-top:1px solid #e0e0e0; margin-top:20px; }
footer .text-center { padding-top:25px; }

@media (max-width: 767px) {

    .twocol-section.multiple-row .twocol-row .content-col,

    .twocol-section.multiple-row .twocol-row .image-col { width:100% }

/*    .twocol-section.multiple-row .content-col h2 { text-align:center;  }*/

    .frame-space-before-extra-large, .frame-space-after-large { margin-top: 2em; }

    .header .header-row .header-logo img { height:54px; }

    /*.header .call > li .icon { width: 35px;

        height: 35px; margin-right: 5px; 

    }*/

    .header .header-row .header-navigation { margin-right: 0px !important; }

    .hide-mobile { display:none !important; }

    .show-mobile { display:block !important; }

    .header ul.call { display:inline-flex; }

    ul.call li a.button-primary { padding: 9px 22px; }

    #wrapper { padding-top: 50px; }



    .header .call li:first-child { padding-right:5px; }

/*    button#beforeafter-popup { display:none; }*/



    #ba-content .popup-content { max-height: 620px; overflow-y: scroll; }

    #uid1 .popup-content, #uid7 .popup-content { width:97%; }

    .popup-content iframe { width:100% }

    .backto-top { right:40px; }

    .beforeaftercontent { grid-template-columns: repeat(1, 1fr); }

    .home-banner-content .button-primary { width:100% }

    .twocol-section .twocol-row .content-col {

        order: 1;

    }

    .twocol-section .twocol-row .image-col { order: 2; padding-top:40px; margin-bottom: 0; }

    .twocol-row {

        padding-bottom: 0px;

    }

    .beforeafterslides .owl-nav { width:100%; text-align:center; }

    .beforeafterslides .owl-item.active{ text-align:center; }

    .swiper-container { margin-bottom:20px; }

/*    .popup .popup-content video { height:auto; }*/

}

@media (max-width:535) {

    .header .call > li .icon p{ display:none; }

}