.text-branding {
      color: #03455e;
}
.text-branding2 {
      color: #ffbe3d;
}
/*Homepage slider css start here*/

 .xd-slider-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  .xd-slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .xd-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity 1.5s ease-in-out;
    display: flex;
    align-items: center;
    padding-left: 8%;
  }
.xd-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55); /* Black with 55% opacity */
  backdrop-filter: blur(2px);      /* Optional: adds blur effect */
  z-index: 1;
}
  .xd-slide.xd-active {
    opacity: 1;
    z-index: 2;
  }

  .xd-slide-content {
    color: #fff;
    text-align: left;
    z-index: 2; /* Above the overlay */
    max-width: 750px;
  }

  .xd-slide-content h2,
  .xd-slide-content h3,
  .xd-slide-content button {
    opacity: 0;
    transform: translateY(30px);
    color: white;
    animation-fill-mode: forwards;
  }

  .xd-slide-content h2 {
    font-size: 3rem;
    font-weight: bold;
    animation: xd-slideInLeft 1.5s ease 0.2s forwards;
  }

  .xd-slide-content h3 {
    font-size: 1.75rem;
    animation: xd-slideInTop 1.5s ease 0.4s forwards;
  }

  .xd-slide-content button {
    margin-top: 20px;
    animation: xd-slideInBottom 1.5s ease 0.6s forwards;
  }

  @keyframes xd-slideInLeft {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  @keyframes xd-slideInTop {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  @keyframes xd-slideInBottom {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .xd-pagination-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px 10%;
    z-index: 10;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .xd-pagination-item {
    width: 140px;
    padding: 5px;
    background: rgb(255 255 255 / 93%);
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    color: white;
    position: relative;
    transition: background 0.3s;
    flex-shrink: 0;
    scroll-snap-align: center;
    transition: transform 0.3s ease-in-out; /* Smooth transition over 0.5 seconds */
    transform-origin: center center; /* Zoom from the center of the element */
  }
  .xd-pagination-item:hover {
    transform: scale(1.04); /* Zoom in by 5% when hovered */
}

  .xd-pagination-item.xd-active {
   background: #023d54;
  }

  .xd-pagination-item.xd-active .progheading {
  color: #ffffff; /* White text for active item */
}

  .xd-pagination-thumb {
    height: 60px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    margin-bottom: 5px;
  }

  .xd-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: #ffbe3d;
    animation: xd-fillBar 6s linear forwards; /*Slider speed control here for progressbar*/
  }

  @keyframes xd-fillBar {
    from { width: 0%; }
    to { width: 100%; }
  }
 .progheading {
  font-size: 11px;
  font-weight: 600;
  color: #023d54;
 }

/*Homepage slider css end here*/


.rsItem {
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  min-height: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rsHeader {
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
  margin-bottom: 10px;
}

.rsRate {
  font-size: 24px;
  margin-top: 10px;
  margin-bottom: 15px;
}

.rsDesc {
  font-size: 14px;
    letter-spacing: 0.2px;
    font-weight: 600;
    color: #000;
   margin-top: 25px;
}

.ratingSlide .rsHeader {
	display: block;
	background: red;
	height: 30px;
	padding-top: 5px;
	font-family: inherit;
	border-radius: 59px;
	position: absolute;
	width: 85%;
	bottom: -12px;
	left: 17px;
	font-size: 13px;
	letter-spacing: 0.4px;
}

.ratingSlide .rsItem .rsRate {
	font-size: 25px;
	font-weight: 900;
	margin-bottom: 10px;
	border: 1px solid white;
	height: 90px;
	width: 90px;
	padding-top: 13px;
	border-radius: 50%;
	margin: 10px auto;
	padding: 18px 9px;
	text-align: center;
	/*animation: shadow-pulse 1s infinite;*/
	background: #167e82;
}
.ratingSlide .rsItem .rsDesc {
    font-size: 14px;
    letter-spacing: 0.2px;
    font-weight: 600;
    color: #000;
    position: absolute;
    bottom: 15px;
}

.shadow-x
 {
  border-radius: 5px;
      box-shadow: 2px 4px 6px rgb(2 61 84 / 40%);
 }

.main-service.active {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffbe3d !important;
  background-color: #f0f0f0;
  border-left: 3px solid #0d6efd;
  position: relative;
  padding-right: 20px; /* to give space for icon */
}

.main-service.active::after {
  content: "\f054"; /* FontAwesome unicode for chevron-right */
  font-family: "Font Awesome 5 Free"; /* or "Font Awesome 6 Free" */
  font-weight: 900; /* for solid icons */
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #0d6efd;
  font-size: 1rem;
}


/*annimation added start here*/


/* ===== Slide Up Fade ===== */
@keyframes fadeSlideUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.fade-slide-up {
  opacity: 0;
  animation: fadeSlideUp 1s ease-out forwards;
}

/* ===== Fade In with Delay ===== */
@keyframes fadeInDelayed {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.fade-in-delay {
  opacity: 0;
  animation: fadeInDelayed 1.5s ease-out forwards;
  animation-delay: 0.5s;
}

/* ===== Slide from Left ===== */
@keyframes slideFromLeft {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}
.slide-left {
  opacity: 0;
  animation: slideFromLeft 1s ease-out forwards;
}

/* ===== Slide from Right ===== */
@keyframes slideFromRight {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}
.slide-right {
  opacity: 0;
  animation: slideFromRight 1s ease-out forwards;
}

/* ===== Zoom In ===== */
@keyframes zoomIn {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
.zoom-in {
  opacity: 0;
  animation: zoomIn 0.8s ease-out forwards;
}

/* ===== Fade In Up (slower, soft effect) ===== */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 1.2s ease forwards;
}

/* ===== Bounce In ===== */
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    animation-timing-function: ease-in-out;
  }
  0% { opacity: 0; transform: scale(0.3); }
  60% { opacity: 1; transform: scale(1.05); }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.bounce-in {
  opacity: 0;
  animation: bounceIn 1s forwards;
}

/* ===== Flip In X ===== */
@keyframes flipInX {
  0% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
  100% { transform: perspective(400px) rotateX(0); opacity: 1; }
}
.flip-in-x {
  opacity: 0;
  animation: flipInX 0.8s ease-out forwards;
}

/* ===== Delay Utility Classes ===== */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }


/*annimation added end here*/


.imgfree {
  width: 100%
}

.zoom-on-hover {
    transition: transform 0.3s ease-in-out;
    transform-origin: center center;
}
.zoom-on-hover:hover {
    transform: scale(1.15);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}



/*History*/
.timeline-section {
    padding: 50px 0;
    position: relative;
  }

  .timeline {
    position: relative;
    padding: 0;
    list-style: none;
  }

  .timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: #023D54;
    transform: translateX(-50%);
  }

  .timeline-item {
    position: relative;
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
  }

  .timeline-item.left {
    left: 0;
  }

  .timeline-item.right {
    left: 50%;
  }

  .timeline-item::after {
    content: '';
    position: absolute;
    top: 20px;
    right: -8px;
    width: 16px;
    height: 16px;
    background-color: #ffbe3d;
    border-radius: 50%;
  }

  .timeline-item.right::after {
    left: -8px;
  }

  .timeline-item .content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
  }

  .timeline-item .content:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }

  .timeline-item .icon {
    font-size: 24px;
    color: #023D54;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .timeline-item h4 {
    margin-top: 0;
    color: #023D54;
    font-weight: bold;
  }

  .timeline-item p {
    margin: 0;
    color: #555;
  }

  /* Responsive Fix for Mobile */
  @media (max-width: 768px) {
    .timeline::before {
      left: 8px;
    }

    .timeline-item {
      width: 100%;
      padding-left: 30px;
      padding-right: 10px;
      margin-bottom: 30px;
    }

    .timeline-item.left,
    .timeline-item.right {
      left: 0;
    }

    .timeline-item::after,
    .timeline-item.right::after {
      left: 0;
      right: auto;
    }

    .timeline-item .content {
      flex-direction: column;
      align-items: flex-start;
    }

    .timeline-item .icon {
      margin: 0 0 10px 0;
    }

    .timeline-item h4 {
      margin-bottom: 10px;
    }
  }


  .adwservhm {
       /*background-color: #1a4061;*/
    padding: 0px 2px 2px;
    border-radius: 10px;
    /*box-shadow: rgb(69 69 67 / 97%) 0px 4px 10px;*/
  }

