@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
  --primary-theme: #673F97;
  --secondry-theme: #479d4e;
  --default-color: #fff;
  --black: #000000;
  --dark-blue: #13182f;
  --light-black: #1e1e1e;
  --light-blue: #ebf8ff;
  --light-gray: #727272;
  --dark-gray: #3d3d3d;
  --mid-gray: #888888;
  --gray-600: #838383;
  --gray-400: #7b7b7b;
  --yellow: #ffc700;
  --gradiant: linear-gradient(to right, #9933ff, #6633cc);
  --primart-font: 'Poppins', sans-serif;
  --secondry-font: '';
  --shadow-normal: 0px 0px 6px 0px #00000040;
  --text-1: 1px;
  --text-2: 2px;
  --text-3: 3px;
  --text-4: 4px;
  --text-5: 5px;
  --text-6: 6px;
  --text-7: 7px;
  --text-8: 8px;
  --text-9: 9px;
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-19: 19px;
  --text-20: 20px;
  --text-21: 21px;
  --text-22: 22px;
  --text-23: 23px;
  --text-24: 24px;
  --text-25: 25px;
  --text-26: 26px;
  --text-27: 27px;
  --text-28: 28px;
  --text-29: 29px;
  --text-30: 30px;
  --text-31: 31px;
  --text-32: 32px;
  --text-33: 33px;
  --text-34: 34px;
  --text-35: 35px;
  --text-36: 36px;
  --text-37: 37px;
  --text-38: 38px;
  --text-39: 39px;
  --text-40: 40px;
  --text-41: 41px;
  --text-42: 42px;
  --text-43: 43px;
  --text-44: 44px;
  --text-45: 45px;
  --text-46: 46px;
  --text-47: 47px;
  --text-48: 48px;
  --text-49: 49px;
  --text-50: 50px;
  --text-51: 51px;
  --text-52: 52px;
  --text-53: 53px;
  --text-54: 54px;
  --text-55: 55px;
  --text-56: 56px;
  --text-57: 57px;
  --text-58: 58px;
  --text-59: 59px;
  --text-60: 60px;
  --text-61: 61px;
  --text-62: 62px;
  --text-63: 63px;
  --text-64: 64px;
  --text-65: 65px;
  --text-66: 66px;
  --text-67: 67px;
  --text-68: 68px;
  --text-69: 69px;
  --text-70: 70px;
  --text-71: 71px;
  --text-72: 72px;
  --text-73: 73px;
  --text-74: 74px;
  --text-75: 75px;
  --text-76: 76px;
  --text-77: 77px;
  --text-78: 78px;
  --text-79: 79px;
  --text-80: 80px;
  --text-81: 81px;
  --text-82: 82px;
  --text-83: 83px;
  --text-84: 84px;
  --text-85: 85px;
  --text-86: 86px;
  --text-87: 87px;
  --text-88: 88px;
  --text-89: 89px;
  --text-90: 90px;
  --text-91: 91px;
  --text-92: 92px;
  --text-93: 93px;
  --text-94: 94px;
  --text-95: 95px;
  --text-96: 96px;
  --text-97: 97px;
  --text-98: 98px;
  --text-99: 99px;
  --text-100: 100px;
  --text-101: 101px;
  --text-102: 102px;
  --text-103: 103px;
  --text-104: 104px;
  --text-105: 105px;
  --text-106: 106px;
  --text-107: 107px;
  --text-108: 108px;
  --text-109: 109px;
  --text-110: 110px;
  --text-111: 111px;
  --text-112: 112px;
  --text-113: 113px;
  --text-114: 114px;
  --text-115: 115px;
  --text-116: 116px;
  --text-117: 117px;
  --text-118: 118px;
  --text-119: 119px;
  --text-120: 120px;
  --text-121: 121px;
  --text-122: 122px;
  --text-123: 123px;
  --text-124: 124px;
  --text-125: 125px;
  --text-126: 126px;
  --text-127: 127px;
  --text-128: 128px;
  --text-129: 129px;
  --text-130: 130px;
  --text-131: 131px;
  --text-132: 132px;
  --text-133: 133px;
  --text-134: 134px;
  --text-135: 135px;
  --text-136: 136px;
  --text-137: 137px;
  --text-138: 138px;
  --text-139: 139px;
  --text-140: 140px;
  --text-141: 141px;
  --text-142: 142px;
  --text-143: 143px;
  --text-144: 144px;
  --text-145: 145px;
  --text-146: 146px;
  --text-147: 147px;
  --text-148: 148px;
  --text-149: 149px;
  --text-150: 150px;
}

/* -- Contact --  */
.contact-second-row h3.text-white {
  font-family: 'Roboto';
  font-weight: 600;
  font-size: 40px;
}

.contact-second-row form label {
  margin-bottom: 0px;
  font-size: 20px;
  font-weight: 500;
  font-family: 'Montserrat';
}

.contact-second-row form input {
  border-radius: 6px;
}

.contact-main-content input::placeholder,
.contact-main-content textarea::placeholder {
  color: white;

}

