:root {
  --main-color: #3B1A6C;
  --white-color: #fff;
  --secoundary-color: #2ADEF6;
  --header-height: 80px;
  --font-stack: "Segoe UI", sans-serif;
}

body {
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

.aboutlft {
  position: relative;
}

.imgabout1 {
  position: absolute;
  border-radius: 5px;
  margin: 0 0 0 -3rem;
}

.imgabout2 {
  position: absolute;
  border-radius: 5px;
  margin: 0 0 0 17rem;
}

h6 {
  color: var(--main-color);
}

h1 {
  font-size: 3rem;
  color: var(--main-color);
}

h2 {
  font-size: 2.5rem;
  font-weight: 600;
}
a{
  font-weight: 400;
}

p {
  font-size: 1rem;
  font-weight: 400;
}

li {
  font-size: 1rem;
}

.bg-dark {
  background: #000 !important;
}

.btn-primary {
  display: inline-block;
  font-style: normal;
  font-weight: var(--f-fw-semibold);
  line-height: var(--f-fs-font-20);
  border-radius: 52px;
  background-color: var(--vtc-bg-main4);
  transition: all 0.4s;
  border: none;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background-color: var(--main-color);
  color: var(--white-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
  padding: .8rem 2rem;
}

.btn-primary:hover {
  background-color: var(--secoundary-color);
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


.btn-secondary {
  display: inline-block;
  font-style: normal;
  font-weight: var(--f-fw-semibold);
  line-height: var(--f-fs-font-20);
  padding: .8rem 2rem;
  border-radius: 52px;
  background-color: var(--vtc-bg-main4);
  transition: all 0.4s;
  border: none;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background-color: var(--secoundary-color);
  color: var(--main-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
}

.btn-secondary:hover {
  background-color: var(--secoundary-color);
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}



.btn-primary:hover {
  background: var(--secoundary-color);
}

.btn-outline-light {
  padding: .8rem 22rem;
  color: var(--main-color);
  border: 1px solid var(--main-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
}

.btn-outline-light:hover{
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.smblue {
  color: var(--secoundary-color);
  display: flex;
  align-items: center;
  font-size: 1rem;
  gap: .3rem;

}

.btn-outline-light:hover {
  background: var(--secoundary-color);
  border: 1px solid var(--secoundary-color);
}

#what-we-do-section {
  animation: fadeIn 1.5s ease-in-out;
  /* Apply the fade-in animation */
  /* Note: This basic animation runs on page load. 
     For triggering on scroll, JavaScript (Intersection Observer) is typically needed. */
}

/* Banner Section Background */
.banner-section {
  background-image: url('../img/bg/hero2-bg.jpg');
  /* Path relative to CSS file */
  background-size: cover;
  /* Cover the entire section */
  background-position: center;
  /* Center the image */
  background-repeat: no-repeat;
  /* Do not repeat the image */
  height: 100vh;
  align-items: center;
  display: flex;
  justify-content: center;
}
.banner-section h1{
  font-weight: 800;
}

.contact-banner-section {
  height: 35vh;
  align-items: center;
  display: flex;
  justify-content: center;
  background: url(../img/bg/inner-hero-bg.jpg);
}

.imgabout {
  margin: 7rem 0 0 0;
}

.text-right {
  text-align: right;
}

.clientlogos {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  background: #fff;
  box-shadow: 0 0 8px 0 #ccc;
  border-radius: 10px;
  margin: 13px 0;
  padding: 10px;
}

.clientlogos img {
  height: 80px;
}

.what_text {
  background: url(../img/bg/hero2-bg.jpg);
  padding: 1rem;
  margin-top: 1rem;
  border-radius: .5rem;
  padding-top: 9rem;
  height: 95%;
  margin: 1rem 0;  
  transform: scale(0.95);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.what_text:hover {
  transform: scale(1);
}

.navbar-nav a {
  margin: 1rem 1rem;
  font-size: 1rem;
}

.navbar-nav .dropdown-menu a {
  margin: 0;
}

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

.list li::after {
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: var(--secoundary-color);
  content: '';
  left: 0;
  border-radius: 1rem;
  margin: 13px 0 0 0;
}

.list li {
  line-height: 40px;
}

.sticky-top {
  padding: 0;
  background: #fff !important;
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.09);
}

.what_text h3 {
  font-size: 1.5rem;

}

.pb-5 {
  padding-bottom: 1rem;
}

.what_text_img {
  margin-top: 1rem;
  border-radius: .5rem;
}

.what_text_img img {
  width: 100%;
}

.navmenu {
  background-color: #fff;
  padding: 5px;
}

.vl-header-area2 {
  padding: 20px 0;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
}

.navmenu img {
  height: 45px;
}

.navmenu li a {
  color: #000;
}

.navbar-absolute {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1030;
  background: transparent;
  transition: background 0.3s ease, padding 0.3s ease;
}

.navbar-sticky {
  position: sticky;
  top: 0;
  background-color: #343a40;
  /* dark background */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.scrolled {
  background-color: #343a40 !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.hero-section {
  height: 100vh;
  background: url('https://via.placeholder.com/1600x900') no-repeat center center/cover;
}

.smedia {
  background: #fafafa;
  padding: 1rem;
  border: 1px solid #ccc;
}

.serviceprojec {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.serviceprojec li {
  padding: 0;
  list-style: none;
  width: 40%;

}

.choose2-single-apps {
  display: flex;
  align-items: center;
  background-color: #fafafa;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 16px;
  margin-top: 30px;
  transition: all 0.4s;
}

.choose2-single-apps .apps-info {
  padding-left: 16px;
}

.apps-info h4 {
  margin-bottom: 0;
}

.swiper-slide {
  display: flex;
  height: auto;
}

.card {
  border-radius: 10px;
  transition: transform 0.3s;
}

.card:hover {
  transform: translateY(-5px);
}

.client-logos {
  overflow: hidden;
  position: relative;
}

.client-track {
  display: flex;
  width: calc(250px * 10);
  /* Adjust based on number of logos */
  animation: scroll 25s linear infinite;
}

img {
  max-width: 100%;
}
footer a{
  text-decoration: none;
  display: inline-block;
  margin-bottom: 3px;
}
footer p a:hover{
  color: var(--secoundary-color);

}
.footer_logo {
  width: 150px;
}
.ficon{
  display: inline-block;
  margin-right: 10px;
  width: 16px;
}

.client-logo {
  max-height: 100px;
  object-fit: contain;
  margin: auto;

}

.client-logo:hover {
  filter: none;
  opacity: 1;
}

.owl-nav,
.owl-dots {
  display: none !important;
}

.footerblock {
  color: #fff;
  font-size: 1rem;
}

.footerblock p {
  font-size: 1rem;
}

.footerblock a {
  color: #fff;
}

.footerblock p {
  margin-bottom: 5px;
}

.copybg {
  background: var(--main-color);
}

.copybg p {
  text-align: center;
  font-size: 1rem;
  color: #fff;
  margin: 0;
  padding: 1rem 0;
}

.webpage{
  background: #000;
}
.webpage {
    height: 250px;
    overflow: hidden;
    position: relative;
    margin-bottom: 2rem;
    border-radius: 1rem;
    box-shadow: 0 0 5px 0 #ccc;
    display: flex;
    align-items: center;
}



.webpage img {
    width: 320px;
    height: 240px;
    object-fit: cover;
}


.vl-footer-social2 a {
  display: inline-block;
  height: 36px;
  width: 36px;
  text-align: center;
  line-height: 36px;
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  border-radius: 50%;
  margin: 0px 3px;
  color: var(--vtc-text-white);
  transition: all 0.4s;
}

.cont_box {
  background: #fafafa;
  padding: 1rem;
  display: flex;


  gap: 10px;
  height: 150px;
  align-items: center;
}

.icon span {
  background: #fff;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  border-radius: 1000px;

  justify-content: center;
}

.adnumber a {
  text-decoration: none;
}

.icon i {
  font-size: 21px;
}

.adnumber h3 {
  font-size: 1.3rem;
}

.adnumber p {
  font-size: 1rem;
}

.testimonial-card {
  background: white;
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
  padding: 25px;
  transition: 0.3s ease;
  margin:1rem 0 1rem 1rem;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
}

.testimonial-text {
  font-style: italic;
  height: 65%;
}
.text-primary, .testimonial-role a{
  color: var(--secoundary-color)!important;
}
.carousel-control-next-icon, .carousel-control-prev-icon{
  background-color: var(--secoundary-color);
  background-size: 2rem;
  padding: 1rem;
}
.carousel-item .testimonial-text{
  font-style: italic;
    height: auto;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.testimonial-name {
  font-weight: 600;
  margin-top: 15px;
}

.testimonial-role {
  color: #6c757d;
  font-size: 0.9rem;
}
.testimonial-role a{
  text-decoration: none;
}

.breadcrumb {
  justify-content: center;
}

.text-muted {
  text-align: center;
}

.projectblock { 
  background-color: var(--main-color);
}

.qucikwahtasppa {
  background-color: #25d366;
  border-radius: 50px;
  bottom: 40px;
  box-shadow: 2px 2px 3px #999;
  color: #fff;
  font-size: 30px;
  height: 60px;
  position: fixed;
  right: 40px;
  text-align: center;
  width: 60px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover_tras {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover_tras:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-10px);
}

.qucikwahtasppa i {
  font-size: 35px;
  color: #fff;
}

.qucikwahtasppa i:hover {
  font-size: 35px;
  color: #fff;
}

.qucikwahtasppa:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.projectblock {
  padding: 3rem 0;
}

.projectmain p {
  color: #fff;
  font-size: 1rem;
}
.projectmain i{
  color: var(--main-color);
}

.projectmain h1 {
  font-weight: 800;
  color: #fff;
  font-size: 3rem;
  margin: 0;
}

.proicon {
  background: #fff;
  width: 80px;
  height: 80px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.projectmain {
  display: flex;
  gap:30px;
  justify-content: center;
  align-items: center;
}

.projectmain i {
  font-size: 2rem;
}

.meetblock {
  padding: 5rem 0;
}

.meetteam {
  text-align: center;
  font-weight: 600;
}

.teamblock {
  background: #fff;
  box-shadow: 0 0 5px 0px #ccc;
  padding: 0;
  border-radius: .5rem;
  margin-top: 3rem;
}
.teamphoto{
  background: #fafafa;
  border-radius: .5rem .5rem 0 0;
  text-align: center;
}
.teamblock img{
  height: 250px;
  width: 100%;
  object-fit: cover;
}
.teamdetails{
  padding: 1rem .5rem;
}

.teamblock h3 {
  margin: 0;
  font-size: 1.2rem;
  text-align: center;
}

.teamblock p {
  font-size: .9rem;
  text-align: center;
  margin: .2rem 0 0 0;
}

.aboutclients {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 2rem;
}

.aboutclients .clientlogos {
  width: 200px;
  margin: 0;
}

.webpage {
  height: 250px;
  overflow: hidden;
  position: relative;
  margin-bottom: 2rem;
  border-radius: 1rem;
  box-shadow: 0 0 5px 0 #ccc;
  display: flex;
  align-items: center;

}
.webpage img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hover-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.hover-card img {
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.hover-card:hover img {
  transform: rotate(2deg) scale(1.02);
}
.hovertext{
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: #fff;
  z-index: 99;
}
.hover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  width: 100%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hover-card:hover .hover-overlay {
  opacity: 1;
}

.hover-overlay .arrow-icon {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.hover-card:hover .arrow-icon {
  transform: translateX(6px);
}

.category {
  background: #f4f4f4;
  border-radius: 1rem;
  padding: 1rem;
  
}
.category ul{
  padding: 0;
}
.category li{
  list-style: none;
  padding: 0;
  margin: 0;
}
.category li a{
  text-decoration: none;
  padding: 1rem;
  display: inline-block;
  background:#fff;
  display: flex;
  border-radius: 100px;
  margin-bottom: 1rem;
  color: #000;
}
.category li a:hover{
  background: var(--secoundary-color);
  color: #fff;
}
.mhead{
  text-align: center;
}


.anime-container {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  border-radius: 12px;
  transform: scale(0.95);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.anime-container:hover {
  transform: scale(1);
}

.anime-container::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.2), transparent);
  pointer-events: none;
}

.anime-container:hover::before {
  animation: shine .5s ease-in-out forwards;
}

@keyframes shine {
  to {
    transform: translateX(100%);
  }
}

.anime-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.counter-number::after{
  position: absolute;
  content: '+';
}

.sec-shape1 {     
  position: absolute;
  top: 10%;
  left: 50px;
  z-index: 999;
}

.sec-shape2 {     
  position: absolute;
  top: 50%;
  left: 5%;
  z-index: 999;
}

.sec-shape3 {     
  position: absolute;
  top: 45%;
  right: 5%;
  z-index: 999;
}

.sec-shape4 {     
  position: absolute;
  top: 10%;
  right: 5%;
  z-index: 999;
}


.animate3 {
  animation: float 5s ease-in-out infinite;
}

.animate2 {
  animation: float 4s ease-in-out infinite;
}

.animate4 {
  animation: float 5s ease-in-out infinite;
}

.animate1 {
  animation: float 4s ease-in-out infinite;
}

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

.banner h1 {
  animation: slideInUp 1s ease-out 0.5s forwards; /* Apply to h1 */
  opacity: 0; /* Start hidden */
}

.banner p {
  animation: slideInUp 1s ease-out 0.8s forwards; /* Apply to p, slightly delayed */
  opacity: 0; /* Start hidden */
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}
.smediabg{
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 60%;
}

.boxservice{
  background: #fafafa;
  border-radius: 10px;
  padding: 1rem;
  height: 100%;
  
}
.boxservice h4{
  font-size: 1.5rem;
}

.visionmain{
  padding: 5rem 0;
}
.visoiblock{
  box-shadow: 0 0 5px 0 #ccc;
  padding: 2rem;
  border-radius: .5rem;
  background: #fff;
  margin-bottom: 2rem;
}
.viimg{
 
  margin-bottom: 1rem;
}
.viimg img{
  border-radius:.5rem;
}
.aboutsugumar{
  margin: 5rem 0;
}
.profileimg{
  border-radius: 10px;
}

.btn-outline-primary{
  color: var(--main-color);
  border: 1px solid var(--main-color);
}

.btn-outline-primary:hover{
  background: var(--main-color);
  color: var(--white-color);
  border: 1px solid var(--main-color);
}
.bg-primary{
  background-color: var(--secoundary-color)!important;
}
.card-body li{
  margin-bottom: 1rem;
}
.fa-ul{
  
  display: flex;
  flex-direction: column;
}

.plan50{
  min-height: 45vh;
}
.plan60{
  min-height: 60vh;
}

/* .testimonial-text{
  display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
} */
.testnone{
  text-decoration: none;
  color: #000;
}