/* whatsappButtonRound */

.whatsappButtonRound {

  min-width: 35px;

  min-height: 35px;

  font-size: 1.8rem;

  border-radius: 100%;

  background-color: var(--whatsappLight);

  box-shadow: 2px 2px 5px black;



  padding-top: 0.2rem;

  position: relative;

  z-index: 1;

  overflow: hidden;

  transition: 200ms;

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  padding-bottom: 0.1rem;

}

.whatsappButtonRound::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background-color: var(--whatsappDark);

  z-index: -1;

  transform: scale(0);

  transition: 100ms;

  border-radius: 100%;

}

.whatsappButtonRound:hover::before {

  transform: scale(1);

}

.whatsappButtonRound:hover i {

  transform: scale(1.1);

}



/* footer Title */

.footerTitle {

  font-size: 1rem;

  margin-bottom: 1.5rem;

}



/* banner section */

.bannerSection {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 1rem;

}

.bannerSection h1,

.bannerSection .commonTitle {

  width: 100%;

  padding: 0.3rem 0.6rem;

  text-align: center;

  font-size: max(3vw, 2rem);

  width: max(80%, 270px);

  text-transform: capitalize;

  width: fit-content;

  font-weight: bold;

}

.bannerSection.BottomBorder h1,

.bannerSection.BottomBorder h2,

.bannerSection.BottomBorder .commonTitle {

  border-bottom: 2px solid black;

}



/* commonTitle */

.commonTitle {

  font-weight: bold;

  text-transform: capitalize;

}

/* social LInks css */

.socialLinks a {

  width: 30px;

  height: 30px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 100%;

  background-color: white;

}

.socialLinks a i {

  font-size: 1.2rem;

  transition: 200ms;

}

.socialLinks a:nth-child(1) i {

  color: var(--facebook);

}

.socialLinks a:nth-child(2) i {

  color: var(--twitter);

}

.socialLinks a:nth-child(3) i {

  color: var(--youtube);

}

.socialLinks a:nth-child(4) i {

  color: var(--linkedin);

}

.socialLinks a:nth-child(5) i {

  color: var(--pintrest);

}

.socialLinks a:nth-child(6) i {

  color: var(--instagram);

}

.socialLinks a:nth-child(7) i {

  color: var(--whatsappLight);

}

.socialLinks a:hover i {

  font-size: 1.5rem;

  color: var(--brandColor);

}



/* sticky buttons */

.whatsappStickyButton,

.callStcikyButton {

  width: 50px;

  height: 50px;

  background-color: red;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 2rem;

  color: white;

  border-radius: 100%;

  box-shadow: 2px 2px 5px black;

}

.whatsappStickyButton {

  position: fixed;

  background-color: var(--whatsappLight);

  right: 15px;

  bottom: 15px;

}

.callStcikyButton {

  position: fixed;

  left: 15px;

  bottom: 15px;

}



/* form submit button */

button[type="submit"],

.commonButton {

  border-radius: 0;

  background-color: var(--darkBlue);

  color: white;

  font-weight: 600;

  text-transform: uppercase;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 1;

  padding: 0.5rem 1rem;

  transition: 300ms;

  border: 2px solid white;

  box-shadow: 2px 2px 5px black;

}

.commonButton {

  gap: 0.6rem;

  font-size: 1.2rem;

  min-width: 12rem;

  max-width: 12rem;

}

button[type="submit"]:hover,

.commonButton:hover {

  border-radius: 2rem;

}



/* form */

.formErrorSpan {

  color: red;

  text-transform: capitalize;

  font-weight: bold;

  font-size: 1.2rem;

  margin-top: -2rem;

}



/* whatsapp Button */



.RoundButton {

  width: 50px;

  height: 50px;

  border-radius: 100%;

  border: 2px solid white;

  font-size: 1.5rem;

  display: flex;

  justify-content: center;

  align-items: center;

  color: white;

  box-shadow: 2px 2px 5px black;

  transition: 200ms;

}

.RoundButton:hover {

  transform: scaleY(1.1);

}



