/* STYLE GUIDE STARTS HERE */

/* Styles

Color Theory-
Primary color: #2C5F77
Secondary color: #BB2463
Optional color: #C45A34
Body Text color: #2a2a2a

HEADING FONT:- font-family: "B612", sans-serif;

BODY FONT:- font-family: "Cabin", sans-serif;

*/


h1, h2, h3, h4, h5, h6{ font-family: "B612", sans-serif !important;}
h1 {font-size:45px !important}
h2 {font-size:40px !important}
h3 {font-size:35px !important}
h4 {font-size:30px !important}
h5 {font-size:25px !important}
h6 {font-size:20px !important}

.b1 {font-size:18px !important}
.b2 {font-size:16px !important}
.b3 {font-size:14px !important}
.b4 {font-size:12px !important}
.b5 {font-size:11px !important}
.b6 {font-size:10px !important}

p, span, a, li, ul, label {font-family: "Cabin", sans-serif !important; }

.mt-10 {margin-top: 10px !important;}
.mt-60 {margin-top: 60px !important;}
.mt-80 {margin-top: 80px !important;}

.my-30 { margin: 30px 0px !important;}

.mb-10 {margin-bottom: 10px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-30 {margin-bottom: 30px !important;}
.mb-40 {margin-bottom: 40px !important;}
.mb-50 {margin-bottom: 50px !important;}
.mb-60 {margin-bottom: 60px !important;}

.me-10 {margin-right: 10px !important;}

.pt-100 {padding-top: 100px !important;}
.pt-80 {padding-top: 80px !important;} 
.pt-60 {padding-top: 60px !important;}
.pt-50 {padding-top: 50px !important;}
.pt-40 {padding-top: 40px !important;}
.pt-30 {padding-top: 30px !important;}
.pt-20 {padding-top: 20px !important;}
.pt-10 {padding-top: 10px !important;}

.py-60 {padding: 60px 0px !important;}
.py-50 {padding: 50px 0px  !important;}
.py-40 {padding: 40px 0px !important;}
.py-30 {padding: 30px 0px  !important;}
.py-20 {padding: 20px 0px !important;}
.py-10 {padding: 10px 0px !important;}


.pb-60 { padding-bottom: 60px !important;}
.pb-50 { padding-bottom: 50px !important;}
.pb-40 { padding-bottom: 40px !important;}
.pb-30 { padding-bottom: 30px !important;}
.pb-20 { padding-bottom: 20px !important;}
.pb-10 { padding-bottom: 10px !important;}

.ps-120 { padding-left: 120px !important;}

.border-s-btn {border: 1px solid #C45A34 !important; color: #C45A34 !important; border-radius: 50px !important; padding: 10px 30px !important;}
.border-s-btn:hover { background-color: #C45A34 !important; color: #fff !important;}

.border-w-btn { border-radius: 50px !important; padding: 10px 30px !important;}
.border-w-btn:hover { color: #BB2463 !important;}

.border-primary-btn { background-color: #fff !important; color: #2C5F77 !important; border: 2px solid #2C5F77 !important; border-radius: 50px !important; padding: 10px 30px !important; width: auto;}
.border-primary-btn:hover { background-color: #2C5F77 !important; color: #ffffff !important; }

.fill-w-btn { background-color: #fff !important; color: #BB2463 !important; border: none !important; border-radius: 50px !important; padding: 10px 30px !important;}
.fill-w-btn:hover { background-color: #CF6695 !important; color: #fff !important;}

.fill-primary-btn { background-color: #2C5F77 !important; color: #fff !important; border: none !important; border-radius: 50px !important; padding: 10px 30px !important; }
.fill-primary-btn:hover { background-color: #BB2463 !important; color: #ffffff !important; }

.fill-secondary-btn { background-color: #C45A34 !important; color: #fff !important; border: none !important; border-radius: 50px !important; padding: 10px 30px !important; }
.fill-secondary-btn:hover { background-color: #2C5F77 !important; }



/* BANNER SECTION STARTS HERE */

.clear {clear: both;}

.banner-section { background-image:url('../images/bannerBG.png'); background-size:cover; background-position:center;}

.header-cls { background: transparent; position: relative;}
.menu-container { background-color: #BB2463; padding :15px 30px !important; margin: 0px 90px 10px; border-radius: 10px;}

.logo { transition: transform 0.3s ease;}
.logo:hover { transform: scale(1.05);}

.top-navigation-container { padding: 0px !important;}
.top-nav-contactinfo a {text-decoration: none; color: #fff; }
.top-nav-contactinfo a:hover { color: #52B0DD; }
.top-nav-socialmedia a {text-decoration: none; color: #C45A34; transition: transform 0.3s ease; }
.top-nav-socialmedia a:hover { transform: scale(1.1);}
.media-cir-div { background-color: #fff; border-radius: 15px; height: 30px; width: 30px; }

.header-container { background-color: #BB2463; border-radius: 10px; padding: 10px 20px !important;}

.navigation ul li a { display: flex; justify-content: space-around; color: #fff !important; padding: 5px 12px !important; text-transform: capitalize !important;}
.navigation ul li a:hover { color: #EBBDD2 !important; }
.navigation nav { height: auto !important; right: 80px !important;}

.navigation ul li .active-div { background-color: #fff; border-radius: 50px;  width: auto; color: #BB2463 !important; padding: 10px 20px !important; margin-top: 5px !important;}
.banner-content { text-align: left !important; padding: 70px 0px 0px 110px !important; }
.banner-content h2 { transition: transform 0.3s ease;}
.banner-content h2:hover { transform: translateX(-4px) scale(1.05);}
.banner-content p { transition: transform 0.3s ease;}
.banner-content p:hover { transform: translateX(-4px) scale(1.05);}

.banner-img { padding-right: 110px !important; transition: transform 0.3s ease !important;}
.banner-img:hover { transform: translateX(6px) !important;  }

.left-caro {  position: relative !important; right: 50px !important;}
.right-caro {  position: relative !important; left: 40px !important;}




/* ABOUT US SECTION STARTS HERE */

.aboutus-img { transition: transform 0.3s ease !important;}
.aboutus-img:hover { filter: saturate(1.1) brightness(1.05); transform: translateX(-6px) !important;}

.aboutus-section { background-image:url('../images/aboutBG.png'); background-size:cover; background-position:center;}
.aboutus-h6 { color: #BB2463; transition: transform 0.3s ease;}
.aboutus-h6:hover { transform: translateX(-4px) scale(1.03);}

.aboutus-h1 { color: #2C5F77; transition: transform 0.3s ease;}
.aboutus-h1:hover { transform: translateX(-4px) scale(1.03);}

.aboutus-p-clr { color: #2a2a2a !important; transition: transform 0.3s ease;}
.aboutus-p-clr:hover { transform: translateX(-4px) scale(1.03);}


.aboutus-circle { height: 140px; width: 140px !important; border-radius: 80px; background: linear-gradient(to bottom, #ffffff 90%, #2C5F77 100%); color: #2a2a2a !important; border: 2px solid #2C5F77; padding: 13px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: transform 0.3s ease !important;}
.aboutus-circle:hover { border: 3px solid #BB2463; background: linear-gradient(to bottom, #ffffff 90%, #BB2463 100%); color: #BB2463 !important; transform: translateX(-4px) scale(1.05) !important;}

.icon-cir { height: 40px; width: 40px !important; border-radius: 40px; background-color: #2C5F77;  }
.icon-cir:hover { background-color: #BB2463;}


/* HOW IT WORKS SECTION STARTS HERE */

.box { background-color: #2C5F77; border-radius: 10px; text-align: center; color: #fff; padding: 20px; transition: transform 0.3s ease !important;}
.box:hover { background-color: #BB2463; border-radius: 10px; text-align: center; color: #fff; padding: 20px; transform: translate(-6px) scale(1.1) !important;}
.box-cir { height: 60px; width: 60px; background-color: #809FAD; border-radius: 50px; border: 4px solid white; position: relative; left: 115px; bottom: 50px; color: #fff; }
.box-h6 { margin: -25px 0px 0px;}


/* DESIGN ROLES SECTION STARTS HERE */

.design-roles-section { background-color: #F6E6E1;}
.role { background: linear-gradient(to bottom, #ffffff, #52B0DD); border-radius: 10px; padding: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: transform 0.3s ease !important;}
.role:hover { background: linear-gradient(to bottom, #ffffff, #EBBDD2); box-shadow: 0 2px 5px #2a2a2a; transform: scale(1.05) !important;}
.role-icon { height: 100px; width: 100px;}


/* PLANS SECTION STARTS HERE */

.plan { background: linear-gradient(to bottom, #BB2463 20%, #ffffff 50%); border-radius: 10px; border-bottom: 1px solid #BB2463; padding: 30px 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: transform 0.3s ease !important;}
.plan:hover { background: linear-gradient(to bottom, #809FAD, #ffffff); box-shadow: 0 2px 5px #2a2a2a; border: none; transform: scale(1.05) !important;}
.plan-icon { height: 100px; width: 100px; border-radius: 100px; border: 5px solid white; background-color: #BB2463; display: flex; justify-content: center; align-items: center;}
.plan-h5 { color: #2C5F77;}
.pointer-cir { width: 20px !important; border-radius: 15px; background-color: #BB2463; display: flex; justify-content: center; align-items: center; color: #fff;}
.pointer-con { width: fit-content !important;}


/* TESTIMONIAL SECTION STARTS HERE */

.Testimonial-section { background-image: url(../images/testimonialBG.png); background-size: cover; background-position: center; text-align: center;}

.testi-card h4 { color: #2C5F77;}
.testi-card span { color: #2C5F77;}
.testi-card p { padding: 20px 300px 0px;}

.testi-indi { position: relative !important; top: 20px; color: #2C5F77 !important;}
.carousal-testi { color: #C45A34 !important;}

.testimonial-slider { display: flex !important; justify-content: center; align-items: center; flex-direction: row !important;}



/* CONTACT US SECTION STARTS HERE */

.contact-section { background-image: url(../images/contactBG.png); background-size: cover; background-position: center;}
.contact-img, .contact-content { background: linear-gradient( to bottom, #ffffff80 90%, #BD2A6780 100%); border-radius: 30px; padding: 25px 20px 60px; transition: transform 0.3s ease !important;}
.contact-img:hover{ transform: translate(-8px) scale(1.02) !important; }
.contact-content:hover { transform: translate(8px) scale(1.02) !important;}

.contact-label { color: #BB2463 !important;}
.contact-input { background:none !important; border: 1px solid #BB2463 !important; border-radius: 25px!important; padding: 10px 20px !important;}
::placeholder {color: #838383 !important; opacity: 0.8 !important; }

.con-info-a .call-con span { text-decoration: none; }
.input-cir { height: 25px; width: 20px !important; border-radius: 20px; background-color: #C45A34; color: #fff; }
.call-btn { text-decoration: none !important; transition: transform 0.3s ease;}
.call-btn:hover { transform: scale(1.02);}

.call-btn-outer, .switch-outer { text-decoration: none !important;}
.call-btn-outer { margin: 0px 0px 0px 15px; transition: transform 0.3s ease !important;}
.call-btn-outer:hover { transform: scale(1.03) !important; color: #C45A34; }


/* GALLERY SECTION STARTS HERE */

.switch { background-color: #fff !important; border-radius: 50px !important;  color: #BB2463; box-shadow: 0 1px 1px #2a2a2a; padding: 8px 10px !important; border-top: 1px solid #BB2463 !important; transition: transform 0.3s ease;}

.switch-active, .switch:hover { background-color: #BB2463 !important; color: #fff !important; box-shadow: 0 2px 5px #2a2a2a; transform: scale(1.05);}


.gallery-item {
  margin-bottom: 20px;
  display: none;
  transition: transform 0.3s ease;
}

.gallery-item:hover { transform: scale(1.05);}

.gallery-item img {
  border-radius: 18px;
  /* border: 2px solid #f36c21; */
}

/* .gallery-item:hover { mask-image: url(../images/gallery1.png); background-color: #BB2463 !important;} */

.filter-btn {
  border-radius: 25px;
  padding: 8px 25px;
  margin: 5px;
  border: 1px solid #BB2463;
  color: #BB2463;
  background: #fff;
}

.filter-btn.active,
.filter-btn:hover {
  background-color: #BB2463 !important; color: #fff !important; box-shadow: 0 2px 5px #2a2a2a;
}

/* .img-overlay {
  position: absolute;
  inset: 0;
  background-color: #BB2463;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.gallery-item img .img-overlay {
  opacity: 0.7; 
} 
*/


/* SUBSCRIBE SECTION STARTS HERE */

.Subscribe-container { background-image: url(../images/subscribeBG.png); background-position: center; background-size: cover; border-radius: 20px 20px 0px 0px; padding: 30px !important; transition: transform 0.3s ease;}
.Subscribe-container:hover { transform: scaleX(1.02);}

/* FOOTER SECTION STARTS HERE */

.footer-section { background-image: url(../images/footerBG.png); background-position: center; background-size: cover; padding: 240px 0px 0px; }
.footer-links { padding-left: 60px !important;}
.footer-links ul { list-style: none;  }
.footer-links ul li {display:inline-block;  padding: 10px; color: #fff; transition: transform 0.3s ease;}
.footer-links ul li:hover {display:inline-block;  padding: 10px; color: #fff; transform: scale(1.15);} 
.footer-links ul li a:hover {color: #52B0DD; } 
.footer-links ul li a {color: #fff; text-decoration: none;} 
.footer-socialmedia a { text-decoration: none; color: #2C5F77; transition: transform 0.3s ease;}
.footer-socialmedia a:hover { transform: scale(1.15);}

.footer-logo img { transition: transform 0.3s ease;}
.footer-logo img:hover {transform: translate(-6px) scale(1.05);}
.footer-logo p { transition: transform 0.3s ease;}
.footer-logo p:hover {transform: translateX(6px) scale(1.05);}

.copyright { border: 1px solid #fff; color: #fff; padding: 10px;}