*,

::before,

::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



:root {

  --brandColor: #fcb800;

  --secondColor: #fff500;

  --thirdColor: #7e0000;

  --whatsappLight: #25d366;

  --whatsappDark: #128c7e;

  --footerBg: #f2f2f2;

  --darkBlue: #172731;

  --veryLightGreen: #d3ffd9;



  --facebook: #4169e1;

  --twitter: #00bfff;

  --skype: #00bfff;

  --youtube: #ff0000;

  --linkedin: #0077b5;

  --pintrest: #e60023;

  --instagram: #e95950;



  --searchBoxRadius: 2rem;

}



ul {

  padding: 0;

  margin: 0;

}



ul li {

  list-style: none;

}



a {

  text-decoration: none;

  color: inherit;

}



img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



body {

  color: black;

  font-family: Calibri;

}



p {

  margin-bottom: 0;

}



.homeStartContactForm {

  position: sticky;

  top: 100px;

  left: 0;

}



.homeHeading {

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

}



.headingLarge {

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

}



.homeLinksBox {

  /* background-color: var(--whatsappDark); */

}



.homeLinksBox a {

  padding: 0.5rem 1rem;

  color: black;

  font-weight: bold;

  background-color: var(--darkBlue);

  color: white;

  box-shadow: 0px 3px 5px #ffbb00f1;

  transition: 200ms;

  flex: 1;

  font-size: max(1.6vw, 1rem);

}



.homeLinksBox a:hover {

  transform: translateY(10%);

}



/* ===================================================================imageViewerContainer */

.imageViewerContainer {

  position: fixed;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: start;

  align-items: center;

  gap: 1rem;

  flex-direction: column;

  z-index: 999999;

  background-color: rgba(0, 0, 0, 0.548);

  padding: 1rem;

  display: none;

}



.showImagePreview {

  display: flex !important;

}



.imageViewerContainer i,

.seoCheckListViewBox>i {

  min-width: 40px;

  min-height: 40px;

  border-radius: 50%;

  background-color: var(--brandColor);

  color: white;

  font-size: 1.4rem;

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

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

}



.imageViewerContainer img {

  max-width: 800px;

  object-fit: contain;

  height: fit-content;

}



/* ====================================================================header css */



/* nav top css */

/* logoBox */

header {

  position: sticky;

  top: 0;

  background-color: white;

  z-index: 9999;

}



header .topNav {

  width: 100%;

}



header .logoBox {

  max-width: 250px;

}



header .logoBox img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



/* search Box */

header .searchBox {

  width: 100%;

}



header .searchBox input {

  border: 1px solid rgb(138, 138, 138);

  width: 100%;

  padding: 0.5rem 0.6rem;

  outline: none;

  border-radius: var(--searchBoxRadius) 0 0 var(--searchBoxRadius);

}



header .searchBox button {

  border-radius: 0 var(--searchBoxRadius) var(--searchBoxRadius) 0;

  padding: 0.4rem 1rem;

  font-size: 1.2rem;

  color: white;

  border: 1px solid rgb(138, 138, 138);

  background-color: var(--brandColor);

  border-left: none;

}



/* freeSEOToolsContainer */

.freeSEOToolsContainer {

  display: flex;

  font-size: 0.9rem;

  align-items: center;

}



.freeSEOToolsContainer span {

  font-weight: bold;

  text-transform: capitalize;

  font-size: 1.1rem;

  padding-right: 4px;

}



.freeSEOToolsContainer a {

  background-color: var(--brandColor);

  padding: 0.4rem;

  border-radius: 2rem;

  font-weight: 600;

  border: 2px solid var(--brandColor);

  transition: 300ms;

  text-align: center;

  border: 2px solid white;

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

}



.freeSEOToolsContainer a:hover {

  opacity: 0.8;

}



/* callBox */

header .callBox {

  min-width: 150px;

  display: flex;

  justify-content: center;

  align-items: center;

}



header .callBox a {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 0;

}



header .callBox a i {

  font-size: 2rem;

}



header .callBox .callBoxDetail {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0.3rem;

}



header .callBox a .callBoxPhoneNumber {

  font-size: 1.3rem;

  font-weight: 600;

  line-height: 0.6;

}



.mobileNoInPhoneView {

  font-size: 1rem;

  font-weight: 600;

  background-color: var(--brandColor);

  border: 2px solid white;

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

  border-radius: 0.5rem;

  padding: 0 0.2rem;

}



/* headerSocialLinks */

.headerSocialLinks a {

  height: 15px !important;

}



/* mobile Nav */

nav.mobileNav {

  display: none;

}



/* navbar / menubar css */

nav {

  background-color: var(--brandColor);

  color: black;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  position: relative;

  padding: 0.5rem 1rem;

}



nav .navLinksContainer {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  padding: 0;

  gap: 0.8rem;

  flex-wrap: wrap;

}



.navLink {

  font-weight: 600;

  text-transform: uppercase;

  padding: 0.4rem;

  border-radius: 0.2rem;

  transition: 200ms;

  font-size: 1.1rem;

}



.navLink:hover {

  opacity: 0.8;

  background-color: #e2a808;

}



/* normal Drop Down Menu */

.dropDownToggle {

  position: relative;

}



.dropDownToggle .dropMenuContainer {

  position: absolute;

  top: 110%;

  left: 50%;

  transform: translateX(-50%);

  background-color: white;

  padding: 1rem;

  display: flex;

  gap: 1rem;

  width: 270px;

  visibility: hidden;

  opacity: 0;

  transition: 300ms;

  border-bottom: 2px solid var(--brandColor);

}



.dropDownToggle:hover .dropMenuContainer {

  visibility: visible;

  opacity: 1;

  top: 100%;

}



.dropDownToggle .dropMenuContainer .dropMenu {

  display: flex;

  flex-direction: column;

}



.dropDownToggle .dropMenuContainer .dropMenu span {

  text-transform: capitalize;

  font-weight: 600;

  font-size: 1.1rem;

}



.dropDownToggle .dropMenuContainer .dropMenu .dropDownLinks {

  display: flex;

  flex-direction: column;

}



.navLinksContainer li:hover a.navLink {

  background-color: #e2a808;

}



.dropMenu a:hover {

  color: var(--brandColor);

}



/* mega Drop Down */

.megaContainer {

  position: absolute;

  top: 110%;

  left: 0;

  width: 100%;

  max-height: 600px;

  background-color: white;

  border-bottom: 2px solid var(--brandColor);

  padding: 1rem;

  visibility: hidden;

  opacity: 0;

  transition: 300ms;

  overflow-y: scroll;

  display: flex;

  flex-wrap: wrap;

}



/* mega left Box */

.megaContainer .megaBoxLeft,

.megaContainer .megaBoxMiddle {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.megaContainer .megaBoxLeft .megaContentBox h5,

.megaContainer .megaBoxMiddle .megaContentBox h5 {

  font-size: 1.5rem;

  font-weight: 600;

}



.megaContainer h5 a:hover {

  color: var(--brandColor);

}



/* mega right Box */

.megaContainer .megaBoxRight {

  flex: 3;

}



.megaContainer .megaBoxRight h5 {

  text-align: center;

  font-weight: 600;

  font-size: 1.5rem;

  margin-bottom: 1rem;

}



.megaContainer .megaBoxRight .megaBoxRightWrapper {

  display: flex;

  justify-content: space-between;

  gap: 1rem;

}



/* mega links */

.megaLinksBox {

  text-transform: capitalize;

}



.megaLinksBox a:hover {

  color: var(--brandColor);

}



/* PPCAdsMegaContainer and PodCastMegaContainer */

.PPCAdsMegaContainer .megaBoxLeft,

.PodCastMegaContainer .megaBoxLeft,

.WebDesignMegaContainer .megaBoxLeft {

  padding-left: 3rem;

}



/* WebDesignMegaContainer */

.WebDesignMegaContainer {

  max-width: 900px;

  left: 50%;

  transform: translateX(-50%);

}



.WebDesignMegaContainer .megaLinksBox span {

  text-transform: capitalize;

  font-weight: 600;

  font-size: 1.2rem;

}



.WebDesignMegaContainer .megaBoxLeft {

  flex: 1;

}



.WebDesignMegaContainer .megaBoxRight {

  flex: 2;

}



.WebDesignMegaContainer .megaBoxRight .megaBoxRightWrapper {

  justify-content: center;

  gap: 2rem;

}



.navLinksContainer li:hover .megaContainer,

.navLinksContainer li:hover .dropMenu {

  visibility: visible;

  opacity: 1;

  top: 100%;

}



/* =========================================================heroSection css */



/* heroSectionSlideContainer */

.heroSectionSlideContainer {

  padding: 0;

}



.heroSectionSlideContainer .heroSlide {

  position: relative;

  height: auto;

  display: flex;

  justify-content: center;

  align-items: start;

  padding: 1rem a;

  background-color: var(--brandColor);

  background-position: center;

  isolation: isolate;

}



.heroSectionSlideContainer .heroSlide img {

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  z-index: -1;

}



.heroSectionSlideContainer .heroSlide .heroContentBox {

  display: flex;

  flex-direction: column;

  color: var(--brandColor);

  background-color: rgba(0, 0, 0, 0.815);

  text-align: center;

  border: 5px solid var(--brandColor);

  box-shadow: 2px 2px 5px var(--brandColor);

  padding: 0.5rem;

}



.heroSectionSlideContainer .heroSlide .heroContentBox h2 {

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

}



.heroSectionSlideContainer .heroSlide .heroContentBox .contentKey {

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

  font-weight: 900;

}



.heroSectionSlideContainer .heroSlide .heroContentBox span {

  text-transform: capitalize;

}



/* hero splider css */

.splide__pagination__page {

  background-color: var(--secondColor);

}



.splide__pagination__page.is-active {

  background-color: var(--brandColor);

  border: 1px solid white;

}



.splide__arrow {

  background-color: var(--brandColor);

}



.splide__arrow svg {

  fill: white;

}



/* ============================================================breadCrumbContainer css */

.breadCrumbContainer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  background: black;

  color: black;

  gap: 0.6rem;

  padding: 1rem 1rem;

  font-weight: bold;

  text-transform: capitalize;

  min-height: 200px;

  position: relative;

  z-index: 1;

  background-image: url("../img/seo/seo\ \(1\).webp");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  background-attachment: fixed;

}