.roundedx2 {
  border-radius: 0 0 10px 10px;
}


/******************************work sample section styles **************************/
.w3-big-image-container {
    padding: 20px;
    text-align: center;
}
.w3-big-image {
    width: 85%;
    height: auto;
    border-radius: 10px;
}
.w3-thumbnail-container {
    display: flex;
    overflow: hidden;
    padding: 28px 0px 28px 0px;
    position: relative;
    background-color: rgb(255 255 255) !important;
    /*left: 42px;*/
    border-radius: 8px 0 0 8px;
}
.w3-thumbnail-track {
    display: flex;
    transition: transform 0.1s linear;
    will-change: transform;
    gap: 10px;
}
.w3-thumbnail-track img {
    width: 250px;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
}
 @media (max-width: 768px) {
    .w3-thumbnail-track img {
       width: 150px !important;
    }
  }


.w3-thumbnail-container::-webkit-scrollbar {
    display: none;
}
.w3-thumbnail-container:active {
    cursor: grabbing;
}
.w3-controls {
    margin-top: 10px;
}
.w3-controls button {
      margin: 15px 8px;
    padding: 3px 19px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    background-color: #ffbe3d;
    color: #312e2e;
    cursor: pointer;
}
.w3-controls button:hover {
    background-color: #023D54;
    color: #ffffff;
}

