/* css files */
@import url("font.css");

/*************** Global CSS *****************/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: #ffffff;
}

:root {
  --white: #ffffff;
  --black: #000000;
  --primary: #ED7B0E;
  --orange-opacity: rgba(0, 0, 0, 0.56);
  --bg: #FFC38A;
  --color: #212121;
  --gray: #636363;
  --light-bg: rgba(237, 123, 14, 0.18);
  --heading-font: "Rubik", sans-serif;
  --para-font: "Poppins", sans-serif;
  --heading-spacing: 6px;
  --para-spacing: 1.81px;
  --link-spacing: 2px;
  --item-font: "Lato", sans-serif;
  --card-bg:#f9ebdd;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3em;
  font-weight: 600;
  text-transform: capitalize;
  font-family: var(--heading-font);
  /* letter-spacing: var(--heading-spacing); */
  color: var(--color);
  margin-bottom: 20px;
}

p {
  line-height: 1.6em;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2.1rem;
}

h4 {
  font-size: 1.3rem;
}

h5 {
  font-size: 1.2rem;
}

h6 {
  font-size: 1.2rem;
}

/* a{text-decoration: none;color: var(--color);} */

p,
li {
  font-family: var(--para-font);
  font-size: 1rem;
}

p {
  color: var(--color);
}

.container {
  max-width: 1270px;
  margin: 0 auto;
  padding: 0 15px;
}

.uni-padding {
  padding: 100px 0;
}

.mt-20 {
  margin-top: 20px;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.card-sec-padding {
  padding: 60px 0;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.pt-6 {
  padding-top: 6rem;
}
.bg-white{
  background-color: var(--white) !important;
}
.bg-ligh-primary{
  background-color: var(--bg) !important;
}
.pt-0{
  padding-top: 0 !important;
}
.gray-border{border: 1px solid rgba(0, 0, 0, 0.25);
}
.list{
  margin-inline-start: 20px;
  padding: 1rem 0;
}
.mb-20{
  margin-bottom: 20px;
}
.space-flex{
  width: 100%;
  justify-content: space-between;
}
.img-div img{width: 100%;}
/* header */
#header {
  background-color: var(--white);
  box-shadow: 0px 8px 22px 0px rgba(0, 0, 0, 0.10);

  width: 100%;
  position: relative;
  transition: all 0.5s;
  /* z-index: 99999; */
}

.header-row {
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  padding-top: 1rem;
  max-height: 185px;
}
.activeSummenu{
  display: block;
}
.fixed-header {
  width: 100%;
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 99999;
}
/* 
.header-row {
  transition: all 1s;
} */

.menu .navbar ul {
  list-style: none;
}

#header .menu .navbar ul li a {
  text-decoration: none;
  color: var(--color);
  text-transform: capitalize;
}

#header .menu .navbar ul li {
  display: inline-block;
  margin-left: 15px;
  position: relative;
  text-decoration: none;
}

.header .fa-bars,
.header .fa-times,
.mobile-btn {
  display: none;
}

.desktop-btn {
  display: block;
}

#header .menu .navbar ul li:after {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  background-color: var(--primary);
  width: 0;
  /* Initially set width to 0 */
  height: 2px;
  transition: width 0.3s ease;
}

#header .menu .navbar ul li:hover:after, .review-progress img{
  width: 100%;
}

#header .menu .navbar ul li:active:after {
  width: 100%;
}

.menu {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

.top-bar {
  gap: 2rem;
  align-items: center;
  padding-bottom: 1rem;
  flex-wrap: wrap;
}

.top-bar img {
  width: 2rem;
  height: 2rem;
}
.fa-chevron-down:before{
  color: var(--primary);
}
/* search bar */
.search-bar,
.banner-search-bar,
.banner-location-bar {
  display: flex;
  line-height: 28px;
  align-items: center;
  position: relative;
  max-width: 190px;
}

.search-bar .input,
.banner-search-bar .input,
.banner-location-bar .input {
  font-family: var(--para-font);
  width: 100%;
  height: 45px;
  padding-left: 2.5rem;
  box-shadow: 0 0 0 1.5px #2b2c37, 0 0 25px -17px #000;
  border: 0;
  border-radius: 3px;
  background-color: var(--white);
  outline: none;
  color: var(--color);
  transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
  cursor: text;
  z-index: 0;
}

.search-bar .input::placeholder,
.banner-search-bar .input::placeholder,
.banner-location-bar .input::placeholder {
  color: var(--color);
}

.search-bar .input:hover,
.banner-search-bar .input:hover,
.banner-location-bar .input:hover {
  box-shadow: 0 0 0 2.5px #2f303d, 0px 0px 25px -15px #000;
}
.banner-search-bar .input:active,
.banner-location-bar .input:active {
  transform: scale(0.95);
}

.search-bar .input:focus,
.banner-search-bar .input:focus,
.banner-location-bar .input:focus {
  box-shadow: 0 0 0 2.5px #2f303d;
}

.search-bar .search-icon,
.banner-location-bar .search-icon,
.banner-search-bar .search-icon {
  position: absolute;
  left: 1rem;
  fill: var(--color);
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  z-index: 1;
}

/* btn global */
.btn {
  background-color: var(--primary);
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 0.25px;
  text-transform: capitalize;
  font-size: 1.2rem;
  transition: all 0.5s ease;
  text-decoration: none;
  position: relative;
  text-decoration: none;
  box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border: none;
  padding: 10px 15px;
  border-radius: 0;
  color: var(--color);
  font-family: var(--para-font);
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
}

.arrow-btn {
  background-color: transparent;
  text-transform: capitalize;
  font-size: 1.2rem;
  transition: all 0.5s ease;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  border: none;
  padding: 10px;
  border-radius: 0;
  color: var(--primary);
  font-family: var(--para-font);
  font-weight: 600;
  display: inline-block;
  margin-top: 1rem;
}

.arrow-btn::after {
  content: "\2192";
  position: absolute;
  top: 100%;
  transform: translateY(-50%);
  left: 5%;
  font-size: 30px;
  color: var(--primary);
  transition: left 0.5s ease;
}

.arrow-btn:hover::after {
  left: 70%;
}

.btn:hover {
  letter-spacing: 1px;
  background-color: rgb(237, 123, 14);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(237, 123, 14) 0px 7px 20px 0px;
}

.btn:active {
  letter-spacing: 1px;
  background-color: rgb(237, 123, 14);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(237, 123, 14) 0px 7px 20px 0px;
  transform: translateY(2px);
  transition: 100ms;
}

#header .btn:hover,
#header .btn:active, #dashbord-banner .buttons-div .btn:hover, #dashbord-banner .buttons-div .btn:active, #create-profile .btn {
  letter-spacing: 0.25px;
  transform: translateY(0px);
}

.login-btn {
  display: flex;
  background-color: var(--white);
  color: var(--color);
  padding: 0.5rem 1.4rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  border-radius: 30px;
  gap: 0.75rem;
  border: 1px solid var(--color);
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: .6s ease;
}

.login-btn svg {
  height: 30px;
}

.login-btn:hover {
  box-shadow: none;
}

/* banner */
#banner{
  min-height: 700px;
}
#banner,
#banner-about {
  background-image: url("/assets/images/banner-bg.png");
  background-position: 100% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  text-align: left;
}
#banner.banner-row,
#banner-about.banner-row {
  height: 100vh;
  min-height: 600px;
  justify-content: flex-start;
  align-items: center;
}

.banner-row .content-div {
  width: 77%;
}
#banner .banner-row .content-div {
  width: 66%;
}
#banner .banner-row .content-div{
  margin-top: 100px;
}
#banner .title,
#banner-about .title, #how-work .title, #banner-service-provider .title, #get-banner .title, #boost-banner .title{
  font-size: 3.2rem;
  font-weight: 400;
  display: inline;
  vertical-align: 26px;
  line-height: 1.3em;
}
#banner .title{
  font-size: 3.5rem;
}
.input-bar-div {
  display: flex;
  gap: 1.2rem;
  padding: 20px 0;
  flex-wrap: wrap;
}

#banner .content-div .para, #banner-about .content-div .para, #banner-company .content-div .para, #banner-development .content-div .para,  #banner-all-services .para, #banner-development .para,#banner-development .content-div .para, #blog-details .para,  #banner-blog-details .content-div .para, #smart-match-banner .content-div .para {
  font-size: 1.6rem;
  font-weight: 300;
  width: 80%;
}

.banner-search-bar,
.banner-location-bar {
  min-width: 280px;
  max-width: 340px;
}

/* banner heading animation */
.animate-contain {
  height: 85px;
  overflow: hidden;
  text-align: center;
  margin-top: 0;
  display: inline-block;
}

.animated-text {
  display: inline-block;
  transition: 300ms all;
  margin-top: 0;
  animation: slide 8s infinite alternate ease-in-out;
  /* Adjusted duration */
  background-color: transparent;
  color: var(--primary);
  text-align: left;
}

.animated-text span {
  display: block;
  font-size: 3.5rem !important;
  font-weight: 600 !important;
  padding: 8px 0px;
  font-family: var(--heading-font);
}

@keyframes slide {
  0% {
    margin-top: 0;
  }

  20% {
    margin-top: 0;
  }

  40% {
    margin-top: -85px;
  }

  60% {
    margin-top: -85px;
  }

  80% {
    margin-top: -170px;
  }

  100% {
    margin-top: -255px;
  }
}

/* about */
#about,
#review,
#category,
#services,
#service-categories {
  background-color: var(--bg);
  min-height: 500px;
  text-align: center;
  position: relative;
}