.contact-second-row form input[type='submit'] {
  background-color: #002494;
  color: #fff;
  font-family: 'Roboto';
  font-weight: 900;
  font-size: 20px;
}

.contact-second-row .col-lg-6 img {
  width: 50%;
  max-width: 50%;
  margin: auto;
}

.blurb-ctn {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.blurb-ctn a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
}

.blurb-ctn a:hover {
    color: #002494 !important;
}

.blurb-ctn .img-blurb img {
  width: 100%;
  max-width: 100%;
}

.firt-blurb {
  margin-top: 40px;
}

.contact-second-row {
  align-items: center;
}

* {
  font-family: 'Manrope', sans-serif;
}

html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  height: 100%;
  font-family: 'Manrope', sans-serif;
  background-color: #ffffff !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
  font-family: 'Manrope', sans-serif;
}

.navbar-custom {
  position: relative;
  padding: 10px;
  z-index: 10;
}

img.gta {
  animation: none !important;
}

.menu-icon {
  cursor: pointer;
  font-size: 24px;
}

.menu-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  right: 10px;
  top: 50px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.menu-items li {
  padding: 10px;
}

.menu-items li:hover {
  background-color: #f1f1f1;
}

button.cont-btn {
  font-size: 16px;
  font-weight: 500;
  background: #fff;
  padding: 12px 30px;
  border-radius: 30px;
  border: none;
  color: #000;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

button.cont-btn:hover {
  background-image: linear-gradient(to right, #ec768d, #9b44e5);
  border-radius: 30px;
  border: none;
  color: #fff;
  transform: scale(1.1);
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

span#menuIcon {
  background: #fff;
  padding: 6px 15px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

span#menuIcon:hover {
  transform: scale(1.1);
}

div#carouselExampleDark {
  margin-top: -140px;
  z-index: 5;
  position: relative;
}

/* Hero banner slider */
/*  carousel      */

.carousel-item {
  height: 100vh;
  min-height: 300px;
}

.bg-1 {
  background-image: url(../images/hero-banner.png);
}

.bg-2 {
  background-image: url(../images/hero-banner1.png);
}

.bg-3 {
  background-image: url(../images/hero-banner2.png);
}

.bg-1,
.bg-2,
.bg-3 {
  -webkit-background-size: cover;
  background-size: cover;
}

.carousel-caption {
  bottom: 220px;
  z-index: 2;
}

.carousel-caption {
  position: absolute;
  bottom: 1.25rem;
  left: 5% !important;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: left;
  top: 40%;
  width: 40%;
}

.carousel-caption h5 {
  font-size: 60px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 25px;
  text-align: left;
  font-weight: 900;
  line-height: 1;
}

.carousel-caption p {
  /* width: 60%; */
  margin: auto;
  font-size: 18px;
  line-height: 1.9;
  text-align: left;
}

.carousel-indicators button {
  background: url(https://images.app.goo.gl/5YkYJEwcNaydgwSA7) !important;
}

.carousel-indicators img {
  border-radius: 30px;
}

.carousel-caption a {
  text-transform: uppercase;
  text-decoration: none;
  padding: 5px 20px;
  display: inline-block;
  color: #fff;
  margin-top: 15px;
  border-radius: 5px;
}

.carousel-inner:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.carousel-indicators {
  bottom: 65px;
}

.carousel-indicators button {
  width: 100px !important;
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 45% !important;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: 2%;
  margin-bottom: 8rem !important;
  margin-left: 15%;
  list-style: none;
  left: 38%;
}

button.carousel-control-next {
  display: none;
}

button.carousel-control-prev {
  display: none;
}

div#carouselExampleCaptions {
  margin-top: -130px;
}

/* Hero banner slider */

/* sec2 Start here */
.sec2-img {
  text-align: right;
}

.sec2-img img {
  width: 80%;
}

div#v-pills-tab button {
  text-align: justify;
  display: inline;
  text-transform: uppercase;
  line-height: 2;
  font-weight: 400;
  color: #fff;
  font-size: 14px;
  padding: 6px 20px;
  border: none !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background: #945319 !important;
  outline: none !important;
}

section.services-sec h1 {
  position: absolute;
  font-size: 279px;
  font-weight: 900;
  z-index: 0;
  top: -62px;
  text-transform: uppercase;
  text-align: center;
  color: #fffefe54;
  opacity: 0.1;
}

section.services-sec {
  position: relative;
}

.sec2-tabs {
  z-index: 1;
  padding-top: 120px;
}