.breadCrumbContainer::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background-color: #098488be;

  border-radius: 60% 40% 100% 0% / 59% 0% 100% 41%;

  z-index: -1;

}



.breadCrumbContainer .breadCrumb {

  background-color: black;

  width: fit-content;

  color: white;

  padding: 0.4rem 1rem;

  text-align: center;

}



.breadCrumbContainer .breadCrumbTitle * {

  text-align: center;

  font-size: max(4vw, 2.5rem);

  font-weight: bold;

  text-transform: capitalize;

  color: white;

}



.breadCrumbContainer a:hover {

  color: var(--brandColor);

}



/* ========================================serviceBreadCrumb section*/

.serviceBreadCrumbSection .serviceBreadCrumbElements {

  background-color: var(--darkBlue);

  color: white;

  width: fit-content;

  text-transform: uppercase;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0.5rem;

  border-bottom: 4px solid white;

  padding: 0.5rem 3rem;

  position: relative;

  isolation: isolate;

  overflow: hidden;

}



.serviceBreadCrumbSection .serviceBreadCrumbElements::before {

  content: "";

  width: 150px;

  height: 150px;

  transform: rotate(45deg);

  position: absolute;

  top: 0;

  left: -7rem;

  background-color: var(--brandColor);

  z-index: -1;

}



.serviceBreadCrumbSection .serviceBreadCrumbElements::after {

  content: "";

  width: 150px;

  height: 150px;

  transform: rotate(-45deg);

  position: absolute;

  top: 0;

  right: -7rem;

  background-color: var(--brandColor);

  z-index: -1;

}



.serviceBreadCrumbSection .serviceBreadCrumbElements a {

  font-weight: bold;

  transition: 200ms ease;

  background-color: var(--darkBlue);

  padding: 0.2rem;

  border-radius: 0.2rem;

}



.serviceBreadCrumbSection .serviceBreadCrumbElements a:hover {

  color: var(--brandColor);

}



.serviceBreadCrumbSection .serviceBreadCrumbElements span {

  background-color: var(--brandColor);

  color: var(--darkBlue);

  font-weight: 600;

  padding: 0.2rem;

  border-radius: 0.4rem;

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

}



/* ==============================================================services section  */

.serviceCard {

  border: 2px solid var(--brandColor);

  min-height: 400px;

  border-radius: 1rem;

  overflow: hidden;

}



.serviceCard .iconBox {

  font-size: 50px;

  font-weight: 600;

  color: white;

  background-color: var(--brandColor);

}



.serviceCard .iconBox h3 {

  color: black;

  font-weight: bold;

}



.serviceCard .serviceButtonBox a i {

  font-size: 1.5rem;

}



.serviceCard .serviceContentBox {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  height: 65%;

}



.serviceCard .serviceContentBox p {

  font-size: 0.9rem;

}



.serviceCard .serviceButtonBox {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 1rem;

}



.serviceCard .serviceButtonBox a {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0.5rem;

}



.serviceCard .serviceButtonBox a:nth-child(1) {

  background-color: var(--whatsappDark);

  color: white;

}



.serviceCard .serviceButtonBox a:nth-child(2) {

  background-color: red;

  color: white;

}



/* ===========================================================Contact Form Css */

/* contactleft */

.contectSection .row .contactLeft {

  background-color: var(--brandColor);

  padding-left: max(8vw, 2rem);

}



.contactLeft .formBannerSection h1 {

  text-transform: capitalize;

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

}



.contactLeft .formBannerSection h1 span {

  font-weight: bold;

}



.contactForm input,

.contactForm textarea,

.contactForm select {

  width: 100%;

  padding: 0.5rem 1rem;

  font-size: 1.2rem;

  color: black;

  font-weight: 500;

  margin-bottom: 1rem;

}



.contactForm input:focus,

.contactForm textarea:focus,

.contactForm select:focus {

  outline: 3px solid var(--darkBlue);

}



.contactFormRecaptcha {

  max-width: max(60%, 280px);

  overflow-y: hidden;

  overflow-x: scroll;

}



/* contactRight */

.contactRight {

  background-color: var(--darkBlue);

  color: white;

  text-transform: capitalize;

  padding-right: max(8vw, 2rem);

  position: relative;

  z-index: 1;

  overflow: hidden;

}



.contactRight:before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background-color: #0f191fa2;

  z-index: -1;

}



.contactRight img {

  position: absolute;

  width: 100%;

  height: 100%;

  object-fit: contain;

  z-index: -2;

}



.contactRight h1 {

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

  font-weight: 600;

}



.contactRight h3 {

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

  font-weight: 600;

}



.contactRight .contactRightContent p {

  font-size: 1.1rem;

  line-height: 1;

}



.contactRight .contactRightContent span {

  font-weight: 600;

  font-size: 1.2rem;

  line-height: 1;

}



.AboutInContactSection .contactContentBox {

  display: flex;

  align-items: center;

  padding: 0.6rem 0rem;

  border-bottom: 1px solid white;

  width: 100%;

  gap: 1rem;

}



.AboutInContactSection .contactContentBox .iconBox i {

  font-size: max(2.5vw, 1.8rem);

}



.AboutInContactSection .contactContentBox .contentBox {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 1rem;

  font-size: max(2.8vw, 1.2rem);

}



.AboutInContactSection .contactContentBox .contentBox span:nth-child(1) {

  font-weight: 600;

}



.AboutInContactSection .contactContentBox .contentBox span:nth-child(2) {

  font-size: max(1.8vw, 1rem);

}



/* ============================================================contentHolderSection (directly in home page) */

.contentHolderSection {

  position: relative;

  z-index: 1;

}



.contentHolderSection .heading{

  font-size: max(2.4vw,1.8rem);

  font-weight: bold;

}

.contentHolderSection a,

.contentHolderSection .content a,

.content a {

  color: blue;

  text-decoration: underline;

  font-weight: bold;

}



.contentHolderSection::before {

  content: "";

  position: absolute;

  height: 50%;

  max-height: 600px;

  width: 100%;

  background-color: #d3ffd9;

  bottom: 0;

  left: 0;

  z-index: -1;

  border-radius: 0% 100% 100% 0% / 0% 100% 0% 100%;

}



.contentHolderSection .content {

  border-bottom: 1px solid gray;

  padding: 1rem;

}



.contentHolderSection .noContentBorder {

  border: none !important;

}



.content {

  padding: 1rem;

}



.contentHolderSection .content ul li,

.content ul li {

  list-style: disc;

  font-size: 1.2rem;

  margin-left: 1rem;

}



.content ol,

.content ul {

  padding: 0;

}



.contentHolderSection .content ol li,

.content ol li {

  font-size: 1.2rem;

  margin-left: 1rem;

}



.content li::marker {

  color: black;

}



.contentHolderSection .content ul,

.content ul {

  width: 100%;

}



.contentHolderSection .content h1,

.contentHolderSection .content h2,

.contentHolderSection .content h3,

.contentHolderSection .content h4,

.contentHolderSection .content h5,

.contentHolderSection .content h6,

.content h1,

.content h2,

.content h3,

.content h4,

.content h5,

.content h6 {

  text-align: center;

  font-weight: bold;

}



.content.text-left h1,

.content.text-left h2,

.content.text-left h3,

.content.text-left h4,

.content.text-left h5,

.content.text-left h6 {

  text-align: left;

}



.contentHolderSection .content p,

.content p {

  font-size: 1.2rem;

  text-align: justify;

  margin-bottom: 0.5rem;

}



/* .contentHolderSection .content p a,

.content p a {

  font-weight: bold;

  color: blue;

} */

.contentHolderSection .content p a:hover,

.content p a:hover {

  color: var(--brandColor);

}



.contentHolderSection img {

  width: initial;

  height: initial;

  max-width: 100%;

  object-fit: contain;

}



.contentHolderSection iframe,

.content iframe {

  width: max(60%, 300px);

  height: 315px;

  margin: 0 auto;

  padding: 1rem;

}



/* ===========================================================awardSection */

.awardCard {

  display: flex;

  border: 2px solid var(--brandColor);

  border-radius: 0.6rem;

  padding: 1rem;

  box-shadow: 0px 0px 2px 2px var(--brandColor) inset;

  height: 100%;

}



.awardImgBox {

  max-width: 200px;

  min-width: 200px;

  display: flex;

  align-items: flex-start;

  flex-direction: column;

  margin: 0 auto;

}



.awardImgBox img {

  object-fit: contain;

  width: 100%;

  height: 100%;

}



.awardContentBox {

  border-left: 1px solid var(--brandColor);

  padding-left: 1rem;

}



.awardContentBox p {

  text-transform: capitalize;

  text-align: justify;

}



.awardContentBox h4 {

  text-transform: capitalize;

  font-weight: bold;

  font-size: 1.5rem;

}



/* =============================================================seoToolsAndResult.php */



.seoToolsSectionContainer {}



.seoToolsSection,