#about .about-row>h1,
#about .about-row>p,
#review .review-row>h2,
#review .review-row>p {
  width: 70%;
  margin: 0 auto;
}

#about .about-row h1 {
  font-size: 3rem;
}

#about .about-row>h1,
#review .review-row>h2 {
  margin-bottom: 1.5rem;
}

#about .wrapper {
  margin-top: 80px;
  gap: 3.5%;
}

#about .wrapper>div {
  flex-basis: 31%;
}

.about-col, #map-box .map-info, #review-rating .rating-row, #banner-contact .form-container, #building .building-wrapper{
  background-color: rgba(255, 255, 255, 0.7);
  background-image: url('/assets/images/pattern-bg.png');
  padding: 30px;
  border-radius: 30px;
  text-align: left;
  position: relative;
}

.about-col::after, #map-box .map-info:after,  #review-rating .rating-row:after, #banner-contact .form-container:after, .form-sec-col::after, #building .building-wrapper:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url('../images/card-shadow.png');
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  z-index: 0;
}

.about-col img{
  width: 100%;
  margin-top: 1.2rem;
  position: relative;
  z-index: 1;
  object-fit: contain;
}

.about-col .des {
  font-weight: 500;
  font-size: 1rem;
}

.pre-text {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 45px;
}

.about-col h3 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  position: relative;
  z-index: 2;
  margin-top: 10px;
}

#about-partner {
  background-image: url('/assets/images/background-partner.png');
  min-height: 500px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.about-partner-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#about-partner a {
  text-decoration: none;
}

#about-partner .partner-service-item,
#review .review-col {
  background-color: rgb(245 226 208);
  background-image: url(/assets/images/pattern-bg.png);
  background-size: cover;
  padding: 2rem 1.2rem;
  box-shadow: 4px -4px 4px 0px rgba(0, 0, 0, 0.25), -4px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#about-partner .partner-service {
  gap: 1.2em;
}

#about-partner .partner-service-item img {
  width: auto;
  height: auto;
  margin-bottom: 1rem;
  max-height: 54px;
}

.item-text {
  color: var(--color);
  font-family: var(--para-font);
  font-size: 1.4rem;
  font-weight: 500;
}

#about-partner .row-1 {
  display: grid;
  grid-template-columns: 60% 19% 19%;
  gap: 1%;
  min-height: 260px;
  align-items: end;
}

#about-partner .row-1 .content-wrapper p {
  font-size: 1.2rem;
  width: 90%;
  margin-bottom: 2rem;
}

#about-partner .row-1 .content-wrapper h2 span, .diff-span {
  color: var(--primary);
}

.content-wrapper {
  grid-column: 1 / 2;
  /* Occupies the first column */
}

#about-partner .row-2 .btn {
  padding: 10px;
}

#about-partner .row-2 {
  grid-template-columns: repeat(auto-fill, minmax(18.5%, 1fr));
  gap: 1%;
}

.partner-service {
  display: flex;
  flex-direction: column;
  /* Optional: Adjust layout inside the flex container */
  grid-column: 2 / 4;
  /* Occupies the second and third columns */
}

#about-partner .partner-service-item {
  transition: all 0.3s;
}

#about-partner .row-1 a:hover .partner-service-item,
#about-partner .row-2 a:hover .partner-service-item {
  transform: scale(1.05);
  overflow: hidden;
}

.partner-service a {
  margin-bottom: 10px;
  /* Optional: Adjust spacing between service items */
}

.partner-service-item {
  display: flex;
  align-items: flex-start;
}

.partner-service-item img {
  margin-right: 10px;
  /* Optional: Adjust spacing between image and text */
}

.item-text {
  font-size: 1.2rem;
  /* Optional: Adjust text size */
}

/* review */
#review .review-row .wrapper,
#services .services-row .wrapper {
  grid-template-columns: repeat(auto-fill, minmax(21%, 1fr));
  grid-gap: 2rem;
  margin-top: 150px;
}

#category .row-2 .wrapper,
#service-categories .row .wrapper {
  grid-template-columns: repeat(auto-fill, minmax(29%, 1fr));
  grid-gap: 2rem;
  margin-top: 4rem;
}

#review .overlay {
  border: 2px solid var(--primary);
  padding: 1rem;
  border-radius: 30px;
  position: relative;
  margin-bottom: 80px;
}

#review .overlay>p {
  text-align: center;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-top: -90px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  display: grid;
  align-items: center;
  justify-self: center;
  color: var(--black);
  font-family: var(--para-font);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 10px;
  position: relative;
  border: 8px solid var(--bg);
  font-size: 0.8rem;
}

#review .overlay>p span {
  font-size: 2rem;
}

#review .overlay>p::after {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  width: 59px;
  height: 59px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  display: grid;
  align-items: center;
  justify-self: center;
  color: var(--black);
  font-family: var(--para-font);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 10px;
}

#review .wrapper .odd>p {
  position: absolute;
  bottom: -80px;
  left: 35%;
}

#review .review-col {
  min-height: 300px;
  height: auto;
  border-radius: 20px;
  padding: 2rem 1rem;
}

#review .review-col img {
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

#review .review-col h4 {
  margin: 1.5rem 0 0.5rem 0;
  font-weight: 600;
  font-size: 1.8rem;
}

#review .review-col p {
  font-size: 1.2rem;
}

#review .overlay:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  animation: loop 10s infinite;
}

#review .overlay:nth-child(even):after {
  animation: loopReverse 10s infinite;
}

@keyframes loop {
  0% {
    top: 0;
    left: 0;
  }

  25% {
    top: 0;
    left: 100%;
    transform: translateX(-100%);
  }

  50% {
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
  }

  75% {
    top: 100%;
    left: 0;
    transform: translateY(-100%);
  }

  100% {
    top: 0;
    left: 0;
  }
}

@keyframes loopReverse {
  0% {
    top: 0;
    left: 0;
  }

  25% {
    top: 100%;
    left: 0;
    transform: translateY(-100%);
  }

  50% {
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
  }

  75% {
    top: 0;
    left: 100%;
    transform: translateX(-100%);
  }

  100% {
    top: 0;
    left: 0;
  }
}

/* logo-slide */
#logo-slide .row-1 {
  gap: 2rem;
  margin-bottom: 60px;
}

#logo-slide .row-1>div,
#category .row-1>div {
  flex-basis: 48%;
}

#logo-slide .owl-carousel .owl-item {
  min-height: 80px;
  border-radius: 12px;
  display: grid;
  align-items: center;
  justify-content: center;
  border: 1px solid #A1AEBF;
}

.owl-carousel .owl-item img, #how-services .para, #smart-match-banner .content-box {
  width: 80%;
  margin: 0 auto;
}

#owl-carousel2 {
  margin-top: 20px;
}

/* category */
#category .title-div {
  text-align: left;
}

#category {
  text-align: left;
}

#category .row-1 .title-div {
  min-width: 60%;
}

#category .row-2 .wrapper .category-col,
#services .row-2 .wrapper .services-col,
#service-categories .row .wrapper .services-cat-col, #latest-blogs .latest-blog-col,  #top-agency .top-agency-col {
  background-color: rgb(245 226 208);
  background-image: url(/assets/images/pattern-bg.png);
  /* background-size: cover; */
  padding: 2rem 1.5rem;
  min-width: 235px;
  min-height: 300px;
  display: flex;
  border-radius: 20px;
  align-items: flex-start;
  gap: 2.5rem;
}

#category .row-2 .wrapper .category-col .content-div h4,
#services .row-2 .wrapper .services-col .content-div h4 {
  color: var(--primary);
  font-size: 1.5rem;
  font-weight: 400;
}

#category .row-2 .wrapper .category-col .content-div ul {
  list-style: none;
}

#category .row-2 .wrapper .category-col .content-div p,
#category .row-2 .category-col .content-div ul li {
  margin-bottom: 8px;
  font-size: 1.2rem;
  color: var(--color) !important;
}

#category .row-2 .category-col .content-div a {
  text-decoration: none;
  color: var(--color);
}

#category .row-2 .wrapper .category-col .content-div ul li a:hover {
  color: var(--bg);
}

/* services */
#services {
  background-color: var(--white);
}

#services .services-row>p, .boost-filter-box .head-content p {
  width: 70%;
  margin: 0 auto;
  font-size: 1.3rem;
}

#services .row-2 .wrapper .services-col {
  min-height: 100px;
  height: 120px;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 30%;
}

#services .row-2 .wrapper a {
  text-decoration: none;
}

#services .row-2 .wrapper .services-col h4 {
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

#services .row-2 .wrapper .services-col h4 {
  position: relative;
  z-index: 1;
}

#services .row-2 .wrapper a .services-col::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background-color: var(--primary);
  border-top-left-radius: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 20px;
  transition: all 0.5s;
}

#services .row-2 .wrapper a:hover .services-col::after {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

#services .services-row .wrapper {
  margin-top: 4rem;
}

#services .row-2 .wrapper a:hover .services-col h4 {
  color: var(--color);
}

#services .row-2 .wrapper a:hover .services-col img {
  color: var(--color);
}

#services .services-row .wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#services .services-row .wrapper a {
  max-width: 23%;
}

#services .link-div {
  margin-top: 4rem;
}

#services .services-col {
  display: inline-block;
  cursor: pointer;
}

#services .services-col svg {
  z-index: 1;
}

#services .services-col:hover svg path,
#services .services-col:hover svg rect {
  fill: var(--color);
}

/* services-categories */
#service-categories .row h2 {
  width: 70%;
  margin: 0 auto;
}