.w_padding{
    /*padding: 3rem !important;*/
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}
/************************work sample section styles end *******************/



/* 32 We Are Friends Css */

.we-are-friends-section .common-subtitle {
  margin-bottom: 20px;
}
.we-are-friends-section .common-title {
  margin-bottom: 20px;
}
.we-are-friends-section .text {
  max-width: 550px;
  width: 100%;
  margin-bottom: 30px;
}
.we-are-friends-section .blog-btn {
  margin-bottom: 50px;
}

.friends-left {
  position: sticky;
  top: 20px;
}
.friends-left .shape {
  position: absolute;
  bottom: -30%;
  left: 40%;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .friends-left .shape {
    bottom: 10%;
    width: 5%;
    left: 30%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .friends-left .shape {
    bottom: 10%;
    width: 6%;
    left: 40%;
  }
}
@media (max-width: 767px) {
  .friends-left .shape {
    bottom: 10%;
    width: 10%;
    left: 70%;
  }
}

.friends-card {
background: #062b3a;
    border-radius: 10px;
    padding: 3px;
    position: sticky;
    top: 20px;
    margin-bottom: 10px;
}
.friends-card:hover .details-btn-3 {
  right: 10px;
  transition: all 0.3s;
}
.friends-card .author-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  width: 100%;
  height: 100%;
}
.friends-card .author-details .author-info h5 {
  font-weight: 600;
  font-size: 24px;
  line-height: 36px;
  color: var(--theme-color-3);
  margin-bottom: 5px;
}
@media (max-width: 767px) {
  .friends-card .author-details .author-info h5 {
    font-size: 20px;
  }
}
.friends-card .author-details .author-info p {
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 16px;
}
.friends-card .author-details .author-info .description p {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--body-color);
}
.friends-card .author-details .socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.friends-card .author-details .socials .social-links {
  display: flex;
  gap: 10px;
  transition: all 0.3s;
}
.friends-card .author-details .socials .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: var(--white-color);
  color: var(--body-color);
}
.friends-card .author-details .socials .social-links a:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-3);
}
.friends-card .thumb {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  height: 100%;
}
.friends-card .thumb::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background: linear-gradient(109.34deg, rgba(255, 225, 117, 0) 64.88%, #FFE175 100%);
}
.friends-card .thumb .category {
  position: absolute;
  right: 0;
  bottom: 0;
}
.friends-card .thumb img {
  border-radius: 10px;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.details-btn-3 {
  box-shadow: -7px 9px 31.3px #FFE175;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--theme-color-2);
  color: var(--theme-color-3);
  transform: rotate(-45deg);
  padding: 12px 20px;
  border-radius: 53px;
  transition: all 0.3s;
  position: absolute;
  top: 10px;
  right: -60px;
}

/*extra*/
.image-only-card .card-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.image-only-card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.8s ease; /* smooth zoom effect */
}