.seoToolsSection2 {

  border-radius: 1rem;

  border: 1px solid var(--brandColor);

  overflow: hidden;

  max-height: 150px;

  min-height: 150px;

}



.seoToolsSectionContainer .seoToolsSlide {

  max-height: 200px;

  height: 100%;

  margin-bottom: 1rem;

}



.seoToolsSectionContainer .seoToolsSlide img {

  object-fit: contain;

}



/* seoToolsSection2 */

.seoToolsSection2 .seoToolsSlide2 {

  min-height: 100px;

  overflow: hidden;

  display: flex;

  gap: 1rem;

  justify-content: space-around;

  align-items: center;

  border-radius: 0.8rem;

  box-shadow: 0px 0px 3px 3px var(--brandColor) inset;

  overflow: hidden;

  padding: 0.8rem;

  transition: 200ms;

  cursor: pointer;

  margin-bottom: 2rem;

}



.seoToolsSlide2:hover {

  opacity: 0.8;

}



.seoToolsSection2 .seoToolsSlide2 .iconBox {

  font-size: 60px;

  padding: 0 1rem;

}



.seoToolsSection2 .seoToolsSlide2 .slideContentBox {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: start;

  text-align: center;

  line-height: 1;

  font-size: max(1.7vw, 1.2rem);

  border-radius: 1rem;

  box-shadow: 0px 0px 3px 3px black;

  border: 2px solid white;

  padding: 0.8rem;

  width: 100%;

}



.seoToolsSection2 .seoToolsSlide2 .slideContentBox p:nth-child(2) {

  font-weight: bold;

}



/* seoResultSlide */

.seoToolsSectionContainer .commonTitle,

.seoResultContainer .commonTitle {

  background-color: var(--brandColor);

  padding: 0.5rem 1rem;

  text-align: center;

  font-size: 2rem;

}



.seoResultSection .seoResultSlide {

  margin-bottom: 1rem;

}



.seoResultSection .seoResultSlide table,

.seoResultSection .seoResultSlide table td,

.seoResultSection .seoResultSlide table th {

  border: 2px solid var(--brandColor);

  border-collapse: collapse;

  text-align: center;

}



.seoResultSection .seoResultSlide table tbody tr td:nth-child(1) {

  width: 40%;

}



.seoResultSection .seoResultSlide table tr {

  font-weight: bold;

  text-transform: capitalize;

}



.seoResultSection .seoResultSlide table thead {

  background-color: var(--darkBlue);

  color: white;

}



/* ======================================================servicePerformCard && ohterServicesContainer */

.ohterServicesContainer,

.servicePerformCard {

  display: flex;

  flex-direction: column;

  justify-content: start;

  align-items: center;

  border: 2px solid var(--brandColor);

  padding: 0.7rem;

  border-radius: 0.6rem;

  height: 97%;

}



.ohterServicesContainer {

  border: none;

}



.ohterServicesContainer .iconBox,

.servicePerformCard .iconBox {

  font-size: 3rem;

  background-color: var(--brandColor);

  color: white;

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  border-radius: 0.6rem;

  padding-block: 0.5rem;

  transition: 300ms;

}



.ohterServicesContainer .iconBox:hover {

  box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.753);

  cursor: pointer;

}



.ohterServicesContainer .iconBox i {

  transition: 200ms;

}



.ohterServicesContainer .iconBox:hover i {

  transform: rotateY(360deg);

  text-shadow: 2px 2px 3px red;

}



.ohterServicesContainer .iconBox h3 {

  transition: 200ms;

}



.ohterServicesContainer .iconBox:hover h3 {

  text-shadow: 2px 2px 3px red;

}



.servicePerformCard .iconBox h3 {

  text-align: center;

  font-weight: bold;

}



.servicePerformCard .contentBox {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 350px;

}



.servicePerformCard .contentBox p {

  text-align: justify;

  text-transform: capitalize;

}



/* ============================================================seoChecklistCard */

#seoCheckList {

  scroll-margin-top: 100px;

}