#service-categories .row>p {
  font-size: 1.2rem;
}

/* text slider */
.slide-wrapper {
  margin-top: 3rem;
}

.slide-wrapper .tabs-box {
  display: flex;
  gap: 12px;
  list-style: none;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.tabs-box.dragging {
  scroll-behavior: auto;
  cursor: grab;
}

.tabs-box .tab {
  cursor: pointer;
  font-size: 1.18rem;
  white-space: nowrap;
  background: transparent;
  padding: 13px 20px;
  border-radius: 10px;
  border: 1px solid var(--primary);
  user-select: none;
  color: var(--primary);
}

.tabs-box .tab:hover {
  background: var(--primary);
  color: var(--color);
}

.tabs-box.dragging .tab {
  user-select: none;
  pointer-events: none;
}

.tabs-box .tab.active {
  color: var(--color);
  background: var(--primary);
  border-color: transparent;
}

#service-categories .row .wrapper .services-cat-col {
  min-height: 170px;
  text-align: left;
  gap: 1.5rem;
  justify-content: center;
}

#service-categories .row .wrapper .services-cat-col .star-div {
  gap: 10px;
}
#service-categories .row .wrapper .services-cat-col .star-div img{
  max-width: 60%;
}
#service-categories .services-cat-col a {
  text-decoration: none;
  color: var(--primary);
}

#service-categories .services-cat-col a:hover {
  color: var(--color);
}

#service-categories .row .wrapper .content-div h4 {
  margin-bottom: 0.8rem;
  color: var(--primary);
}

#service-categories .row .wrapper .content-div>p {
  margin-top: 0.8rem;
}

/* experience-cta1 */
#experience-cta .experience-row,
#contact-cta .contact-row {
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

#experience-cta .experience-row>div,
#contact-cta .contact-row>div {
  flex-basis: 48%;
}

#experience-cta .experience-row h2,
#contact-cta .contact-row h2 {
  text-transform: none;
}

/* #experience-cta .experience-row h2, */
#contact-cta .contact-row h2 span {
  color: var(--primary);
}

#experience-cta .experience-row p,
#contact-cta .contact-row p {
  margin-bottom: 2rem;
  font-size: 1.2rem;
}

#experience-cta .experience-row .experience-col img,
#contact-cta .contact-row .contact-col img {
  width: 100%;
  max-width: 80%;
}

#experience-cta .experience-row .experience-col .img-div {
  padding-left: 4rem;
}

#contact-cta .contact-row .img-div {
  padding-right: 4rem;
}

/* contact-cta */
#contact-cta {
  background-color: var(--bg);
  margin-bottom: 4rem;
}

/* footer */
#footer {
  background-color: var(--bg);
  padding-bottom: 0;
}

#footer .footer-row h3 {
  font-size: 1.6rem;
  font-weight: 600;
}

#footer .footer-row ul {
  list-style: none;
}

#footer .footer-row ul li a,
#footer .bold-text,
#footer .bottom-col a {
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color);
}

#footer .footer-row ul li,
#footer .bold-text {
  margin-bottom: 10px;
}

#footer .footer-row .main-footer>div {
  flex-basis: 25%;
}

#footer .footer-row .main-footer .footer-col ul li {
  text-decoration: none;
}

#footer .footer-row .main-footer .footer-col .logo-div img {
  max-width: 180px;
  margin-bottom: 2rem;
}

#footer .footer-row .main-footer .footer-col:first-child .footer-para {
  margin-bottom: 1.2rem;
}

#footer .footer-row .top-branded {
  padding: 4rem 0 1.2rem 0;
}
#footer .top-branded ul li a{
  font-weight: 400;
}
#footer .footer-row .top-branded ul {
  gap: 2rem;
}

#footer .footer-row .bottom-branded {
  padding: 1rem 0;
  border-top: 1px solid var(--black);
  align-items: center;
}

#footer .footer-row .bottom-branded>div {
  flex-basis: 33%;
}

#footer .footer-row .bottom-branded .social-icons {
  width: max-content;
  margin-left: auto;
  padding-top: 10px;
}

#footer .bottom-col a {
  font-weight: 400;
}

#footer .bottom-col .social-icons li:hover svg {
  fill: var(--color) !important;
}

#footer .bottom-col .social-icons {
  gap: 18px;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.desktop-hide {
  display: none;
}

#header .logo-div img {
  width: 150px;
}
#footer a:hover, #footer .footer-row ul li a:hover{color: var(--primary);}
.social-icons a svg {
  vertical-align: middle;
  max-width: 22px;
}
.social-icons li a:hover svg path{
  fill:black;
  }
/*************** Global CSS *****************/

/*************** About CSS *****************/
/* global about css */
/* banner */
#banner-about {
  background-image: url(/assets/images/about-us-banner.png);
  background-position: 90% 30%;
  display: flex;
  align-items: center;
  min-height: 600px;
}
/* about-ribbon */
#about-ribbon {
  background-color: var(--primary);
  padding: 15px 40px;
  position: relative;
}

#banner-about .about-ribbon-row {
  display: flex;
  height: 2.5rem;
  /* Adjust the height to match the height of one row */
  position: relative;
  animation: slideloop 15s linear infinite;
  white-space: nowrap;
  justify-content: space-between;
  width: 200%;
}

#banner-about .about-ribbon-col {
  position: relative;
  text-align: center;
  min-width: 14.5%;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

#banner-about .about-ribbon-col a {
  font-size: 1.5rem;
  text-transform: uppercase;
}

#banner-about .about-ribbon-col:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 30%;
  right: -4%;
  background-color: var(--color);
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

#about-ribbon {
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* about-ribbon */
#about-ribbon {
  background-color: var(--primary);
  padding: 15px 40px;
  position: relative;
}
.about-ribbon-row {
display: flex;
height: 2.5rem; /* Adjust the height to match the height of one row */
position: relative;
animation: slideloop 15s linear infinite;
white-space: nowrap;
justify-content: space-between;
width: 200%;
}

.about-ribbon-col {
  position: relative;
  text-align: center;
  min-width: 14.5%;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.about-ribbon-col a {
  font-size: 1.5rem;
  text-transform: uppercase;
}

.about-ribbon-col:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 30%;
  right: -4%;
  background-color: var(--color);
  width: 15px;
  /* Initially set width to 0 */
  height: 15px;
  border-radius: 50%;
}
#about-ribbon{overflow: hidden;  width: 100%;
position: relative;}

.about-ribbon-col {
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: center;
}


@keyframes slideloop {
  0% {
    transform: translatex(0%);
  }
  100% {
    transform: translatex(-100%);
  }
}

.about-ribbon-row:hover {
  animation-play-state: paused;
}
/* about-agency */
#about-agency {
  background-color: var(--bg);
}
#about-ribbon{margin-bottom: 4rem;}
#about-agency h1 {
  font-size: 3rem;
}

#about-agency .row {
  grid-template-columns: 64% 36%;
}

#about-agency .row .img-div img {
  width: 100%;
}

#about-agency .row .card-wrapper {
  grid-template-columns: repeat(auto-fill, minmax(30.5%, 1fr));
  column-gap: 3%;
  margin-top: 3rem;
  text-align: center;
}
#about-agency .item-text {
  font-size: 1.4rem;
}
#about-agency .row .card-wrapper .card {
  background-color: rgb(245 226 208);
  background-image: url(../assets/images/pattern-bg.png);
  background-size: cover;
  padding: 2rem 1.5rem;
  box-shadow: 24.55px 24.55px 47.05px 0px rgba(0, 0, 0, 0.302);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  min-height: 200px;
  transition: all 0.5s;
}

#about-agency .row .card-wrapper .card:hover {
  transform: scale(1.03);
}

#about-agency .row .card-wrapper .card h3 {
  margin-bottom: 0;
  font-size: 3.8rem;
  font-family: var(--para-font);
  font-weight: 500;
}

/* about-services */
#about-services {
  background-image: url(/assets/images/bg-dark-about.png);
  min-height: 500px;
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  position: relative;
  text-align: center;
}

#about-services .wrapper>div{
  flex-basis: 35%;
  box-shadow: 0px 0px 11px 5px #00000040;

}

#about-services .wrapper{
  margin-top: 80px;
  gap: 3.5%;
  justify-content: center;
}

#about-services .about-services-row h2, #how-services .about-services-row h2 {
  width: 70%;
  margin: 0 auto;
  margin-top: 1rem;
}

#about-services .about-col, #how-services .about-col {
  background-color: var(--card-bg);
  text-align: center;
}

#about-services .about-col:nth-child(2) img {
  width: 80%;
}

#about-services .about-col .btn, #how-services .about-col .btn {
  z-index: 1;
  margin: 2rem 0 2rem 0;
}

#about-services .about-col h3,
#about-services .about-col p, #how-services .about-col h3,
#how-services .about-col p {
  text-align: left;
}

/* our-team */
#our-team,
#testimonial {
  background-color: var(--bg);
  min-height: 300px;
}

#our-team .our-team-row .row-1 {
  grid-template-columns: 40% 60%;
}

#our-team .our-team-row .row-1 p,
#awards .award-row>p {
  font-size: 1.3rem;
}

#our-team .our-team-row .row-2 {
  grid-template-columns: repeat(auto-fill, minmax(20.5%, 1fr));
  column-gap: 2%;
  padding-top: 4rem;
}

#our-team .our-team-row .row-2 .our-team-col {
  background-color: var(--white);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: relative;
  padding-bottom: 35%;
  transition: all 0.7s;
}

