* {
  font-family: "Poppins", sans-serif;
}

.swiper-slide img {
  max-height: 600px;
  object-fit: cover;
}

.hover-bold:hover {
  font-weight: bold;
}

.gallery.secondary {
  .card-footer {
    border-left: 1px solid #000;
  }
}

.no-filter {
  filter: unset !important;
}

.topbar .text-end {
  position: absolute;
  right: 50px;
}

.w-full {
  width: 100%;
}

.no-underline {
  text-decoration: none;
}

.text-aubergine {
  color: #382354;
}

.w-50 {
  width: 50%;
}

body,
p,
span,
a,
li {
  font-weight: 300;
}
.btn {
  outline: unset !important;
  box-shadow: unset !important;
}

.bg-aubergine {
  background-color: #382354;
  color: white;
}

.bg-grey {
  background-color: #e6e6e6;
}

.hero {
  background: url("../img/hero.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  min-height: 750px;
  position: relative;
}

.hero .hero-gradient {
  background: rgb(0, 0, 0);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 600px;
}

.logo {
  padding-bottom: 200px;
}

hr {
  border-top: 1px solid #fff;
}
.scoll-down {
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
}

.gallery .card-img-top {
  min-height: 450px;
  height: 450px !important;
  object-fit: cover !important;
}

.fs-24 {
  font-size: 24px;
}
.fs-44 {
  font-size: 44px;
}
.fs-20 {
  font-size: 20px;
}

.caslon {
  font-family: "Big Caslon FB", sans-serif;
  letter-spacing: 1px;
}
.blue {
  color: #382354;
}
.aubergine {
  color: #382354;
}
.title {
  font-size: 40px;
}

.btn-blue {
  background-color: #382354;
  color: white;
  border: 1px solid #382354;
}
.btn-blue:hover {
  border: 1px solid #382354;
}
.btn.btn-light {
  border: 1px solid #382354;
}
.btn.btn-light:hover {
  border: 1px solid white !important;
}

.text-black.no-underline {
  transition: 0.3s;
}
.text-black.no-underline:hover {
  color: #382354 !important;
  padding-left: 30px;
}

/* workwithus */
.workWithUs {
  background-color: #382253;
  background-image: url("../img/shape.png");
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
}
.workWithUs p:last-of-type,
.workWithUs-grey p:last-of-type {
  margin-bottom: 0;
}
.workWithUs-grey {
  background: url("https://citrusgroup.onbrandgroup.co.uk/wp-content/themes/citrusgroup/assets/img/icon-bg.png")
    no-repeat 100%;
  background-size: cover;
}

.workWithUs-grey h1,
.workWithUs-grey h2,
.workWithUs-grey h3,
.workWithUs-grey h4,
.workWithUs-grey h5,
.workWithUs-grey h6 {
  color: #382354 !important;
}

.workWithUs-grey p {
  color: #000000 !important;
}

.projects-title {
  background-color: black;
}
.projects-title h2 {
  margin-top: 0.5rem;
}

body,
html {
  overflow-x: clip;
}

.position-relative .card-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 50px;
}

.position-relative .card-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(black, transparent);
}
.position-relative .card-body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(transparent, black);
}

.contents {
  position: relative;
  z-index: 100;
}

.line {
  width: 50px;
  height: 2px;
  background-color: #405971;
  margin-bottom: 10px;
}

.portfolio {
  background-color: #575a60 !important;
  background-image: url("../img/shape.png");
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
}

.card-footer {
  padding: 50px;
  transition: 0.3s;
}

.card-footer.blue {
  background-color: #382354;
  color: white;
}

.card-footer.white {
  background-color: white;
  color: black !important;
}

.card-footer.gray {
  background-color: #575a60;
  color: white;
}
.servcard:hover .card-footer {
  background-color: black;
}
.servcard .card-footer .number {
  transition: 0.3s;
}
.servcard:hover .card-footer .number {
  padding-left: 10px;
}
.servcard .card-footer.white .text-blue {
  transition: 0.3s;
}
.servcard:hover .card-footer.white .text-blue {
  color: white !important;
}

.footer {
  background-color: #382354;
  border-top: 2px solid white;
}
.footer h2 {
  margin-bottom: 0px;
}
.footer p {
  font-size: 14px;
  margin-bottom: 0.25rem;
}
.f-title {
  font-size: 20px;
  letter-spacing: 0;
  font-weight: 500;
}

