/* Hero Section Style */

.heroSectionWrap {
  width: 95%;
  margin: auto;
  border-radius: 0 0 50px 50px;
  background-color: var(--PrimaryColor);
  padding: 200px 0 70px 0;
}

.heroSectionContent {
  width: 80%;
}

.heroSectionInnerWrap {
  width: 90%;
  margin: auto;
}

.heroSectionBadge {
  padding: 5px 14px;
  border: solid 1px var(--WhiteColor);
  color: var(--WhiteColor);
  background: var(--BadgeBg);
  border-radius: 15px;
  font-size: var(--Font18);
  font-weight: var(--Font300);
  text-transform: uppercase;
  width: fit-content;
}

.heroSectionHeading {
  margin: 20px 0;
  font-size: var(--Font48);
  font-weight: var(--Font500);
  color: var(--WhiteColor);
  text-transform: uppercase;
}

.heroSectionDesc {
  margin: 20px 0;
  font-size: var(--Font30);
  font-weight: var(--Font400);
  color: var(--WhiteColor);
}

/* About Section Style */

.aboutSectionWrap {
  width: 85%;
  margin: auto;
  padding: 150px 0;
}

.aboutUsContentWrap {
  width: 90%;
}

.aboutUsBadge {
  padding: 5px 14px;
  border: solid 1px var(--PrimaryColor);
  color: var(--BlackColor);
  background: var(--WhiteColor);
  border-radius: 15px;
  font-size: var(--Font18);
  font-weight: var(--Font300);
  text-transform: uppercase;
  width: fit-content;
}

.aboutUsTitle {
  margin: 20px 0;
  font-size: var(--Font48);
  font-weight: var(--Font800);
  color: var(--BlackColor);
}

.aboutUsSubTitle {
  margin: 20px 0;
  font-size: var(--Font30);
  font-weight: var(--Font600);
  color: var(--BlackColor);
}

.aboutUsDesc {
  margin: 20px 0;
  font-size: var(--Font24);
  font-weight: var(--Font400);
  color: var(--BlackColor);
}

/* Why Choose Section Styles */

.whyChooseSectionWrap {
  width: 85%;
  margin: auto;
  padding-bottom: 100px;
}

.whyChooseContentWrap {
  width: 60%;
  margin: auto;
}

.whyChooseBadge {
  padding: 5px 14px;
  border: solid 1px var(--PrimaryColor);
  color: var(--BlackColor);
  background: var(--WhiteColor);
  border-radius: 15px;
  font-size: var(--Font18);
  font-weight: var(--Font300);
  text-transform: uppercase;
  width: fit-content;
  margin: 0 !important;
}

.whyChooseTitle {
  margin: 20px 0;
  font-size: var(--Font48);
  font-weight: var(--Font800);
  color: var(--BlackColor);
  text-transform: capitalize;
}

.whyChooseDesc {
  margin: 20px 0;
  font-size: var(--Font24);
  font-weight: var(--Font400);
  color: var(--BlackColor);
}

.feature-card {
  border: 1px solid var(--BorderColor);
  border-radius: 30px;
  background-color: var(--WhiteColor);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  padding: 1px;
}

.feature-card img {
  display: block;
  margin: 0 auto;
}

.feature-card h5 {
  font-weight: var(--Font500);
  font-size: var(--Font30);
  color: var(--BlackColor);
}

.feature-card p {
  font-weight: var(--Font400);
  font-size: var(--Font20);
  color: var(--BlackColor);
  margin: 0 auto;
  max-width: 80%;
  text-transform: capitalize;
}

.featureCardInner {
  margin: 10px;
  padding: 10px;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}

.featureCardInner:hover {
  background-color: var(--LightPrimary);
}

.featureCardInner img {
  width: 60px;
}

.featureCardOne {
  border-width: 0 1px 1px 0;
  border-radius: 30px 0 30px 30px;
}

.featureCardTwo {
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 30px 30px;
}

.featureCardThree {
  border-width: 0 0 1px 1px;
  border-radius: 0 0 30px 30px;
}

.featureCardFour {
  border-width: 1px 1px 0 0;
  border-radius: 30px 30px 0 30px;
}

.featureCardFive {
  border-width: 1px 1px 0 1px;
  border-radius: 30px 30px 0 0;
}

.featureCardSix {
  border-width: 1px 0 0 1px;
  border-radius: 30px 30px 30px 0;
}

/* Our Product Styles */

.OurProductSectionWrap {
  width: 85%;
  margin: auto;
  padding-bottom: 100px;
}

.OurProductContentWrap {
  width: 60%;
  margin: auto;
}

.OurProductBadge {
  padding: 5px 14px;
  border: solid 1px var(--PrimaryColor);
  color: var(--BlackColor);
  background: var(--WhiteColor);
  border-radius: 15px;
  font-size: var(--Font18);
  font-weight: var(--Font300);
  text-transform: uppercase;
  width: fit-content;
  margin: 0 !important;
}

.OurProductTitle {
  margin: 20px 0;
  font-size: var(--Font48);
  font-weight: var(--Font800);
  color: var(--BlackColor);
  text-transform: capitalize;
}

.OurProductDesc {
  margin: 20px 0;
  font-size: var(--Font24);
  font-weight: var(--Font400);
  color: var(--BlackColor);
  text-transform: capitalize;
}

.productCardWrap {
  padding: 30px 5%;
  text-align: center;
  border: solid 1px var(--BorderColor);
  border-radius: 100px;
  overflow: hidden;
}

.productCardWrap:hover {
  border: solid 1px var(--LightPrimary);
  background: var(--LightPrimary);
}

.productCardWrap .productCardImage img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  background-color: var(--WhiteColor);
  border-radius: 50px;
}