#our-team .our-team-row .row-2 .our-team-col:hover {
  transform: scale(1.05);
}

#our-team .our-team-row .row-2 .our-team-col img {
  width: 100%;
}

#our-team .row-2 .our-team-col .content-div {
  padding: 1.2rem 1.2rem 0;
}

#our-team .row-2 .our-team-col .content-div h4 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

#our-team .our-team-row .row-2 .our-team-col .para-text {
  position: relative;
}

#our-team .our-team-row .row-2 .our-team-col .para-text span i {
  transform: rotate(180deg);
}

#our-team .row-2 .our-team-col:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  background-color: var(--bg);
  width: 100%;
  height: 100%;
  transition: width 0.3s ease;
  clip-path: polygon(0 88%, 100% 100%, 0 100%);
}

#our-team .row-2 .our-team-col svg {
  background-color: var(--primary);
  position: absolute;
  bottom: 6%;
  left: 10%;
  padding: 10px;
  border-radius: 50%;
  z-index: 5;
}

/* awards */
/* slick Slider */
.award-wrapper {
  margin-top: 2.5rem;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
  max-width: 120px;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* testimonial */
#testimonial h3 {
  font-size: 3.3rem;
  font-weight: 300;
}

#testimonial, .smart-service, .last-sec, .apply-cv-sec {
  margin-bottom: 3rem;
}

/* slider */
#testimonial .item {
  align-items: center;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  padding: 1.2rem;
  border-radius: 20px;
  border: 1.2px solid #EFEFEF;
  background: #000;
  min-height: 100px;
  height: auto;
}

.slider-wrapper {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
}

#testimonial-carousel .top-div {
  justify-content: center;
  gap: 10px;
}

#testimonial-carousel .top-div img {
  width: 100%;
  max-width: 50px;
  max-height: 50px;
}

#testimonial-carousel .top-div h4 {
  color: var(--white);
  font-size: 1.2rem;
  margin-bottom: 5px;
}

#testimonial-carousel .top-div .img-content .gary-text {
  color: #DDD;
  font-size: 1rem;
}

#testimonial-carousel .item p {
  color: #fff;
  font-weight: 600;
}

#testimonial-carousel .owl-prev,
#testimonial-carousel .owl-next {
  font-size: 20px;
  width: 40px;
  height: 40px;
  border: 1px solid black;
  background-color: var(--primary);
  color: var(--color);
}

#testimonial-carousel .owl-theme .owl-nav [class*=owl-]:hover {
  background-color: var(--bg);
}


#testimonial-carousel.owl-carousel .owl-stage-outer {
  padding: 4rem 0;
}

/* slider */
/*************** About CSS *****************/

/*************** Companies CSS *****************/
/* global css */
@import url(../css/global.css);

/* global about css */
a {
  text-decoration: none;
  color: var(--color);
  font-family: var(--para-font);
}

/* banner */
#banner-company, #banner-development, #banner-blog {
  background-image: none;
  min-height: 450px; display: flex; align-items: center;
}
#banner-company{
  min-height: 600px;
}
#banner-company .banner-row .content-div, #banner-development .banner-row .content-div,  #banner-blog .banner-row .content-div{margin-top: 0;}
#banner-company .content-div span, #banner-development .content-div span, #banner-blog .content-div span, #banner-blog-details span {
  font-size: 4rem;
  font-weight: 600 !important;
  font-family: var(--heading-font);
  color: var(--primary);
  padding: 0 8px;
}

#banner-company .banner-row, #banner-development .banner-row, #banner-blog .banner-row {
  gap: 3rem;
  align-items: center;
}

#banner-company .banner-row>div, #banner-development .banner-row>div, #banner-blog .banner-row>div, #banner-contact .banner-row>div, .apply-row>div {
  flex-basis: 49%;
}
#banner-blog .banner-row .img-div img, #banner-contact .banner-row .img-div img{
width: 80%;
}
#banner-company .banner-row .img-div img,
#banner-company .content-div .para, #banner-development .banner-row .img-div img, #banner-development .content-div .para, #banner-blog .content-div .para{
  width: 100%;
  margin-top: 2rem;
  text-transform: capitalize;
}
#banner-company .title,
#banner-development .title,
#banner-blog .title, #banner-all-services .title, #banner-blog-details .title, #smart-match-banner .title{  vertical-align: 0;
  font-size: 4rem;
  display: inline;
  font-weight: 400;
}
/* filter-bar */
#filter-bar .top-bar {
  background-color: var(--bg);
  padding: 2rem 0;
}

#filter-bar .bottom-bar {
  padding: 2rem 0;
}

#filter-bar #filter-form {
  align-items: center;
 gap: 8rem;
 justify-content: space-around;
}

#filter-bar .item {
  display: none;
  /* Hide all items by default */
}

#filter-bar .item.active {
  display: block;
  /* Show active items */
}
.filter-btn-box{
width: 55%;
justify-content: space-around;
margin: 30px auto;
}
.filter-btn-box .btn{
  background-color: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--primary);
  box-shadow: none;
  color: var(--primary);
  font-size: 1.2rem;
}
.filter-btn-box .btn:hover{
  letter-spacing: 0.25px;
  background-color: var(--primary);
  color: var(--white);
}
#filter-bar #filter-form label,
#filter-bar #filter-form select {
  font-size: 1rem;
  font-family: var(--para-font);
}

#filter-bar #filter-form select {
  background-color: var(--bg);
  width: 160px;
  padding: 0.5rem;
  color: var(--gray);
  border: 1px solid var(--primary);
  height: 34px;
  background: url(../images/icons/down-arrow.png) no-repeat right var(--bg);

  -webkit-appearance: none;
  background-size: 20px;
  outline: none;
  background-position-x: 97%;
  font-weight: 600;
  min-height: 40px;
  margin-left: 10px;
}

#filter-bar #filter-form select:focus {
  box-shadow: none;
}

#filter-bar .item, .dashboard-wrapper, #feature-review .feature-review-wrapper {
  width: 100%;
  min-height: 400px;
  background-image: url(/assets/images/item-bg.png);
  background-size: cover;
  box-shadow: 4px -4px 4px 0px rgba(0, 0, 0, 0.25), -4px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  margin: 2rem 0;
}

#filter-bar #item-container {
  padding: 0 10%;
}

#filter-bar .item-top-bar .item-review-left {
  flex-basis: 55%;
}
#filter-bar .item-top-bar .item-review-right{
  flex-basis: 45%;
}

.item-review-left {
  gap: 1rem;
  align-items: center;
}

.item-review-left img, #dashboard-banner .header-logo img {
  width: 100%;
  height: auto;
  max-width: 120px;
}

#filter-bar .item-top-bar {
  border-bottom: 2px solid var(--primary);
  padding: 2rem;
}

.item-review-left .content-div a, .dashbord-header h4{
  font-size: 2rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0;
}

.item-review-left .content-div h4 {
  margin-bottom: 0.8rem;
}

.item-review-left .content-div .star-div img {
  width: 100%;
  margin-right: 10px;
  max-width: 160px;
  height: auto;
  object-fit: contain;
}

.item-review-left .content-div p {
  margin-top: 10px;
}

.item-review-right .info-div {
  grid-template-columns: repeat(auto-fill, minmax(34%, 1fr));
  grid-gap: 2rem;
  width: 100%;
}

.item-review-right {
  padding-left: 2rem;
  justify-content: space-between;
}

.item-review-right .info-div .info-text, .dashboard-content .info-div .info-text {
  border: 2px solid var(--bg);
  padding: 10px;
  gap: 10px;
  width: max-content;
  border-radius: 5px;
  align-items: center;
}

.item-bottom-bar {
  padding: 2rem;
}

.item-bottom-bar .para-text {
  font-size: 1.3rem;
}