.seoChecklistCard {

  border-radius: 0.6rem;

  padding: 1rem;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.seoChecklistCard h2 {

  border-bottom: 2px solid rgb(0, 0, 0);

  margin-bottom: 1rem;

}



.seoChecklistCard .seoCheckList {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin-bottom: 1rem;

}



.seoChecklistCard .seoCheckList li {

  background-color: black;

  color: white;

  text-transform: capitalize;

  font-weight: bold;

  padding: 0.5rem 0.3rem;

  border-radius: 0.5rem;

  text-align: center;

  position: relative;

  cursor: pointer;

  border: 1px solid transparent;

}



.seoChecklistCard .seoCheckList li:hover {

  border: 1px solid white;

}



.seoChecklistCard .seoCheckList li::before {

  content: "";

  width: 20px;

  height: 20px;

  position: absolute;

  background: linear-gradient(-45deg, black 40%, transparent 60%);

  top: 70%;

  left: 50%;

  transform: translateX(-50%) rotate(45deg);

  z-index: 6;

  border-right: 1px solid white;

  border-bottom: 1px solid white;

  opacity: 0;

}



.seoChecklistCard .seoCheckList li .checlistDetail {

  position: absolute;

  background-color: black;

  width: 250px;

  left: 50%;

  transform: translateX(-50%);

  top: 110%;

  z-index: 5;

  padding: 1rem;

  visibility: hidden;

  opacity: 0;

  transition: 200ms;

  border-radius: 1rem;

  border: 1px solid white;

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

}



.seoChecklistCard .seoCheckList li:hover>.checlistDetail {

  visibility: visible;

  opacity: 1;

  top: 110%;

}



.seoChecklistCard .seoCheckList li:hover::before {

  opacity: 1;

}



/* =============================================================FAQ Section Css*/

.FAQContainer .accordion .accordion-item {

  background-color: var(--brandColor);

}



.FAQContainer .accordion .accordion-item .accordion-header .accordion-button {

  font-weight: bold;

  font-size: 1.2rem;

  border: 2px solid var(--brandColor);

  background-color: white;

}



.FAQContainer .accordion .accordion-item .accordion-header .accordion-button:focus {

  outline: none;

  background-color: white;

  z-index: 0;

  box-shadow: 0px 0px 5px 3px var(--brandColor) inset;

}



.FAQContainer .accordion .accordion-item .accordion-header .accordion-button span:nth-child(1) {

  color: rgb(0, 47, 255);

  margin-right: 1rem;

  font-size: 1.4rem;

}



.accordionImgBox {

  background-color: white;

}



/* serviceAccordion */

.serviceAccordion {

  justify-content: flex-start;

}



.serviceAccordion .contentBox {

  min-width: 70%;

  padding-top: 1rem;

}



.serviceAccordion .imgBox {

  display: flex;

  align-items: flex-start;

  max-height: 100% !important;

}



.accordionUl {

  list-style: disc;

  padding-left: 1rem;

  margin-bottom: 1rem;

}



.accordionUl li {

  list-style: disc;

}



.accordionUl li strong {

  color: var(--brandColor);

}



/* ============================================================footer section css */

.footer {

  background-color: var(--footerBg);

  border-top: 2px solid var(--brandColor);

}



.footerContent .phoneNumber {

  color: blue;

  font-size: min(5vw, 1.5rem);

  font-weight: bold;

}



.footerContent p {

  font-size: 14px;

  color: rgba(0, 0, 0, 0.671);

}



.footerContent p strong {

  color: black;

}



.footerLinks li a:hover,

.footerAboutLinkBox a:hover {

  color: var(--brandColor);

}



.footerLinks li,

.footerAboutLinkBox a {

  margin-bottom: 0.6rem;

  color: rgba(0, 0, 0, 0.671);

  width: fit-content;

}



.footerImageBox {

  width: 100%;

}



.footerImageBox:nth-child(3) img {

  max-width: 200px;

}



.footerBottom {

  border-top: 2px solid rgb(224, 224, 224);

}



.footerBottomContent p a:hover {

  color: var(--brandColor);

}



.footerImageBox img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.footerBottomImageBox img {

  max-width: 200px;

  object-fit: contain;

}



/* blogSearchBox */

.blogSearchBox {

  background-color: var(--brandColor);

  padding: 0.5rem;

  border-radius: 0.3rem;

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

}



.blogSearchBox h4 {

  text-align: center;

  font-weight: bold;

  color: white;

  background-color: var(--darkBlue);

}



.blogSearchBox .inputBox {

  background-color: var(--brandColor);

  position: relative;

}



.blogSearchBox .inputBox input {

  width: 100%;

  padding: 0.3rem 1rem;

  border-radius: 0.3rem;

  border: none;

  outline: none;

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

}



.blogSearchBox .inputBox i {

  position: absolute;

  right: 0rem;

  padding: 0.5rem;

  cursor: pointer;

  color: black;

  display: none;

}



.searchResults {

  max-height: 300px;

  overflow-y: auto;

  padding: 0.5rem;

  display: none;

  flex-direction: column;

  gap: 0.6rem;

  color: black;

}



.searchResults::-webkit-scrollbar {

  width: 5px;

  background-color: var(--darkBlue);

}



.searchResults::-webkit-scrollbar-thumb {

  background-color: rgb(221, 221, 221);

  cursor: pointer;

}



.showSearchResult {

  display: flex;

}



.searchResults span {

  font-weight: bold;

  text-align: center;

  text-transform: capitalize;

  display: none;

}



.searchResults a {

  background-color: rgb(240, 240, 240);

  padding: 0.2rem 0.5rem;

  border-radius: 0.4rem;

  display: flex;

  gap: 0.5rem;

  align-items: center;

}



.searchResults a img {

  max-width: 40px;

  max-height: 40px;

  aspect-ratio: 1/1;

  border-radius: 50%;

  object-fit: cover;

  background-color: rgb(48, 48, 48);

  border: 3px solid #00206088;

}



.searchResults a:hover {

  background-color: #172731;

  color: white;

}



/* ===============================================mobileBottomLinks */

.mobileBottomLinks {

  display: flex;

  justify-content: space-between;

  align-items: center;

  background-color: white;

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  display: none;

  z-index: 999;

}



.mobileBottomLinks a {

  width: 100%;

  padding-block: 0.2rem;

  background-color: var(--whatsappLight);

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 2rem;

}



.mobileBottomLinks a:nth-child(2) {

  background-color: var(--youtube);

}



.mobileBottomLinks a:nth-child(3) {

  background-color: var(--twitter);

}



.mobileBottomLinks a:nth-child(4) {

  background-color: var(--linkedin);

}



.mobileBottomLinks a:nth-child(5) {

  background-color: var(--darkBlue);

}



/* ==========================================desktopBottomLinks */

.desktopBottomLinks {

  display: flex;

  align-items: center;

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  z-index: 999;

}



.desktopBottomLinks a {

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  border-right: 2px solid white;

  transition: 200ms;

  width: 100%;

  display: flex;

  gap: 0.5rem;

  cursor: pointer;

  padding: 0.5rem 0;

}



.desktopBottomLinks a i {

  font-size: 1.5rem;

}



.desktopBottomLinks a:hover {

  box-shadow: 0px 0px 3px 3px black;

  transform: scaleY(1.1);

}



.desktopBottomLinks a:nth-child(1) {

  background-color: red;

}



.desktopBottomLinks a:nth-child(2) {

  background-color: var(--linkedin);

}



.desktopBottomLinks a:nth-child(3) {

  background-color: var(--whatsappDark);

}



.desktopBottomLinks a:nth-child(4) {

  background-color: var(--darkBlue);

}



/* ============================================stickyContactFormContainer */

.stickyContactFormContainer {

  max-width: 300px;

  border: 2px solid var(--brandColor);

  border-radius: 0.5rem;

  position: fixed;

  right: 0;

  top: 20%;

  z-index: 99;

  background-color: white;

  transform: translateX(100%);

  transition: 300ms;

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

}



.stickyContactFormContainer .formtoggleLable {

  background: black;

  width: fit-content;

  gap: 1rem;

  font-weight: bold;

  color: white;

  padding: 0.3rem;

  font-size: 1rem;

  text-align: center;

  text-transform: uppercase;

  position: absolute;

  right: 100%;

  top: 50%;

  transform: rotate(-90deg);

  border-top-right-radius: 1rem;

  border-top-left-radius: 1rem;

  cursor: pointer;

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

  border: 2px solid var(--brandColor);

  border-bottom: none;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0.5rem;

}



.stickyContactFormContainer .formtoggleLable i {

  color: white;

  font-size: 2rem;

  transform: rotate(90deg);

}



.showForm {

  transform: translateX(-4%) !important;

}



.stickyContactFormContainer .formHead {

  background-color: var(--brandColor);

  color: black;

  width: 100%;

  text-align: center;

  font-weight: bold;

  padding: 0.6rem 0;

}



.stickyContactFormContainer .formHead h3 {

  font-weight: bold;

}



.stickyContactFormContainer .stickyContactForm {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 0.6rem;

  padding: 0.5rem;

}



.stickyContactFormContainer .stickyContactForm input,

.stickyContactFormContainer .stickyContactForm textarea {

  width: 100%;

  padding: 0.2rem 1rem;

}



.stickyContactFormContainer .stickyRecaptachBox {

  display: flex;

  align-items: center;

  max-width: 250px;

  overflow-x: scroll;

  overflow-y: hidden;

}



/* =================================================================thank you page css */

/* thankYourImageBox */

.thankyouContainer,

.formErroConainer {

  background-color: var(--brandColor);

  color: white;

}



.thankYourImageBox,

.formErrorImageBox {

  display: flex;

  justify-content: center;

  align-items: center;

  max-width: 280px;

  margin: 0 auto;

}



.thankYourImageBox img,

.formErrorImageBox img {

  object-fit: contain;

}



/* ==============================================================formErroConainer */

.formErrorContentBox h2 {

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

  font-weight: bold;

  text-transform: capitalize;

}



/* ===========================================================now Prodcut Page css has been started */

/* =========================================================================productPageContainer */

.productBanner {

  background-color: var(--brandColor);

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

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: max(1vw, 0.2rem);

  font-weight: bold;

  border-top-right-radius: 1rem;

  border-top-left-radius: 1rem;

  text-align: center;

  text-transform: capitalize;

}



.packagesContainer {

  border: 2px solid var(--brandColor);

  padding: 1rem;

  border-radius: 1rem;

  box-shadow: 0px 0px 4px 2px var(--brandColor);

}



.packagesTabs {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 0.5rem;

}



.packagesTabs button {

  border: none;

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

  background-color: var(--brandColor);

  padding: 0.5rem;

  padding-inline: 0.8rem;

  font-weight: bold;

  text-transform: capitalize;

  border-top-right-radius: 1rem;

  border-top-left-radius: 1rem;

  transition: 200ms;

}



.packagesTabs button:hover {

  background-color: var(--darkBlue);

  color: white;

}



.packagesTabs button.active {

  background-color: var(--darkBlue);

  color: white;

  border: 2px solid white;

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

  border-bottom: 0;

  font-size: max(2.5vw, 1.3rem);

  transform: translateY(3%);

}



.PackagesTabsDataContainer .PackagesTabsData {

  display: none;

  transition: 200ms;

  background-color: var(--darkBlue);

  color: white;

  padding: max(1vw, 0.5rem);

  border: 2px solid white;

  box-shadow: 0px 0px 3px 3px black;

  flex-direction: column;

  align-items: center;

}



.PackagesTabsDataContainer .PackagesTabsData.active {

  display: flex;

}



.PackagesTabsData h4 {

  text-align: center;

  color: var(--brandColor);

  font-weight: bold;

  border-bottom: 2px solid var(--brandColor);

  width: fit-content;

}



/* ==================================================keywordAccordionContainer */

.keywordAccordionContainer {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.keywordAccordion {

  border: 2px solid white;

  border-radius: 1rem;

  overflow: hidden;

}



.keywordAccordionHead {

  display: flex;

  align-items: center;

  font-weight: bold;

  font-size: max(1.5vw, 1.2rem);

  cursor: pointer;

  padding-inline: 0.5rem;

  padding-block: 0.1rem;

  transition: 200ms;

  gap: max(1vw, 0.4rem);

}



.keywordAccordionHead:hover {

  background-color: #214a63;

}



.keywordAccordionHead i {

  background-color: var(--brandColor);

  width: 25px;

  height: 25px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 100%;

}



.accordionPrice {

  font-weight: bold;

  font-size: max(1.5vw, 1rem);

}



.keywordAccordionBody {

  display: flex;

  justify-content: center;

  flex-wrap: wrap-reverse;

  gap: max(1vw, 0.5rem);

  font-size: 1.2rem;

  max-height: 0px;

  overflow: hidden;

  padding: 0 1rem;

  transition: 200ms ease-in-out;

}



.showAccordionBody {

  max-height: fit-content;

  margin-top: 0.5rem;

}



.keywordAccordionBody .contentBox {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 0;

}



.keywordAccordionBody .contentBox .accordionPrice,

.keywordAccordionBody .contentBox h4 {

  color: var(--brandColor);

  font-weight: bold;

  font-size: 1.5rem;

}



.keywordAccordionBody .imgBox {

  margin-bottom: max(1vw, 0.5rem);

  flex: 1;

  min-width: 230px;

  max-height: 400px;

  cursor: pointer;

}



.keywordAccordionBody .imgBox img {

  object-fit: contain;

}



/* buttonGroup

.buttonGroup a{

  color: white;

  text-decoration: none;

} */

/* product Button Group css */

.productButtonGroup {

  display: flex;

  gap: 1rem;

  align-items: center;

  flex-wrap: wrap;

  margin-bottom: 1rem;

  cursor: pointer;

}



.productButtonGroup a {

  border: 2px solid white;

  width: 40px;

  height: 40px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 100%;

  transition: 200ms;

  font-size: 1.5rem;

  color: white !important;

  text-decoration: none !important;

}



.productButtonGroup a:nth-child(1) {

  background-color: red;

}



.productButtonGroup a:nth-child(2) {

  background-color: var(--linkedin);

}



.productButtonGroup a:nth-child(3) {

  background-color: var(--whatsappDark);

}



.productButtonGroup a:nth-child(4) {

  background-color: var(--skype);

}



/* productImagePreviewBox */

.productImagePreviewBox {

  position: fixed;

  top: 0%;

  left: 0%;

  width: 100%;

  height: 100%;

  z-index: 9999;

  display: none;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  display: none;

}



.productImagePreviewBox::before {

  content: "";

  position: absolute;

  width: 100vw;

  height: 100vh;

  background-color: rgba(0, 0, 0, 0.774);

  top: 0;

  left: 0;

  z-index: -1;

}



.productImagePreviewBox i {

  font-size: 2rem;

  background-color: var(--brandColor);

  color: white;

  border-radius: 100%;

  width: 40px;

  height: 40px;

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

}



.popoutImgHolder {

  max-width: 600px;

  max-height: 550px;

}



.popoutImgHolder img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



/* =====================================podcaste container section css */

.podcastContainer {

  max-width: 1200px;

  margin-inline: auto;

}



.podcastContainer .podcastImgBox {

  display: flex;

  justify-content: center;

  align-items: start;

  width: 100%;

  height: 100%;

  box-shadow: 0px 0px 2px 4px var(--brandColor);

}



.podcastContainer .podcastImgBox img {

  object-fit: contain !important;

}



.podcastContainer .podcasteRight {

  background-color: var(--darkBlue);

  box-shadow: 0px 0px 2px 4px var(--darkBlue);

  display: flex;

  flex-direction: column;

  color: white;

}



.podcastContainer .podcasteRight .contentBox h1 {

  background-color: var(--brandColor);

  width: 100%;

  text-align: center;

  text-shadow: 2px 2px 2px black;

  text-transform: capitalize;

}



.podcastContainer .podcasteRight .contentBox h2 {

  color: var(--brandColor);

  width: 100%;

  text-align: center;

}



.podcastContainer .podcasteRight .contentBox .descriptionSection {

  border: 2px solid var(--brandColor);

  padding: 0.5rem;

  width: 100%;

}



.podcastContainer .podcasteRight .contentBox .descriptionSection h3 {

  background-color: var(--brandColor);

  text-align: center;

  text-shadow: 2px 2px 2px black;

  width: 100%;

}



/* ====================================popularPodcasteContainer */

.popularPodcasteContainer .commonTitle {

  background: linear-gradient(45deg,

      var(--brandColor) 50%,

      var(--darkBlue) 50%);

  padding: 0.5rem;

}



.podcasteContainer,

.popularPodcasteSlide {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  margin-bottom: 1.5rem;

  padding: 1rem;

  gap: 0.8rem;

}



.podcasteContainer:nth-child(even),

.popularPodcasteSlide:nth-child(even) {

  background: linear-gradient(45deg,

      var(--brandColor) 50%,

      var(--darkBlue) 50%);

  box-shadow: 0px 0px 5px 2px var(--darkBlue);

  color: black;

}



.podcasteContainer:nth-child(odd),

.popularPodcasteSlide:nth-child(odd) {

  background: linear-gradient(45deg,

      var(--darkBlue) 50%,

      var(--brandColor) 50%);

  box-shadow: 0px 0px 5px 2px var(--brandColor);

  color: rgb(255, 255, 255);

}



.podcasteContainer .imgBox,

.popularPodcasteSlide .imgBox {

  height: 250px;

  width: 250px;

  overflow: hidden;

  background-color: white;

}



.podcasteContainer .imgBox a,

.popularPodcasteSlide .imgBox a,

.podcasteContainer .imgBox a img,

.popularPodcasteSlide .imgBox a img {

  width: 100%;

  height: 100%;

  transition: 500ms ease-in-out;

}



.podcasteContainer .imgBox a img,

.popularPodcasteSlide .imgBox a img {

  object-fit: contain;

}



.podcasteContainer:hover .imgBox a img,

.popularPodcasteSlide:hover .imgBox a img {

  transform: scale(1.05);

}



.podcasteContainer h2,

.popularPodcasteSlide h2 {

  width: 100%;

  text-align: center;

  padding: 0.5rem;

  border: 2px solid white;

  background: var(--darkBlue);

  border-radius: 0.5rem;

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

  color: white;

  transition: 200ms;

  position: relative;

  isolation: isolate;

  overflow: hidden;

  font-size: 1.5rem;

}



.popularPodcasteSlide h2:hover,

.podcasteContainer h2:hover {

  color: black;

}



.podcasteContainer h2::before,

.popularPodcasteSlide h2::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  background-color: var(--brandColor);

  top: 0;

  left: 0;

  z-index: -1;



  transform: translateX(-50%) rotate(45deg);

  transition: 200ms ease-in;

}



.podcasteContainer h2:hover::before,

.popularPodcasteSlide h2:hover::before {

  transform: translateX(0%) rotate(45deg) scale(3);

}



/*============================================== productListContainer */



.productCardCol {

  margin-bottom: 1rem;

}



.singleProductCard {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 1rem;

  gap: 0.8rem;

  margin-block-end: 1rem;

  position: relative;

  isolation: isolate;

  height: 100%;

}



.productCardCol:nth-child(even) .singleProductCard {

  background: linear-gradient(45deg,

      var(--darkBlue) 50%,

      var(--brandColor) 50%);

}



.productCardCol:nth-child(odd) .singleProductCard {

  background: linear-gradient(45deg,

      var(--brandColor) 50%,

      var(--darkBlue) 50%);

}



.singleProductCard .imgBox {

  overflow: hidden;

}



.singleProductCard img {

  transition: 500ms ease-in;

}



.singleProductCard:hover img {

  transform: scale(1.05);

}



.singleProductCard h2 {

  width: 100%;

  text-align: center;

  padding: 0.5rem;

  border: 2px solid white;

  background: var(--darkBlue);

  border-radius: 0.5rem;

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

  color: white;

  transition: 200ms;

  position: relative;

  isolation: isolate;

  overflow: hidden;

  font-size: 1.5rem;

}



.singleProductCard h2:hover {

  color: black;

}



.singleProductCard h2::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  background-color: var(--brandColor);

  top: 0;

  left: 0;

  z-index: -1;



  transform: translateX(-50%) rotate(45deg);

  transition: 200ms ease-in;

}



