*{margin: 0;padding: 0;box-sizing: border-box;font-family: "Inter", sans-serif;}

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

.loader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #fff;display: flex;justify-content: center;align-items: center; z-index: 1000;}
.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;}
.bg-yellow{background-color: #FFCC00;}
.shadow11{box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);border-radius: 20px;}

/* commom css */

/* topbar */
/* #custom-popup{background-image: url(../images/bg-img.webp); background-position: center right;  background-repeat: no-repeat; background-size: cover;} */
#modal1{
  /* position: fixed; */
  /* transform: translate(-50%, -50%); */
  /* left: 50%; */
  /* top: 50%; */
  /* z-index: 11 !important;
  height: 100vh; */
}
#modal1 .br-5 {border-radius: 5px;}
#modal1 .close-btn{height: 30px; width: 30px; background-color: #373737; border-radius: 40px;position: absolute;top: 20px;right: 20px;}
#modal1 .rounded{border-radius: 0px 0.5rem 0.5rem 0px !important;}
#modal1 .rounded1{border-radius:  0.5rem 0px 0px 0.5rem !important;}
#modal1 .bg-green {background-color: #00715B;}
#modal1 .sm\:max-w-lg { max-width: 55rem;}
#modal1 .main-btn{background: #fc2f93;}
#modal1 form input{border-color: #fc2f93;}
#modal2 .br-5 {border-radius: 5px;}
#modal2 .bg1 {border-color: transparent ; border-width: 1px 0px 1px 1px;  --tw-bg-opacity: 1;background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;}
#modal2 #custom-popup{background-color: #E3E4E5;}
#modal2 .close-btn{height: 30px; width: 30px; background-color: #373737; border-radius: 40px;position: absolute;top: 20px;right: 20px;}
#modal2 .rounded{border-radius: 0px 0.5rem 0.5rem 0px !important;}
#modal2 .rounded1{border-radius:  0.5rem 0px 0px 0.5rem !important;}
#modal2 .bg-green {background-color: #00715B;}
#modal2 .sm\:max-w-lg { max-width: 55rem;}
#modal2 .main-btn{background: #fc2f93;}
#modal2 form input{border-color:transparent; outline: none;}
#modal2 .sign-up{border-radius: 0.5rem 200px 200px 0.5rem;}
#topbar{background-color: #373737;z-index: 20011;position: relative;}
/* #topbar{background-color: #373737; position: sticky; top: 0; z-index: 1001;} */
#topbar .f-btn{background-color: #fff; left: 0;box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1); border-radius: 0px !important;}
#topbar .offer-width{width: 50%;}
#topbar button{background: rgba(255, 255, 255, 0.10000000149011612); font-size: 16px !important;font-weight: 500 !important;}
#topbar .hover\:bg-slate-100{padding: 5px 10px; border-radius: 8px; display: block;}
#topbar ul li{margin-bottom: 10px;}

/* topbar */

/* header */
#header{background-color: white;transition: 0.3s;box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);}
#header{position: sticky;top: 0;z-index: 10010;background-color: white;transition: 0.3s;box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);}
#header .btn-gray{background: rgba(0, 0, 0, 0.05999999865889549); color: black;}
#header .hover\:bg-slate-100{padding: 5px 10px; border-radius: 8px; display: block;}
#header img{width: 65%;}
.mobile-menu {left: -200%;transition: 0.5s;}
.mobile-menu.active {left: 0;}
.mobile-menu ul li ul {display: none;}
.mobile-menu ul li:hover ul {display: block;}
#mb ul li:hover{background-color: #fc2f93;}
/* header */

/* 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 form input,#main-hero form select {background: rgba(0, 0, 0, 0.09000000357627869);border: none;}
#main-hero form input:focus-visible, #main-hero form select:focus-visible{outline: none;}
#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 */