.normalWhatsappButton {

  background-color: var(--whatsappDark);

  padding: 0.6rem 1rem;

  border-radius: 0.6rem;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0.5rem;

  color: white;

  text-transform: uppercase;

  max-width: 10rem;

  border: 2px solid white;

  transition: 200ms;

  transform-origin: left;

}

.normalWhatsappButton:hover {

  transform: scaleX(1.1);

}

.normalWhatsappButton i {

  font-size: 1.2rem;

}



.redColor {

  color: red;

}

.blueColor {

  color: #414f9b;

}

.whiteColor {

  color: white;

}

.maroonColor {

  color: #7e0000;

}

.purpleColor {

  color: #800080;

}

.facebookColor {

  color: var(--facebook);

}

.whatsappColor {

  color: var(--whatsappLight);

}

.instaColor {

  color: var(--instagram);

}

.skypeColor {

  color: var(--skype);

}

.brandColor{

  color: var(--brandColor);

}



.darkBlueBg {

  background-color: #130087;

}

.greenBg {

  background-color: #8aff87;

}

.redBg {

  background-color: red;

}



.whatsappBg {

  background-color: var(--whatsappDark);

}

.callBg {

  background-color: var(--youtube);

}



.brandBg {

  background-color: var(--brandColor);

}

.brandDarkBlue{

  background-color: var(--darkBlue);

}

.lightBrandBg{

  background-color: #fcb90046;

}

.purpleBg {

  background-color: #7030A0;

}

.skypeBg {

  background-color: var(--skype);

}

.facebookBg {

  background-color: var(--facebook);

}

.whatsappLightBg {

  background-color: var(--whatsappLight);

}

.instaBg {

  background-color: var(--instagram);

}

.lighBlueBg{

  background-color: #2F75B5;

}

/* ================titleBanner */

.titleBanner {

  background-color: var(--darkBlue);

  width: 100%;

  text-align: center;

  margin: 0.5rem auto;

  max-width: 1200px;

  color: white;

  position: relative;

  isolation: isolate;

  overflow: hidden;

  padding-inline: 1rem;

  text-transform: capitalize;

}

.titleBanner::before {

  content: "";

  position: absolute;

  width: 200px;

  height: 100%;

  background-color: var(--brandColor);

  top: 0;

  right: -7rem;

  transform: rotate(45deg);

  z-index: -1;

}

.titleBanner::after{

  content: "";

  position: absolute;

  width: 200px;

  height: 100%;

  background-color: var(--brandColor);

  top: 0;

  left: -7rem;

  transform: rotate(45deg);

  z-index: -1;

  }



  .filter-invert{

    filter: invert(100%);

  }



  .seoCostCalucultorLinkButton{

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: var(--darkBlue);

    color: white;

    padding: 0.5rem 1rem;

    font-weight: bold;

    text-transform: capitalize;

    border: 2px solid white;

    transition: 200ms cubic-bezier(0.165, 0.84, 0.44, 1);

    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.288);

  }

  .seoCostCalucultorLinkButton:hover{

    background-color: var(--brandColor);

    color: black;



  }





  .grid-6-col{

    display: grid;

    gap: 1rem;

    grid-auto-flow: row;

    grid-template-columns: repeat(6,1fr);

  }

.cardLink{

  display: flex;

  flex-direction: column;

  align-items: center;

  height: 100%;

  background-color: var(--brandColor);

  text-align: center;

  padding:0.5rem;

  border-radius: 0.8rem;

  border: 2px solid white;

  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.363);

  transform-style: preserve-3d;

}



.cardLink .imgBox{

  width: 50px;

  transform: translateZ(100px);

}



@media (min-width:768px) {

  .text-md-left{

    text-align: left !important;

  }

}

  @media (max-width:768px) {

    .grid-6-col{

      grid-template-columns: repeat(4,1fr);

    }

  }

  @media (max-width:600px) {

    .grid-6-col{

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

    }

  }

  @media (max-width:480px) {

    .grid-6-col{

      grid-template-columns: repeat(2,1fr);

    }

  }