.singleProductCard h2:hover::before {

  transform: translateX(0%) rotate(45deg) scale(5);

}



/* seo services pages css */

/*=================================== ecommerce-seo-services-india.php */

/* servicesTopContainer */

.servicesTopContainer {

  background-color: var(--darkBlue);

  color: white;

}



.servicesTopContainer .topContetBox h1,

.servicesTopContainer .topContetBox h2 {

  background-color: var(--brandColor);

  font-weight: bold;

  padding-inline: 0.5rem;

}



.servicesTopContainer .topContetBox p {

  margin-bottom: 0.5rem;

}



.servicesTopContainer .topContetBox a {

  color: blue;

}



.servicesTopContainer .topContetBox a:hover {

  color: var(--brandColor);

}



.serviceTopCard {

  display: flex;

  justify-content: start;

  align-items: center;

  background-color: var(--brandColor);

  gap: 0.5rem;

  color: white;

  border-top-left-radius: 5rem;

  border-bottom-left-radius: 5rem;

  padding: 0 0.5rem;

  border: 2px solid white;

}



.serviceTopCard:nth-child(even) {

  border-top-left-radius: 0rem;

  border-bottom-left-radius: 0rem;

  border-top-right-radius: 5rem;

  border-bottom-right-radius: 5rem;

  flex-direction: row-reverse;

  background-color: var(--darkBlue);

}



.serviceTopCard .imgBox {

  min-width: 60px;

  width: 60px;

  height: 60px;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: var(--darkBlue);

  border-radius: 100%;

  padding: 0.5rem;

  border: 2px solid white;

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

}



.serviceTopCard .contentBox {

  padding: 0.5rem;

  width: 100%;

}



.serviceTopCard .contentBox p {

  background-color: var(--darkBlue);

  color: rgb(255, 255, 255);

  font-weight: bold;

  text-align: center;

  font-size: 1.2rem;

  font-size: 1.4rem;

}



.serviceTopCard:nth-child(even) .contentBox p {

  background-color: var(--brandColor);

  color: black;

}



.serviceTopCard .contentBox .subContentBox {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 1rem;

}



.serviceTopCard .contentBox .subContentBox h3 {

  font-weight: bold;

  text-shadow: 2px 2px black;

  text-transform: capitalize;

  margin: 0;

  font-size: 1.3rem;

  min-width: fit-content;

}



.serviceTopCard .contentBox .subContentBox span {

  font-weight: bold;

  text-transform: uppercase;

  width: 100%;

  color: black;

}



.serviceTopCard:nth-child(even) .contentBox .subContentBox span {

  color: rgb(255, 255, 255);

}



/* ===================================================servicePackageSection */



.servicePackageBox {

  overflow: hidden;

  background-color: var(--brandColor);

  padding: 1rem;

  border-top-left-radius: 6rem;

  border-bottom-left-radius: 6rem;

  margin-block: 0.8rem;

  display: flex;

  align-items: center;

  gap: 1rem;

}



.servicePackageBox:nth-child(even) {

  flex-direction: row-reverse;

  background-color: var(--darkBlue);

  border-top-left-radius: 0px;

  border-bottom-left-radius: 0px;

  border-top-right-radius: 6rem;

  border-bottom-right-radius: 6rem;

}



.servicePackageBox .imgBox {

  min-width: 150px;

  height: 150px;

  width: 150px;

  border: 2px solid white;

  box-shadow: 0px 0px 0px 8px var(--brandColor);

  border-radius: 100%;

  background-color: var(--darkBlue);

  position: relative;

  z-index: 1;

  overflow: hidden;

}



.servicePackageBox:nth-child(even) .imgBox {

  box-shadow: 0px 0px 0px 8px var(--darkBlue);

  background-color: var(--brandColor);

}



.servicePackageBox .imgBox img {

  max-width: 150px;

  max-height: 150px;

  object-fit: contain;

}



.servicePackageBox .contentBox {

  background-color: var(--darkBlue);

  color: white;

  padding: 1rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding-left: 80px;

  margin-left: -75px;

}



.servicePackageBox:nth-child(even) .contentBox {

  background-color: var(--brandColor);

  color: black;

  margin-left: initial;

  padding: 1rem;

  padding-right: 80px;

  margin-right: -75px;

}



.servicePackageBox .contentBox h3 {

  text-align: center;

  border-bottom: 2px solid white;

  text-transform: capitalize;

  margin-left: -2rem;

}



.servicePackageBox:nth-child(even) .contentBox h3 {

  text-align: center;

  border-bottom: 2px solid rgb(0, 0, 0);

  font-weight: bold;

  margin-left: 0rem;

  margin-right: -18rem;

}