.social {
  margin-right: 10px;
  background-color: white;
  color: #382354 !important;
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid white;
  transition: 0.3s;
}

.social:last-child {
  margin-right: 0;
}

.social:hover,
.social:active {
  border: 1px solid white;
  background-color: #382354;
  color: white !important;
}

.about .container-fluid {
  background-color: #e6e6e6;
}

.mainmenu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 400px;
  max-width: 100%;
  font-size: 40px;
  line-height: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: 0.5s;
  transform: translateX(-100%);
  z-index: 9999;
}

.mainmenu.active {
  transform: translateX(0%);
}

.mainmenu a {
  transition: 0.3s;
}

.mainmenu a:hover {
  color: #7a797c !important;
  /* font-weight: bold; */
  padding-left: 20px;
}

.mainmenubg {
  position: fixed;
  left: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
  transition: 0.6s;
  transform: translateX(-100%);
}

.mainmenu ul {
  position: relative;
  z-index: 100;
  padding: 0;
  list-style: none;
}

.mainmenubg.active {
  transform: translateX(0%);
}
.project-link,
.projects .card,
.project-link .card-body {
  cursor: pointer !important;
}

.project-link {
  overflow: hidden;
}

.project-link .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
  transform: translateY(100%);
  transition: 0.4s;
  opacity: 0;
  height: 0;
}
.project-link:hover .overlay {
  transform: translateY(0%);
  height: 100%;
  opacity: 1;
}

.portfolio,
.cards {
  z-index: 1000;
}

.workWithUs-grey .btn-light {
  border-color: #382354 !important;
  background-color: #382354 !important;
  color: #fff !important;
}

.workWithUs-grey .btn-light:hover {
  background-color: white !important;
  color: #382354 !important;
  border-color: #382354 !important;
}

.workWithUs .btn-light:hover {
  background-color: transparent;
  color: white;
  border-color: transparent;
}

.info {
  background-color: rgb(56 35 84 / 75%);
  position: absolute;
  width: 100%;
  padding: 15px 0 !important;
}

.whatwedo {
  background-color: #707070;
}
.whatwedo h2 {
  margin-top: 0.5rem;
  line-height: 0;
}
.fs-46 {
  font-size: 46px;
}

.fs-26 {
  font-size: 26px;
}
.fs-18 {
  font-size: 18px;
}
.fs-16 {
  font-size: 16px;
}

/* -------------------------- about page ---------------------------- */
.dual-text {
  background-color: #e8e7e7;
}
.dual-text h2,
.dual-text h3 {
  font-size: 22px;
  color: #382354;
  font-family: "Big Caslon FB", sans-serif;
  margin-bottom: 1.5rem !important;
}

.dual-text a {
}
.fs-22 {
  font-size: 22px;
}
.title-text {
  color: #382354;
}
.border-blue {
  border-left: 1px solid #382253;
}
.team {
  background: url("../img/team.png");
  background-repeat: no-repeat;
  background-size: 50%;
  background-color: #b3b1b1;
  background-position: right;
}
.fs-14 {
  font-size: 14px;
}

.mobile {
  display: none;
}

.card-footer {
  border-radius: 0 !important;
}

/* -------------------------- about page ---------------------------- */

.scrolled-bar {
  z-index: -1;
  display: none;
}

.nav-scrolled .scrolled-bar {
  display: block;
  background: white;
  position: fixed;
  top: 0;
  padding: 10px 20px;
  width: 100%;
  box-shadow: #000 0px 0px 1px;
  z-index: 9999999;
}

.scrolled-bar img {
  max-width: 80px;
}

/***/

.text h2 {
  font-weight: 300;
  font-size: 26px;
}

.footer-logo {
  max-width: 80px;
}

/*Our Projects*/

.page-id-23 .position-relative .card-body::before {
  display: none;
}

.page-id-23 .card-img-top {
  border-radius: 0;
}

