html{overflow-x: hidden;}
/* commom css */

.loader {position: fixed;top: 0;left: 0;width: 100dvw;height: 100dvh;background-color: #fff;display: flex;justify-content: center;align-items: center; z-index: 20012;}
.main-btn{background: #fc2f93;color: #fff;}
.main-btngreen{background: #00715B;color: #fff;}
button{font-size: 16px !important;font-weight: 500 !important;}
.py-100{padding-top: 100px; padding-bottom: 100px;}
.pb-200{padding-bottom: 200px;}
.pt-200{padding-top: 200px;}
.pt-100{padding-top: 100px;}
h2{font-size: 32px !important;}
img, video {max-width: 100%;height: auto;}
.shadow-mds{box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1)}
.h-100{height: 100% !important;}
.br-2xl{border-radius: 1rem 0px 0px 1rem;}
.shadow11{box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);border-radius: 20px;}

/* commom css */


/* main hero */
#main-hero{background-image: url(../images/bg-hero.webp); background-position: center; background-repeat: no-repeat; background-size: cover;}
#main-hero .box1{height: 120px; background-image: url(../images/service1.webp); background-position: center; background-repeat: no-repeat; background-size: cover;}
#main-hero .box2{height: 120px; background: rgba(0, 0, 0, 0.07000000029802322);}
#main-hero .box2 img{width: 80px;}
#main-hero .service1{border-radius: 1rem;}
#main-hero h3{font-size: 20px;}
#main-hero h2{font-size: 30px;line-height: 30px;}
/* #main-hero h1{font-size: 60px; color: #fc2f93;} */
/* #main-hero h4{font-size: 25px;color: rgba(0, 0, 0, 0.800000011920929);} */
#main-hero p{color: rgba(0, 0, 0, 0.800000011920929);}

#main-hero .rounded-tlb{border-radius: 30px 30px 0px 0px;}
#main-hero #inquire h1{ font-family: "Bebas Neue", sans-serif;font-size: 55px; line-height: 55px; background-color: #FFEAF4; padding: 10px 35px; border-radius: 0px 10px 0px 0px;}
#main-hero #inquire{top: 0;left: 50%;transform: translate(-50%, -100%);}
/* main hero */


/* Quick Link */
#quick-link .bg-light{background: rgba(252, 47, 147, 0.10000000149011612);}
/* Quick Link */


/* gallery */
.catalogue .swiper-button-prev::after, .catalogue .swiper-button-next::after{font-size: 15px !important; font-weight: 800; color: #000000;}
.catalogue .swiper-button-prev, .catalogue .swiper-button-next{height: 35px !important; width: 35px !important; border-radius: 50px; background-color: #EEEEEE;}
.catalogue .swiper-button-next{right: 0px !important}
.catalogue .swiper-button-prev{left: 0px !important;}
#gallery .bg-gallery{bottom: 0; left: 0; border-radius: 0px 0px 20px 20px; background: linear-gradient(224.68deg, rgba(255, 0, 0, 0.17) 0%, rgba(255, 255, 255, 0) 96.22%);box-shadow: inset 2px 2px 100px rgba(66, 66, 66, 0.1), inset -2px -2px 100px rgba(255, 255, 255, 0.1);backdrop-filter: blur(50px);-moz-backdrop-filter: blur(50px)}
#gallery .gallery-img{border-radius: 20px;}
/* gallery */

/* work1 */
#work .work1{width: 88px !important}
#work .arrow{position: absolute !important;top: 50%;right: -50%;transform: translate(-50%, -50%);}
/* work1 */

/* gallery */
#assurance .bg-assurance{bottom: 0; left: 0; border-radius: 0px 0px 20px 20px; background: linear-gradient(224.68deg, rgba(255, 0, 0, 0.17) 0%, rgba(255, 255, 255, 0) 96.22%);box-shadow: inset 2px 2px 100px rgba(66, 66, 66, 0.1), inset -2px -2px 100px rgba(255, 255, 255, 0.1);backdrop-filter: blur(50px);}
#assurance .assurance-img{border-radius: 20px;}
/* gallery */

/* <!-- Why You should choose CD  */
#cd .shadow1{box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);border-radius: 30px;}
#cd h2{font-size: 32px;}
/* <!-- Why You should choose CD  */

@media only screen and (max-width: 1535px) 
{#main-hero #inquire h1{font-size: 44px;}
#work .arrow{width: 40%;}}

@media only screen and (max-width: 1279px) 
{
#main-hero h5{font-size: 15px;}
#footer .w-75{width: 100%;}
#main-hero #inquire h1 {font-size: 35px;}
#assurance h4{font-size: 18px;}
#inspiration-img .inspiration-btn1{bottom: 40px;}
#inspiration-img .inspiration-btn2{bottom: 65px;}
#inspiration-img .inspiration-btn{bottom: 15px;}
}

@media only screen and (max-width: 1023px) 
{
#work .work1{width: 60px !important;}
.gallery-design{display: none !important;}
.pt-200{padding-top: 150px;}
.pb-200 {padding-bottom: 150px;}
.gallery-design-block{display: block;}}

@media only screen and (max-width: 991px) 
{
#modal2 h2{font-size: 24px !important;}
.pb-200{padding-bottom: 150px;}
#modal1 h2{font-size: 22px !important;}
.py-100{padding-top: 70px; padding-bottom: 70px;}
.pt-100{padding-top: 70px;}
#header img{width: 40% !important;}
#main-hero #inquire h1 {font-size: 55px;}
#gallery h4{font-size: 16px;}
#assurance h4{font-size: 16px;}
#work h4{font-size: 16px;}
#modal2 .sm\:max-w-lg{max-width: 50rem;}
}

@media only screen and (max-width: 767px) 
{#topbar .offer-width {width: 55%;}
.pt-200{padding-top: 300px;}
.pb-200 {padding-bottom: 300px;}
/* .res-pos{display: block !important; flex-direction: row !important; height: 70vh; overflow-y: scroll;} */

.res-pos{
  display: flex flex-column;
}


#modal1 .sm\:max-w-lg { max-width: 40rem;}
#modal2 .sm\:max-w-lg {
  max-width: 40rem;
}
#gallery h4 {font-size: 20px;}
#header img{width: 75% !important;}
#cta-bg  .flex-column{display: flex; flex-direction: column;}
#main-hero h3{text-align: center;}
#blog h6{font-size: 18px;}
#main-hero #inquire h1 {font-size: 38px !important;}
#work .d-none{display: none;}
}
@media only screen and (max-width: 639px) {

  #work .arrow2{display: none;}
  #work .d-none{display: block;}
  #work .arrow4{display: none;}
  #main-hero h1{text-align: start;}
}
@media only screen and (max-width: 575px) 
{
  h2{text-align: center !important;font-size: 30px !important; line-height: 35px;}

.text-xl{font-size: 16px !important;line-height: 20px;}
.w-22 {width: 50px !important;}
#quick-link img {width: 25% !important;}
#quick-link .bg-light{padding: 0px 15px 0px 0px;}
#main-hero h4{font-size: 22px;}
#main-hero h1{ /*font-size: 38px;line-height: 48px;*/  text-align: center !important;}
#main-hero #inquire h1{padding: 0px;}
.py-100{padding-top: 40px; padding-bottom: 40px;}
}