.section-title {
  font-size: 35px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--clr-gray);
  margin-bottom: 30px;
}

.section-title .title-underline {
  position: relative;
  display: inline-block;
}

.section-title .title-underline img {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: translateY(-7px);
}

.common-hero {
  padding-top: 230px;
}

.common-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--secondary-clr);
  height: 500px;
  z-index: -1;
}

.common-hero .ellipse {
  position: absolute;
  background-color: #ffffff;
  border-radius: 50%;
}

.common-hero .ellipse-1 {
  width: 365px;
  height: 365px;
  bottom: -40px;
  left: 95%;
  filter: blur(340px);
}
.common-hero .ellipse-2 {
  width: 354px;
  height: 354px;
  bottom: -26%;
  left: -8%;
  filter: blur(333px);
}
.common-hero .ellipse-3 {
  width: 200px;
  height: 200px;
  bottom: 26%;
  left: 96%;
  filter: blur(188px);
}
.common-hero .ellipse-4 {
  width: 746px;
  height: 746px;
  top: -35%;
  left: 85%;
  filter: blur(400px);
}
.common-hero .ellipse-5 {
  width: 70%;
  height: 100%;
  top: 28%;
  left: 14%;
  filter: blur(120px);
}
.common-hero .ellipse-6 {
  width: 50%;
  height: 70%;
  top: -10%;
  left: 20%;
  filter: blur(220px);
}
.common-hero .ellipse-7 {
}

@media (max-width: 767px) {
  .common-hero {
    padding-top: 130px;
  }
}

/*//////////////// CARDS CONTAINER ///////////////*/
.cards-container {
  margin-top: 40px;
}

.cards-container .card-item {
  padding: 38px;
  border-radius: var(--radius-24);
  box-shadow: var(--shadow-1);
  text-align: center;
  transition: 0.3s linear;
}

.cards-container .card-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 20px;
  font-size: 40px;
  color: #ffffff;
  background-color: var(--bg);
  display: inline-flex;
}

.cards-container .card-heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--clr-heading-2);
  margin-bottom: 8px;
}

.cards-container .card-desc {
  color: var(--clr-gray);
  font-size: 16px;
  line-height: 1.6;
}

.cards-container .learn-more-link {
  color: #e63312;
  font-size: 16px;
  margin-top: 1rem;
  display: inline-block;
}

/*////////// CLIENTS SECTION //////////*/
#clients-section {
}

#clients-section .content {
}

#clients-section .section-heading {
  margin-bottom: 7rem;
}

#clients-section .client-list {
}

#clients-section .client-item {
  border-radius: var(--radius-24);
  padding: 30px 24px;
  box-shadow: var(--shadow-1);
}

#clients-section .client-pic {
  height: 76px;
  width: 76px;
  border-radius: 50%;
  overflow: hidden;
}

#clients-section .client-header {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}

#clients-section .client-name {
  color: var(--clr-heading-2);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}

#clients-section .client-rating {
  display: flex;
  gap: 6px;
}

#clients-section .star-icon {
  color: #ffc243;
}

#clients-section .client-desc {
  color: var(--clr-gray);
  line-height: 1.6;
}

@media (max-width: 767px) {
  #clients-section .section-heading {
    text-align: center;
  }
	
  #clients-section .section-title {
    margin-bottom: 80px;
  }	
}

/* Equal height artist cards inside slick */
#client-list .slick-track {
  display: flex !important;
}

#client-list .slick-slide {
  height: auto !important;
  display: flex !important;
}

#client-list .slick-slide > div {
  display: flex;
  width: 100%;
}

#client-list .artist-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#client-list .artist-card .social-group {
  margin-top: auto;
}

/*////////// BRANDS SECTION //////////*/
#brands-section {
  padding: 20px 0;
  background-color: #f5f5f5;
}

#brands-section .content {
}

#brands-section .slick-track {
  align-items: center;
  padding-bottom: 0;
}

#brands-section img {
}

@media (max-width: 639px) {
  #brands-section .content {
    gap: 10px;
    justify-content: space-around;
  }
}

/* ///////////// slick slider /////////////// */
.slick-track {
  display: flex;
  padding-bottom: 50px;
  /* align-items: center; */
}
.slick-slider {
  /* box-shadow: var(--shadow-1); */
}
.slick-slide {
  margin: 0 8px;
  height: auto;
  min-height: 100%;
}
.slick-slide > div,
.slick-slide li {
  height: 100%;
}
.slick-slide li {
}
.slick-next,
.slick-prev {
  /* border: 1px solid #bababa; */
  width: 38px;
  height: 38px;
  border-radius: 50%;
  z-index: 10;
}
.slick-next:before,
.slick-prev:before {
  color: #bababa;
  font-size: 30px;
}
:is(.artists-cards-content, .client-list, .sessions-gallery) .slick-prev {
  left: auto;
  right: 64px;
  top: -40px;
}
:is(.artists-cards-content, .client-list, .sessions-gallery) .slick-next {
  right: 2%;
  top: -40px;
}
#services-list .slick-prev {
  left: -35px;
}
#services-list .slick-next {
  right: -35px;
}
.page-id-166 #clients-section :is(.slick-next, .slick-prev) {
	top: -50px;
} 
.slick-dots li button:before {
  font-size: 12px;
  color: var(--secondary-clr) !important;
}
@media (max-width: 767px) {
  #services-list .slick-prev {
    left: -25px;
  }
  #services-list .slick-next {
    right: -25px;
  }
  .artists-cards-content .slick-prev, 
  .artists-cards-content .slick-next {
    top: 0px;   
  }
}

/* //////////// utilitise ////////////// */
.select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 50px;
  font-size: 16px;
  border: 1px solid #eee;
  border-radius: 10px;
  background-color: #fff;
}

.select-wrapper ul.cm-select-dropdown {
  position: absolute;
  top: 104%;
  left: 0;
  width: 100%;
  padding: 10px 10px;
  font-size: 16px;
  border: 1px solid #eee;
  border-radius: 10px;
  background-color: #fff;
  z-index: 100;
  display: none;
}

.select-wrapper ul li {
  cursor: pointer;
  transition: 0.3s linear;
  padding: 6px 10px;
  border-radius: 8px;
}

.select-wrapper ul li:hover {
  background-color: #efefef;
}

.select-wrapper.open .cm-select-dropdown {
  display: block;
  max-height: 300px;
  overflow: auto;
}

.select-wrapper.open .cm-select-arrow {
  transform: rotate(180deg);
}

.select-wrapper .cm-select-trigger {
  padding: 10px 20px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.select-wrapper .cm-select-trigger i {
  font-size: 12px;  
}

.hover-card-up:hover {
  transform: translateY(-6px);
}

/* Target the scrollbar width for all elements except body */
* :not(body)::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track: The background of the scrollbar */
* :not(body)::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 30px;
}

/* Handle: The draggable part of the scrollbar */
* :not(body)::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 30px;
}

/* Handle on hover: Optional, but improves UX */
* :not(body)::-webkit-scrollbar-thumb:hover {
  background: #555;
}