.servicePackageBox .contentBox .button,

.servicePackageBox .contentBox .productButtonGroup {

  margin-top: 1rem;

  margin-left: -2rem;

}



.servicePackageBox:nth-child(even) .contentBox .button,

.servicePackageBox:nth-child(even) .contentBox .productButtonGroup {

  margin-left: 0rem;

  margin-right: -18rem;

}



.servicePackageBox .contentBox p {

  text-align: justify;

}



.servicePackageBox .contentBox .button {

  padding: 0.5rem 1rem;

  font-weight: bold;

  text-transform: uppercase;

  position: relative;

  isolation: isolate;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 0.5rem;

  color: black;

}



.servicePackageBox:nth-child(even) .contentBox .button {

  color: white;

}



.servicePackageBox .contentBox .button::before {

  content: "";

  position: absolute;

  width: 90%;

  height: 90%;

  background-color: var(--brandColor);

  z-index: -1;

  border-radius: 0.5rem;

  transition: 200ms;

  border: 1px solid white;

}



.servicePackageBox:nth-child(even) .contentBox .button::before {

  background-color: var(--darkBlue);

}



.servicePackageBox .contentBox .button:hover::before {

  transform: scale(1.05);

}



/* ====================================seoHorizontalTableSection */



.seoHorizontalTableWrapper {

  border-radius: 1.5rem;

}



.horizontalTableTitle {

  background-color: var(--darkBlue);

  color: white;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  padding-top: 0.5rem;

  border-bottom: 2px solid var(--brandColor);

}



.horizontalTableTitle h1 {

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

}



.seoHorizontalTableWrapper {

  max-width: max(85%, 1150px);

  margin: 0 auto;

  overflow: hidden;

}



.seoTableCard {

  background-color: var(--darkBlue);

  color: white;

  margin-bottom: 1rem;

  padding: 1rem;

}



.seoTableCard * {

  padding: 0;

}



.packageInfoBox {

  display: flex;

  flex-direction: column;

  justify-content: start;

  padding: 0.5rem;

}



.packageInfoBox h1 {

  text-transform: uppercase;

  font-size: max(2.1vw, 1.8rem);

  font-weight: bold;

  background-color: var(--brandColor);

  color: black;

  padding-left: 0.5rem;

}



.packageInfoBox h3 {

  text-transform: uppercase;

  font-size: max(1.5vw, 1.5rem);

  font-weight: bold;

  background-color: var(--brandColor);

  color: black;

  padding-left: 0.5rem;

}



.packageInfoBox .pricing {

  text-transform: capitalize;

  font-size: max(1.5vw, 1.2rem);

  font-weight: bold;

  background-color: var(--brandColor);

  color: black;

  padding: 0 0.5rem;

  width: fit-content;

}



.packageDetailBox {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 1rem;

}



.packageDetailBox div {

  border-left: 2px solid white;

  padding-left: 1rem;

  flex: 1;

}



.packageDetailBox div ul {

  padding-left: 0.5rem;

}



.packageDetailBox div ul li {

  list-style-type: disc;

  list-style-position: outside;

}



.packageDetailBox div h3 {

  position: relative;

  display: flex;

  align-items: center;

  text-transform: capitalize;

  font-weight: bold;

  color: black;

  background-color: var(--brandColor);

  padding: 0.5rem;

  margin-top: 0.5rem;

}



.packageDetailBox div h3::before {

  content: "";

  position: absolute;

  left: -1rem;

  background-color: white;

  width: 12px;

  height: 2px;

}



.packageDetailBox div a {

  text-decoration: underline;

  color: var(--brandColor);

  transition: 200ms;

}



.packageDetailBox div>a {

  padding-left: 0.5rem;

}



.packageDetailBox div a:hover {

  color: white;

}



/* ====================================youtube seo packages css seo-services-for-youtube-video-channel-management.php*/

#basicYoutubeSeoServicePakcages,

#basicyoutubemanagementpackage {

  scroll-margin-top: 400px;

}



#advanceYoutubeSeoServicePakcages,

#proyoutubeseoservicepackages,

#advanceyoutubemanagementpackage {

  scroll-margin-top: 100px;

}





/* ================================================blog css */



/* single blog page css */

.featuredImageBox {

  max-width: 100%;

  box-shadow: 0px 0px 5px 2px var(--darkBlue);

  border-radius: 0.5rem;

  overflow: hidden;

  margin: 0 auto;

}



.blogContentHolder {

  margin-block: 1rem;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.blogContentHolder h1,

.blogContentHolder h2,

.blogContentHolder h3 {

  /* background-color: var(--darkBlue);

  color: white; */

  /* text-align: center; */

  text-transform: capitalize;

  width: 100%;

}



.blogContentHolder p {

  margin-bottom: 0.5rem;

  font-size: 1.2rem;

  width: 100%;

}



.blogContentHolder ul,

.blogContentHolder ol {

  padding-left: 1rem;

  margin-bottom: 0.5rem;

  margin-left: 1rem;

  width: 100%;

}



.blogContentHolder ul li {

  list-style: disc;

  font-size: 1.1rem;

}



.blogContentHolder img,

.blogContentHolder video {

  max-width: max(80%, 300px);

  width: initial;

  height: initial;

  box-shadow: 0px 0px 2px 2px var(--brandColor);

  margin-bottom: 0.8rem;

  text-align: center;

}



.blogContentHolder img.small {

  max-height: 500px;

}



.blogContentHolder img.noshadow {

  box-shadow: none;

}



.blogContentHolder video {

  margin-block: 0.5rem;

}



.blogContentHolder iframe {

  max-width: 100%;

  width: max(40vw, 300px);

  height: auto;

  aspect-ratio: 4/3;

  max-height: 350px;

}



.blogContentHolder a {

  color: blue;

  font-weight: bold;

}



.blogContentHolder a:hover {

  color: var(--brandColor);

}



.blogContentHolder .tableContainer {

  width: max(90%, 300px);

  overflow-x: scroll;

  margin-inline: auto;

}



.blogContentHolder table {

  width: 100%;

}



.blogContentHolder table td,

.blogContentHolder table tr,

.blogContentHolder table th {

  border: 1px solid black;

  text-align: center;

  padding: 0.5rem;

}



.blogContentHolder table td {

  width: 50%;

}



.blogContentHolder table th,

.blogContentHolder table tr:nth-child(1) td {

  background-color: var(--darkBlue);

  color: white;

}



.blogContentHolder table p {

  margin-bottom: 0;

}



/* ====blogSidebarContainer */



.blogSidebarContainer {

  background-color: var(--darkBlue);

  color: white;

  padding: 0.8rem;

  height: 100%;

}



.blogSidebarContainer h4 {

  background-color: var(--brandColor);

  color: black;

  text-transform: capitalize;

  font-weight: bold;

}



.blogCategorySection ul {

  padding-left: 1rem;

}



.blogCategorySection ul li {

  list-style: disc;

  text-transform: capitalize;

}



.blogCategorySection ul li a {

  transition: 200ms ease;

}



.blogCategorySection ul li a:hover {

  color: var(--brandColor);

}



.blogAdvertisementContainer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 1rem;

  margin-top: 1rem;

}



.blogAdvertisementContainer a {

  width: 100%;

  background-color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  color: black;

  min-height: 80px;

}



.blogAdvertisementContainer a img {

  object-fit: contain;

}



.blogSideBarFormContainer {

  background-color: var(--brandColor);

  padding: 0.5rem;

  margin-top: 0.8rem;

}



.blogSideBarFormContainer .blogRecaptchaBox {

  max-width: 260px;

  overflow-y: hidden;

  overflow-x: scroll;

}



.stickyBlogAdBox {

  position: sticky;

  top: 120px;

  width: 100%;

}



.blogSideBarCaptachaContainer {

  overflow-y: hidden;

  overflow-x: scroll;

  max-width: 100%;

}



/* blogCategoriesSection */

.blogCategoriesSection {

  border: 4px solid var(--brandColor);

  border-top: none;

}



.blogCategoryCard a.imgBox {

  width: 100px;

  height: 100px !important;

}



.blogCategoryCard .contentBox h3 {

  font-size: 1.3rem;

}



/* recentBolgsAndCategoresRow */

.recentBolgsAndCategoresRow {

  border: 4px solid var(--brandColor);

  border-top: none;

}



/* ======recentBlogsSection */

.recentBlogsSection {

  border: 4px solid var(--brandColor);

  border-top: none;

}



.blogCommonCard {

  padding: 0.5rem;

  background-color: var(--darkBlue);

  color: white;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}



.blogCommonCard a.imgBox {

  display: flex;

  aspect-ratio: 16/7;

}



.blogCommonCard a.imgBox img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.blogCommonCard a.imgBox.imgcontain img {

  object-fit: contain;

}



.blogCommonCard .contentBox h4 {

  border-bottom: 2px solid gray;

}



.blogCommonCard .contentBox {

  display: flex;

  flex-direction: column;

  justify-content: end;

}



.blogCommonCard .contentBox a:hover {

  color: var(--brandColor);

}



.blogCommonCard .contentBox .blogCommonCardBottom {

  display: flex;

  align-items: center;

  gap: 1rem;

  background-color: var(--brandColor);

  color: black;

  padding: 0.5rem;

  font-weight: bold;

  text-transform: capitalize;

}



.blogCommonCard .contentBox .blogCommonCardBottom a {

  background-color: var(--darkBlue);

  color: white;

  padding: 0.2rem 0.9rem;

  transition: 200ms;

}



.blogCommonCard .contentBox .blogCommonCardBottom a:hover {

  transform: scaleX(1.05) skewX(-5deg);

}



/* blog category google Algorithum page css */