.item-bottom-bar .buttons-div {
  margin-top: 2.5rem;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.item-bottom-bar .buttons-div .arrow-icon {
  margin-left: 10px;
  font-size: 20px;
}

.item-bottom-bar .buttons-div .btn:not(:last-child) {
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.item-bottom-bar .buttons-div .btn:not(:last-child):hover {
  color: var(--color);
}

/*************** Company CSS *****************/

/*************** Company-dashbaord CSS *****************/
.dashboard-wrapper{padding: 2rem;}
.logo-bar, .button-bar-rt{
  align-items: center;
  gap: 1.2rem;
}
.dashbord-header{justify-content: space-between; flex-wrap: wrap;}
.dashbord-header .buttons-div{
  /* min-width: 400px; */
  justify-content: space-between;
  gap: 1rem;
}
.dashbord-header .buttons-div>a{height: fit-content;}
.dashbord-header{border-bottom: 2px solid var(--bg);
padding-bottom: 2rem;}
.text-section {
  max-width: 600px;
  margin: auto;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.more-text {
  display: none;
}
.dashboard-content{gap: 3rem;padding: 40px 0;}
.dashboard-content .info-div {
  grid-template-columns: repeat(1, 170px);
  grid-auto-rows: 50px;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.dashboard-wrapper .card-wrapper{
  gap: 1.9rem;
}
.dashboard-wrapper .card-wrapper>div{flex-basis: 23%;}
.dashboard-wrapper .card-wrapper .about-col{
  text-align: center;
  background: rgba(237, 123, 14, 0.18);
  background-image: url(/assets/images/pattern-bg.png);
  box-shadow: 1px 1px 6px 2px rgb(0 0 0 / 25%);
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.dashboard-wrapper .card-wrapper .about-col:nth-child(even) h3{
color: var(--primary);
}
.dashboard-wrapper .card-wrapper .about-col::after{
  transform: rotate(180deg);

  background-position: bottom;
}
/* tabs */
.chart-container{padding-top: 4rem;}
.tab-col .tablinks{
display: block;
margin-bottom: 1rem;
}
.tabcontent {
  border: 1px solid var(--light-slate);
  min-height: 300px;
  display: none;
  padding: 2rem;
  font-family: arial;
  line-height: 21px;
  transition: all 1s ease-in;
}
.content-div-box{
  background-color: #ffffff;
  /* flex-wrap: wrap;
  justify-content: space-between; */
}
/* .content-div-box .box {
  max-width: 49%;
  flex-basis: 49%;
}
.content-div-box h3{
  width: 100%;
}
.content-div-box > .box:first-child {
width: 100%;
flex-basis: 100%;
max-width: 100%;
} */
.chart-container .tab-row>div:first-child{    flex: 0 0 22%; padding-right: 1rem; /* Flex-grow: 0, Flex-shrink: 0, Flex-basis: 20% */
}
.chart-container .tab-row>div:nth-child(2){    flex: 0 0 78%; /* Flex-grow: 0, Flex-shrink: 0, Flex-basis: 20% */
}
.tabcontent {align-items: center;
gap: 2rem;}
.tabcontent >div{
  flex-basis: 47.5%;
}
.tabcontent .chart-img img{width: 100%; object-fit: contain;
}
.chart-data{padding: 0 20px;}
.chart-data ul li{justify-content: space-between;padding: 10px 0; position: relative;}
.chart-data ul li:after{content: "";
  position: absolute;
  top: 17px;
  left: -20px;
  background-color: var(--primary);
  width: 10px;
height: 10px;
}
#map-box{padding-top: 0; padding-bottom: 100px;}
#map-box .map-info{
  max-width: 310px;
  height: max-content;
  background-color: var(--card-bg);
  box-shadow: 0px 0px 11px 5px #00000040;
  border-radius: 20px;
  position: relative;
  margin-top: -450px;
  margin-left: 50px;
}
#map-box .map-info::after{
  border-radius: 20px;
}
#map-box .map-info .content{position: relative ;z-index: 9999;}
#map-box .map-info .content h3{
  font-size: 2rem;
  margin-bottom: 1rem;
}
#map-box .map-info .content img{
  vertical-align: -10px;
  margin-right: 10px;
}

#map-box .map-info .content p, #map-box .map-info .content a{
  color: var(--color);
  font-size: 1.2rem;
  line-height: 1.5em;
  margin-top: 0.6rem;
}
#map-box .map-info .content a{color: var(--primary);
font-weight: 500;}
#review-rating .rating-row, #building .building-wrapper{
  background-color: var(--card-bg);
  grid-template-columns: 30% 65%;
  gap: 5%;
  text-align: center;
  min-height: 300px;
  align-items: center;
}
#building .building-wrapper{position: relative;}
#review-rating .review-progress{
  justify-content: space-between;
  padding-bottom: 2rem;
}
#review-rating .review-progress p{font-size: 1.3rem;
margin: 1rem 0;}
#review-rating .rating-row:after, #building .building-wrapper:after {
  background-image: url('../images/review-rating-after.png');
  background-position: bottom center;
}
#review-rating .rating-row .rating-col .top-text{
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
#review-rating .rating-row .rating-col a{display: block;
text-decoration: none;
font-size: 1.3rem;
color: var(--primary);
font-weight: 600;}
#review-rating .rating-row .rating-col .des{
  color: var(--gray);
}
#feature-review{
  background-color: var(--bg);
  min-height: 500px;
}
#feature-review .feature-review-wrapper{
  min-height: 500px;
  background-color: #fff;
}
#feature-review .feature-review-wrapper .feature-review-head{
  background-color: var(--primary);
  padding: 2rem;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  justify-content: space-between;
}
#feature-review .feature-review-wrapper .feature-review-head .btn-box .btn{background-color: var(--black); color: var(--white);}
#feature-review .feature-review-wrapper .feature-review-head .btn-box .btn svg{vertical-align: -6px; margin-right: 10px;}
#feature-review .feature-review-wrapper .feature-review-head h3{font-size: 2rem; margin-bottom: 0;}
#feature-review .feature-review-wrapper .feature-review-head h3 span{
  background-color: var(--black);
  color: var(--white);
  padding: 4px 6px;
  margin-left: 10px;
  font-weight: 300;
  font-size: 1.3rem;
}
#feature-review .feature-review-content{
  padding: 2rem;
}
#feature-review .feature-review-content{gap: 2%;}
#feature-review .feature-review-content>div{flex-basis: 33%;}
#feature-review .feature-content-col H4{
  font-size: 1.6rem;
  margin:1REM 0;
  color: var(--black);
}
#feature-review .feature-content-col P{font-size: 1.2rem;}
#feature-review .feature-content-col .icon-info svg{vertical-align: -5px; margin-right: 10px;}
#feature-review .feature-content-col:last-child .icon-info{margin-bottom: 1rem;}
#feature-review .feature-bottom-col{padding: 2rem 1rem;
border: 1px solid var(--gray);
text-align: center;}

#feature-review .feature-bottom-col .gary-text{
  color: var(--gray);
  font-size: 1.2rem;
}
#feature-review .feature-bottom-col h4{
  margin-bottom: 1rem;
  font-size: 2rem;
}
#feature-review .feature-bottom-col img{max-width: 150px;}
#feature-review .feature-review-bottom {width: 62%; margin: 0 auto;padding: 0 0 60px 0;}
#feature-review .feature-review-btn .btn{
border-radius: 10px;
}
#feature-review .btn-box{
  min-width: 110px;
}
#feature-review .feature-review-btn{text-align: center; padding-bottom: 2rem;}
/* review-carousal */
/* portfolio-slider */

/*************** Company-dashbaord CSS *****************/



/*************** Development CSS *****************/
.faq-container .tab-row>div:first-child{    flex: 0 0 40%; /* Flex-grow: 0, Flex-shrink: 0, Flex-basis: 20% */
  border: 1px solid rgb(250 245 245 / 74%);
background-color: rgb(255 255 255 / 35%);
margin: 50px 0;
margin-left: 50px;
z-index: 1;
}
 .faq-container .tab-row>div:nth-child(2){    flex: 0 0 60%; /* Flex-grow: 0, Flex-shrink: 0, Flex-basis: 20% */
background-color: rgba(237, 123, 14, 0.18);
box-shadow: 0px 0px 4.8px 1.2px #00000026;
padding-left: 100px;
border-radius: 20px;
margin-left: -100px;
}
.faq-container .tabcontent{
  padding:3rem;
}
.faq-container .tab-col .tablinks, .tab-sidebar .tab-col .tablinks{
  width: 100%;
  position: relative;
  background: var(--white);
  display: flex;
  padding: 25px 30px;
  border: none;
  outline: none;
  margin-bottom: 0;
  text-align: left;
  font-size: 1rem;
  padding-inline-start: 40px;
line-height: 1.6em;
  text-transform: capitalize;
  transition: all 0.5s ease;
  text-decoration: none;
  border: none;
  color: var(--color);
  font-family: var(--para-font);
  cursor: pointer;
  display: inline-block;



  }
  .faq-container .tab-col .tablinks.active{background: rgba(237, 123, 14, 0.18);
    box-shadow: 0px 0px 1.2px 1.2px rgba(0, 0, 0, 0.15);
}
  .faq-container .tab-col .tablinks::after{
    content: "";
  position: absolute;
  top: 30px;
  left: 10px;
  background-color: var(--black);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  transition: width 0.3s ease;
  }
  .faq-container .tab-col .tablinks.active::after{
    background-color: var(--primary);

  } .faq-container .tab-col .tablinks::before, .buyer-filter h4::before{
    content: "\003E";
    position: absolute;
  right: 10px;
  top: 30px;
  font-size: 35px;
  color: var(--primary);
  float: right;
  margin-left: 5px;
  }
  .faq-box-row h2{
    margin-bottom: 4rem;
  }
/*************** Development CSS *****************/

