/* General Styles */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Gilroy", sans-serif;
  width: 100%;
  overflow-x: hidden; /* Prevents horizontal scroll */
}
.row {
  --bs-gutter-x: 0;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 0px;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}


.btn-contact-btn{
  display: flex
  ;
      height: 45px;
      width: 150px;
      justify-content: center;
      align-items: center;
      background: linear-gradient(90deg, #2c73ce 0%, #609eee 100%);
      color: #fff;
      border-radius: 29.5px;
      border: none;
      margin-right: 20px;
  }



.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 20px 20px 7px 0px;
}

.navbar .container {
  max-width: 100%;
}

.navbar-brand {
  margin-left: 2em;
}

.navbar-brand .logo {
  width: 80px;
}

.nav-link {
  font-size: 18px;
  font-weight: 600;
  margin-left: 3em;
}

.nav-link:hover,
.nav-link:active,
.nav-link:focus {
  color: var(--Primary, #ea5d3e);
}

.navbar-expand-lg .navbar-collapse {
  margin-right: 54em;
}

.btn {
  position: relative;
  z-index: 20; /* Higher than navbar to stay on top */
  margin-right: 2em;
  background: linear-gradient(90deg, #2c73ce 0%, #609eee 100%);
  color: #fff;
  border-radius: 29.5px;
  padding: 10px 30px;
  font-size: 19px;
  font-weight: 700;
}

.dropdown-header {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #ea5d3e;
  font-weight: 700;
  margin-bottom: 10px;
}

.heading-icon {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}

.dropdown-menu {
  background-color: #fff;
  width: 100%;
  padding: 20px;
  max-width: 1300px;
}

.dropdown-menu .dropdown-column {
  margin-top: 1em;
}

/* Dropdown Columns */
.dropdown-column h4 {
  font-size: 16px;
  color: #000;
  font-weight: 700;
  gap: 12px;
}

.dropdown-column ul {
  list-style-type: disc;
  margin-left: 48px;
}

.dropdown-column ul li {
  font-size: 15px;
  font-weight: 500;
  color: #000;
  line-height: 30px;
  list-style-type: none;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
  margin-left: 4em;
  margin-top: 1em;
  width: 1300px;
  height: 580px;
  position: absolute;
}

/* Initial styles for frame image */
.frame-img {
  position: relative;
  z-index: 5; /* Ensure it's above other elements */
}

/* Initial styles for images */
.vector-image {
  position: relative;
  z-index: 5; /* Ensure it's above other elements */
}

.hero-logo {
  position: relative;
  z-index: 5; /* Ensure it's above other elements */
}

/* Hero Section */
.hero-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 120px; /* Add padding to prevent content from being hidden behind navbar */
  /* overflow-x: hidden; */
}

.hero-section .container {
  max-width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin: 0 auto;
}

.hero-section .hero-info {
  margin-top: -10em;
  margin-left: 10em;
}

.hero-section h1 {
  font-size: 80px;
  font-weight: 600;
  color: #000;
}

.agency-text {
  background: linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 120px;
  font-weight: 700;
}

.hero-section p {
  font-size: 16px;
  font-weight: 400;
  margin: 10px 0;
}

.hero-btn {
  z-index: 1;
  margin-top: 3em;
  border-radius: 29.5px;
  background: linear-gradient(90deg, #2c73ce 0%, #609eee 100%);
  padding: 10px 10px 10px 24px;
  color: #fff;
  font-size: 17px;
  line-height: 40px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.hero-btn .circle-btn-1 {
  margin-left: 1em;
  width: 41px;
  height: 41px;
  background: #fff;
  border-radius: 50%;
}

.hero-section .heroImage {
  margin-top: -18em;
}

.hero-section .tablet-img {
  display: none;
}

.hero-logo {
  margin-top: 4em;
  margin-left: 2em;
}

/* Services Section */
.services-section {
  position: relative;
  padding-bottom: 80px;
  margin-bottom: 40px;
  overflow: hidden;
  min-height: 600px;
}

/* Service Box Styles */
.service-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 40px 0px; /* Rounded corners */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 367px;
  margin: 0 15px 30px; /* Adjusted for even spacing on all sides */
  transition: transform 0.3s ease; /* Smooth transition for scale */
  transform-origin: center top; /* Change the origin for scaling */
  height: 485px;
  margin-bottom: -10em;
}

/* Hover and focus effects */
.service-box:hover {
  transform: scale(1.05); /* Slightly increase size */
  width: 367px;
  height: 485px;
  margin-top: -2em; /* Pulls the box up slightly */
}

/* Contact Us Button */
.service-box .contact-us-button {
  display: none; /* Initially hidden */
  align-items: center; /* Center items in the button */
  justify-content: center; /* Center items in the button */
  width: 132px;
  height: 46px;
  background: var(
    --Blue-Gradient,
    linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%)
  );
  border-radius: 29.5px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 28px; /* 215.385% */
  padding: 0px 0px 0px 16px;
  margin-top: 15px; /* Space above button */
}
.service-box:hover .contact-us-button {
  display: flex; /* Show button on hover */
}

/* Circle with Arrow */

.service-box .contact-us-button .circle-btn {
  margin: 2px 5px;
  width: 34.99px;
  height: 34.99px;
  border-radius: 29.5px;
  background: #fff;
}

.service-box .contact-us-button .circle-btn svg {
  margin-top: 5px;
  width: 20px;
  height: 20px;
  transform: rotate(0deg);
  flex-shrink: 0;
}

/* Show the button on hover */
.service-box:hover .contact-us-button {
  display: flex; /* Show button on hover */
}

/* Heading and Description in Service Box */
.service-heading {
  color: #000;
  text-align: center;
  font-size: 21px;
  font-weight: 600;
  line-height: 30px;
}

.service-description {
  color: #696687;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}

/* Vector Right Image */
.vector-right {
  margin-right: 4em;
  margin-top: -8em; /* Adjust for best alignment with frame */
}


/*  PPC service section  */
.ppc-section {
  padding: 4em 0em 7em 0em;
  background-image: url("../img/ppc/rectangle.png");
  margin-top: 8em;
  background-size: cover; /* This will make sure the image covers the entire section */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center; /* Centers the image */
}


.small-heading {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #4a8bdf;
}

.small-heading svg {
  margin: 0 5px;
}

.ppc-heading {
  font-size: 48px;
  font-weight: 600;
  color: #0f110f;
  line-height: 72px;
}

.highlight-text {
  background: linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 58px;
  font-weight: 700;
}

.blue-line {
  width: 135px;
  height: 5px;
  background-color: #4a8bdf;
  border-radius: 5px;
  margin: 10px 0 20px;
}

.ppc-description {
  margin-top: 1.5em;
  font-size: 18px;
  font-weight: 500;
  color: #696687;
  line-height: 27px;
  margin-bottom: 30px;
}

.ppc-features {
  list-style: none;
  padding-left: 0;
}

.ppc-features li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.ppc-features li span {
  margin-left: 1em;
}

.ppc-features .icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.contact-us-btn {
  width: 181px;
  height: 61px;
  background: linear-gradient(90deg, #2c73ce 0%, #609eee 100%);
  border-radius: 29.5px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.circle-arrow {
  width: 41px;
  height: 41px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.circle-arrow svg {
  width: 23px;
  height: 23px;
  transform: rotate(90deg);
}
.svg-icon {
  width: 30px;
  height: 30px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"><path opacity="0.2" d="M12.0295 26.8277C17.6539 26.8277 22.2134 22.2682 22.2134 16.6438C22.2134 11.0194 17.6539 6.45996 12.0295 6.45996C6.40517 6.45996 1.8457 11.0194 1.8457 16.6438C1.8457 22.2682 6.40517 26.8277 12.0295 26.8277Z" fill="#EA5D3E"/><path d="M12.1447 24.5155L12.0155 24.2954C10.0424 20.9337 4.79925 13.7995 4.74629 13.7279L4.67065 13.6251L6.45698 11.8598L12.1115 15.8082C15.6718 11.1882 18.9932 8.01503 21.1598 6.16201C23.5299 4.13499 25.0726 3.20182 25.0882 3.19288L25.1233 3.17188H28.1534L27.8639 3.42964C20.42 10.06 12.3515 24.1521 12.2711 24.2937L12.1447 24.5155Z" fill="#EA5D3E"/></svg>');
  background-size: cover;
}
.ppc-btn {
  margin-top: 2em;
  background: linear-gradient(90deg, #2c73ce 0%, #609eee 100%);
  border-radius: 29.5px;
  padding: 10px 10px 10px 24px;
  color: #fff;
  font-size: 17px;
  line-height: 40px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.ppc-btn .circle-btn {
  margin-left: 1em;
  width: 41px;
  height: 41px;
  background: #fff;
  border-radius: 50%;
}

.ppc-section .ppc-content img{
  margin-left: 150px;
}

.ppc-section .service-heading {
  color: #0f110f;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 42px; /* 190.909% */
  margin: 0 auto 20px auto; /* Center the heading with space below */
  white-space: nowrap; /* Prevents heading from wrapping */
  overflow: hidden; /* Ensures text is cut off if it exceeds the container */
  text-overflow: ellipsis; /* Adds '...' for overflow text */
}

.ppc-section .service-description {
  margin-left: 2em;
  margin-right: 2em;
  color: #696687;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px; /* 150% */
}

/* .ppc-section .pcc-services {
  padding: 6em 8em 2em 0em;
} */
.ppc-section .pcc-services .ppc-box {
  margin-top: 4em;
  height: 550px;
  width: 370px;
}
.ppc-section .pcc-services .ppc-box:hover {
  padding-bottom: 2em;
  /* height: 50vh; */
  width: 370px;
  background: #fff;
  border-radius: 30px;
  height: 550px;
}
  /* margin-bottom: 1rem;
} */
.justify-content-between {
  /* justify-content: flex-start ; */
}
.ppc-section .pcc-services .ppc-box:hover .contact-us-button {
  display: flex; /* This will make the button visible and display as flex */
}
.ppc-section .pcc-services .ppc-box:hover .service-description {
  margin-left: 1em;
  margin-right: 1em;
}
.ppc-section .pcc-services .ppc-box .contact-us-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 50px;
  background: var(
    --Blue-Gradient,
    linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%)
  );
  border-radius: 29.5px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 28px;
  padding: 0px 0px 0px 8px;
  margin-top: 30px;
  margin-left: 9em;
}

.ppc-section .pcc-services .ppc-box .contact-us-button .circle-btn {
  margin: 2px 5px;
  width: 34.99px;
  height: 34.99px;
  border-radius: 29.5px;
  background: #fff;
}
.ppc-section .pcc-services .ppc-box .contact-us-button .circle-btn svg {
  margin-top: 5px;
  transform: rotate(0deg);
}
/* Social Media Marketing Section */
.social-media-marketing {
  padding: 12em 0em 2em 7em;
}

.main-service {
  position: relative;
  padding: 1.5em;
}

.small-heading svg {
  margin-right: 5px;
}

/* CSS for "Social Media" Title */
.social-media-title {
  color: #0f110f;
  font-family: Gilroy, sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 72px; /* 150% */
}



/* CSS for "Marketing" Title */
.marketing-title {
  background: var(
    --Blue-Gradient,
    linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 58px;
  font-style: normal;
  font-weight: 700;
  line-height: 72px;
}

.main-service-description {
  color: #696687;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px; /* 150% */
}

.main-service-image {
  width: 100%;
  height: auto;
  margin-top: 1em;
}

.box {
  width: 342px;
  /* margin-right: 0em; */
  margin-left: 2em;
  height: 454px;
  /* background: #FFF; */
  border-radius: 30px;
  box-shadow: 0px 0px 43px 0px rgba(8, 50, 79, 0.1);
  padding: 20px;
  /* text-align: center; */
  position: relative;
  margin-bottom: 6em;
}
.box:hover {
  border-radius: 30px;
  background: #180e30;
  box-shadow: 0px 0px 43px 0px rgba(8, 50, 79, 0.1);
}
.box:hover .box-title {
  color: #fff;
}
.box:hover .box-description{
  color: #fff;
  opacity: 0.5;
}
.box:hover .circle-arrow{
  display: none;
}
.social-media-marketing .box:hover .social-media-contact-us-button-hover{
  display: flex;
}

.box img {
  margin-left: 1em;
  margin-top: -6em;
  object-fit: cover;
  margin-bottom: 0px;
}

.box-title {
  color: #0f110f;
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 42px; /* 161.538% */
  margin-left: 10px;
}

.box-description {
  color: #696687;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px; /* 150% */
  margin-left: 10px;
}

.box .circle-arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 29.5px;
  background: linear-gradient(124deg, #4a8bdf 9.62%, #94c3ff 132.95%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
}
.social-media-marketing .box .social-media-contact-us-button-hover{
  display: none;
  padding: 7px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #2c73ce 0%, #609eee 100%);
  border-radius: 30px;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding-left: 1em;
  position: absolute;
  bottom: 12px;
  right: 20px;
} 

 .social-media-contact-us-button-hover .circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34.99px;
  height: 34.99px;
  border-radius: 29.5px;
  background-color: #fff;
  margin-left: 8px;
}
 .social-media-contact-us-button-hover .circle-btn img{
  margin-top: 0.1em;
  margin-left: 0em;
}

.box .circle-arrow svg {
  width: 25.244px;
  height: 25.244px;
  transform: rotate(0deg);
  flex-shrink: 0;
}
/* social media ads */

.social-media-ad {
  padding: 6em 0em 0em 6em;

}


.social-media-ad p {
  margin-right: 8em;
  color: #696687;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px; /* 150% */
}
.buttons,
.additional-buttons {
  display: flex;
  gap: 10px; /* Space between buttons */
}

.meta-button,
.youtube-button,
.third-button,
.fourth-button {
  border: none;
  display: flex;
  align-items: center; /* Align items vertically */
  justify-content: flex-start; /* Center items horizontally */
  width: 250px;
  height: 48px;
  border-radius: 26.5px;
  background: var(--Pale-Blue, #effafd);
  box-shadow: 0px 2px 2.9px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 1em;
  cursor: none !important;
}

.meta-button img,
.youtube-button img,
.third-button img,
.fourth-button img {
  margin-right: 8px; /* Space between image and button text */
  margin-left: 1em;
}

.youtube-button img {
  width: 38px; /* Override width for YouTube button */
  height: 38px; /* Override height for YouTube button */
}

.social-contact-btn {
  margin-top: 0.5em;
  background: linear-gradient(90deg, #2c73ce 0%, #609eee 100%);
  border-radius: 29.5px;
  padding: 10px 10px 10px 24px;
  color: #fff;
  font-size: 17px;
  line-height: 40px;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.social-contact-btn .circle-btn {
  margin-left: 1em;
  width: 41px;
  height: 41px;
  background: #fff;
  border-radius: 50%;
}

/*  seo  section css */
.seo-section {
  padding: 2em 0em 0em 7em;
  background-image: url("../img/seo/bg.png");
  margin-top: 8em;
  background-size: cover; /* This will make sure the image covers the entire section */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center; /* Centers the image */
}
/* CSS Animations */

/* Social Media Marketing Section */

.seo-section .seo-Image {
  margin-top: 3em;
}

.seo-section .seo-content {
  margin-left: -8em;
}

.seo-description {
  margin-right: 2em;
  margin-top: 1.5em;
  font-size: 18px;
  font-weight: 500;
  color: #696687;
  line-height: 27px;
  margin-bottom: 30px;
}
.seo-section .seo-services {
  padding: 4em 8em 2em 0em;
}
.seo-section .seo-services .ppc-box {
  
  margin-top: 4em;
  height: 675px;
  width: 350px;
}
.seo-section .seo-services .ppc-box:hover {
  width: 350px;
  height: 650px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.053);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* margin-top: 10px; */

}
.seo-section .seo-services .ppc-box:hover .contact-us-button {
  display: flex; 

}
.seo-section .seo-services .ppc-box:hover .service-description {
  margin-left: 2em;
  margin-right: 2em;
  display: -webkit-box;

}
.seo-section .seo-services .ppc-box .contact-us-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 50px;
  background: var(
    --Blue-Gradient,
    linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%)
  );
  border-radius: 29.5px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 28px;
  padding: 0px 0px 0px 8px;
  /* margin-top: 20px; */
  /* margin-bottom: 30px; */
  /* margin-left: 9em; */

}

.seo-section .seo-services .ppc-box .contact-us-button .circle-btn {
  margin: 2px 5px;
  width: 34.99px;
  height: 34.99px;
  border-radius: 29.5px;
  background: #fff;
}
.seo-section .seo-services .ppc-box .contact-us-button .circle-btn svg {
  margin-top: 5px;
  transform: rotate(0deg);
}
.seo-section .seo-services .service-description {
  margin-left: 2em;
  margin-right: 2em;
  color: #696687;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px;
}


/* web section */
.web-section {
  margin-top: 4em;
}
.webheading-text {
  background: linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%);
  -webkit-background-clip: text;
  font-size: 58px;
  font-weight: 700;
}

.web-design-section {
  display: flex;
  /* gap: 40px; */
}

.left-section {
  position: relative;
  width: 100%;
}

.overlay-text {
  position: absolute;
  top: 28%;
  left: 10%;
  color: white;
  text-align: left;
}

.overlay-text h2 {
  display: flex;
  width: 50%;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 72px; /* 124.138% */
}

.overlay-text .blue-line {
  width: 135px;
  height: 5px;
  background-color: #4a8bdf;
  border-radius: 5px;
  margin: 10px 0 20px;
}

.overlay-text p {
  margin-right: 46em;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px; /* 150% */
}

.contact-us-button {
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #2c73ce 0%, #609eee 100%);
  border-radius: 30px;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding-left: 2em;
}

.web-section .circle-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  border-radius: 29.5px;
  background-color: #fff;
  margin-left: 10px;
}

.web-section .circle-arrow svg {
  width: 23px;
  height: 23px;
  transform: rotate(0deg);
}

/* Boxes Section */
.web-section .services-section {
  padding: 3em;
  margin-left: -38em;
  width: 100%;
}

.web-section .services-section .row {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  margin-top: 17rem;

}

.web-section .services-section .row .col-xl-4 {
  border-radius: 2em 0em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 0em 2em 1em 2em;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: calc(30.33% - 1em); /* Three columns */
}
.web-section .services-section .row .fourth-box{

  margin-left: 10em;
}
.web-section .left-section img{
  height: 97%;
}

.web-section .services-section .col-xl-4:hover {
  transform: scale(1.05);
  box-shadow: 0 0 43px rgba(8, 50, 79, 0.1);
  background-color: #180e30;
}

.web-section .services-section .col-xl-4:hover h3,
.web-section .services-section .col-xl-4:hover p {
  color: #fff;
}

.web-section .services-section h3 {
  color: #000;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px; /* 142.857% */
}

.web-section .services-section p {
  color: #696687;
  text-align: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  /* Limit text to 5 lines */
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.web-section .services-section .contact-button {
  display: none;
  padding: 6px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #2c73ce 0%, #609eee 100%);
  border-radius: 30px;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding-left: 1em;
  position: absolute;
  margin-left: 5em;
  margin-top: -8px;
}

.web-section .services-section .circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #fff;
  margin-left: 0.5em;
}

.web-section .services-section .col-xl-4:hover .contact-button {
  display: flex;
}

.web-section .services-section .circle-arrow {
  position: absolute;
  top: -5px;
  left: calc(50% - 25px);
  width: 42px;
  height: 42px;
  background-color: #4a8bdf;
  border-radius: 50%;
}
.web-section .services-section .circle svg {
  width: 25.244px;
  height: 25.244px;
  transform: rotate(90deg);
  flex-shrink: 0;
}







.web-section .boxes-section {
  margin-left: -38em;
  margin-top: 8em;
  width: 100%;
}

.web-section .box {
  background-color: #fff;
  position: relative;
  padding: 6em 2em 0em 2em;
  text-align: center;
  border-radius: 2em 0em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.web-section .box:hover {
  transform: scale(1.05); /* Scale the box slightly */
  box-shadow: 0px 0px 43px 0px rgba(8, 50, 79, 0.1); /* Box shadow on hover */
  background: #180e30; /* Background color on hover */
  border-radius: 30px; /* Rounded corners on hover */
}
.web-section .box:hover h3 {
  color: white; /* Change text color to white */
}
.web-section .box:hover p{
  color: #fff;
  opacity: 0.5;
}
/* .web-section .box .circle-arrow */
.web-section .box:hover .circle-arrow{
  display: none;
}
.web-section .box:hover  .box-border  .web-contact-us-button-hover{
  display: flex;
}
.web-section .box .box-border .web-contact-us-button-hover{
  display: none;
  padding: 6px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #2c73ce 0%, #609eee 100%);
  border-radius: 30px;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding-left: 1em;
  position: absolute;
  margin-left: 4em;
  margin-top: -8px;
}
.web-section .box .box-border .web-contact-us-button-hover .circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34.99px;
  height: 34.99px;
  border-radius: 29.5px;
  background-color: #fff;
  margin-left: 8px;
}
.web-section .box .box-border .web-contact-us-button-hover .circle-btn img{
  margin-top: 0.1em;
  margin-left: 0em;
}

.box h3 {
  color: #000;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px; /* 142.857% */
}

.web-section .box p {
  color: #696687;
  text-align: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  /* Limit text to 5 lines */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.web-section .box-border {
  position: relative;
  margin-top: 20px;
}

.web-section .box .circle-arrow {
  position: absolute;
  top: -5px;
  left: calc(50% - 25px);
  width: 42px;
  height: 42px;
  background-color: #4a8bdf;
  border-radius: 50%;
}
.web-section .circle svg {
  width: 25.244px;
  height: 25.244px;
  transform: rotate(90deg);
  flex-shrink: 0;
}

.second-row .fourth-box {
  margin-top: -3em;
  margin-left: 15%;
}

.second-row .fifth-box {
  margin-top: -3em;
  margin-right: 15%;
}

/* ecommerce-marketing-section */
.ecommerce-marketing-section {
  padding: 10em 0em;
}

.ecommerce-marketing-section .small-heading {
  display: block;
  margin-left: -12em;
  font-size: 16px;
  font-weight: 600;
  color: #4a8bdf;
}
/* Styling for the eCommerce Marketing title */
.ecommerce-marketing-section .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #0f110f;
  font-size: 48px;
  font-weight: 600;
  line-height: 72px; /* 150% */
}

/* Styling for the "Marketing" part with gradient text */
.ecommerce-marketing-section .title .marketing {
  background: linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 58px;
  font-weight: 700;
  line-height: 72px;
}
.ecommerce-marketing-section .heading-section p {
  margin-top: 2em;
  color: #696687;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px; /* 150% */
}
/* Blue line under Marketing */
.ecommerce-marketing-section .blue-line {
  width: 100px; /* Adjust based on your desired length */
  height: 4px; /* Adjust the thickness */
  background-color: #4a8bdf; /* The blue color */
  margin: 10px auto 0 auto; /* Center the line and add some space above */
  border-radius: 2px;
}
.ecommerce-marketing-section .box {
  margin-bottom: 3em;
  width: 90%;
}
.ecommerce-marketing-section .box:hover {
  transform: scale(1.05); /* Scale the box slightly */
  box-shadow: 0px 0px 43px 0px rgba(8, 50, 79, 0.1); /* Box shadow on hover */
  background: #180e30; /* Background color on hover */
  border-radius: 30px; /* Rounded corners on hover */
}
.ecommerce-marketing-section .box:hover .contact-us-button-hover{
  display: flex;
} 
.ecommerce-marketing-section .box:hover .circle-arrow{
  display: none;
}

.ecommerce-marketing-section .box:hover h3 {
  color: white; /* Change text color to white */
}
.ecommerce-marketing-section .box:hover p {
  color: #fff;
  opacity: 0.5;
}

.ecommerce-marketing-section .box:hover .box-img {
  filter: brightness(0) invert(1); /* Change image color to white */
}

.ecommerce-marketing-section .box img {
  margin-left: 1em;
  margin-top: 1em;
  object-fit: cover;
  margin-bottom: 15px;
}
.ecommerce-marketing-section .box .circle-btn img{
  margin-left: 0;
}
.ecommerce-marketing-section .box .circle-arrow {
  position: absolute;
  bottom: 20px;
  right: 40px;
  width: 40px;
  height: 40px;
  border-radius: 29.5px;
  background: linear-gradient(124deg, #4a8bdf 9.62%, #94c3ff 132.95%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
}
.ecommerce-marketing-section .box h3 {
  text-align: left;
  margin-left: 0.6em;
  color: #0f110f;
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 42px;
}

.ecommerce-marketing-section .box p {
  margin-left: 1em;
  color: #696687;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px; /* 150% */
}

.ecommerce-marketing-section .ecom-section {
  margin-top: 6em;
  margin-bottom: -3em;
}
.why-choose-section {
  padding: 3em 0em 4em;
}
.ecommerce-marketing-section .ecom-section .col-md-4 {
  padding-left: 0;
  padding-right: 0;
}
.why-choose-section .small-heading {
  display: flex;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #4a8bdf;
  margin-right: 21em;
}
/* Styling for "Why" */
.title .why {
  color: #0f110f;
  text-align: center;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 72px; /* 150% */
}

/* Styling for "Choose Us?" */
.title .choose-us {
  background: var(
    --Blue-Gradient,
    linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 58px;
  font-style: normal;
  font-weight: 700;
  line-height: 72px;
}
.why-choose-section .heading-section p {
  margin-top: 2em;
  color: #696687;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px; /* 150% */
}
/* Blue line under Marketing */
.why-choose-section .blue-line {
  width: 100px; /* Adjust based on your desired length */
  height: 4px; /* Adjust the thickness */
  background-color: #4a8bdf; /* The blue color */
  margin: 10px auto 0 auto; /* Center the line and add some space above */
  border-radius: 2px;
}

/* Full width black background for the content section */
.why-choose-content-section {
  margin-left: 3.5em;
  width: 94%;
  height: 596px;
  padding: 40px 0;
  background: #232323;
  border-radius: 50px;
  text-align: center;
  color: #fff;
}

.research-contact-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 23vh;
}

.image-text-section .col {
  display: inline-block;
  width: 22%;
  margin: 10px;
}
.image-text-section .col img {
  margin-top: 4em;
}
.image-text-section .col h3 {
  color: #fff;
  text-align: center;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  margin-top: 1em;
}
.image-text-section .col p {
  margin-left: 4em;
  margin-right: 3em;
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 25px; /* 138.889% */
  opacity: 0.7;
  margin-top: 1em;
}

/* Circle styles */
.yellow-circle {
  background: var(
    --Linear-Gradient,
    linear-gradient(29deg, #ff6709 1.87%, #ffb363 59.92%)
  );
  display: inline-block;
  width: 55px;
  height: 55px;
  border-radius: 29.5px;
  margin-top: 30px;
  color: #fff;
  text-align: center;
  font-size: 31px;
  font-style: normal;
  font-weight: 600;
  line-height: 56px;
}

.blue-circle {
  border-radius: 29.5px;
  background: linear-gradient(124deg, #4a8bdf 9.62%, #94c3ff 132.95%);
  display: inline-block;
  width: 55px;
  height: 55px;
  margin-top: 30px;
  color: #fff;
  text-align: center;
  font-size: 31px;
  font-style: normal;
  font-weight: 600;
  line-height: 56px;
}

/* Contact Us button styling */
.contact-us-why {
  display: inline-flex;
  align-items: center;
  padding: 10px 10px 10px 24px;
  background: #4a8bdf;
  color: #fff;
  border-radius: 30px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.contact-us-why .circle-arrow {
  width: 41px;
  height: 41px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.contact-us-why .circle-arrow svg {
  width: 23px;
  height: 23px;
  transform: rotate(0deg);
}

/* Blog section container */
/* Blog articles */
.blogs-section {
  padding: 6em 0em 4em 0em;
}

.blogs-section .heading-section {
  text-align: left;
  margin-bottom: 2em;
}

/* Blog Title */
.blogs-section .title {
  display: flex;
  flex-direction: column;
}

.blogs-section .latest-news {
  font-size: 48px;
  font-weight: 600;
  color: #0f110f;
}

.blogs-section .blogs {
  background: linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 58px;
  font-weight: 700;
  line-height: 72px;
}

/* Blue line under the heading */
.blogs-section .blue-line {
  float: left;
  width: 100px;
  height: 4px;
  background-color: #4a8bdf;
  margin-top: 10px;
}

/* Description text */
.blogs-section .main-text {
  margin-top: 3em;
  color: #696687;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  margin-right: 38em;
}

/* "See All Blogs" button */
.see-all-blogs {
  text-align: right;
  margin-bottom: 2em;
}

.see-all-button {
  background: linear-gradient(90deg, #2c73ce 0%, #609eee 100%);
  color: white;
  padding: 10px 10px 10px 24px;
  border-radius: 30px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  display: flex;
  justify-self: end;
  align-items: center;
  margin-top: -5em;
}

.see-all-button .circle-arrow {
  margin-left: 10px;
}

.blog-articles {
  display: flex;
  justify-content: space-between;
  margin-top: 4em;
  gap: 20px; /* Adds space between the columns */
}

.blog-box {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.blog-img {
  width: 100%;
  border-radius: 10px;
}

.blog-title {
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 146.654%; /* 24.931px */
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.blog-heading {
  font-size: 18px;
  font-weight: 500;
  color: #696687;
  margin: 0.5em 0;
}

.blog-date {
  font-size: 14px;
  color: #a1a1a1;
  margin-bottom: 1em;
}

.blog-button {
  font-size: 14px;
  background: var(
    --Blue-Gradient,
    linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%)
  );
  color: white;
  padding: 10px 20px;
  border-radius: 28px;
  border: none;
  cursor: none !important
}

.see-all-button .circle-arrow svg {
  width: 23px;
  height: 23px;
  transform: rotate(0deg);
}

/* Contact Us Section */
.contact-us-section {
  padding: 8em 0px 12em;
}

.contact-us-section .contact-us-title {
  text-align: center;
  font-size: 45px;
  font-weight: 700;
  line-height: 39px;
  background: linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-us-section .blue-line {
  width: 100px;
  height: 4px;
  background-color: #4a8bdf;
  margin: 10px auto;
}

.contact-us-section .contact-us-paragraph {
  text-align: center;
  font-size: 18px;
  color: #696687;
  margin-bottom: 40px;
}

/* Contact Box */
.contact-us-section .contact-content-box {
  display: flex;
  background: #fff;
  border-radius: 29px;
  box-shadow: 0px -4px 20px rgba(0, 0, 0, 0.15);
  padding: 30px;
}
.contact-content-box .col-lg-4 img{
  height: 100%;
}

/* Contact Form */
.contact-us-section .contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-us-section .input-field {
  width: 96%;
  height: 56px;
  padding: 18px 22px;
  border-radius: 8px;
  border: 1px solid #696687;
  opacity: 0.5;
  background: #fff;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.contact-us-section .dropdown {
  width: 98%;
  height: 56px;
  padding: 18px 22px;
  border-radius: 8px;
  border: 1px solid #696687;
  opacity: 0.5;
  background: #fff;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.contact-us-section .textarea-field {
  width: 98%;
  height: 137px;
  padding: 19px 22px;
  border-radius: 8px;
  border: 1px solid #696687;
  opacity: 0.5;
  background: #fff;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

/* Send Message Button */
.contact-us-section .send-message-button {
  width: 385px;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: linear-gradient(90deg, #4a8bdf 0%, #94c3ff 100%);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.contact-us-section .contact-image img {
  width: 90%;
  border-radius: 29px;
  object-fit: cover;
}

/* footer css */
/* Footer Main Container */
.footer {
  width: 100%;
  background: #2a2a2a;
  padding: 6em 0em;
  color: #fff;
}
.footer-links a {
  color: #fff; /* Replace #333 with your desired color */
  text-decoration: none; /* Remove underline */
  list-style: none;
}
.footer-services a {
  color: #fff; /* Replace #333 with your desired color */
  text-decoration: none; /* Remove underline */
  list-style: none;
}

/* Column 1: Logo and Newsletter */
.footer-logo {
  width: 150px;
}

.footer-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  margin: 15px 0px 50px 0px;
}

.footer-heading {
  font-size: 16px;
  font-weight: 700;
  margin-top: 1em;
}

.zen-footer {
  width: 100px;
  margin-left: -1.5em;
}
.orange-line {
  width: 33px;
  height: 2px;
  background: #ea5d3e;
  margin-bottom: 10px;
}

.subscribe-form {
  background: #fff;
  border-radius: 8px;
  display: flex;
}

.subscribe-input {
  height: 41px;
  padding: 10px;
  opacity: 0.5;
}

.subscribe-button {
  width: 100%;
  border-radius: 0 8px 8px 0;
  background: #ea5d3e;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  border: none;
}

/* Column 2: Contact Info */
.contact-info .icon {
  width: 20px;
  margin-right: 10px;
}

.contact-text {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.5;
}

.contact-number,
.contact-email {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  margin-top: 5px;
  margin-left: 2.5em;
}

/* Column 3: Useful Links */
.footer-links li,
.footer-services li {
  list-style: none;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  margin: 5px 0px 0px -32px;
}

.footer-links .greater-than,
.footer-services .greater-than {
  color: #ea5d3e; /* Orange color */
  margin-right: 5px;
  font-size: 18px;
  font-weight: bold;
}

/* Footer Bottom Section */
.footer-bottom {
  width: 100%;
  height: 86px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: -6em;
  margin-top: 4em;
}
.footer .col-md-33 {
  flex: 0 0 auto;
  width: 25%;
}
.footer .col-md-3 {
  flex: 0 0 auto;
  width: 15%;
}
.footer .col-md-33 img {
  margin-left: -1.5em;
}

.footer .row {
  gap: 8em;
  justify-content: center;
}
/* General paragraph styling */
.footer-bottom p {
  margin-top: 16px;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Bold styling for Miczon LLP */
.footer-bottom .bold-text {
  font-weight: 700;
}
.ecommerce-marketing-section .box:hover p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* hover effects */
.contact-us-button-hover {
  display: none;
  padding: 6px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #2c73ce 0%, #609eee 100%);
  border-radius: 30px;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding-left: 1em;
  position: absolute;
  margin-left: 15.5em;
  margin-top: 2.5em;
}
.contact-us-button-hover .circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41.99px;
  height: 41.99px;
  border-radius: 29.5px;
  background-color: #fff;
  margin-left: 10px;
}

.contact-us-button-hover .circle-btn svg {
  width: 25.244px;
  height: 25.244px;
  transform: rotate(0deg);
  flex-shrink: 0;
}

.image-content {
  display: none;
}
.laptop-img{
  display: none;
}


.error-message p {
  color: red;
  font-size: 0.9rem;
  /* margin: 5px 0 0; */
}

.success-message p {
  color: green;
  font-size: 1rem;
  /* margin: 10px 0; */
}

  /* .input-field, .dropdown, .textarea-field {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  } */

.send-message-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.social-media-img{
  width: 40vw;
}