section.services-sec {
  background: radial-gradient(circle at bottom right, #512f15, #0e0b11);
  padding-bottom: 50px;
}

.sec2-para p {
  color: #fff;
  font-size: 14px;
  font-weight: 200;
}

.sec2-list ul li {
  font-size: 14px;
  color: #fff;
  font-weight: 200;
  list-style-type: none;
}

.service-txt p {
  color: #fff;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 2px;
  position: absolute;
  top: 24%;
  left: 42%;
}

/* sec3 start here */
section.work-sec h1 {
  position: absolute;
  font-size: 279px;
  font-weight: 900;
  z-index: 0;
  top: -20px;
  text-transform: uppercase;
  text-align: center;
  color: #fffefe54;
  opacity: 0.1;
}

section.work-sec {
  position: relative;
  z-index: 1;
}

section.work-sec {
  background: linear-gradient(180deg, #0e0b11, #9e5819);
  border-bottom-left-radius: 18%;
  border-bottom-right-radius: 18%;
}

.work-sec p {
  color: #fff;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 2px;
  position: absolute;
  top: 150px;
  left: 42%;
}

.work-img img {
  width: 100%;
  margin: 5px !important;
  height: 500px;
  object-fit: cover;
}

.work-img {
  padding-top: 240px;
}

.work-img .main-img:nth-child(1) img {
  border-top-left-radius: 50%;
}

.work-img .main-img:nth-child(2) img {
  border-top-right-radius: 50%;
}

.work-img .main-img:nth-child(3) img {
  border-top-left-radius: 50%;
}

.work-img .main-img:nth-child(4) img {
  border-top-right-radius: 50%;
}

.main-img {
  overflow: hidden;
  height: 500px;
}

.main-img img {
  transition: transform 0.5s ease-in-out;
}

.main-img:hover img {
  transform: translateY(-20%);
}

.work-img img {
  width: 100%;
  margin: 5px !important;
  height: 500px;
  object-fit: cover;
}

.work-img1 img {
  width: 100%;
  margin: 5px !important;
  height: 500px;
  object-fit: cover;
}

.work-img1 {
  padding-top: 0px;
}

.work-img1 .main-img1:nth-child(1) img {
  border-bottom-left-radius: 50%;
}

.work-img1 .main-img1:nth-child(2) img {
  border-bottom-right-radius: 50%;
}

.work-img1 .main-img1:nth-child(3) img {
  border-bottom-left-radius: 50%;
}

.work-img1 .main-img1:nth-child(4) img {
  border-bottom-right-radius: 50%;
}

.main-img1 {
  overflow: hidden;
  height: 500px;
}

.work-img1 img {
  width: 100%;
  margin: 5px !important;
  height: 500px;
  object-fit: cover;
}

.sec3-btn a {
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
}

.sec3-btn {
  text-align: center !important;
  padding-bottom: 50px;
}

/* work sec start here */
section.client-sec {
  background: #0e0b11;
  padding-top: 350px;
  padding-bottom: 80px;
  margin-top: -245px;
}

section.client-sec {
  position: relative;
}

section.client-sec h1 {
  position: absolute;
  font-size: 279px;
  font-weight: 900;
  z-index: 0;
  top: 180px;
  text-transform: uppercase;
  text-align: center;
  color: #fffefe54;
  opacity: 0.1;
  width: 100%;
}

.client-sec p {
  color: #fff;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 2px;
  position: absolute;
  top: 370px;
}

.sec4-img {
  padding-top: 170px;
}

.img-mt img {
  margin-top: -30px;
}

/* Question sec start here */
section.question-sec {
  background: #434555;
  padding-top: 200px;
  padding-bottom: 80px;
}

section.question-sec {
  position: relative;
}

section.question-sec h1 {
  position: absolute;
  font-size: 250px;
  font-weight: 900;
  z-index: 0;
  top: -64px;
  text-transform: uppercase;
  text-align: center;
  color: #fffefe54;
  opacity: 0.1;
  width: 100%;
}

.question-sec p {
  color: #fff;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 2px;
  position: absolute;
  top: 75px;
}

.sec5-txt {
  text-align: left;
  padding: 30px;
  background: #141217;
  border-radius: 20px;
  padding-bottom: 150px;
}

.sec5-txt h2 {
  font-size: 120px;
  font-weight: 900;
  color: #464448b5;
}

.sec5-txt h4 {
  text-transform: uppercase;
  color: #919093;
  font-size: 16px;
  font-weight: 900;
}

/* process section  */
section.process-sec {
  background: #0e0b11;
  padding-top: 200px;
  padding-bottom: 80px;
}

section.process-sec {
  position: relative;
}

section.process-sec h1 {
  position: absolute;
  font-size: 250px;
  font-weight: 900;
  z-index: 0;
  top: -64px;
  text-transform: uppercase;
  text-align: center;
  color: #fffefe54;
  opacity: 0.1;
  width: 100%;
}

.process-sec p {
  color: #fff;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 2px;
  position: absolute;
  top: 75px;
}

/* ar css start here */
/* globals  */
.py-60 {
  padding: 60px 0px;
}

/* globals end here */

/* ai chatbot css start here */
.ai-chatbot-page .section-marquee .marwuee-row:before {
  display: none;
  background: transparent;
}

.ai-chatbot-lg-card {
  background: url('../images/ai-chatbot/ai-chatbot-bg.png') no-repeat center/cover;
  padding: 30px 0px;
}

.btn-secondary {
  position: absolute;
  bottom: 10px;
  right: 0;
  left: 0;
  background-color: #9933ff;
  padding: 10px 20px;
  color: #fff;
  font-size: 12px;
  max-width: 150px;
  margin: auto;
  text-align: center;
  text-decoration: none;
}

.ai-chatbot-sm-text {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  max-width: 190px;
}

.chatbot-img {
  top: 30px;
  left: -308px;
  width: 100%;
  max-width: 420px !important;
}

.ai-chatbot-para {
  font-size: 30px;
}

.services.animate.ai-chatbot-project-sec {
  padding: 100px 0px;
}

.ai-chatbot-project-sec .dubai-row-mind {
  background: url('../images/ai-chatbot/ai-chatbot-project.png') no-repeat center/cover;
}

.hiw-card .btn-secondary {
  position: static;
}

.hiw-card {
  background-color: #6633cc;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
  border: 1px solid #fff;
}

.hiw-card-title {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.hiw-card .btn-secondary {
  padding: 10px 44px;
  max-width: 100%;
}

.hiw-card-para {
  font-size: 12px;
}

.how-it-works-sec {
  padding-bottom: 60px;
}

.wcu-card-title {
  max-width: 236px;
}

.pb-60 {
  padding-bottom: 60px;
}

.wcu .btn-secondary {
  border: none;
  padding: 10px 40px;
  font-weight: 700;
  font-size: 17px;
  max-width: 181px;
}

.wcu {
  background: url('../images/ai-chatbot/wcu-bg.png') no-repeat center/cover !important;
  padding: 60px 0;
}

.ai-chatbot-page {
  overflow: hidden;
}

.section-bg-wrapper,
.ai-chatbot-page .how-it-works-sec,
.ai-chatbot-solution-sec {
  background-color: #000;
}

.ai-chatbot-page .cta-sec-wrapper {
  padding: 20px 0;
  margin: 0 auto !important;
  display: flex;
  justify-content: center;
  background-color: #000;
}

.sec-left-img {
  left: 0;
  top: 110px;
}

.sec-right-img {
  right: 0;
  top: 110px;
}

.banner-right-txt {
  top: -80px;
  right: -200px !important;
}

.banner-right-txt h5 {
  color: #fff;
  font-size: 29px;
  font-weight: 700;
}

.banner-right-txt .text-2 {
  max-width: 200px;
  margin-bottom: 20px;
}

.banner-right-txt .text-1 {
  margin-left: -30px;
  margin-bottom: 30px;
}

.ai-chatbot-banner-right img {
  min-width: 540px;
}

/* ai chatbot css end here */

/* network security css start here */
.network-security-hero-sec {
  background: url('../images/network-security/banner-right.webp') no-repeat center/cover;
}

.newtwork-security-page .consultancy-hero-sec.network-security-hero-sec {
  padding-bottom: 40px;
}

.network-security-hero-sec h1 span {
  background: linear-gradient(to right, #9933ff, #6633cc);
  font-size: 35px;
  color: white;
  font-weight: 900;
  display: flex;
  padding: 10px 0 20px 20px;
  margin-bottom: 20px;
}

.network-security-hero-sec h1 {
  color: #fff;
  font-weight: 900;
  font-size: 45px;
}

.network-security-hero-sec h2 {
  font-size: 28px;
  font-weight: 700;
}

.wwo-sec {
  background: url('../images/network-security/wwo-bg.png') no-repeat center/cover;
  padding: 40px 0 100px 0;
  position: relative;
  z-index: 0;

}

.wwo-sec::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.sm-btn {
  font-size: 17px;
  padding: 13px 37px;
  border-radius: 4px;
  text-decoration: none;
  text-transform: uppercase;
}

.light-btn {
  background-color: #ffffff;
  color: #5303b7;
}

.wwo-card-bottom {
  background-color: #5303b7;
  border: 1px solid #ffffff9e;
  border-top: none;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 20px;
}



.wwo-card:hover .wwo-card-bottom {
  visibility: visible;
}

.twod-animation-wcu-arrows .slick-arrow,
.wwo-arrows .slick-arrow {
  background: transparent;
}

.wwo-arrows .slick-prev,
.wwo-arrows .slick-next {
  display: none !important;
  /* Hide default arrows */
}

.twod-animation-wcu-arrows .right-arrow,
.wwo-arrows .right-arrow {
  top: 71%;
  right: -30px;
}

.twod-animation-wcu-arrows .left-arrow,
.wwo-arrows .left-arrow {
  top: 71%;
  right: 30px;
}

.twod-animation-wcu-arrows .left-arrow,
.twod-animation-wcu-arrows .right-arrow,
.wwo-arrows .left-arrow,
.wwo-arrows .right-arrow {
  border: 1px solid #fff;
  border-radius: 0;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.twod-animation-wcu-arrows .left-arrow,
.twod-animation-wcu-arrows .right-arrow {
  top: 35%;
}

.twod-animation-wcu-arrows .left-arrow {
  right: 100px;
}

.twod-animation-wcu-arrows .right-arrow {
  right: 27px;
}

.hap-sec .dubai-row-mind {
  background: linear-gradient(#0000006b, #0000007a),
    url(../images/network-security/hap-bg.png) no-repeat center / cover;
}

.wcu-right-area {
  background: #383838;
}

.custom-accordion .accordion-item {
  border-radius: 0 !important;
  border: none;
}

.custom-accordion .accordion-header {
  background-color: #7b28de;
  color: #fff;
}

.custom-accordion .accordion-button {
  font-size: 20px;
  padding: 20px 40px 20px 40px;
  font-weight: 700;
  background-color: #7b28de;
  color: #fff;
}

.custom-accordion .accordion-body,
.custom-accordion .accordion-button:not(.collapsed) {
  background-color: #7b28de;
  color: #fff;
  box-shadow: none;
}

.custom-accordion .accordion-body {
  padding: 10px 40px 10px 40px;
}

.accordion-collapse {
  border: none;
}

.theme-btn {
  background-color: #582499;
}

.sm-btn.theme-btn {
  padding: 18px 37px;
}

.security-matters {
  padding: 100px 0;
}

.security-matters-list li {
  list-style: none;
  margin-bottom: 20px;
}

.security-matters-list li span {
  padding-left: 10px;
}

/* .security-matters-right {
  position: absolute;
  right: 0;
  top: 0;
} */
.security-matters-left-content {
  padding-left: 70px;
}

.security-matters-left-content h2 {
  max-width: 530px;
}

.about-ads-bg {
  background: url(../images/network-security/about-ads-bg.webp) no-repeat center/cover;
  position: relative;
  z-index: 1;
  border: 1px solid #ffffff52;
}

.about-ads-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.about-ads-list li {
  color: #fff;
  font-size: 22px;
  margin-bottom: 10px;
}

.wwo-sec-left {
  position: absolute;
  top: 0;
  left: 30px;
  z-index: 2;
}

.wwo-sec-right {
  position: absolute;
  top: -530px;
  right: 0px;
  /* z-index: 1 !important; */
  z-index: 2;
}


.btn-primary {
  color: #fff;
  background-color: #9142EF;
  padding: 10px 40px;
  font-size: 17px;
  text-decoration: none;
}

/* .twod-animation-wcu-arrows {
  
} */
/* network security css end here */
/* 2d animation css start here */
.banner-bottom-area {
  position: relative;
  z-index: 1;
}

.banner-bottom-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 840px;
  height: 840px;
  background-color: var(--primary-theme);
  z-index: -1;
  margin: 0 auto;
  border-radius: 100%;
}

.twod-animation-hero-sec {
  padding: 180px 0 480px 0;
}

.inner-banner h1 {
  font-size: 76px;
  font-weight: 700;
}

.banner-left-img img {
  left: 0;
  top: 70px;

}

.banner-center-img img {
  right: 0;
  left: 0;
  top: 70px;

  margin: 0 auto;
}

.banner-right-img img {
  right: 0;
  top: 70px;

}

.twod-animation-page .section-marquee .marwuee-row:before {
  z-index: 1;
}

.td-animation-wcu-card .sm-btn.theme-btn {
  color: #fff;
}

.td-animation-wcu-card {
  background-color: #fff;
  padding: 20px 10px;
}

.td-animation-wcu-card.td-animation-service-card {
  background-color: transparent;
  border: 1px solid #fff;
  position: relative;
}

.td-animation-wcu-card.td-animation-service-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background-color: #fff;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.td-animation-service-card-bottom-content {
  background-color: #fff;
}

.td-animation-wcu-card.td-animation-service-card:hover .td-animation-service-card-bottom-content {
  background-color: var(--primary-theme);
  transition: all 0.3s ease;

}

.td-animation-wcu-card.td-animation-service-card:hover::before {
  background-color: var(--primary-theme);
}

.td-animation-service-card-bottom-content p {
  color: #6D7D99;
}

.td-animation-wcu-card.td-animation-service-card:hover .td-animation-service-card-bottom-content * {
  color: #fff;
}

.twod-animation-service .btn-primary {
  font-size: 15px;
  padding: 20px 40px;
}

.twod-animation-service-arrows {
  position: absolute;
  top: 64%;
}

.twod-animation-service-arrows .left-arrow {
  left: -44px;
}

.twod-animation-service-arrows .right-arrow {
  right: -44px;
}

.process-list li {
  margin-bottom: 10px;
  color: #fff;
  font-size: 30px;
  font-weight: 900;
}

.our-process-sec .seo-btn a {
  padding: 7px 34px;
}



.lg-shape-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/2d-animation/lg-shape-bg.png') no-repeat center/contain;
  max-width: 1640px;
  right: 0;
  margin: 0 auto;
}

/* 2d animation css end here */
/* 3d-animation css start here */
.threed-animation-hero-sec h1 {
  font-size: 42px;
}

.threed-animation-hero-sec {
  padding: 180px 0 0 0;
}

.threed-animation-hero-sec::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url('../images/3d-animation/tower-right.png') no-repeat center/cover;
  z-index: -1;
  max-width: 290px;
}

.threed-animation-hero-sec::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/3d-animation/tower-left.png') no-repeat center/cover;
  z-index: -1;
  max-width: 290px;
}

.threed-animation-wco-sec .wco-1-content {
  max-width: 280px;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.threed-animation-wco-img::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background: linear-gradient(to top, rgb(0 0 0 / 40%) 0%, rgb(0 0 0 / 0%) 100%);
  z-index: 1;
}

/* 3d-animation css end here */

/*responsive css start here */
@media only screen and (max-width: 1600px) {
  .banner-right-txt {
    right: -150px;
  }
}

@media only screen and (max-width: 1200px) {
  .chatbot-img {
    left: -100px;
    max-width: 350px !important;
  }

  .ai-chatbot-para {
    font-size: 26px;
  }
}

@media only screen and (max-width: 992px) {
  .chatbot-img {
    position: relative;
    left: 0;
    margin: 0 auto;
  }

  .ai-chatbot-sm-text {
    font-size: 20px;
    text-align: center;
  }

  .ai-chatbot-para {
    font-size: 22px;
    text-align: center;
  }

  .hiw-card {
    padding: 20px 15px;
    text-align: center;
  }

  .banner-right-txt {
    right: 0;
    top: 0;
    position: relative;
    text-align: center;
    padding: 0 20px;
  }

  .banner-right-txt h5 {
    font-size: 22px;
  }

  .ai-chatbot-banner-right img {
    min-width: 100%;
  }

  .sec-left-img,
  .sec-right-img {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .ai-chatbot-sm-text {
    font-size: 18px;
  }

  .ai-chatbot-para {
    font-size: 18px;
  }

  .hiw-card-title {
    font-size: 20px;
  }

  .btn-secondary {
    padding: 8px 16px;
    font-size: 13px;
  }

  .how-it-works-sec,
  .services.animate.ai-chatbot-project-sec,
  .wcu {
    padding: 40px 0;
  }
}

@media only screen and (max-width: 575px) {
  .ai-chatbot-sm-text {
    font-size: 16px !important;
    max-width: 100%;
    padding: 0 10px;
  }

  .ai-chatbot-para {
    font-size: 16px !important;
    padding: 0 10px;
    text-align: center;
  }

  .hiw-card {
    padding: 15px;
    flex-direction: column;
  }

  .hiw-card-title {
    font-size: 18px !important;
  }

  .hiw-card .btn-secondary {
    font-size: 12px;
    padding: 8px 14px;
  }

  .wcu-card-title {
    font-size: 16px;
    text-align: center;
  }

  .wcu .btn-secondary {
    font-size: 14px;
    padding: 8px 16px;
    max-width: 100%;
  }

  .banner-right-txt h5 {
    font-size: 18px;
  }

  .banner-right-txt .text-1,
  .banner-right-txt .text-2 {
    margin: 10px 0;
    text-align: center;
    font-size: 14px;
  }

  .chatbot-img {
    max-width: 100% !important;
    margin: 0 auto;
    left: 0;
    top: 0;
  }

  .exter-para {
    font-size: 16px !important;
  }
}


.exter-para {
  margin: auto;
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
  color: #ffffff;
  max-width: 800px;
  margin-top: 20px;
}

/* .app-development-technology .services-slider .swiper-slide {
  background: url('images/app-development-technology/bgimg.jpg') no-repeat center/cover;
  position: relative;
  z-index: 2;
}  */


.ai-development-page .span {
  font-weight: 900;
  color: #002494;
}

/* 
   .ai-development-page .container .live-chat-btns a {
  background-color: #002494;
    padding: 6px 20px;
    color: #fff;
    text-decoration: none;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 18px;

} */
/* 
 .ai-development-page .ai-para {
  font-weight: 00;
  color: white;
 } */

/* .ai-development-page .live-chat-btns-ss a{

    width: 20%;
  } */


/* ==========================================================================
   ADA HERO SECTION
   ========================================================================== */

.ada-hero-section {
  background-image: url('../images/hero-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;

  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;

  margin-top: -140px;
  padding-top: 240px;
}

/* Overlay */
.ada-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65));
  z-index: 1;
}