/*************** All Services CSS *****************/
#banner-all-services, #banner-blog-details, #buyer-faq, #how-work, #smart-match-banner{
  background-color: var(--bg);
  text-align: center;
  background-image: url(/assets/images/banner-all-services-img.png);
  background-position: -49% 0%;
  background-size: 53%;
  background-repeat: no-repeat;
  width: 100%;
}
#banner-all-services .para{width: 100%;}
#Categories-box .tab-row{
  gap: 2rem;
}
#Categories-box .tab-row .tab-sidebar, #Categories-box .content-div-box, #populer-blogs {
flex-basis: 30%;
background-color: rgba(237, 123, 14, 0.18);
background-image: url("/assets/images/pattern-bg.png");
background-repeat: repeat;
border-radius: 10px;
}
#Categories-box .tab-row .heading-div{
  text-align: center;
  background-color: var(--bg);
  padding: 2rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

}
#Categories-box .tab-row .heading-div h3{
  margin-bottom: 0;
  font-size: 1.8rem;
}
#Categories-box .tab-row .tab-col{
  padding: 1.5rem;
} 
#Categories-box .content-div-box{
  flex-basis: 70%;
}
#Categories-box .tab-sidebar .tab-col .tablinks{
  margin-bottom: 10px;

  background: transparent;
  padding: 15px 18px;
}#Categories-box .content-div-box {
  box-shadow: 0px 0px 2px 2px #ddd;
  height: max-content;
}
#Categories-box .tab-col .tablinks:hover, #Categories-box .tab-col .tablinks.active{
  background: var(--primary);
  border-radius: 5px;
  font-weight: 600;
}
#Categories-box .content-div-box .top-bar{
  justify-content: space-between;
  align-items: center;
}
#Categories-box .content-div-box .search-bar{
  max-width: none;
}
#Categories-box .content-div-box .search-bar input{
  background-color: transparent;
  font-size: 1.1rem;
  color: var(--gray);
  font-weight: 300;
}
#Categories-box .content-div-box .search-bar .search-icon{
  fill: var(--primary);
}
#Categories-box .content-div-box .search-bar .input{border: 1px solid var(--primary);}
#Categories-box .content-div-box .search-bar .input, #Categories-box .content-div-box .search-bar .input:hover{
box-shadow: none;
}
#Categories-box .filter-btn-box{
  width: 100%;
    justify-content: space-between;
    margin: 30px 0;
    align-items: center;
}
#Categories-box .filter-btn-box h4{
  margin-bottom: 0;
}
#Categories-box .filter-btn-box .btn{
  font-size: 1rem;
  background-color: transparent;
}
#Categories-box .filter-btn-box .btn:hover, #Categories-box .filter-btn-box .btn:active{
  background-color: var(--primary);
  color: var(--color);
}
#Categories-box .platform-filter{
  border: 1px solid var(--primary);
}
#Categories-box .platform-filter .filter-top{
  padding: 1rem;
  background-color: var(--bg);
  text-align: center;
}
#Categories-box .platform-filter .filter-top h4{
  margin-bottom: 0;
  font-weight: normal;
}
#Categories-box .platform-filter .filter-bottom{
  padding: 1rem;
}
#Categories-box .platform-filter .filter-bottom .bottom-left-bar{
  width: 20%;
  background-color: #ffffff6c;
  flex-direction: column;
}
#Categories-box .platform-filter .filter-bottom .bottom-left-bar a{padding: 1rem;}
#Categories-box .platform-filter .filter-bottom .bottom-left-bar a:hover{
  color: var(--primary);
}
#Categories-box .filter-bottom {
  gap: 2rem;
}
#Categories-box .filter-bottom .bottom-right-bar {
  width: 80%;
}
/*************** All Services CSS *****************/


/*************** Blog CSS *****************/
#banner-blog .content-div .para{
font-size: 2.2rem;
}
#banner-blog .content-div{
  min-width: 55%;
}
.latest-blog-row .heading-div, .top-agency-row .heading-div, .more-articles-row .heading-div{
  border-bottom: 1px solid var(--primary)
}
.heading-div h3 {
  margin: 0 0 20px 0;
  font-size: 1.5em;
}

#populer-blogs .tab-col {
  display: flex;
  flex-direction: column;
}

.tab-btn {
  background-color: transparent;
  color: var(--primary);
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px;
  margin-bottom: 5px;
  text-align: left;
  transition: background-color 0.3s;
  font-family: var(--para-font);
  border-bottom-right-radius: 30px;
  border-top-right-radius: 30px;
  font-size: 1.2rem;
}

.tab-btn:hover {
  background-color: var(--bg);
  color: var(--color);
}

.tab-btn.active {
  background-color:var(--primary);
  color: var(--color);
  border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    font-weight: 600;
}

/* Content area styles */
.content-div-box {
  flex: 3;
  padding: 0 20px;
}

.tabcontent {
  display: none;
}

.tabcontent.active {
  display: block;
}

/* Head content styles */


.top-bar {
  justify-content: space-between;
  align-items: center;
}

.top-bar h4 {
  margin: 0;
}

.filter-bar {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.search-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.filter-btn-box {
  align-items: center;
}

.filter-btn-box h4 {
  margin: 0 10px 0 0;
}

#populer-blogs .filter-btn-box .btn {
  background-color: #555;
  color: white;
  padding: 10px 15px;
  margin-right: 10px;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

#populer-blogs .filter-btn-box .btn:hover {
  background-color: #333;
}
/* Platform filter styles */

#populer-blogs .tab-row .content-div-box{background-color: transparent;}
#populer-blogs .tab-row .box{
  background-color: transparent;
  border: 1px solid var(--primary);
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 1rem;
}
#populer-blogs .tab-row .content-div-box h3 a, #latest-blogs .latest-blog-col h4 a, #top-agency .top-agency-col h4 a,  #more-articles .more-articles-col h4 a{color: var(--primary);}
#populer-blogs .tab-row .content-div-box h3 a:hover, #latest-blogs .latest-blog-col h4 a:hover,#top-agency .top-agency-col h4 a:hover, #more-articles .top-agency-col h4 a:hover {color: var(--color);}
#populer-blogs .tab-row .content-div-box img{    
  width: 100%;
  object-fit: cover;
  margin-top: 2rem;
  max-height: 380px;
  border-radius: 10px;}
/* this is for blog tags */
#populer-blogs .tab-row{
  gap: 2rem;

}
.tag{
  padding: 10px 20px;
  border: 1px solid var(--primary);
  display: inline-block;
  margin-top: 1rem;
  border-radius: 5px;
  margin-right: 20px;
}
.read-more-a{
  display: inline;
  color: var(--primary);
  text-decoration: underline;
}
#latest-blogs .latest-blog-col, #top-agency .top-agency-col {display: block;}
#latest-blogs .latest-blog-col img{width: 100%;}

#latest-blogs .latest-blog-wrapper, #top-agency .top-agency-wrapper,  #more-articles .more-articles-wrapper{
  gap: 2%;
  margin-top: 4rem;
}
#latest-blogs .latest-blog-wrapper>div, #top-agency .top-agency-wrapper>div{
  flex-basis: 32%;
}
#latest-blogs .latest-blog-col h4, #more-articles .more-articles-col h4{
margin-bottom: 1rem;
margin-top: 1.2rem;
}
#top-agency .top-agency-wrapper .top-agency-col{text-align: center; min-height: 150px;}
  #top-agency .top-agency-col h4{
    margin-bottom: 1rem;
  }
  #top-agency, #more-articles{
    padding-top: 0;
  }
  #top-agency .top-agency-wrapper {
    width: 90%;
    margin: 0 auto;
    margin-top: 3rem;
  }
.more-articles-col{
  border: 2px solid var(--primary);
  border-radius: 10px;
  padding: 1rem;
  margin-top: 1rem;
}
#more-articles .tag-div{
  padding-bottom: 2rem;
  border-bottom: 3px solid var(--bg);
}
#more-articles .more-articles-col h4 a{font-size: 2rem; line-height: 1.4em;}
#more-articles .more-articles-col p{
  font-size: 1rem;
}
#more-articles .more-articles-col{
  gap: 3%;
  align-items: center;
}
/*************** Blog CSS *****************/


/*************** contact CSS *****************/


#banner-contact .form-container {
  background-color: rgba(237, 123, 14, 0.18);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  width: 100%;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="file"],
textarea, select {
  width: 100%;
  padding: 10px;
  margin-bottom: 1rem;
  border: 1px solid var(--color);
  outline: none;
  min-height: 40px;
}
#contact-form input, #sign-up-form input, #contact-form select, #sign-in-form input{
  background-color:transparent;
}
 input#firstName, input#lastName, input#email, input#phoneNumber{
  width: 50% !important;
 }

#contact-form .checkbox-container, #sign-up-form .checkbox-container, #sign-in-form .checkbox-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  text-align: left;
  font-family: var(--para-font);
  font-weight: 400;
}
#contact-form .checkbox-container span, #sign-up-form .checkbox-container span, #sign-in-form .checkbox-container span{
color: var(--primary);
}
#contact-form input[type="checkbox"], #sign-up-form input[type="checkbox"], #sign-in-form input[type="checkbox"]{
  max-width: 5%;
  background-color: transparent;
}
#contact-form input::placeholder, #sign-up-form input::placeholder, textarea::placeholder, #sign-in-form input::placeholder{
  color: var(--color);
  font-family: var(--para-font);
}
#first-name, #last-name, #country-code, #phone-number, #first-name-user, #last-name-user, #country-code-user, #phone-number1 {
  max-width: 49%;
}
#first-name, #country-code, #first-name-user, #country-code-user{margin-right: 2%;}
#last-name,  #phone-number{
  float: right;
}
#first-name-user, #country-code-user{float: left;}
.checkbox-container input {
  margin-right: 10px;
  margin-top: 2px;
}
#contact-form textarea{
  background-color: transparent;
}
#banner-contact .banner-row{
  gap: 4%;
  align-items: center;
}
#banner-contact .form-container .btn, #find-your-agency .btn{
  width: max-content;
  margin: 0 auto;
  margin-bottom: 3rem;
  min-width: 200px;
}
#banner-contact .banner-row .img-div img{width: 80%;}
#contact-form, .form-container h2, .form-container p{
  position: relative;
  z-index: 1;
  text-align: center;
} .form-container h2{
  font-size: 2rem;
color: var(--primary);
margin-bottom: 1rem;
}
.form-container p{
  font-size: 1.4rem;
  text-transform: capitalize;
}
#contact-form{
  max-width: 80%;
  margin: 0 auto;
  margin-top: 2rem;
}
#form-sec .form-container{
position: relative;
z-index: 1;
}
/*************** contact CSS *****************/

