:root {
  /* Primary Colors */
  --primary-50: #fcfdff;
  --primary-100: #f3f7fe;
  --primary-200: #e5eefd;
  --primary-300: #d0e1fc;
  --primary-400: #b6d0fb;
  --primary-500: #95bbf9;
  --primary-600: #6fa3f7;
  --primary-700: #4387f4;
  --primary-800: #09429d;
  --primary-900: #04204c;
  --primary-950: #031430;

  /* Secondary Colors */
  --secondary-50: #fcfefc;
  --secondary-100: #f1fbf4;
  --secondary-200: #e0f5e5;
  --secondary-300: #c7eed1;
  --secondary-400: #a8e4b7;
  --secondary-500: #82d998;
  --secondary-600: #55cb72;
  --secondary-700: #34a851;
  --secondary-800: #1e602e;
  --secondary-900: #10351a;
  --secondary-950: #0c2713;

  /* Shades */
  --shades-50: #fbfbfb;
  --shades-100: #efefef;
  --shades-200: #dbdbdb;
  --shades-300: #bfbfbf;
  --shades-400: #9b9b9b;
  --shades-500: #707070;
  --shades-600: #3c3c3c;
  --shades-700: #000000;
  --shades-800: #000000;
  --shades-900: #000000;
  --shades-950: #000000;

  /* Neutral Colors */
  --neutral-50: #fcfdfd;
  --neutral-100: #f4f6f8;
  --neutral-200: #e6eaef;
  --neutral-300: #d3dae2;
  --neutral-400: #bac5d2;
  --neutral-500: #9cabbe;
  --neutral-600: #788da7;
  --neutral-700: #576b85;
  --neutral-800: #323d4c;
  --neutral-900: #1c222a;
  --neutral-950: #14191f;
}

a {
  text-decoration: none !important;
}

body {
  font-family: Montserrat;
  font: 1rem/1.5 var(--bs-font-sans-serif);
}

.custom-padding {
  padding: 100px 152px 100px 152px;
  font-family: montserrat;
}