/* testimonials */
 .text1 .swiper-button-prev::after, .text1 .swiper-button-next::after{font-size: 15px !important; font-weight: 800; color: #FC2F93;}
 .text1 .swiper-button-prev, .text1 .swiper-button-next{height: 35px !important; width: 35px !important; border-radius: 50px; border: 2px solid #FC2F93;}
 .text1 .swiper-button-next{right: 0px !important}
 .text1 .swiper-button-prev{left: 0px !important;}
.w-22{width: 74px !important}
.star{width: 40% !important}
.review1{top: 0; left: 50%; transform: translate(-50%, -50%)}
.review-txt{opacity: 1;margin: 5px 0;padding-left: 12px;color: #000;height: 100px;overflow-y: scroll !important;overflow-x: visible !important;white-space: pre-line !important;
}
/* testimonials */

/* 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;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 */

/* inspiration-gallery */
.br-20{border-radius: 20px;}
.design-inspiration{left: 50%; top: 50px; transform: translate(-50% , -50%);}
#inspiration-img .inspiration{border-radius: 20px;}
#inspiration-img .inspiration-btn{bottom: 20px; left: 20px; border-radius: 8px; 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);}
#inspiration-img .inspiration-btn1{bottom: 65px; left: 20px; border-radius: 8px; 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);}
#inspiration-img .inspiration-btn2{bottom: 100px; left: 20px; border-radius: 8px; 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);}
#inspiration-img .inspiration-btn h6{font-size: 14px;}
#inspiration-img .inspiration-btn1 h6{font-size: 14px;}
#inspiration-img .inspiration-btn2 h6{font-size: 14px;}
.gallery-design-block{display: none;}
.gallery-design{display: block;}
/* inspiration-gallery */

/* cta */
#cta-bg{background-color: #FC2F93; border-radius: 30px;}
#cta-bg img{border-radius: 30px 0px 00px 30px;}
#cta-bg h5{font-size: 20px;}
#cta-bg h4{font-size: 26px;color: rgba(255, 255, 255, 0.6000000238418579);}
#cta-bg button{border-radius: 100px;}
/* cta */

/* video-testimonial */
#video-testimonials .video-box{box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);}
#video-testimonials .video-box p{color: rgba(60, 60, 67, 0.5);}
/* video-testimonial */

/* <!-- 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  */

/* blog */
#blog .blog-box {border: 0.9051724076271057px solid rgba(0, 0, 0, 0.2);box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1); border-radius: 20px;}
#blog .blog-btn{top: 20px; left: 20px; border-radius: 8px;background: rgba(0, 0, 0, 0.4000000059604645);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);}
#blog .blog{border-radius: 20px 20px 0px 0px;}
#blog h5{font-size: 18px;color: rgba(0, 0, 0, 0.5);}

/* blog */

/* accordian */
#faq label:after {content: '+'; position: absolute;right: 1em;color: #000000;}
#faq input:checked + label:after {content: '-';line-height: .8em;}
#faq .accordion__content{max-height: 0em;transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);}
#faq input[name='panel']:checked ~ .accordion__content {max-height: 50em;}
/* accordian */

/* footer */
.cta-position{position: absolute;transform: translate(-50%, -50%);left: 50%;width: 100%;}
.bg-gray1{background-color: #373737; position: relative;}
#footer h1{font-size: 40px; font-weight: 700;}
#footer ul li{margin-bottom: 10px;}
#footer h5{font-size: 22px;}
#footer .w-75{width: 75%;}
#footer{background-color: #1E1E1E;}
#footer input:focus-visible{outline: none;}
#footer input{border-radius: 100px 0px 0px 100px;}
#footer button{border-radius: 0px 100px 100px 0px;}
#footer .w-25{width: 25%;}
#footer .border-t{border-top: 1px solid #ffffff49;}
/* footer */



@media only screen and (max-width: 1535px) 
{#main-hero #inquire h1{font-size: 44px;}
#cta-bg h2{font-size: 18px;}
#cta-bg h5{font-size: 20px;}
#cta-bg h4{font-size: 18px !important;} 
#work .arrow{width: 40%;}}

@media only screen and (max-width: 1279px) 
{#topbar .offer-width {width: 70%;}
#main-hero h5{font-size: 15px;}
#cta-bg h2{font-size: 20px !important;}
#footer .w-75{width: 100%;}
#cta-bg h5{font-size: 20px;}
#cta-bg h4{font-size: 16px !important;} 
#main-hero #inquire h1 {font-size: 35px;}
#quick-link .bg-light{padding: 0px 30px 0px 0px;}
#quick-link img{width: 35%;}
#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) 
{#topbar .offer-width {width: 95%;}
#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;}
#quick-link img{width: 45%;}}

@media only screen and (max-width: 991px) 
{#topbar .offer-width {width: 100%;}
#modal2 h2{font-size: 24px !important;}
.pb-200{padding-bottom: 150px;}
/* #modal1 .sm\:max-w-lg { max-width: 44rem;} */
#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;}
#cta-bg img{border-radius: 30px !important;}
/* #footer{padding-top: 200px !important;} */
#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;}
#work .d-none{display: none;}
}
@media only screen and (max-width: 639px) {
.pt-200{padding-top: 270px;}
.pb-200 {padding-bottom: 270px;}
  #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;}
  .pt-100{padding-top: 40px;}
.pt-200{padding-top: 230px;}
.pb-200 {padding-bottom: 230px;}
.text-xl{font-size: 16px !important;}
.w-22 {width: 50px !important;}
#quick-link img {width: 25%;}
#quick-link .bg-light{padding: 0px 15px 0px 0px;}
#main-hero h4{font-size: 22px;}
#main-hero h1{font-size: 38px;line-height: 48px;}
#main-hero #inquire h1{padding: 0px;}
.py-100{padding-top: 40px; padding-bottom: 40px;}
#header img{width: 50% !important;}
#topbar .offer-width {width: 70%;}
#cta-bg h2{font-size: 16px;}
#cta-bg h5{font-size: 20px;}
#cta-bg h4{font-size: 16px !important;} 
#topbar button{font-size: 14px !important;}
}
@media only screen and (max-width: 490px) 
{#topbar .offer-width {width: 85%;}
#home .box2 {height: 90px !important;}
#home h1 { font-size: 34px !important;line-height: 42px !important;}
#home .box2 img { width: 45px !important;}
#home .box1 { height: 90px !important;}
#header button{font-size: 14px !important;}}
@media only screen and (max-width: 416px) 
{#topbar .px-3 {padding-left: 8px;padding-right: 8px;
}}
@media only screen and (max-width: 392px) 
{#topbar button{font-size: 13px !important;}
#topbar .offer-width {width: 100%;}
#header button{font-size: 12px !important;}
}

.green {
    background-color: #00715B;
    color: #fff !important;
    border-radius: 100px;
    font-size: 18px;
    border: 1px solid #ffffff00;
}