/*************** blog-details CSS *****************/
#banner-blog-details .content-div{
text-align: left;
}
#banner-blog-details{
  background-image: url(/assets/images/blog-details-banner.png);
  background-position: 140% 50%;
  background-size: 50%;
}
#detail-content .para-div p{font-size: 1.3rem; line-height: 1.6em;}
#detail-content .para-div a, #detail-content .para-div span{
color: var(--primary);
}
#detail-content .para-div span{
  font-weight: 600;
}
#detail-content .img-div, #detail-content .heading-div{
  padding: 2rem 0;
}
#detail-content .img-div img,  #banner-service-provider .img-div img, #get-banner .img-div img, #boost-banner .img-div img{
  width: 100%;
}
#detail-content .img-div img{
  max-height: 350px;
  object-fit: cover;
  border-radius: 10px;
}
#detail-content .heading-div, #building .building-row>h2{
  text-align: center;
  width: 80%;
  margin: 0 auto;
  padding-top: 4rem;
}
#building .building-row>h2{
  padding: 0;
margin-bottom: 2rem;
}
#detail-content .para-div h4{
  margin:2rem 0 1rem 0;
}

#detail-content .para-div ul li{
  margin-inline-start: 20px;
  margin-top: 8px;
}
/*************** blog-details CSS *****************/

/*************** buyer-faq CSS *****************/
#buyer-faq .search-bar{
  max-width: 100%;
  width: 60%;
  margin: 0 auto;
}
#buyer-faq .search-bar input{
  background-color: transparent;
  box-shadow: none;
  border: 1px solid var(--primary);
}
/*************** buyer-faq CSS *****************/
.buyer-filter h4{
  background-color: var(--bg);
  text-align: left;
  padding: 1rem;
  position: relative;

}
.buyer-filter h4::before{
  content: "\25be";
  top: 20px;
}
/* filter content tab */
.tab-content-container .accordion {
  background-color: transparent;
  color: var(--primary);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.2rem;
  transition: 0.4s;
}

.tab-content-container .active, .tab-content-container .accordion:hover {
  background-color: var(--primary); 
  color: var(--color);
  font-weight: 700;
}

.tab-content-container .panel {
  padding: 10px 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
.tab-col ul {
  list-style-type: none;
  display: none;
}

.tab-col ul.active {
  list-style-type: none;
  display: block;
}

#sign-up-form .btn, #sign-in-form .btn, #google-btn{
  display: block;
  margin: 10px auto;
}
#sign-up-form .btn, #sign-in-form .btn, #contact-form .btn {
  margin-top: 30px;
  min-width: 240px;
  font-size: 1rem;
  text-transform: uppercase;
}
#sign-up-form, #sign-in-form{
  position: relative;
  z-index: 1;
}
#google-btn{
  padding: 10px;
  border: 1px solid var(--color);
width: max-content;
margin-top: 0;
}
#google-btn svg{
  vertical-align: -13px;
max-width: 30px;
max-height: 30px;
margin-right: 10px;
font-size: 1rem;
}
#sign-up-form .checkbox-container label, #sign-up-form .checkbox-container p, #sign-in-form .checkbox-container label, #sign-in-form .checkbox-container p{
font-size: 14px;
}
 .form-sec-col{
  background: rgba(237, 123, 14, 0.18);   
  background-image: url(/assets/images/pattern-bg.png);
  padding: 30px;
  border-radius: 30px;
  text-align: left;
  position: relative;
}
.form-sec-wrapper {
  justify-content: center;
  align-items: center;
  width: 50%;
    margin: 0 auto;
}
.form-sec-col h1{
  font-size: 3rem;
}
.form-sec-col label{
  font-family: var(--para-font);
}
.form-sec-col input:focus{
  border-color: var(--primary);
}
/* submenu */
/* Basic styles for the menu */
#navbar ul li {
  position: relative;
}
/* Styles for the submenu */
.submenu, .block-submenu{
  background-color: var(--white);
    min-width: 150px;
    position: absolute;
    top: 28px !important;
    right: 0;
    display: none;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.7s ease-in-out;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 1;
}
.submenu li, .block-submenu li{
  padding: 12px 10px;
  margin-left: 0;
}
.submenu li:not(:last-child), .block-submenu li:not(:last-child){
  border-bottom: 1px solid var(--light-bg--gray);
}
.submenu li a, .block-submenu li a{
  color: var(--color);
  text-decoration: none;
  font-size: 14px;
}
#header .menu .navbar .submenu li:after, #header .menu .navbar .block-submenu li:after{
  display: none !important;
}
#openMenu, #closeMenu{
  font-size: 25px;
}
#navbar ul li:hover > .submenu, #navbar ul li:hover > .block-submenu {
  display: block;
  top: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  visibility: visible;
}
#navbar ul li:hover > .block-submenu {
  display: flex;}
#navbar ul li:hover .fa-solid{
  transform: rotate(180deg);
}
.block-submenu{
  column-count: 2;
  min-width: 300px;
}
.inner-ul{
  min-width: 800px;
    padding: 1rem 0;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .12);
    gap: 0.1rem;
    border-bottom: 3px solid var(--primary);

}
#header .menu .navbar .inner-ul .inner-nav li{
  margin-left: 0;
  display: block;
}
.inner-nav{
  flex-grow: 1;
  min-width: 16%;
}
.inner-nav:not(:first-child){
  border-left: 1px solid var(--light-bg);
}
.inner-nav p{
  font-weight: 600;
  text-align: left;
  padding: 10px 0;
  padding: 12px 10px;
}
.inner-nav li:hover{
  background-color: var(--primary);
}
.inner-nav li:hover a{
  color: var(--white) !important;
}
#how-work .content-div {
  margin: 0 auto;
}
#how-services .wrapper>div{flex-basis: 32%; max-width: 32%;
}

#how-services .wrapper{
  justify-content: space-between;
  margin-top: 3rem;
}
.how-col{
  display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#how-services h2{
  text-align: center;
}
.how-review{
  position: relative;
}
.how-review .review-row {
  z-index: 3;
    position: relative;
}
.how-review:after{content: "";
  position: absolute;
  width: 100%;
  height: 60%;
  background-color: var(--white);
  top: 0;
  left: 0;
  z-index: 1;}
  #banner-service-provider, #get-banner, #boost-banner{
    background-color: var(--bg);
    background-image: url(/assets/images/banner-all-services-img.png);
    background-position: 150% 10%;
    background-size: 53%;
    background-repeat: no-repeat;
    width: 100%;
  }
  #banner-service-provider .banner-row .content-div, #get-banner .banner-row .content-div, #boost-banner .banner-row .content-div{
    margin-top: 0;
  }
  #building .rating-row {
    align-items: center;
    position: relative;
    z-index: 1;
    text-align: left;
    min-height: 350px;
    gap: 2rem;
  }
  #building .rating-row h3{
    font-weight: 500;
  }
  #how-card-sec{
    background-color: var(--bg);
    text-align: center;
  }
  #how-card-sec .how-card{
    flex-grow: 1;
    position: relative;
  }
  #how-card-sec .how-card img{max-width: 150px;}
  #how-card-sec .how-card:not(:last-child)::after{
    content:url("/assets/images/card-arrow.png");
    position: absolute;
    width: 100px;
    height: 100%;
    top: 40%;
    left: 80%;
  }
  #how-card-sec .how-card-wrapper {
    position: relative;
    margin-top: 6rem;
  }
  #banner-service-provider .banner-row .content-div .para, #get-banner .banner-row .content-div .para, #boost-banner .banner-row .content-div .para{
    font-size: 1.3rem;
  }
  .how-card p{
    font-size: 1.3rem;
    font-family: var(--heading-font);
  }
  #how-card-sec .how-card-wrapper::after {
    content: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22600%22%20height%3D%2280%22%20viewBox%3D%220%200%20739%2083%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M737.177%2065.946C737.7%2066.125%20738.268%2065.8465%20738.447%2065.3241C738.626%2064.8016%20738.348%2064.2329%20737.825%2064.0539L737.177%2065.946ZM709.69%2055.4709L710.014%2054.5249L709.69%2055.4709ZM18.1853%2071.4099L17.8179%2070.4798L18.1853%2071.4099ZM0.583719%2077.6021C0.364007%2078.1088%200.596596%2078.6977%201.10327%2078.9174L9.36019%2082.4984C9.86686%2082.7182%2010.4558%2082.4856%2010.6755%2081.9789C10.8953%2081.4722%2010.6627%2080.8833%2010.1559%2080.6636L2.81648%2077.4805L5.99961%2070.141C6.21938%2069.6343%205.98673%2069.0454%205.48006%2068.8257C4.97338%2068.6059%204.38447%2068.8385%204.16476%2069.3452L0.583719%2077.6021ZM737.825%2064.0539L710.014%2054.5249L709.366%2056.4169L737.177%2065.946L737.825%2064.0539ZM17.8179%2070.4798L1.13379%2077.0699L1.86856%2078.9301L18.5527%2072.3399L17.8179%2070.4798ZM710.014%2054.5249C484.73%20-22.6638%20239.306%20-17.0069%2017.8179%2070.4798L18.5527%2072.3399C239.599%20-14.9719%20484.532%20-20.6175%20709.366%2056.4169L710.014%2054.5249Z%22%20fill%3D%22black%22/%3E%3C/svg%3E');
    position: absolute;
    width: 200px;
    height: 200px;
    top: -40%;
    left: 40%;
    background-size: 100px 100px; /* Adjusted background-size to 100px */
}
#review .how-review-wrapper .review-col h4{
  font-size: 1.2rem;
}
#review .how-review-wrapper .review-col {
  justify-content: center;
}
#review .how-review-wrapper .review-col p{
  font-size: 1rem;
}
.check-list {
  padding: 0; /* Remove default padding */
  margin-top: 2rem;
}