/* navbar */
.navbar {
  background-color: transparent;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.navbar.scrolled {
  background-color: rgba(34, 34, 34, 0.8);
  backdrop-filter: blur(10px);
}

.nav-link {
  color: white;
  transition: color 0.3s ease, transform 0.3s ease;
}

.nav-link:hover {
  color: white;
  text-decoration: none;
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .navbar-toggler {
    border-color: var(--neutral-500);
  }
}

@media (max-width: 576px) {
  .navbar-brand img {
    width: 120px;
  }
}

/* hero */
.btn-primary {
  display: inline-flex;
  padding: 12px 16px;
  background: #4387f4;
  color: white;
  font-family: Montserrat;
  font-weight: 600;
  justify-content: center;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.custom-btn {
  font-family: montserrat;
  font-weight: 600;
  font-size: 16px;
  color: var(--primary-700);
  display: inline-flex;
  align-content: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  gap: 6px;
  margin-top: 100px;
}

.custom-btn:hover {
  color: var(--secondary-700);
}

.btn-secondary {
  display: inline-flex;
  padding: 12px 14px;
  background: white;
  color: var(--primary-700);
  border: 1px var(--primary-700) solid;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
}

.btn-secondary:hover {
  border-left: 1px var(--primary-700) solid;
  border-top: 1px var(--primary-700) solid;
  border-right: 4px var(--primary-700) solid;
  border-bottom: 4px var(--primary-700) solid;
}

.hero-style {
  font-family: montserrat;
  text-align: center;
  padding: 100px 152px 100px 152px;
  min-height: 788px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  height: auto;
  background-image: url(assets/hero-img.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-style h2 {
  width: 75%;
  font-size: 48px;
  font-weight: 700;
  color: white;
}

.hero-style p {
  max-width: 900px;
  width: 100%;
}

.search-bar {
  max-width: 611px;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.search-bar input::placeholder {
  font-size: 14px;
}

.search-bar input:focus {
  border: 0;
  box-shadow: none;
}

/* service */
.service-styles {
  padding: 100px 152px 100px 152px;
  font-family: montserrat;
}

.service-styles h2 {
  font-size: 28px;
  font-weight: 400;
  max-width: 1136px;
  width: 100%;
  text-align: center;
}

.service-styles h2 b {
  color: var(--secondary-700);
}

.service-styles .card-content-right {
  padding: 0px 0px 0px 100px;
  align-items: start;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 18px;
  color: var(--shades-600);
}

.service-styles .card-content-right h2 {
  font-size: 32px;
  font-weight: 600;
  max-width: 1136px;
  width: 100%;
  text-align: start;
}

.service-styles .card-content-left {
  padding: 0px 100px 0px 0px;
  align-items: start;
  justify-content: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 18px;
  color: var(--shades-600);
}

.service-styles .card-content-left h2 {
  font-size: 32px;
  font-weight: 600;
  max-width: 1136px;
  width: 100%;
  text-align: start;
}

.card-container {
  max-width: 1280px;
  margin-top: 100px;
}

.custom-section .col-left {
  padding: 100px 152px 100px 152px;
}

.custom-section .col-right {
  padding: 100px 152px 100px 100px;
  background-image: url(assets/why-us-img-right.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.custom-section h3 {
  font-family: montserrat;
  font-size: 32px;
  color: var(--shades-400);
}

.custom-section h2 {
  font-family: montserrat;
  font-size: 42px;
  font-weight: 700;
}

.custom-section h2 b {
  color: var(--primary-700);
  font-weight: 700;
}

.custom-section p {
  font-size: 18px;
  font-family: montserrat;
  color: var(--shades-400);
}

.custom-section .custom-btn a {
  margin-top: 24px;
}

.custom-section .row-img {
  background-image: url(assets/why-us-img.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-custom-transparent {
  background-color: transparent !important;
}

/* success stories */
.casestudy .custom-btn {
  margin-top: 0;
}

.casestudy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.casestudy button {
  color: var(--neutral-700);
  border: 1px solid;
  padding: 8px 12px !important;
}

.casestudy button :hover {
  color: var(--secondary-700);
}

.card .card-img-top {
  height: 250px;
  object-fit: cover;
}

/* Testimonial */
.custom-testimonials {
  padding: 100px 152px 100px 152px;
}

.testimonial-section {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  position: relative;
}

.testimonial-content {
  font-family: montserrat;
  font-size: 18px;
  max-width: 70%;
  font-style: italic;
  text-align: center;
  margin-bottom: 30px;
}

.client-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 20px;
}

.client-name {
  font-family: montserrat;
  font-weight: bold;
  width: auto;
}

.client-designation {
  font-family: montserrat;
  font-size: 14px;
  color: var(--shades-500);
  width: auto;
}

.testimonial-icons {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  cursor: pointer;
}

.testimonial-icons.left {
  left: 10px;
}

.testimonial-icons.right {
  right: 10px;
}

/* contact */
.contact-img {
  width: 60%;
  height: auto;
}

.custom-form .input-group input {
  font: montserrat;
  min-height: 44px;
  background-color: var(--neutral-100);
  border: 1px var(--neutral-200) solid;
  border-radius: 0;
}

.input-group input::placeholder {
  color: var(--shades-400);
}

.input-group textarea {
  font: montserrat;
  min-height: 75px;
  background-color: var(--neutral-100);
  border: 1px var(--neutral-200) solid;
  border-radius: 0;
}

.input-group textarea::placeholder {
  color: var(--shades-400);
}

.custom-form .btn-primary {
  background-color: var(--primary-700);
  font: montserrat;
  font-size: 16px;
  padding: 16px;
  border-radius: 0;
}

/* clients section */
.client-logo-area .section-title-two {
  font-family: montserrat;
  text-align: center;
  max-width: 550px;
  margin: auto;
  margin-bottom: 50px;
  position: relative;
  z-index: 5;
}

.client-logo-area {
  background-color: var(--neutral-100);
}

.client-logo-area .section-title-two span {
  text-transform: capitalize;
  color: var(--white);
  background: var(--primary);
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 15px;
  border-radius: 4px;
}
.client-logo-area .section-title-two h2 {
  margin-bottom: 15px;
}

.client-logo-area .section-title-two p {
  color: var(--dark-3);
}

.client-logo-one {
  padding-top: 100px;
  padding-bottom: 100px;
}
.client-logo-one .single-client {
  margin-top: 30px;
}

/* CTA section */
.blue-section {
  font-family: montserrat;
  background-color: #4387f4;
  position: relative;
  padding: 50px;
  margin: 100px 152px;
  border-radius: 16px;
}

.blue-section h2 {
  font-weight: 600;
}

.text-content {
  color: white; /* Text color */
}

.image-container {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.transparent-image {
  position: absolute;
  bottom: -50px;
  right: 0;
  width: 80%;
  max-width: 300px;
}

.cta-img {
  width: 12%;
  height: auto;
  margin-top: -7%;
  margin-right: 18%;
  position: absolute;
  z-index: 1;
  right: 0;
}

.custom-cta {
  padding: 100px 152px 100px 152px;
  background-repeat: no-repeat;
  background-position: center;
}

.custom-cta-content {
  font-family: montserrat;
  width: 60%;
  /* background-color: var(--primary-700); */
  color: white;
}

/* footer */
footer {
  padding: 100px 152px 100px 152px;
  background-color: var(--neutral-100);
}

footer p {
  font-family: montserrat;
  font-size: 16px;
  color: var(--shades-500);
}

.footer-logo {
  width: 200px;
}

ul {
  list-style: none;
}

footer ul a {
  text-decoration: none;
  color: var(--shades-700);
}

footer ul .heading {
  margin-bottom: 20px;
  font-family: montserrat;
  font-size: 16px;
  font-weight: 600;
  color: var(--shades-500);
}

footer ul .li-item {
  margin-bottom: 20px;
  font-family: montserrat;
  font-size: 16px;
  font-weight: 400;
  color: var(--shades-700);
}

footer hr {
  max-width: 200px;
  /* border-width: medium; */
  opacity: 1;
  color: var(--neutral-300);
  background-color: var(--neutral-300);
  height: 2px;
}

/* media queries */
@media (max-width: 1200px) {
  .custom-cta {
    padding: 36px;
  }

  .custom-padding {
    padding: 80px 72px;
  }

  footer {
    padding: 100px 80px;
  }

  .custom-section .col-left {
    padding: 72px;
  }

  .service-styles,
  .custom-testimonials {
    padding: 72px;
  }

  .hero-style h2 {
    width: 85%;
  }
}

@media (max-width: 992px) {
  .service-styles,
  .custom-testimonials {
    padding: 72px;
  }

  .navbar {
    background-color: rgba(34, 34, 34, 0.8);
    backdrop-filter: blur(10px);
  }

  .custom-padding {
    padding: 100px 72px 100px 72px;
  }

  .service-styles h2 {
    font-size: 32px;
  }

  .service-styles .card-content-right {
    margin-top: 10px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .service-styles .card-content-left {
    margin-top: 10px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .service-styles .card-content-right h2 {
    text-align: center;
  }

  .service-styles .card-content-left h2 {
    text-align: center;
  }

  .card-img {
    justify-content: center !important;
  }

  .custom-section .col-left {
    padding: 72px;
  }

  .contact-img {
    width: 50%;
    margin-bottom: 40px;
  }

  .blue-section {
    margin: 100px 72px;
    padding: 52px 24px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .client-logo-area .section-title-two h2 {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}
@media (max-width: 767px) {
  .client-logo-area .section-title-two h2 {
    font-size: 24px;
    line-height: 1.9rem;
  }

  .single-client img {
    max-width: 150px;
    height: auto;
  }

  .transparent-image {
    display: none; /* Hide the image */
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .client-logo-area .section-title-two {
    margin-bottom: 45px;
  }
}
@media (max-width: 767px) {
  .client-logo-area .section-title-two {
    margin-bottom: 35px;
  }

  .hero-style h2 {
    width: 100%;
    font-size: 44px;
  }
}

@media (max-width: 572px) {
  .hero-style,
  .service-styles,
  .custom-testimonials,
  .client-logo-area,
  footer,
  .custom-padding {
    padding: 100px 36px;
  }

  .hero-style h2 {
    width: 100%;
    font-size: 36px;
  }

  .service-styles .card-img img {
    max-width: 340px;
  }

  .service-styles h2 {
    font-size: 24px;
  }

  .custom-section .col-right {
    padding: 100px 36px;
  }

  .custom-section h2 {
    font-size: 28px;
  }

  .custom-section p {
    font-size: 14px;
  }

  .custom-testimonials h2 {
    font-size: 24px !important;
  }

  .card-container .card-content-right h2 {
    font-size: 28px;
  }

  .card-container .card-content-left h2 {
    font-size: 28px;
  }

  .custom-section .col-left {
    padding: 100px 36px;
    display: block;
  }

  .contact-img {
    width: 70%;
  }

  .testimonial-section p {
    width: 100%;
  }

  .testimonial-content {
    max-width: 90%;
  }

  .custom-cta-content {
    width: 100%;
  }

  .blue-section {
    margin: 72px 36px;
  }

  footer ul .heading,
  a,
  p,
  li {
    font-size: 14px !important;
  }

  footer ul .heading {
    margin-bottom: 4px;
  }

  footer ul .li-item {
    margin-bottom: 4px;
  }

  .footer-logo {
    width: 180px;
  }

  footer .social-icons {
    margin-top: 24px !important;
    margin-bottom: 40px !important;
  }

  footer .social-icons img {
    width: 32px;
    height: auto;
  }

  .navbar {
    background-color: rgba(34, 34, 34, 0.8) !important;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
  }

  .navbar.scrolled {
    background-color: rgba(34, 34, 34, 0.8);
    backdrop-filter: blur(10px);
  }
}