/* Ensure content above overlay */
.ada-hero-section .container,
.ada-hero-left {
  position: relative;
  z-index: 10;
}

.ada-hero-section .container {
  display: block !important;
}

/* =========================================================
   TEXT AREA
   ========================================================= */

.ada-hero-title {
  font-size: 75px;
  font-weight: 950;
  color: #ffffff;
  line-height: 1.05;
  margin-bottom: 30px;
  letter-spacing: -2px;
}

.ada-hero-subtitle {
  font-size: 17px;
  color: #ffffff;
  line-height: 1.5;
  max-width: 400px;
}

/* =========================================================
   CIRCULAR CTA BUTTON
   ========================================================= */

.ada-drop-line-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: var(--blue-color);
  color: #ffffff !important;
  border-radius: 50%;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  border: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 15px 35px rgba(233, 30, 99, 0.4);
}

.ada-drop-line-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 20px 45px rgba(233, 30, 99, 0.6);
}

.ada-drop-line-btn .arrow-icon {
  font-size: 28px;
  margin-bottom: 8px;
  transform: rotate(45deg);
}

/* =========================================================
   PORTFOLIO WALL (RIGHT SIDE)
   ========================================================= */

.ada-portfolio-wall {
  position: absolute;
  top: 50%;
  right: 0%;
  display: flex;
  height: 120vh;
  width: clamp(480px, 48vw, 820px);
  /* Smart responsive width */
  transform: translateY(-50%) perspective(1800px) rotateY(-10deg);
  transform-origin: right center;

  z-index: 5;
  pointer-events: none;

}


