* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   :root {
       --white-color: #ffffff;
       --black-color: #000000;
       --main-color: #E00243;
       --secondary-color: #F8D553;
       --text-color: #64748b;
   }

   body {
       font-family: 'Poppins', sans-serif;
       background-color: var(--white-color);
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       color: var(--black-color);
       font-weight: 700;
   }

   /* Navbar improvements */
   .navbar {
       transition: background-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
   }

   .sticky-top {
       backdrop-filter: saturate(180%) blur(8px);
       -webkit-backdrop-filter: saturate(180%) blur(8px);
   }

   .navbar-brand img {
       height: 40px;
       width: auto;
   }

   .navbar-nav .nav-link {
       position: relative;
       font-weight: 500;
       color: var(--text-color);
       padding: .5rem .75rem;
   }

   .navbar-nav .nav-link:hover,
   .navbar-nav .nav-link:focus {
       color: var(--main-color);
   }

   .navbar-nav .nav-link.active {
       color: var(--main-color);
   }

   .navbar-nav .nav-link::after {
       content: "";
       position: absolute;
       left: .5rem;
       right: .5rem;
       bottom: 0.25rem;
       height: 2px;
       background-color: var(--main-color);
       transform: scaleX(0);
       transform-origin: left;
       transition: transform .2s ease;
   }

   .navbar-nav .nav-link:hover::after,
   .navbar-nav .nav-link:focus::after,
   .navbar-nav .nav-link.active::after {
       transform: scaleX(1);
   }

   /* Custom Platform Dropdown */
   .platform-dropdown {
       min-width: 900px;
       padding: 20px;
       border: none;
       border-radius: 12px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
       margin-top: 20px !important;
   }

   .platform-grid {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 15px;
       margin-bottom: 0;
   }

   .platform-item {
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 15px 10px;
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       text-decoration: none;
       color: var(--text-color);
       font-weight: 500;
       font-size: 14px;
       transition: all 0.3s ease;
       background-color: #fff;
       min-height: 70px;
   }

   .platform-item:hover {
       border-color: var(--main-color);
       color: var(--main-color);
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(224, 2, 67, 0.2);
       text-decoration: none;
   }

   .platform-item i {
       font-size: 20px;
       margin-right: 8px;
   }

   /* Platform specific colors */
   .platform-item.instagram:hover {
       border-color: #E4405F;
       color: #E4405F;
   }

   .platform-item.facebook:hover {
       border-color: #1877F2;
       color: #1877F2;
   }

   .platform-item.youtube:hover {
       border-color: #FF0000;
       color: #FF0000;
   }

   .platform-item.linkedin:hover {
       border-color: #0A66C2;
       color: #0A66C2;
   }

   .platform-item.telegram:hover {
       border-color: #0088CC;
       color: #0088CC;
   }

   /* Button theming */
   .btn-primary {
       --bs-btn-color: #fff;
       --bs-btn-bg: var(--main-color);
       --bs-btn-border-color: var(--main-color);
       --bs-btn-hover-bg: #c0023d;
       --bs-btn-hover-border-color: #c0023d;
       --bs-btn-active-bg: #a70134;
       --bs-btn-active-border-color: #a70134;
       --bs-btn-disabled-bg: var(--main-color);
       --bs-btn-disabled-border-color: var(--main-color);
   }

   .btn-outline-primary {
       --bs-btn-color: var(--main-color);
       --bs-btn-border-color: var(--main-color);
       --bs-btn-hover-color: #fff;
       --bs-btn-hover-bg: var(--main-color);
       --bs-btn-hover-border-color: var(--main-color);
       --bs-btn-active-bg: #a70134;
       --bs-btn-active-border-color: #a70134;
   }

   /* Focus styles */
   .navbar .nav-link:focus-visible,
   .btn:focus-visible {
       outline: 2px solid var(--secondary-color);
       outline-offset: 2px;
       box-shadow: none;
   }

   /* Logo styling */
   .navbar-brand {
       font-weight: 700;
       color: var(--black-color);
       font-size: 1.5rem;
   }

   .logo-text {
       color: var(--main-color);
       background-color: var(--main-color);
       color: white;
       padding: 4px 8px;
       border-radius: 4px;
       font-size: 1rem;
       margin-left: 5px;
   }

   /* Solutions Dropdown Styles */
   .solutions-dropdown-menu {
       min-width: 1000px;
       padding: 20px;
       border: none;
       border-radius: 12px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
       margin-top: 20px !important;
   }

   .solutions-content {
       display: flex;
       flex-direction: column;
       gap: 20px;
   }

   .solutions-section .solutions-row {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 15px;
       margin-bottom: 15px;
   }

   .solution-item {
       padding: 12px 15px;
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       text-decoration: none;
       color: var(--text-color);
       font-size: 14px;
       font-weight: 500;
       text-align: center;
       transition: all 0.3s ease;
       background-color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 50px;
   }

   .solution-item:hover {
       border-color: var(--main-color);
       color: var(--main-color);
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(224, 2, 67, 0.2);
       text-decoration: none;
   }



   .section-title {
       color: var(--main-color);
       font-size: 18px;
       font-weight: 600;
       margin-bottom: 15px;
   }

   .industry-row {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 15px;
   }

   .industry-item {
       padding: 12px 15px;
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       text-decoration: none;
       color: var(--text-color);
       font-size: 14px;
       font-weight: 500;
       text-align: center;
       transition: all 0.3s ease;
       background-color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 50px;
   }

   .industry-item:hover {
       border-color: var(--main-color);
       color: var(--main-color);
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(224, 2, 67, 0.2);
       text-decoration: none;
   }

   /* Locations Dropdown Styles */
   .locations-dropdown-menu {
       min-width: 1000px;
       padding: 20px;
       border: none;
       border-radius: 12px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
       margin-top: 20px !important;
   }

   .locations-content {
       display: flex;
       flex-direction: column;
       gap: 20px;
   }

   .locations-main-row {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 15px;
       margin-bottom: 20px;
   }

   .location-state {
       padding: 12px 15px;
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       text-decoration: none;
       color: var(--text-color);
       font-size: 14px;
       font-weight: 600;
       text-align: center;
       transition: all 0.3s ease;
       background-color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 50px;
   }

   .location-state:hover,
   .location-state.active {
       border-color: var(--main-color);
       color: var(--main-color);
       text-decoration: none;
   }

   .location-state.active::after {
       content: '';
       position: absolute;
       bottom: -15px;
       left: 50%;
       transform: translateX(-50%);
       width: 0;
       height: 0;
       border-left: 8px solid transparent;
       border-right: 8px solid transparent;
       border-top: 8px solid var(--main-color);
   }

   .location-state.active {
       position: relative;
   }

   .locations-cities {
       display: flex;
       flex-direction: column;
       gap: 12px;
   }

   .cities-row {
       display: grid;
       grid-template-columns: repeat(8, 1fr);
       gap: 12px;
   }

   .city-item {
       padding: 10px 12px;
       border: 1px solid #e2e8f0;
       border-radius: 6px;
       text-decoration: none;
       color: var(--text-color);
       font-size: 13px;
       font-weight: 500;
       text-align: center;
       transition: all 0.3s ease;
       background-color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 40px;
   }

   .city-item:hover {
       border-color: var(--main-color);
       color: var(--main-color);
       transform: translateY(-1px);
       box-shadow: 0 3px 10px rgba(224, 2, 67, 0.2);
       text-decoration: none;
   }

   /* Resources Dropdown Styles */
   .resources-dropdown-menu {
       min-width: 400px;
       padding: 20px;
       border: none;
       border-radius: 12px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
       margin-top: 20px !important;
   }

   .resources-content {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 15px;
   }

   .resource-item {
       padding: 15px 20px;
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       text-decoration: none;
       color: var(--text-color);
       font-size: 14px;
       font-weight: 600;
       text-align: center;
       transition: all 0.3s ease;
       background-color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 60px;
   }

   .resource-item:hover {
       border-color: var(--main-color);
       color: var(--main-color);
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(224, 2, 67, 0.2);
       text-decoration: none;
   }

   /* Company Dropdown Styles */
   .company-dropdown-menu {
       min-width: 400px;
       padding: 20px;
       border: none;
       border-radius: 12px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
       margin-top: 20px !important;
   }

   .company-content {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 15px;
   }

   .company-item {
       padding: 15px 20px;
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       text-decoration: none;
       color: var(--text-color);
       font-size: 14px;
       font-weight: 600;
       text-align: center;
       transition: all 0.3s ease;
       background-color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 60px;
   }

   .company-item:hover {
       border-color: var(--main-color);
       color: var(--main-color);
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(224, 2, 67, 0.2);
       text-decoration: none;
   }

   /* Services Dropdown Styles */
   .services-dropdown-menu {
       min-width: 1200px;
       padding: 20px;
       border: none;
       border-radius: 12px;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
       margin-top: 20px !important;
   }

   .services-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 15px;
   }


   

   .service-content {
       text-align: left;
   }

   .platform-name {
       display: block;
       font-weight: 600;
       font-size: 16px;
       margin-bottom: 15px;
       color: var(--black-color);
   }

   .service-types {
       /* display: flex; */
       flex-direction: column;
       gap: 8px;
   }
   .services-column{
      padding: 20px 15px;
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       text-decoration: none;
   }
   .service-type {
       display: block;
       padding: 8px 12px;
       border: 1px solid #e2e8f0;
       border-radius: 6px;
       font-size: 12px;
       font-weight: 500;
       background-color: #f8fafc;
       transition: all 0.2s ease;
       margin-bottom: 5px;
       text-decoration: none;
       color: var(--main-color);
   }

   .service-platform-item:hover .service-type {
       border-color: var(--main-color);
       background-color: rgba(224, 2, 67, 0.05);
   }

   /* Platform specific colors for services */
   .service-platform-item:hover .platform-name {
       color: var(--main-color);
   }

   .services-column:nth-child(1) .service-platform-item:hover i,
   .services-column:nth-child(1) .service-platform-item:hover .platform-name {
       color: #E4405F;
   }

   .services-column:nth-child(2) .service-platform-item:hover i,
   .services-column:nth-child(2) .service-platform-item:hover .platform-name {
       color: #1877F2;
   }

   .services-column:nth-child(3) .service-platform-item:hover i,
   .services-column:nth-child(3) .service-platform-item:hover .platform-name {
       color: #FF0000;
   }

   .services-column:nth-child(4) .service-platform-item:hover i,
   .services-column:nth-child(4) .service-platform-item:hover .platform-name {
       color: #0A66C2;
   }

   .services-column:nth-child(5) .service-platform-item:hover i,
   .services-column:nth-child(5) .service-platform-item:hover .platform-name {
       color: #0088CC;
   }

   /* Responsive adjustments */

   @media (min-width: 992px) {
       .platform-dropdown {
           position: absolute;
           top: 100% !important;
           left: 300px !important;
           right: auto !important;
           transform: translateX(-50%) !important;
       }

       .services-dropdown-menu {
           position: absolute;
           top: 100% !important;
           left: 240px !important;
           right: auto !important;
           transform: translateX(-50%) !important;
       }

       .solutions-dropdown-menu {
           position: absolute;
           top: 100% !important;
           left: 50% !important;
           right: auto !important;
           transform: translateX(-50%) !important;
       }

       .locations-dropdown-menu {
           position: absolute;
           top: 100% !important;
           left: 50% !important;
           right: auto !important;
           transform: translateX(-50%) !important;
       }

       .resources-dropdown-menu {
           position: absolute;
           top: 100% !important;
           left: 50% !important;
           right: auto !important;
           transform: translateX(-50%) !important;
       }

       .company-dropdown-menu {
           position: absolute;
           top: 100% !important;
           left: 50% !important;
           right: auto !important;
           transform: translateX(-50%) !important;
       }
   }

   @media (max-width: 768px) {
       .platform-dropdown {
           min-width: 90vw;
           padding: 15px;
       }

       .platform-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 10px;
       }

       .platform-item {
           padding: 12px 8px;
           font-size: 12px;
           min-height: 60px;
       }

       .platform-item i {
           font-size: 16px;
           margin-right: 6px;
       }

       /* Services dropdown responsive */
       .services-dropdown-menu {
           min-width: 90vw;
           padding: 15px;
       }

       .services-grid {
           grid-template-columns: repeat(3, 1fr);
           gap: 10px;
       }

       .service-platform-item {
           padding: 15px 10px;
           min-height: 160px;
       }

       .service-platform-item i {
           font-size: 20px;
           margin-bottom: 10px;
       }

       .platform-name {
           font-size: 14px;
           margin-bottom: 10px;
       }

       .service-type {
           padding: 6px 8px;
           font-size: 11px;
       }

       /* Solutions dropdown responsive */
       .solutions-dropdown-menu {
           min-width: 90vw;
           padding: 15px;
       }

       .solutions-section .solutions-row {
           grid-template-columns: repeat(2, 1fr);
           gap: 10px;
       }

       .industry-row {
           grid-template-columns: repeat(2, 1fr);
           gap: 10px;
       }

       .solution-item,
       .industry-item {
           padding: 10px 12px;
           font-size: 12px;
           min-height: 40px;
       }

       /* Locations dropdown responsive */
       .locations-dropdown-menu {
           min-width: 90vw;
           padding: 15px;
       }

       .locations-main-row {
           grid-template-columns: repeat(2, 1fr);
           gap: 10px;
       }

       .cities-row {
           grid-template-columns: repeat(3, 1fr);
           gap: 8px;
       }

       .location-state {
           padding: 10px 12px;
           font-size: 12px;
           min-height: 40px;
       }

       .city-item {
           padding: 8px 10px;
           font-size: 11px;
           min-height: 35px;
       }

       /* Resources dropdown responsive */
       .resources-dropdown-menu {
           min-width: 90vw;
           padding: 15px;
       }

       .resources-content {
           grid-template-columns: repeat(1, 1fr);
           gap: 10px;
       }

       .resource-item {
           padding: 12px 15px;
           font-size: 12px;
           min-height: 50px;
       }

       /* Company dropdown responsive */
       .company-dropdown-menu {
           min-width: 90vw;
           padding: 15px;
       }

       .company-content {
           grid-template-columns: repeat(1, 1fr);
           gap: 10px;
       }

       .company-item {
           padding: 12px 15px;
           font-size: 12px;
           min-height: 50px;
       }
   }

   ;


   /* Services dropdown responsive */
   .services-dropdown-menu {
       min-width: 90vw;
       padding: 15px;
   }

   .services-grid {
       grid-template-columns: repeat(3, 1fr);
       gap: 10px;
   }

   .service-platform-item {
       padding: 15px 10px;
       min-height: 160px;
   }

   .service-platform-item i {
       font-size: 20px;
       margin-bottom: 10px;
   }

   .platform-name {
       font-size: 14px;
       margin-bottom: 10px;
   }

   .service-type {
       padding: 15px 12px;
       font-size: 14px;
   }


   /* --------------------hero section start here----------------  */
   .hero-section {
       padding: 60px 20px;
       max-width: 1400px;
       margin: 0 auto;
   }
   .banner-media{
    height: 750px;
    object-fit: cover;
}

   .main-title {
       font-size: 42px;
       font-weight: 900;
       line-height: 1.2;
       margin-bottom: 24px;
       text-transform: uppercase;
       letter-spacing: -1px;
   }

   .hero-section .highlight {
       color: #ff0066;
       font-weight: 700 !important;
   }

    .hero-section .subtitle {
       text-align: center;
       font-size: 16px;
       line-height: 1.6;
       margin-bottom: 50px;
       color: #303030;
       /* max-width: 900px; */
   }

   .services-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 0;
       margin-top: 40px;
   }

   .service-card {
       position: relative;
       padding: 40px 30px;
       min-height: 400px;
       display: flex;
       flex-direction: column;
       overflow: hidden;
   }

   .service-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-size: cover;
       background-position: center;
       opacity: 0.3;
       z-index: 0;
   }

   .service-card>* {
       position: relative;
       z-index: 1;
   }

   .creator {
       background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%);
   }

   .creator::before {
       background-image: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&h=400&fit=crop');
   }

   .content-ideation {
       background: linear-gradient(135deg, #e91e63 0%, #ff0066 100%);
   }

   .distribution {
       background: linear-gradient(135deg, #424242 0%, #303030 100%);
   }

   .distribution::before {
       background-image: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400&h=400&fit=crop');
   }

   .measurement {
       background: linear-gradient(135deg, #d81b60 0%, #ff0066 100%);
   }

   .service-title {
       font-size: 28px;
       font-weight: 900;
       text-transform: uppercase;
       margin-bottom: 20px;
       line-height: 1.1;
       letter-spacing: -0.5px;
   }

   .service-description {
       font-size: 14px;
       line-height: 1.6;
       color: rgba(255, 255, 255, 0.95);
       /* margin-top: auto; */
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .animate-fade-in {
       animation: fadeIn 0.8s ease-out forwards;
   }

   .stagger-animation .service-card:nth-child(1) {
       animation: fadeIn 0.8s ease-out 0.1s forwards;
       opacity: 0;
   }

   .stagger-animation .service-card:nth-child(2) {
       animation: fadeIn 0.8s ease-out 0.2s forwards;
       opacity: 0;
   }

   .stagger-animation .service-card:nth-child(3) {
       animation: fadeIn 0.8s ease-out 0.3s forwards;
       opacity: 0;
   }

   .stagger-animation .service-card:nth-child(4) {
       animation: fadeIn 0.8s ease-out 0.4s forwards;
       opacity: 0;
   }

   @media (max-width: 1200px) {
       .services-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   @media (max-width: 768px) {
       .main-title {
           font-size: 32px;
       }

       .services-grid {
           grid-template-columns: 1fr;
       }

       .service-card {
           min-height: 300px;
           padding: 30px 25px;
       }

       .service-title {
           font-size: 24px;
       }
   }

   /* ================feature list start here================== */
   .feature-section {
       padding: 60px 0;
   }
    .feature-section .main-title {
       font-size: 2rem;
       font-weight: 700;
       color: #2c3e50;
       text-align: center;
       margin-bottom: 5rem;
       line-height: 1.2;
   }

   .feature-title {
       font-size: 2.5rem;
       font-weight: 700;
       color: #2c3e50;
       margin-bottom: 2rem;
       line-height: 1.2;
   }

   .highlight-text {
       color: #ff6b6b;
   }

   .feature-description {
       color: #6c757d;
       font-size: 1rem;
       line-height: 1.7;
       margin-bottom: 2.5rem;
   }

   .explore-btn {
       background-color: #dc3545;
       border: none;
       color: white;
       padding: 12px 30px;
       font-size: 1rem;
       font-weight: 600;
       border-radius: 6px;
       text-decoration: none;
       display: inline-block;
       transition: all 0.3s ease;
   }

   .explore-btn:hover {
       background-color: #c82333;
       color: white;
       transform: translateY(-2px);
   }
   /* Manage Campaigns Styles */

   /* ================feature list end here================== */

   /* ================payment ection start here================== */
   .payments-section {
       background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
       padding: 80px 0;
       position: relative;
       overflow: hidden;
   }

   .payments-section .section-title {
       font-size: 3.2rem;
       font-weight: 700;
       color: #2c3e50;
       margin-bottom: 2rem;
       line-height: 1.1;
   }

   .highlight-text {
       color: #ff6b6b;
   }

   .section-description {
       color: #6c757d;
       font-size: 1.1rem;
       line-height: 1.7;
       margin-bottom: 3rem;
       max-width: 90%;
   }

   .explore-btn {
       background-color: #dc3545;
       border: none;
       color: white;
       padding: 15px 35px;
       font-size: 1.1rem;
       font-weight: 600;
       border-radius: 8px;
       text-decoration: none;
       display: inline-block;
       transition: all 0.3s ease;
       box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
   }

   .explore-btn:hover {
       background-color: #c82333;
       color: white;
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
   }



   /* ================payment ection end here================== */



   /* ----------------hero section start here--------------- */
   /* Video Carousel Section Styles */
        .video-carousel-section {
            position: relative;
            min-height: 100vh;
            overflow: hidden;
        }

        /* Video Background Styles */
        .video-carousel-section .video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .video-carousel-section .video-background video {
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
        }

        .video-carousel-section .video-background::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 2;
        }

        /* Carousel Container Styles */
        .video-carousel-section .carousel-container {
            position: relative;
            z-index: 3;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .video-carousel-section .carousel {
            /* max-width: 900px; */
            width: 100%;
        }

        .video-carousel-section .carousel-item {
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Carousel Content Styles */
        .video-carousel-section .carousel-content {
            background: rgba(255, 255, 255, 0.95);
            padding: 60px 40px;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            text-align: center;
            backdrop-filter: blur(10px);
        }

        .video-carousel-section .carousel-content h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        .video-carousel-section .carousel-content p {
            font-size: 1.2rem;
            color: #555;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        .video-carousel-section .carousel-content .btn {
            padding: 12px 30px;
            font-size: 1.1rem;
            border-radius: 50px;
            transition: all 0.3s ease;
        }

        .video-carousel-section .carousel-content .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        /* Carousel Controls Styles */
        .video-carousel-section .carousel-indicators button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.8);
        }

        .video-carousel-section .carousel-control-prev-icon,
        .video-carousel-section .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 30px;
        }

        /* Responsive Styles */
        @media (max-width: 768px) {
            .video-carousel-section .carousel-content {
                padding: 40px 25px;
            }

            .video-carousel-section .carousel-content h2 {
                font-size: 2rem;
            }

            .video-carousel-section .carousel-content p {
                font-size: 1rem;
            }

            .video-carousel-section .carousel-item {
                min-height: 400px;
            }
        }

   /* ------------------our ups section start here---------- */
   .usps-section {
       background-color: #f8f9fa;
       padding: 60px 0;
       position: relative;
   }

   .usps-section .section-title {
       font-size: 2rem;
       font-weight: 700;
       color: #2c3e50;
       text-align: center;
       margin-bottom: 1rem;
   }

   .usp-card {
       background: white;
       border-radius: 15px;
       padding: 2.5rem 2rem;
       height: 100%;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
       border: 1px solid #e9ecef;
       position: relative;
       transition: all 0.3s ease;
       margin-bottom: 2rem;
   }

   .usp-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
   }

   .icon-container {
       width: 60px;
       height: 60px;
       background-color: #343a40;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.5rem;
   }

   .icon {
       width: 24px;
       height: 24px;
       filter: invert(1);
   }

   .usp-title {
       font-size: 1.4rem;
       font-weight: 600;
       color: #2c3e50;
       margin-bottom: 1rem;
       line-height: 1.3;
   }

   .usp-description {
       color: #6c757d;
       font-size: 0.95rem;
       line-height: 1.6;
       margin-bottom: 0;
   }

   .decorative-element {
       position: absolute;
       bottom: 20px;
       right: 20px;
       width: 80px;
       height: 80px;
       opacity: 0.05;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-size: contain;
   }

   /* Chat Icon */
   .icon-chat {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
   }

   /* Money Icon */
   .icon-money {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z'/%3E%3C/svg%3E");
   }

   /* Settings Icon */
   .icon-settings {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'/%3E%3C/svg%3E");
   }

   /* Dashboard Icon */
   .icon-dashboard {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E");
   }

   .icon-container .icon {
       width: 24px;
       height: 24px;
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
   }

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

       .usp-card {
           padding: 2rem 1.5rem;
           margin-bottom: 1.5rem;
       }

       .usp-title {
           font-size: 1.2rem;
       }
   }

   @media (max-width: 576px) {
       .section-title {
           font-size: 2rem;
       }

       .usps-section {
           padding: 60px 0;
       }
   }

   /* ------------------our ups section start here---------- */
   /* ------------------ai integration start here-------------------------- */
   .ai-integration-section {
       background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
       padding: 80px 0;
       position: relative;
   }

   .main-heading {
       font-size: 2.5rem;
       font-weight: 700;
       color: #2c3e50;
       margin-bottom: 1.5rem;
       line-height: 1.2;
   }

   .main-description {
       color: #6c757d;
       font-size: 1rem;
       line-height: 1.6;
       margin-bottom: 2rem;
   }

   .sub-description {
       color: #495057;
       font-size: 0.95rem;
       line-height: 1.6;
       margin-bottom: 2.5rem;
   }

   .explore-btn {
       background-color: #dc3545;
       border: none;
       color: white;
       padding: 12px 30px;
       font-size: 1rem;
       font-weight: 500;
       border-radius: 5px;
       text-decoration: none;
       display: inline-block;
       transition: all 0.3s ease;
   }

   .explore-btn:hover {
       background-color: #c82333;
       color: white;
       transform: translateY(-2px);
   }

   .feature-card {
       background: white;
       border-radius: 10px;
       padding: 2rem;
       height: 100%;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
       border: 1px solid #e9ecef;
       transition: all 0.3s ease;
   }

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

   .feature-card.dark {
       background: #2c3e50;
       color: white;
   }

   .feature-title {
       font-size: 1.5rem;
       font-weight: 600;
       margin-bottom: 1.5rem;
       color: #2c3e50;
   }

   .feature-card.dark .feature-title {
       color: white;
   }

   .feature-list {
       list-style: none;
       padding: 0;
       margin: 0 0 2rem 0;
   }

   .feature-item {
       display: flex;
       align-items: center;
       margin-bottom: 1rem;
       font-size: 0.95rem;
       color: #495057;
   }

   .feature-card.dark .feature-item {
       color: #e9ecef;
   }

   .feature-check {
       width: 20px;
       height: 20px;
       background-color: #dc3545;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-right: 12px;
       flex-shrink: 0;
   }

   .feature-check::after {
       content: '✓';
       color: white;
       font-size: 12px;
       font-weight: bold;
   }

   .read-more-btn {
       border: 2px solid #6c757d;
       background: transparent;
       color: #6c757d;
       padding: 10px 25px;
       font-size: 0.9rem;
       font-weight: 500;
       border-radius: 5px;
       text-decoration: none;
       display: inline-block;
       transition: all 0.3s ease;
   }

   .read-more-btn:hover {
       background-color: #6c757d;
       color: white;
   }

   .feature-card.dark .read-more-btn {
       border-color: white;
       color: white;
   }

   .feature-card.dark .read-more-btn:hover {
       background-color: white;
       color: #2c3e50;
   }

   .carousel-indicators {
       bottom: -50px;
   }

   .carousel-indicators [data-bs-target] {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background-color: #dee2e6;
       border: none;
       margin: 0 4px;
   }

   .carousel-indicators .active {
       background-color: #dc3545;
   }

   .carousel-control-prev,
   .carousel-control-next {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background-color: rgba(255, 255, 255, 0.9);
       border: 1px solid #dee2e6;
       top: 50%;
       transform: translateY(-50%);
   }

   .carousel-control-prev {
       left: -60px;
   }

   .carousel-control-next {
       right: -60px;
   }

   .carousel-control-prev:hover,
   .carousel-control-next:hover {
       background-color: white;
   }

   .carousel-control-prev-icon,
   .carousel-control-next-icon {
       width: 16px;
       height: 16px;
   }

   @media (max-width: 768px) {
       .main-heading {
           font-size: 2rem;
       }

       .carousel-control-prev,
       .carousel-control-next {
           display: none;
       }

       .feature-card {
           margin-bottom: 2rem;
       }
   }

   /* ------------------ai integration end here-------------------------- */

   /* ----------case study section start here--------------- */
   .case-studies-section {
       padding: 40px 0;
       background: white;
   }

   .section-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       margin: 1rem 0px;
   }

   .case-studies-section .section-title {
       font-size: 2.5rem;
       font-weight: 700;
       color: #1a202c;
       line-height: 1.2;
   }


   /* ----------case study section end here--------------- */

   /* --------------------MARKETING REPORTS TO EQUIP YOU------------------------ */

   .marketing-reports-section {
       background: linear-gradient(135deg, #e91e63 0%, #ad1457 100%);
       padding: 4rem 0;
       position: relative;
       overflow: hidden;
       color: white;
   }

   .marketing-reports-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M50 200c50-30 100 20 150-10s100-40 150-10 100 30 150 0 100-30 150 0 100 40 150 10 100-20 150 10' stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.1'/%3E%3Cpath d='M0 400c60-25 120 15 180-5s120-35 180-5 120 25 180 0 120-25 180 0 120 35 180 5 120-15 180 5' stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.1'/%3E%3Cpath d='M100 600c70-20 140 10 210-15s140-30 210-15 140 20 210 5 140-20 210 5 140 30 210 15 140-10 210 15' stroke='%23ffffff' stroke-width='1' fill='none' opacity='0.1'/%3E%3C/svg%3E") no-repeat center center;
       background-size: cover;
       opacity: 0.3;
   }

   .marketing-reports-section .section-title {
       font-size: 2.5rem;
       font-weight: 800;
       text-align: center;
       margin-bottom: 1rem;
       text-transform: uppercase;
       letter-spacing: 1px;
       line-height: 1.2;
   }

   .section-subtitle {
       font-size: 2.5rem;
       font-weight: 800;
       text-align: center;
       margin-bottom: 2.5rem;
       text-transform: uppercase;
       letter-spacing: 1px;
       line-height: 1.2;
   }

   .view-all-btn {
       background-color: white;
       color: #e91e63;
       border: 2px solid white;
       padding: 0.75rem 2rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 1px;
       border-radius: 0;
       transition: all 0.3s ease;
       text-decoration: none;
       display: inline-block;
       font-size: 0.9rem;
   }

   .view-all-btn:hover {
       background-color: transparent;
       color: white;
       border-color: white;
   }

   .reports-container {
       position: relative;
       z-index: 2;
       margin-top: 3rem;
   }

   .report-card {
       background: white;
       border-radius: 10px;
       overflow: hidden;
       height: 280px;
       position: relative;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       cursor: pointer;
   }

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

   .report-card-1 {
       background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
   }

   .report-card-2 {
       background: linear-gradient(135deg, #e91e63 0%, #ad1457 100%);
   }

   .report-card-3 {
       background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
   }

   .report-card-4 {
       background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
   }

   .report-image {
       position: absolute;
       bottom: 0;
       right: 0;
       width: 120px;
       height: 150px;
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
       opacity: 0.3;
   }

   .report-card-1 .report-image {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Crect x='20' y='30' width='80' height='100' rx='5' fill='%23ffffff' opacity='0.8'/%3E%3Cpath d='M30 50h60v5H30zm0 15h50v5H30zm0 15h40v5H30z' fill='%2334495e'/%3E%3C/svg%3E");
   }

   .report-card-2 .report-image {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Crect x='15' y='20' width='90' height='110' rx='10' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='60' cy='70' r='20' fill='%23e91e63'/%3E%3Cpath d='M40 100h40v5H40z' fill='%23ad1457'/%3E%3C/svg%3E");
   }

   .report-card-3 .report-image {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Crect x='10' y='25' width='100' height='100' rx='8' fill='%23ffffff' opacity='0.8'/%3E%3Cpath d='M25 45h70v8H25zm0 20h60v8H25zm0 20h50v8H25z' fill='%231a1a2e'/%3E%3C/svg%3E");
   }

   .report-card-4 .report-image {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Crect x='18' y='22' width='84' height='106' rx='6' fill='%23ffffff' opacity='0.8'/%3E%3Cpath d='M30 45h60v6H30zm0 18h45v6H30zm0 18h35v6H30z' fill='%2300bcd4'/%3E%3C/svg%3E");
   }

   .report-content {
       padding: 2rem;
       color: white;
       height: 100%;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       position: relative;
       z-index: 2;
   }

   .report-category {
       font-size: 0.8rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 1px;
       margin-bottom: 0.5rem;
       opacity: 0.9;
   }

   .report-title {
       font-size: 1.4rem;
       font-weight: 800;
       line-height: 1.3;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: 1rem;
   }

   .report-subtitle {
       font-size: 0.85rem;
       line-height: 1.4;
       opacity: 0.9;
       margin-bottom: auto;
   }

   .carousel-container {
       position: relative;
   }

   .carousel-control-prev,
   .carousel-control-next {
       width: 50px;
       height: 50px;
       background-color: rgba(255, 255, 255, 0.2);
       border: 2px solid white;
       border-radius: 50%;
       top: 50%;
       transform: translateY(-50%);
       opacity: 1;
       transition: all 0.3s ease;
       backdrop-filter: blur(10px);
   }

   .carousel-control-prev {
       left: -70px;
   }

   .carousel-control-next {
       right: -70px;
   }

   .carousel-control-prev:hover,
   .carousel-control-next:hover {
       background-color: white;
   }

   .carousel-control-prev:hover .carousel-control-prev-icon,
   .carousel-control-next:hover .carousel-control-next-icon {
       filter: invert(1);
   }

   .carousel-control-prev-icon,
   .carousel-control-next-icon {
       width: 20px;
       height: 20px;
       filter: brightness(0) invert(1);
   }

   @media (max-width: 768px) {

       .section-title,
       .section-subtitle {
           font-size: 1.8rem;
       }

       .carousel-control-prev,
       .carousel-control-next {
           display: none;
       }

       .report-card {
           height: 250px;
           margin-bottom: 1rem;
       }

       .report-content {
           padding: 1.5rem;
       }

       .report-title {
           font-size: 1.2rem;
       }
   }


   /* --------------------MARKETING REPORTS TO EQUIP YOU------------------------ */

   /* --------------------------------testimonial statrt here-------------- */
   .testimonial-section {
       background: white;
       padding: 4rem 0;
       position: relative;
       overflow: hidden;
   }

   .testimonial-title {
       font-size: 3rem;
       font-weight: 700;
       color: #1a1a1a;
       margin-bottom: 3rem;
       text-align: left;
   }

   .quote-icon {
       font-size: 4rem;
       color: #e53e3e;
       margin-bottom: 1.5rem;
       display: block;
   }

   .testimonial-text {
       font-size: 1.125rem;
       color: #4a5568;
       line-height: 1.7;
       margin-bottom: 2rem;
       max-width: 500px;
       min-height: 120px;
   }

   .rating {
       margin-bottom: 1rem;
   }

   .star {
       color: #fbbf24;
       font-size: 1.25rem;
       margin-right: 0.25rem;
   }

   .testimonial-author {
       display: flex;
       align-items: center;
       margin-bottom: 2rem;
   }

   .author-avatar {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       margin-right: 1rem;
       object-fit: cover;
   }

   .author-info h5 {
       color: #1a1a1a;
       font-weight: 600;
       margin-bottom: 0.25rem;
       font-size: 1rem;
   }

   .author-info p {
       color: #718096;
       font-size: 0.875rem;
       margin: 0;
   }

   .join-btn {
       background-color: #e53e3e;
       border: none;
       color: white;
       padding: 0.75rem 1.5rem;
       border-radius: 6px;
       font-weight: 600;
       text-decoration: none;
       display: inline-block;
       transition: all 0.3s ease;
   }

   .join-btn:hover {
       background-color: #c53030;
       color: white;
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
   }

   .decorative-dots {
       position: absolute;
       right: 30%;
       top: 60%;
       width: 120px;
       height: 60px;
       background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M10 10c10-5 20 5 30 0s20-5 30 0 20 5 30 0 20-5 30 0' stroke='%23e2e8f0' stroke-width='2' fill='none' stroke-dasharray='3,3'/%3E%3Ccircle cx='100' cy='15' r='8' fill='%23f7fafc' stroke='%23e2e8f0' stroke-width='2'/%3E%3Ccircle cx='105' cy='20' r='3' fill='%23e2e8f0'/%3E%3C/svg%3E") no-repeat;
       opacity: 0.6;
   }

   .testimonial-images {
       position: relative;
       height: 400px;
   }

   .testimonial-img {
       position: absolute;
       border-radius: 15px;
       object-fit: cover;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease;
   }

   .testimonial-img:hover {
       transform: scale(1.02);
   }

   .img-1 {
       top: 0;
       right: 100px;
       width: 200px;
       height: 250px;
       z-index: 3;
   }

   .img-2 {
       top: 80px;
       right: 0;
       width: 180px;
       height: 220px;
       z-index: 2;
   }

   .img-3 {
       top: 40px;
       right: 200px;
       width: 160px;
       height: 200px;
       z-index: 1;
   }

   .bg-circle-1 {
       position: absolute;
       top: -50px;
       right: 50px;
       width: 300px;
       height: 300px;
       background: linear-gradient(135deg, rgba(229, 62, 62, 0.1) 0%, rgba(229, 62, 62, 0.05) 100%);
       border-radius: 50%;
       z-index: -1;
   }

   .bg-circle-2 {
       position: absolute;
       bottom: -100px;
       right: 150px;
       width: 200px;
       height: 200px;
       background: linear-gradient(135deg, rgba(245, 191, 36, 0.1) 0%, rgba(245, 191, 36, 0.05) 100%);
       border-radius: 50%;
       z-index: -1;
   }

   /* Carousel Custom Styles */
   .carousel-control-prev,
   .carousel-control-next {
       width: 50px;
       height: 50px;
       background-color: #e53e3e;
       border-radius: 50%;
       top: 50%;
       transform: translateY(-50%);
       opacity: 1;
       transition: all 0.3s ease;
   }

   .carousel-control-prev {
       left: -70px;
   }

   .carousel-control-next {
       right: -70px;
   }

   .carousel-control-prev:hover,
   .carousel-control-next:hover {
       background-color: #c53030;
       transform: translateY(-50%) scale(1.1);
   }

   .carousel-control-prev-icon,
   .carousel-control-next-icon {
       width: 20px;
       height: 20px;
   }

   .carousel-indicators {
       bottom: -60px;
   }

   .carousel-indicators button {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       margin: 0 5px;
       background-color: #cbd5e0;
       border: none;
   }

   .carousel-indicators button.active {
       background-color: #e53e3e;
   }

   .carousel-item {
       transition: transform 0.8s ease-in-out;
   }

   @media (max-width: 768px) {
       .testimonial-title {
           font-size: 2.5rem;
           text-align: center;
           margin-bottom: 2rem;
       }

       .testimonial-images {
           margin-top: 3rem;
           height: 300px;
       }

       .img-1,
       .img-2,
       .img-3 {
           position: relative;
           top: 0;
           right: 0;
           width: 100%;
           height: 200px;
           margin-bottom: 1rem;
       }

       .decorative-dots {
           display: none;
       }

       .bg-circle-1,
       .bg-circle-2 {
           display: none;
       }

       .carousel-control-prev,
       .carousel-control-next {
           display: none;
       }
   }

   /* --------------------------------testimonial end here-------------- */

   /* --------------------------------contact statrt here-------------- */



   .contact-section {
       background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
       /* border-radius: 20px; */
       padding: 3rem;
       color: white;
   }

   .rocket-icon {
       width: 80px;
       height: 80px;
       margin-bottom: 1.5rem;
   }

   .contact-heading {
       font-size: 2.25rem;
       font-weight: 600;
       line-height: 1.2;
       margin-bottom: 1.5rem;
   }

   .highlight-text {
       color: #1e293b;
       font-weight: 700;
   }

   .contact-description {
       font-size: 1rem;
       line-height: 1.6;
       margin-bottom: 2rem;
       opacity: 0.9;
   }

   .contact-form {
       background: rgba(255, 255, 255, 0.95);
       padding: 2rem;
       border-radius: 15px;
       backdrop-filter: blur(10px);
   }

   .contact-form h3 {
       color: #1e293b;
       font-size: 1.5rem;
       font-weight: 600;
       margin-bottom: 1.5rem;
   }

   .form-control {
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       padding: 0.75rem 1rem;
       font-size: 0.95rem;
       transition: all 0.3s ease;
       background-color: white;
   }

   .form-control:focus {
       border-color: #6366f1;
       box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
   }

   .form-control::placeholder {
       color: #64748b;
       font-weight: 400;
   }

   textarea.form-control {
       resize: vertical;
       min-height: 100px;
   }

   .btn-submit {
       background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
       border: none;
       color: white;
       padding: 0.875rem 2rem;
       border-radius: 8px;
       font-size: 1rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       transition: all 0.3s ease;
       width: 100%;
   }

   .btn-submit:hover {
       background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
       transform: translateY(-2px);
       box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
   }

   .btn-submit:focus {
       box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.5);
   }

   @media (max-width: 768px) {
       .contact-section {
           padding: 2rem 1.5rem;
       }

       .contact-heading {
           font-size: 1.75rem;
       }

       .contact-form {
           padding: 1.5rem;
           margin-top: 2rem;
       }
   }

   /* --------------------------------contact end here-------------- */
   /* --------------------------------faq statrt here-------------- */

   .faq-container {
       max-width: 1200px;
       margin: 0 auto;
       background: white;
       border-radius: 12px;
       padding: 40px;
       /* box-shadow: 0 2px 10px rgba(0,0,0,0.05); */
   }

   .faq-header {
       text-align: center;
       margin-bottom: 40px;
       position: relative;
   }



   .faq-title {
       font-size: 32px;
       font-weight: 600;
       color: #2d3748;
       display: inline-block;
       padding: 0 30px;
       background: white;
   }

   .faq-item {
       border-bottom: 1px solid #e1e5e9;
       margin-bottom: 0;
   }

   .faq-item:last-child {
       border-bottom: none;
   }

   .faq-question {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 24px 0;
       cursor: pointer;
       transition: all 0.3s ease;
       background: none;
       border: none;
       width: 100%;
       text-align: left;
   }

   .faq-question:hover {
       color: #e53e3e;
   }

   .faq-question-text {
       font-size: 16px;
       font-weight: 500;
       color: #2d3748;
       line-height: 1.4;
       flex: 1;
       margin-right: 20px;
   }

   .faq-question:hover .faq-question-text {
       color: #e53e3e;
   }

   .faq-icon {
       width: 20px;
       height: 20px;
       transition: transform 0.3s ease;
       color: #718096;
   }

   .faq-question:hover .faq-icon {
       color: #e53e3e;
   }

   .faq-item.expanded .faq-icon {
       transform: rotate(180deg);
   }

   .faq-answer {
       max-height: 0;
       overflow: hidden;
       transition: all 0.3s ease;
       padding: 0;
   }

   .faq-answer.expanded {
       max-height: 200px;
       padding-bottom: 24px;
   }

   .faq-answer-text {
       font-size: 14px;
       color: #4a5568;
       line-height: 1.6;
       padding-right: 40px;
   }

   .highlight {
       color: #e53e3e;
       font-weight: 500;
   }

   /* --------------------------------faq end here-------------- */

   /* --------------------------------footer statrt here-------------- */
   .site-footer {
       width: 100%;
       height: auto;
       padding-top: 50px;
       background: #0b0d12;
       color: var(--white-color);
   }

   .site-footer .footer-heading {
       color: #e2e8f0;
       font-weight: 600;
       letter-spacing: .3px;
       margin-bottom: .75rem
   }

   .footer-ul li {
       padding: 10px 0px;
   }

   .footer-social a {
       text-decoration: none;
   }

   .site-footer .footer-text {
       color: #cbd5e1;
       line-height: 1.6
   }

   .site-footer .footer-link,
   .site-footer .footer-link-inline {
       color: #cbd5e1;
       text-decoration: none;
       transition: color .2s ease, opacity .2s ease
   }

   .site-footer .footer-link:hover,
   .site-footer .footer-link:focus,
   .site-footer .footer-link-inline:hover,
   .site-footer .footer-link-inline:focus {
       color: #ffffff;
       text-decoration: none
   }

   .site-footer .footer-social a {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 36px;
       height: 36px;
       border: 1px solid rgba(255, 255, 255, .15);
       border-radius: 50%;
       color: #e2e8f0;
       transition: all .2s ease
   }

   .site-footer .footer-social a:hover,
   .site-footer .footer-social a:focus {
       color: #ffffff;
       border-color: var(--main-color);
       background: rgba(224, 2, 67, .12);
       transform: translateY(-2px)
   }

   .site-footer .logo-text {
       background: var(--main-color);
       color: #fff;
       padding: 4px 8px;
       border-radius: 4px
   }

   .site-footer .badge.text-bg-light {
       background: rgba(255, 255, 255, .08) !important;
       color: #fff !important;
       border: 1px solid rgba(255, 255, 255, .1)
   }

   .site-footer .footer-divider {
       border-top: 1px solid rgba(255, 255, 255, .12)
   }

   .site-footer .footer-bottom {
       color: #94a3b8
   }

   .site-footer .list-inline-item {
       color: #94a3b8
   }

   .site-footer .navbar-brand {
       color: #fff
   }

   .site-footer .navbar-brand:hover {
       color: #fff
   }

   .newsletter-form .form-control {
       background: rgba(255, 255, 255, .06);
       border: 1px solid rgba(255, 255, 255, .15);
       color: #e2e8f0
   }

   .newsletter-form .form-control::placeholder {
       color: #94a3b8
   }

   .newsletter-form .form-control:focus {
       background: rgba(255, 255, 255, .1);
       border-color: var(--secondary-color);
       color: #ffffff;
       box-shadow: none
   }

   .site-footer .btn.btn-primary {
       --bs-btn-bg: var(--main-color);
       --bs-btn-border-color: var(--main-color);
       --bs-btn-hover-bg: #c0023d;
       --bs-btn-hover-border-color: #c0023d
   }

   @media (max-width: 575.98px) {
       .newsletter-form .input-group {
           flex-wrap: wrap
       }

       .newsletter-form .input-group>.form-control {
           border-radius: .375rem;
           margin-bottom: .5rem
       }

       .newsletter-form .input-group>.btn {
           border-radius: .375rem;
           width: 100%
       }
   }


   /* --------------influncer section start here------------ */

   .section {
       padding: 60px 0;
       position: relative;
       overflow: hidden;
   }

   /* LinkedIn Section */
   .linkedin-section {
       background: linear-gradient(135deg, #0077B5 0%, #004182 100%);
       color: white;
       padding: 50px;
   }

   .linkedin-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
       opacity: 0.3;
   }

   /* Instagram Section */
   .instagram-section {
       background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #F77737 100%);
       color: white;
   }

   .instagram-section::before {
       content: '';
       position: absolute;
       top: -50%;
       right: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
       background-size: 50px 50px;
       animation: float 20s infinite linear;
   }

   /* YouTube Section */
   .youtube-section {
       background: linear-gradient(135deg, #1a0033 0%, #2d0066 50%, #1a0033 100%);
       color: white;
   }

   .youtube-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-image:
           radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
           radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
       background-size: 100px 100px, 150px 150px;
   }

   @keyframes float {
       0% {
           transform: translateX(-100px) translateY(-100px);
       }

       100% {
           transform: translateX(100px) translateY(100px);
       }
   }

   .brand-header {
       display: inline-flex;
       align-items: center;
       padding: 12px 24px;
       border: 2px solid rgba(255, 255, 255, 0.3);
       border-radius: 50px;
       margin-bottom: 30px;
       backdrop-filter: blur(10px);
       background: rgba(255, 255, 255, 0.1);
   }

   .brand-header i {
       font-size: 24px;
       margin-right: 12px;
   }

   .brand-header h2 {
       margin: 0;
       font-size: 24px;
       font-weight: 600;
   }

   .section-subtitle {
       font-size: 18px;
       margin-bottom: 40px;
       opacity: 0.9;
       line-height: 1.6;
   }

   .hire-btn {
       background: white;
       color: #333;
       padding: 15px 30px;
       border: none;
       border-radius: 8px;
       font-weight: 600;
       font-size: 16px;
       margin-bottom: 40px;
       transition: all 0.3s ease;
   }

   .hire-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
       color: #333;
   }

   .features-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       /* gap: 20px; */
       margin-bottom: 30px;
   }

   .feature-item {
       display: flex;
       align-items: center;
       font-size: 16px;
       font-weight: 500;
       color: var(--white-color);
   }

   .feature-item::before {
       content: '●';
       color: rgba(255, 255, 255, 0.7);
       margin-right: 12px;
       font-size: 12px;
   }

   .phone-mockups {
       position: relative;
       height: 400px;
   }

   .phone {
       position: absolute;
       width: 200px;
       height: 350px;
       background: #fff;
       border-radius: 25px;
       padding: 15px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
       overflow: hidden;
   }

   .phone-1 {
       right: 50px;
       top: 0;
       z-index: 3;
       transform: rotate(-5deg);
   }

   .phone-2 {
       right: 150px;
       top: 30px;
       z-index: 2;
       transform: rotate(5deg);
   }

   .phone-3 {
       right: 250px;
       top: 10px;
       z-index: 1;
       transform: rotate(-3deg);
   }

   .phone-screen {
       width: 100%;
       height: 100%;
       background: #f5f5f5;
       border-radius: 15px;
       overflow: hidden;
       position: relative;
   }

   .phone-image {
       width: 100%;
       height: 60%;
       object-fit: cover;
       border-radius: 10px 10px 0 0;
   }

   .phone-content {
       padding: 10px;
       height: 40%;
       background: white;
   }

   .phone-header {
       height: 20px;
       background: linear-gradient(90deg, #ddd 60%, #eee 40%);
       border-radius: 10px;
       margin-bottom: 8px;
   }

   .phone-line {
       height: 8px;
       background: #eee;
       border-radius: 4px;
       margin-bottom: 6px;
   }

   .phone-line:nth-child(2) {
       width: 80%;
   }

   .phone-line:nth-child(3) {
       width: 60%;
   }

   /* Instagram specific phones */
   .instagram-phones .phone {
       transform: rotate(0deg);
   }

   .instagram-phones .phone-1 {
       right: 80px;
       transform: rotate(-8deg);
   }

   .instagram-phones .phone-2 {
       right: 180px;
       transform: rotate(8deg);
   }

   .instagram-phones .phone-3 {
       right: 280px;
       transform: rotate(-3deg);
   }

   /* Telegram Section */
   .telegram-section {
       background: linear-gradient(135deg, #FFA500 0%, #FFD700 50%, #FFA500 100%);
       color: #333;
   }

   .telegram-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="20,30 30,20 25,25" fill="rgba(255,255,255,0.1)"/><polygon points="70,60 80,50 75,55" fill="rgba(255,255,255,0.1)"/></svg>');
       opacity: 0.3;
   }

   .telegram-section .brand-header {
       border-color: rgba(51, 51, 51, 0.3);
       background: rgba(255, 255, 255, 0.2);
       color: #333;
   }

   .telegram-section .section-subtitle {
       color: #333;
       opacity: 0.8;
   }

   .telegram-section .hire-btn {
       background: #1a1a1a;
       color: white;
   }

   .telegram-section .hire-btn:hover {
       background: #333;
       color: white;
   }

   .telegram-section .feature-item {
       color: #333;
   }

   .telegram-section .feature-item::before {
       color: rgba(51, 51, 51, 0.7);
   }

   /* YouTube specific */
   .youtube-video {
       position: relative;
       right: 100px;
       top: 50px;
       width: 300px;
       height: 200px;
       background: #fff;
       border-radius: 15px;
       padding: 15px;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
   }

   .video-player {
       width: 100%;
       height: 70%;
       background: #000;
       border-radius: 10px;
       position: relative;
       overflow: hidden;
   }

   .video-thumbnail {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 8px;
   }

   .video-controls {
       position: absolute;
       bottom: 10px;
       left: 10px;
       right: 10px;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .play-btn {
       width: 30px;
       height: 30px;
       background: rgba(255, 255, 255, 0.9);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #000;
   }

   .progress-bar {
       flex: 1;
       height: 4px;
       background: rgba(255, 255, 255, 0.3);
       border-radius: 2px;
       margin: 0 10px;
   }

   .progress-fill {
       width: 30%;
       height: 100%;
       background: #FF0000;
       border-radius: 2px;
   }

   .video-info {
       padding: 10px 0;
   }

   .video-title {
       height: 12px;
       background: #333;
       border-radius: 6px;
       margin-bottom: 8px;
   }

   /* Telegram Mockups */
   .telegram-grid {
       position: relative;
       right: 50px;
       top: 20px;
       width: 350px;
       height: 300px;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 15px;
   }

   .telegram-card {
       background: white;
       border-radius: 15px;
       overflow: hidden;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
       transition: transform 0.3s ease;
   }

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

   .telegram-card:nth-child(1) {
       transform: rotate(-3deg);
   }

   .telegram-card:nth-child(2) {
       transform: rotate(2deg);
   }

   .telegram-card:nth-child(3) {
       transform: rotate(1deg);
   }

   .telegram-card:nth-child(4) {
       transform: rotate(-2deg);
   }

   .telegram-image {
       width: 100%;
       height: 80px;
       object-fit: cover;
   }

   .telegram-content {
       padding: 10px;
       height: 60px;
   }

   .telegram-brand {
       height: 8px;
       background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
       border-radius: 4px;
       margin-bottom: 6px;
       width: 60%;
   }

   .telegram-text {
       height: 6px;
       background: #ddd;
       border-radius: 3px;
       margin-bottom: 4px;
   }

   .telegram-text:nth-child(3) {
       width: 80%;
   }

   .telegram-text:nth-child(4) {
       width: 60%;
   }

   @media (max-width: 768px) {
       .features-grid {
           grid-template-columns: 1fr;
       }

       .phone-mockups {
           height: 300px;
       }

       .phone {
           width: 120px;
           height: 220px;
       }

       .phone-1,
       .phone-2,
       .phone-3 {
           right: 20px;
           top: 0;
       }

       .phone-2 {
           right: 80px;
       }

       .phone-3 {
           right: 140px;
       }

       .youtube-video {
           width: 250px;
           height: 150px;
           right: 20px;
       }

       .telegram-grid {
           width: 280px;
           right: 10px;
           grid-template-columns: 1fr;
           height: 400px;
       }
   }

   /* Animation */
   .section {
       animation: fadeInUp 0.8s ease-out;
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }


   /* --------------influncer section end here------------ */
   /* --------------influncer gallery section start here------------ */
   .gallery-section {
       position: relative;
       z-index: 1;
   }

   .title {
       font-size: 46px;
       font-weight: 700;
       font-family: "Playfair Display", serif;
       color: #f44336;
   }

   .filter {
       text-align: center;
       max-width: 1050px;
       margin: auto;
   }

   .btn {
       padding: 10px 20px;
       margin: 5px 4px 4px 0;
       display: inline-block;
       color: #003;
       background: #eee;
       border: 1px solid #f44336;
       transition: all 0.4s;
       border-radius: 10px;
       font-size: 16px;
       font-weight: 500;
   }

   .btn:hover,
   .btn-active {
       background: #f44336;
       color: #fff;
       -webkit-transform: translateY(3px);
       -ms-transform: translateY(3px);
       transform: translateY(3px);
   }

   .gallery {
       display: flex;
       justify-content: center;
       width: fit-content;
       max-width: 1320px;
       flex-wrap: wrap;
       margin: 25px auto;
       /* gap: 14px; */
   }

   .gallery a {
       display: flex;
   }

   .gallery img {
       width: 200px;
       height: 220px;
       object-fit: cover;
       transition: 0.3s ease-in-out;
       border-radius: 12px;
       overflow: hidden;
       margin: 10px 10px;
   }

   .gallery img:hover {
       transform: scale(1.1);
   }

   .sets .hide,
   .sets .pophide {
       width: 0%;
       opacity: 0;
   }

   .closeBtn {
       position: absolute;
       font-size: 22px;
       font-weight: 500;
       right: 25px;
       top: 25px;
       color: white;
       transition: 0.5s linear;
       padding: 8px 40px;
       border-radius: 25px;
       background: red;
       outline-offset: -6px;
       outline: 2px solid #fff;
   }

   .closeBtn:hover {
       cursor: pointer;
       background: white;
       color: black;
       outline: 2px solid #000;
   }

   .openDiv {
       width: 100%;
       height: 100vh;
       background: #000000e7;
       position: fixed;
       top: 0;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       left: 0;
       z-index: 9999;
   }

   .imgPreview {
       width: 70%;
       object-fit: scale-down;
       max-height: 40vw;
       height: auto;
   }

   .prevButton,
   .nextButton {
       transition: 1s linear;
       padding: 10px 35px;
       font-size: 18px;
       border: none;
       color: white;
       background: #0005;
       border-radius: 10px;
       border: 1px solid white;
       margin: 10px;
   }

   .prevButton:hover,
   .nextButton:hover {
       background: #fff;
       color: black;
   }

   /* resposive CSS Code */

   @media (max-width: 1199px) {
       .section-padding {
           padding-top: 70px;
       }
   }

   @media (max-width: 991px) {
       .section-padding {
           padding-top: 50px;
       }
   }

   @media (max-width: 767px) {
       .title {
           font-size: 36px;
       }

       .gallery img {
           margin: 8px 8px;
           width: 175px;
       }

       .closeBtn {
           padding: 6px 25px;
       }

       .prevButton,
       .nextButton {
           font-size: 18px;
           padding: 8px 25px;
       }
   }

   @media (max-width: 540px) {
       .section-padding {
           padding-top: 30px;
       }

       .gallery img {
           margin: 8px 6px;
           width: 155px;
       }

       .closeBtn {
           font-size: 18px;
           border-radius: 15px;
       }

       .prevButton,
       .nextButton {
           font-size: 18px;
           padding: 6px 20px;
           border-radius: 10px;
           margin: 5px;
       }

       .imgPreview {
           width: 90%;
           max-height: 50vh;
           height: auto;
       }

   }

   /* --------------influncer gallery section end here------------ */
  


   /* start section section  */

   .stats-section {
       padding: 50px 0;
       background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
       position: relative;
       overflow: hidden;
   }

   .stats-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="rgba(0,123,255,0.05)"/><circle cx="90" cy="20" r="1.5" fill="rgba(220,53,69,0.05)"/><circle cx="20" cy="90" r="1" fill="rgba(40,167,69,0.05)"/><circle cx="80" cy="80" r="1.2" fill="rgba(255,193,7,0.05)"/></svg>');
       opacity: 0.6;
   }

   .stats-section .section-title {
       text-align: center;
       font-size: 2.8rem;
       font-weight: 700;
       color: #2c3e50;
       margin-bottom: 20px;
       position: relative;
       z-index: 2;
   }

   .section-title .highlight {
       color: #dc3545;
       font-weight: 800;
   }

   .stats-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 40px;
       margin-bottom: 40px;
       position: relative;
       z-index: 2;
   }

   .stat-card {
       text-align: center;
       padding: 40px 20px;
       background: white;
       border-radius: 25px;
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
   }

   .stat-card:hover {
       transform: translateY(-15px);
       box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
   }

   

   

   .stat-number {
       font-size: 25px;
       font-weight: 700;
       margin-bottom: 15px;
       display: block;
   }

   .stat-card:nth-child(1) .stat-number {
       color: #007bff;
   }

   .stat-card:nth-child(2) .stat-number {
       color: #007bff;
   }

   .stat-card:nth-child(3) .stat-number {
       color: #007bff;
   }

   .stat-card:nth-child(4) .stat-number {
       color: #007bff;
   }

   .stat-description {
       font-size: 1.1rem;
       color: #6c757d;
       font-weight: 500;
       line-height: 1.4;
   }

   .achievements-section {
       background: white;
       border-radius: 30px;
       padding: 60px 40px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
       position: relative;
       z-index: 2;
   }

   .achievements-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 40px;
       align-items: center;
   }

   .achievement-item {
       text-align: center;
       padding: 30px 20px;
       transition: all 0.3s ease;
   }

   .achievement-item:hover {
       transform: scale(1.05);
   }

   .achievement-logo {
       width: 80px;
       height: 80px;
       margin: 0 auto 20px;
       border-radius: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2.5rem;
       font-weight: bold;
       color: white;
       text-decoration: none;
   }

   .et-logo {
       background: linear-gradient(135deg, #1e3c72, #2a5298);
   }

   .award-logo {
       background: linear-gradient(135deg, #f12711, #f5af19);
   }

   .global-logo {
       background: linear-gradient(135deg, #134e5e, #71b280);
   }

   .dashboard-logo {
       background: linear-gradient(135deg, #667eea, #764ba2);
   }

   .achievement-text {
       font-size: 0.95rem;
       color: #6c757d;
       font-weight: 500;
       line-height: 1.5;
   }

   @media (max-width: 992px) {
       .stats-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 30px;
       }

       .achievements-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 30px;
       }

       .section-title {
           font-size: 2.2rem;
       }

       .stat-number {
           font-size: 3rem;
       }
   }

   @media (max-width: 768px) {
       .stats-grid {
           grid-template-columns: 1fr;
           gap: 25px;
       }

       .achievements-grid {
           grid-template-columns: 1fr;
           gap: 25px;
       }

       .section-title {
           font-size: 1.8rem;
           margin-bottom: 50px;
       }

       .stat-number {
           font-size: 2.5rem;
       }

       .achievements-section {
           padding: 40px 20px;
       }
   }

   .animate-counter {
       animation: countUp 2s ease-out;
   }

   .animate-fade-in {
       animation: fadeInUp 1s ease-out;
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(50px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes countUp {
       from {
           opacity: 0;
           transform: scale(0.5);
       }

       to {
           opacity: 1;
           transform: scale(1);
       }
   }

   .stagger-animation .stat-card:nth-child(1) {
       animation-delay: 0.1s;
   }

   .stagger-animation .stat-card:nth-child(2) {
       animation-delay: 0.2s;
   }

   .stagger-animation .stat-card:nth-child(3) {
       animation-delay: 0.3s;
   }

   .stagger-animation .stat-card:nth-child(4) {
       animation-delay: 0.4s;
   }



   /* ===================contact us page  start here============================= */
   .cu-hero {
       background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
       padding: 3rem 0 2rem;
       border-bottom: 1px solid #e2e8f0;
   }

   .cu-breadcrumb a {
       color: var(--text-color);
       text-decoration: none;
       font-size: 0.875rem;
       transition: color 0.2s ease;
   }

   .cu-breadcrumb a:hover {
       color: var(--main-color);
   }

   .cu-title {
       color: var(--black-color);
       font-weight: 800;
       letter-spacing: -0.5px;
   }

   .cu-sub {
       color: var(--text-color);
       font-size: 1.1rem;
       max-width: 600px;
   }

   .cu-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.625rem 1.5rem;
       background-color: var(--white-color);
       color: var(--black-color);
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       font-weight: 600;
       text-decoration: none;
       transition: all 0.3s ease;
       font-size: 0.9375rem;
   }

   .cu-btn:hover {
       background-color: var(--main-color);
       color: var(--white-color);
       border-color: var(--main-color);
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(224, 2, 67, 0.15);
   }

   .cu-btn-primary {
       background-color: var(--main-color);
       color: var(--white-color);
       border-color: var(--main-color);
   }

   .cu-btn-primary:hover {
       background-color: #c6003a;
       border-color: #c6003a;
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(224, 2, 67, 0.25);
   }

   .cu-btn-danger {
       background-color: transparent;
       color: #ef4444;
       border-color: #ef4444;
   }

   .cu-btn-danger:hover {
       background-color: #ef4444;
       color: var(--white-color);
   }

   .cu-main {
       padding: 3rem 0;
   }

   /* Card Styles */
   .cu-card {
       background: var(--white-color);
       border: 1px solid #e2e8f0;
       border-radius: 12px;
       padding: 1.75rem;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
       transition: box-shadow 0.3s ease;
   }

   .cu-card:hover {
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   }

   /* Contact Info */
   .cu-info ul li {
       display: flex;
       align-items: flex-start;
       padding: 0.5rem 0;
       color: var(--text-color);
   }

   .cu-info ul li i {
       margin-top: 0.125rem;
       color: var(--main-color);
   }

   .cu-info ul li a {
       color: var(--text-color);
       text-decoration: none;
       transition: color 0.2s ease;
   }

   .cu-info ul li a:hover {
       color: var(--main-color);
   }

   .cu-social {
       display: flex;
       gap: 1rem;
       margin-top: 1.5rem;
       padding-top: 1.5rem;
       border-top: 1px solid #e2e8f0;
   }

   .cu-social a {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       background-color: #f8fafc;
       border-radius: 50%;
       color: var(--text-color);
       text-decoration: none;
       transition: all 0.3s ease;
       font-size: 1.1rem;
   }

   .cu-social a:hover {
       background-color: var(--main-color);
       color: var(--white-color);
       transform: translateY(-2px);
   }

   /* Map Placeholder */
   .cu-map {
       background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
       border-radius: 12px;
       height: 370px;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 2px dashed #cbd5e1;
       overflow: hidden;
   }

   .cu-pin {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       font-size: 3rem;
       color: var(--main-color);
       animation: float 3s ease-in-out infinite;
   }

   .cu-map-note {
       position: absolute;
       bottom: 1rem;
       background-color: rgba(255, 255, 255, 0.9);
       padding: 0.5rem 1rem;
       border-radius: 6px;
       font-size: 0.875rem;
       color: var(--text-color);
   }

   @keyframes float {

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

       50% {
           transform: translate(-50%, -50%) translateY(-10px);
       }
   }

   /* Form Styles */
   .cu-form .form-label {
       font-weight: 600;
       color: var(--black-color);
       margin-bottom: 0.5rem;
       font-size: 0.9375rem;
   }

   .cu-form .form-control,
   .cu-form .form-select {
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       padding: 0.75rem 1rem;
       font-size: 0.9375rem;
       transition: all 0.3s ease;
   }

   .cu-form .form-control:focus,
   .cu-form .form-select:focus {
       border-color: var(--main-color);
       box-shadow: 0 0 0 3px rgba(224, 2, 67, 0.1);
   }

   .cu-form .form-control:invalid:not(:focus):not(:placeholder-shown),
   .cu-form .form-select:invalid:not(:focus) {
       border-color: #ef4444;
   }

   .cu-form .form-text {
       font-size: 0.8125rem;
       color: var(--text-color);
       margin-top: 0.25rem;
   }

   /* Character Counter */
   .cu-counter {
       font-size: 0.8125rem;
       color: var(--text-color);
   }

   #cu-count {
       color: var(--main-color);
       font-weight: 600;
   }

   /* Checkbox */
   .form-check-input:checked {
       background-color: var(--main-color);
       border-color: var(--main-color);
   }

   .form-check-input:focus {
       border-color: var(--main-color);
       box-shadow: 0 0 0 3px rgba(224, 2, 67, 0.1);
   }

   /* Email Link */
   #cu-mailto {
       color: var(--main-color) !important;
   }

   #cu-mailto:hover {
       text-decoration: underline !important;
   }

   /* Toast Notification */
   .cu-toast {
       position: fixed;
       bottom: 2rem;
       right: 2rem;
       background: var(--white-color);
       border: 1px solid #10b981;
       border-left: 4px solid #10b981;
       border-radius: 8px;
       padding: 1rem 1.5rem;
       max-width: 350px;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
       transform: translateY(100px);
       opacity: 0;
       transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
       z-index: 1000;
   }

   .cu-toast.show {
       transform: translateY(0);
       opacity: 1;
   }

   .cu-toast strong {
       color: #10b981;
       display: flex;
       align-items: center;
       margin-bottom: 0.25rem;
   }

   /* Responsive Design */
   @media (max-width: 768px) {
       .cu-hero {
           padding: 2rem 0 1.5rem;
       }

       .cu-title {
           font-size: 1.75rem;
       }

       .cu-sub {
           font-size: 1rem;
       }

       .cu-btn {
           padding: 0.5rem 1.25rem;
           font-size: 0.875rem;
       }

       .cu-card {
           padding: 1.5rem;
       }

       .cu-toast {
           left: 1rem;
           right: 1rem;
           max-width: none;
       }
   }

   /* Form Validation Styles */
   .was-validated .form-control:invalid,
   .was-validated .form-select:invalid {
       border-color: #ef4444;
   }

   .was-validated .form-control:invalid:focus,
   .was-validated .form-select:invalid:focus {
       box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
   }

   .was-validated .form-check-input:invalid {
       border-color: #ef4444;
   }

   .was-validated .form-check-input:invalid:checked {
       background-color: var(--main-color);
   }

   /* ==================about us page start here================================ */
   .ab-hero {
       background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
       padding: 4rem 0 3rem;
       color: var(--white-color);
       position: relative;
       overflow: hidden;
   }

   .ab-hero::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, var(--main-color), var(--secondary-color));
   }

   .ab-kicker {
       display: inline-block;
       font-size: 0.875rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: var(--secondary-color);
       background: rgba(248, 213, 83, 0.1);
       padding: 0.5rem 1rem;
       border-radius: 20px;
       margin-bottom: 1.5rem;
   }

   .ab-title {
       color: var(--white-color);
       font-weight: 800;
       line-height: 1.2;
       margin-bottom: 1.5rem;
       font-size: 3rem;
   }

   .ab-sub {
       color: rgba(255, 255, 255, 0.8);
       font-size: 1.125rem;
       line-height: 1.6;
       max-width: 600px;
   }

   .ab-cta {
       margin: 2rem 0;
   }

   .ab-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.875rem 2rem;
       background: rgba(255, 255, 255, 0.1);
       color: var(--white-color);
       border: 2px solid rgba(255, 255, 255, 0.2);
       border-radius: 8px;
       font-weight: 600;
       text-decoration: none;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       backdrop-filter: blur(10px);
   }

   .ab-btn:hover {
       background: var(--main-color);
       border-color: var(--main-color);
       transform: translateY(-2px);
       box-shadow: 0 10px 25px rgba(224, 2, 67, 0.3);
   }

   .ab-btn-primary {
       background: var(--main-color);
       border-color: var(--main-color);
   }

   .ab-btn-primary:hover {
       background: #c6003a;
       border-color: #c6003a;
       box-shadow: 0 12px 30px rgba(224, 2, 67, 0.4);
   }

   .ab-stats {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 1.5rem;
       margin-top: 3rem;
       padding-top: 2rem;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
   }

   .ab-stat {
       text-align: center;
   }

   .ab-num {
       font-size: 2.5rem;
       font-weight: 800;
       color: var(--secondary-color);
       margin-bottom: 0.5rem;
       font-family: 'Inter', sans-serif;
   }

   .ab-lbl {
       color: rgba(255, 255, 255, 0.7);
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 1px;
   }

   .ab-card {
       background: var(--white-color);
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       border: 1px solid #e2e8f0;
   }

   .ab-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
   }

   /* Mission & Vision */
   .ab-mv {
       padding: 4rem 0;
   }

   .ab-mv .ab-card {
       padding: 2.5rem;
       height: 100%;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   .ab-mv h3 {
       display: flex;
       align-items: center;
       margin-bottom: 1.5rem;
       font-size: 1.5rem;
   }

   /* Values Section */
   .ab-values {
       padding: 4rem 0;
       background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
   }

   .ab-val-icon {
       width: 60px;
       height: 60px;
       background: linear-gradient(135deg, var(--main-color), #ff2e63);
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.5rem;
       color: var(--white-color);
       font-size: 1.5rem;
   }

   .ab-values h4 {
       margin-bottom: 1rem;
       font-size: 1.25rem;
   }

   .ab-values p {
       color: var(--text-color);
       line-height: 1.6;
   }

   /* Timeline */
   .ab-section:not(.ab-hero):not(.ab-values) {
       padding: 4rem 0;
   }

   .ab-timeline {
       position: relative;
       padding-left: 2rem;
   }

   .ab-timeline::before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 2px;
       background: linear-gradient(to bottom, var(--main-color), var(--secondary-color));
   }

   .ab-tl-item {
       position: relative;
       padding: 1.5rem 0 1.5rem 2rem;
   }

   .ab-tl-item::before {
       content: '';
       position: absolute;
       left: -0.5rem;
       top: 2rem;
       width: 1rem;
       height: 1rem;
       background: var(--main-color);
       border-radius: 50%;
       border: 3px solid var(--white-color);
       box-shadow: 0 0 0 4px var(--main-color);
   }

   .ab-tl-title {
       font-size: 1.25rem;
       font-weight: 700;
       color: var(--black-color);
       margin-bottom: 0.5rem;
   }

   .ab-tl-meta {
       display: inline-block;
       background: linear-gradient(135deg, var(--main-color), #ff2e63);
       color: var(--white-color);
       padding: 0.25rem 1rem;
       border-radius: 20px;
       font-size: 0.875rem;
       font-weight: 600;
       margin-bottom: 1rem;
   }

   /* Team Section */
   .ab-team {
       background: var(--white-color);
   }

   .ab-member {
       position: relative;
       overflow: hidden;
       border-radius: 12px;
       height: 100%;
   }

   .ab-photo {
       width: 100%;
       height: 300px;
       object-fit: cover;
       transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .ab-member:hover .ab-photo {
       transform: scale(1.05);
   }

   .ab-info {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       background: linear-gradient(to top, rgba(15, 23, 42, 0.9), transparent);
       color: var(--white-color);
       padding: 2rem 1.5rem 1.5rem;
       transform: translateY(100%);
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .ab-member:hover .ab-info {
       transform: translateY(0);
   }

   .ab-name {
       font-size: 1.25rem;
       font-weight: 700;
       margin-bottom: 0.25rem;
   }

   .ab-role {
       color: var(--secondary-color);
       font-size: 0.875rem;
       margin-bottom: 1rem;
   }

   .ab-social {
       display: flex;
       gap: 0.75rem;
   }

   .ab-social a {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 36px;
       height: 36px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 50%;
       color: var(--white-color);
       text-decoration: none;
       transition: all 0.3s ease;
   }

   .ab-social a:hover {
       background: var(--main-color);
       transform: translateY(-2px);
   }

   /* Partners */
   .ab-logos {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
       gap: 2rem;
       align-items: center;
   }

   .ab-logo {
       background: var(--white-color);
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       height: 100px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       font-weight: 700;
       color: var(--black-color);
       transition: all 0.3s ease;
   }

   .ab-logo:hover {
       border-color: var(--main-color);
       transform: translateY(-3px);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
   }

   /* CTA Band */
   .ab-cta-band {
       background: linear-gradient(135deg, var(--main-color), #ff2e63);
       color: var(--white-color);
       padding: 2.5rem;
       border-radius: 12px;
       margin-top: 2rem;
   }

   .ab-cta-band h3 {
       color: var(--white-color);
   }

   /* Animations */
   @keyframes countUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   /* Intersection Observer Animations */
   .ab-animate {
       animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }

   /* Responsive Design */
   @media (max-width: 992px) {
       .ab-title {
           font-size: 2.5rem;
       }

       .ab-stats {
           grid-template-columns: repeat(2, 1fr);
       }

       .ab-logos {
           grid-template-columns: repeat(3, 1fr);
       }
   }

   @media (max-width: 768px) {
       .ab-hero {
           padding: 3rem 0 2rem;
       }

       .ab-title {
           font-size: 2rem;
       }

       .ab-sub {
           font-size: 1rem;
       }

       .ab-btn {
           padding: 0.75rem 1.5rem;
           font-size: 0.875rem;
       }

       .ab-stats {
           grid-template-columns: 1fr;
           gap: 1rem;
       }

       .ab-cta-band {
           text-align: center;
       }
   }

   /* ====================faq page start here============================ */
   .fq-hero {
       background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
       padding: 3rem 0 2rem;
       color: var(--white-color);
       position: relative;
       overflow: hidden;
   }

   .fq-hero::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, var(--main-color), var(--secondary-color));
   }

   .fq-title {
       color: var(--white-color);
       font-weight: 800;
       line-height: 1.2;
       margin-bottom: 0.5rem;
       font-size: 2.5rem;
   }

   .fq-sub {
       color: rgba(255, 255, 255, 0.8);
       font-size: 1.125rem;
       max-width: 600px;
   }

   .fq-count {
       display: inline-block;
       background: rgba(255, 255, 255, 0.1);
       padding: 0.5rem 1rem;
       border-radius: 20px;
       font-size: 0.875rem;
       margin-top: 1rem;
       backdrop-filter: blur(10px);
   }

   .fq-count span {
       color: var(--secondary-color);
       font-weight: 700;
   }

   /* Search Bar */
   .fq-searchbar {
       max-width: 400px;
   }

   .fq-searchbar .input-group {
       background: rgba(255, 255, 255, 0.1);
       border: 2px solid rgba(255, 255, 255, 0.2);
       border-radius: 12px;
       backdrop-filter: blur(10px);
       overflow: hidden;
   }

   .fq-searchbar .input-group-text {
       border: none;
       color: rgba(255, 255, 255, 0.7);
       background: transparent;
       padding: 0.875rem 1.25rem;
   }

   .fq-searchbar .form-control {
       background: transparent;
       border: none;
       color: var(--white-color);
       padding: 0.875rem 0;
       font-size: 1rem;
   }

   .fq-searchbar .form-control::placeholder {
       color: rgba(255, 255, 255, 0.5);
   }

   .fq-searchbar .form-control:focus {
       background: transparent;
       color: var(--white-color);
       box-shadow: none;
   }

   .fq-searchbar .btn {
       border-color: rgba(255, 255, 255, 0.3);
       color: rgba(255, 255, 255, 0.7);
       padding: 0.875rem 1.25rem;
       transition: all 0.3s ease;
   }

   .fq-searchbar .btn:hover {
       background: var(--main-color);
       border-color: var(--main-color);
       color: var(--white-color);
   }

   /* Category Tabs */
   .fq-tabs {
       display: flex;
       flex-wrap: nowrap;
       overflow-x: auto;
       gap: 0.5rem;
       padding: 1rem 0;
       -webkit-overflow-scrolling: touch;
       scrollbar-width: none;
   }

   .fq-tabs::-webkit-scrollbar {
       display: none;
   }

   .fq-tab {
       flex: 0 0 auto;
       padding: 0.75rem 1.5rem;
       background: rgba(255, 255, 255, 0.1);
       border: 2px solid transparent;
       border-radius: 8px;
       color: rgba(255, 255, 255, 0.7);
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       white-space: nowrap;
       position: relative;
       overflow: hidden;
   }

   .fq-tab::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
       transition: left 0.5s ease;
   }

   .fq-tab:hover::before {
       left: 100%;
   }

   .fq-tab:hover {
       background: rgba(224, 2, 67, 0.2);
       color: var(--white-color);
       transform: translateY(-2px);
   }

   .fq-tab.active {
       background: var(--main-color);
       color: var(--white-color);
       border-color: var(--main-color);
       box-shadow: 0 4px 15px rgba(224, 2, 67, 0.3);
   }

   /* Main Content */
   .fq-main {
       padding: 3rem 0;
       background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
   }

   .fq-card {
       background: var(--white-color);
       border-radius: 12px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
       border: 1px solid #e2e8f0;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .fq-card:hover {
       transform: translateY(-3px);
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
   }

   .fq-tag {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       background: linear-gradient(135deg, var(--secondary-color), #f9e076);
       color: #1e293b;
       padding: 0.375rem 1rem;
       border-radius: 20px;
       font-size: 0.75rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   /* Accordion Styles */
   .fq-accordion {
       margin-top: 1rem;
   }

   .fq-acc-item {
       border: 1px solid #e2e8f0;
       border-radius: 8px;
       margin-bottom: 0.75rem;
       overflow: hidden;
       background: var(--white-color);
       transition: all 0.3s ease;
   }

   .fq-acc-item:last-child {
       margin-bottom: 0;
   }

   .fq-acc-item.active {
       border-color: var(--main-color);
       box-shadow: 0 4px 15px rgba(224, 2, 67, 0.1);
   }

   .fq-acc-btn {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1.25rem 1.5rem;
       background: var(--white-color);
       border: none;
       text-align: left;
       color: var(--black-color);
       font-weight: 600;
       font-size: 1rem;
       cursor: pointer;
       transition: all 0.3s ease;
       position: relative;
   }

   .fq-acc-btn:hover {
       background: #f8fafc;
       color: var(--main-color);
   }

   .fq-acc-btn::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 1px;
       background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
   }

   .fq-acc-icon {
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       font-size: 1.25rem;
       color: var(--text-color);
   }

   .fq-acc-btn[aria-expanded="true"] .fq-acc-icon {
       transform: rotate(180deg);
       color: var(--main-color);
   }

   .fq-acc-panel {
       padding: 0 1.5rem;
       max-height: 0;
       overflow: hidden;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       opacity: 0;
   }

   .fq-acc-panel.show {
       padding: 1.5rem 1.5rem;
       max-height: 500px;
       opacity: 1;
   }

   .fq-acc-panel p {
       color: var(--text-color);
       line-height: 1.6;
       margin-bottom: 0;
   }

   /* CTA Section */
   .fq-cta {
       background: linear-gradient(135deg, var(--main-color), #ff2e63);
       padding: 2rem;
       border-radius: 12px;
       color: var(--white-color);
       position: relative;
       overflow: hidden;
   }

   .fq-cta::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
       background-size: 20px 20px;
       opacity: 0.3;
       animation: float 20s linear infinite;
   }

   .fq-cta h5 {
       color: var(--white-color);
       font-weight: 700;
   }

   .fq-cta .fq-sub {
       color: rgba(255, 255, 255, 0.9);
   }

   .fq-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.875rem 2rem;
       background: var(--white-color);
       color: var(--main-color);
       border: 2px solid var(--white-color);
       border-radius: 8px;
       font-weight: 600;
       text-decoration: none;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       z-index: 1;
   }

   .fq-btn:hover {
       background: transparent;
       color: var(--white-color);
       transform: translateY(-2px);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
   }

   .fq-btn-primary {
       background: var(--secondary-color);
       color: #1e293b;
       border-color: var(--secondary-color);
   }

   .fq-btn-primary:hover {
       background: transparent;
       color: var(--white-color);
   }

   /* Animations */
   @keyframes float {
       0% {
           transform: rotate(0deg);
       }

       100% {
           transform: rotate(360deg);
       }
   }

   @keyframes slideIn {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes highlight {

       0%,
       100% {
           background-color: transparent;
       }

       50% {
           background-color: rgba(248, 213, 83, 0.2);
       }
   }

   .fq-animate {
       animation: slideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }

   .fq-highlight {
       animation: highlight 1.5s ease;
   }

   /* Responsive Design */
   @media (max-width: 992px) {
       .fq-title {
           font-size: 2rem;
       }

       .fq-tabs {
           padding: 0.5rem 0;
       }

       .fq-tab {
           padding: 0.625rem 1.25rem;
           font-size: 0.875rem;
       }
   }

   @media (max-width: 768px) {
       .fq-hero {
           padding: 2rem 0 1.5rem;
       }

       .fq-title {
           font-size: 1.75rem;
       }

       .fq-sub {
           font-size: 1rem;
       }

       .fq-acc-btn {
           padding: 1rem 1.25rem;
           font-size: 0.9375rem;
       }

       .fq-cta {
           text-align: center;
           padding: 1.5rem;
       }

       .fq-btn {
           width: 100%;
           justify-content: center;
       }
   }

   /* ========================privacy policy page start here============================ */

   .pp-hero {
       background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
       padding: 3rem 0 2rem;
       color: var(--white-color);
       position: relative;
       overflow: hidden;
   }

   .pp-hero::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, var(--main-color), var(--secondary-color));
   }

   .pp-breadcrumb a {
       color: rgba(255, 255, 255, 0.7);
       text-decoration: none;
       font-size: 0.875rem;
       transition: color 0.3s ease;
   }

   .pp-breadcrumb a:hover {
       color: var(--secondary-color);
   }

   .pp-title {
       color: var(--white-color);
       font-weight: 800;
       line-height: 1.2;
       margin-bottom: 0.5rem;
       font-size: 2.5rem;
   }

   .pp-sub {
       color: rgba(255, 255, 255, 0.8);
       font-size: 1rem;
       margin-bottom: 0.25rem;
   }

   .pp-sub time {
       color: var(--secondary-color);
       font-weight: 600;
   }

   .pp-cta-row {
       display: flex;
       gap: 1rem;
       flex-wrap: wrap;
   }

   .pp-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.75rem 1.5rem;
       background: rgba(255, 255, 255, 0.1);
       color: var(--white-color);
       border: 2px solid rgba(255, 255, 255, 0.2);
       border-radius: 8px;
       font-weight: 600;
       text-decoration: none;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       backdrop-filter: blur(10px);
       font-size: 0.9375rem;
   }

   .pp-btn:hover {
       background: var(--main-color);
       border-color: var(--main-color);
       transform: translateY(-2px);
       box-shadow: 0 8px 20px rgba(224, 2, 67, 0.3);
   }

   .pp-btn-primary {
       background: var(--main-color);
       border-color: var(--main-color);
   }

   .pp-btn-primary:hover {
       background: #c6003a;
       border-color: #c6003a;
   }

   .pp-btn-danger {
       background: rgba(239, 68, 68, 0.1);
       border-color: rgba(239, 68, 68, 0.3);
       color: #fca5a5;
   }

   .pp-btn-danger:hover {
       background: #ef4444;
       border-color: #ef4444;
       color: var(--white-color);
   }

   /* Main Content */
   .pp-main {
       padding: 3rem 0;
       background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
       min-height: 100vh;
   }

   .pp-card {
       background: var(--white-color);
       border-radius: 12px;
       border: 1px solid #e2e8f0;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
       padding: 2rem;
       transition: all 0.3s ease;
   }

   .pp-card:hover {
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
   }

   /* Table of Contents */
   .pp-toc {
       position: sticky;
       top: 2rem;
   }

   .pp-toc h6 {
       color: var(--black-color);
       font-weight: 700;
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: 1rem;
   }

   #pp-search {
       background: #f8fafc;
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       padding: 0.625rem 1rem;
       font-size: 0.875rem;
       transition: all 0.3s ease;
       margin-bottom: 1rem;
   }

   #pp-search:focus {
       border-color: var(--main-color);
       box-shadow: 0 0 0 3px rgba(224, 2, 67, 0.1);
       background: var(--white-color);
   }

   .pp-toc-list {
       list-style: none;
       padding: 0;
       margin: 0;
       max-height: calc(100vh - 300px);
       overflow-y: auto;
       scrollbar-width: thin;
       scrollbar-color: var(--main-color) #f1f5f9;
   }

   .pp-toc-list::-webkit-scrollbar {
       width: 4px;
   }

   .pp-toc-list::-webkit-scrollbar-track {
       background: #f1f5f9;
       border-radius: 2px;
   }

   .pp-toc-list::-webkit-scrollbar-thumb {
       background: var(--main-color);
       border-radius: 2px;
   }

   .pp-toc-list li {
       margin-bottom: 0.5rem;
   }

   .pp-toc-list a {
       display: block;
       padding: 0.75rem 1rem;
       color: var(--text-color);
       text-decoration: none;
       border-radius: 8px;
       font-size: 0.9375rem;
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
   }

   .pp-toc-list a::before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 3px;
       background: var(--main-color);
       transform: translateX(-100%);
       transition: transform 0.3s ease;
   }

   .pp-toc-list a:hover {
       background: #f8fafc;
       color: var(--black-color);
       padding-left: 1.5rem;
   }

   .pp-toc-list a:hover::before {
       transform: translateX(0);
   }

   .pp-toc-list a.active {
       background: rgba(224, 2, 67, 0.05);
       color: var(--main-color);
       font-weight: 600;
       padding-left: 1.5rem;
   }

   .pp-toc-list a.active::before {
       transform: translateX(0);
   }

   /* Content Sections */
   .pp-content .pp-card {
       padding: 2.5rem;
   }

   .pp-section {
       margin-bottom: 3rem;
       padding-bottom: 3rem;
       border-bottom: 1px solid #e2e8f0;
       scroll-margin-top: 2rem;
   }

   .pp-section:last-of-type {
       margin-bottom: 0;
       padding-bottom: 0;
       border-bottom: none;
   }

   .pp-section h3 {
       color: var(--black-color);
       font-weight: 800;
       font-size: 1.5rem;
       margin-bottom: 1.5rem;
   }

   .pp-tag {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       background: linear-gradient(135deg, var(--secondary-color), #f9e076);
       color: #1e293b;
       padding: 0.5rem 1rem;
       border-radius: 20px;
       font-size: 0.75rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   .pp-callout {
       background: linear-gradient(135deg, rgba(224, 2, 67, 0.05), rgba(248, 213, 83, 0.05));
       border-left: 4px solid var(--main-color);
       padding: 1.25rem;
       border-radius: 0 8px 8px 0;
       margin: 1.5rem 0;
   }

   .pp-callout strong {
       color: var(--main-color);
   }

   .pp-list {
       list-style: none;
       padding: 0;
       margin: 1.5rem 0;
   }

   .pp-list li {
       padding: 0.75rem 0 0.75rem 1.75rem;
       color: var(--text-color);
       position: relative;
       line-height: 1.6;
   }

   .pp-list li::before {
       content: '✓';
       position: absolute;
       left: 0;
       color: var(--main-color);
       font-weight: bold;
   }

   .pp-meta {
       color: var(--text-color);
       font-size: 0.875rem;
       font-style: italic;
       margin-top: 1rem;
       padding: 1rem;
       background: #f8fafc;
       border-radius: 8px;
       border-left: 3px solid var(--text-color);
   }

   /* Accordion */
   .pp-accordion {
       margin: 1rem 0;
       border-radius: 8px;
       overflow: hidden;
   }

   .pp-acc-trigger {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1.25rem 1.5rem;
       background: #f8fafc;
       border: none;
       text-align: left;
       color: var(--black-color);
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s ease;
       border-bottom: 1px solid #e2e8f0;
   }

   .pp-acc-trigger:hover {
       background: #f1f5f9;
       color: var(--main-color);
   }

   .pp-acc-trigger[aria-expanded="true"] {
       background: rgba(224, 2, 67, 0.05);
       color: var(--main-color);
       border-bottom-color: transparent;
   }

   .pp-acc-trigger i {
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .pp-acc-trigger[aria-expanded="true"] i {
       transform: rotate(180deg);
   }

   .pp-acc-panel {
       background: var(--white-color);
       padding: 0;
       max-height: 0;
       overflow: hidden;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .pp-acc-panel:not(.d-none) {
       padding: 1.5rem;
       max-height: 1000px;
   }

   /* Cookie Modal */
   .pp-cookie-modal {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(0, 0, 0, 0.5);
       backdrop-filter: blur(5px);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 9999;
       opacity: 0;
       visibility: hidden;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .pp-cookie-modal[aria-hidden="false"] {
       opacity: 1;
       visibility: visible;
   }

   .pp-cookie-dialog {
       background: var(--white-color);
       border-radius: 16px;
       width: 90%;
       max-width: 500px;
       max-height: 90vh;
       overflow: hidden;
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
       transform: translateY(20px);
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .pp-cookie-modal[aria-hidden="false"] .pp-cookie-dialog {
       transform: translateY(0);
   }

   .pp-cookie-header {
       background: linear-gradient(135deg, #0f172a, #1e293b);
       color: var(--white-color);
       padding: 1.5rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
   }

   .pp-cookie-header h5 {
       color: var(--white-color);
       font-weight: 700;
       display: flex;
       align-items: center;
   }

   .pp-cookie-body {
       padding: 1.5rem;
       overflow-y: auto;
       max-height: 60vh;
   }

   .pp-switch {
       position: relative;
       display: inline-flex;
       align-items: center;
       gap: 0.75rem;
       cursor: pointer;
   }

   .pp-switch input {
       position: absolute;
       opacity: 0;
       width: 0;
       height: 0;
   }

   .pp-switch span {
       display: inline-block;
       width: 50px;
       height: 26px;
       background: #e2e8f0;
       border-radius: 13px;
       position: relative;
       transition: all 0.3s ease;
   }

   .pp-switch span::after {
       content: '';
       position: absolute;
       top: 3px;
       left: 3px;
       width: 20px;
       height: 20px;
       background: var(--white-color);
       border-radius: 50%;
       transition: transform 0.3s ease;
   }

   .pp-switch input:checked+span {
       background: var(--main-color);
   }

   .pp-switch input:checked+span::after {
       transform: translateX(24px);
   }

   .pp-switch input:disabled+span {
       opacity: 0.5;
       cursor: not-allowed;
   }

   .pp-cookie-footer {
       padding: 1.5rem;
       background: #f8fafc;
       border-top: 1px solid #e2e8f0;
       display: flex;
       gap: 1rem;
       justify-content: space-between;
       flex-wrap: wrap;
   }

   .pp-cookie-footer .pp-btn {
       flex: 1;
       min-width: 120px;
       justify-content: center;
   }

   /* Text Highlight */
   mark {
       background: rgba(248, 213, 83, 0.4);
       padding: 0 2px;
       border-radius: 2px;
       color: inherit;
   }

   /* Floating Scroll to Top Button */
   .pp-scroll-top {
       position: fixed;
       bottom: 2rem;
       right: 2rem;
       width: 50px;
       height: 50px;
       background: var(--main-color);
       color: var(--white-color);
       border: none;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       opacity: 0;
       visibility: hidden;
       transform: translateY(20px);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: 100;
       box-shadow: 0 4px 15px rgba(224, 2, 67, 0.3);
   }

   .pp-scroll-top:hover {
       background: #c6003a;
       transform: translateY(-5px);
   }

   .pp-scroll-top.visible {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }

   /* Responsive Design */
   @media (max-width: 992px) {
       .pp-title {
           font-size: 2rem;
       }

       .pp-cta-row {
           width: 100%;
           margin-top: 1rem;
       }

       .pp-btn {
           flex: 1;
           min-width: 150px;
           justify-content: center;
       }

       .pp-toc {
           position: static;
           margin-bottom: 2rem;
       }

       .pp-toc-list {
           max-height: none;
       }
   }

   @media (max-width: 768px) {
       .pp-hero {
           padding: 2rem 0 1.5rem;
       }

       .pp-title {
           font-size: 1.75rem;
       }

       .pp-card {
           padding: 1.5rem;
       }

       .pp-content .pp-card {
           padding: 1.5rem;
       }

       .pp-section {
           margin-bottom: 2rem;
           padding-bottom: 2rem;
       }

       .pp-cookie-footer {
           flex-direction: column;
       }

       .pp-cookie-footer .pp-btn {
           width: 100%;
       }
   }

   /* Print Styles */
   @media print {
       .pp-hero {
           background: #fff !important;
           color: #000 !important;
           padding: 1rem 0 !important;
       }

       .pp-breadcrumb,
       .pp-cta-row,
       .pp-toc,
       .pp-cookie-modal,
       .pp-scroll-top {
           display: none !important;
       }

       .pp-title {
           color: #000 !important;
           font-size: 2rem !important;
       }

       .pp-sub {
           color: #666 !important;
       }

       .pp-card {
           box-shadow: none !important;
           border: 1px solid #ddd !important;
           page-break-inside: avoid;
       }

       .pp-section {
           page-break-inside: avoid;
       }
   }

   /* Animations */
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .pp-animate {
       animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }

   /* ===================term and condition page start here================================ */
   .tc-hero {
       background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
       padding: 3rem 0 2rem;
       color: var(--white-color);
       position: relative;
       overflow: hidden;
   }

   .tc-hero::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, var(--main-color), var(--secondary-color));
   }

   .tc-hero::after {
       content: '';
       position: absolute;
       top: 0;
       right: -100px;
       width: 300px;
       height: 300px;
       background: radial-gradient(circle, rgba(224, 2, 67, 0.1) 0%, transparent 70%);
       pointer-events: none;
   }

   .tc-breadcrumb a {
       color: rgba(255, 255, 255, 0.7);
       text-decoration: none;
       font-size: 0.875rem;
       transition: all 0.3s ease;
       display: inline-flex;
       align-items: center;
   }

   .tc-breadcrumb a:hover {
       color: var(--secondary-color);
       transform: translateX(-3px);
   }

   .tc-title {
       color: var(--white-color);
       font-weight: 800;
       line-height: 1.2;
       margin-bottom: 0.5rem;
       font-size: 2.5rem;
       position: relative;
       display: inline-block;
   }

   .tc-title::after {
       content: '';
       position: absolute;
       bottom: -10px;
       left: 0;
       width: 60px;
       height: 3px;
       background: var(--main-color);
       border-radius: 2px;
   }

   .tc-sub {
       color: rgba(255, 255, 255, 0.8);
       font-size: 1rem;
       margin-bottom: 0.25rem;
   }

   .tc-sub time {
       color: var(--secondary-color);
       font-weight: 600;
       background: rgba(248, 213, 83, 0.1);
       padding: 0.25rem 0.75rem;
       border-radius: 4px;
       display: inline-block;
   }

   .tc-cta-row {
       display: flex;
       gap: 1rem;
       flex-wrap: wrap;
   }

   .tc-btn {
       display: inline-flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.875rem 1.75rem;
       background: rgba(255, 255, 255, 0.1);
       color: var(--white-color);
       border: 2px solid rgba(255, 255, 255, 0.2);
       border-radius: 8px;
       font-weight: 600;
       text-decoration: none;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       backdrop-filter: blur(10px);
       font-size: 0.9375rem;
       position: relative;
       overflow: hidden;
   }

   .tc-btn::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.1);
       transform: translate(-50%, -50%);
       transition: width 0.6s, height 0.6s;
   }

   .tc-btn:hover::before {
       width: 300px;
       height: 300px;
   }

   .tc-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
   }

   .tc-btn-primary {
       background: linear-gradient(135deg, var(--main-color), #ff2e63);
       border: none;
   }

   .tc-btn-primary:hover {
       background: linear-gradient(135deg, #c6003a, #e11d48);
       box-shadow: 0 12px 30px rgba(224, 2, 67, 0.4);
   }

   .tc-btn-primary:disabled {
       opacity: 0.7;
       cursor: not-allowed;
       transform: none !important;
   }

   .tc-btn-primary:disabled:hover::before {
       width: 0;
       height: 0;
   }

   /* Main Content */
   .tc-main {
       padding: 3rem 0;
       background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
       min-height: 100vh;
   }

   .tc-card {
       background: var(--white-color);
       border-radius: 16px;
       border: 1px solid #e2e8f0;
       box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06);
       padding: 1.5rem;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
   }

   .tc-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, var(--main-color), var(--secondary-color));
   }

   .tc-card:hover {
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
       transform: translateY(-2px);
   }

   /* Table of Contents */
   .tc-toc {
       position: sticky;
       top: 2rem;
   }

   .tc-toc h6 {
       color: var(--black-color);
       font-weight: 700;
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: 1rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }

   .tc-toc h6::before {
       content: '📋';
       font-size: 1rem;
   }

   #tc-search {
       background: #f8fafc;
       border: 2px solid #e2e8f0;
       border-radius: 8px;
       padding: 0.75rem 1rem;
       font-size: 0.875rem;
       transition: all 0.3s ease;
       margin-bottom: 1.5rem;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 1rem center;
       background-size: 16px;
       padding-right: 2.5rem;
   }

   #tc-search:focus {
       border-color: var(--main-color);
       box-shadow: 0 0 0 3px rgba(224, 2, 67, 0.1);
       background-color: var(--white-color);
   }

   .tc-toc-list {
       list-style: none;
       padding: 0;
       margin: 0;
       max-height: calc(100vh - 300px);
       overflow-y: auto;
       scrollbar-width: thin;
       scrollbar-color: var(--main-color) #f1f5f9;
   }

   .tc-toc-list::-webkit-scrollbar {
       width: 4px;
   }

   .tc-toc-list::-webkit-scrollbar-track {
       background: #f1f5f9;
       border-radius: 2px;
   }

   .tc-toc-list::-webkit-scrollbar-thumb {
       background: linear-gradient(to bottom, var(--main-color), var(--secondary-color));
       border-radius: 2px;
   }

   .tc-toc-list li {
       margin-bottom: 0.375rem;
       position: relative;
   }

   .tc-toc-list a {
       display: flex;
       align-items: center;
       padding: 0.875rem 0rem;
       color: var(--text-color);
       text-decoration: none;
       border-radius: 8px;
       font-size: 0.9375rem;
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
       border-left: 3px solid transparent;
   }

   .tc-toc-list a::before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 3px;
       background: linear-gradient(to bottom, var(--main-color), var(--secondary-color));
       transform: translateX(-100%);
       transition: transform 0.3s ease;
   }

   .tc-toc-list a:hover {
       background: rgba(224, 2, 67, 0.05);
       color: var(--main-color);
       padding-left: 1.25rem;
   }

   .tc-toc-list a:hover::before {
       transform: translateX(0);
   }

   .tc-toc-list a.active {
       background: linear-gradient(135deg, rgba(224, 2, 67, 0.1), rgba(248, 213, 83, 0.1));
       color: var(--main-color);
       font-weight: 700;
       border-left: 3px solid var(--main-color);
       padding-left: 1.25rem;
   }

   .tc-toc-list a.active::before {
       transform: translateX(0);
   }

   /* Content Sections */
   .tc-content .tc-card {
       padding: 3rem;
       counter-reset: section;
   }

   .tc-section {
       margin-bottom: 2.5rem;
       /* padding-bottom: 3.5rem; */
       border-bottom: 1px solid #e2e8f0;
       scroll-margin-top: 1rem;
       counter-increment: section;
       position: relative;
   }

   .tc-section:last-of-type {
       margin-bottom: 0;
       padding-bottom: 0;
       border-bottom: none;
   }

   .tc-section h3 {
       color: var(--black-color);
       font-weight: 700;
       font-size: 1.2rem;
       margin-bottom: 1.5rem;
       position: relative;
       display: flex;
       align-items: center;
       gap: 1rem;
   }

   /* .tc-section h3::before {
    content: counter(section) '.';
    color: var(--main-color);
    font-size: 1.5rem;
    font-weight: 900;
    opacity: 0.8;
} */

   .tc-tag {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       background: linear-gradient(135deg, var(--secondary-color), #f9e076);
       color: #1e293b;
       padding: 0.5rem 1.25rem;
       border-radius: 20px;
       font-size: 0.75rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       box-shadow: 0 2px 8px rgba(248, 213, 83, 0.3);
   }

   .tc-callout {
       background: linear-gradient(135deg, rgba(224, 2, 67, 0.05), rgba(248, 213, 83, 0.05));
       border-left: 4px solid var(--main-color);
       padding: 1.5rem;
       border-radius: 0 12px 12px 0;
       margin: 1.5rem 0;
       position: relative;
       overflow: hidden;
   }

   .tc-callout::before {
       content: 'ℹ️';
       position: absolute;
       right: 1rem;
       top: 1rem;
       opacity: 0.2;
       font-size: 2rem;
   }

   .tc-list {
       list-style: none;
       padding: 0;
       margin: 1.5rem 0;
   }

   .tc-list li {
       padding: 0.875rem 0 0.875rem 2rem;
       color: var(--text-color);
       position: relative;
       line-height: 1.7;
       border-bottom: 1px dashed #e2e8f0;
   }

   .tc-list li:last-child {
       border-bottom: none;
   }

   .tc-list li::before {
       content: '→';
       position: absolute;
       left: 0;
       color: var(--main-color);
       font-weight: bold;
       font-size: 1.2rem;
   }

   /* Accordion */
   .tc-accordion {
       margin: 1rem 0;
       border: 2px solid #e2e8f0;
       border-radius: 12px;
       overflow: hidden;
       background: #f8fafc;
   }

   .tc-acc-trigger {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1.5rem;
       background: #f8fafc;
       border: none;
       text-align: left;
       color: var(--black-color);
       font-weight: 700;
       cursor: pointer;
       transition: all 0.3s ease;
       font-size: 1.125rem;
   }

   .tc-acc-trigger:hover {
       background: rgba(224, 2, 67, 0.05);
       color: var(--main-color);
   }

   .tc-acc-trigger[aria-expanded="true"] {
       background: linear-gradient(135deg, rgba(224, 2, 67, 0.1), rgba(248, 213, 83, 0.1));
       color: var(--main-color);
       border-bottom: 2px solid var(--main-color);
   }

   .tc-acc-trigger i {
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       color: var(--text-color);
   }

   .tc-acc-trigger[aria-expanded="true"] i {
       transform: rotate(180deg);
       color: var(--main-color);
   }

   .tc-acc-panel {
       background: var(--white-color);
       padding: 0;
       max-height: 0;
       overflow: hidden;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .tc-acc-panel:not(.d-none) {
       padding: 1.5rem;
       max-height: 1000px;
   }

   /* Text Highlight */
   mark {
       background: linear-gradient(120deg, rgba(248, 213, 83, 0.3) 0%, rgba(248, 213, 83, 0.7) 100%);
       padding: 0.125rem 0.375rem;
       border-radius: 3px;
       color: inherit;
       font-weight: 600;
   }

   /* Acceptance Toast */
   .tc-toast {
       position: fixed;
       bottom: 2rem;
       right: 2rem;
       background: linear-gradient(135deg, var(--main-color), #ff2e63);
       color: var(--white-color);
       padding: 1.25rem 1.75rem;
       border-radius: 12px;
       box-shadow: 0 10px 30px rgba(224, 2, 67, 0.3);
       transform: translateY(100px);
       opacity: 0;
       transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
       z-index: 1000;
       max-width: 350px;
       display: flex;
       align-items: center;
       gap: 1rem;
   }

   .tc-toast.show {
       transform: translateY(0);
       opacity: 1;
   }

   .tc-toast-icon {
       font-size: 1.5rem;
   }

   .tc-toast-content {
       flex: 1;
   }

   .tc-toast-content strong {
       display: block;
       font-size: 1rem;
       margin-bottom: 0.25rem;
   }

   .tc-toast-content .small {
       opacity: 0.9;
       font-size: 0.875rem;
   }

   /* Floating Scroll to Top Button */
   .tc-scroll-top {
       position: fixed;
       bottom: 2rem;
       right: 2rem;
       width: 56px;
       height: 56px;
       background: linear-gradient(135deg, var(--main-color), #ff2e63);
       color: var(--white-color);
       border: none;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       opacity: 0;
       visibility: hidden;
       transform: translateY(20px) scale(0.8);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: 100;
       box-shadow: 0 6px 20px rgba(224, 2, 67, 0.4);
       font-size: 1.25rem;
   }

   .tc-scroll-top:hover {
       transform: translateY(-5px) scale(1);
       box-shadow: 0 12px 30px rgba(224, 2, 67, 0.5);
   }

   .tc-scroll-top.visible {
       opacity: 1;
       visibility: visible;
       transform: translateY(0) scale(1);
   }

   /* Responsive Design */
   @media (max-width: 1200px) {
       .tc-content .tc-card {
           padding: 2rem;
       }

       .tc-section {
           margin-bottom: 2.5rem;
           padding-bottom: 2.5rem;
       }
   }

   @media (max-width: 992px) {
       .tc-title {
           font-size: 2rem;
       }

       .tc-cta-row {
           width: 100%;
           margin-top: 1.5rem;
       }

       .tc-btn {
           flex: 1;
           min-width: 200px;
           justify-content: center;
       }

       .tc-toc {
           position: static;
           margin-bottom: 2rem;
       }

       .tc-toc-list {
           max-height: none;
       }

       .tc-content .tc-card {
           padding: 1.75rem;
       }
   }

   @media (max-width: 768px) {
       .tc-hero {
           padding: 2rem 0 1.5rem;
       }

       .tc-title {
           font-size: 1.75rem;
       }

       .tc-section h3 {
           font-size: 1.5rem;
           flex-direction: column;
           align-items: flex-start;
           gap: 0.5rem;
       }

       .tc-tag {
           align-self: flex-start;
       }

       .tc-cta-row {
           flex-direction: column;
       }

       .tc-btn {
           width: 100%;
       }
   }

   /* Print Styles */
   @media print {
       .tc-hero {
           background: #fff !important;
           color: #000 !important;
           padding: 1rem 0 !important;
       }

       .tc-breadcrumb,
       .tc-cta-row,
       .tc-toc,
       .tc-scroll-top,
       .tc-toast {
           display: none !important;
       }

       .tc-title {
           color: #000 !important;
           font-size: 2rem !important;
       }

       .tc-sub {
           color: #666 !important;
       }

       .tc-card {
           box-shadow: none !important;
           border: 1px solid #ddd !important;
           page-break-inside: avoid;
       }

       .tc-section {
           page-break-inside: avoid;
           break-inside: avoid;
       }

       .tc-list li {
           border-bottom: 1px solid #ddd !important;
       }
   }

   /* Animations */
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes pulse {

       0%,
       100% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.05);
       }
   }

   .tc-animate {
       animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }

   .tc-pulse {
       animation: pulse 2s infinite;
   }

   /* ============ plateform page start here=================== */
    .instagram-page{
        padding: 50px 0px;
    }
   .instagram-page .insta-images{
      height: 400px;
      width: 100%;
      object-fit: cover;
   }
   .instagram-page .insta-images img{
    width: 100%;
    height: 100%;
    object-fit: cover;
   }