.productCardWrap .productTitle {
  font-weight: var(--Font500);
  font-size: var(--Font30);
  color: var(--BlackColor);
}

.productCardWrap .productDesc {
  font-weight: var(--Font400);
  font-size: var(--Font20);
  color: var(--BlackColor);
}

/* Our Strength Styles */

.ourStrengthSectionWrap {
  width: 85%;
  margin: auto;
  padding-bottom: 100px;
}

.ourStrengthBadge {
  padding: 5px 14px;
  border: solid 1px var(--PrimaryColor);
  color: var(--BlackColor);
  background: var(--WhiteColor);
  border-radius: 15px;
  font-size: var(--Font18);
  font-weight: var(--Font300);
  text-transform: uppercase;
  width: fit-content;
  margin: 0 !important;
}

.ourStrengthTitle {
  margin: 20px 0;
  font-size: var(--Font48);
  font-weight: var(--Font800);
  color: var(--BlackColor);
  text-transform: capitalize;
  max-width: 80%;
}

.ourStrengthDesc {
  margin: 20px 0;
  font-size: var(--Font24);
  font-weight: var(--Font400);
  color: var(--BlackColor);
  max-width: 90%;
  text-transform: capitalize;
}

.strengthCounterWrap {
  border: 1px solid var(--BorderColor);
  border-radius: 30px;
  background-color: var(--WhiteColor);
  padding: 1px;
}

.strengthCounterInner {
  margin: 10px;
  padding: 50px 20px;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}

.strengthCounterInner:hover {
  background-color: var(--LightPrimary);
}

.strengthCounterInner h5 {
  font-weight: var(--Font600);
  font-size: var(--Font48);
  color: var(--BlackColor);
}

.strengthCounterInner p {
  font-weight: var(--Font400);
  font-size: var(--Font22);
  color: var(--BlackColor);
  margin: 0 auto;
  max-width: 80%;
  text-transform: capitalize;
}

.strengthCounterOne {
  border-width: 0 1px 1px 0;
  border-radius: 0 0 30px 0;
}
.strengthCounterTwo {
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 30px;
}
.strengthCounterThree {
  border-width: 1px 1px 0 0;
  border-radius: 0 30px 0 0;
}
.strengthCounterFour {
  border-width: 1px 0 0 1px;
  border-radius: 30px 0 0 0;
}

/* Ready To Discuss Styles */
.cta-section {
  background-color: var(--LightPrimary);
  border-radius: 150px;
  padding: 70px;
  position: relative;
  overflow: hidden;
  width: 85%;
  margin: auto;
}

.cta-box {
  background-color: var(--WhiteColor);
  border-radius: 80px;
  padding: 120px 30px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.ctaBoxBg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.ctaBoxBgDesktop, .newsletterBgDesktop {
  display: block;
}

.ctaBoxBgTablet,
.ctaBoxBgMobile,
.newsletterBgTablet,
.newsletterBgMobile {
  display: none;
}

.cta-box h2 {
  font-size: var(--Font48);
  font-weight: var(--Font600);
  color: var(--BlackColor);
}

.cta-box p {
  font-size: var(--Font24);
  font-weight: var(--Font400);
  color: var(--BlackColor);
  max-width: 80%;
  margin: 0 auto;
}

.btnBlack {
  border: 1px solid var(--BlackColor);
  background-color: var(--BlackColor);
  color: var(--WhiteColor);
  border-radius: 20px;
  padding: 10px 25px;
  font-size: var(--Font20);
  font-weight: var(--Font400);
  text-decoration: none;
  transition: all 0.3s ease;
}

.btnBlack:hover {
  border: 1px solid var(--BlackColor);
  background-color: var(--WhiteColor);
  color: var(--BlackColor);
}

.btnOutlineBlack {
  border: 1px solid var(--BlackColor);
  background-color: var(--WhiteColor);
  color: var(--BlackColor);
  border-radius: 20px;
  padding: 10px 25px;
  font-size: var(--Font20);
  font-weight: var(--Font400);
  text-decoration: none;
  transition: all 0.3s ease;
}

.btnOutlineBlack:hover {
  border: 1px solid var(--BlackColor);
  background-color: var(--BlackColor);
  color: var(--WhiteColor);
}

/* News Letter Styles */

.newsletter-section {
  width: 85%;
  margin: auto;
  padding-bottom: 20px;
}

.newsletter-section .newsletter-box {
  background-color: var(--PrimaryColor);
  border-radius: 60px;
  padding: 75px 7%;
  position: relative;
  overflow: hidden;
}

.newsletterBg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.newsletter-section .newsletter-text h3 {
  font-size: var(--Font48);
  font-weight: var(--Font600);
}

.newsletter-section .newsletter-text p {
  font-size: var(--Font24);
}

.newsletter-section .newsletter-form {
  background-color: var(--LightPrimary);
  border-radius: 50px;
  padding: 5px 10px;
  align-items: center;
  display: flex;
  max-width: 45%;
  width: 100%;
  z-index: 99;
}

.newsletter-text{
    max-width: 50%;
}

.newsletter-section .newsletter-form input.form-control {
  border: none;
  border-radius: 50px;
  background-color: transparent;
  padding: 20px;
  outline: none;
  box-shadow: none;
  width: 100%;
  font-size: var(--Font24);
  font-weight: var(--Font500);
}

.newsletter-section .newsletter-form input.form-control::placeholder {
  color: var(--BlackColor);
}

.newsletter-section .newsletter-form button.btn-white {
  background-color: var(--WhiteColor);
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: var(--Font600);
  font-size: var(--Font24);
  color: var(--BlackColor);
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.newsletter-section .newsletter-form button.btn-white:hover {
  background-color: var(--PrimaryColor);
  /* hover color */
  color: var(--WhiteColor);
  cursor: pointer;
}