.featuredImageBox {

  margin: 1rem auto;

  max-width: 800px;

  border-radius: 0.5rem;

  box-shadow: 0px 0px 10px 2px var(--darkBlue);

}



.straightMapContainer {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  position: relative;

  isolation: isolate;

  background-image: url("../../blog/img/categories/googlealgoBg2.png");

  background-position: center;

  background-size: contain;

}



.straightMapContainer::before {

  content: "";

  position: absolute;

  width: 30px;

  height: 100%;

  background-color: var(--darkBlue);

  z-index: 1;

}



/* mapDataContainer */

.mapDataContainer:nth-child(even) {

  flex-direction: row-reverse;

  position: relative;



  background-color: rgba(255, 255, 255, 0.158);

  backdrop-filter: contrast(150%) blur(4px);

}



/* mapLeftDataContainer */

.mapLeftDataContainer {

  position: relative;

}



/* map head */

.mapLeftDataHead {

  background-color: var(--darkBlue);

  color: white;

  font-weight: bold;

  border: 2px solid var(--brandColor);

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

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  position: relative;

  isolation: isolate;

  margin-right: 0.5rem;

}



.mapLeftDataHead::before {

  content: "";

  position: absolute;

  background-color: var(--darkBlue);

  /* background-color: rgb(0, 238, 255); */

  width: 15px;

  height: 10px;

  right: -1.1rem;

}



.mapDataContainer:nth-child(even) .mapLeftDataHead {

  margin-left: 0.5rem;

}



.mapDataContainer:nth-child(even) .mapLeftDataHead::before {

  right: initial;

  left: -1.1rem;

}



.mapLeftDataHead label {

  display: flex;

  justify-content: center;

  align-items: center;

  padding-left: 2rem;

  font-size: 1.4rem;

  cursor: pointer;

}



.mapLeftDataHead label::before {

  content: "\002B";

  position: absolute;

  left: 0;

  margin-inline: 0.8rem;

  background-color: var(--brandColor);

  width: 30px;

  height: 30px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 100%;

  color: black;

  font-weight: bold;

  border: 2px solid var(--darkBlue);

  box-shadow: 0px 0px 2px 2px var(--brandColor);

}



.mapLeftDataContent {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  gap: 0.8rem;

  background-color: var(--darkBlue);

  color: white;

  border: 2px solid var(--brandColor);

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

  visibility: hidden;

  opacity: 0;

  height: 0;

  padding: 0;

  transition: 200ms ease-in;

}



.mapLeftDataContainer input:checked~.mapLeftDataContent {

  height: 250px;

  opacity: 1;

  visibility: visible;

  padding: 1rem;

  margin-top: 0.6rem;

}



.mapLeftDataContainer input:checked~.mapLeftDataHead label::before {

  content: "\2212";

}



.mapLeftDataContent h4 {

  border-bottom: 2px solid var(--brandColor);

}



.mapLeftDataContent a {

  background-color: var(--brandColor);

  color: black;

  font-weight: bold;

  text-transform: capitalize;

  padding: 0.4rem 0.8rem;

  max-width: fit-content;

}



/* mapRightDataContentHolder */

.mapRightDataCol {

  display: flex;

  justify-content: flex-start;

  align-items: start;

}



.mapDataContainer:nth-child(even) .mapRightDataCol {

  justify-content: flex-end;

}



.mapRightDataContentHolder {

  display: flex;

  flex-direction: column;

  justify-content: center;

  background-color: var(--darkBlue);

  color: white;

  padding: 0.5rem;

  padding-left: 1.5rem;

  text-transform: capitalize;

  font-style: italic;

  width: 80%;

  border: 2px solid var(--brandColor);

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

  border-left: 0;

  border-right: 0;

  margin-left: 1rem;

}



.mapDataContainer:nth-child(even) .mapRightDataCol .mapRightDataContentHolder {

  margin-left: initial;

  margin-right: 0.9rem;

}



.mapRightDataContentHolder ul li {

  list-style-type: disc;

  text-align: start;

}



.mapRightDataContentHolder ul li a:hover {

  color: var(--brandColor);

}



/* =========================igamingSeoServicesSlideContianer */

.igameingSlide {

  /* background-color: var(--brandColor); */

}



.igameingSlide .imgBox {

  box-shadow: 0px 0px 5px 2px #e2a8088e;

}



.igameingSlide .imgBox img {

  /* max-height: 450px; */

  object-fit: contain;

}



/* ==============================seoCostCalculatorForm */

.seoCostCalculatorForm {

  background-color: var(--darkBlue);

  color: white;

  height: 100%;

  /* box-shadow: 0px 0px 2px 2px #0077b5; */

}



.seoCostCalculatorForm .formHeading {

  background-color: var(--brandColor);

}



.seoCostCalculatorForm .inputGroup {

  font-weight: bold;

  width: 100%;

  font-size: 1.2rem;

  border: 1px solid rgba(255, 255, 255, 0.329);

  padding: 0.5rem;

  margin: 1rem 0;

  border-radius: 0.5rem;

  display: flex;

  justify-content: stretch;

  align-items: stretch;

  gap: 0.5rem;

  flex-wrap: wrap;

}



.inputGroup label {

  box-shadow: 0px 0px 4px 1px #e2a808;

  padding: 0.5rem;

  text-transform: capitalize;

  font-size: 1rem;

  flex: 1;

  min-width: 200px;

  text-align: center;

  display: flex;

  justify-content: center;

  align-items: center;

}



.inputGroup .rangeBox,

.inputGroup .OnPageRangeBox,

.inputGroup .selectInputBox {

  flex: 2;

  min-width: 200px;

}



.seoCostCalculatorForm .rangeBox,

.seoCostCalculatorForm .OnPageRangeBox {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 1rem;

  position: relative;

}



/* .seoCostCalculatorForm .rangeBox input[type="range"]{

  height: 8px;

  border-radius: 1rem;

} */

.seoCostCalculatorForm .rangeBox .currentVal {

  position: absolute;

  bottom: 100%;

  background-color: var(--brandColor);

  border-radius: 50%;

  width: 40px;

  height: 40px;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1rem;

}



.seoCostCalculatorForm .rangeBox .currentVal::before {

  content: "";

  position: absolute;

  width: 0;

  height: 0;

  border-left: 10px solid transparent;

  border-right: 10px solid transparent;

  top: 80%;

  border-top: 20px solid var(--brandColor);

}



.seoCostCalculatorForm .rangeBox .minVal {

  position: absolute;

  left: 0;

  top: 60%;

}



.seoCostCalculatorForm .rangeBox .maxVal {

  position: absolute;

  right: 0;

  top: 60%;

}



.seoCostCalculatorForm .OnPageRangeBox .MiddleVal {

  position: absolute;

  bottom: 70%;

  display: flex;

  justify-content: center;

  align-items: center;

  left: 48%;

  transform: translateX(-50%);

}



.seoCostCalculatorForm .rangeBox input,

.seoCostCalculatorForm .OnPageRangeBox input {

  width: 100%;

  max-width: 480px;

}



/* SeoCostOutput */

.SeoCostOutputForm {

  background-color: var(--brandColor);

  height: 100%;

  display: flex;

  flex-direction: column;

  position: relative;

  /* box-shadow: 0px 0px 2px 2px #0077b5; */

}



.seoOutPutFormHeadingContainer {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

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

  background-color: var(--darkBlue);

  color: white;

  font-weight: bold;

  flex-wrap: wrap;

}



.seoOutPutFormHeadingContainer input {

  background-color: transparent;

 max-width: 100%;

 width:fit-content;

 text-align:center;

  border: none;

  outline: none;

  padding-left: 0.8rem;

  color: white;

  font-weight: bold;

}



.costOutPutBlocker {

  position: absolute;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.705);

  top: 0;

  left: 0;

  z-index: 88;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 1.3rem;

}



.SeoCostOutputForm .formHeading {

  background-color: var(--darkBlue);

  color: white;

}



.costOutPutInputGroup {

  display: flex;

  background-color: #172731;

  color: white;

  padding: 0.5rem;

  justify-content: space-between;

  align-items: center;

}



.costOutPutInputGroup label {

  width: 50%;

}



.costOutPutInputGroup input {

  width: 50%;

  background-color: transparent !important;

  border: none;

  color: white;

  padding: 0 0.6rem;

  outline: none;

}



/* ==========================seoSuitSection */

.seoSuitSection {

  border: 4px solid var(--brandColor);

  padding: 0;

  border-top: 0;

}



.seoSuitSection .titleBanner {

  max-width: 100%;

  margin-top: 0;

}



.seoSuitGrid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: 1rem;

  grid-auto-flow: repeat(1fr);

  padding: 1rem;

}



.seoSuitCard {

  display: flex;

  flex-direction: column;

  justify-content: end;

  background-color: var(--darkBlue);

  color: white;

  padding: 0.8rem;

  border-radius: 0.5rem;

}



.seoSuitCard .imgBox {

  display: flex;

  justify-content: center;

  align-items: center;

}



.seoSuitCard .imgBox img {

  border-radius: 50%;

  object-fit: contain;

  width: 100px;

  aspect-ratio: 1/1;

  transition: 200ms;

}



.seoSuitCard:hover .imgBox img {

  box-shadow: 0px 0px 15px 2px #fcb800;

}



.seoSuitCard .content {

  display: flex;

  flex-direction: column;

  text-align: center;

  gap: 0.5rem;

}



.seoSuitCard .content .signUpBtn {

  background-color: var(--brandColor);

  padding: 0.5rem;

  color: black;

  font-weight: bold;

  border-radius: 0.5rem;

}



.seoSuitCard .content .signUpBtn:hover {

  opacity: 0.8;

}



