body {
    font-family: 'Outfit', sans-serif;
    /* font-family: 'Popins', sans-serif; */
   
    font-optical-sizing: auto;
    font-weight: 400; /* Normal weight */
    font-style: normal;
    background-color: #f5f5f7;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
/* body{
 
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-family: 'Outfit' !important;
    background-color: #0b0b0b;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
} */


/* CSS */
body {
  font-family: 
    "Inter", 
    -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    Helvetica, 
    Arial, 
    sans-serif;
}

  
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #ffffff; /* You can change the background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  #preloader img {
    width: 100px; /* Adjust size */
    height: auto;
    animation: fadeInOut 2s infinite;
  }
  
  @keyframes fadeInOut {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }
  
.swirl-container {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
}

.swirl-dot,
.swirl-ring {
  position: absolute;
  transform: translate(-50%, -50%);
}

.swirl-dot {
  width: 5px;
  height: 5px;
  background:#b466a4;
  border-radius: 50%;
  box-shadow: 0 0 10px #b466a4;
}



@keyframes spin {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

  
  
.navbar {
    padding: 0.5rem 0;

}

.navbar-brand img {
    /* filter: brightness(0) invert(1);  */
    height:60px;
}

.navbar-nav .nav-link {
    color: black;
    margin: 0 20px; /* Spacing between links */
    font-weight: 500;
}

.navbar-nav .nav-link.btn-outline-light {
    background: linear-gradient(90deg, #6d6fdc,  #649fd7 );
    color: white;
    font-weight: 600;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    transition: background 0.3s ease;
}

.navbar-nav .nav-link.btn-outline-light:hover {
    background: linear-gradient(90deg,  #649fd7,#6d6fdc );
    color: white;
}

/* Mobile Responsiveness */
@media (max-width: 991.98px) {
    .navbar-nav {
        text-align: center; /* Center align links on mobile */
    }

    .navbar-nav .nav-link {
        margin: 10px 0; /* Vertical spacing on mobile */
    }

    .navbar-nav .nav-link.btn-outline-light {
        margin-left: 0 !important; /* Remove left margin on mobile */
    }
    .navbar-brand img {
        /* filter: brightness(0) invert(1);  */
        height:40px;
    }
}
/* Dropdown menu */
.custom-dropdown {
    background-color: #222;
    border: none;
    box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.1);
}
/* Rotate dropdown icon when dropdown is open */
.navbar-nav .dropdown.show .dropdown-toggle .dropdown-icon i {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
}
/* Dropdown items */
.custom-dropdown .dropdown-item {
    color: #fff;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.custom-dropdown .dropdown-item i {
    margin-right: 8px;
}

/* Hover effects */
.custom-dropdown .dropdown-item:hover {
    background: linear-gradient(90deg, #6d6fdc,  #649fd7 );
    color: #fff;
}

/* Dropdown icon color */
.navbar-nav .dropdown-toggle::after {
    content: none; /* Remove default arrow */
}





/* Banner Section */
.banner-section {
    display: flex;
    justify-content: center;
    align-items: center;
  overflow: hidden;
    text-align: center;
    padding: 10px;
    position: relative;
    /* overflow:hidden; */
    margin-top: 80px;
    width:100%;
}

.banner img {
    width:250px;
    height: auto;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    
}
@media (min-width: 768px) {
   
    .banner img{
margin-top: 100px;
}
}
@media (max-width: 768px) {
    .banner img{
margin-top: -75px;
}
}
.banner-title {
    font-size: 5rem;
    font-weight: 600;
    background: linear-gradient(90deg, #d64040, #f03d52, #b32296, #2b75c4, #169ba0, #20b8a1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #dynamic-text {
    font-weight: bold;
    /* border-right: 3px solid white;  */
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    font-size: 3rem;
  }
  
.banner p {
    font-size: 1.2rem;
    color: #0e0d0d;
    margin-top: 10px;
    font-weight: 500;
}
.btn-custom {
    background: linear-gradient(90deg, #6d6fdc,  #649fd7 );
    color: white;
    font-weight: 600;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    transition: background 0.3s ease;
}
.btn-custom:hover {
    background: linear-gradient(90deg,  #649fd7,#6d6fdc );
    color: white;
}


@media (max-width: 992px) {
    .banner h1 {
        font-size: 2.5rem;
    }
    #dynamic-text{
        font-size: 1.3rem;
    }
}
@media (max-width: 768px) {
    .banner-section {
        height: auto;
        margin-top: 50px !important;
      
    }
  
    .banner h1 {
        font-size: 2rem;
    }
    .banner img {
        width: 150px;
    }
}
@media (max-width: 480px) {
    .banner h1 {
        font-size: 1.8rem;
    }
}


.logo-scroll-wrapper {
    overflow: hidden;
    width: 100%;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.logo-scroll {
    display: flex;
    gap: 80px;
    white-space: nowrap;
    align-items: center;
}

.logo-scroll img {
    max-width: 115px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: grayscale(100%) brightness(1.2);
}
.logo-scroll img:hover{
    filter:none;

}

/* Animation for row 1 */
.row-1 {
    animation: scroll-left 30s linear infinite;
}

/* Opposite direction for row 2 */
.row-2 {
    animation: scroll-right 35s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(50%);
    }
}


@media (max-width: 768px) {
    .logo-container {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 480px) {
    .logo-container {
        grid-template-columns: repeat(2, 1fr);
    }
}
.banner-animation {
    position: absolute;
    opacity: 0.8; /* Adjust opacity */
}

.cloud {
    animation: floatCloud 10s infinite alternate ease-in-out;
}

.laptop {
    animation: slideInLeft 8s infinite alternate ease-in-out;
}

.arrow {
    animation: bounceUp 7s infinite alternate ease-in-out;
}

.globe {
    animation: rotateGlobe 12s infinite linear;
}

.chart {
    animation: scaleUp 9s infinite alternate ease-in-out;
}

@keyframes floatCloud {
    0% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(15px) translateX(10px); }
    100% { transform: translateY(0) translateX(0); }
}

@keyframes slideInLeft {
    0% { transform: translateX(-50px) rotate(-10deg); opacity: 0; }
    100% { transform: translateX(0) rotate(5deg); opacity: 0.8; }
}

@keyframes bounceUp {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

@keyframes rotateGlobe {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes scaleUp {
    0% { transform: scale(0.9); }
    100% { transform: scale(1.1); }
}
/* video-section */

/* video-review */
.video-section {
    /* background-image: radial-gradient(circle at center in hsl shorter hue, rgb(36, 39, 92), black); */
    width: 100%;
    height: auto;
    padding: 50px 0;
    color: white;
    overflow: hidden;
}

.client h2 {
    font-size: 1.8rem;
    font-weight: 600;
    background: linear-gradient(90deg, #6d6fdc,  #649fd7 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: left;
    margin-bottom: 20px;
}

/* Video */
.video-container {
    position: relative;
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    padding-top: 20px;
   
}
@media (min-width: 768px) {
.video-container {
    padding-left: 100px;
  padding-top: 10px !important;

}

}


.video-container iframe {
    width: 100%;
    height: 250px;
    border-radius: 10px;
}

/* Review Text */
.review-text {
    /* padding: 20px; */
    font-size: 16px;
    /* background: rgba(255, 255, 255, 0.1); */
    border-radius: 10px;
    /* box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1); */
    
}

.review-text p {
    font-size: 18px;
    line-height: 1.6;
    color: #0f0f0f;
    text-align: justify;
 
}

.review-text .author {
    font-weight: bold;
    color: #4c6ef5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .video-container iframe {
        height: 250px;
    }
    .client h2 {
        font-size: 2rem;
    }
    .review-text {
        text-align: center;
    }
}


/* text-review */
.review {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative; /* Ensure child elements stay inside */
    padding: 50px 0; /* Add some padding if needed */
    /* background-image: radial-gradient(circle at center in hsl shorter hue, #2c1531, #1d1d1d); */


}
.review h2{
    font-size: 1.8rem;
    font-weight: 600;
    background: black;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.review p{
    color:rgb(134, 134, 134);
    font-size: 15px;
}
.review .carousel-item {
    padding: 40px 20px;
}

.review .card {
    background-color: #222;
    color: white;
    padding: 15px;
    border-radius: 10px;
    border: none;
    /* box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); */
    height: 100%;
}
.review .card p{
    margin-top: 10px;
    text-align: justify;
    font-size: 12px;
  color:rgb(212, 212, 212);
}
.review .card .username{
    margin-top: 5px;
    color:rgb(150, 147, 147)
   
}

.review .profile-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.review .username {
    font-size: 14px;
    color: gray;
}

.review .carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: black;
    border-radius: 50%;
    padding: 10px;
 
 
}
.carousel-control-next-icon, .carousel-control-prev-icon{
width:20px;
height:20px;
}
.carousel-control-next-icon{
    margin-left: 100px;
}
.carousel-control-prev-icon{
    margin-left: -100px;

}
.carousel-indicators button {
    background-color: rgba(255, 255, 255, 0.986) !important; /* Default indicator color */
    border: none;
    width: 10px;
    height: 10px;
   
}

.carousel-indicators button:active {
    background-color: white !important; /* White active indicator */
}
.carousel-indicators button:hover{
    background-color: white !important; /* White active indicator */
}


/* Equal height for cards */
.review .row .col-md-4 {
    display: flex;
}

.review .card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* service-section */
.service-section{
    background-image: radial-gradient(circle at center in hsl shorter hue, rgb(36, 39, 92), black);

    
}
.feedback-section {
    text-align: center;

  
}
.feedback-section h2{
    color:white;
    margin-bottom: 15px;
}
.feedback-section p{
    color:rgb(182, 181, 181);
    margin-bottom: 25px;
}
.feedback-card {
    /* background-image: radial-gradient(circle at center in hsl shorter hue, rgb(10, 0, 10), black); */
position: absolute;
    padding: 20px;
    border-radius: 10px;
    transition: 0.3s ease-in-out;
    border-left:0.1px solid rgb(182, 181, 181);
    border-right:0.1px solid rgb(182, 181, 181);
    border-bottom:0.1px solid rgb(182, 181, 181);
    position: relative;
    height:100%;
    transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.feedback-card:hover {
    transform: translateY(-5px);
    animation: borderAnimation 0.8s linear infinite;
   
}

@keyframes borderAnimation {
    0% {
        border-color: #c770ba;
    }
    50% {
        border-color: #645ab9;
    }
    100% {
        border-color: #c770ba;
    }
}
/* Gradient Border Top */
.feedback-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #c770ba, #c770ba,#645ab9,#645ab9);
    border-radius: 10px 10px 0 0;
}
.feedback-card:hover {
    transform: translateY(-5px);
}
/* Gradient Icon */
.feedback-card .icon {
    font-size: 30px;
    background: linear-gradient(90deg, #c770ba, #c770ba,#645ab9,#645ab9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    text-align: center;
    display:flex;
    justify-content: center;
}
.feedback-card img {
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 10px; /* Optional */
  color:white;
    padding: 5px; /* Add padding for spacing */
    filter: brightness(0.8);
    mix-blend-mode: normal;
}
.feedback-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}
.feedback-card h5{
    color:rgb(243, 240, 240);
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
}
.feedback-card p{
    color:rgba(255, 255, 255, 0.315);
    text-align: justify;
    word-spacing: 5px;
}
.feedback-card a {
    display: flex; /* Enables flexbox */
    align-items: center; /* Centers items vertically */
    justify-content: flex-start; /* Aligns content to the left */
    gap: 8px; /* Adds spacing between icon and text */
    text-align: left;
    background: linear-gradient(90deg, #c770ba, #c770ba,#645ab9,#645ab9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    font-weight: bold;
}

/* Optional: Adjust icon size inside the button */
.feedback-card a i {
    font-size: 18px; /* Change icon size if needed */
}

/* tech section */

.clients-background {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px; /* Adjust as needed to fit logos and text */
    width: 100%;
    /* Add your background color or image here if needed */
    /* background-color: #f0f0f0; */
}

.clients-background .background-text {
    font-size: 7em;
    font-weight: bold;
    color: #e0e0e0; /* Adjust the color of "OUR CLIENTS" */
    text-transform: uppercase;
    user-select: none; /* Prevent text selection */
    pointer-events: none; /* Allow clicks to pass through */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap; /* Prevent line breaks */
    z-index: 1; /* Ensure it's behind the logos */
}

.clients-background  .carousel-container {
    position: relative;
    width: 400px; /* Adjust as needed to fit your logos */
    height: 120px; /* Adjust as needed to fit your logos */
    overflow: hidden;
    z-index: 2; /* Ensure logos are on top of the text */
}

.clients-background .carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clients-background  .carousel-item img {
    max-width: 100%;
    max-height: 100%;
}

.clients-background .show {
    opacity: 1;
}

    

.tech-section {
    padding: 10px;
    overflow: hidden;
    width: 100%;
}

.tech-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Reduced gap for better mobile view */
    justify-content: center;
    align-items: flex-start;
}

.book-animation {
    position: relative;
}

.book {
    position: relative;
    width: 10rem; /* Adjusted width for mobile */
    height: 12rem; /* Adjusted height for mobile */
    cursor: pointer;
    display: flex;
    align-items: center;
    perspective: 1500px;
    /* Simulate spiral binding */
    border-left: 10px solid #ccc;
    border-radius: 5px 0 0 5px;
    
}

.book-cover, .book-back {
    position: absolute;
    width: calc(100% - 10px); /* Adjust width for spiral */
    height: calc(100% - 10px); /* Adjust height for spiral */
    background: linear-gradient(90deg, #594cb6, #ad63ca);
    border-radius: 2px 100px 15px 2px; /* Adjusted radius */
    box-shadow: 1px 1px 10px gray;
    transform-origin: center left;
    z-index: 50;
    padding: 15px; /* Adjusted padding for mobile */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    transition: transform 0.8s ease-in-out;
    transform: rotateY(0deg);

 
}

.book-cover img.logo-top {
    height: 850px; /* Adjusted logo size for mobile */
    margin-bottom: 10px;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    width:100%;
    object-fit: contain;
}

.book-cover h3 {
    font-size: 18px; /* Adjusted font size for mobile */
    line-height: 1.2;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden;
}

.spine-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: absolute;
    left: -5px; /* Adjusted for spiral */
    top: 5px;
    font-size: 10px; /* Adjusted font size for mobile */
    color: #ccc;
}

.page {
    position: absolute;
    width: calc(100% - 10px); /* Adjust width for spiral */
    height: calc(100% - 10px); /* Adjust height for spiral */
    background-color: white;
    border-radius: 2px 15px 15px 2px; /* Adjusted radius */
    transform-origin: center left;
    transform: rotateY(0deg);
    transition: transform 0.8s ease-in-out;
    /* backface-visibility: hidden !important; */

    padding: 10px; /* Adjusted padding for mobile */
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;

}

.page.tech-content-page {
    flex-direction: column;
    gap: 5px; /* Adjusted gap for mobile */
}

.page.tech-content-page img {
    width: 80px; /* Adjusted image size for mobile */
    height: auto;
    object-fit: cover;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

}

.page.tech-content-page span {
    font-size: 14px; /* Adjusted font size for mobile */
    font-weight: bold;
    color: #343755;
    text-align: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

}
.book-cover{
    z-index: 100 !important;
}
.book-back {
    z-index: -1;
}

.tech-content {
    max-width: 100%; /* Make it full width on mobile */
    text-align: center; /* Center text on mobile */
    margin-top: 20px; /* Add some space above text on mobile */
}

.tech-content h3 {
    background: linear-gradient(90deg, #c770ba, #645ab9,#645ab9,#645ab9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 14px; /* Adjusted font size for mobile */
    margin-bottom: 5px;
}

.tech-content h2 {
    font-size: 20px; /* Adjusted font size for mobile */
    font-weight: bold;
    color: white; /* Changed color for better readability on mobile */
    margin-bottom: 10px;
    line-height: 1.3;
}

.tech-content p {
    color: #777; /* Darker color for better readability on mobile */
    font-size: 14px; /* Adjusted font size for mobile */
    line-height: 1.6;
    margin-bottom: 15px;
}

.btn-learn {
    display: inline-block;
    padding: 10px 20px; /* Adjusted padding for mobile */
    background: linear-gradient(90deg, #c770ba, #645ab9);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-size: 14px; 
}

.btn-learn:hover {
    background: linear-gradient(90deg, #c770ba, #645ab9);
}
.spiral {
  position: absolute;
  top: 3px;
  left: -8px; /* Adjust for desired width */
  width: 18px;
  height: 100%;
  background: repeating-linear-gradient(
      to bottom,
      black 0,
      black 3px,
      transparent 5px,
      transparent 15px
  );
  z-index: 1;
}
.spiral::before {
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 10px;
height: 8px;
border-radius: 50%;
background-color: rgb(10, 9, 9);
box-shadow:
    0 20px 0 rgb(5, 5, 5),
    0 40px 0 black,
    0 20px 0 rgb(5, 5, 5),
    0 40px 0 black,
   
}


/* Media query for larger screens */
@media (min-width: 768px) {
    .tech-container {
        gap: 50px;
        justify-content: center;
    }

    .book {
        width: 15rem;
        height: 18rem;
    }

    .book-cover, .book-back, .page {
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        padding: 20px;
    }

    .book-cover img.logo-top {
        height: 85px;
        margin-bottom: 15px;
        margin-top: 0px;
    }

    .book-cover h3 {
        font-size: 22px;
        margin-top: 10px;
        font-weight: bold;

    }

    .spine-label {
        left: -5px;
        top: 10px;
        font-size: 12px;
    }

    .page.tech-content-page img {
        width: 100px;
    }

    .page.tech-content-page span {
        font-size: 18px;
    }

    .tech-content {
        max-width: 500px;
        text-align: left;
        margin-top: 0;
    }

    .tech-content h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .tech-content h2 {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .tech-content p {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .btn-learn {
        padding: 12px 25px;
        font-size: 16px;
    }
}
/* wall of fame */

  .row-container{
    width: 100%;
    overflow: hidden;
  }
.row-container h2 {
    font-size: 1.8rem;
    font-weight: 600;
    /* background-image: radial-gradient(circle at center in hsl shorter hue, #2c1531, #1d1d1d) ; */
    /* background: linear-gradient(90deg, #333474,#3d3f9e,#aa58e0,  #0884d6,#1c6ab3 ); */
    /* background: linear-gradient(135deg, #3d2b1f, #422e04, #362201, #412c06, #4b3719, #3d2b1f); */
    /* background: linear-gradient(to right, #de8f28,  #cd7f2a, #f2be58, #fbf5a7, #f5be59); */
    background-color: #080808;
       



    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 20px;
   
}

.icon-container img {
    width: 100%;
    height: 50px;
    filter: none; /* Remove brightness/invert */
    -webkit-mask-image: url("/assets/images/wall_fame_icon\(1\).png");
    mask-image: url("/assets/images/wall_fame_icon\(1\).png");
    -webkit-mask-size: cover;
    mask-size: cover;
    /* background: linear-gradient(90deg, #816804, #ffcc00, #f0a631, #dd9b21, #ffcc00, #ffcc00); */
    /* filter: drop-shadow(0px 0px 5px #ffcc00) brightness(1.5); */
    background: linear-gradient(to right, #dbdf22, #a87e30, #e4c92e, #e0ab46, #e9a231, #beb031);

}


.row-container p{
    color:white;
}
.wall-of-frames {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}
.frame-container {
    display: flex;
    width: max-content;
    animation: scroll-left 20s linear infinite;
}
.frame-container.reverse {
    animation: scroll-right 20s linear infinite;
}
@keyframes scroll-left {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
@keyframes scroll-right {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.frame {
    position: relative;
    display: inline-block;
    width: 270px;  /* Fixed Width */
    height: 200px; /* Fixed Height */
    margin: 25px;
    box-sizing: border-box;
    padding: 10px; /* Increased to make space for thicker black border */
    background: black; 
}

/* Outer Gradient Golden Border */
.frame::before {
    content: "";
    position: absolute;
    inset: -4px; /* Moves Outward */
    /* background: linear-gradient(135deg, #3d2b1f, #7e6235, #beaa84, #9c7327, #a0793c, #3d2b1f); */
    z-index: -3;
}

/* Thicker Middle Black Border */
.frame::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: black; 
    z-index: -1;
}

/* Inner Gradient Golden Border */
.inner-border {
    position: absolute;
    inset: 10px; /* Adjusted for inner spacing */
    /* background: linear-gradient(135deg,#beaa84, #9c7327, #3d2b1f, #7e6235, #beaa84, #9c7327); */
    z-index: 1;
    box-sizing: border-box;
    pointer-events: none;
}

/* Image Styling */
.frame img {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    object-fit: cover;
    position: relative;
    z-index: 2;
    display: block;
    margin: auto;
}



.row-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* background: linear-gradient(90deg, #4b2055,  #1d1d1d ); */
    /* background: linear-gradient(135deg, #502602, #3d290c, #332711, #2b1d03, #442701, #6e2e03); */
/* background-color: rgba(82, 81, 81, 0.171); */
/* background: radial-gradient(circle at center, rgb(42, 44, 82), black); */
/* background: linear-gradient(135deg,#6d4805, #493001, #3d2b1f, #5f3c03, #6d4804, #795004); */
/* background-image: radial-gradient(circle at center in hsl shorter hue, rgb(30, 32, 75), black); */
/* background: radial-gradient(circle at center, rgb(42, 44, 82), black); */
    
}


/* FAQ Section Styling */
.faq-2__area {
    background-color: #0a0719;
    /* background-image: radial-gradient(circle at center in hsl shorter hue, rgb(56, 1, 61), #0a0719); */

    padding: 50px 0;
    color: #fff;
    position: relative;
    width:100%;
    overflow: hidden;
}

/* Left Side Content */
.faq-2__thumb .section__title-wrapper-title-2 {
    font-size: 35px;
    font-weight: 500;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 20px;
}

.faq-2__thumb-support {
    font-size: 15px;
    color: #bbb;
    margin-bottom: 20px;
    display: inline-block;
}

.faq-2__thumb-support a {
    color: #ffcc00;
    text-decoration: none;
    font-size: 13px;

}

.faq-2__thumb-media img {
    max-width: 100%;
    height: 300px;
    animation: shake 0.5s ease-in-out infinite;
}


/* Right Side FAQ Styling */
.ask-question-2__faq-2 .accordion {
    max-width: 100%;
}

.ask-question-2__faq-2 .accordion-item {
    background: #141024;
    border: 1px solid #342a4d;
    margin-bottom: 15px;
    overflow: hidden;
}

.accordion-button {
    background: none;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 15px 20px;
    width: 100%;
    text-align: left;
    border-radius: 10px;
    transition: 0.3s;
    
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    background: #1d172b;
    border-bottom: 1px solid #342a4d;
    color: white;
    

}
.accordion-button::after {
    content: "\f078"; /* Downward arrow when collapsed */
    font-family: "FontAwesome";
    color: white;
    font-size: 18px;
    transition: transform 0.3s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
    content: "\f077";
    transform: rotate(180deg);
}

.accordion-body {
    background: #1d172b;
    padding: 10px 10px;
    font-size: 14px;
    color: #ddd;
    line-height: 1.6;
}

/* Background Styling */
.things__area {
       background-image: radial-gradient(circle at center in hsl shorter hue, rgb(36, 39, 92), rgb(5, 3, 31));
       /* background: linear-gradient(90deg, #d15454, #fa5e6f, #b466a4, #4a82bd, #24a1a5, #40bdab); */

   width: 100%;
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
 
}

/* Wrapper Styling */
.things__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    color: #fff;
}

/* Icon Styling */
.things__message-icon img {
    width: 80px;
    margin-right: 15px;
}

/* Text Content */
.things__message {
    display: flex;
    align-items: center;
}

.things__message-text .title {
    font-size: 32px;
    font-weight: 700;
}

.things__message-text .dec {
    font-size: 18px;
    color: #ddd;
}

/* Button Styling */
.rr-btn {
    background: linear-gradient(90deg, #6d6fdc,  #649fd7 );
    padding: 12px 20px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    transition: 0.3s;
}

.rr-btn:hover {
    background: linear-gradient(90deg,   #649fd7, #6d6fdc );

}

.rr-btn i {
    margin-left: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .things__wrapper {
        flex-direction: column;
        text-align: center;
    }

    .things__message {
        flex-direction: column;
    }

    .things__message-icon img {
        margin-bottom: 10px;
    }

    .rr-btn {
        margin-top: 15px;
    }
}

/* Service Section */
/* Service Section */
.service-section{
    position: relative;
    overflow: hidden;
}
.service-box {
    background:#1c1a22;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
    position: relative;
    overflow: visible; 
    height:100%;
    border: 1px solid #fff;
}


/* Hover effect */
.service-box:hover {
    border-color: #ff007f; /* Change to a new color on hover */
    animation: borderAnimation 1s ease-in-out infinite; /* Animation for smooth border color change */
}

/* Border color animation (optional, if you want multiple color changes) */
@keyframes borderAnimation {
    0% {
        border-color: #d15454;
    }
    25% {
        border-color: #fa5e6f;
    }
    50% {
        border-color: #b466a4;
    }
    75% {
        border-color: #4a82bd;
    }
    100% {
        border-color: #24a1a5;
    }
}


.rocket {
    position: absolute;
    bottom: 20px;  /* Start from the bottom-right */
    right: 20px;   /* Start from the right */
    width: 150px;   /* Adjust rocket size */
    animation: fly 10s linear infinite;
}
@media (max-width: 768px) {
.rocket {
    display: none;
}
}

/* Keyframes for moving the rocket */
@keyframes fly {
    0% {
      bottom: 0;
      left: 0;
      transform: rotate(0deg);
    }
    25% {
      bottom: 100%;
      left: 100%;
      transform: rotate(0deg);
    }
    50% {
        bottom: 100%;
        left: 100%;
        transform: rotate(180deg);
      }
  
    100% {
      bottom: 0;
      left: 0;
      transform: rotate(180deg);
    }
  }

.service-icon {
    position: absolute;
    top: -70px; /* Adjust to center the image */
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    z-index: 10; /* Ensures it stays above the card */
}

.service-icon img {
    width: 130px;
    height:100%;
  
}





/* Service Content */
.service-content {
    padding-top: 40px;
}

.service-box h3 {
    font-size: 20px;
    font-weight:500;
    margin-bottom: 10px;
    color:white;
    margin-top: 50px;
}

.service-box p {
    font-size: 15px;
    color: #dbd9d9;
    margin-bottom: 20px;
    text-align: justify;
    margin-top: 30px;
}

/* Button Styling */
.learn-btn {
    background: linear-gradient(90deg, #6d6fdc,  #649fd7 );
    color: #fff;
    padding: 8px 10px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    transition: 0.3s;
    font-size: 12px;
}

.learn-btn:hover {
    background: linear-gradient(90deg, #649fd7,#6d6fdc );

}

/* Responsive */
@media (max-width: 768px) {
    .service-box {
        padding: 20px;
    }
}
/* Main Section Styles */
.why-choose-us1 {
    overflow: visible;
    width: 100%;
    background-image: radial-gradient(circle at center, rgb(32, 1, 36), black);
    padding: 10px 0 50px; /* Extra padding for stacking space */
    position: relative;
    z-index: 1;
}

/* Heading Styles */
.why-choose-us1 h2 {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 700;
    text-transform: capitalize;
}

/* Description Text */
.why-choose-us1 p {
    color: rgba(148, 147, 147, 0.9);
    font-size: 1.1rem;
 font-size: 15px;
    margin: 0 auto ;
    text-align: center;
    line-height: 1.6;
}

/* Cards Container */
.cards-container1 {
    position: relative;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    perspective: 1000px;
}

/* Individual Card Styles */
.cards-container1 .card {
    width: 90%;
    max-width: 1000px;
    background-image: radial-gradient(circle at center, rgb(56, 1, 61), rgb(20, 0, 22));
    color: white;
    border-radius: 15px;
    overflow: hidden;
   
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: sticky;
    top: 120px;
    margin-bottom: -30px;
    z-index: 1;
    opacity: 0.95;
    transform-origin: center top;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Card Stacking Order */
.cards-container1 .card:nth-child(1) { z-index: -5; }
.cards-container1 .card:nth-child(2) { z-index: -4; }
.cards-container1 .card:nth-child(3) { z-index: -3; }
.cards-container1 .card:nth-child(4) { z-index: -2; }
.cards-container1 .card:nth-child(5) { z-index: -1; }

/* Active Card State */
.cards-container1 .card.active {
    opacity: 1;
    transform: scale(1) translateY(0);
  
}

/* Inactive Card State */
.cards-container1 .card:not(.active) {
    transform: scale(0.92) translateY(30px);
}

/* Card Image Styles */
.cards-container1 .card img {
    width: 100%;
    height: 270px;
    object-fit: contain;
    padding: 20px;
    transition: transform 0.5s ease;
}

/* Card Content Styles */
.cards-container1 .card h5 {
    color: white;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.cards-container1 .card p {
    color: rgba(175, 174, 174, 0.9);
    font-size: 1.1rem;
    text-align: left;
    margin-bottom: 0;
    line-height: 1.6;
}

.cards-container1 .card-body {
    padding: 2rem;
}

/* Hover Effects */
.cards-container1 .card:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

.cards-container1 .card:hover img {
    transform: scale(1.05);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .why-choose-us1 {
        padding: 40px 0 100px;
    }
    
    .why-choose-us1 h2 {
        font-size: 2rem;
    }
    
    .why-choose-us1 p {
        font-size: 1rem;
        padding: 0 20px;
    }
    
    .cards-container1 {
        min-height: auto;
        gap: 30px;
    }
    
    .cards-container1 .card {
        position: static;
        width: 95%;
        margin-bottom: 0;
        opacity: 1;
        transform: none !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    
    .cards-container1 .card .row {
        flex-direction: column;
    }
    
    .cards-container1 .card img {
        height: 200px;
        padding: 15px;
    }
    
    .cards-container1 .card-body {
        padding: 1.5rem;
        text-align: center;
    }
    
    .cards-container1 .card h5 {
        font-size: 1.5rem;
        text-align: center;
    }
    
    .cards-container1 .card p {
        text-align: center;
        font-size: 1rem;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .cards-container1 .card {
        width: 100%;
        border-radius: 10px;
    }
    
    .cards-container1 .card img {
        height: 180px;
        padding: 10px;
    }
    
    .cards-container1 .card h5 {
        font-size: 1.3rem;
    }
}

/* footer */
.footer {
    background-color: #111;
    color: #fff;
    padding: 30px 0;
}
.footer a {
    color: #fff;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
.footer-logo img {
    max-width: 250px; /* Adjust size */
    height: auto;
}
.contact-info i {
    color: #fff;
    margin-right: 10px;
}
.contact-info p {
    margin: 5px 0;
    color:white;
}
.contact-info {
    text-align: left; /* Ensures left alignment */
}

.contact-info p {
    margin-bottom: 10px; /* Adds space between paragraphs */
    display: flex;
    align-items: center; /* Aligns icons properly */
    gap: 8px; /* Adds space between icon and text */
}

.contact-info i {
    min-width: 20px; 
}

footer .location{
    text-align: justify !important;
}
@media (max-width: 768px) {
    footer .location{
        text-align: left !important;
    }
}

.social-icons a {
    color: #fff;
    font-size: 20px;
    margin: 0 10px;
    transition: 0.3s;
}
.social-icons a:hover {
    background: linear-gradient(90deg,#d15454, #4a82bd,#24a1a5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.copyright{
    font-size: 20px !important;
    font-weight: bold;
    background: linear-gradient(90deg,#f4f809,#f4f809, #ff7a18, #df55b5,#049edbc9, #13963a, #038a61,#045301);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 768px) {
.copyright{
    font-size: 12px;
    margin-top: 50px !important;

}

}
.conatct-page-section{
    background-image: radial-gradient(circle at left in hsl shorter hue, rgb(56, 1, 61), black);
}
.form-container {
    background: transparent;
    padding: 20px;
}
.form-control, .form-select {
    background-color: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 12px;
}
.form-select option {
    background-color:black;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.6);
}
.form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}
.form-control:focus, .form-select:focus, .form-control:hover, .form-select:hover,.form-select .option:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    outline: none;
}

.form-container .btn-custom {
    background: linear-gradient(90deg, #c770ba, #645ab9);
    color: white;
    border: none;
    padding: 12px 24px;
    font-weight: bold;
    text-transform: uppercase;
}
.form-container .btn-custom:hover {
    background: linear-gradient(90deg, #645ab9,#c770ba,);
}
.input-group {
    display: flex;
    gap: 10px;
}
.message-box {
    height: 150px;
}
.conatct-page-section img{
    width:300px;
}



/* digital-marketing-page */
/* Section Styling */
.why-choose-section {
    background-image: radial-gradient(circle at center in hsl shorter hue, rgb(36, 39, 92), black);
    padding: 80px 0;
    color: #fff;
    text-align: center;
}

.why-choose-section h2 {
    font-size: 30px;
    font-weight: bold;
    height:100%;
}

.why-choose-section p {
    font-size: 17px;
    margin-bottom: 30px;
    color:rgb(167, 166, 166);
}

/* Cards Container */
.why-choose-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* General Card Styling */
.why-choose-card {
    background: rgb(31, 31, 41),;
    padding: 20px;
    width: 23%; /* Ensures 4 cards in a row */
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.1);
}

.why-choose-card:hover {
    background: linear-gradient(90deg, #6d6fdc,  #0d1520 );

    color: #fff;
    transform: translateY(-10px);
}

.why-choose-card i {
    font-size: 20px;
    color: #fff;
    background: linear-gradient(90deg, #6d6fdc,  #649fd7 );

    padding: 20px;
    border-radius: 50%;
    margin-bottom: 15px;
    transition: 0.3s;
}

.why-choose-card:hover i {
color:#6d6fdc;
    background: white;

}

.why-choose-card h4 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.why-choose-card p {
    font-size: 16px;
    color: #ccc;
}

/* Responsive Design */
@media (max-width: 992px) {
    .why-choose-card {
        width: 45%;
    }
}
@media (max-width: 768px) {
    .why-choose-card {
        width: 100%;
    }
}
.testimonial-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 50px;
    background-image: radial-gradient(circle at right in hsl shorter hue, rgb(56, 1, 61), black);

}

.testimonial-content {
    width: 60%;
    color: #fff; /* Set default text color to white */
}

.testimonial-content h3 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 32px;
}

.testimonial-content p {
    margin-bottom: 30px;
    text-align: center;
    color: #f0efef;
    font-size: 16px;
}

#testimonialCarousel {
    position: relative;
}

.carousel-inner {
    overflow: hidden;
}

.carousel-item {
    display: none;
    transition: transform 0.6s ease-in-out;
}

.carousel-item.active {
    display: block;
}

.testimonial-card {
    background-image: radial-gradient(circle at left in hsl shorter hue, rgb(56, 1, 61), black);

    padding: 30px; /* Increased padding */
    border-radius: 10px;
    text-align: center;
    color: white;
    min-height: 250px; /* Increased min-height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonial-card img {
    width: 100px; /* Increased image size */
    height: 100px;
    border-radius: 50%;
    margin: 15px auto; /* Increased margin */
    object-fit: cover; /* Ensure image fills the circle */
}

.testimonial-card h6 {
    margin-top: 10px;
    font-size: 1.1rem;
    color: #ddd;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: -50px; /* Adjust position as needed */
    left: 0;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
    z-index: 1;
}

.carousel-indicators button {
    position: relative !important;
    width: 5px !important; /* Increased dot size */
    height:5px !important; /* Increased dot size */
    margin: 0 5px !important; /* Added spacing between dots */
    padding: 0 !important;
    cursor: pointer !important;
    background-color:white !important; /* Semi-transparent white */
    border: 0 !important;
    border-radius: 50% !important;
    transition: opacity 0.6s ease !important;
    opacity: 0.5 !important;
}

.carousel-indicators button.active {
    opacity: 1 !important;
    background-color: #fff !important; /* Solid white for active dot */
}

.testimonial-image {
    width: 40%;
    text-align: center;
}

.testimonial-image img {
    max-width: 80%;
    height: auto;
    border-radius: 10px; /* Optional: add some rounding to the image */
}
.testimonial-wrapper{
    display:flex;
    justify-content: center;
  
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .testimonial-section {
        flex-direction: column;
        padding: 30px;
    }
    .testimonial-content {
        width: 90%;
        margin-bottom: 40px;
    }
    .testimonial-image {
        width: 70%;
    }
    .carousel-indicators {
        bottom: -30px;
    }
}

@media (max-width: 768px) {
    .testimonial-content h3 {
        font-size: 1.5rem;
    }
    .testimonial-content p {
        font-size: 1rem;
    }
    .testimonial-card p {
        font-size: 0.9rem;
    }
    .testimonial-image {
        width: 90%;
    }
    .carousel-indicators {
        bottom: -20px;
    }
    .carousel-indicators button {
        width: 10px;
        height: 10px;
        margin: 0 3px;
    }
}

/* Background and section styling */
.privacy-section {
    background-color: #090a16;
    color: #fff;
    padding: 80px 0;
    width:100%;
    overflow: hidden;
}

.privacy-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
}

.privacy-text p {
    font-size: 17px;
    margin: 20px 0;
    color: #ddd;
}

.privacy-btn {
    display: inline-block;
    padding: 12px 25px;
    background: linear-gradient(90deg, #420252, #884aec);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    transition: 0.3s;
    border: none;
}

.privacy-btn:hover {
    background: linear-gradient(90deg,  #884aec, #420252);

    color: #fff;
}

/* Feature list */
.privacy-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.privacy-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.privacy-item:hover {
    transform: scale(1.05);
    border: 0.2px solid #a10ac7;
}

.privacy-item img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.privacy-item h4 {
    font-size: 1rem;
    margin: 0;
}



/* Responsive Design */
@media (max-width: 992px) {
    .privacy-features {
        grid-template-columns: 1fr;
    }
}

/* ...................digital-marketing-page .................*/
.digital-banner {
    min-height: 50vh;
    display: flex;
    align-items: center;
    padding: 10px 0px 0px 80px;
    width:100%;
    overflow: hidden;
    background: linear-gradient(to bottom, #080808, #2c0f48);
    position: relative;

  }

  .digital-banner h5 {
    font-size: 14px;
    background: #2e2453;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 15px;
    color: #f0c93d;
  }

  .digital-banner h1 {
    font-weight: 700;
    font-size: 42px;
    margin-bottom: 20px;
    color:white;
  }

  .digital-banner p {
    font-size: 16px;
    color: #bbb;
    max-width: 500px;
  }

  .digital-banner .btn-purple {
    background: linear-gradient(90deg, #420252, #884aec);
    border: none;
    padding: 10px 22px;
    color: white;
    border-radius: 8px;
    margin-top: 25px;
  }
  .digital-banner .btn-purple:hover {
    background: linear-gradient(90deg, #884aec, #420252);
    color:white;

  }


  .digital-banner .banner-img {
    max-width: 100%;
    height: auto;
  }

  @media (max-width: 768px) {
 
    .digital-banner  h1 {
      font-size: 25px !important;
      width:100%;
    }
    .digital-banner  p {
        font-size: 18px !important;
        width:100%;
        text-align: left;
      }

    .digital-banner {
      padding: 60px 0px 0px 20px;

    }
  

    .digital-banner .banner .col-md-6 {
      margin-bottom: 30px;
    }
  }
/* why-choose-us1-page-digital */
.custom-choose-us {
    background-color: #090a16;
    color: white;
    padding: 50px 20px;
    text-align: center;
   
  }

  .custom-heading .custom-btn {
    background-color: transparent;
    color: white;
    padding: 8px 16px;

    border-radius: 20px;
    margin-bottom: 20px;
    border:0.2px solid white;
  }

  .custom-heading h2 {
    font-size: 2.5rem;
    margin: 10px 0;
  }

  .custom-heading .custom-highlight {
    background: linear-gradient(to right, #7b227e, #723aa7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
  }

  .custom-heading p {
    color: #ccc;
    max-width: 600px;
    margin: 0 auto 40px;
  }

  .custom-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    position: relative;
  }

  .custom-left,
  .custom-right {
    display: flex;
    flex-direction: column;
    gap: 140px;
  }

  .custom-item {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 300px;
  }
  .custom-item .item1 h4{
text-align: right;
  }
  .custom-item .item1 p{
    text-align: right;
      }
      .custom-left{
        margin-left: -30px;
      }
      @media (max-width: 768px) {
        .custom-item .item1 h4{
            text-align: center;
              }
              .custom-item .item1 p{
                text-align: center;
                  }
                  .custom-left{
                    margin-left: 0px !important;
                  }
      }
  .custom-item .custom-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(to right, #df54e4, #723aa7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: black;
    flex-shrink: 0;
  }

  .custom-item h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
  }

  .custom-item p {
    margin: 0;
    font-size: 0.9rem;
    text-align: left;
    color: #ccc;
  }

  .custom-center img {
    max-height: 400px;
    width: 100%;
    object-fit: contain;
    z-index: 10;
    position: relative;
  }

  /* Arrows */
  .custom-arrow {
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 1;
  }

  .custom-line {
    position: absolute;
    border-top: 1px dotted #838283;
  }

  .arrow-left .horizontal {
    width: 100px;
    height: 0;
    top: 50%;
    left: 70px;
  }

  .arrow-right .horizontal {
    width: 100px;
    height: 0;
    top: 50%;
    left: 70px;
  }

  .arrow-left .diagonal {
    width: 70px;
    height: 0;
    top: 50%;
    left: 170px;
    transform-origin: left center;
  }

  .arrow-right .diagonal {
    width: 70px;
    height: 0;
    top: 100%;
    left: 20px;
    transform-origin: left center;
  }

  .diagonal-tl {
    transform: rotate(45deg);
  }

  .diagonal-tr {
    transform: rotate(-45deg);
  }

  .diagonal-bl {
    transform: rotate(45deg);
  }

  .diagonal-br {
    transform: rotate(-45deg);
  }

  .arrow-1 {
    top: 35%;
    left: 35%;
    transform: translate(-100%, -100%);
  }

  .arrow-2 {
    top: 90%;
    left: 35%;
    transform: translate(-100%, -100%);
  }

  .arrow-3 {
    top: 35%;
    left: 52%;
    transform: translate(0%, -100%);
  }

  .arrow-4 {
    top: 90%;
    left: 52%;
    transform: translate(0%, -100%);
  }

  @media (max-width: 768px) {
    .custom-wrapper {
      flex-direction: column;
      align-items: center;
    }

    .custom-left,
    .custom-right {
      gap: 40px;
      align-items: center;
    }

    .custom-item {
      flex-direction: column;
      text-align: center;
      max-width: 100%;
    }

    .custom-item h4,
    .custom-item p {
      text-align: center;
    }

    .custom-arrow {
      display: none;
    }

    .custom-center img {
      max-height: 250px;
    }
  }
/* progress-bar */
.progress-bar-section{
    background: linear-gradient(to bottom, #080808, #2c0f48);
    width:100%;
    overflow: hidden;
}
.progress {
    height: 35px;
    border-radius: 50px;
  }

  .progress-bar {
    animation: loadProgress 2s ease-in-out forwards;
    background: linear-gradient(to right, #4a1f72, #723aa7);
  }

  @keyframes loadProgress {
    0% { width: 0; }
  }

  .circle-graphic {
    position: relative;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 1 / 1;
    margin: auto;
    /* border-radius: 50%; */
    background-image: url('/assets/images/seo.webp') !important;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  


  }

   
  
  /* Centered chart image */
  .circle-graphic .main-img {
    position: absolute;
    width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  
  /* Floating emoji-style icons */
  .float-img {
    position: absolute;
    width: 80px;
    z-index: 3;
  }
  
  .img1 {
    top: 50%;
    left: 0%;
    width:150px;
  }
  
  .img2 {
    bottom: 50%;
    right: 7%;
    width:140px;

  }
@media (max-width: 768px) {
    .circle-graphic .main-img {
        position: absolute;
        width: 150px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
      }

    .img1 {
        top: 50%;
        left: 0%;
        width:100px;
      }
      
      .img2 {
        bottom: 50%;
        right: 7%;
        width:100px;
    
      }
}