/* Columns */
.ada-wall-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 280px;
}

/* Subtle Curve Effect */
.ada-wall-column:nth-child(1) {
  transform: rotateY(-6deg);
}

.ada-wall-column:nth-child(2) {
  transform: rotateY(0deg);
}

.ada-wall-column:nth-child(3) {
  transform: rotateY(6deg);
}

/* ZigZag Offset */
.ada-col-down {
  padding-top: 250px;
}

/* Animated Strip */
.ada-wall-strip {
  display: flex;
  flex-direction: column;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.ada-col-up .ada-wall-strip {
  animation: adaSlideUp 45s linear infinite;
}

.ada-col-down .ada-wall-strip {
  animation: adaSlideDown 45s linear infinite;
}

/* Images */
.ada-wall-strip img {
  width: 100%;
  height: 500px;
  object-fit: cover;

  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
  filter: brightness(0.75);
  transition: transform 0.5s ease;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes adaSlideUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes adaSlideDown {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0);
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
   @media (min-width: 1600px) {
    .ada-portfolio-wall {
      width: clamp(480px, 39vw, 820px);
    }
   }
@media (max-width: 1400px) {
  .ada-hero-title {
    font-size: 65px;
  }
}

@media (max-width: 1300px) {
  .ada-hero-title {
    font-size: 55px;
  }

  .ada-hero-subtitle {
    max-width: 400px;
  }
}

@media (max-width: 992px) {

  .ada-hero-section {
    min-height: auto;
    padding: 120px 20px;
    margin-top: 0;
    text-align: center;
  }

  .ada-hero-title {
    font-size: 45px;
  }

  .ada-drop-line-btn {
    width: 140px;
    height: 140px;
  }

  .ada-portfolio-wall {
    position: relative;
    transform: none;
    height: 500px;
    width: 100%;
    max-width: 100%;
    margin-top: 60px;
  }
}

@media (max-width: 768px) {

  .ada-portfolio-wall {
    display: none;
    /* Hide for performance */
  }

  .ada-hero-title {
    font-size: 38px;
  }
}


@media (max-width: 1350px) {
  .ada-portfolio-wall {
    right: 10%;
  }

  .ada-drop-line-btn {
    margin-bottom: 20px;
  }
}

/* =========================================================
   ADA PORTFOLIO SECTION
   ========================================================= */

.ada-portfolio-section {
  background-color: #141414;
  padding: 80px 0 90px;
}

.ada-portfolio-grid {
  max-width: 100%;
}

.ada-portfolio-item {
  overflow: hidden;
  border-radius: 10px;
  max-width: 100%;
}

.ada-portfolio-item img {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0 auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ada-portfolio-item img:hover {
  transform: scale(1.05);

}

/* Portfolio responsive: 4 per row desktop, 3 tablet, 2 mobile */
@media (min-width: 992px) {
  .ada-portfolio-item img {
    max-width: 200px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .ada-portfolio-item img {
    max-width: 180px;
  }
}

@media (max-width: 767.98px) {
  .ada-portfolio-section {
    padding: 50px 0 60px;
  }

  /* .ada-portfolio-item img {
    max-width: 120px;
  } */
}

/* @media (max-width: 375px) {
  .ada-portfolio-item img {
    max-width: 100px;
  }
} */

/* =========================================================
   ADA TESTIMONIALS / WHAT CLIENTS SAY SECTION
   ========================================================= */

.ada-testimonials-section {
  background-color: var(--black);
  padding: 40px 0 40px;
}

.ada-testimonials-header {
  margin-bottom: 48px;
}





.ada-testimonial-card {
  background-color: #141414;
  border-radius: 12px;
  padding: 28px 24px;
  height: 100%;
  transition: box-shadow 0.3s ease;
}





.ada-testimonial-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--red-color);
  margin-bottom: 4px;
}

.ada-testimonial-role {
  font-size: 18px;
  color: var(--blue-color);
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .ada-testimonials-section {
    padding: 50px 0 60px;
  }

  .ada-testimonials-header {
    margin-bottom: 32px;
  }

  .ada-testimonial-card {
    padding: 22px 20px;
  }
}





/* Web Development Services CSS start here */
.about-section {

  padding: 80px 0;
}

.about-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 
    .about-text h2 {
        color: white;
        font-size: 65px;
        font-weight: 600;
        margin-bottom: 20px;
    } */

.seo-span {
  color: #9142EF;

}

.about-text p {
  font-size: 20px;
  font-weight: 300;
  color: white;
  line-height: 30px;
}


.mockup-img {
  max-width: 100%;
  height: auto;
  border-radius: 20px; 
  /* box-shadow: 0 20px 50px var(--blue-color);  */
  /* transition: all 0.3s ease; */
}

.btn-consult {
  margin-top: 25px;
  background: var(--blue-color);
  font-size: 20px;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 10px;
  font-weight: bold;
}

@media (max-width: 991.98px) {
  .about-content {
    flex-direction: column-reverse;
    text-align: center;
  }
}

@media (max-width:770px) {


  .about-text h2 {
    font-size: 30px;


  }
}

/* web development services slider css start here */

.slider-container {
  background: black;
  padding: 80px 0;
  min-height: 100vh;
  position: relative;
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
}



.section-title p {
  color: white;
  font-size: 29px;
  font-weight: 400;
  letter-spacing: 0.3px;
  margin: 0;
  line-height: 1.2;
  max-width: 700px;
  margin: 0 auto;
  margin-top: 20px;
}

.slider-wrapper {
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
  max-width: 1140px;
  /* Limit width to fit 3 cards nicely */
  margin-left: auto;
  margin-right: auto;
  padding: 20px 16px 0;
  box-sizing: border-box;
}

.slider-track {
  display: flex;
  gap: 30px;
  /* Keep row width = viewport strip so JS clientWidth matches visible area (not sum of all cards). */
  width: 100%;
  min-width: 0;
}

.service-card {
  flex: 0 0 350px;
  background: #1a1a1a;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease;
  border: 2px solid #ffffff;
  /* Added white border */
  cursor: pointer;


}

.service-card:hover {

  background: var(--blue-color);
  border-color: #ffffff;
  /* Keep white border on hover */
}

.card-image {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;

}

.card-content {
  padding: 15px 25px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.2;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;

}

.card-separator {
  width: 88.4px;
  height: 3.4px;
  background: var(--red-color);
  margin-bottom: 15px;
}

.service-card:hover .card-separator {
  background: #ffffff;
}

.card-description {
  color: #656971;
  font-size: 17px;
  font-weight: 400;
  line-height: 20.01px;
  margin-bottom: 20px;
}

.service-card:hover .card-description {
  color: #ffffff;
}

.read-more-btn {
  background: #ffffff;
  color: var(--red-color);
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  align-self: flex-start;
}

.service-card:hover .read-more-btn {
  opacity: 1;
  transform: translateY(0);
}

.read-more-btn:hover {
  background: var(--red-color);
  color: white;
  transform: translateY(-2px);
}

.pagination-controls {
  position: absolute;
  bottom: 30px;
  right: 300px;
  display: flex;
  gap: 15px;
}

.pagination-btn-1 {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;

}


@media (max-width: 768px) {
  .service-card {
    /* Slightly narrower than desktop so one card + gap fits typical phone widths */
    flex: 0 0 min(280px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
  }

  /* .section-title h1 {
    font-size: 30px;
  } */

  .pagination-controls {
    right: 20px;
    bottom: 20px;
  }

  .pagination-btn-1 img {
    width: 35px;
    height: 35px;
  }

  .section-title p {
    font-size: 20px;
  }
}


.max-width {
  max-width: 1000px;
  margin: 0 auto;
}


/* =========================================================
    */


.text-iot {
  font-size: 72px;
  font-weight: 900;
  color: white;
  letter-spacing: 0px;
  line-height: 1.2;
}

.span {
  color: #6D35B2;
}

.iot-para {
  font-size: 22px;
  font-weight: 400;
  color: white;
  line-height: 36px;

}

.logic-works-section {
  background-color: black;
  color: white;
  display: flex;
  padding: 40px 30px;

}

.section-title {
  font-size: 60px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 10px !important;
}

.feature-card-american {
  background-color: #0E0E0E;
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.feature-card-american:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.feature-icon {
  height: 100px;
  width: 100px;
  background-color: var(--blue-color) !important;
  font-size: 3rem;
  margin-bottom: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.feature-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.feature-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #cccccc;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
    margin-bottom: 40px;
  }

  .feature-card-american {
    margin-bottom: 30px;
    padding: 30px 20px;
  }

  .feature-icon {
    font-size: 2.5rem;
  }

  .text-iot {
    font-size: 50px;


  }
}

@media (max-width: 500px) {
  .text-iot {
    font-size: 40px;
    line-height: 60px;
  }
  .logic-works-section {
    padding: 0px !important;
  }
  
}

.home-page {
  overflow: hidden;
}

.slider-container h2 {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.2;
}

.brands-services-us .section-marquee .marwuee-row:before {
  display: none;
}

.brands-services-us {
  overflow: hidden;
}