/* career page css */

.jobCard {

  padding: 0.2rem;

  border-radius: 0.5rem;

  gap: 0.5rem;

  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.295),

    -2px -2px 5px 2px rgba(255, 208, 0, 0.295);

  text-transform: capitalize;

  height: 100%;

}



.jobCard>h3 {

  font-weight: 600;

  border-radius: 0.2rem;

  font-size: max(1.3vw, 1.2rem);

  color: white;

  margin: 0 auto !important;

  padding: 0.2rem;

  background-color: var(--darkBlue);

}



.jobCard p {

  text-align: justify;

  padding: 0.5rem;

  font-size: 0.9rem;

}



.eligibilityBox h4 {

  font-size: 1.2rem;

  font-weight: bold;

}



.eligiblityBadgeBox .badge {

  background-color: #214a6346;

}



.jobCardBottom {

  display: flex;

  gap: 0.5rem;

  flex-wrap: wrap;

  justify-content: center;

  margin-top: 0.5rem;

  background-color: rgba(255, 251, 6, 0.137);

  padding-top: 0.5rem;

}



.jobCardBottom .badge {

  background-color: #e2a80857;

}



.jobCard .badge {

  font-size: 0.8rem;

  text-wrap: wrap;

  width: fit-content;

}



/* =================================seoStepsHolder============== */

.seoStepsHolder {

  position: relative;

}



.seoStepButtons {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  position: sticky;

  top: 115px;

  height: fit-content;

}



.seoStepButtons .seoStepBtn {

  background-color: var(--darkBlue);

  color: white;

  text-align: center;

  text-transform: capitalize;

  padding: 0.5rem;

  cursor: pointer;

  border-radius: 0 2rem 2rem 0;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  justify-content: flex-end;

  font-size: max(1.2vw, 1rem);

  margin-bottom: 0;

  transition: transform 200ms;

}



.seoStepBtn.active {

  transform: translateX(10%);

  box-shadow: 2px 2px 5px 2px #17273142;

  transition: 0;

  background-color: var(--brandColor);

  color: black;

}



.seoStepButtons .seoStepBtn span {

  background-color: var(--brandColor);

  color: black;

  min-width: 30px;

  min-height: 30px;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

}



.seoStepBtn.active span {

  background-color: var(--darkBlue);

  color: white;

}



.seoStepsDetailsHolder {

  background-color: var(--brandColor);

}



.seoStepDetailBox {

  display: none;

}



.showSeoStepDetailBox {

  display: block;

}



.seoStepDetailBox .imgBox{

  max-width: 600px;

display: block;

margin-inline: auto;

}

/* ================================seoAuditSection */

.seoAuditSection li::marker {

  color: white !important;

}



.seoAuditForm input.form-control:focus {

  color: var(--bs-body-color);

  background-color: var(--bs-body-bg);

  border-color: #86b7fe;

  outline: 0;

  box-shadow: 0 0 0 0.25rem #ffbb00a4;

}



.seoAuditForm button {

  background-color: var(--brandColor) !important;

  color: black !important;

  font-weight: bold !important;

}



/* ===========================================packagesTable (mobile-igaming-seo-services-india.php) */



.packagesTable {

  max-width: max(85%, 1150px);

  margin: 1rem auto;

  background-color: var(--darkBlue);

  color: white;

  overflow-x: auto;

  display: block;

}



.packagesTable .packagesTableTitle {

  text-transform: capitalize;

  color: black;

  background-color: var(--brandColor);

  width: 100%;

  padding: 0.5rem;

  text-align: center;

  font-weight: bold;

  position: sticky;

  left: 0;

}

.packagesTable table{

  table-layout: fixed;

}

/* Mobile-specific style */

@media screen and (max-width: 600px) {

      .contentHolderSectionRes{

    flex-wrap: wrap;

    flex-direction: column-reverse;

  }

  .packagesTable table {

      table-layout: auto;

  }

}

.packagesTable table,

.packagesTable td,

.packagesTable th {

  border: 1px solid black;

}



.packagesTable td {

  padding: 0.5rem;

}



.packagesTable table {

  width: 100%;

  border-collapse: collapse;

  overflow: hidden;

}



.packagesTable table thead tr th {

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



}



.packagesTable table thead tr th span {

  display: block;

  white-space: nowrap;

  background-color: #7030A0;

  padding: 0.2rem 0.4rem;

}



.packagesTable table thead tr th:nth-child(1) {

  background-color: #7030A0;

}

.packagesTable.contentPakcages table thead tr th{

  background-color: #491274;

}

.packagesTable.contentPakcages table tbody tr th{

  background-color: #7030A0;

  padding: 10px;

}

.packagesTable.contentPakcages table tbody tr:nth-child(1) th{

  background-color: #FF0000;

  font-size: 1.3rem;

}





.packagesTable table thead tr th span:nth-child(2) {

  background-color: #002060;

}



.packagesTable table thead tr th span:nth-child(3) {

  background-color: #DC3545;

  font-size: 1rem;

  padding: 0;

}



.packagesTable table thead tr th span:nth-child(4) {

  background-color: #002060;

}



.packagesTable table tr th,

.packagesTable table tr td {

  text-align: center;

}



.packagesTable table tbody {

  position: relative;

}





.packagesTable table tr.full {

  text-align: center;

  background-color: rgb(0, 0, 0);

  font-size: 1rem;

  color: white;

  font-weight: bold;

  font-size: max(1.4vw, 1rem);

}



.packagesTable table tr.brandBg {

  color: black;

  font-weight: bold;

  font-size: max(1.4vw, 1rem);

}



.packagesTable table tr.full.brandBg {

  background-color: var(--brandColor);

  color: black;

}



.packagesTable table tr.full.lighBlueBg {

  background-color: #2F75B5;

}



.packagesTable table tr.blackBg {

  background-color: black;

  color: white;

  font-size: max(1.4vw, 1.2rem);

  font-weight: bold;

}



.packagesTable table tr td a {

  color: var(--brandColor);



}









/* packageTableToggler in packagesTable */



.packageTableToggler {

  padding: 0.2rem 0.8rem;

  border-radius: 0.5rem;

  background-color: var(--brandColor);

  cursor: pointer;

  border: 2px solid white;

  color: black;

  text-transform: capitalize;

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

  display: inline-flex;

  font-weight: bold;

}



.packageTableToggler:hover {

  opacity: 0.9;

}



.packageTableTbody {

  display: none;

}



.packageTableTbody.showTable {

  display: table-row-group;

}

/* ======================cloapsablePackageTableHead */

.cloapsablePackageTableHead{

  user-select: none;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0.5rem;

  background-color: var(--brandColor);

  position: sticky;

  left: 0;

  gap: 1rem;

  width: 100%;

}

.cloapsablePackageTableHead:hover{

  opacity: 0.9;

}

.cloapsablePackageTableHead h2{

  font-size: max(2.2vw,1.2rem);

  color: black;

  font-weight: bold;

  width: 100%;

  text-align: center;

}

.cloapsablePackageTableHead i{

  background-color: var(--darkBlue);

  min-width: 30px;

  min-height: 30px;

  aspect-ratio: 1/1;

  display: flex;

  justify-content: center;

  align-items: center;

}

.cloapsablePackageTableHead + table{

  display: none;

}

.showPackageTable{

  display: table !important;

}

table .checkListViewer{

 color: var(--brandColor);

 font-weight: bolder;

 text-transform: uppercase;

 cursor: pointer;

 user-select: none;

}

table .checkListViewer:hover{

  opacity: 0.9;

}

/* youtube-video-editing-services.php */

/* industryCardsContainer */

.industryCardsContainer {

  background-color: #fcb90065;

}

.industryCardsContainer .heading {

  text-align: center;

  border-bottom: 4px solid var(--brandColor);

  background-color: darkblue;

  color: white;

}

.industryCardCol {

  padding-block: 0.5rem;

  perspective: 1000px;

}



.industryCard {

  border-radius: 0.5rem;

  background-color: var(--brandColor);

  overflow: hidden;

  height: 100%;

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

  border: 2px solid white;

  transition: 200ms cubic-bezier(0.075, 0.82, 0.165, 1);

  cursor: pointer;

}



.industryCard:hover {

  transform: rotateY(15deg);

  border-color: white;

  box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.281);

}



.industryCardCol:nth-child(even) .industryCard {

  background-color: var(--darkBlue);

  color: white;

}



.industryCard h3 {

  font-size: 20px;

  text-align: center;

  background-color: var(--darkBlue);

  border-bottom: 1px solid white;

  color: white;

  padding: 0.5rem;

}



.industryCardCol:nth-child(even) .industryCard h3 {

  background-color: var(--brandColor);

  color: black;

}



.industryCard ul {

  padding: 0.5rem;

}



.industryCard ul li {

  list-style: none !important;

  font-size: 14px !important;

}



.industryCard ul li strong {

  background-color: var(--darkBlue);

  padding: 0.2rem 0.5rem;

  color: white;

}



.industryCardCol:nth-child(even) .industryCard ul li strong {

  background-color: var(--brandColor);

  color: black;

}



.industryCard ul li::before {

  content: "\21A0";

  color: rgb(0, 0, 0);

  margin-right: 0.5rem;

  font-weight: bold;

}



.industryCardCol:nth-child(even) .industryCard ul li::before {

  color: white;

}



.pieChartContainer {

  background-color: var(--brandColor);

  border-radius: 0.5rem;

  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.445);

  transition: 200ms ease-in-out;

}



.pieChartContainer:hover {

  transform: translateY(2%);

}



.pieChartContainer h2 {

  font-size: 25px;

  background-color: var(--darkBlue);

  color: white;

}