.check-list li {
  list-style-type: none; /* Remove default bullet points */
  font-size: 1em;
  margin-bottom: 20px; /* Space between list items */
  position: relative; /* Position context for ::before pseudo-element */
  padding-left: 40px;
}

.check-list li::before {
  content: url("/assets/images/checkbox.svg"); /* Path to the custom marker image */
  display: inline-block;
  position: absolute;
  left: 0; /* Align the image to the left */
  top: 50%; /* Position the image in the middle */
  transform: translateY(-50%); /* Adjust the image to be vertically centered */
}
#get-banner .banner-row>div, #boost-banner .banner-row>div{
  flex-basis: 49%;
}
#get-banner .banner-row,#boost-banner .banner-row{
  gap: 2%;
}
#get-banner .banner-row .info-container{
  background-image: url(/assets/images/pattern-bg.png);
  padding: 30px;
  border-radius: 30px;
  background-color: var(--card-bg);
  margin-bottom: -40%;
}
#get-banner .banner-row .info-container .btn{
  margin-top: 2rem;
  margin-left: 15%;
}
#how-services .about-services-row h2{
  margin-top: 4rem;
}
#how-services .para{
  text-align: center;
  margin-top: 1rem;
}
#how-services .about-col .content-box{
  position: relative;
  z-index: 1;
}
#how-services .about-col .content-box h4{
  text-align: left;
  font-weight: 400;
}
#how-services .about-col .content-box .btn{
  padding: 10px;
  font-size: 1rem;
}
#how-services .about-col .content-box .btn:hover svg, .info-container .btn:hover svg, .review-form .btn:hover svg {
  stroke: var(--white);
}
#how-services .about-col .content-box .btn:hover svg path, .info-container .btn:hover svg path, .review-form .btn:hover svg path{
  fill: var(--white);
}
#review-form-sec .title{
  font-size: 3.5rem;
  font-weight: 600;
  text-align: center;
}
.review-form {
  flex-wrap: wrap;
  justify-content: space-between;
}
.heading-bar{
  flex-basis: 100%;
  margin-top: 2rem;
  text-align: left ;
}
.form-group{
  flex-basis: 49%;
}
.review-form input, .review-form textarea, .review-form select, #create-profile .form-col input, #create-profile .form-col textarea, #create-profile .form-col select {
  border-radius: 10px;
border: 2px solid #ED7B0E;
outline: none;
color: var(--color);
height: 40px;
}
.review-form input::placeholder, .form-col input::placeholder{
  color: var(--color);

}
.inner-inputs{
  gap: 1rem;
}
#company-size, #industry, #project-category, #project-budget, .form-col select {
flex-grow: 1;
}
.review-form textarea, .form-col textarea{min-height: 200px;}
.form-group .star-container .star-div{
  justify-content: space-between;
  padding: 0 3rem 0.6rem 0;
}
.form-group .star-container .star-div img{
width: 100%;
max-width: 220px;
object-fit: contain;
}
.review-form  .btn{
  margin: 0 auto;
  margin-top: 2rem;
}

.form-group label, .form-col label{font-family: var(--para-font); text-align: right;}
.bottom-box{
  text-align: center;
  position: relative;
}
.bottom-box .span-top{
  position: relative;
}
.bottom-box p{padding: 1rem 0;}
.bottom-box .span-top:after{
position: absolute;
content: "";
width: 100%;
height: 1px;
background-color:var(--black);
top: 90%;
    left: 0;
}
.boost-filter .content-box img{
  width: 100%;
  max-width: 350px;
  margin-bottom: 1rem;
}
.boost-filter-box .head-content{
text-align: center;
margin-bottom: 4rem;
}
/* bold heading inner pages */
#get-banner .title, #boost-banner .title, #smart-match-banner .title{
  font-weight: 600;
}
#boost-banner .content-div{
  min-width: 54%;
}
#smart-match-banner{
  background-image: url("/assets/images/Smart\ Match\ Bg.png");
  background-size: cover;
  background-position: center;
}
.smart-service-box h2{
  margin-top: 0 !important;
}
.smart-service-wrapper{
  justify-content: center !important;
gap: 1.2rem;
}
.how-col h3{
word-wrap: break-word;
}
.smart-service{
  background-color: var(--bg);
}
.smart-service .text-box{
  text-align: center;
}
.smart-service .bottom-text-box {
  justify-content: space-between;
    align-items: center;
    padding-top: 3rem;
}
.smart-service .bottom-text-box>h3{
  max-width: 60%;
  margin-bottom: 0;
}



/* create profile css */
#create-profile .form-wrapper>div{
  flex-basis: 46%;
}
#create-profile .form-wrapper{
  gap: 8%;
  margin-bottom: 4rem;
}
.upload-box img{
  width: 100%;
  max-width: 200px;
  vertical-align: middle;
}
.additional-loc {
  align-items: center;
  justify-content: space-between;
}
.upload-box label{
  display: inline-block;
  background-color: var(--white);
  color: var(--color);
  padding: 0.5rem;
  font-family: sans-serif;
  border-radius: 50%;
  cursor: pointer;
  margin-top: 1rem;

}
.upload-box label img, .upload-box label{width: 200px;
height: 200px;}
.hidden {
  display: none;
}
#create-profile .btn{
  min-height: 55px;
}
#create-profile .btn:hover{
  color: var(--white);
}
/* modal */
.bottom-box {
  text-align: center;
  margin-top: 20px;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}
/* need to update */

.modal-content {
  background-color:var(--white);
  margin: 5% auto;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 30px;
  text-align: center;
}

.close, .agencyClose, .popup-form .close-btn {
  color: var(--black);
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  z-index: 3;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
#sign-in-btn b, #sign-up-Modalbtn b{
  cursor: pointer;
}
#find-your-agency .btn{display: block;}

#find-your-agency input, select, textarea{
  background-color: transparent;
}
#find-your-agency input::placeholder, select::placeholder, textarea::placeholder{
  color: var(--color);
}
#agency-form-sec .form-sec-wrapper{
  width: 100%;
}
#agency-form-sec .form-container{
  position: relative;
  z-index: 1;
}
.policy-content ul li, .policy-content ol li{
  margin-inline-start: 20px;
}
.policy-content a{
  color: var(--primary);
}
.policy-content h3{
  margin-top: 2rem;
}
.apply-col p.para{
  font-size: 1.2rem;
}
.apply-col h2{
  font-size: 3.5rem;
  font-weight: 400;
}
.apply-col.img-div img{
  max-width: 90%;
}
.apply-col.img-div{
  text-align: right;
}
#about-agency .list-box ul li{
margin-bottom: 10px;
}
#about-agency .list-box ul{margin-inline-start: 20px;}
/* openjob-sec */
.openjob-row, .cv-sec-row, .job-list-box{
  background: #F2F2F2;
  padding: 2rem;
}
.openJob-card .btn, .job-list-card .btn{
  background-color: var(--white);
  box-shadow: none;
}
.openJob-card{
  padding: 1.5rem;
  background-image: url("/assets/images/crose-bg.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
}
.openJob-card .btn:hover, .job-list-card .btn:hover{background-color: var(--primary);}
.openJob-card p, .openJob-card h3 , .job-list-card p, .job-list-card h3, .job-list-card h4{
  margin-bottom:10px;
}
.openjob-row .openJob-col:first-child{
  padding-right: 1rem;
  border-right: 1px solid #ccc;
}
.openjob-row .openJob-col:nth-child(2){
  padding-left: 2rem;
}
.openjob-row .openJob-col .btn-box{
  text-align: right;
  padding-top: 1rem;
}
.openjob-row .openJob-col .btn{
  margin-top: 10px;
}
.openJob-col img{
  width: 100%;
  min-width: 280px;
}
.openJob-col .des{width: 75%;}
.cv-sec-row .cv-sec-col{
min-width: 30%;
}
.cv-sec-row .cv-sec-col:last-child{
 display: flex;
 justify-content: center;
 align-items: center;
}
.cv-sec-row .cv-sec-col:last-child .btn{
  background-color: transparent;
  border: 1px solid currentColor;
  box-shadow: none;
}
.cv-sec-row .cv-sec-col:last-child .btn:hover{
  color: var(--primary);
}
#open-jobs, #apply-cv-sec{padding-left: 15px;
  padding-right: 15px;}
  .summery-box{
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--primary);
  }
  .job-list-box{
    border-bottom: 4px solid var(--primary);
    margin-bottom: 2rem;
  }
/* pagination */
.pagination-controls {
    text-align: center;
    margin-top: 20px;
    background-color: #F2F2F2;
    padding: 10px;
    width: max-content;
    margin-left: auto;
    margin-bottom: 2rem;
}

.pagination-controls button {
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    background-color: var(--white);
    color: var(--color);
}

.pagination-controls button:disabled {
    opacity: 1;
    cursor: not-allowed;
    background-color: transparent;
    border: none;
}

.page-numbers {
    display: inline-block;
}

.page-numbers button {
    padding: 10px 15px;
    margin: 0 5px;
    cursor: pointer;
}

.page-numbers button.active {
    background-color: var(--primary);
    color: white;
}
/* Popup Form Styles */
.popup-form-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.popup-form {
background-color: #fff;
  position: relative;
  max-width: 50%;
  border-radius: 30px;
  margin-top: 50px;
}
.popup-form form label, .popup-form .form-container>p{font-size: 0.8rem;}
.popup-form .form-container {
  position: relative;
  z-index: 1;
}
.popup-form .form-container textarea, .popup-form .form-container h2{margin-bottom: 10px;}