.image-only-card:hover img {
  transform: scale(1.05); /* slight zoom */
}

.card-title-overlay {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6); /* semi-transparent background */
  padding: 10px 20px;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.card-title-overlay h4 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  text-align: center;
}


/* 32 We Are Friends Css */
/*What we do home*/
.what-we-do-section-2 {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left;
  position: relative;
  z-index: 1;
  border-radius: 10px;
  margin: 80px 85px 0;
  padding: 100px 0 120px 0;
  background-color: #023d54;
  overflow: hidden;
}

.what-we-do-section-2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8); /* Darker overlay with 80% opacity */
  z-index: 0;
}

.what-we-do-section-2 > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 1700px) {
  .what-we-do-section-2 {
    margin: 80px 20px 0;
  }
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .what-we-do-section-2 {
    padding: 100px 40px 120px 40px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .what-we-do-section-2 {
    padding: 80px 40px 100px 40px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .what-we-do-section-2 {
    padding: 80px 20px 100px 20px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .what-we-do-section-2 {
    padding: 80px 20px 100px 20px;
  }
}
@media (max-width: 767px) {
  .what-we-do-section-2 {
    padding: 80px 10px 80px 10px;
    margin: 80px 15px 0;
  }
}
.what-we-do-section-2 .shape {
  position: absolute;
  top: 0;
  right: 12%;
  z-index: -1;
}
.what-we-do-section-2 .we-do-card {
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 10px;
}
.what-we-do-section-2 .we-do-card:hover .card-content i {
  color: #023d54;
}
.what-we-do-section-2 .we-do-card:hover .card-content i span {
  color: #55d239;
}
.what-we-do-section-2 .we-do-card:hover .card-thumb img {
  overflow: hidden;
  transform: scale(1.1);
}
.what-we-do-section-2 .we-do-card .card-content {
  padding: 30px;
}
.what-we-do-section-2 .we-do-card .card-content i {
  color: #55d239;
  font-size: 40px;
  position: relative;
  transition: all 0.3s linear;
}
.what-we-do-section-2 .we-do-card .card-content i span {
  font-size: 14px;
  color: #023d54;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s linear;
}
.what-we-do-section-2 .we-do-card .card-content h5 {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 36px;
  color: #023d54;
 /* margin-bottom: 20px;*/
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .what-we-do-section-2 .we-do-card .card-content h5 {
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  .what-we-do-section-2 .we-do-card .card-content h5 {
    font-size: 20px;
  }
}
.what-we-do-section-2 .we-do-card .card-thumb {
  position: relative;
}
.what-we-do-section-2 .we-do-card .card-thumb img {
  border-radius: 10px;
  transition: transform 0.6s ease; /* smooth transition */
}
.what-we-do-section-2 .we-do-card .card-thumb:hover img {
  transform: scale(1.1); /* slight zoom */
}
.what-we-do-section-2 .we-do-card .card-thumb .circled-btn {
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  color: #333333;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F8F7F0;
  border-radius: 100%;
  border: 2px solid #ffffff;
  position: absolute;
  top: 0;
  right: 30px;
}
.what-we-do-section-2 .we-do-card .card-thumb .circled-btn p {
  margin-bottom: 0;
  transition: all 0.3s linear;
}
.what-we-do-section-2 .we-do-card .card-thumb .circled-btn .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #55d239;
  font-size: 24px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s linear;
}
.what-we-do-section-2 .we-do-card .card-thumb .circled-btn:hover {
  color: #55d239;
  background-color: #023d54;
  border: 2px solid #55d239;
}
.what-we-do-section-2 .we-do-card .card-thumb .circled-btn:hover p {
  opacity: 0;
}
.what-we-do-section-2 .we-do-card .card-thumb .circled-btn:hover .icon {
  opacity: 1;
  visibility: visible;
}

.whatwedo-slider-active {
  margin-right: -280px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .whatwedo-slider-active {
    margin-right: -75px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .whatwedo-slider-active {
    margin-right: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .whatwedo-slider-active {
    margin-right: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .whatwedo-slider-active {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .whatwedo-slider-active {
    margin-right: 0;
  }
}
.whatwedo-slider-active .whatwedo-slider-bottom {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-top: 60px;
  width: 100%;
}
@media (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  .whatwedo-slider-active .whatwedo-slider-bottom {
    margin-top: 40px;
    gap: 40px;
  }
}
.whatwedo-slider-active .whatwedo-slider-bottom .whatwedo-navigation {
  display: flex;
  align-items: center;
  gap: 10px;
}
.whatwedo-slider-active .whatwedo-slider-bottom .whatwedo-pagination-wrap {
  width: 100%;
}
@media (max-width: 767px) {
  .whatwedo-slider-active .whatwedo-pagination-wrap {
    display: none;
  }
}
.whatwedo-slider-active .whatwedo-button-prev,
.whatwedo-slider-active .whatwedo-button-next {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #023D54;
   background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2.35px);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s linear;
}
.whatwedo-slider-active .whatwedo-button-prev:hover,
.whatwedo-slider-active .whatwedo-button-next:hover {
  color: #023d54;
  background: #ffbe3d;
  border-color: #55d239;
}
.whatwedo-slider-active .whatwedo-pagination {
  height: 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  width: calc(100% - 280px);
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .whatwedo-slider-active .whatwedo-pagination {
    width: calc(100% - 75px);
  }
}
@media (max-width: 1399px) {
  .whatwedo-slider-active .whatwedo-pagination {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .whatwedo-slider-active .whatwedo-pagination {
    margin-top: 30px;
    width: 100%;
  }
}
.whatwedo-slider-active .whatwedo-pagination .swiper-pagination-bullet {
     flex: 1;
    border-radius: 0px;
    height: 100%;
    opacity: 1;
    background: #023d54;
    margin: 0;
}
.whatwedo-slider-active .whatwedo-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #ffbe3d;
}

.section-top-3 {
  display: flex;
  justify-content: space-between;
  /*align-items: end;*/
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .section-top-3 {
    flex-direction: column;
    align-items: start;
    gap: 20px;
    margin-bottom: 40px;
  }
}
.section-top-3 .left {
  max-width: 575px;
  width: 100%;
}
@media (max-width: 1199px) {
  .section-top-3 .left {
    max-width: 500px;
  }
}
.section-top-3 .left .common-subtitle {
  margin-bottom: 20px;
}
.section-top-3 .left .common-subtitle span {
  color: #55d239;
}
.section-top-3 .left .common-title {
  margin-bottom: 0;
}
.section-top-3 .left .common-title h2 {
  color: #f9f9f9;
  margin-bottom: 0;
}
.section-top-3 .right {
  max-width: 402px;
  width: 100%;
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-top-3 .right {
    max-width: 300px;
  }
}
.section-top-3 .right p {
  color: #f9f9f9;
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 20px;
}
.section-top-3 .right .service-btn {
  gap: 8px;
  padding: 0;
  background: transparent;
  color: #55d239;
}
.section-top-3 .right .service-btn:before {
  background: transparent;
}
.section-top-3 .right .service-btn:hover {
  text-decoration: underline;
}
.section-top-3 .right .service-btn .icon-wrap {
  width: auto;
  height: auto;
  color: #55d239;
  background: transparent;
}
.section-top-3 .right .service-btn .icon-wrap:hover {
  background: transparent;
}
/*What we do in home end*/
/*
Moving Grident start*/

.my-moving-gradient-element { /* Replace with your actual selector, e.g., body, or a specific div */
   background: linear-gradient(135deg, #023D54, #033130);
    background-size: 200% 200%; /* Make the background larger than the element */
    animation: gradientMove 10s ease infinite; /* Apply the animation */
}

@keyframes gradientMove {
    0% {
        background-position: 0% 0%; /* Start at top-left */
    }
    50% {
        background-position: 100% 100%; /* Move towards bottom-right */
    }
    100% {
        background-position: 0% 0%; /* Return to start, creating a loop */
    }
}


.my-moving-gradient-element2 { /* Replace with your actual selector, e.g., body, or a specific div */
   background: linear-gradient(135deg, #023D54, #033130);
    background-size: 200% 200%; /* Make the background larger than the element */
    animation: gradientMove 10s ease infinite; /* Apply the animation */
}

@keyframes gradientMove {
    0% {
        background-position: 0% 0%; /* Start at top-left */
    }
    50% {
        background-position: 100% 100%; /* Move towards bottom-right */
    }
    100% {
        background-position: 0% 0%; /* Return to start, creating a loop */
    }
}

/*Moving Grident End*/

.roundedcustom1 {
    border-radius: 6px 6px 10px 10px;
}


@keyframes slow-shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-10px); }
  50%  { transform: translateX(10px); }
  75%  { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

.shake-slow {
  animation: slow-shake 2s ease-in-out infinite;
  display: inline-block;
}

.adwest-hr {
  border: none;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3); /* Light white (semi-transparent) */
}
.brand-color-two {
    --bs-text-opacity: 1;
    color: #ffbe3d !important;
}


/*=========================
custom css by lav start
=========================*/
.typing-text {
  font-weight: 700;
  display: inline-block;
  white-space: normal;
  overflow: visible;
  max-width: 100%;
  word-break: break-word;
}
.adwest-heading h1 {
  font-size: 1px;
}
/* type writting end */

/* animated gradient start */
.animated-gradient-bg {
  background: linear-gradient(270deg, #023d54, #061332, #023d54);
  background-size: 600% 600%;
  animation: moveGradient 5s ease infinite;
}

@keyframes moveGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* animated gradient end */

/* Custom Website Development css Starts here */

/* Services Starts here */

.adwst-cstwd-srvc-box {
    transition: transform 0.4s ease;
  }

  .adwst-cstwd-srvc-box:hover {
    transform: scale(1.03);
  }

  .adwst-cstwd-srvc-title {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s ease-out;
  }

  .adwst-cstwd-srvc-title-right {
    transform: translateX(60px);
  }

  .adwst-cstwd-srvc-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

/* Services end here */

  /* Hover Styling for Process Cards start here*/
    .adwst-cstmwd-prcss-product-item {
        transition: all 0.3s ease-in-out;
    }

    .adwst-cstmwd-prcss-product-item:hover {
        background-color: #111827 !important;
    }

    .adwst-cstmwd-prcss-product-item:hover h5,
    .adwst-cstmwd-prcss-product-item:hover p,
    .adwst-cstmwd-prcss-product-item:hover i {
        color: #ffffff !important;
    }

/* Hover Styling for Process Cards end here */


/* Custom Website Development css end here */



/* Website Design Company css starts here */

/* services section  start here*/

.adwst-wdc-srvcs-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}
.adwst-wdc-srvcs-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    z-index: 2;
  
}
/* Make all text inside card turn black on hover */
.adwst-wdc-srvcs-card:hover .ca-two-card-content h4,
.adwst-wdc-srvcs-card:hover .ca-two-card-content p{
    color: #000 !important;
}
.adwst-wdc-srvcs-arrow{
     color: #000 !important;
  }
.adwst-wdc-srvcs-icon-wrap {
    font-size: 36px;
    margin-right: 15px;
}
.adwst-wdc-srvcs-card:hover .adwst-wdc-srvcs-icon-wrap i {
    animation: adwst-wdc-srvcs-icon-bounce 0.6s ease;
}
.adwst-wdc-srvcs-card:hover .adwst-wdc-srvcs-arrow {
    animation: adwst-wdc-srvcs-arrow-pulse 1s infinite;
    
}
@keyframes adwst-wdc-srvcs-icon-bounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}
@keyframes adwst-wdc-srvcs-arrow-pulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* services section  end  here*/

/* Types tab section  start  here*/

.adwst-wdc-bwtyp-tab .nav-link {
  padding: 12px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}
.adwst-wdc-bwtyp-tab .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.adwst-wdc-bwtyp-tab .nav-link i {
  margin-right: 6px;
}

/* Types tab section  end  here*/

/* Website Design Company css end here */


/* Website Potal Development css starts here */

/* Types tab section  start  here*/

.adwst-wpd-typ-tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .adwst-wpd-typ-tab-nav::-webkit-scrollbar {
        height: 6px;
    }

    .adwst-wpd-typ-tab-nav::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }

    .adwst-wpd-typ-tab-link {
        display: inline-block;
        padding: 12px 20px;
        margin-right: 8px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 16px;
        background-color: #ffbe3d;
        color: #222;
        text-decoration: none;
        border: 1px solid transparent;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .adwst-wpd-typ-tab-link:hover,
    .adwst-wpd-typ-tab-link.active {
        background-color: #0a1931;
        color: #fff !important;
        border-color: #0a1931;
    }

    .adwst-wpd-typ-tab-title {
        font-weight: 700;
    }

    .adwst-wpd-typ-tab-highlighted-text {
        color: #ffbe3d;
    }

    /* Responsive Tweaks */
@media (max-width: 991.98px) {
    .adwst-wpd-typ-tab-title {
        font-size: 28px !important;
    }

    .ail-ft-content {
        padding: 30px 20px !important;
    }

    .ail-ft-content h4 {
        font-size: 22px;
    }

    .ail-tab-con_list li {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .adwst-wpd-typ-tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .adwst-wpd-typ-tab-nav::-webkit-scrollbar {
        display: none;
    }

    .adwst-wpd-typ-tab-nav .nav-item {
        flex: 0 0 auto;
    }

    .ail-op-bg {
        padding: 0 !important;
        margin-bottom: 20px;
    }

    .ptb-60 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .pt-60 {
        padding-top: 30px !important;
    }

    .pb-60 {
        padding-bottom: 30px !important;
    }

    .pt-40 {
        padding-top: 20px !important;
    }

    .mt-40 {
        margin-top: 30px !important;
    }
}

@media (max-width: 575.98px) {
    .adwst-wpd-typ-tab-title {
        font-size: 22px !important;
    }

    .ail-ft-content {
        padding: 25px 15px !important;
    }

    .adwst-wpd-typ-tab-nav {
        gap: 0.5rem !important;
    }

    .ail-tab-con_list li {
        font-size: 14px;
    }

    .adwst-wpd-typ-tab-nav .nav-link {
        font-size: 14px;
        padding: 6px 12px;
    }
}
/* Types tab section  end  here*/


/* Website Potal Development css end here */


/*=========================
custom css by lav end
=========================*/