.page-id-23 .gallery .card-img-top {
  min-height: 250px;
  height: 250px !important;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  max-width: 100%;
  height: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.textwithimage h1 {
  font-size: 44px;
  margin-bottom: 25px;
  color: #382253;
}

.textwithimage.py-4.px-5 {
  padding: 5rem !important;
}

.swiper-button-next,
.swiper-button-prev {
  background-color: white;
  padding: 10px;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  color: #382253 !important;
  font-size: 25px;
}

/* .swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.mySwiper2 {
  height: 80%;
  width: 100%;
}

.mySwiper {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
} */

.swiper-slide img {
  /* display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; */
}

.swiper-slide img {
  /* display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; */
  /* max-height: 700px;
  height: 100%;
  width: auto;
  object-fit: none; */
}
.swiper {
  width: 100%;
  height: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: auto;
  height: 600px;
  object-fit: cover;
}

.swiper-slide {
  width: fit-content;
}

.thumbwrap {
  transform: translate3d(0px, 0px, 0px);
  transition-duration: 0ms;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-evenly;
}

.thumbwrap img {
  height: 150px;
  object-fit: cover;
}

.gallery .card-img-top {
  filter: brightness(50%);
  transition: 0.3s;
}

.projects .gallery .card:hover .card-img-top,
.projects .gallery .card:active .card-img-top {
  filter: brightness(70%);
}
.projects .gallery .card .card-body h2 {
  transition: 0.3s;
}
.projects .gallery .card:hover .card-body h2,
.projects .gallery .card:active .card-body h2 {
  padding-left: 10px;
}

.projects .gallery .px-4.py-3.mb-4 {
  flex-grow: 1;
  position: relative;
}
.projects .gallery .project-link p:last-of-type {
  margin-bottom: 55px;
}

.projects .gallery .btn-blue {
  position: absolute;
  display: inline-block;
  bottom: 15px;
}

.home .valueItem img {
  max-height: 140px;
}

.home .valueItem h3 {
  display: none;
}

.sf-meta-range {
  display: inline-flex;
  align-items: center;
  white-space: normal;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 20px;
}

.servcard {
  position: relative;
  display: inline-block;
  width: 100%;
}

.servcard img {
  height: 250px;
  filter: brightness(0.7);
  transition: 0.3s;
}

.servcard:hover img {
  filter: brightness(1);
}

.servcard .card-footer {
  padding: 20px 50px !important;
}

.servcard .text-blue {
  color: #000 !important;
}

.servcard a {
  text-decoration: none;
}
/* .servcard .card-footer a {
  transition: 0.3s;
  display: block;
}
.servcard .card-footer a:hover {
  padding-left: 5px;
} */

.swiper-slide {
  flex-wrap: wrap;
}

/* Values */

.values h2 {
  margin-top: 0.5rem;
}

.dual-text h3 {
  font-size: 30px;
  font-weight: 600;
}

.dual-text ul li {
  margin-bottom: 5px;
  font-weight: 300;
}
.dual-text ul li:last-child {
  margin-bottom: 0;
}

.dual-text ul:last-child {
  margin-bottom: 0;
}

.mainmenu li a {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.about.img-included .row .col-12:last-child {
  min-height: 350px;
}
.bg-img-main {
  background-position: center;
}
.about h2,
.about h3 {
  font-family: "Big Caslon FB", sans-serif;
  color: #382354;
  font-size: 30px;
  font-weight: 600;
}
.about p {
  font-size: 16px;
  margin-bottom: 1rem !important;
  margin-top: 1rem !important;
}
.about ul {
  font-size: 16px;
}
.about ul li {
  padding-bottom: 5px;
}
.about ul li:last-child {
  padding-bottom: 0;
}
.cards img {
  min-height: 250px !important;
  object-fit: cover;
}
.lead {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.75px;
}
.logo {
  padding-bottom: 0;
}
.hero {
  min-height: unset !important;
}
.hero-text {
  color: white;
  text-align: center !important;
  padding: 60px 15px !important;
  position: relative !important;
  bottom: unset !important;
}

/* single project page*/
.single-projects .hero,
.services-template-default .hero {
  height: 400px;
}
.single-projects .hero-gradient,
.services-template-default .hero-gradient {
  height: 400px;
  min-height: 400px !important;
}

.wpcf7 .wpcf7-submit {
  background-color: #382354;
  color: white;
  border: 1px solid #382354;
  padding-right: 3rem !important;
  padding-left: 3rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  border-radius: 30px;
  transition: 0.3s;
}
.wpcf7 p br {
  display: none;
}
.wpcf7 input,
.wpcf7 textarea {
  background-color: transparent;
  border: 1px solid #382354;
  border-radius: 0;
  margin-bottom: 15px !important;
}
.wpcf7 .privacy-link {
  color: #382354;
}
.wpcf7 .acceptance .wpcf7-list-item {
  margin-left: 0;
}
.wpcf7 .acceptance .wpcf7-list-item input {
  margin-bottom: 0px !important;
}
.wpcf7 .communication .wpcf7-form-control .first {
  margin-left: 0;
}
.wpcf7 .wpcf7-submit:hover {
  border: 1px solid #382354;
  background-color: white;
  color: #382354;
}

.sticky-area {
  position: sticky;
  top: 125px;
}

.contact-info p {
  margin-bottom: 20px;
}
.contact-info {
  border-bottom: 1px solid #382354;
}
.contact-info p a {
  color: #382354;
  text-decoration: none;
}
.contact-map.map-top {
  border-bottom: 1px solid #382354;
}
.sticky-area h2 {
  font-size: 20px;
  margin-bottom: 10px !important;
}
.footer-terms p {
  margin-bottom: 0;
}
.footer-terms a {
  color: white;
}
.footer-terms a:hover {
  color: white;
  text-decoration: underline;
}
.footer-border {
  border-top: 1px solid white;
  padding-top: 20px;
  margin-top: 5px;
}

@media screen and (min-width: 1500px) {
  .single-projects .about.img-included .row .col-12:last-child {
    min-height: 600px;
  }
}
@media screen and (max-width: 767px) {
  .hero .d-flex {
    flex-direction: column;
    text-align: center;
  }
  .hero .d-flex i {
    display: none;
  }
  .scoll-down {
    display: none;
  }
  .abt-img {
    display: block;
  }
  section.about.py-5 {
    background: white;
  }
  .footer img {
    width: 110px;
    margin-bottom: 30px;
    display: block;
    margin: 0 auto 20px auto;
  }

  .footer {
    text-align: center;
  }
  .footer .line {
    margin-left: auto;
    margin-right: auto;
  }
  .footer p.text-white.d-flex.justify-content-start.align-items-center {
    justify-content: center !important;
  }
  .mainmenu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    height: 100vh;
    width: 100%;
    font-size: 20px;
    line-height: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: 0.5s;
    transform: translateX(-100%);
  }

  /* about us page */
  .col-md-6.border-blue.ps-md-5.mb-0 {
    border: unset;
    padding-top: 20px;
    padding-left: 10px !important;
  }
  .pc {
    display: none;
  }
  .mobile {
    display: block;
  }
  .team {
    background: unset;
    background-color: #b3b1b1;
  }
  .info .container > .d-flex {
    flex-direction: column;
    font-size: 14px;
    gap: 10px;
  }
  .logo.img-fluid {
    width: 40%;
  }
  .whatwedo h2 {
    font-size: 40px;
    line-height: 30px;
  }
  .text h2 {
    font-size: 24px;
    line-height: 28px;
  }
  .text > h2:last-child {
    margin-bottom: 0;
  }
  .textwithimage.py-4.px-5 {
    padding: 3.5rem !important;
  }
}

@media screen and (max-width: 500px) {
  .workWithUs {
    background-size: cover;
  }
  .logo.img-fluid {
    max-width: 100px;
  }
  .hero,
  .hero-fade,
  .hero .hero-gradient,
  .hero-fade .hero-gradient {
    height: 300px;
  }
  .hero-text {
    padding: 25px 15px !important;
  }
  .hero-text h1 {
    font-size: 24px;
  }
  .swiper-slide img {
    height: 200px;
    max-height: 200px;
  }
  .text h2 {
    font-size: 21px;
    line-height: 25px;
  }
}

.back-img,
.front-img {
  height: 600px;
  object-position: center;
  object-fit: cover;
  width: 100%;
}
.front-img {
  position: absolute;
  top: 0;
  left: 0;
  animation: fadeEffect 20s ease-in-out infinite;
  opacity: 0;
  transition: 0.3s;
}

@keyframes fadeEffect {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media screen and (max-width: 500px) {
  .back-img,
  .front-img {
    height: 300px;
  }
}