/* Base Styles and Variables */

 .scroll-top {

     position: fixed;

     visibility: hidden;

     opacity: 0;

     right: 15px;

     bottom: 15px;

     z-index: 99999;

     background-color: var(--accent-color);

     width: 40px;

     height: 40px;

     border-radius: 4px;

     transition: all 0.4s;

 }



 .scroll-top i {

     font-size: 24px;

     color: var(--light);

     line-height: 0;

 }



 .scroll-top:hover {

     background-color: color-mix(in srgb, var(--accent-color), transparent 20%);

     color: var(--contrast-color);

 }



 .scroll-top.active {

     visibility: visible;

     opacity: 1;

 }

 a {
     text-decoration: none;
 }

 :root {
     --heading-color: orangered;
     --subheading-color: #2cc197;
     --accent-color: #00a1e0;
     --primary: #3a86ff;
     --primary-dark: #2667cc;
     --secondary: #8338ec;
     --accent: var(--accent-color);
     --light: #f8f9fa;
     --dark: #0a1128;
     --glass-bg: rgba(255, 255, 255, 0.1);
     --glass-border: rgba(255, 255, 255, 0.2);
     --gradient-1: linear-gradient(135deg, var(--primary), var(--secondary));
     --gradient-2: linear-gradient(135deg, var(--secondary), var(--accent));
     --gradient-bg: linear-gradient(135deg, #0a1128, #1a2a52);
     --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
     --star-color: #ffcc00;


     /* Checkout specific colors */
     --checkout-glow: rgba(255, 107, 0, 0.6);
     --checkout-hologram: rgba(0, 194, 168, 0.3);
     --checkout-data-point: rgba(255, 107, 0, 0.8);
     --checkout-form-bg: rgba(18, 26, 46, 0.7);
     --checkout-input-focus: rgba(255, 107, 0, 0.3);
     --checkout-card-bg: linear-gradient(135deg, #1a2a52, #0a1128);
     --checkout-card-text: rgba(255, 255, 255, 0.8);
     --checkout-card-accent: var(--primary);


     /* Confirmation specific colors */
     --confirm-glow: rgba(75, 181, 67, 0.6);
     --confirm-hologram: rgba(0, 194, 168, 0.3);
     --confirm-grid-line: rgba(0, 194, 168, 0.2);
     --confirm-data-point: rgba(255, 107, 0, 0.8);
     --confirm-form-bg: rgba(18, 26, 46, 0.7);
     --confirm-input-bg: rgba(10, 17, 40, 0.5);
     --confirm-input-border: rgba(255, 255, 255, 0.1);
     --confirm-input-focus: rgba(255, 107, 0, 0.3);
     --confirm-receipt-bg: rgba(255, 255, 255, 0.05);
     --confirm-receipt-border: rgba(255, 255, 255, 0.1);
     --transition-speed: 0.3s;
     --border-radius: 8px;
     --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 }

 /* Reset and Base Styles */
 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background-color: var(--dark);
     line-height: 1.6;
     overflow-x: hidden;
     background-image:
         radial-gradient(circle at 10% 20%, rgba(110, 86, 207, 0.1) 0%, transparent 20%),
         radial-gradient(circle at 90% 80%, rgba(0, 217, 255, 0.1) 0%, transparent 20%),
         radial-gradient(circle at 50% 50%, rgba(255, 126, 219, 0.05) 0%, transparent 30%);
     background-attachment: fixed;
 }

 /* Typography */
 .ai-creation h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 1rem;
 }

 li {
     color: var(--subheading-color);
 }

 label {
     color: var(--light);
 }

 .ai-creation h1 {
     font-size: clamp(2.5rem, 5vw, 4rem);
     color: var(--heading-color);
     letter-spacing: -0.02em;
 }

 .ai-creation h2 {
     font-size: clamp(2rem, 4vw, 3rem);
     position: relative;
     display: inline-block;
     margin-bottom: 2rem;
     color: var(--heading-color);
 }

 .ai-creation h3 {
     font-size: clamp(1.5rem, 3vw, 2rem);
     margin-bottom: 1.5rem;
     color: var(--subheading-color);
 }

 .ai-creation h4 {
     font-size: clamp(1.2rem, 2vw, 1.5rem);
     margin-bottom: 1rem;
     color: var(--accent);
 }

 .ai-creation p {
     margin-bottom: 1.5rem;
     font-size: clamp(1rem, 2vw, 1.1rem);
     max-width: 800px;
     color: var(--light);
 }

 /* Layout */

 section {
     padding: 6rem 0;
     position: relative;
 }

 .conainer {
     padding: 50px 15px;
     ;
 }

 /* Hero Section */
 .ai-creation .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
     padding: 0;
 }

 .ai-creation .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url(../img/adbg.jpg);
     z-index: -1;
     background-size: cover;
     background-position: center;
     filter: blur(5px) brightness(0.6);
     transform: scale(1.1);
 }

 .ai-creation .hero-content {
     position: relative;
     z-index: 2;
     max-width: 800px;
 }


 /* 3D Animation Elements */
 .hero-3d-container {
     position: absolute;
     top: 0;
     right: 0;
     width: 50%;
     height: 100%;
     z-index: 1;
     perspective: 1000px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 @media (max-width: 992px) {
     .hero-3d-container {
         position: relative;
         width: 100%;
         height: 400px;
         margin-top: 3rem;
     }

     .hero {
         flex-direction: column;
         justify-content: center;
         margin: auto;
     }

     .hero-content {
         max-width: 100%;
         text-align: center;
     }
 }

 .floating-cube {
     position: absolute;
     width: 150px;
     height: 150px;
     transform-style: preserve-3d;
     animation: floatCube 20s infinite linear;
 }

 .floating-cube:nth-child(2) {
     width: 100px;
     height: 100px;
     top: 30%;
     right: 20%;
     animation-duration: 15s;
     animation-delay: -5s;
 }

 .floating-cube:nth-child(3) {
     width: 80px;
     height: 80px;
     bottom: 20%;
     right: 30%;
     animation-duration: 12s;
     animation-delay: -8s;
 }

 .cube-face {
     position: absolute;
     width: 100%;
     height: 100%;
     background: rgba(110, 86, 207, 0.1);
     border: 1px solid rgba(110, 86, 207, 0.3);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 2rem;
     color: var(--accent);
     backdrop-filter: blur(5px);
     box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
 }

 .cube-face:nth-child(1) {
     transform: translateZ(75px);
 }

 .cube-face:nth-child(2) {
     transform: rotateY(180deg) translateZ(75px);
 }

 .cube-face:nth-child(3) {
     transform: rotateY(90deg) translateZ(75px);
 }

 .cube-face:nth-child(4) {
     transform: rotateY(-90deg) translateZ(75px);
 }

 .cube-face:nth-child(5) {
     transform: rotateX(90deg) translateZ(75px);
 }

 .cube-face:nth-child(6) {
     transform: rotateX(-90deg) translateZ(75px);
 }

 .floating-cube:nth-child(2) .cube-face:nth-child(1) {
     transform: translateZ(50px);
 }

 .floating-cube:nth-child(2) .cube-face:nth-child(2) {
     transform: rotateY(180deg) translateZ(50px);
 }

 .floating-cube:nth-child(2) .cube-face:nth-child(3) {
     transform: rotateY(90deg) translateZ(50px);
 }

 .floating-cube:nth-child(2) .cube-face:nth-child(4) {
     transform: rotateY(-90deg) translateZ(50px);
 }

 .floating-cube:nth-child(2) .cube-face:nth-child(5) {
     transform: rotateX(90deg) translateZ(50px);
 }

 .floating-cube:nth-child(2) .cube-face:nth-child(6) {
     transform: rotateX(-90deg) translateZ(50px);
 }

 .floating-cube:nth-child(3) .cube-face:nth-child(1) {
     transform: translateZ(40px);
 }

 .floating-cube:nth-child(3) .cube-face:nth-child(2) {
     transform: rotateY(180deg) translateZ(40px);
 }

 .floating-cube:nth-child(3) .cube-face:nth-child(3) {
     transform: rotateY(90deg) translateZ(40px);
 }

 .floating-cube:nth-child(3) .cube-face:nth-child(4) {
     transform: rotateY(-90deg) translateZ(40px);
 }

 .floating-cube:nth-child(3) .cube-face:nth-child(5) {
     transform: rotateX(90deg) translateZ(40px);
 }

 .floating-cube:nth-child(3) .cube-face:nth-child(6) {
     transform: rotateX(-90deg) translateZ(40px);
 }

 @keyframes floatCube {
     0% {
         transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
     }

     100% {
         transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
     }
 }

 /* Glowing Orb */
 .glowing-orb {
     position: absolute;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(110, 86, 207, 0.3) 0%, rgba(110, 86, 207, 0) 70%);
     filter: blur(20px);
     animation: pulse 8s infinite alternate;
     z-index: -1;
 }

 .orb-1 {
     top: 20%;
     right: 10%;
     background: radial-gradient(circle, rgba(0, 217, 255, 0.3) 0%, rgba(0, 217, 255, 0) 70%);
     animation-delay: -2s;
 }

 .orb-2 {
     bottom: 10%;
     right: 30%;
     background: radial-gradient(circle, rgba(255, 126, 219, 0.3) 0%, rgba(255, 126, 219, 0) 70%);
     animation-delay: -4s;
 }

 @keyframes pulse {
     0% {
         transform: scale(0.8);
         opacity: 0.5;
     }

     100% {
         transform: scale(1.2);
         opacity: 0.8;
     }
 }

 /* Futuristic Button */
 .ai-creation .btn {
     display: inline-block;
     padding: 1rem 2.5rem;
     background: var(--gradient-1);
     color: white;
     border: none;
     border-radius: 50px;
     font-weight: 600;
     text-decoration: none;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     z-index: 1;
     cursor: pointer;
     box-shadow: 0 0 20px rgba(58, 134, 255, 0.5);
     font-size: 1.1rem;
 }

 .ai-creation .btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-2);
     z-index: -1;
     transition: var(--transition);
     opacity: 0;
 }

 .ai-creation .btn:hover::before {
     opacity: 1;
 }

 .ai-creation .btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 30px rgba(58, 134, 255, 0.7);
 }

 /* About Section */
 .about-section {
     padding: 6rem 2rem;
     position: relative;
     overflow: hidden;
 }

 .about-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, #05050d, var(--dark));
     z-index: -1;
 }

 .about-content {
     position: relative;
     z-index: 1;
 }

 .about-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
 }

 @media (max-width: 992px) {
     .about-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
     }
 }

 .about-image {
     position: relative;
     height: 500px;
     perspective: 1000px;
 }

 .floating-screen {
     position: absolute;
     width: 100%;
     height: 100%;
     background: rgba(10, 17, 40, 0.8);
     border: 1px solid var(--primary);
     border-radius: 10px;
     overflow: hidden;
     transform-style: preserve-3d;
     transform: rotateY(-20deg) rotateX(10deg);
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
     transition: var(--transition);
 }

 .floating-screen:hover {
     transform: rotateY(-15deg) rotateX(5deg) scale(1.05);
 }

 .screen-content {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 20px;
     display: flex;
     flex-direction: column;
 }

 .screen-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
 }

 .screen-title {
     font-size: 1.2rem;
     color: var(--accent-color);
 }

 .screen-controls {
     display: flex;
     gap: 10px;
 }

 .screen-control {
     width: 12px;
     height: 12px;
     border-radius: 50%;
 }

 .control-red {
     background-color: #ff5f57;
 }

 .control-yellow {
     background-color: #febc2e;
 }

 .control-green {
     background-color: #28c840;
 }

 .screen-body {
     flex: 1;
     overflow: hidden;
     position: relative;
 }

 .typing-text {
     font-family: monospace;
     font-size: 1rem;
     color: var(--light);
     white-space: pre-wrap;
     line-height: 1.5;
 }

 .cursor {
     display: inline-block;
     width: 10px;
     height: 20px;
     background-color: var(--accent-color);
     animation: blink 1s infinite;
     vertical-align: middle;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0;
     }
 }

 .screen-glow {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     background: linear-gradient(45deg,
             rgba(58, 134, 255, 0) 0%,
             rgba(58, 134, 255, 0.1) 50%,
             rgba(58, 134, 255, 0) 100%);
     animation: screenGlow 3s infinite alternate;
 }

 @keyframes screenGlow {
     0% {
         opacity: 0.3;
     }

     100% {
         opacity: 0.8;
     }
 }

 /* Features Section */
 .features-section {
     position: relative;
     background-color: #05050d38;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .feature-card {
     background: rgba(10, 17, 40, 0.5);
     border: 1px solid var(--glass-border);
     border-radius: 16px;
     padding: 2rem;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(10px);
     transform-style: preserve-3d;
     perspective: 1000px;
 }

 .feature-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg,
             rgba(58, 134, 255, 0.1) 0%,
             rgba(0, 161, 224, 0.1) 100%);
     opacity: 0;
     transition: var(--transition);
     z-index: -1;
 }

 .feature-card:hover {
     transform: translateY(-10px) rotateX(5deg);
     border-color: var(--accent-color);
     box-shadow: 0 10px 30px rgba(0, 161, 224, 0.2);
 }

 .feature-card:hover::before {
     opacity: 1;
 }

 .feature-icon {
     font-size: 2.5rem;
     margin-bottom: 1.5rem;
     color: var(--accent-color);
     transition: var(--transition);
 }

 .feature-card:hover .feature-icon {
     transform: translateZ(20px);
     color: var(--subheading-color);
 }

 .feature-title {
     font-size: 1.5rem;
     margin-bottom: 1rem;
     color: var(--subheading-color);
     transition: var(--transition);
 }

 .feature-card:hover .feature-title {
     transform: translateZ(15px);
     color: var(--accent-color);
 }

 .feature-description {
     color: rgba(248, 249, 250, 0.8);
     transition: var(--transition);
 }

 .feature-card:hover .feature-description {
     transform: translateZ(10px);
 }

 /* How It Works Section */
 .how-it-works {
     background: var(--dark);
     position: relative;
     overflow: hidden;
     background: linear-gradient(to bottom, rgba(10, 17, 40, 0.9), rgba(10, 17, 40, 0.7));
     z-index: 0;
     /* This makes the background sticky while scrolling */
 }

 .how-it-works::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/howbg.avif');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     filter: blur(3px) brightness(0.3);
     opacity: 0.5;
 }

 .step-connector {
     position: absolute;
     top: 80px;
     left: 40px;
     width: 2px;
     height: calc(100% - 80px);
     background: linear-gradient(to bottom, var(--primary), rgba(58, 134, 255, 0.1));
     z-index: 1;
 }

 .step:last-child .step-connector {
     display: none;
 }

 @media (max-width: 768px) {
     .step-connector {
         display: none;
     }
 }

 /* Benefits Section */
 .benefits-section {
     background: #05050d2a;
     position: relative;
     overflow: hidden;
 }

 .benefits-section::before {
     content: '';
     position: absolute;
     bottom: -50%;
     left: -50%;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle, rgba(131, 56, 236, 0.05) 0%, rgba(131, 56, 236, 0) 70%);
     z-index: 0;
 }

 .benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
     position: relative;
     z-index: 1;
 }


 .benefit-card {
     background: rgba(10, 17, 40, 0.5);
     border: 1px solid var(--glass-border);
     border-radius: 16px;
     padding: 2rem;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(10px);
     transform-style: preserve-3d;
     perspective: 1000px;
 }

 .benefit-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg,
             rgba(58, 134, 255, 0.1) 0%,
             rgba(0, 161, 224, 0.1) 100%);
     opacity: 0;
     transition: var(--transition);
     z-index: -1;
 }

 .benefit-card:hover {
     transform: translateY(-10px) rotateX(5deg);
     border-color: var(--accent-color);
     box-shadow: 0 10px 30px rgba(0, 161, 224, 0.2);
 }

 .benefit-card:hover::before {
     opacity: 1;
 }

 .benefit-icon {
     font-size: 2.5rem;
     margin-bottom: 1.5rem;
     color: var(--heading-color);
     transition: var(--transition);
 }

 .benefit-card:hover .benefit-icon {
     transform: scale(1.1);
     color: var(--accent-color);
 }

 /* Target Audience Section */
 .audience-section {
     background: var(--dark);
     position: relative;
 }

 .audience-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .audience-card {
     background: rgba(10, 17, 40, 0.5);
     border: 1px solid var(--glass-border);
     border-radius: 16px;
     padding: 2rem;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(10px);
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }

 .audience-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 0;
     background: linear-gradient(to top, rgba(58, 134, 255, 0.1), transparent);
     transition: var(--transition);
     z-index: -1;
 }

 .audience-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 30px rgba(58, 134, 255, 0.2);
 }

 .audience-card:hover::after {
     height: 100%;
 }

 .audience-icon {
     font-size: 3rem;
     margin-bottom: 1.5rem;
     color: var(--accent-color);
     transition: var(--transition);
     width: 80px;
     height: 80px;
     background: rgba(10, 17, 40, 0.5);
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid var(--glass-border);
 }

 .audience-card:hover .audience-icon {
     background: var(--primary);
     color: white;
     transform: rotateY(180deg);
 }

 /* Why Choose Us Section */
 .why-choose-section {
     background: #05050d48;
     position: relative;
 }

 .why-choose-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .why-choose-card {
     background: rgba(10, 17, 40, 0.5);
     border: 1px solid var(--glass-border);
     border-radius: 16px;
     padding: 2rem;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(10px);
     height: 100%;
 }

 .why-choose-card::before {
     content: '';
     position: absolute;
     top: -10px;
     left: -10px;
     width: 20px;
     height: 20px;
     border-top: 2px solid var(--accent-color);
     border-left: 2px solid var(--accent-color);
     transition: var(--transition);
 }

 .why-choose-card::after {
     content: '';
     position: absolute;
     bottom: -10px;
     right: -10px;
     width: 20px;
     height: 20px;
     border-bottom: 2px solid var(--accent-color);
     border-right: 2px solid var(--accent-color);
     transition: var(--transition);
 }

 .why-choose-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 30px rgba(0, 161, 224, 0.2);
 }

 .why-choose-card:hover::before,
 .why-choose-card:hover::after {
     width: 50px;
     height: 50px;
 }

 .why-choose-icon {
     font-size: 2.5rem;
     margin-bottom: 1.5rem;
     color: var(--accent-color);
     transition: var(--transition);
 }

 .why-choose-card:hover .why-choose-icon {
     color: var(--heading-color);
     transform: scale(1.1);
 }

 /* FAQ Section */
 /* FAQ Section */
 .faq-section {
     background: var(--dark);
     position: relative;
     background: linear-gradient(to bottom, rgba(10, 17, 40, 0.9), rgba(10, 17, 40, 0.7));
     z-index: 1;
 }

 .faq-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     background-image: url('../img/faqbg.jpg');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     filter: blur(12px) brightness(0.6);
     opacity: 0.5;
     z-index: -1;
 }

 /* CTA Section */
 .cta-section {
     background: #05050d68;
     position: relative;
     overflow: hidden;
     text-align: center;
 }

 .cta-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="none" stroke="%233a86ff" stroke-width="0.5" stroke-opacity="0.05"/></svg>');
     z-index: 0;
 }

 .cta-content {
     position: relative;
     z-index: 1;
     max-width: 800px;
     margin: 0 auto;
 }

 .cta-buttons {
     display: flex;
     justify-content: center;
     gap: 1.5rem;
     margin-top: 2.5rem;
 }

 @media (max-width: 576px) {
     .cta-buttons {
         flex-direction: column;
         gap: 1rem;
     }
 }

 .ai-creation .btn-secondary {
     background: transparent;
     border: 2px solid var(--primary);
     color: var(--primary);
 }

 .ai-creation .btn-secondary:hover {
     background: var(--primary);
     color: white;
 }

 /* Particle Animation */
 .particles-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 0;
 }

 .particle {
     position: absolute;
     width: 3px;
     height: 3px;
     background-color: var(--accent-color);
     border-radius: 50%;
     opacity: 0.5;
     pointer-events: none;
 }

 /* Responsive Adjustments */
 @media (max-width: 768px) {
     section {
         padding: 4rem 0;
     }

     .fastsocial-container {
         margin-top: 40%;
     }

     .hero-3d-container {
         height: 300px;
     }

     .about-image {
         height: 400px;
     }
 }

 @media (max-width: 576px) {
     .container {
         padding: 0 1.5rem;
     }

     /* Layout */
     .fastsocial-container {
         margin-top: 40%;
     }

     .hero-3d-container {
         height: 250px;
     }

     .about-image {
         height: 300px;
     }

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

 @media (max-width: 399px) {

     /* Layout */
     .fastsocial-container {
         margin-top: 40%;
     }
 }


 /* AI ad Creation Page Start */
 a {
     text-decoration: none;
     color: inherit;
     transition: var(--transition-fast);
 }

 button {
     cursor: pointer;
     font-family: inherit;
     border: none;
     background: none;
     outline: none;
 }

 ul,
 ol {
     list-style: none;
 }

 img {
     max-width: 100%;
     height: auto;
     object-fit: cover;
 }

 /* Typography */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 1rem;
 }

 h1 {
     font-size: clamp(2.5rem, 5vw, 4rem);
     letter-spacing: -0.02em;
 }

 h2 {

     font-size: clamp(2rem, 4vw, 3rem);
     letter-spacing: -0.01em;
 }

 h3 {
     font-size: clamp(1.5rem, 3vw, 2rem);
 }

 h4 {
     font-size: clamp(1.2rem, 2vw, 1.5rem);
 }

 p {
     color: var(--light);
     margin-bottom: 1.5rem;
     font-size: clamp(1rem, 2vw, 1.1rem);
 }

 /* Layout */
 .adcreation-container {
     width: 100%;
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 2rem;
     position: relative;
     z-index: 1;
 }

 section {
     padding: 6rem 0;
     position: relative;
     overflow: hidden;
 }

 /* Particle Canvas */
 #particleCanvas {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
 }

 /* Hero Section */
 .adcreation-hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding-top: 5rem;
     position: relative;
     background-color: #40404058;
     /* background: var(--darker); */
     z-index: 0;
 }

 .adcreation-hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url(../img/ai-ad-bg.avif);
     background-size: cover;
     background-position: center;
     filter: blur(7px) brightness(0.9);
     transform: scale(1.1);
     opacity: 0.5;
     z-index: -1;
 }

 /* Fullscreen container for the video background */
 .adcreation-video-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 1;
     transform: rotate(180deg);
     filter: blur(2px) brightness(0.5);
     object-fit: cover;
     /* Ensures the video covers the whole screen */
     z-index: -1;
     /* Keeps the video in the background */
 }

 .adcreation-hero-content {
     max-width: 600px;
     position: relative;
     z-index: 2;
 }

 .adcreation-hero-badge {
     display: inline-block;
     padding: 0.5rem 1rem;
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     border-radius: 10px;
     font-size: 0.9rem;
     font-weight: 500;
     color: var(--accent);
     margin-bottom: 1.5rem;
     backdrop-filter: blur(10px);
 }

 .adcreation-hero-title {
     color: var(--heading-color);
     margin-bottom: 1.5rem;
 }

 .adcreation-hero-description {
     color: rgba(248, 249, 250, 0.8);
     margin-bottom: 2.5rem;
     font-size: clamp(1.1rem, 2vw, 1.2rem);
 }

 .adcreation-hero-buttons {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
 }

 .adcreation-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.75rem 1.5rem;
     border-radius: 10px;
     font-weight: 600;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     font-size: 1rem;
 }

 .adcreation-btn-primary {
     background: var(--gradient-1);
     color: white;
     box-shadow: var(--glow-primary);
 }

 .adcreation-btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: var(--glow-secondary);
 }

 .adcreation-btn-text {
     z-index: 1;
 }

 .adcreation-btn-icon {
     margin-left: 0.5rem;
     z-index: 1;
 }

 /* Hero 3D Elements */
 .adcreation-hero-3d-container {
     position: absolute;
     top: 0;
     right: 5%;
     width: 50%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     perspective: 1000px;
     margin: auto;
 }

 .adcreation-floating-cards-container {
     position: relative;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
 }

 /* Base Floating Card Styles */
 .adcreation-floating-card {
     position: absolute;
     width: 300px;
     height: 400px;
     background: rgba(10, 17, 40, 0.3);
     border: 1px solid var(--glass-border);
     padding: 1.5rem;
     backdrop-filter: blur(10px);
     transform-style: preserve-3d;
     transition: var(--transition);
     overflow: hidden;
     border-radius: 5px;
 }

 /* Unique Card Shapes */
 .adcreation-floating-card.adcreation-hexagon {
     background: linear-gradient(135deg, rgba(58, 134, 255, 0.3), rgba(131, 56, 236, 0.3));
     top: 5%;
     right: 10%;
     transform: rotateY(-15deg) rotateX(5deg);
     animation: floatCard1 8s infinite ease-in-out;
 }

 .adcreation-floating-card.adcreation-circle {
     background: linear-gradient(135deg, rgba(0, 198, 255, 0.3), rgba(131, 56, 236, 0.3));
     top: 0%;
     right: 25%;
     transform: rotateY(-5deg) rotateX(-5deg);
     animation: floatCard2 10s infinite ease-in-out;
 }

 .adcreation-floating-card.adcreation-diamond {
     background: linear-gradient(135deg, rgba(44, 193, 151, 0.3), rgba(58, 134, 255, 0.3));
     top: 10%;
     right: 0%;
     transform: rotateY(-20deg) rotateX(10deg);
     animation: floatCard3 12s infinite ease-in-out;
 }

 @keyframes floatCard1 {

     0%,
     100% {
         transform: rotateY(-15deg) rotateX(5deg) translateY(0);
     }

     50% {
         transform: rotateY(-10deg) rotateX(3deg) translateY(-20px);
     }
 }

 @keyframes floatCard2 {

     0%,
     100% {
         transform: rotateY(-5deg) rotateX(-5deg) translateY(0);
     }

     50% {
         transform: rotateY(-8deg) rotateX(-3deg) translateY(-15px);
     }
 }

 @keyframes floatCard3 {

     0%,
     100% {
         transform: rotateY(-20deg) rotateX(10deg) translateY(0);
     }

     50% {
         transform: rotateY(-15deg) rotateX(5deg) translateY(-25px);
     }
 }

 .adcreation-card-platform {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     margin-bottom: 1rem;
     color: var(--accent);
     font-size: 0.9rem;
     font-weight: 500;
 }

 .adcreation-card-content {
     display: flex;
     flex-direction: column;
     height: calc(100% - 2rem);
 }

 .adcreation-card-image {
     width: 100%;
     height: 180px;
     border-radius: 5px;
     margin-bottom: 1rem;
     position: relative;
     overflow: hidden;
 }

 .adcreation-card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: var(--transition);
 }

 .adcreation-floating-card:hover .adcreation-card-image img {
     transform: scale(1.1);
 }

 .adcreation-card-text {
     flex-grow: 1;
 }

 .adcreation-card-text h3 {
     font-size: 1.2rem;
     margin-bottom: 0.5rem;
     color: white;
 }

 .adcreation-card-text p {
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.8);
     margin-bottom: 1rem;
 }

 .adcreation-card-button {
     padding: 0.5rem 1rem;
     background: white;
     color: var(--primary-dark);
     border-radius: 10px;
     font-weight: 600;
     font-size: 0.9rem;
     align-self: flex-start;
     transition: var(--transition-fast);
 }

 .adcreation-card-button:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-sm);
 }

 .adcreation-card-glow {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(45deg,
             rgba(58, 134, 255, 0) 0%,
             rgba(58, 134, 255, 0.1) 50%,
             rgba(58, 134, 255, 0) 100%);
     pointer-events: none;
     animation: cardGlow 3s infinite alternate;
 }

 @keyframes cardGlow {
     0% {
         opacity: 0.3;
     }

     100% {
         opacity: 0.8;
     }
 }

 .adcreation-hero-shape-1 {
     position: absolute;
     bottom: -100px;
     left: -100px;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(131, 56, 236, 0.1) 0%, rgba(131, 56, 236, 0) 70%);
     filter: blur(50px);
     z-index: 0;
 }

 .adcreation-hero-shape-2 {
     position: absolute;
     top: -100px;
     right: -100px;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(0, 198, 255, 0.1) 0%, rgba(0, 198, 255, 0) 70%);
     filter: blur(50px);
     z-index: 0;
 }

 /* Section Common Styles */
 .adcreation-section-badge {
     display: inline-block;
     padding: 0.5rem 1rem;
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     border-radius: 5px;
     font-size: 0.9rem;
     font-weight: 500;
     color: var(--accent-color);
     margin-bottom: 1rem;
     backdrop-filter: blur(10px);
 }

 .adcreation-section-title {

     color: var(--heading-color);
     margin-bottom: 1.5rem;
 }

 .adcreation-section-description {
     color: rgba(248, 249, 250, 0.8);
     margin-bottom: 2rem;
 }

 .adcreation-section-header {
     text-align: center;
     max-width: 800px;
     margin: 0 auto 4rem;
 }

 /* What is AI Ad Creation */
 .adcreation-what-is {
     background: var(--dark);
     position: relative;
     padding: 8rem 0;
 }

 .adcreation-content-wrapper {
     display: flex;
     align-items: center;
     gap: 4rem;
     margin-top: 3rem;
 }

 .adcreation-text-content {
     flex: 1;
 }

 .adcreation-video-container {
     flex: 1;
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: var(--shadow-lg);
 }

 .adcreation-video-container video {
     width: 100%;
     display: block;
 }

 /* Benefits Section */
 .adcreation-benefits-section {
     background: var(--darker);
     position: relative;
 }

 .adcreation-benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 /* Unique Benefit Cards */
 .adcreation-benefit-card {
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(10px);
     height: 100%;
     display: flex;
     flex-direction: column;
     padding: 2rem;
     transition: var(--transition);
     border-radius: 5px;
 }

 .adcreation-benefit-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     transition: var(--transition);
 }

 .adcreation-benefit-card:hover {
     transform: translateY(-10px);
 }

 /* Time Card */
 .adcreation-time-card {
     background: linear-gradient(135deg, rgba(58, 134, 255, 0.1), rgba(58, 134, 255, 0.05));
     border: 1px solid rgba(58, 134, 255, 0.2);
 }

 .adcreation-time-card:hover {
     box-shadow: 0 0 30px rgba(58, 134, 255, 0.3);
 }

 .adcreation-time-card .adcreation-benefit-icon {
     color: var(--primary);
 }

 .adcreation-time-card .adcreation-progress-bar::before {
     background: var(--primary);
 }

 /* Engagement Card */
 .adcreation-engagement-card {
     background: linear-gradient(135deg, rgba(131, 56, 236, 0.1), rgba(131, 56, 236, 0.05));
     border: 1px solid rgba(131, 56, 236, 0.2);
 }

 .adcreation-engagement-card:hover {
     box-shadow: 0 0 30px rgba(131, 56, 236, 0.3);
 }

 .adcreation-engagement-card .adcreation-benefit-icon {
     color: var(--secondary);
 }

 .adcreation-engagement-card .adcreation-progress-bar::before {
     background: var(--secondary);
 }

 /* Conversion Card */
 .adcreation-conversion-card {
     background: linear-gradient(135deg, rgba(0, 198, 255, 0.1), rgba(0, 198, 255, 0.05));
     border: 1px solid rgba(0, 198, 255, 0.2);
 }

 .adcreation-conversion-card:hover {
     box-shadow: 0 0 30px rgba(0, 198, 255, 0.3);
 }

 .adcreation-conversion-card .adcreation-benefit-icon {
     color: var(--accent);
 }

 .adcreation-conversion-card .adcreation-progress-bar::before {
     background: var(--accent);
 }

 /* Cost Card */
 .adcreation-cost-card {
     background: linear-gradient(135deg, rgba(44, 193, 151, 0.1), rgba(44, 193, 151, 0.05));
     border: 1px solid rgba(44, 193, 151, 0.2);
 }

 .adcreation-cost-card:hover {
     box-shadow: 0 0 30px rgba(44, 193, 151, 0.3);
 }

 .adcreation-cost-card .adcreation-benefit-icon {
     color: var(--subheading-color);
 }

 .adcreation-cost-card .adcreation-progress-bar::before {
     background: var(--subheading-color);
 }

 .adcreation-benefit-icon {
     font-size: 2.5rem;
     margin-bottom: 1.5rem;
     transition: var(--transition);
 }

 .adcreation-benefit-card:hover .adcreation-benefit-icon {
     transform: scale(1.1);
 }

 .adcreation-benefit-title {
     font-size: 1.5rem;
     margin-bottom: 1rem;
     color: var(--subheading-color);
 }

 .adcreation-benefit-description {
     color: rgba(248, 249, 250, 0.7);
     margin-bottom: 1.5rem;
 }

 .adcreation-benefit-progress {
     margin-top: auto;
 }

 .adcreation-progress-bar {
     height: 6px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 3px;
     position: relative;
     overflow: hidden;
     margin-bottom: 0.5rem;
 }

 .adcreation-progress-bar::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 0;
     border-radius: 3px;
     transition: width 1.5s ease-in-out;
 }

 .adcreation-progress-label {
     font-size: 0.9rem;
     color: var(--light);
 }

 .adcreation-benefits-shape {
     position: absolute;
     bottom: -100px;
     right: -100px;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(0, 198, 255, 0.1) 0%, rgba(0, 198, 255, 0) 70%);
     filter: blur(50px);
     z-index: 0;
 }

 /* Features Section */
 .adcreation-features {
     background: var(--dark);
     position: relative;
     padding: 8rem 0;
 }

 .adcreation-features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .adcreation-feature-card {
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     border-radius: 5px;
     padding: 2rem;
     transition: var(--transition);
     height: 100%;
 }

 .adcreation-feature-card:hover {
     transform: translateY(-10px);
     border-color: var(--primary);
     box-shadow: var(--glow-primary);
 }

 .adcreation-feature-card .adcreation-feature-icon {
     font-size: 2.5rem;
     color: var(--heading-color);
     margin-bottom: 1.5rem;
     transition: var(--transition);
 }

 .adcreation-feature-card:hover .adcreation-feature-icon {
     transform: scale(1.1);
     color: var(--accent-color);
 }

 .adcreation-feature-card h3 {
     font-size: 1.3rem;
     margin-bottom: 1rem;
     color: var(--subheading-color);
 }

 .adcreation-feature-card p {
     color: rgba(248, 249, 250, 0.7);
     margin-bottom: 0;
 }

 /* How It Works Section */
 .adcreation-how-it-works {
     background: var(--darker);
     position: relative;
     padding: 8rem 0;
 }

 .adcreation-how-it-works::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url(../img/bg.avif);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     filter: blur(5px) brightness(0.5);
     opacity: 0.7;
 }

 .adcreation-steps-container {
     display: flex;
     flex-direction: column;
     gap: 5rem;
     margin-top: 3rem;
 }

 .adcreation-step {
     display: flex;
     align-items: flex-start;
     gap: 3rem;
     position: relative;
 }

 .adcreation-step:nth-child(even) {
     flex-direction: row-reverse;
 }

 .adcreation-step-number {
     width: 60px;
     height: 60px;
     background: var(--gradient-1);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
     font-weight: 700;
     box-shadow: var(--glow-primary);
     position: absolute;
     top: -30px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 2;
 }

 .adcreation-step-content {
     flex: 1;
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     border-radius: 20px;
     padding: 3rem 2rem 2rem;
     position: relative;
 }

 .adcreation-step-content h3 {
     font-size: 1.5rem;
     margin-bottom: 1rem;
     color: var(--heading-color);
 }

 .adcreation-step-content p {
     color: rgba(248, 249, 250, 0.8);
     margin-bottom: 1.5rem;
 }

 .adcreation-step-content ul {
     color: rgba(248, 249, 250, 0.7);
 }

 .adcreation-step-content li {
     margin-bottom: 0.8rem;
     position: relative;
     padding-left: 1.5rem;
 }

 .adcreation-step-content li strong {
     color: var(--subheading-color);
 }

 .adcreation-step-content li:before {
     content: "•";
     color: var(--accent);
     font-size: 1.5rem;
     position: absolute;
     left: 0;
     top: -5px;
 }

 .adcreation-step-image {
     flex: 1;
     margin: auto;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: var(--shadow-lg);
     /* height: 350px; */
     /* background-color: var(--accent); */
 }

 .adcreation-step-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Who Can Benefit Section */
 .adcreation-who-can-benefit {
     background: var(--dark);
     position: relative;
     padding: 8rem 0;
 }

 .adcreation-audience-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 .adcreation-audience-card {
     position: relative;
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     border-radius: 10px;
     overflow: hidden;
     transition: var(--transition);
     height: 100%;
 }

 .adcreation-audience-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--glow-primary);
 }

 .adcreation-audience-image {
     height: 200px;
     overflow: hidden;
 }

 .adcreation-audience-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: var(--transition);
 }

 .adcreation-audience-card:hover .adcreation-audience-image img {
     transform: scale(1.1);
 }

 .adcreation-audience-content {
     padding: 1.5rem;
 }

 .adcreation-audience-content h3 {
     font-size: 1.3rem;
     margin-bottom: 1rem;
     color: var(--subheading-color);
 }

 .adcreation-audience-content p {
     color: rgba(248, 249, 250, 0.7);
     margin-bottom: 0;
 }

 .adcreation-audience-icon {
     position: absolute;
     top: 1rem;
     right: 1rem;
     width: 50px;
     height: 50px;
     background: var(--gradient-1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.5rem;
     box-shadow: var(--glow-primary);
 }

 /* Why Choose Us Section */
 .adcreation-why-choose-us {
     background: var(--darker);
     position: relative;
     padding: 8rem 0;
 }

 .adcreation-why-choose-us::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url(../img/best-choice.jpg);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     filter: blur(8px) brightness(0.9);
     opacity: 0.8;
 }

 .adcreation-features-showcase {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
     margin-top: 3rem;
 }

 .adcreation-showcase-image {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     height: 500px;
 }

 .adcreation-showcase-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .adcreation-image-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(58, 134, 255, 0.3), rgba(131, 56, 236, 0.3));
 }

 .adcreation-showcase-features {
     display: flex;
     flex-direction: column;
     gap: 2rem;
 }

 .adcreation-feature-item {
     display: flex;
     gap: 1.5rem;
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     border-radius: 20px;
     padding: 1.5rem;
     transition: var(--transition);
 }

 .adcreation-feature-item:hover {
     transform: translateX(10px);
     border-color: var(--primary);
     box-shadow: var(--glow-primary);
 }

 .adcreation-feature-icon {
     font-size: 2rem;
     color: var(--accent);
     transition: var(--transition);
 }

 .adcreation-feature-item:hover .adcreation-feature-icon {
     transform: scale(1.1);
     color: var(--primary);
 }

 .adcreation-feature-content h3 {
     font-size: 1.2rem;
     margin-bottom: 0.5rem;
     color: var(--heading-color);
 }

 .adcreation-feature-content p {
     color: rgba(248, 249, 250, 0.7);
     margin-bottom: 0;
     font-size: 0.95rem;
 }


 /* CTA Section */
 .adcreation-cta-section {
     background: var(--darker);
     position: relative;
     text-align: center;
     padding: 8rem 0;
 }

 .adcreation-cta-content {
     max-width: 800px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
 }

 .adcreation-cta-form {
     margin-top: 3rem;
     margin-bottom: 2rem;
 }

 .adcreation-form-group {
     display: flex;
     max-width: 500px;
     margin: 0 auto;
 }

 .adcreation-form-input {
     flex-grow: 1;
     padding: 1rem 1.5rem;
     border: 1px solid var(--glass-border);
     background: var(--glass-bg);
     border-radius: 15px 0 0 10px;
     color: var(--light);
     font-size: 1rem;
     outline: none;
     transition: var(--transition-fast);
 }

 .adcreation-form-input:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 2px rgba(58, 134, 255, 0.2);
 }

 .adcreation-form-group .adcreation-btn {
     border-radius: 0 15px 10px 0;
 }

 .adcreation-form-note {
     font-size: 0.9rem;
     color: var(--light);
     margin-top: 1rem;
 }

 .adcreation-cta-features {
     display: flex;
     justify-content: center;
     gap: 2rem;
     margin-top: 2rem;
 }

 .adcreation-cta-feature {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--light);
 }

 .adcreation-cta-feature i {
     color: var(--subheading-color);
 }

 .adcreation-cta-shape-1 {
     position: absolute;
     top: -100px;
     left: -100px;
     width: 300px;
     height: 300px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(131, 56, 236, 0.1) 0%, rgba(131, 56, 236, 0) 70%);
     filter: blur(50px);
     z-index: 0;
 }

 .adcreation-cta-shape-2 {
     position: absolute;
     bottom: -100px;
     right: -100px;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(58, 134, 255, 0.1) 0%, rgba(58, 134, 255, 0) 70%);
     filter: blur(50px);
     z-index: 0;
 }

 /* Responsive Adjustments */
 @media (max-width: 1200px) {
     .adcreation-hero-3d-container {
         width: 40%;
     }

     .adcreation-hero-content {
         max-width: 500px;
     }

     .adcreation-floating-card {
         width: 250px;
         height: 350px;
     }

     .adcreation-features-showcase {
         grid-template-columns: 1fr;
         gap: 3rem;
     }

     .adcreation-showcase-image {
         height: 400px;
     }

     .adcreation-content-wrapper {
         flex-direction: column;
     }
 }

 @media (max-width: 992px) {
     .adcreation-hero-3d-container {
         display: none;
     }

     .adcreation-step {
         flex-direction: column;
     }

     .adcreation-hero-content {
         max-width: 100%;
         text-align: center;
     }

     .adcreation-hero-buttons {
         justify-content: center;
     }

     .adcreation-step,
     .adcreation-step:nth-child(even) {
         flex-direction: column;
     }

     .adcreation-step-image {
         margin-bottom: 2rem;
     }
 }

 @media (max-width: 768px) {
     section {
         padding: 4rem 0;
     }

     .adcreation-container {
         padding: 0 1.5rem;
     }

     .adcreation-cta-features {
         flex-direction: column;
         gap: 1rem;
         align-items: center;
     }
 }

 @media (max-width: 576px) {
     .adcreation-form-group {
         flex-direction: column;
     }

     .adcreation-form-input {
         border-radius: 10px;
         margin-bottom: 1rem;
     }

     .adcreation-form-group .adcreation-btn {
         border-radius: 10px;
     }
 }

 /* AI ad Creation Page End */


 /* Ai Audience targeting sugeestion Page Start */

 .aiaudience-container {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 h2 {
     text-align: center;
     font-size: 2.5rem;
     color: var(--heading-color);
 }

 h3 {
     font-size: 1.5rem;
     color: var(--subheading-color);
 }

 p {
     margin-bottom: 1rem;
 }

 a {
     text-decoration: none;
     color: var(--accent);
     transition: var(--transition);
 }

 a:hover {
     color: var(--primary);
 }

 ul {
     list-style: none;
 }

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

 section {
     padding: 100px 0;
     position: relative;
 }

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

 .aiaudience-section-header p {
     max-width: 700px;
     margin: 0 auto;
 }

 .aiaudience-underline {
     height: 4px;
     width: 80px;
     background: var(--gradient-1);
     margin: 20px auto;
     border-radius: 2px;
 }

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

 .aiaudience-section-header p {
     max-width: 700px;
     margin: 0 auto;
 }

 .aiaudience-underline {
     height: 4px;
     width: 80px;
     background: var(--gradient-1);
     margin: 20px auto;
     border-radius: 2px;
 }

 /* Buttons */
 .aiaudience-btn {
     display: inline-block;
     padding: 12px 30px;
     border-radius: 50px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     z-index: 1;
     border: none;
     cursor: pointer;
     font-size: 0.9rem;
 }

 .aiaudience-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 0;
     height: 100%;
     background: rgba(255, 255, 255, 0.1);
     transition: var(--transition);
     z-index: -1;
 }

 .aiaudience-btn:hover::before {
     width: 100%;
 }

 .aiaudience-btn-primary {
     background: var(--gradient-1);
     color: var(--light);
     box-shadow: 0 4px 15px rgba(58, 134, 255, 0.3);
 }

 .aiaudience-btn-primary:hover {
     box-shadow: 0 6px 20px rgba(58, 134, 255, 0.5);
     transform: translateY(-2px);
     color: var(--subheading-color);
 }

 .aiaudience-btn-secondary {
     background: transparent;
     color: var(--light);
     border: 2px solid var(--accent);
 }

 .aiaudience-btn-secondary:hover {
     background: var(--accent);
     color: var(--dark);
     transform: translateY(-2px);
 }

 /* Particles Background */
 .aiaudience-particles-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }

 canvas#particles {
     display: block;
     width: 100%;
     height: 100%;
 }

 /* Hero Section */
 .aiaudience-hero {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 50px 15px;
     overflow: hidden;
     z-index: 0;
     /* Ensure section is above the pseudo-element */
     background-blend-mode: overlay;
     background-color: rgba(10, 17, 40, 0.938);
 }

 /* Background Image Layer */
 .aiaudience-hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/linebg.gif');
     /* Check if path is correct */
     background-size: cover;
     background-position: center;
     filter: blur(10px) brightness(0.6);
     z-index: -1;
     /* Make sure it's behind content */
 }

 /* Fix for the hero section */
 .aiaudience-hero {
     width: 100%;
     overflow: hidden;
 }

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

 .aiaudience-hero-content {
     flex: 1;
     max-width: 800px;
     position: relative;
     z-index: 2;
 }

 .aiaudience-hero-content h1 {
     color: var(--heading-color);
 }

 .aiaudience-hero-content p {
     font-size: 1.2rem;
     margin-bottom: 30px;
 }

 .aiaudience-hero-cta {
     display: flex;
     text-align: center;
     gap: 20px;
 }

 .aiaudience-hero-visual {
     flex: 1;
     position: relative;
     height: 500px;
     perspective: 1000px;
 }

 /* Fix for the hero section */
 .aiaudience-hero-visual {
     width: 100%;
     overflow: hidden;
 }

 /* 3D Cube Animation */
 .aiaudience-hero-3d-element {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     perspective: 1000px;
 }

 .aiaudience-floating-cube {
     width: 150px;
     height: 150px;
     position: relative;
     transform-style: preserve-3d;
     animation: rotateCube 20s infinite linear;
 }

 @keyframes rotateCube {
     0% {
         transform: rotateX(0deg) rotateY(0deg);
     }

     100% {
         transform: rotateX(360deg) rotateY(360deg);
     }
 }

 .aiaudience-cube-face {
     position: absolute;
     width: 150px;
     height: 150px;
     background: rgba(58, 134, 255, 0.2);
     border: 2px solid var(--primary);
     box-shadow: 0 0 20px rgba(58, 134, 255, 0.5);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     color: var(--light);
     backdrop-filter: blur(5px);
 }

 .aiaudience-cube-front {
     transform: translateZ(75px);
 }

 .aiaudience-cube-back {
     transform: translateZ(-75px) rotateY(180deg);
 }

 .aiaudience-cube-top {
     transform: rotateX(90deg) translateZ(75px);
 }

 .aiaudience-cube-bottom {
     transform: rotateX(-90deg) translateZ(75px);
 }

 .aiaudience-cube-left {
     transform: rotateY(-90deg) translateZ(75px);
 }

 .aiaudience-cube-right {
     transform: rotateY(90deg) translateZ(75px);
 }

 /* Animated Circles */
 .aiaudience-hero-circles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .aiaudience-circle {
     position: absolute;
     border-radius: 50%;
     border: 2px solid;
     opacity: 0.5;
 }

 /* Fix for the circles */
 .aiaudience-circle {
     max-width: 100%;
 }

 .aiaudience-circle-1 {
     width: 300px;
     height: 300px;
     top: 20%;
     left: 30%;
     border-color: var(--primary);
     animation: pulse 4s infinite alternate, rotate 15s infinite linear;
 }

 .aiaudience-circle-2 {
     width: 200px;
     height: 200px;
     top: 40%;
     left: 60%;
     border-color: var(--secondary);
     animation: pulse 6s infinite alternate-reverse, rotate 10s infinite linear reverse;
 }

 .aiaudience-circle-3 {
     width: 150px;
     height: 150px;
     top: 60%;
     left: 40%;
     border-color: var(--accent);
     animation: pulse 5s infinite alternate, rotate 8s infinite linear;
 }

 @keyframes pulse {
     0% {
         transform: scale(0.8);
         opacity: 0.3;
     }

     100% {
         transform: scale(1.2);
         opacity: 0.7;
     }
 }

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

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

 /* Data Points */
 .aiaudience-hero-data-points {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .aiaudience-data-point {
     position: absolute;
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     border-radius: 10px;
     padding: 10px;
     color: var(--heading-color);
     display: flex;
     align-items: center;
     animation: float 6s infinite ease-in-out;
 }

 .aiaudience-data-point-1 {
     top: 20%;
     left: 20%;
     animation-delay: 0s;
 }

 .aiaudience-data-point-2 {
     top: 60%;
     left: 70%;
     animation-delay: 2s;
 }

 .aiaudience-data-point-3 {
     top: 40%;
     left: 40%;
     animation-delay: 4s;
 }

 .aiaudience-data-icon {
     width: 40px;
     height: 40px;
     background: var(--gradient-1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 10px;
 }

 .aiaudience-data-text {
     font-weight: 600;
 }

 /* Connection Lines */
 .aiaudience-hero-connections {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 /* Fix for the SVG connections */
 .aiaudience-hero-connections {
     width: 100%;
     overflow: hidden;
 }

 .aiaudience-connections-svg {
     width: 100%;
     height: 100%;
 }

 /* Fix for the SVG connections */
 .aiaudience-connections-svg {
     max-width: 100%;
     height: auto;
 }

 .aiaudience-connection-path {
     fill: none;
     stroke-width: 2;
     stroke-dasharray: 10;
     animation: dash 20s linear infinite;
 }

 .aiaudience-path-1 {
     stroke: var(--primary);
     animation-delay: 0s;
 }

 .aiaudience-path-2 {
     stroke: var(--secondary);
     animation-delay: 5s;
 }

 .aiaudience-path-3 {
     stroke: var(--accent);
     animation-delay: 10s;
 }

 @keyframes dash {
     to {
         stroke-dashoffset: 1000;
     }
 }

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

     50% {
         transform: translateY(-20px);
     }

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

 /* What is Section */
 .aiaudience-what-is {
     background: linear-gradient(rgba(10, 17, 40, 0.6), rgba(10, 17, 40, 0.6)), url('../img/stonebg.jpg') center/cover no-repeat fixed;
 }

 .aiaudience-content-wrapper {
     display: flex;
     align-items: center;
     gap: 50px;
 }

 .aiaudience-text-content,
 .aiaudience-image-content {
     flex: 1;
 }

 .aiaudience-glass-card {
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 30px;
     box-shadow: var(--shadow);
     transition: var(--transition);
 }

 .aiaudience-glass-card:hover {
     transform: translateY(-10px) scale(1.05);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .aiaudience-card-icon {
     font-size: 3rem;
     color: var(--primary);
     margin-bottom: 20px;
     text-align: center;
 }

 .aiaudience-card-stats {
     display: flex;
     justify-content: space-around;
     text-align: center;
     flex-wrap: wrap;
     gap: 20px;
 }

 .aiaudience-stat h3 {
     font-size: 2.5rem;
     margin-bottom: 5px;
     color: var(--subheading-color);
 }

 /* Features Section */
 .aiaudience-features {

     position: relative;
 }

 /* Hero Section */
 .aiaudience-features {
     background: var(--darker);
     position: relative;
     padding: 8rem 0;
 }

 /* Background Image Layer */
 .aiaudience-features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('/assets/img/howbg.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     filter: blur(5px) brightness(0.5);
     opacity: 0.3;
 }

 /* Make sure it's behind content */

 .aiaudience-features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .aiaudience-feature-card {
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     border-radius: 15px;
     padding: 30px;
     text-align: center;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     height: 100%;
 }

 .aiaudience-feature-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .aiaudience-feature-icon {
     width: 70px;
     height: 70px;
     background: var(--gradient-1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     font-size: 1.8rem;
     color: var(--light);
     position: relative;
     z-index: 2;
 }

 .aiaudience-feature-hover {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-1);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: var(--transition);
     transform: translateY(100%);
     border-radius: 15px;
 }

 .aiaudience-feature-card:hover .aiaudience-feature-hover {
     opacity: 1;
     transform: translateY(0);
 }

 .aiaudience-hover-content {
     padding: 20px;
     text-align: center;
 }

 .aiaudience-learn-more {
     display: inline-block;
     margin-top: 15px;
     color: var(--light);
     font-weight: 600;
 }

 .aiaudience-learn-more i {
     margin-left: 5px;
     transition: var(--transition);
 }

 .aiaudience-learn-more:hover i {
     transform: translateX(5px);
 }

 /* How It Works Section */
 .aiaudience-how-it-works {
     position: relative;
     overflow: hidden;
 }

 .aiaudience-how-it-works {
     background: var(--dark);
     position: relative;
     padding: 8rem 0;
     min-height: 100vh;
     display: flex;
     align-items: center;
     position: relative;
     z-index: 0;
 }

 /* Background Image Layer */
 .aiaudience-how-it-works::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/audience-targeting-howbg.avif');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     filter: blur(5px) brightness(0.9);
     opacity: 1;
 }


 /* Why Matters Section */
 .aiaudience-why-matters {
     background: linear-gradient(rgba(10, 17, 40, 0.8), rgba(10, 17, 40, 0.8)), url('/placeholder.svg?height=800&width=1200') center/cover no-repeat fixed;
 }

 .aiaudience-why-matters .aiaudience-content-wrapper {
     display: flex;
     align-items: center;
     gap: 50px;
 }

 .aiaudience-floating-dashboard {
     animation: float 6s ease-in-out infinite;
     position: relative;
 }

 .aiaudience-dashboard-screen {
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     width: 100%;
     max-width: 400px;
 }

 .aiaudience-dashboard-header {
     background: var(--dark);
     padding: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .aiaudience-dashboard-title {
     font-weight: 600;
     color: var(--light);
 }

 .aiaudience-dashboard-controls {
     display: flex;
     gap: 8px;
 }

 .aiaudience-dashboard-controls span {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     display: block;
 }

 .aiaudience-dashboard-controls span:nth-child(1) {
     background: #ff5f57;
 }

 .aiaudience-dashboard-controls span:nth-child(2) {
     background: #ffbd2e;
 }

 .aiaudience-dashboard-controls span:nth-child(3) {
     background: #28ca41;
 }

 .aiaudience-dashboard-content {
     padding: 20px;
 }

 .aiaudience-dashboard-chart {
     display: flex;
     align-items: flex-end;
     height: 150px;
     gap: 15px;
     margin-bottom: 20px;
 }

 .aiaudience-chart-bar {
     flex: 1;
     background: var(--gradient-1);
     border-radius: 5px 5px 0 0;
     animation: growBar 3s infinite alternate;
 }

 .aiaudience-bar-1 {
     height: 60%;
     animation-delay: 0s;
 }

 .aiaudience-bar-2 {
     height: 80%;
     animation-delay: 0.5s;
 }

 .aiaudience-bar-3 {
     height: 40%;
     animation-delay: 1s;
 }

 .aiaudience-bar-4 {
     height: 70%;
     animation-delay: 1.5s;
 }

 @keyframes growBar {
     0% {
         height: 30%;
     }

     100% {
         height: 100%;
     }
 }

 .aiaudience-dashboard-stats {
     display: flex;
     justify-content: space-around;
 }

 .aiaudience-dashboard-stat {
     text-align: center;
 }

 .aiaudience-stat-value {
     font-size: 1.8rem;
     font-weight: 700;
     color: var(--primary);
 }

 .aiaudience-stat-label {
     font-size: 0.9rem;
     opacity: 0.8;
 }

 .aiaudience-benefit {
     display: flex;
     align-items: flex-start;
     margin-bottom: 30px;
     position: relative;
     padding: 20px;
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     border-radius: 15px;
     transition: var(--transition);
 }


 .aiaudience-benefit:hover {
     transform: translateX(10px);
     border-color: var(--primary);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .aiaudience-benefit:last-child {
     margin-bottom: 0;
 }

 .aiaudience-benefit-icon {
     width: 50px;
     height: 50px;
     background: var(--gradient-1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     color: var(--light);
     margin-right: 20px;
     flex-shrink: 0;
 }

 .aiaudience-benefit-hover {
     position: absolute;
     top: 0;
     right: 0;
     background: var(--gradient-1);
     padding: 8px 15px;
     border-radius: 0 15px 0 15px;
     font-size: 0.8rem;
     font-weight: 600;
     opacity: 0;
     transform: translateY(-100%);
     transition: var(--transition);
 }

 .aiaudience-benefit:hover .aiaudience-benefit-hover {
     opacity: 1;
     transform: translateY(0);
 }

 /* Who Can Benefit Section */
 .aiaudience-who-can-benefit {
     background: linear-gradient(rgba(10, 17, 40, 0.9), rgba(10, 17, 40, 0.9)), url('/placeholder.svg?height=800&width=1200') center/cover no-repeat fixed;
 }

 .aiaudience-who-can-benefit::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/targeting.avif');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     filter: blur(10px) brightness(0.9);
     opacity: 0.5;
 }

 .aiaudience-benefit-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
 }

 .aiaudience-benefit-card {
     height: 350px;
     perspective: 1000px;
     position: relative;
 }

 .aiaudience-card-front,
 .aiaudience-card-back {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border-radius: 15px;
     padding: 30px;
 }

 .aiaudience-card-front {
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .aiaudience-card-back {
     background: var(--gradient-1);
     transform: rotateY(180deg);
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .aiaudience-benefit-card:hover .aiaudience-card-front {
     transform: rotateY(180deg);
 }

 .aiaudience-benefit-card:hover .aiaudience-card-back {
     transform: rotateY(0deg);
 }

 .aiaudience-card-icon {
     width: 70px;
     height: 70px;
     background: var(--gradient-1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     font-size: 1.8rem;
     color: var(--light);
 }

 .aiaudience-card-back h3 {
     color: var(--light);
     margin-bottom: 20px;
 }

 .aiaudience-card-back ul {
     margin-bottom: 20px;
 }

 .aiaudience-card-back li {
     margin-bottom: 10px;
     position: relative;
     padding-left: 25px;
     color: var(--light);
 }

 .aiaudience-card-back li::before {
     content: '✓';
     position: absolute;
     left: 0;
     color: var(--light);
     font-weight: bold;
 }

 .aiaudience-card-link {
     display: inline-block;
     padding: 8px 20px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 30px;
     color: var(--light);
     font-weight: 600;
     margin-top: auto;
     align-self: flex-start;
     transition: var(--transition);
 }

 .aiaudience-card-link:hover {
     background: rgba(255, 255, 255, 0.3);
     transform: translateX(5px);
 }

 /* Why Choose Section */
 .aiaudience-why-choose {
     background: linear-gradient(rgba(10, 17, 40, 0.8), rgba(10, 17, 40, 0.8)), url('/placeholder.svg?height=800&width=1200') center/cover no-repeat fixed;
 }

 .aiaudience-reasons-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .aiaudience-reason {
     display: flex;
     align-items: flex-start;
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     border-radius: 15px;
     padding: 30px;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
 }

 .aiaudience-reason:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .aiaudience-reason-icon {
     width: 60px;
     height: 60px;
     background: var(--gradient-1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--light);
     margin-right: 20px;
     flex-shrink: 0;
     position: relative;
     z-index: 2;
 }

 .aiaudience-reason-hover {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     background: var(--gradient-1);
     padding: 15px;
     transform: translateY(100%);
     transition: var(--transition);
 }

 .aiaudience-reason:hover .aiaudience-reason-hover {
     transform: translateY(0);
 }

 /* CTA Section */
 .aiaudience-cta {
     background: linear-gradient(rgba(10, 17, 40, 0.8), rgba(10, 17, 40, 0.8)), url('/placeholder.svg?height=800&width=1200') center/cover no-repeat fixed;
     text-align: center;
     padding: 100px 0;
 }

 .aiaudience-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/sign-up-cta.avif');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     filter: blur(10px) brightness(0.5);
     opacity: 0.3;
 }


 .aiaudience-cta-content {
     max-width: 800px;
     margin: 0 auto;
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 50px;
     transition: var(--transition);
 }

 .aiaudience-cta-content:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
     border-color: var(--primary);
 }

 .aiaudience-cta h2 {
     font-size: 2.5rem;
     margin-bottom: 20px;
 }

 .aiaudience-cta p {
     font-weight: 300;
     font-size: 1.2rem;
     margin-bottom: 30px;
 }

 /* Animation Classes */
 .aiaudience-animate-on-scroll {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .aiaudience-animate-on-scroll.aiaudience-fade-in {
     opacity: 1;
     transform: translateY(0);
 }

 .aiaudience-animate-on-scroll.aiaudience-slide-in-left {
     transform: translateX(-50px);
 }

 .aiaudience-animate-on-scroll.aiaudience-slide-in-left.aiaudience-fade-in {
     transform: translateX(0);
 }

 .aiaudience-animate-on-scroll.aiaudience-slide-in-right {
     transform: translateX(50px);
 }

 .aiaudience-animate-on-scroll.aiaudience-slide-in-right.aiaudience-fade-in {
     transform: translateX(0);
 }

 .aiaudience-delay-1 {
     transition-delay: 0.2s;
 }

 .aiaudience-delay-2 {
     transition-delay: 0.4s;
 }

 .aiaudience-delay-3 {
     transition-delay: 0.6s;
 }

 .aiaudience-delay-4 {
     transition-delay: 0.8s;
 }

 /* Responsive Styles */
 @media (max-width: 992px) {
     h1 {
         font-size: 2.8rem;
     }

     h2 {
         font-size: 2rem;
     }

     .aiaudience-hero .aiaudience-container {
         flex-direction: column;
         text-align: center;
     }

     .aiaudience-hero-content {
         margin-bottom: 50px;
     }

     .aiaudience-hero-cta {
         justify-content: center;
     }

     .aiaudience-what-is .aiaudience-content-wrapper,
     .aiaudience-why-matters .aiaudience-content-wrapper {
         flex-direction: column;
     }

     .aiaudience-image-content {
         order: -1;
         margin-bottom: 30px;
     }
 }

 /* Improve responsive styles */
 @media (max-width: 992px) {
     .aiaudience-hero-visual {
         height: 400px;
     }

     .aiaudience-floating-cube {
         width: 120px;
         height: 120px;
     }

     .aiaudience-cube-face {
         width: 120px;
         height: 120px;
     }

     .aiaudience-cube-front {
         transform: translateZ(60px);
     }

     .aiaudience-cube-back {
         transform: translateZ(-60px) rotateY(180deg);
     }

     .aiaudience-cube-top {
         transform: rotateX(90deg) translateZ(60px);
     }

     .aiaudience-cube-bottom {
         transform: rotateX(-90deg) translateZ(60px);
     }

     .aiaudience-cube-left {
         transform: rotateY(-90deg) translateZ(60px);
     }

     .aiaudience-cube-right {
         transform: rotateY(90deg) translateZ(60px);
     }
 }

 @media (max-width: 768px) {
     section {
         padding: 70px 0;
     }


     .aiaudience-hero-visual {
         height: 300px;
     }
 }

 /* Improve responsive styles */
 @media (max-width: 768px) {
     .aiaudience-hero-visual {
         height: 300px;
     }

     .aiaudience-floating-cube {
         width: 100px;
         height: 100px;
     }

     .aiaudience-cube-face {
         width: 100px;
         height: 100px;
     }

     .aiaudience-cube-front {
         transform: translateZ(50px);
     }

     .aiaudience-cube-back {
         transform: translateZ(-50px) rotateY(180deg);
     }

     .aiaudience-cube-top {
         transform: rotateX(90deg) translateZ(50px);
     }

     .aiaudience-cube-bottom {
         transform: rotateX(-90deg) translateZ(50px);
     }

     .aiaudience-cube-left {
         transform: rotateY(-90deg) translateZ(50px);
     }

     .aiaudience-cube-right {
         transform: rotateY(90deg) translateZ(50px);
     }

     .aiaudience-circle-1 {
         width: 200px;
         height: 200px;
     }

     .aiaudience-circle-2 {
         width: 150px;
         height: 150px;
     }

     .aiaudience-circle-3 {
         width: 100px;
         height: 100px;
     }

     .aiaudience-data-point {
         padding: 8px;
     }

     .aiaudience-data-icon {
         width: 30px;
         height: 30px;
         font-size: 0.9rem;
     }

     .aiaudience-data-text {
         font-size: 0.8rem;
     }
 }

 @media (max-width: 576px) {
     h1 {
         font-size: 2.2rem;
     }

     h2 {
         font-size: 1.8rem;
     }

     .aiaudience-hero-cta {
         flex-direction: column;
         gap: 15px;
     }
 }

 /* Improve responsive styles */
 @media (max-width: 576px) {
     .aiaudience-hero-visual {
         height: 250px;
     }

     .aiaudience-floating-cube {
         width: 80px;
         height: 80px;
     }

     .aiaudience-cube-face {
         width: 80px;
         height: 80px;
     }

     .aiaudience-cube-front {
         transform: translateZ(40px);
     }

     .aiaudience-cube-back {
         transform: translateZ(-40px) rotateY(180deg);
     }

     .aiaudience-cube-top {
         transform: rotateX(90deg) translateZ(40px);
     }

     .aiaudience-cube-bottom {
         transform: rotateX(-90deg) translateZ(40px);
     }

     .aiaudience-cube-left {
         transform: rotateY(-90deg) translateZ(40px);
     }

     .aiaudience-cube-right {
         transform: rotateY(90deg) translateZ(40px);
     }

     .aiaudience-circle-1 {
         width: 150px;
         height: 150px;
     }

     .aiaudience-circle-2 {
         width: 100px;
         height: 100px;
     }

     .aiaudience-circle-3 {
         width: 80px;
         height: 80px;
     }

     .aiaudience-cta-content {
         padding: 30px 20px;
     }

     .aiaudience-cta h2 {
         font-size: 1.8rem;
     }

     .aiaudience-cta p {
         font-size: 1rem;
     }

     .aiaudience-benefit-card {
         height: 300px;
     }
 }

 /* Ai Audience targeting sugeestion Page End */


 /* Automated SOcial Page Start */

 /* Hero Section */
 .automated-hero {
     padding-top: 80px;
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 50px 15px;
     overflow: hidden;
     z-index: 0;
     background-color: var(--dark);
 }

 .automated-hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: initial;
     background: url('../img/ezgif-589c5473855605.gif') center/cover no-repeat;
     filter: blur(10px) brightness(0.6);
     z-index: -1;
 }

 .automated-hero .automated-container {
     position: relative;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: space-evenly;
     margin: auto;
     height: 100vh;
     max-width: 1500px;
     width: 100%;
 }

 .automated-hero-content {
     flex: 1;
     color: white;
     max-width: 600px;
 }

 .automated-hero-content h1 {
     font-size: 3rem;
     margin-bottom: 1rem;
     color: var(--heading-color);
     position: relative;
 }

 .automated-hero-content p {
     font-size: 1rem;
     margin-bottom: 2rem;
 }

 .automated-hero-cta {
     display: flex;
     text-align: center;
     gap: 1rem;
     margin-bottom: 2rem;
 }

 .automated-hero-image {
     /* flex: 1; */
     position: relative;
 }

 .automated-dashboard-preview {
     position: relative;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
     transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
     /* transition: var(--transition); */
 }

 .automated-dashboard-preview:hover {
     transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(-10px);
 }

 .automated-dashboard-img {
     width: 450px;
     display: block;
     border-radius: 10px;
 }

 .automated-glow {
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(58, 134, 255, 0.3) 0%, rgba(58, 134, 255, 0) 70%);
     pointer-events: none;
     mix-blend-mode: screen;
     animation: glow 8s infinite linear;
 }

 @keyframes glow {
     0% {
         transform: translate(10%, 10%) rotate(0deg);
     }

     100% {
         transform: translate(-10%, -10%) rotate(360deg);
     }
 }

 .automated-floating-stats {
     display: flex;
     gap: 1.5rem;
     margin-top: 2rem;
 }

 .automated-stat-card {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     padding: 1rem;
     border-radius: 10px;
     text-align: center;
     flex: 1;
     transition: var(--transition);
 }

 .automated-stat-card:hover {
     transform: translateY(-10px);
     background: rgba(255, 255, 255, 0.15);
 }

 .automated-stat-card i {
     font-size: 2rem;
     margin-bottom: 0.5rem;
     color: var(--primary);
 }

 .automated-stat-card h3 {
     font-size: 1.2rem;
     margin-bottom: 0.2rem;
 }

 .automated-stat-card p {
     font-size: 0.9rem;
     margin-bottom: 0;
     opacity: 0.8;
 }

 .automated-hero-wave {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     overflow: hidden;
     line-height: 0;
 }

 /* Dashboard Styles */
 .automated-hero-image {
     position: relative;
 }

 .automated-dashboard-preview {
     position: relative;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
     transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
     transition: transform 0.5s ease;
 }

 .automated-dashboard-preview:hover {
     transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(-10px);
 }

 .dashboard-container {
     position: relative;
     width: 450px;
     height: 500px;
     background: linear-gradient(to bottom right, #1e293b, #0f172a);
     border-radius: 10px;
     overflow: hidden;
     border: 1px solid #334155;
 }

 /* Dashboard Header */
 .dashboard-header {
     background: linear-gradient(to right, rgba(37, 99, 235, 0.2), rgba(147, 51, 234, 0.2));
     padding: 16px;
     border-bottom: 1px solid #334155;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .window-controls {
     display: flex;
     gap: 8px;
 }

 .control {
     height: 12px;
     width: 12px;
     border-radius: 50%;
 }

 .control.red {
     background-color: #ef4444;
 }

 .control.yellow {
     background-color: #eab308;
 }

 .control.green {
     background-color: #22c55e;
 }

 .dashboard-title {
     color: white;
     font-weight: bold;
 }

 .dashboard-actions {
     display: flex;
     gap: 8px;
 }

 .action-button {
     height: 24px;
     width: 24px;
     border-radius: 50%;
     background-color: #334155;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .icon {
     color: currentColor;
 }

 .users-icon {
     color: #60a5fa;
 }

 .zap-icon {
     color: #fbbf24;
 }

 /* Dashboard Content */
 .dashboard-content {
     padding: 16px;
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 /* Stats Row */
 .stats-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
 }

 .stat-card {
     background-color: rgba(30, 41, 59, 0.5);
     padding: 12px;
     border-radius: 8px;
     border: 1px solid #334155;
     transform: translateY(40px);
     opacity: 0;
     transition: transform 1s ease, opacity 1s ease;
 }

 .stat-card.animate {
     transform: translateY(0);
     opacity: 1;
 }

 .stat-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
 }

 .stat-label {
     font-size: 12px;
     color: #94a3b8;
 }

 .stat-value {
     font-size: 20px;
     font-weight: bold;
     color: white;
 }

 .stat-icon {
     padding: 6px;
     border-radius: 6px;
     background-color: rgba(30, 41, 59, 0.5);
 }

 .trending-icon {
     color: #4ade80;
 }

 .users-icon-bg {
     color: #60a5fa;
 }

 .zap-icon-bg {
     color: #fbbf24;
 }

 .stat-change {
     display: flex;
     align-items: center;
     margin-top: 8px;
     font-size: 12px;
     color: #4ade80;
 }

 .arrow-up {
     stroke: currentColor;
     margin-right: 4px;
 }

 /* Chart */
 .chart-container {
     background-color: rgba(30, 41, 59, 0.5);
     padding: 12px;
     border-radius: 8px;
     border: 1px solid #334155;
     height: 128px;
     transform: translateY(40px);
     opacity: 0;
     transition: transform 1s ease, opacity 1s ease;
 }

 .chart-container.animate {
     transform: translateY(0);
     opacity: 1;
 }

 .chart-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
 }

 .chart-title {
     font-size: 14px;
     font-weight: 500;
     color: white;
 }

 .chart-period {
     font-size: 12px;
     color: #94a3b8;
 }

 .chart {
     position: relative;
     height: 80px;
 }

 .chart-svg {
     width: 100%;
     height: 100%;
 }

 .chart-line {
     stroke-dasharray: 500;
     stroke-dashoffset: 500;
     transition: stroke-dashoffset 2s ease-in-out;
 }

 .chart-line.animate {
     stroke-dashoffset: 0;
 }

 .chart-dot {
     r: 4;
     opacity: 0.7;
     transition: r 0.5s ease, opacity 0.5s ease;
 }

 .chart-dot.animate {
     animation: pulse-animate 2s infinite;
 }

 /* Social Posts */
 .social-posts {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .post-card {
     background-color: rgba(30, 41, 59, 0.5);
     padding: 12px;
     border-radius: 8px;
     border: 1px solid #334155;
     transform: translateY(40px);
     opacity: 0;
     transition: transform 1s ease, opacity 1s ease;
 }

 .post-card.animate {
     transform: translateY(0);
     opacity: 1;
 }

 .post-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
 }

 .platform-info {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .platform-icon {
     height: 32px;
     width: 32px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .instagram-icon {
     background: linear-gradient(to bottom right, #833ab4, #fd1d1d, #fcb045);
     color: white;
 }

 .twitter-icon {
     background: linear-gradient(to bottom right, #1da1f2, #0d8ecf);
     color: white;
 }

 .facebook-icon {
     background: linear-gradient(to bottom right, #3b5998, #2d4373);
     color: white;
 }

 .platform-name {
     font-size: 14px;
     font-weight: 500;
     color: white;
 }

 .view-details {
     font-size: 12px;
     color: #60a5fa;
 }

 .post-stats {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 12px;
     color: #94a3b8;
     margin-top: 8px;
 }

 .stat {
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .heart-icon {
     color: #ef4444;
 }

 .comment-icon {
     color: #60a5fa;
 }

 .share-icon {
     color: #4ade80;
 }

 /* Floating Elements */
 .floating-element {
     position: absolute;
     border-radius: 50%;
     backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
     transform: scale(0.5);
     opacity: 0;
     transition: transform 1s ease, opacity 1s ease;
 }

 .floating-element.animate {
     transform: scale(1);
     opacity: 1;
 }

 .chart-element {
     top: 80px;
     right: 16px;
     width: 64px;
     height: 64px;
     background-color: rgba(37, 99, 235, 0.2);
     color: #60a5fa;
 }

 .line-chart-element {
     bottom: 80px;
     left: 16px;
     width: 48px;
     height: 48px;
     background-color: rgba(147, 51, 234, 0.2);
     color: #a78bfa;
 }

 /* Glow Effect */
 .automated-glow {
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(58, 134, 255, 0.3) 0%, rgba(58, 134, 255, 0) 70%);
     pointer-events: none;
     mix-blend-mode: screen;
     animation: glow 8s infinite linear;
 }

 @keyframes glow {
     0% {
         transform: translate(10%, 10%) rotate(0deg);
     }

     100% {
         transform: translate(-10%, -10%) rotate(360deg);
     }
 }

 @keyframes pulse-animate {
     0% {
         r: 4;
         opacity: 0.7;
     }

     50% {
         r: 6;
         opacity: 1;
     }

     100% {
         r: 4;
         opacity: 0.7;
     }
 }

 /* Responsive Adjustments */
 @media (max-width: 1024px) {
     .automated-hero-content {
         text-align: center;
         margin: 0 auto;
     }

     .automated-hero-cta {
         justify-content: center;
     }
 }

 @media (max-width: 768px) {
     .dashboard-container {
         width: 100%;
         max-width: 450px;
     }

     .stats-row {
         grid-template-columns: 1fr;
     }
 }

 /* Intro Section */
 .automated-intro {
     padding: 8rem 0;
     background-color: var(--dark);
 }

 .automated-intro .automated-container {
     display: flex;
     align-items: center;
     gap: 4rem;
     color: white;
 }

 .automated-intro-content {
     flex: 1;
 }

 .automated-intro-content h2 {
     margin-bottom: 1.5rem;
     font-size: 2.2rem;
     color: var(--heading-color);
 }

 .automated-intro-content h2 span {
     color: var(--primary);
 }

 .automated-intro-content p {
     margin-bottom: 1.5rem;
     font-size: 1.1rem;
 }

 .automated-intro-highlight {
     background: var(--gradient-bg);
     padding: 1.5rem;
     border-radius: 10px;
     margin-top: 2rem;
     position: relative;
     overflow: hidden;
 }

 .automated-intro-highlight::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/bg.avif') center/cover no-repeat;
     opacity: 0.3;
     filter: blur(5px) brightness(0.7);
 }

 .automated-intro-highlight p {
     color: white;
     position: relative;
     z-index: 1;
     margin-bottom: 0;
 }

 .automated-intro-image {
     flex: 1;
     position: relative;
 }

 .automated-hexagon-container {
     position: relative;
     width: 100%;
     padding-top: 100%;
 }

 .automated-hexagon {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-1);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     box-shadow: var(--shadow);
 }

 .automated-intro-img {
     width: 90%;
     height: 90%;
     object-fit: cover;
     border-radius: 10px;
 }

 /* What Are Reports Section */
 .automated-what-are {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 50px 15px;
     overflow: hidden;
     color: var(--light);
     z-index: 0;
     /* Ensure section is above the pseudo-element */
     background-blend-mode: overlay;
     background-color: rgba(10, 17, 40, 0.938);
 }

 /* Background Image Layer */
 .automated-what-are::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/linebg.gif');
     /* Check if path is correct */
     background-size: cover;
     background-position: center;
     filter: blur(10px) brightness(0.6);
     z-index: -1;
     /* Make sure it's behind content */
 }

 .automated-what-are::before {
     content: '';
     position: absolute;
     top: -100px;
     right: -100px;
     width: 300px;
     height: 300px;
     background: var(--gradient-1);
     border-radius: 50%;
     opacity: 0.2;
     filter: blur(15px) brightness(0.5);
 }

 .automated-what-are::after {
     content: '';
     position: absolute;
     bottom: -100px;
     right: -100px;
     width: 300px;
     height: 300px;
     background: var(--gradient-2);
     border-radius: 50%;
     opacity: 0.2;
     filter: blur(10px) brightness(0.5);
 }

 .automated-what-are-content {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 4rem;
     position: relative;
     z-index: 1;
 }

 .automated-what-are-text {
     flex: 1;
 }

 .automated-what-are-text p {
     font-size: 1.1rem;
     margin-bottom: 1.5rem;
 }

 .automated-what-are-visual {
     flex: 1;
     padding: 2rem 3rem;
     background-color: var(--dark);
 }

 .automated-report-preview {
     position: relative;
 }

 .automated-chart-image {
     width: 100%;
     height: 350px;
 }

 .automated-chart-image img {
     width: 100%;
     object-fit: contain;
     height: 100%;
 }

 .automated-report-card {
     background: white;
     border-radius: 15px;
     box-shadow: var(--shadow);
     overflow: hidden;
     transition: var(--transition);
 }

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

 .automated-report-metrics {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 1rem;
     padding: 1rem;
 }

 .automated-metric {
     text-align: center;
 }

 .automated-metric span {
     font-size: 0.9rem;
     color: #6c757d;
     display: block;
     margin-bottom: 0.5rem;
 }

 .automated-metric h4 {
     font-size: 1.5rem;
     margin: 0 0 0.5rem;
     color: var(--heading-color);
 }

 .automated-up {
     color: #28a745;
     font-weight: 600;
     margin: 0;
 }

 .automated-down {
     color: #dc3545;
     font-weight: 600;
     margin: 0;
 }

 /* Features Section */
 .automated-features {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 50px 15px;
     overflow: hidden;
     z-index: 0;
     /* Ensure section is above the pseudo-element */
     background-blend-mode: overlay;
     background-color: var(--dark);
 }

 /* Background Image Layer */
 .automated-features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/performance-report.jpg');
     /* Check if path is correct */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     filter: blur(10px) brightness(0.6);
     z-index: -1;
     /* Make sure it's behind content */
 }

 .automated-features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
 }

 .automated-feature-card {
     background: var(--dark);
     border-radius: 15px;
     padding: 2rem;
     box-shadow: var(--shadow);
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     z-index: 1;
 }

 .automated-feature-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 5px;
     background: var(--gradient-1);
     z-index: -1;
 }

 .automated-feature-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .automated-feature-icon {
     width: 70px;
     height: 70px;
     background: var(--light);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.5rem;
     position: relative;
 }

 .automated-feature-icon::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: var(--gradient-1);
     opacity: 0.2;
 }

 .automated-feature-icon i {
     font-size: 2rem;
     color: var(--primary);
     position: relative;
     z-index: 1;
 }

 .automated-feature-card h3 {
     margin-bottom: 1rem;
 }

 .automated-feature-card p {
     margin-bottom: 0;
 }

 /* How It Works Section */
 .automated-how-it-works {
     position: relative;
     padding: 8rem 0;
     overflow: hidden;
     background: var(--gradient-bg);
 }

 /* Background Image Layer */
 .automated-how-it-works::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/social-how-it-works.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     filter: blur(5px) brightness(0.9);
     opacity: 0.5;
 }

 .automated-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
     position: relative;
     z-index: 2;
 }

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

 .automated-section-header h2 {
     font-size: 2.5rem;
     margin-bottom: 20px;
     color: var(--heading-color, orangered);
 }

 .automated-underline {
     height: 4px;
     width: 80px;
     background: var(--primary, #3a86ff);
     margin: 0 auto 20px;
     border-radius: 2px;
 }

 .automated-section-header p {
     font-size: 1.1rem;
     max-width: 800px;
     margin: 0 auto;
     color: var(--text-color, #e0e0e0);
 }


 /* Why It Matters Section */
 .automated-why-matters {
     position: relative;
     overflow: hidden;
     background: var(--gradient-bg);
 }

 .automated-matters-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 2rem;
 }

 .automated-matters-card {
     background: var(--dark);
     border-radius: 15px;
     padding: 2rem;
     box-shadow: var(--shadow);
     transition: var(--transition);
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .automated-matters-card::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 5px;
     background: var(--gradient-1);
     transform: scaleX(0);
     transform-origin: right;
     transition: transform 0.5s ease;
 }

 .automated-matters-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .automated-matters-card:hover::before {
     transform: scaleX(1);
     transform-origin: left;
 }

 .automated-matters-icon {
     width: 80px;
     height: 80px;
     background: var(--light);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
     position: relative;
 }

 .automated-matters-icon::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: var(--gradient-1);
     opacity: 0.2;
 }

 .automated-matters-icon i {
     font-size: 2.5rem;
     color: var(--primary);
     position: relative;
     z-index: 1;
 }

 .automated-matters-card h3 {
     margin-bottom: 1rem;
 }

 .automated-matters-card p {
     margin-bottom: 0;
 }

 /* Who Benefits Section */
 .automated-who-benefits {
     background-color: var(--dark);
     position: relative;
     overflow: hidden;
 }

 .automated-who-benefits::before {
     content: '';
     position: absolute;
     top: -100px;
     left: -100px;
     width: 300px;
     height: 300px;
     background: var(--gradient-1);
     border-radius: 50%;
     opacity: 0.2;
     filter: blur(15px) brightness(0.5);
 }

 .automated-who-benefits::after {
     content: '';
     position: absolute;
     bottom: -100px;
     right: -100px;
     width: 300px;
     height: 300px;
     background: var(--gradient-2);
     border-radius: 50%;
     opacity: 0.2;
     filter: blur(10px) brightness(0.5);
 }


 .automated-benefits-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 2rem;
 }

 .automated-benefit-card {
     background: var(--gradient-bg);
     border-radius: 15px;
     padding: 2rem;
     box-shadow: var(--shadow);
     transition: var(--transition);
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .automated-benefit-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-1);
     opacity: 0;
     transition: opacity 0.5s ease;
     z-index: -1;
 }

 .automated-benefit-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     color: white;
 }

 .automated-benefit-card:hover::after {
     opacity: 1;
 }

 .automated-benefit-card:hover h3 {
     color: white;
 }

 .automated-benefit-icon {
     width: 80px;
     height: 80px;
     background: var(--light);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
     position: relative;
     z-index: 1;
 }

 .automated-benefit-card:hover .automated-benefit-icon {
     background: rgba(255, 255, 255, 0.2);
 }

 .automated-benefit-icon i {
     font-size: 2.5rem;
     color: var(--primary);
 }

 .automated-benefit-card:hover .automated-benefit-icon i {
     color: white;
 }

 .automated-benefit-card h3 {
     margin-bottom: 1rem;
     transition: var(--transition);
 }

 .automated-benefit-card p {
     margin-bottom: 0;
     transition: var(--transition);
 }

 /* Why Choose Us Section */
 .automated-why-choose {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 50px 15px;
     overflow: hidden;
     z-index: 0;
     /* Ensure section is above the pseudo-element */
     background-blend-mode: overlay;
     background-color: rgba(10, 17, 40, 0.938);
 }

 /* Background Image Layer */
 .automated-why-choose::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/social-reportbg.jpg');
     /* Check if path is correct */
     background-size: cover;
     background-position: center;
     filter: blur(10px) brightness(0.7);
     z-index: -1;
     opacity: 0.3;
     /* Make sure it's behind content */
 }

 .automated-choose-content {
     display: flex;
     align-items: center;
     gap: 4rem;
 }

 .automated-choose-text {
     flex: 1;
 }

 .automated-choose-text p {
     font-size: 1.1rem;
     margin-bottom: 2rem;
 }

 .automated-choose-features {
     margin-top: 2rem;
 }

 .automated-choose-features li {
     display: flex;
     gap: 1.5rem;
     margin-bottom: 2rem;
 }

 .automated-choose-features li:last-child {
     margin-bottom: 0;
 }

 .automated-choose-features li i {
     font-size: 1.5rem;
     color: var(--primary);
     flex-shrink: 0;
     margin-top: 0.3rem;
 }

 .automated-choose-features li h3 {
     margin-bottom: 0.5rem;
 }

 .automated-choose-features li p {
     margin-bottom: 0;
 }

 .automated-choose-visual {
     flex: 1;
     position: relative;
 }

 .automated-floating-dashboard {
     position: relative;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: var(--shadow);
 }

 .automated-dashboard-preview-img {
     width: 100%;
     border-radius: 15px;
     display: block;
 }

 .automated-floating-elements {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 .automated-float-element {
     position: absolute;
     width: 60px;
     height: 60px;
     background: var(--gradient-1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .automated-float-element i {
     font-size: 1.5rem;
 }

 .automated-float-1 {
     top: 20%;
     left: 10%;
     animation: float 6s infinite ease-in-out;
 }

 .automated-float-2 {
     top: 60%;
     left: 20%;
     animation: float 8s infinite ease-in-out;
 }

 .automated-float-3 {
     top: 30%;
     right: 15%;
     animation: float 7s infinite ease-in-out;
 }

 .automated-float-4 {
     top: 70%;
     right: 10%;
     animation: float 9s infinite ease-in-out;
 }

 @keyframes float {

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

     50% {
         transform: translateY(-20px);
     }
 }

 /* CTA Section */
 .automated-cta {
     background: var(--gradient-bg);
     color: white;
     position: relative;
     overflow: hidden;
 }

 .automated-cta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('/placeholder.svg?height=800&width=1600') center/cover no-repeat;
     opacity: 0.05;
 }

 .automated-cta-content {
     position: relative;
     z-index: 1;
     text-align: center;
     max-width: 800px;
     margin: 0 auto;
 }

 .automated-cta-content h2 {
     color: var(--heading-color);
     margin-bottom: 1.5rem;
 }

 .automated-cta-content p {
     font-size: 1.1rem;
     margin-bottom: 1.5rem;
     opacity: 0.9;
 }

 .automated-cta-buttons {
     display: flex;
     justify-content: center;
     gap: 1.5rem;
     margin-top: 2rem;
 }

 /* Responsive Styles */
 @media (max-width: 1200px) {
     h1 {
         font-size: 3rem;
     }

     h2 {
         font-size: 2.2rem;
     }

     .automated-hero-content h1 {
         font-size: 3rem;
     }
 }

 @media (max-width: 992px) {
     .automated-hero .automated-container {
         flex-direction: column;
         gap: 3rem;
     }

     .automated-hero-content {
         text-align: center;
         max-width: 100%;
         padding-top: 4rem;
     }

     .automated-hero-cta {
         justify-content: center;
     }

     .automated-floating-stats {
         justify-content: center;
     }

     .automated-intro .automated-container,
     .automated-what-are-content,
     .automated-choose-content {
         flex-direction: column;
         gap: 3rem;
     }


 }

 @media (max-width: 768px) {
     h1 {
         font-size: 2.5rem;
     }

     h2 {
         font-size: 2rem;
     }

     .automated-hero-content h1 {
         font-size: 2.5rem;
     }

     .automated-menu {
         position: fixed;
         top: 70px;
         left: -100%;
         width: 100%;
         height: calc(100vh - 70px);
         background: var(--dark);
         flex-direction: column;
         align-items: center;
         justify-content: center;
         transition: var(--transition);
     }

     .automated-menu.active {
         left: 0;
     }

     .automated-menu li {
         margin: 1.5rem 0;
     }

     .automated-menu-toggle {
         display: block;
     }

     .automated-floating-stats {
         flex-direction: column;
     }

     .automated-report-metrics {
         flex-direction: column;
     }

     .automated-footer-bottom {
         flex-direction: column;
         text-align: center;
     }

     .automated-footer-bottom-links {
         justify-content: center;
     }
 }

 @media (max-width: 576px) {
     h1 {
         font-size: 2.2rem;
     }

     h2 {
         font-size: 1.8rem;
     }

     .automated-hero-content h1 {
         font-size: 2.2rem;
     }

     .automated-hero-cta {
         flex-direction: column;
     }

     .automated-cta-buttons {
         flex-direction: column;
     }
 }

 /* Automated SOcial Page End */


 /* Social Media Advertising Start */

 .fastsocial-container {
     width: 90%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 50px 15px;
 }

 .fastsocial-section-header {
     text-align: center;
     margin-bottom: 3rem;
 }

 .fastsocial-section-header h2 {
     font-size: 2.5rem;
     color: var(--heading-color);
     margin-bottom: 1rem;
 }

 .fastsocial-divider {
     height: 4px;
     width: 60px;
     background: var(--gradient-1);
     margin: 0 auto 1.5rem;
     border-radius: 2px;
 }

 .fastsocial-section-intro {
     max-width: 800px;
     margin: 0 auto;
     font-size: 1.1rem;
 }

 /* Hero Section */
 .social-hero {
     padding: 8rem 5% 5rem;
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding-top: 5rem;
     position: relative;
     background: var(--gradient-bg);
     z-index: 0;

 }

 .social-hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/FastAI\ \(2\).png');
     background-size: cover;
     background-position: center;
     filter: blur(5px) brightness(0.8);
     transform: scale(1.1);
     z-index: -1;
     opacity: 0.7;
 }

 .social-hero::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/social-marketingbg.gif');
     background-size: cover;
     background-position: center;
     filter: blur(10px) brightness(0.8);
     transform: scale(1.1);
     z-index: 1;
     opacity: 0.7;
 }

 .social-hero-content {
     flex: 1;
     max-width: 600px;
     position: relative;
     z-index: 2;
 }

 .social-hero-title {
     font-size: 3.5rem;
     margin-bottom: 1.5rem;
     line-height: 1.1;
     animation: fadeInUp 1s ease-out;
     color: var(--subheading-color);
 }

 .social-hero-title span {
     color: var(--heading-color);
     position: relative;
     display: inline-block;
 }

 .social-hero-title span::after {
     content: "";
     position: absolute;
     bottom: 5px;
     left: 0;
     width: 100%;
     height: 10px;
     background: var(--accent-color);
     opacity: 0.2;
     z-index: -1;
 }

 .social-hero-subtitle {
     font-size: 1.2rem;
     margin-bottom: 2rem;
     animation: fadeInUp 1s ease-out 0.2s;
     animation-fill-mode: both;
 }

 .social-hero-cta {
     display: flex;
     text-align: center;
     gap: 1rem;
     animation: fadeInUp 1s ease-out 0.4s;
     animation-fill-mode: both;
 }

 .social-hero-visual {
     flex: 1;
     position: relative;
     z-index: 2;
     display: flex;
     justify-content: center;
     align-items: center;
     animation: fadeIn 1.5s ease-out;
 }

 .social-hero-platforms {
     position: absolute;
     width: 100%;
     height: 100%;
 }

 .platform-icon {
     position: absolute;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
     box-shadow: var(--shadow);
     animation: float 6s ease-in-out infinite;
 }

 .platform-icon.facebook {
     top: 20%;
     left: 10%;
     color: #1877f2;
     animation-delay: 0s;
 }

 .platform-icon.instagram {
     top: 60%;
     left: 15%;
     color: #e1306c;
     animation-delay: 1s;
 }

 .platform-icon.linkedin {
     top: 15%;
     right: 15%;
     color: #0077b5;
     animation-delay: 2s;
 }

 .platform-icon.youtube {
     top: 70%;
     right: 10%;
     color: #ff0000;
     animation-delay: 3s;
 }

 .social-hero-graphic {
     position: relative;
     width: 400px;
     height: 400px;
 }

 .social-hero-card {
     position: absolute;
     background: white;
     border-radius: 16px;
     padding: 20px;
     box-shadow: var(--shadow);
     display: flex;
     align-items: center;
     gap: 15px;
     animation: slideIn 0.8s ease-out, float 5s ease-in-out infinite;
 }

 .social-hero-card.card1 {
     top: 20%;
     left: 0;
     animation-delay: 0.2s, 0s;
 }

 .social-hero-card.card2 {
     top: 45%;
     right: 0;
     animation-delay: 0.4s, 1s;
 }

 .social-hero-card.card3 {
     bottom: 15%;
     left: 20%;
     animation-delay: 0.6s, 2s;
 }

 .card-icon {
     width: 50px;
     height: 50px;
     border-radius: 12px;
     background: var(--gradient-1);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.5rem;
 }

 .card-text {
     font-weight: 600;
     color: var(--dark);
 }

 .social-hero-shapes .shape {
     position: absolute;
     border-radius: 50%;
     opacity: 0.1;
     z-index: 1;
 }

 .shape1 {
     width: 300px;
     height: 300px;
     background: var(--primary);
     top: -100px;
     left: -100px;
     animation: pulse 15s ease-in-out infinite;
 }

 .shape2 {
     width: 200px;
     height: 200px;
     background: var(--secondary);
     bottom: -50px;
     right: 10%;
     animation: pulse 12s ease-in-out infinite 2s;
 }

 .shape3 {
     width: 150px;
     height: 150px;
     background: var(--accent);
     bottom: 20%;
     left: 10%;
     animation: pulse 10s ease-in-out infinite 4s;
 }

 /* Why Section */
 .social-why {
     padding: 6rem 0;
     background-color: var(--dark);
 }

 .social-why-content {
     display: flex;
     align-items: center;
     gap: 4rem;
 }

 .social-why-text {
     flex: 1;
     color: white;
 }

 .social-why-visual {
     flex: 1;
 }

 .fastsocial-platforms-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
 }

 .platform-box {
     background: white;
     border-radius: 16px;
     padding: 25px;
     text-align: center;
     box-shadow: var(--shadow);
     transition: var(--transition);
 }

 .platform-box:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .platform-box i {
     font-size: 2.5rem;
     margin-bottom: 15px;
     display: block;
 }

 .platform-box:nth-child(1) i {
     color: #1877f2;
 }

 .platform-box:nth-child(2) i {
     color: #e1306c;
 }

 .platform-box:nth-child(3) i {
     color: #0077b5;
 }

 .platform-box:nth-child(4) i {
     color: #f70a0a;
 }

 .platform-box span {
     font-weight: 600;
     color: var(--dark);
 }

 /* Approach Section */
 .fastsocial-approach {
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding-top: 5rem;
     position: relative;
     background: var(--gradient-bg);
     z-index: 0;
 }

 .fastsocial-approach::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/FastAI\ \(5\).png');
     background-size: cover;
     background-position: center;
     filter: blur(10px) brightness(0.6);
     /* transform: scale(1.1); */
     opacity: 0.5;
     z-index: -1;
 }


 .fastsocial-approach-content {
     text-align: center;
     max-width: 800px;
     margin: 0 auto;
 }

 .fastsocial-approach-visual {
     margin-top: 3rem;
     padding: 2rem 3rem;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: var(--shadow);
 }

 .fastsocial-approach-img {
     width: 100%;
     display: block;
     transition: var(--transition);
     border-radius: 30px;
     border: 1px solid var(--glass-border);
 }

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

 /* Benefits Section */
 .fastsocial-benefits {
     padding: 6rem 0;
     background-color: var(--gradient-bg) !important;
 }

 .fastsocial-benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
 }


 .benefit-icon {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: var(--light);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     font-size: 2rem;
     color: var(--primary);
     position: relative;
 }

 .benefit-icon::after {
     content: "";
     position: absolute;
     top: -5px;
     left: -5px;
     right: -5px;
     bottom: -5px;
     border-radius: 50%;
     border: 2px dashed var(--heading-color);
     opacity: 0.5;
     animation: spin 20s linear infinite;
 }

 /* Services Section */
 .fastsocial-services {
     padding: 6rem 0;
     background-color: var(--dark);
 }

 .fastsocial-services-wrapper {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .fastsocial-service-card {
     background: white;
     border-radius: 20px;
     padding: 40px;
     display: flex;
     position: relative;
     box-shadow: var(--shadow);
     transition: var(--transition);
     overflow: hidden;
 }

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

 .service-number {
     position: absolute;
     top: 20px;
     left: 20px;
     font-size: 4rem;
     font-weight: 800;
     color: var(--primary);
     opacity: 0.1;
     line-height: 1;
 }

 .service-content {
     flex: 2;
     padding-left: 40px;
 }

 .service-content h3 {
     color: var(--heading-color);
     margin-bottom: 15px;
     font-size: 1.8rem;
 }

 .service-features {
     margin-top: 20px;
 }

 .service-features li {
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .service-features i {
     color: var(--primary);
 }

 .service-visual {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .service-img {
     border-radius: 12px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     transition: var(--transition);
 }

 .service-img:hover {
     transform: scale(1.05);
 }

 /* Ecosystem Section */
 .fastsocial-ecosystem {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 50px 15px;
     overflow: hidden;
     z-index: 0;
     /* Ensure section is above the pseudo-element */
     background-color: var(--dark);
 }

 .fastsocial-ecosystem::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/best-choice.jpg');
     /* Check if path is correct */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     filter: blur(10px) brightness(0.6);
     z-index: -1;
 }

 .fastsocial-ecosystem-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .fastsocial-ecosystem-card {
     background: var(--gradient-bg);
     border-radius: 20px;
     padding: 40px;
     box-shadow: var(--shadow);
     transition: var(--transition);
     position: relative;
     overflow: hidden;
 }

 .fastsocial-ecosystem-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 5px;
     height: 100%;
     background: var(--gradient-2);
 }

 .fastsocial-ecosystem-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 .ecosystem-logo h3 {
     font-size: 1.8rem;
     color: var(--heading-color);
     margin-bottom: 5px;
 }

 .ecosystem-logo span {
     color: var(--primary);
 }

 .fastsocial-ecosystem-card h4 {
     color: var(--subheading-color);
     margin-bottom: 15px;
     font-size: 1.2rem;
 }

 .fastsocial-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     margin-top: 15px;
     font-weight: 600;
     color: var(--primary);
 }

 .fastsocial-link i {
     transition: var(--transition);
 }

 .fastsocial-link:hover i {
     transform: translateX(5px);
 }

 /* FAQ Section */
 .fastsocial-faq {
     padding: 6rem 0;
     background: var(--dark);
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     z-index: 0;
 }

 .fastsocial-faq::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../img/faqbg.jpg');
     /* Check if path is correct */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     filter: blur(10px) brightness(0.6);
     z-index: -1;
 }

 /* CTA Section */
 .fastsocial-cta {
     padding: 6rem 0;
     background: var(--gradient-bg);
     color: white;
 }

 .fastsocial-cta .fastsocial-container {
     display: flex;
     align-items: center;
     gap: 4rem;
 }

 .fastsocial-cta-content {
     flex: 1.5;
 }

 .fastsocial-cta-content h2 {
     color: white;
     font-size: 2.5rem;
     margin-bottom: 1.5rem;
 }

 .fastsocial-cta-buttons {
     display: flex;
     gap: 1rem;
     margin-top: 2rem;
 }

 .fastsocial-cta-visual {
     flex: 1;
 }

 .fastsocial-cta-card {
     background: white;
     border-radius: 20px;
     padding: 30px;
     color: var(--dark);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
     transform: rotate(3deg);
     transition: var(--transition);
 }

 .fastsocial-cta-card:hover {
     transform: rotate(0);
 }

 .cta-card-header {
     text-align: center;
     margin-bottom: 20px;
 }

 .cta-card-header h3 {
     color: var(--heading-color);
     font-size: 1.8rem;
     margin-bottom: 5px;
 }

 .cta-card-features {
     margin-bottom: 25px;
 }

 .cta-card-features li {
     margin-bottom: 12px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .cta-card-features i {
     color: var(--primary);
 }


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

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

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes float {

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

     50% {
         transform: translateY(-15px);
     }
 }

 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateX(-50px);
     }

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

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }
 }

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 /* Responsive Styles */
 @media (max-width: 1024px) {
     .social-hero {
         flex-direction: column;
         padding-top: 6rem;
         text-align: center;
     }

     .social-hero-content {
         max-width: 100%;
         margin-bottom: 3rem;
     }

     .social-hero-cta {
         justify-content: center;
     }

     .social-hero-title {
         font-size: 2.8rem;
     }

     .social-why-content,
     .fastsocial-cta .fastsocial-container {
         flex-direction: column;
         gap: 2rem;
     }

     .fastsocial-service-card {
         flex-direction: column;
     }

     .service-content {
         padding-left: 0;
         margin-bottom: 2rem;
     }

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

 @media (max-width: 768px) {
     .fastsocial-nav {
         display: none;
     }

     .fastsocial-menu-toggle {
         display: block;
     }

     .social-hero-title {
         font-size: 2.2rem;
     }

     .fastsocial-section-header h2 {
         font-size: 2rem;
     }

     .social-hero-graphic {
         width: 300px;
         height: 300px;
     }

     .social-hero-card {
         padding: 15px;
     }

     .card-icon {
         width: 40px;
         height: 40px;
         font-size: 1.2rem;
     }

     .fastsocial-service-card {
         padding: 30px;
     }

     .fastsocial-footer-grid {
         flex-direction: column;
         gap: 2rem;
     }

     .fastsocial-footer-bottom {
         flex-direction: column;
         text-align: center;
     }

     .fastsocial-footer-legal {
         justify-content: center;
     }
 }

 @media (max-width: 480px) {
     .social-hero-title {
         font-size: 1.8rem;
     }

     .social-hero-subtitle {
         font-size: 1rem;
     }

     .social-hero-cta {
         flex-direction: column;
     }

     .social-hero-graphic {
         width: 250px;
         height: 250px;
     }

     .fastsocial-cta-buttons {
         flex-direction: column;
     }

     .fastsocial-section-header h2 {
         font-size: 1.8rem;
     }
 }


 /* Social Media Advertising End */


 /* Blog Resource page Start  */

 /* Blog Hero Section */
 .blog-hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 5%;
     position: relative;
     overflow: hidden;
     background: var(--dark);
 }

 .blog-hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/blogbggif.gif') center/cover no-repeat;
     opacity: 0.3;
     filter: blur(7px);
     z-index: 0;
 }

 .blog-hero__content {
     max-width: 600px;
     position: relative;
     z-index: 2;
 }

 .blog-hero__content h1 {
     font-size: 4rem;
     color: var(--heading-color);
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
 }

 .blog-hero__content p {
     font-size: 1.2rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .blog-hero__cta {
     display: flex;
     gap: 20px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
 }

 .blog-hero__animation {
     position: relative;
     width: 40%;
     height: 400px;
     z-index: 1;
 }

 .floating-icons {
     position: absolute;
     width: 100%;
     height: 100%;
 }

 .blogicon-item {
     position: absolute;
     font-size: 2rem;
     color: var(--glass-border);
     animation: float 6s infinite ease-in-out;
     opacity: 0.7;
     background: var(--glass-bg);
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow);
     border: 1px solid var(--glass-border);
 }

 .blogicon-item:nth-child(1) {
     top: 20%;
     left: 10%;
     animation-delay: 0s;
     color: #1877f2;
 }

 .blogicon-item:nth-child(2) {
     top: 60%;
     left: 20%;
     animation-delay: 1s;
     color: #e1306c;
 }

 .blogicon-item:nth-child(3) {
     top: 30%;
     left: 50%;
     animation-delay: 2s;
     color: #0077b5;
 }

 .blogicon-item:nth-child(4) {
     top: 70%;
     left: 60%;
     animation-delay: 3s;
     color: #d61d00;
 }

 .blogicon-item:nth-child(5) {
     top: 40%;
     left: 80%;
     animation-delay: 4s;
     color: var(--accent);
 }

 .blogicon-item:nth-child(6) {
     top: 10%;
     left: 70%;
     animation-delay: 2.5s;
     color: var(--primary);
 }

 .blogicon-item:nth-child(7) {
     top: 80%;
     left: 40%;
     animation-delay: 1.5s;
     color: var(--secondary);
 }

 .blogicon-item:nth-child(8) {
     top: 50%;
     left: 30%;
     animation-delay: 3.5s;
     color: var(--subheading-color);
 }

 /* Blog Intro - Enhanced Version */
 .blog-intro {
     position: relative;
     padding: 100px 0;
     overflow: hidden;
     background: var(--dark);
 }

 .blog-intro__content {
     position: relative;
     z-index: 2;
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
     background: rgba(10, 17, 40, 0.7);
     padding: 40px;
     border-radius: 20px;
     backdrop-filter: blur(10px);
     border: 1px solid var(--glass-border);
     box-shadow: var(--shadow);
     animation: fadeIn 1s ease-out;
 }

 .blog-intro__icon {
     font-size: 3rem;
     color: var(--primary);
     margin-bottom: 20px;
     background: rgba(58, 134, 255, 0.1);
     width: 100px;
     height: 100px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 30px;
     position: relative;
     animation: pulse 3s infinite;
 }

 .blog-intro__icon::before {
     content: '';
     position: absolute;
     top: -10px;
     left: -10px;
     right: -10px;
     bottom: -10px;
     border-radius: 50%;
     border: 2px solid var(--primary);
     opacity: 0.5;
     animation: ripple 3s infinite;
 }

 .blog-intro p {
     font-size: 1.4rem;
     line-height: 1.7;
     margin-bottom: 30px;
 }

 .blog-intro__stats {
     display: flex;
     justify-content: center;
     gap: 40px;
     margin-top: 30px;
 }

 .stat-item {
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .stat-number {
     font-size: 2.5rem;
     font-weight: 700;
     background: var(--gradient-1);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     margin-bottom: 5px;
 }

 .stat-label {
     font-size: 1rem;
     color: var(--light);
     opacity: 0.8;
 }

 .blog-intro__shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none;
 }

 .blog-intro__shapes .shape {
     position: absolute;
     opacity: 0.2;
 }

 .blog-intro__shapes .shape-1 {
     top: 20%;
     left: 5%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--primary);
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     animation: float 15s infinite ease-in-out;
 }

 .blog-intro__shapes .shape-2 {
     bottom: 10%;
     right: 5%;
     width: 100px;
     height: 100px;
     border: 3px solid var(--secondary);
     border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
     animation: float 12s infinite ease-in-out reverse;
 }

 .blog-intro__shapes .shape-3 {
     top: 50%;
     right: 15%;
     width: 80px;
     height: 80px;
     border: 3px solid var(--accent);
     border-radius: 80% 20% 50% 50% / 50% 40% 60% 50%;
     animation: float 10s infinite ease-in-out;
 }

 @keyframes ripple {
     0% {
         transform: scale(1);
         opacity: 0.5;
     }

     50% {
         transform: scale(1.2);
         opacity: 0.2;
     }

     100% {
         transform: scale(1);
         opacity: 0.5;
     }
 }

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

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

 /* Responsive adjustments for the enhanced blog intro */
 @media (max-width: 768px) {
     .blog-intro {
         padding: 60px 0;
     }

     .blog-intro__content {
         padding: 30px 20px;
     }

     .blog-intro p {
         font-size: 1.2rem;
     }

     .blog-intro__stats {
         flex-wrap: wrap;
         gap: 50px;
     }

     .stat-item {
         gap: 10px;
         justify-content: center;
         align-items: center;
     }

     .stat-number {
         font-size: 2rem;
         margin-bottom: 0;
     }
 }

 /* Categories Section */
 .blogcategories-section {
     padding: 80px 20px;
     background: linear-gradient(to bottom, var(--dark), #121a2e);
     /* min-height: 100vh; */
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: relative;
     overflow: hidden;
     background: var(--dark);
     z-index: 1;
 }

 .blogcategories-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/blogbg.jpg') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.3;
     filter: blur(10px);
     z-index: -1;
 }

 .categories-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 30px;
     margin-top: 40px;
 }

 .blogcategory-card {
     background: rgba(10, 17, 40, 0.7);
     border-radius: 16px;
     padding: 30px;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     position: relative;
     overflow: hidden;
     z-index: 1;
 }

 .blogcategory-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-1);
     opacity: 0;
     z-index: -1;
     transition: var(--transition);
 }

 .blogcategory-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow);
     border-color: transparent;
 }

 .blogcategory-card:hover::before {
     opacity: 0.1;
 }

 .category-icon {
     font-size: 2.5rem;
     margin-bottom: 20px;
     color: var(--primary);
     background: rgba(58, 134, 255, 0.1);
     width: 70px;
     height: 70px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .blogcategory-card:hover .category-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .blogcategory-card h3 {
     margin-bottom: 15px;
 }

 .category-link {
     display: inline-flex;
     align-items: center;
     margin-top: 15px;
     font-weight: 600;
     color: var(--primary);
 }

 .category-link i {
     margin-left: 8px;
     transition: var(--transition);
 }

 .category-link:hover i {
     transform: translateX(5px);
 }

 /* Featured Articles Section */
 .featured-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, #121a2e, #1a2a52);
 }

 .featured-articles {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     gap: 30px;
     margin-top: 40px;
 }

 .article-card {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     overflow: hidden;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
 }

 .article-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow);
 }

 .article-image {
     height: 200px;
     overflow: hidden;
 }

 .article-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: var(--transition);
 }

 .article-card:hover .article-image img {
     transform: scale(1.1);
 }

 .article-content {
     padding: 25px;
 }

 .article-tag {
     display: inline-block;
     padding: 5px 12px;
     background: var(--primary);
     color: white;
     border-radius: 50px;
     font-size: 0.8rem;
     font-weight: 600;
     margin-bottom: 15px;
 }

 .article-content h3 {
     margin-bottom: 15px;
     transition: var(--transition);
 }

 .article-card:hover .article-content h3 {
     color: var(--primary);
 }

 .read-more {
     display: inline-flex;
     align-items: center;
     margin-top: 15px;
     font-weight: 600;
     color: var(--accent);
 }

 .read-more i {
     margin-left: 8px;
     transition: var(--transition);
 }

 .read-more:hover i {
     transform: translateX(5px);
 }

 .view-more {
     text-align: center;
     margin-top: 50px;
 }

 /* Tutorials Section */
 .tutorials-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), #121a2e);
     /* min-height: 100vh; */
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: relative;
     overflow: hidden;
     background: var(--dark);
     z-index: 1;
 }

 .tutorials-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/grid.avif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.7;
     filter: blur(10px);
     z-index: -1;
 }


 .section-header {
     text-align: center;
     max-width: 800px;
     margin: 0 auto 50px;
 }

 .tutorials-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 30px;
     margin-top: 40px;
 }

 .tutorial-card {
     background: rgba(10, 17, 40, 0.7);
     border-radius: 16px;
     padding: 30px;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     text-align: center;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .tutorial-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow);
     border-color: var(--secondary);
 }

 .tutorial-icon {
     font-size: 2rem;
     margin-bottom: 20px;
     color: var(--secondary);
     background: rgba(131, 56, 236, 0.1);
     width: 70px;
     height: 70px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     transition: var(--transition);
 }

 .tutorial-card:hover .tutorial-icon {
     background: var(--secondary);
     color: white;
     transform: scale(1.1);
 }

 .tutorial-link {
     display: inline-block;
     margin-top: 20px;
     padding: 10px 20px;
     background: var(--secondary);
     color: white;
     border-radius: 50px;
     font-weight: 600;
     transition: var(--transition);
 }

 .tutorial-link:hover {
     background: var(--primary);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(131, 56, 236, 0.3);
 }

 .tutorials-cta {
     text-align: center;
     margin-top: 50px;
 }

 /* Resources Section */
 .resources-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, #0a1128, #121a2e);
 }

 .resources-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 40px;
 }

 .resource-card {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     padding: 30px;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     display: flex;
     align-items: flex-start;
     gap: 20px;
 }

 .resource-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow);
     border-color: var(--accent);
 }

 .resource-icon {
     font-size: 1.8rem;
     color: var(--accent);
     background: rgba(0, 161, 224, 0.1);
     min-width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .resource-card:hover .resource-icon {
     background: var(--accent);
     color: white;
     transform: scale(1.1);
 }

 .resource-content {
     flex: 1;
 }

 .download-link {
     display: inline-flex;
     align-items: center;
     margin-top: 15px;
     font-weight: 600;
     color: var(--accent);
 }

 .download-link i {
     margin-right: 8px;
 }

 .download-link:hover {
     color: var(--primary);
 }

 /* Insights Section */
 .insights-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), #121a2e);
     /* min-height: 100vh; */
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: relative;
     overflow: hidden;
     background: var(--dark);
     z-index: 1;
 }

 .insights-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/industry-insightsbg.jpg') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.3;
     filter: blur(10px);
     z-index: -1;
 }


 .insights-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 40px;
 }

 .insight-card {
     background: rgba(10, 17, 40, 0.7);
     border-radius: 16px;
     overflow: hidden;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
 }

 .insight-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow);
 }

 .insight-image {
     height: 180px;
     overflow: hidden;
 }

 .insight-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: var(--transition);
 }

 .insight-card:hover .insight-image img {
     transform: scale(1.1);
 }

 .insight-content {
     padding: 25px;
 }

 .insight-link {
     display: inline-block;
     margin-top: 15px;
     font-weight: 600;
     color: var(--primary);
 }

 .insights-cta {
     text-align: center;
     margin-top: 50px;
 }

 /* Community Section */
 .community-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, #1a2a52, #0a1128);
     position: relative;
     overflow: hidden;
 }

 .community-section .blog-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
 }

 .community-content {
     flex: 1;
     text-align: center;
 }

 .community-features {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 30px;
     margin: 40px 0;
 }

 .community-feature {
     background: rgba(10, 17, 40, 0.7);
     border-radius: 16px;
     padding: 25px;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     text-align: center;
 }

 .community-feature:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow);
     border-color: var(--primary);
 }

 .community-feature i {
     font-size: 2rem;
     color: var(--primary);
     margin-bottom: 15px;
 }

 .community-animation {
     flex: 1;
     position: relative;
     height: 400px;
 }

 .network-animation {
     position: absolute;
     width: 100%;
     height: 100%;
 }

 .node {
     position: absolute;
     width: 20px;
     height: 20px;
     background: var(--primary);
     border-radius: 50%;
     box-shadow: 0 0 15px var(--primary);
     animation: pulse 3s infinite;
 }

 .node-1 {
     top: 20%;
     left: 30%;
     animation-delay: 0s;
 }

 .node-2 {
     top: 60%;
     left: 20%;
     animation-delay: 0.5s;
 }

 .node-3 {
     top: 40%;
     left: 60%;
     animation-delay: 1s;
 }

 .node-4 {
     top: 70%;
     left: 70%;
     animation-delay: 1.5s;
 }

 .node-5 {
     top: 30%;
     left: 80%;
     animation-delay: 2s;
 }

 .node-6 {
     top: 80%;
     left: 40%;
     animation-delay: 2.5s;
 }

 .connection {
     position: absolute;
     height: 2px;
     background: linear-gradient(to right, transparent, var(--primary), transparent);
     transform-origin: left center;
     animation: connect 3s infinite;
 }

 .connection-1 {
     top: 21%;
     left: 31%;
     width: 30%;
     transform: rotate(30deg);
     animation-delay: 0.2s;
 }

 .connection-2 {
     top: 41%;
     left: 61%;
     width: 20%;
     transform: rotate(-45deg);
     animation-delay: 1.2s;
 }

 .connection-3 {
     top: 61%;
     left: 21%;
     width: 40%;
     transform: rotate(-15deg);
     animation-delay: 0.7s;
 }

 .connection-4 {
     top: 71%;
     left: 71%;
     width: 30%;
     transform: rotate(-60deg);
     animation-delay: 1.7s;
 }

 .connection-5 {
     top: 31%;
     left: 31%;
     width: 50%;
     transform: rotate(15deg);
     animation-delay: 0.5s;
 }


 @keyframes float {

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

     50% {
         transform: translateY(-20px);
     }
 }

 @keyframes connect {
     0% {
         opacity: 0;
     }

     50% {
         opacity: 1;
     }

     100% {
         opacity: 0;
     }
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .blog-hero {
         flex-direction: column;
         text-align: center;
         padding: 25% 5%;
     }

     .blog-hero__content {
         max-width: 100%;
         margin-bottom: 50px;
     }

     .blog-hero__cta {
         justify-content: center;
     }

     .blog-hero__animation {
         width: 100%;
     }

     .community-section .blog-container {
         flex-direction: column;
     }

     .community-content {
         max-width: 100%;
         text-align: center;
     }
 }

 @media (max-width: 768px) {
     .blog-hero__cta {
         flex-direction: column;
         gap: 15px;
     }

     .btn-primary,
     .btn-secondary {
         width: 100%;
     }

     .featured-articles,
     .categories-grid,
     .tutorials-grid,
     .resources-grid,
     .insights-grid {
         grid-template-columns: 1fr;
     }

     .community-features {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 480px) {

     .blog-hero {
         min-height: auto;
         padding: 60px 5%;
     }
 }


 /* Blog Resource page End */

 /* Case Studies page Start */
 .casestudie-container {
     width: 90%;
     max-width: 1400px;
     margin: 0 auto;
     padding: 80px 10px;
 }

 /* Hero Section */
 .casehero-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), #121a2e);
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 5%;
     position: relative;
     overflow: hidden;
     background: var(--gradient-bg);
     z-index: 1;
 }

 .casehero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/case-studybg.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.5;
     filter: blur(10px);
     z-index: -1;
 }

 .casehero-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
 }

 .casehero-content {
     text-align: center;
     max-width: 800px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
     background: rgba(10, 17, 40, 0.7);
     padding: 50px;
     border-radius: 20px;
     backdrop-filter: blur(10px);
     border: 1px solid var(--glass-border);
     box-shadow: var(--shadow);
     animation: fadeIn 1s ease-out;
 }

 .casehero-title {
     font-size: 4rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
 }

 .casehero-subtitle {
     font-size: 1.5rem;
     margin-bottom: 40px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .casehero-stats {
     display: flex;
     justify-content: center;
     gap: 40px;
     padding: 10px 20px;
     margin-top: 40px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
     background: var(--gradient-bg);
 }

 .casehero-stat {
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .stat-number {
     font-size: 2.5rem;
     font-weight: 700;
     background: var(--gradient-1);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     margin-bottom: 5px;
 }

 .stat-label {
     font-size: 1rem;
     color: var(--light);
     opacity: 0.8;
 }

 .casehero-shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
 }

 .casehero-shape {
     position: absolute;
     opacity: 0.2;
 }

 .casehero-shape.shape-1 {
     top: 20%;
     left: 5%;
     width: 200px;
     height: 200px;
     border: 3px solid var(--primary);
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     animation: float 15s infinite ease-in-out;
 }

 .casehero-shape.shape-2 {
     bottom: 10%;
     right: 5%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--secondary);
     border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
     animation: float 12s infinite ease-in-out reverse;
 }

 .casehero-shape.shape-3 {
     top: 50%;
     right: 15%;
     width: 100px;
     height: 100px;
     border: 3px solid var(--accent);
     border-radius: 80% 20% 50% 50% / 50% 40% 60% 50%;
     animation: float 10s infinite ease-in-out;
 }

 .casehero-shape.shape-4 {
     bottom: 30%;
     left: 15%;
     width: 120px;
     height: 120px;
     border: 3px solid var(--heading-color);
     border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
     animation: float 13s infinite ease-in-out 2s;
 }

 .casehero-icons {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
 }

 .floating-icon {
     position: absolute;
     font-size: 2rem;
     color: var(--glass-border);
     animation: float 6s infinite ease-in-out;
     opacity: 0.7;
     background: var(--glass-bg);
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow);
     border: 1px solid var(--glass-border);
 }

 .floating-icon:nth-child(1) {
     top: 20%;
     left: 10%;
     animation-delay: 0s;
     color: var(--primary);
 }

 .floating-icon:nth-child(2) {
     top: 60%;
     left: 20%;
     animation-delay: 1s;
     color: var(--secondary);
 }

 .floating-icon:nth-child(3) {
     top: 30%;
     left: 70%;
     animation-delay: 2s;
     color: var(--accent);
 }

 .floating-icon:nth-child(4) {
     top: 70%;
     left: 80%;
     animation-delay: 3s;
     color: var(--heading-color);
 }

 .floating-icon:nth-child(5) {
     top: 40%;
     left: 50%;
     animation-delay: 4s;
     color: var(--subheading-color);
 }

 /* Intro Section */
 .intro-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .case-intro-content {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
 }

 /* Case Study Sections */
 .case-study-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), #121a2e);
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 5%;
     position: relative;
     overflow: hidden;
     background: var(--dark);
     z-index: 1;
 }

 .case-study-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/casestudiescardbg.avif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.5;
     filter: blur(7px);
     z-index: -1;
 }

 .case-study-card {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     /* overflow: hidden; */
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     position: relative;
 }

 .case-study-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .case-study-header {
     background: rgba(10, 17, 40, 0.8);
     padding: 30px;
     position: relative;
 }

 .case-study-header h3 {
     color: var(--heading-color);
 }

 .case-badge {
     position: absolute;
     top: -20px;
     right: 30px;
     background: var(--gradient-1);
     color: var(--light);
     /* width: 150px; */
     padding: 5px 25px;
     border-radius: 50px;
     font-weight: 600;
     font-size: 1.2rem;
     text-align: center;
     box-shadow: 0 4px 10px rgba(58, 134, 255, 0.3);
 }

 .case-study-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
     padding: 30px;
 }

 .case-study-info {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .info-group {
     display: flex;
     flex-direction: column;
     gap: 15px;
     padding-bottom: 20px;
     border-bottom: 1px solid var(--glass-border);
 }

 .info-item {
     display: flex;
     flex-direction: column;
 }

 .info-label {
     font-size: 1rem;
     color: var(--subheading-color);
     opacity: 1;
     margin-bottom: 5px;
 }

 .info-value {
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--heading-color);
 }

 .case-challenge h4 {
     color: var(--heading-color);
 }

 .case-solution h4 {
     color: var(--subheading-color);
 }

 .case-challenge,
 .case-solution {
     background: rgba(10, 17, 40, 0.5);
     border-radius: 12px;
     padding: 20px;
     border: 1px solid rgba(255, 255, 255, 0.05);
     transition: var(--transition);
 }

 .case-challenge:hover,
 .case-solution:hover {
     background: rgba(10, 17, 40, 0.7);
     border-color: var(--glass-border);
     transform: translateY(-5px);
 }

 .case-study-results {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .case-study-results h4 {
     text-align: center;
     font-size: 2rem;
     color: var(--subheading-color);
 }

 .results-container {
     display: flex;
     flex-direction: column;
     gap: 20px;
     height: 100%;
 }

 .result-card {
     background: var(--gradient-bg);
     border-radius: 12px;
     padding: 20px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid rgba(255, 255, 255, 0.05);
     flex: 1;
 }

 .result-card:hover {
     transform: translateY(-5px);
     background: rgba(26, 42, 82, 0.7);
     border-color: var(--glass-border);
 }

 .result-icon {
     font-size: 1.8rem;
     color: var(--primary);
     background: rgba(58, 134, 255, 0.1);
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 15px;
     transition: var(--transition);
 }

 .result-card:hover .result-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .result-stat {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--heading-color);
     margin-bottom: 5px;
 }

 .case-result {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--heading-color);
     margin-bottom: 5px;
 }

 .result-label {
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--subheading-color);
     margin-bottom: 10px;
 }

 /* CTA Section */
 .cta-section {
     padding: 100px 0;
     background: var(--gradient-bg);
     position: relative;
     overflow: hidden;
 }

 .cta-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('https://source.unsplash.com/random/1920x1080/?success') center/cover no-repeat;
     opacity: 0.05;
     z-index: 0;
 }

 .cta-content {
     position: relative;
     z-index: 1;
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
 }

 .cta-buttons {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin: 40px 0;
 }

 .disclaimer {
     display: flex;
     align-items: flex-start;
     gap: 15px;
     background: var(--dark);
     border-radius: 12px;
     padding: 20px;
     margin: 30px auto;
     text-align: left;
     border: 1px solid var(--glass-border);
 }

 .disclaimer i {
     font-size: 2rem;
     color: var(--subheading-color);
     margin-top: 3px;
 }

 .disclaimer p {
     margin-bottom: 0;
     font-size: 1.2rem;
     font-weight: 600;
     color: var(--heading-color);
 }

 .cta-shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
 }

 .cta-shape {
     position: absolute;
     opacity: 0.1;
 }

 .cta-shape.shape-1 {
     top: 20%;
     left: 5%;
     width: 200px;
     height: 200px;
     border: 3px solid var(--primary);
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     animation: float 15s infinite ease-in-out;
 }

 .cta-shape.shape-2 {
     bottom: 10%;
     right: 5%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--secondary);
     border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
     animation: float 12s infinite ease-in-out reverse;
 }

 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 @keyframes float {

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

     50% {
         transform: translateY(-20px);
     }
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .casehero-title {
         font-size: 3.5rem;
     }

     .case-study-grid {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 768px) {
     .casestudie-container {
         width: 100%;
     }

     .casehero-section {
          margin-top: 10%;
         padding: 80px 0;
         min-height: auto;
     }

     .casehero-content {
         padding: 30px;
     }

     .casehero-title {
         font-size: 2.8rem;
     }

     .casehero-subtitle {
         font-size: 1.2rem;
     }

     .casehero-stats {
         flex-direction: column;
         gap: 20px;
     }

     .casehero-stat {
         gap: 10px;
         justify-content: center;
         align-items: center;
     }

     .stat-number {
         font-size: 2rem;
         margin-bottom: 0;
     }

     .case-study-header {
         padding: 20px;
     }

     .case-badge {
         right: 20px;
         font-size: 0.9rem;
     }

     .case-study-grid {
         padding: 20px;
     }

     .cta-buttons {
         flex-direction: column;
     }
 }

 @media (max-width: 480px) {
     .casehero-title {
         font-size: 2.2rem;
     }

     .casehero-subtitle {
         font-size: 1rem;
     }

     .info-group {
         gap: 10px;
     }

     .result-stat,
     .case-result {
         font-size: 2rem;
     }

     .result-label {
         font-size: 1rem;
     }

     .disclaimer {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }
 }


 /* Case Studies page End */

 /* Service Overview page Start */

 /* Hero Section */
 .service-hero-section {
     min-height: 100vh;
     position: relative;
     overflow: hidden;
     padding: 80px 0;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .service-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/servicebg.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.5;
     filter: blur(7px);
     transform: scale(1.1);
     z-index: -1;

 }

 .service-hero-particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="orangered" opacity="0.2"/></svg>');
     background-size: 100px 100px;
     animation: fadeIn 5s ease-in-out infinite;
     transform: rotate();
 }

 .service-hero-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     padding: 0;
 }
@media (max-width: 868px) {
    .service-hero-container {
        margin-top: 10%;
        flex-direction: column !important;
    }
}
 .service-hero-content-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .service-hero-content {
     max-width: 800px;
     position: relative;
     z-index: 1;
     padding: 40px;

     animation: fadeIn 1s ease-out;
 }

 .service-hero-title {
     font-size: 3.5rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
     color: var(--heading-color);
 }

 .service-hero-subtitle {
     font-size: 1.1rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .service-hero-features {
     max-width: 800px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 30px;
     background: rgba(10, 17, 40, 0.7);
     backdrop-filter: blur(10px);
     /* border: 1px solid var(--glass-border); */
     box-shadow: var(--shadow);
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
 }

 .service-hero-feature span {
     text-align: center;
     color: var(--light);
 }

 .service-hero-feature {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     margin: auto;
     gap: 15px;
     padding: 10px;
 }

 .service-features-icon {
     font-size: 1.2rem;
     color: var(--primary);
     background: rgba(58, 134, 255, 0.1);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .service-hero-feature:hover {
     border: 1px solid var(--glass-border);
 }

 .service-hero-feature:hover .service-features-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .service-hero-cta {
     display: flex;
     text-align: center;
     gap: 15px;
     margin-top: 30px;
     animation: fadeInUp 1s ease-out 0.6s forwards;
     opacity: 0;
 }

 /* Hero Animation */
 .service-hero-animation-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .service-hero-animation {
     width: 100%;
     height: 500px;
     position: relative;
     perspective: 1000px;
 }

 .services-animation {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     transform-style: preserve-3d;
     width: 100%;
     height: 100%;
     z-index: 2;
 }

 .service-card {
     position: absolute;
     width: 180px;
     height: 220px;
     background: rgba(26, 42, 82, 0.8);
     border-radius: 16px;
     padding: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     backdrop-filter: blur(10px);
     border: 1px solid var(--glass-border);
     box-shadow: var(--shadow);
     transition: var(--transition);
 }

 .card-creation {
     top: 20%;
     left: 10%;
     border-color: var(--primary);
     animation: floatCard 6s infinite ease-in-out;
 }

 .card-copy {
     top: 10%;
     right: 15%;
     border-color: var(--secondary);
     animation: floatCard 6s infinite ease-in-out 1.5s;
 }

 .card-targeting {
     bottom: 20%;
     left: 15%;
     border-color: var(--accent);
     animation: floatCard 6s infinite ease-in-out 3s;
 }

 .card-reporting {
     bottom: 15%;
     right: 10%;
     border-color: var(--heading-color);
     animation: floatCard 6s infinite ease-in-out 4.5s;
 }

 .service-icon i {
     padding: 15px;
     font-size: 2rem;
 }

 .service-icon {
     color: var(--light);
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 15px;
 }

 .service-title {
     font-size: 1.2rem;
     font-weight: 600;
     margin-bottom: 15px;
     text-align: center;
     color: var(--light);
 }

 .service-elements {
     width: 100%;
 }

 .service-element {
     height: 8px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
     margin-bottom: 10px;
     width: 100%;
 }

 .chart {
     top: 40%;
     right: 20%;
     color: var(--primary);
     animation: floatElement 10s infinite ease-in-out;
 }

 .target {
     bottom: 40%;
     left: 20%;
     color: var(--accent);
     animation: pulse 3s infinite ease-in-out;
 }

 .gear {
     color: var(--subheading-color);
 }

 .gear-1 {
     top: 60%;
     right: 25%;
     animation: rotate 10s infinite linear;
 }

 .gear-2 {
     top: 15%;
     left: 40%;
     animation: rotate 10s infinite linear reverse;
 }

 .service-animation-circles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
 }

 .service-animation-circle {
     position: absolute;
     border-radius: 50%;
     opacity: 0.1;
 }

 .circle-1 {
     top: 20%;
     left: 30%;
     width: 300px;
     height: 300px;
     border: 3px solid var(--primary);
     animation: pulse 8s infinite ease-in-out;
 }

 .circle-2 {
     top: 40%;
     right: 20%;
     width: 200px;
     height: 200px;
     border: 3px solid var(--secondary);
     animation: pulse 8s infinite ease-in-out 2s;
 }

 .circle-3 {
     bottom: 10%;
     left: 40%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--accent);
     animation: pulse 8s infinite ease-in-out 4s;
 }

 .service-hero-shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
 }

 .service-hero-shape {
     position: absolute;
     opacity: 0.2;
 }

 .service-hero-shape.shape-1 {
     top: 20%;
     left: 5%;
     width: 200px;
     height: 200px;
     border: 3px solid var(--primary);
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     animation: float 15s infinite ease-in-out;
 }

 .service-hero-shape.shape-2 {
     bottom: 10%;
     right: 5%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--secondary);
     border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
     animation: float 12s infinite ease-in-out reverse;
 }

 .service-hero-shape.shape-3 {
     top: 50%;
     right: 15%;
     width: 100px;
     height: 100px;
     border: 3px solid var(--accent);
     border-radius: 80% 20% 50% 50% / 50% 40% 60% 50%;
     animation: float 10s infinite ease-in-out;
 }

 .service-hero-shape.shape-4 {
     bottom: 30%;
     left: 15%;
     width: 120px;
     height: 120px;
     border: 3px solid var(--heading-color);
     border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
     animation: float 13s infinite ease-in-out 2s;
 }

 /* Intro Section */
 .service-intro-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .service-intro-content {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
 }

 .ecosystem-info {
     margin-top: 40px;
     padding: 30px;
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     overflow: hidden;
     /* background-image: url(../img/); */
 }

 .ecosystem-info::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/grid.avif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.5;
     filter: blur(2px);
     transform: scale(1.1);
     z-index: -1;

 }

 /* Features Section */
 .service-features-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .service-features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .service-features-card {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     padding: 30px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
 }

 .service-features-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .service-features-card .service-features-icon {
     margin: 0 auto 20px;
     font-size: 2rem;
     width: 80px;
     height: 80px;
 }

 .service-features-card h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
 }

 /* Ecosystem Section */
 .service-ecosystem-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
 }

 .service-ecosystem-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .service-ecosystem-card {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     padding: 30px;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .service-ecosystem-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .service-ecosystem-icon {
     font-size: 2rem;
     color: var(--primary);
     background: rgba(58, 134, 255, 0.1);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     transition: var(--transition);
 }

 .service-ecosystem-card:hover .service-ecosystem-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .service-ecosystem-card h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
     text-align: center;
 }

 .ecosystem-features {
     list-style: none;
     margin: 20px 0;
     flex-grow: 1;
 }

 .ecosystem-features li {
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--light);
 }

 .ecosystem-features li i {
     color: var(--subheading-color);
 }

 .ecosystem-summary {
     margin-top: 50px;
     text-align: center;
     padding: 30px;
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
 }

 .ecosystem-summary p {
     margin-bottom: 0;
 }

 /* Service Overview page End */


 /* Pricing page Start */

 /* Hero Section */
 .pricing-hero-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
 }

 .pricing-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/pricingbg.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.5;
     filter: blur(7px);
     transform: scale(1.1);
     z-index: -1;

 }

 .pricing-hero-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     opacity: 0.5;
 }

 .pricing-hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-bg);
     opacity: 0.9;
 }

 .pricing-hero-particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="white" opacity="0.3"/></svg>');
     background-size: 100px 100px;
 }

 .pricing-hero-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     padding: 0;
 }

 .pricing-hero-content-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .pricing-hero-content {
     max-width: 800px;
     width: 700px;
     position: relative;
     z-index: 1;
     /* background: rgba(10, 17, 40, 0.7); */
     padding: 40px;
     border-radius: 20px;
     backdrop-filter: blur(1px);
     animation: fadeIn 3s ease-in-out;
 }

 .pricing-hero-title {
     color: var(--heading-color);
     font-size: 4rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
 }

 .pricing-hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .pricing-hero-features {
     display: flex;
     align-items: center;
     justify-content: center;
     /* flex-direction: column; */
     gap: 30px;
     margin-top: 30px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
     flex-wrap: wrap;
 }

 .pricing-hero-feature {
     display: flex;
     align-items: center;
     align-items: center;
     flex-direction: column;
     background: var(--dark);
     padding: 20px 30px;
     border-radius: 10px;
     gap: 15px;
 }

 .pricing-hero-feature span {
     color: var(--subheading-color);
 }

 .pricing-feature-icon {
     font-size: 1.2rem;
     color: var(--primary);
     background: rgba(58, 134, 255, 0.1);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .pricing-hero-feature:hover .pricing-feature-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .pricing-hero-cta {
     display: flex;
     text-align: center;
     gap: 15px;
     margin-top: 30px;
     animation: fadeInUp 1s ease-out 0.6s forwards;
     opacity: 0;
 }

 /* Hero Animation */
 .pricing-hero-animation-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .pricing-hero-animation {
     width: 100%;
     height: 500px;
     position: relative;
     perspective: 1000px;
 }


 .pricing-animation-elements {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .pricing-animation-element {
     position: absolute;
     font-size: 2rem;
     color: var(--light);
     background: var(--glass-bg);
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow);
     border: 1px solid var(--glass-border);
 }

 .pricing-coin {
     color: gold;
 }

 .pricing-coin-1 {
     top: 20%;
     left: 10%;
     animation: floatCoin 8s infinite ease-in-out;
 }

 .pricing-coin-2 {
     top: 60%;
     left: 20%;
     animation: floatCoin 8s infinite ease-in-out 1s;
 }

 .pricing-coin-3 {
     top: 40%;
     right: 15%;
     animation: floatCoin 8s infinite ease-in-out 2s;
 }

 .pricing-chart {
     top: 15%;
     right: 20%;
     color: var(--primary);
     animation: floatElement 10s infinite ease-in-out;
 }

 .pricing-rocket {
     bottom: 20%;
     right: 10%;
     color: var(--secondary);
     animation: rocketLaunch 10s infinite ease-in-out;
 }

 .pricing-target {
     bottom: 30%;
     left: 15%;
     color: var(--accent);
     animation: pulse 3s infinite ease-in-out;
 }

 .pricing-gear {
     color: var(--subheading-color);
 }

 .pricing-gear-1 {
     top: 70%;
     right: 25%;
     animation: rotate 10s infinite linear;
 }

 .pricing-gear-2 {
     top: 30%;
     left: 25%;
     animation: rotate 10s infinite linear reverse;
 }

 .pricing-animation-circles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
 }

 .pricing-animation-circle {
     position: absolute;
     border-radius: 50%;
     opacity: 0.1;
 }

 .pricing-circle-1 {
     top: 20%;
     left: 30%;
     width: 300px;
     height: 300px;
     border: 3px solid var(--primary);
     animation: pulse 8s infinite ease-in-out;
 }

 .pricing-circle-2 {
     top: 40%;
     right: 20%;
     width: 200px;
     height: 200px;
     border: 3px solid var(--secondary);
     animation: pulse 8s infinite ease-in-out 2s;
 }

 .pricing-circle-3 {
     bottom: 10%;
     left: 40%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--accent);
     animation: pulse 8s infinite ease-in-out 4s;
 }

 .pricing-hero-shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
 }

 .pricing-hero-shape {
     position: absolute;
     opacity: 0.2;
 }

 .pricing-hero-shape.pricing-shape-1 {
     top: 20%;
     left: 5%;
     width: 200px;
     height: 200px;
     border: 3px solid var(--primary);
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     animation: float 15s infinite ease-in-out;
 }

 .pricing-hero-shape.pricing-shape-2 {
     bottom: 10%;
     right: 5%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--secondary);
     border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
     animation: float 12s infinite ease-in-out reverse;
 }

 .pricing-hero-shape.pricing-shape-3 {
     top: 50%;
     right: 15%;
     width: 100px;
     height: 100px;
     border: 3px solid var(--accent);
     border-radius: 80% 20% 50% 50% / 50% 40% 60% 50%;
     animation: float 10s infinite ease-in-out;
 }

 .pricing-hero-shape.pricing-shape-4 {
     bottom: 30%;
     left: 15%;
     width: 120px;
     height: 120px;
     border: 3px solid var(--heading-color);
     border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
     animation: float 13s infinite ease-in-out 2s;
 }

 /* Intro Section */
 .pricing-intro-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .pricing-intro-content {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
 }

 .pricing-intro-video {
     position: relative;
     width: 100%;
     height: 300px;
     overflow: hidden;
     border-radius: 16px;
     margin-top: 40px;
     box-shadow: var(--shadow);
 }

 .pricing-intro-video video {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .pricing-video-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(10, 17, 40, 0.196);
 }

 /* Features Section */
 .pricing-features-section {
     padding: 80px 0;
     /* background-color: rgba(255, 0, 0, 0.104); */
     background: linear-gradient(to top, rgba(2, 13, 93, 0.418), rgba(255, 255, 255, 0.382)) !important;
 }

 .pricing-features-section {
     min-height: 100vh;
     position: relative;
     overflow: hidden;
     padding: 80px 0;
 }

 .pricing-features-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/pricing-socialbg.avif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.3;
     filter: blur(3px);
     z-index: -1;

 }

 .pricing-features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .pricing-feature-card {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     padding: 30px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
 }

 .pricing-feature-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .pricing-feature-card .pricing-feature-icon {
     margin: 0 auto 20px;
     font-size: 2rem;
     width: 80px;
     height: 80px;
 }

 .pricing-feature-card h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
 }

 /* Pricing Section */
 .pricing-pricing-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .pricing-pricing-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     margin-bottom: 50px;
 }

 .pricing-toggle-label {
     font-size: 1.1rem;
     opacity: 0.7;
     text-align: center;
     transition: var(--transition);
 }

 .pricing-toggle-label.pricing-active {
     opacity: 1;
     font-weight: 600;
     color: var(--primary);
 }

 .pricing-switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
 }

 .pricing-switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .pricing-slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(255, 255, 255, 0.2);
     transition: .4s;
 }

 .pricing-slider:before {
     position: absolute;
     content: "";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     transition: .4s;
 }

 input:checked+.pricing-slider {
     background-color: var(--primary);
 }

 input:checked+.pricing-slider:before {
     transform: translateX(26px);
 }

 .pricing-slider.pricing-round {
     border-radius: 34px;
 }

 .pricing-slider.pricing-round:before {
     border-radius: 50%;
 }

 .pricing-pricing-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     display: none;
     padding: 30px 10px;
 }

 .pricing-pricing-grid.pricing-active {
     display: grid;
 }

 .pricing-subscription-grid {
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }

 .pricing-enterprise-card {
     grid-column: span 1;
 }

 .pricing-pricing-card {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .pricing-pricing-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .pricing-pricing-card.pricing-featured {
     border-color: var(--primary);
     transform: scale(1.05);
     z-index: 1;
 }

 .pricing-pricing-card.pricing-featured:hover {
     transform: scale(1.05) translateY(-10px);
 }

 .pricing-pricing-header {
     background: rgba(10, 17, 40, 0.8);
     padding: 30px;
     position: relative;
     text-align: center;
 }

 .pricing-pricing-header h3 {
     color: var(--heading-color);
 }

 .pricing-pricing-badge {
     position: absolute;
     top: -15px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--gradient-1);
     color: white;
     padding: 5px 15px;
     border-radius: 50px;
     font-weight: 600;
     font-size: 0.9rem;
     box-shadow: 0 4px 10px rgba(58, 134, 255, 0.3);
 }

 .pricing-pricing-price {
     margin-top: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .pricing-price {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--accent-color);
 }

 .pricing-period {
     font-size: 1rem;
     opacity: 1;
 }

 .pricing-pricing-body a {
     text-align: center;
     display: inline-block;

 }

 .pricing-pricing-body {
     padding: 30px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
 }

 .pricing-pricing-description {
     margin-bottom: 20px;
     text-align: center;
     color: var(--subheading-color);
 }

 .pricing-pricing-features {
     list-style: none;
     margin-bottom: 30px;
     flex-grow: 1;
 }

 .pricing-pricing-features li {
     margin-bottom: 15px;
     display: flex;
     align-items: flex-start;
     gap: 10px;
     color: var(--light);
 }

 .pricing-pricing-features li i {
     color: var(--subheading-color);
     margin-top: 5px;
 }

 .pricing-pricing-best-for {
     background: rgba(10, 17, 40, 0.5);
     border-radius: 12px;
     padding: 15px;
     margin-bottom: 30px;
 }

 .pricing-pricing-best-for span {
     display: block;
     font-weight: 600;
     margin-bottom: 5px;
     color: var(--subheading-color);
 }

 .pricing-pricing-best-for p {
     margin-bottom: 0;
     font-size: 0.95rem;
 }

 /* Option Section */
 .pricing-option-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, transparent, rgba(0, 83, 128, 0.19));
 }

 .pricing-option-section {
     min-height: 100vh;
     position: relative;
     overflow: hidden;
     padding: 80px 0;
 }

 .pricing-option-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('/img/pricing-bg.avif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.3;
     filter: blur(2px);
     z-index: -1;

 }

 .pricing-option-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .pricing-option-card {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     padding: 30px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
 }

 .pricing-option-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .pricing-option-icon {
     font-size: 2rem;
     color: var(--primary);
     background: rgba(58, 134, 255, 0.1);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     transition: var(--transition);
 }

 .pricing-option-card:hover .pricing-option-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .pricing-option-card h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
 }

 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 @keyframes float {

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

     50% {
         transform: translateY(-20px);
     }
 }

 @keyframes floatCoin {

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

     25% {
         transform: translateY(-15px) rotate(5deg);
     }

     50% {
         transform: translateY(0) rotate(0);
     }

     75% {
         transform: translateY(15px) rotate(-5deg);
     }
 }

 @keyframes floatElement {

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

     50% {
         transform: translateY(-20px);
     }
 }

 @keyframes rocketLaunch {

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

     50% {
         transform: translateY(-30px) translateX(-20px);
     }
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.1;
     }

     50% {
         transform: scale(1.1);
         opacity: 0.2;
     }
 }

 @keyframes rotate {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 @keyframes rotatePricing {
     0% {
         transform: translate(-50%, -50%) rotateY(0deg);
     }

     100% {
         transform: translate(-50%, -50%) rotateY(360deg);
     }
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .pricing-hero-title {
         font-size: 3rem;
     }

     .pricing-hero-container {
         flex-direction: column;
     }

     .pricing-hero-content-wrapper,
     .pricing-hero-animation-wrapper {
         width: 100%;
     }

     .pricing-hero-animation {
         height: 400px;
     }

     .pricing-pricing-grid {
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 80px;

     }

     .pricing-subscription-grid {
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     }

     .pricing-enterprise-card {
         grid-column: span 1;
     }
 }

 @media (max-width: 768px) {
     .pricing-hero-section {
        margin-top: 10%;
         padding: 60px 0;
         min-height: auto;
     }

     .pricing-hero-content {
         padding: 30px;
     }

     .pricing-hero-title {
         font-size: 2.5rem;
     }

     .pricing-hero-subtitle {
         font-size: 1.1rem;
     }

     .pricing-hero-animation {
         height: 350px;
     }

     .pricing-tier {
         width: 150px;
         height: 220px;
     }

     .pricing-tier-basic {
         transform: translateZ(50px) translateX(-160px);
     }

     .pricing-tier-pro {
         transform: translateZ(50px) translateX(160px);
     }

     .pricing-tier-header {
         font-size: 1.2rem;
     }

     .pricing-tier-price {
         font-size: 1.5rem;
     }

     .pricing-pricing-card.pricing-featured {
         transform: scale(1);
     }

     .pricing-pricing-card.pricing-featured:hover {
         transform: translateY(-10px);
     }

     .pricing-toggle-label {
         font-size: inherit;
     }
 }

 @media (max-width: 480px) {
     .pricing-hero-title {
         font-size: 2rem;
     }

     .pricing-hero-subtitle {
         font-size: 1rem;
     }

     .pricing-hero-cta {
         flex-direction: column;
     }

     .pricing-hero-animation {
         height: 300px;
     }

     .pricing-tier {
         width: 120px;
         height: 180px;
         padding: 15px;
     }

     .pricing-tier-basic {
         transform: translateZ(30px) translateX(-130px);
     }

     .pricing-tier-pro {
         transform: translateZ(30px) translateX(130px);
     }

     .pricing-tier-header {
         font-size: 1rem;
     }

     .pricing-tier-price {
         font-size: 1.2rem;
     }

     .pricing-pricing-header {
         padding: 20px;
     }

     .pricing-pricing-body {
         padding: 20px;
     }

     .pricing-price {
         font-size: 2rem;
     }
 }

 /* Pricing page End */


 /* Resource Overview page Start */

 /* Hero Section */
 .resources-hero-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
 }

 .resources-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/reource-overview.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.5;
     filter: blur(7px);
     transform: scale(1.1);
     z-index: -1;

 }

 .resources-hero-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     opacity: 0.5;
 }

 .resources-hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-bg);
     opacity: 0.9;
 }

 .resources-hero-particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="white" opacity="0.3"/></svg>');
     background-size: 100px 100px;
 }

 .resources-hero-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     padding: 0;
 }

 .resources-hero-content-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .resources-hero-content {
     max-width: 800px;
     width: 700px;
     position: relative;
     z-index: 1;
     padding: 40px;
     border-radius: 20px;
     backdrop-filter: blur(1px);
     animation: fadeIn 3s ease-in-out;
 }

 .resources-hero-title {
     color: var(--heading-color);
     font-size: 4rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
 }

 .resources-hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .resources-hero-features {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 30px;
     margin-top: 30px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
     flex-wrap: wrap;
 }

 .resources-hero-feature {
     display: flex;
     align-items: center;
     align-items: center;
     flex-direction: column;
     background: var(--dark);
     padding: 20px 30px;
     border-radius: 10px;
     gap: 15px;
 }

 .resources-hero-feature span {
     color: var(--subheading-color);
 }

 .resources-feature-icon {
     font-size: 1.2rem;
     color: var(--primary);
     background: rgba(74, 134, 232, 0.1);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .resources-hero-feature:hover .resources-feature-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .resources-hero-cta {
     display: flex;
     text-align: center;
     gap: 15px;
     margin-top: 30px;
     animation: fadeInUp 1s ease-out 0.6s forwards;
     opacity: 0;
 }

 /* Hero Animation */
 .resources-hero-animation-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .resources-hero-animation {
     width: 100%;
     height: 500px;
     position: relative;
     perspective: 1000px;
 }


 .resources-animation-elements {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .resources-animation-element {
     position: absolute;
     font-size: 2rem;
     color: var(--light);
     background: var(--glass-bg);
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow);
     border: 1px solid var(--glass-border);
 }

 .resources-document {
     color: var(--light);
 }

 .resources-document-1 {
     top: 20%;
     left: 10%;
     animation: floatDocument 8s infinite ease-in-out;
 }

 .resources-document-2 {
     top: 60%;
     left: 20%;
     animation: floatDocument 8s infinite ease-in-out 1s;
 }

 .resources-document-3 {
     top: 40%;
     right: 15%;
     animation: floatDocument 8s infinite ease-in-out 2s;
 }

 .resources-chart {
     top: 15%;
     right: 20%;
     color: var(--primary);
     animation: floatElement 10s infinite ease-in-out;
 }

 .resources-lightbulb {
     bottom: 20%;
     right: 10%;
     color: var(--secondary);
     animation: rocketLaunch 10s infinite ease-in-out;
 }

 .resources-target {
     bottom: 30%;
     left: 15%;
     color: var(--accent);
     animation: pulse 3s infinite ease-in-out;
 }

 .resources-gear {
     color: var(--subheading-color);
 }

 .resources-gear-1 {
     top: 70%;
     right: 25%;
     animation: rotate 10s infinite linear;
 }

 .resources-gear-2 {
     top: 30%;
     left: 25%;
     animation: rotate 10s infinite linear reverse;
 }

 .resources-animation-circles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
 }

 .resources-animation-circle {
     position: absolute;
     border-radius: 50%;
     opacity: 0.1;
 }

 .resources-circle-1 {
     top: 20%;
     left: 30%;
     width: 300px;
     height: 300px;
     border: 3px solid var(--primary);
     animation: pulse 8s infinite ease-in-out;
 }

 .resources-circle-2 {
     top: 40%;
     right: 20%;
     width: 200px;
     height: 200px;
     border: 3px solid var(--secondary);
     animation: pulse 8s infinite ease-in-out 2s;
 }

 .resources-circle-3 {
     bottom: 10%;
     left: 40%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--accent);
     animation: pulse 8s infinite ease-in-out 4s;
 }

 .resources-hero-shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
 }

 .resources-hero-shape {
     position: absolute;
     opacity: 0.2;
 }

 .resources-hero-shape.resources-shape-1 {
     top: 20%;
     left: 5%;
     width: 200px;
     height: 200px;
     border: 3px solid var(--primary);
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     animation: float 15s infinite ease-in-out;
 }

 .resources-hero-shape.resources-shape-2 {
     bottom: 10%;
     right: 5%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--secondary);
     border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
     animation: float 12s infinite ease-in-out reverse;
 }

 .resources-hero-shape.resources-shape-3 {
     top: 50%;
     right: 15%;
     width: 100px;
     height: 100px;
     border: 3px solid var(--accent);
     border-radius: 80% 20% 50% 50% / 50% 40% 60% 50%;
     animation: float 10s infinite ease-in-out;
 }

 .resources-hero-shape.resources-shape-4 {
     bottom: 30%;
     left: 15%;
     width: 120px;
     height: 120px;
     border: 3px solid var(--heading-color);
     border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
     animation: float 13s infinite ease-in-out 2s;
 }

 /* Intro Section */
 .resources-intro-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .resources-intro-content {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
 }

 .resources-intro-video {
     position: relative;
     width: 100%;
     height: 300px;
     overflow: hidden;
     border-radius: 16px;
     margin-top: 40px;
     box-shadow: var(--shadow);
 }

 .resources-intro-video video {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .resources-video-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(10, 17, 40, 0.196);
 }

 /* Categories Section */
 .resources-categories-section {
     padding: 80px 0;
     background: var(--gradient-bg);
 }

 .resources-categories-section {
     min-height: 100vh;
     position: relative;
     overflow: hidden;
     padding: 80px 0;
 }

 .resources-categories-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .resources-category-card {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     padding: 30px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
 }

 .resources-category-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .resources-category-icon {
     margin: 0 auto 20px;
     font-size: 2rem;
     color: var(--primary);
     background: rgba(74, 134, 232, 0.1);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .resources-category-card:hover .resources-category-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .resources-category-card h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
 }

 .resources-category-features {
     list-style: none;
     margin-top: 20px;
     text-align: left;
 }

 .resources-category-features li {
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--subheading-color);
 }

 .resources-category-features li i {
     color: var(--light);
 }

 /* Usage Section */
 .resources-usage-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .resources-usage-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .resources-usage-card {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     padding: 30px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
 }

 .resources-usage-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .resources-usage-icon {
     margin: 0 auto 20px;
     font-size: 2rem;
     color: var(--primary);
     background: rgba(74, 134, 232, 0.1);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .resources-usage-card:hover .resources-usage-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .resources-usage-card h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
 }

 /* Featured Resources Section */
 .resources-featured-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
     position: relative;
 }

 .resources-featured-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/bluebg.avif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.5;
     filter: blur(2px);
     z-index: -1;
 }

 .resources-featured-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .resources-featured-card {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .resources-featured-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .resources-featured-card.resources-featured {
     border-color: var(--primary);
     transform: scale(1.05);
     z-index: 1;
 }

 .resources-featured-card.resources-featured:hover {
     transform: scale(1.05) translateY(-10px);
 }

 .resources-featured-header {
     background: rgba(10, 17, 40, 0.8);
     padding: 30px;
     position: relative;
     text-align: center;
 }

 .resources-featured-header h3 {
     color: var(--heading-color);
 }

 .resources-featured-badge {
     position: absolute;
     top: -15px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--gradient-1);
     color: white;
     padding: 5px 15px;
     border-radius: 50px;
     font-weight: 600;
     font-size: 0.9rem;
     box-shadow: 0 4px 10px rgba(74, 134, 232, 0.3);
 }

 .resources-featured-body {
     padding: 30px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
 }

 .resources-featured-description {
     margin-bottom: 20px;
     text-align: center;
     color: var(--light);
 }

 .resources-featured-meta {
     display: flex;
     justify-content: space-between;
     margin-bottom: 20px;
     font-size: 0.9rem;
     color: var(--light);
     opacity: 0.8;
 }

 .resources-featured-meta span {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .resources-featured-body button {
     margin-top: auto;
 }

 /* Invest Section */
 .resources-invest-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
 }

 .resources-invest-content {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
 }

 .resources-invest-stats {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
     margin-top: 50px;
     gap: 20px;
 }

 .resources-stat-item {
     text-align: center;
     padding: 20px;
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     min-width: 150px;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
 }

 .resources-stat-item:hover {
     transform: translateY(-10px);
     border-color: var(--primary);
 }

 .resources-stat-number {
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--primary);
     margin-bottom: 5px;
 }

 .resources-stat-label {
     font-size: 1rem;
     color: var(--light);
 }

 /* CTA Section */
 .resources-cta-section {
     padding: 100px 0;
     background: var(--gradient-bg);
     position: relative;
     overflow: hidden;
 }

 .resources-cta-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('https://source.unsplash.com/random/1920x1080/?digital-marketing') center/cover no-repeat;
     opacity: 0.05;
     z-index: 0;
 }

 .resources-cta-content {
     position: relative;
     z-index: 1;
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
 }

 .resources-cta-buttons {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin: 40px 0;
 }

 .resources-cta-shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
 }

 .resources-cta-shape {
     position: absolute;
     opacity: 0.1;
 }

 .resources-cta-shape.resources-shape-1 {
     top: 20%;
     left: 5%;
     width: 200px;
     height: 200px;
     border: 3px solid var(--primary);
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     animation: float 15s infinite ease-in-out;
 }

 .resources-cta-shape.resources-shape-2 {
     bottom: 10%;
     right: 5%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--secondary);
     border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
     animation: float 12s infinite ease-in-out reverse;
 }

 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 @keyframes float {

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

     50% {
         transform: translateY(-20px);
     }
 }

 @keyframes floatDocument {

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

     25% {
         transform: translateY(-15px) rotate(5deg);
     }

     50% {
         transform: translateY(0) rotate(0);
     }

     75% {
         transform: translateY(15px) rotate(-5deg);
     }
 }

 @keyframes floatElement {

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

     50% {
         transform: translateY(-20px);
     }
 }

 @keyframes rocketLaunch {

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

     50% {
         transform: translateY(-30px) translateX(-20px);
     }
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.1;
     }

     50% {
         transform: scale(1.1);
         opacity: 0.2;
     }
 }

 @keyframes rotate {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .resources-hero-title {
         font-size: 3rem;
     }

     .resources-hero-container {
         flex-direction: column;
     }

     .resources-hero-content-wrapper,
     .resources-hero-animation-wrapper {
         width: 100%;
     }

     .resources-hero-animation {
         height: 400px;
     }

     .resources-featured-grid {
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 30px;
     }

     .resources-featured-card.resources-featured {
         transform: scale(1);
     }

     .resources-featured-card.resources-featured:hover {
         transform: translateY(-10px);
     }
 }

 @media (max-width: 768px) {
     .resources-container {
         width: 95%;
     }

     .resources-hero-section {
        margin-top: 10%;
         padding: 60px 0;
         min-height: auto;
     }

     .resources-hero-content {
         padding: 30px;
     }

     .resources-hero-features {
         gap: 10px;
     }

     .resources-hero-feature {
         padding: 10px 15px;
     }

     .resources-hero-title {
         font-size: 2.5rem;
     }

     .resources-hero-subtitle {
         font-size: 1.1rem;
     }

     .resources-hero-animation {
         height: 350px;
     }

     .resources-cta-buttons {
         flex-direction: column;
     }

     .resources-invest-stats {
         flex-direction: column;
     }

     .resources-stat-item {
         width: 100%;
     }
 }

 @media (max-width: 480px) {
     .resources-hero-title {
         font-size: 2rem;
     }

     .resources-hero-subtitle {
         font-size: 1rem;
     }

     .resources-hero-cta {
         flex-direction: column;
     }

     .resources-hero-animation {
         height: 300px;
     }

     .resources-featured-header {
         padding: 20px;
     }

     .resources-featured-body {
         padding: 20px;
     }
 }

 /* Resource Overview page End */



 /* How It Works page Start */

 /* Hero Section */
 .howitworks-hero-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
     background: var(--gradient-bg);
     z-index: 0;
 }

 .howitworks-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/how-works.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.3;
     filter: blur(7px);
     transform: scale(1.1);
     z-index: -1;

 }

 .howitworks-hero-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     opacity: 0.5;
 }

 .howitworks-hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-bg);
     opacity: 0.9;
 }

 .howitworks-hero-particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="white" opacity="0.3"/></svg>');
     background-size: 100px 100px;
 }

 .howitworks-hero-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     padding: 0;
 }

 .howitworks-hero-content-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .howitworks-hero-content {
     max-width: 800px;
     width: 700px;
     position: relative;
     z-index: 1;
     padding: 40px;
     border-radius: 20px;
     backdrop-filter: blur(1px);
     animation: fadeIn 3s ease-in-out;
 }

 .howitworks-hero-title {
     color: var(--heading-color);
     font-size: 4rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
 }

 .howitworks-hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .howitworks-hero-features {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 30px;
     margin-top: 30px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
     flex-wrap: wrap;
 }

 .howitworks-hero-feature {
     display: flex;
     align-items: center;
     align-items: center;
     flex-direction: column;
     background: var(--dark);
     padding: 20px 30px;
     border-radius: 10px;
     gap: 15px;
 }

 .howitworks-hero-feature span {
     color: var(--subheading-color);
 }

 .howitworks-feature-icon {
     font-size: 1.2rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .howitworks-hero-feature:hover .howitworks-feature-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .howitworks-hero-cta {
     display: flex;
     text-align: center;
     gap: 15px;
     margin-top: 30px;
     animation: fadeInUp 1s ease-out 0.6s forwards;
     opacity: 0;
 }

 /* New Futuristic Process Animation */
 .howitworks-hero-animation-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .howitworks-process-animation {
     width: 100%;
     height: 500px;
     position: relative;
     perspective: 1000px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .howitworks-process-container {
     width: 100%;
     height: 100%;
     position: relative;
     transform-style: preserve-3d;
 }

 .howitworks-process-hub {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 80px;
     background: rgba(255, 107, 0, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
     border: 2px solid var(--primary);
     box-shadow: 0 0 30px rgba(255, 107, 0, 0.5);
 }

 .howitworks-process-hub::before {
     content: "";
     position: absolute;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: rgba(255, 107, 0, 0.3);
     animation: pulse 2s infinite;
 }

 .howitworks-process-hub i {
     font-size: 2rem;
     color: var(--primary);
 }

 .howitworks-pulse-circle {
     position: absolute;
     top: 0%;
     left: 0%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
     border-radius: 50%;
     border: 2px solid var(--primary);
     opacity: 0.7;
 }

 .howitworks-process-step {
     position: absolute;
     width: 70px;
     height: 70px;
     background: rgba(0, 194, 168, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
     border: 2px solid var(--secondary);
     box-shadow: 0 0 20px rgba(0, 194, 168, 0.4);
     transition: var(--transition);
     cursor: pointer;
 }

 .howitworks-process-step i {
     font-size: 1.8rem;
     color: var(--secondary);
     transition: var(--transition);
 }

 .howitworks-process-step:hover,
 .howitworks-step-active {
     transform: scale(1.1);
     background: rgba(0, 194, 168, 0.3);
     box-shadow: 0 0 30px rgba(0, 194, 168, 0.6);
 }

 .howitworks-process-step:hover i,
 .howitworks-step-active i {
     color: var(--light);
 }

 .howitworks-process-step[data-step="1"] {
     top: 20%;
     left: 20%;
 }

 .howitworks-process-step[data-step="2"] {
     top: 20%;
     right: 20%;
 }

 .howitworks-process-step[data-step="3"] {
     bottom: 20%;
     right: 20%;
 }

 .howitworks-process-step[data-step="4"] {
     bottom: 20%;
     left: 20%;
 }

 .howitworks-process-step-label {
     position: absolute;
     background: rgba(18, 26, 46, 0.8);
     padding: 5px 10px;
     border-radius: 5px;
     font-size: 0.9rem;
     color: var(--light);
     white-space: nowrap;
     opacity: 0;
     transform: translateY(10px);
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(5px);
 }

 .howitworks-process-step:hover .howitworks-process-step-label {
     opacity: 1;
     transform: translateY(0);
 }

 .howitworks-process-step[data-step="1"] .howitworks-process-step-label {
     top: -40px;
     left: 50%;
     transform: translateX(-50%) translateY(10px);
 }

 .howitworks-process-step[data-step="1"]:hover .howitworks-process-step-label {
     transform: translateX(-50%) translateY(0);
 }

 .howitworks-process-step[data-step="2"] .howitworks-process-step-label {
     top: -40px;
     left: 50%;
     transform: translateX(-50%) translateY(10px);
 }

 .howitworks-process-step[data-step="2"]:hover .howitworks-process-step-label {
     transform: translateX(-50%) translateY(0);
 }

 .howitworks-process-step[data-step="3"] .howitworks-process-step-label {
     bottom: -40px;
     left: 50%;
     transform: translateX(-50%) translateY(-10px);
 }

 .howitworks-process-step[data-step="3"]:hover .howitworks-process-step-label {
     transform: translateX(-50%) translateY(0);
 }

 .howitworks-process-step[data-step="4"] .howitworks-process-step-label {
     bottom: -40px;
     left: 50%;
     transform: translateX(-50%) translateY(-10px);
 }

 .howitworks-process-step[data-step="4"]:hover .howitworks-process-step-label {
     transform: translateX(-50%) translateY(0);
 }

 .howitworks-process-svg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .howitworks-process-svg path {
     stroke: var(--secondary);
     stroke-width: 2;
     fill: none;
     stroke-linecap: round;
     filter: drop-shadow(0 0 5px rgba(0, 194, 168, 0.5));
 }

 .howitworks-process-descriptions {
     position: absolute;
     bottom: 10px;
     left: 0;
     width: 100%;
     text-align: center;
 }

 .howitworks-process-description {
     background: rgba(18, 26, 46, 0.8);
     padding: 15px 20px;
     border-radius: 10px;
     margin: 0 auto;
     max-width: 80%;
     opacity: 0;
     transform: translateY(20px);
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(5px);
     display: none;
 }

 .howitworks-process-description.active {
     opacity: 1;
     transform: translateY(0);
     display: block;
 }

 .howitworks-process-description h4 {
     color: var(--secondary);
     margin-bottom: 5px;
 }

 .howitworks-process-description p {
     margin-bottom: 0;
     font-size: 0.95rem;
 }

 .howitworks-process-glow {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(0, 194, 168, 0.2) 0%, rgba(10, 17, 40, 0) 70%);
     border-radius: 50%;
     z-index: 0;
     animation: pulse 4s infinite;
 }

 /* Overview Section */
 .howitworks-overview-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .howitworks-steps-timeline {
     position: relative;
     max-width: 1000px;
     margin: 60px auto 0;
     padding: 20px 0;
 }

 .howitworks-timeline-line {
     position: absolute;
     top: 0;
     left: 50%;
     width: 4px;
     height: 100%;
     background: var(--gradient-1);
     transform: translateX(-50%);
     border-radius: 4px;
 }

 .howitworks-timeline-item {
     position: relative;
     display: flex;
     align-items: center;
     margin-bottom: 50px;
 }

 .howitworks-timeline-item:nth-child(odd) {
     justify-content: flex-start;
     padding-right: 50%;
     padding-left: 30px;
 }

 .howitworks-timeline-item:nth-child(even) {
     justify-content: flex-end;
     padding-left: 50%;
     padding-right: 30px;
 }

 .howitworks-timeline-number {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 50px;
     background: var(--gradient-1);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     font-weight: 700;
     z-index: 1;
     box-shadow: var(--shadow);
 }

 .howitworks-timeline-content {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     padding: 20px 30px;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     width: 100%;
     max-width: 400px;
 }

 .howitworks-timeline-content h3 {
     margin-bottom: 5px;
 }

 .howitworks-timeline-content p {
     margin-bottom: 0;
     color: var(--light);
 }

 .howitworks-timeline-item:hover .howitworks-timeline-content {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 @keyframes float {

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

     50% {
         transform: translateY(-20px);
     }
 }

 @keyframes pulse {

     0%,
     100% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 0.5;
     }

     50% {
         transform: translate(-50%, -50%) scale(1.2);
         opacity: 0.2;
     }
 }

 @keyframes rotate {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .howitworks-hero-title {
         font-size: 3rem;
     }

     .howitworks-hero-container {
         flex-direction: column;
     }

     .howitworks-hero-content-wrapper,
     .howitworks-hero-animation-wrapper {
         width: 100%;
     }

     .howitworks-process-animation {
         height: 400px;
     }
 }

 @media (max-width: 768px) {
     .howitworks-container {
         width: 95%;
     }

     .howitworks-hero-section {
        margin-top: 10%;
         padding: 60px 0;
         min-height: auto;
     }

     .howitworks-hero-content {
         padding: 30px;
     }

     .howitworks-hero-features {
         display: none;
     }

     .howitworks-hero-title {
         font-size: 2.5rem;
     }

     .howitworks-hero-subtitle {
         font-size: 1.1rem;
     }

     .howitworks-process-animation {
         height: 350px;
     }

     .howitworks-process-step {
         width: 60px;
         height: 60px;
     }

     .howitworks-process-hub {
         width: 70px;
         height: 70px;
     }
 }

 @media (max-width: 480px) {

     .howitworks-hero-subtitle {
         font-size: 1rem;
     }

     .howitworks-hero-cta {
         flex-direction: column;
     }

     .howitworks-process-animation {
         height: 300px;
     }

     .howitworks-process-step {
         width: 50px;
         height: 50px;
     }

     .howitworks-process-step i {
         font-size: 1.4rem;
     }

     .howitworks-process-hub {
         width: 60px;
         height: 60px;
     }

     .howitworks-process-hub i {
         font-size: 1.6rem;
     }
 }

 /* Overview Section */
 .howitworks-overview-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .howitworks-steps-timeline {
     position: relative;
     max-width: 1000px;
     margin: 60px auto 0;
     padding: 20px 0;
 }

 .howitworks-timeline-line {
     position: absolute;
     top: 0;
     left: 50%;
     width: 4px;
     height: 100%;
     background: var(--gradient-1);
     transform: translateX(-50%);
     border-radius: 4px;
 }

 .howitworks-timeline-item {
     position: relative;
     display: flex;
     align-items: center;
     margin-bottom: 50px;
 }

 .howitworks-timeline-item:nth-child(odd) {
     justify-content: flex-start;
     padding-right: 50%;
     padding-left: 30px;
 }

 .howitworks-timeline-item:nth-child(even) {
     justify-content: flex-end;
     padding-left: 50%;
     padding-right: 30px;
 }

 .howitworks-timeline-number {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 50px;
     background: var(--gradient-1);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     font-weight: 700;
     z-index: 1;
     box-shadow: var(--shadow);
 }

 .howitworks-timeline-content {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     padding: 20px 30px;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     width: 100%;
     max-width: 400px;
 }

 .howitworks-timeline-content h3 {
     margin-bottom: 5px;
 }

 .howitworks-timeline-content p {
     margin-bottom: 0;
     color: var(--light);
 }

 .howitworks-timeline-item:hover .howitworks-timeline-content {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 /* Step Sections */
 .howitworks-step-section {
     padding: 80px 0;
     position: relative;
 }

 .howitworks-step1-section,
 .howitworks-step3-section {
     background: linear-gradient(to bottom, rgba(2, 13, 93, 0.418), rgba(255, 255, 255, 0.1));
 }

 .howitworks-step2-section,
 .howitworks-step4-section {
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
 }

 .howitworks-step-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/howitworks-bg.avif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.1;
     filter: blur(2px);
     z-index: -1;
 }

 .howitworks-step-content {
     display: flex;
     align-items: center;
     gap: 50px;
 }

 .howitworks-step-content-reverse {
     flex-direction: row-reverse;
 }

 .howitworks-step-info {
     flex: 1;
 }

 .howitworks-step-number {
     display: inline-block;
     background: var(--gradient-1);
     color: white;
     padding: 5px 15px;
     border-radius: 50px;
     font-weight: 600;
     margin-bottom: 15px;
 }

 .howitworks-step-features {
     list-style: none;
     margin: 30px 0;
 }

 .howitworks-step-features li {
     display: flex;
     align-items: flex-start;
     margin-bottom: 25px;
     gap: 15px;
 }

 .howitworks-step-icon {
     font-size: 1.2rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     min-width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .howitworks-step-features li:hover .howitworks-step-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .howitworks-step-feature-content {
     flex: 1;
 }

 .howitworks-step-feature-content h4 {
     margin-bottom: 5px;
     color: var(--accent-color);
 }

 .howitworks-step-feature-content p {
     margin-bottom: 0;
 }

 .howitworks-step-image {
     flex: 1;
 }

 .howitworks-image-container {
     position: relative;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: var(--shadow);
 }

 .howitworks-image-container img {
     width: 100%;
     height: auto;
     display: block;
 }

 .howitworks-image-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom right, rgba(255, 107, 0, 0.2), rgba(0, 194, 168, 0.2));
     pointer-events: none;
 }

 /* Why Choose Section */
 .howitworks-why-section {
     padding: 80px 0;
     background: var(--gradient-bg);
 }

 .howitworks-benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .howitworks-benefit-card {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     padding: 30px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
 }

 .howitworks-benefit-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .howitworks-benefit-icon {
     margin: 0 auto 20px;
     font-size: 2rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .howitworks-benefit-card:hover .howitworks-benefit-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .howitworks-benefit-card h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
 }


 /* Getting Started Section */
 .howitworks-getstarted-section {
     padding: 80px 0;
     background: linear-gradient(to top, rgba(2, 13, 93, 0.418), rgba(255, 255, 255, 0.1));
     position: relative;
 }

 .howitworks-getstarted-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/howitworks-steps-bg.avif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.1;
     filter: blur(2px);
     z-index: -1;
 }

 .howitworks-getstarted-steps {
     max-width: 800px;
     margin: 50px auto;
 }

 .howitworks-getstarted-step {
     display: flex;
     align-items: flex-start;
     margin-bottom: 30px;
     gap: 20px;
 }

 .howitworks-getstarted-number {
     background: var(--gradient-1);
     color: white;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     font-weight: 700;
     flex-shrink: 0;
 }

 .howitworks-getstarted-content {
     background: rgba(26, 42, 82, 0.7);
     border-radius: 16px;
     padding: 20px 30px;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     flex: 1;
 }

 .howitworks-getstarted-content h3 {
     margin-bottom: 10px;
 }

 .howitworks-getstarted-content p {
     margin-bottom: 0;
 }

 .howitworks-getstarted-step:hover .howitworks-getstarted-content {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .howitworks-getstarted-footer {
     text-align: center;
     max-width: 800px;
     margin: 0 auto;
 }

 /* CTA Section */
 .howitworks-cta-section {
     padding: 100px 0;
     background: var(--gradient-bg);
     position: relative;
     overflow: hidden;
 }

 .howitworks-cta-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('https://source.unsplash.com/random/1920x1080/?social-media-marketing') center/cover no-repeat;
     opacity: 0.05;
     z-index: 0;
 }

 .howitworks-cta-content {
     position: relative;
     z-index: 1;
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
 }

 .howitworks-cta-buttons {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin: 40px 0;
 }

 .howitworks-cta-shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
 }

 .howitworks-cta-shape {
     position: absolute;
     opacity: 0.1;
 }

 .howitworks-cta-shape.howitworks-shape-1 {
     top: 20%;
     left: 5%;
     width: 200px;
     height: 200px;
     border: 3px solid var(--primary);
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     animation: float 15s infinite ease-in-out;
 }

 .howitworks-cta-shape.howitworks-shape-2 {
     bottom: 10%;
     right: 5%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--secondary);
     border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
     animation: float 12s infinite ease-in-out reverse;
 }

 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 @keyframes float {

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

     50% {
         transform: translateY(-20px);
     }
 }

 @keyframes floatStep {

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

     25% {
         transform: translateY(-15px) rotate(5deg);
     }

     50% {
         transform: translateY(0) rotate(0);
     }

     75% {
         transform: translateY(15px) rotate(-5deg);
     }
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.5;
     }

     50% {
         transform: scale(1.1);
         opacity: 1;
     }
 }

 @keyframes rotate {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .howitworks-hero-title {
         font-size: 3rem;
     }

     .howitworks-hero-container {
         flex-direction: column;
         margin-top: 10%;
     }

     .howitworks-hero-content-wrapper,
     .howitworks-hero-animation-wrapper {
         width: 100%;
     }

     .howitworks-hero-animation {
         height: 400px;
     }

     .howitworks-step-content {
         flex-direction: column;
     }

     .howitworks-step-content-reverse {
         flex-direction: column;
     }
 }

 @media (max-width: 768px) {
     .howitworks-container {
         width: 95%;
     }

     .howitworks-hero-section {
         padding: 60px 0;
         min-height: auto;
     }

     .howitworks-hero-content {
         padding: 30px;
     }

     .howitworks-hero-title {
         font-size: 2.5rem;
     }

     .howitworks-hero-subtitle {
         font-size: 1.1rem;
     }

     .howitworks-hero-animation {
         height: 350px;
     }

     .howitworks-timeline-line {
         display: none;
     }

     .howitworks-timeline-item {
         text-align: center;
         padding-left: 0px !important;
         padding-right: 0 !important;
         justify-content: flex-start !important;
     }

     .howitworks-timeline-number {
         width: 35px;
         height: 35px;
         top: -15%;
         left: 50%;
         transform: none;
         font-size: 1rem
     }

     .howitworks-cta-buttons {
         flex-direction: column;
     }
 }

 @media (max-width: 480px) {
     .howitworks-hero-title {
         font-size: 2rem;
     }

     .howitworks-hero-subtitle {
         font-size: 1rem;
     }

     .howitworks-hero-cta {
         flex-direction: column;
     }

     .howitworks-hero-animation {
         height: 300px;
     }

     .howitworks-step-features li {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .howitworks-step-icon {
         margin-bottom: 10px;
     }


     .howitworks-getstarted-step {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .howitworks-getstarted-number {
         margin-bottom: 10px;
     }
 }

 /* How It Works page End */


 /* User-Testimonial Page Start */

 /* Hero Section */
 .testimonials-hero-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
     background: linear-gradient(to bottom, rgba(10, 17, 40, 0.9), rgba(18, 26, 46, 0.95));
     z-index: 0;
 }

 .testimonials-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/testimonialbg.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.5;
     filter: blur(8px);
     z-index: -1;
 }

 .testimonials-hero-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     padding: 0;
     position: relative;
     z-index: 2;
 }

 .testimonials-hero-content-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .testimonials-hero-content {
     max-width: 800px;
     width: 700px;
     position: relative;
     z-index: 1;
     padding: 40px;
     border-radius: 20px;
     backdrop-filter: blur(1px);
     animation: fadeIn 3s ease-in-out;
 }

 .testimonials-hero-title {
     color: var(--heading-color);
     font-size: 4rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
     text-shadow: 0 0 10px rgba(255, 107, 0, 0.3);
 }

 .testimonials-hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .testimonials-hero-description {
     font-size: 1.1rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
 }

 .testimonials-hero-cta {
     display: flex;
     text-align: center;
     gap: 15px;
     margin-top: 30px;
     animation: fadeInUp 1s ease-out 0.6s forwards;
     opacity: 0;
 }

 /* Testimonial Showcase Animation */
 .testimonials-hero-animation-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .testimonials-showcase-animation {
     width: 100%;
     height: 500px;
     position: relative;
     perspective: 1000px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 /* Stats Animation */
 .testimonials-stats-container {
     display: flex;
     justify-content: space-around;
     width: 100%;
     margin-bottom: 40px;
 }

 .testimonials-stat-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     animation: fadeInUp 0.8s ease-out forwards;
     opacity: 0;
 }

 .testimonials-stat-item:nth-child(1) {
     animation-delay: 0.2s;
 }

 .testimonials-stat-item:nth-child(2) {
     animation-delay: 0.4s;
 }

 .testimonials-stat-item:nth-child(3) {
     animation-delay: 0.6s;
 }

 .testimonials-stat-circle {
     position: relative;
     width: 120px;
     height: 120px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 10px;
 }

 .testimonials-stat-value {
     position: absolute;
     font-size: 1.8rem;
     font-weight: 700;
     color: var(--light);
 }

 .testimonials-stat-label {
     font-size: 1rem;
     color: var(--subheading-color);
     text-align: center;
 }

 .testimonials-stat-bg {
     fill: none;
     stroke: rgba(255, 255, 255, 0.1);
     stroke-width: 8;
 }

 .testimonials-stat-progress {
     fill: none;
     stroke: var(--primary);
     stroke-width: 8;
     stroke-linecap: round;
     transform: rotate(-90deg);
     transform-origin: 50% 50%;
     stroke-dasharray: 283;
     stroke-dashoffset: 283;
     transition: stroke-dashoffset 2s ease;
 }

 /* Floating Cards Animation */
 .testimonials-floating-cards {
     position: relative;
     width: 100%;
     height: 300px;
 }

 .testimonials-floating-card {
     position: absolute;
     background: var(--card-bg);
     border-radius: 10px;
     padding: 15px;
     border: 1px solid var(--card-border);
     backdrop-filter: blur(5px);
     box-shadow: var(--shadow);
     width: 180px;
     opacity: 0;
     animation: floatCard 15s infinite ease-in-out;
 }

 .testimonials-floating-card:nth-child(1) {
     top: 20%;
     left: 10%;
     animation-delay: 0s;
 }

 .testimonials-floating-card:nth-child(2) {
     top: 60%;
     left: 20%;
     animation-delay: 3s;
 }

 .testimonials-floating-card:nth-child(3) {
     top: 30%;
     right: 15%;
     animation-delay: 6s;
 }

 .testimonials-floating-card:nth-child(4) {
     bottom: 20%;
     right: 10%;
     animation-delay: 9s;
 }

 .testimonials-card-stars {
     display: flex;
     margin-bottom: 10px;
 }

 .testimonials-card-stars i {
     color: var(--star-color);
     margin-right: 3px;
 }

 .testimonials-card-quote {
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--light);
 }

 /* Section Divider */
 .testimonials-section-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 40px;
 }

 .testimonials-divider-line {
     height: 2px;
     width: 100px;
     background: var(--gradient-1);
 }

 .testimonials-divider-icon {
     margin: 0 15px;
     font-size: 1.5rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Testimonials Showcase Section */
 .testimonials-showcase-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
     position: relative;
 }

 .testimonials-carousel {
     position: relative;
     max-width: 900px;
     margin: 0 auto;
 }

 .testimonials-carousel-container {
     position: relative;
     overflow: hidden;
     min-height: 400px;
 }

 .testimonials-card {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     background: var(--card-bg);
     border-radius: 16px;
     padding: 30px;
     transition: var(--transition);
     border: 1px solid var(--card-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     opacity: 0;
     transform: translateX(100%);
     pointer-events: none;
 }

 .testimonials-card.active {
     opacity: 1;
     transform: translateX(0);
     pointer-events: auto;
 }

 .testimonials-card-header {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
     position: relative;
 }

 .testimonials-card-avatar {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     overflow: hidden;
     margin-right: 15px;
     background: var(--gradient-1);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .testimonials-avatar-placeholder {
     font-size: 1.5rem;
     font-weight: 700;
     color: white;
 }

 .testimonials-card-info {
     flex: 1;
 }

 .testimonials-card-name {
     font-size: 1.3rem;
     margin-bottom: 5px;
     color: var(--light);
 }

 .testimonials-card-position {
     font-size: 0.9rem;
     color: var(--subheading-color);
     margin-bottom: 0;
 }

 .testimonials-card-quote-icon {
     position: absolute;
     top: 0;
     right: 0;
     font-size: 2rem;
     color: var(--heading-color);
 }

 .testimonials-card-body {
     margin-bottom: 20px;
 }

 .testimonials-card-title {
     font-size: 1.5rem;
     font-weight: 600;
     margin-bottom: 15px;
     color: var(--primary);
 }

 .testimonials-card-text {
     font-size: 1.1rem;
     line-height: 1.7;
 }

 .testimonials-card-footer {
     display: flex;
     justify-content: flex-end;
 }

 .testimonials-card-rating {
     display: flex;
 }

 .testimonials-card-rating i {
     color: var(--star-color);
     margin-left: 3px;
 }

 .testimonials-carousel-controls {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 30px;
 }

 .testimonials-carousel-prev,
 .testimonials-carousel-next {
     background: transparent;
     border: none;
     color: var(--light);
     font-size: 1.5rem;
     cursor: pointer;
     transition: var(--transition);
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
 }

 .testimonials-carousel-prev:hover,
 .testimonials-carousel-next:hover {
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
 }

 .testimonials-carousel-dots {
     display: flex;
     margin: 0 20px;
 }

 .testimonials-carousel-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     margin: 0 5px;
     cursor: pointer;
     transition: var(--transition);
 }

 .testimonials-carousel-dot.active {
     background: var(--primary);
     transform: scale(1.2);
 }

 /* Benefits Section */
 .testimonials-benefits-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
 }

 .testimonials-benefits-grid {
     display: grid;
     place-items: center;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .testimonials-benefit-card {
     background: var(--card-bg);
     border-radius: 16px;
     padding: 30px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     height: 100%;
 }

 .testimonials-benefit-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .testimonials-benefit-icon {
     margin: 0 auto 20px;
     font-size: 2rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .testimonials-benefit-card:hover .testimonials-benefit-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .testimonials-benefit-card h3 {
     font-size: 1.5rem;
     margin-bottom: 15px;
 }

 /* Join Section */
 .testimonials-join-section {
     padding: 100px 0;
     background: var(--gradient-bg);
     position: relative;
     overflow: hidden;
 }

 .testimonials-join-content {
     position: relative;
     z-index: 1;
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
 }

 .testimonials-join-cta {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin: 40px 0;
 }

 .testimonials-join-shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
 }

 .testimonials-join-shape {
     position: absolute;
     opacity: 0.1;
 }

 .testimonials-join-shape.testimonials-shape-1 {
     top: 20%;
     left: 5%;
     width: 200px;
     height: 200px;
     border: 3px solid var(--primary);
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     animation: float 15s infinite ease-in-out;
 }

 .testimonials-join-shape.testimonials-shape-2 {
     bottom: 10%;
     right: 5%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--secondary);
     border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
     animation: float 12s infinite ease-in-out reverse;
 }

 .testimonials-join-shape.testimonials-shape-3 {
     top: 50%;
     right: 15%;
     width: 100px;
     height: 100px;
     border: 3px solid var(--accent);
     border-radius: 80% 20% 50% 50% / 50% 40% 60% 50%;
     animation: float 10s infinite ease-in-out;
 }

 /* Feedback Section */
 .testimonials-feedback-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .testimonials-feedback-content {
     display: flex;
     flex-direction: column;
     gap: 50px;
     align-items: flex-start;
     width: 100%;
 }

 .testimonials-feedback-text {}

 .testimonials-feedback-thanks {
     font-style: italic;
     color: var(--subheading-color);
 }

 .testimonials-feedback-form {
     width: 100%;
     background: var(--card-bg);
     border-radius: 16px;
     padding: 30px;
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
 }

 .testimonials-form-group {
     margin-bottom: 20px;
 }

 .testimonials-form-group label {
     display: block;
     margin-bottom: 5px;
     font-weight: 600;
     color: var(--subheading-color);
 }

 .testimonials-form-group input,
 .testimonials-form-group textarea {
     width: 100%;
     padding: 12px 15px;
     border-radius: 8px;
     border: 1px solid var(--glass-border);
     background: rgba(255, 255, 255, 0.05);
     color: var(--light);
     font-size: 1rem;
     transition: var(--transition);
 }

 .testimonials-form-group textarea {
     height: 150px;
     resize: vertical;
 }

 .testimonials-form-group input:focus,
 .testimonials-form-group textarea:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.2);
 }

 .testimonials-rating-stars {
     display: flex;
     font-size: 1.5rem;
     margin-top: 5px;
 }

 .testimonials-rating-stars i {
     margin-right: 10px;
     cursor: pointer;
     transition: var(--transition);
     color: rgba(255, 255, 255, 0.3);
 }

 .testimonials-rating-stars i.fas {
     color: var(--star-color);
 }

 .testimonials-rating-stars i:hover {
     transform: scale(1.2);
 }

 .testimonials-feedback-form form button {
     align-items: center;
     text-align: center;
     width: 100%;
 }

 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 @keyframes float {

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

     50% {
         transform: translateY(-20px);
     }
 }

 @keyframes floatCard {
     0% {
         opacity: 0;
         transform: translateY(20px) scale(0.9);
     }

     5% {
         opacity: 1;
         transform: translateY(0) scale(1);
     }

     25% {
         opacity: 1;
         transform: translateY(0) scale(1);
     }

     30% {
         opacity: 0;
         transform: translateY(-20px) scale(0.9);
     }

     100% {
         opacity: 0;
         transform: translateY(-20px) scale(0.9);
     }
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .testimonials-hero-title {
         font-size: 3rem;
     }

     .testimonials-hero-container {
         flex-direction: column;
     }

     .testimonials-hero-content-wrapper,
     .testimonials-hero-animation-wrapper {
         width: 100%;
     }

     .testimonials-showcase-animation {
         height: 400px;
     }
 }

 @media (max-width: 992px) {
     .testimonials-feedback-content {
         flex-direction: column;
     }

     .testimonials-feedback-text,
     .testimonials-feedback-form {
         width: 100%;
     }
 }

 @media (max-width: 768px) {
     .testimonials-container {
         width: 95%;
     }

     .testimonials-hero-section {
        margin-top: 10%;
         padding: 60px 0;
         min-height: auto;
     }

     .testimonials-hero-content {
         padding: 30px;
     }

     .testimonials-hero-title {
         font-size: 2.5rem;
     }

     .testimonials-hero-subtitle {
         font-size: 1.1rem;
     }

     .testimonials-showcase-animation {
         height: 350px;
     }

     .testimonials-stats-container {
         /* flex-direction: column; */
         flex-wrap: wrap;
         align-items: center;
         gap: 30px;
     }

     .testimonials-join-cta {
         flex-direction: column;
         align-items: center;
     }

     .testimonials-benefit-card {
         width: 80%;
         padding: 10px;
     }

     .testimonials-benefit-card p {
         font-size: 0.8rem;
     }

     .testimonials-section-header h2 {
         font-size: 1.5rem;
     }

     .testimonials-section-header p {
         font-size: 1rem;
     }

     .testimonials-benefit-card h3 {
         font-size: 1.2rem;
     }

     .testimonials-benefit-card p {
         font-size: 1rem;
     }
 }

 @media (max-width: 480px) {
     .testimonials-hero-title {
         font-size: 2rem;
     }

     .testimonials-hero-subtitle {
         font-size: 1rem;
     }

     .testimonials-hero-cta {
         flex-direction: column;
     }

     .testimonials-showcase-animation {
         height: 300px;
     }

     .testimonials-card {
         padding: 20px;
     }

     .testimonials-card-title {
         font-size: 1.3rem;
     }

     .testimonials-card-text {
         font-size: 1rem;
     }

     .testimonials-stat-circle {
         width: 80px;
         height: 80px;
     }

     .testimonials-stat-value {
         font-size: 1rem;
     }

     .testimonials-stat-label {
         font-size: 0.8rem;
         background: #00000071;
         padding: 5px 10px;
     }

     /* Floating Cards Animation */
     .testimonials-floating-cards {
         position: absolute;
         z-index: -1;
         opacity: 0.3;
         width: 100vw;
         height: 100vh;
     }

     .testimonials-carousel-container {
         min-height: 520px;
     }
 }

 /* User-Testimonial Page End */



 /* FAQ Page Start */

 /* Hero Section */
 .faq-hero-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
     background: rgba(0, 0, 0, 0.44);
 }

 .faq-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/faqbg.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.5;
     filter: blur(7px);
     transform: scale(1.1);
     z-index: -1;
 }

 .faq-hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at center, rgba(0, 194, 168, 0.1) 0%, rgba(10, 17, 40, 0.95) 70%);
     z-index: 0;
     opacity: 0.2;
 }

 .faq-hero-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     padding: 0;
     position: relative;
     z-index: 2;
 }

 .faq-hero-content-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .faq-hero-content {
     max-width: 800px;
     width: 700px;
     position: relative;
     z-index: 1;
     padding: 40px;
     border-radius: 20px;
     backdrop-filter: blur(1px);
     animation: fadeIn 3s ease-in-out;
 }

 .faq-hero-title {
     color: var(--heading-color);
     font-size: 4rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
     text-shadow: 0 0 10px rgba(255, 107, 0, 0.3);
 }

 .faq-hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .faq-hero-description {
     font-size: 1.1rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
 }

 .faq-hero-cta {
     display: flex;
     text-align: center;
     gap: 15px;
     margin-top: 30px;
     animation: fadeInUp 1s ease-out 0.6s forwards;
     opacity: 0;
 }

 /* FAQ Interactive Animation */
 .faq-hero-animation-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .faq-interactive-animation {
     width: 100%;
     height: 500px;
     position: relative;
     perspective: 1000px;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
 }

 /* Search Bar Animation */
 .faq-search-container {
     width: 100%;
     max-width: 500px;
     margin-bottom: 40px;
     position: relative;
 }

 .faq-search-bar {
     display: flex;
     align-items: center;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid var(--glass-border);
     border-radius: 50px;
     padding: 5px;
     box-shadow: var(--shadow);
     transition: var(--transition);
     animation: fadeInDown 1s ease-out forwards;
 }

 .faq-search-bar:focus-within {
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
     transform: translateY(-3px);
 }

 .faq-search-bar input {
     flex: 1;
     background: transparent;
     border: none;
     padding: 12px 20px;
     font-size: 1.1rem;
     color: var(--light);
     outline: none;
 }

 .faq-search-bar input::placeholder {
     color: rgba(255, 255, 255, 0.5);
 }

 .faq-search-button {
     background: var(--gradient-1);
     color: white;
     border: none;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: var(--transition);
 }

 .faq-search-button:hover {
     transform: scale(1.1);
 }

 .faq-search-results {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     background: rgba(18, 26, 46, 0.95);
     border: 1px solid var(--glass-border);
     border-radius: 10px;
     margin-top: 10px;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease-out, padding 0.4s ease-out;
     z-index: 10;
     backdrop-filter: blur(10px);
 }

 .faq-search-results.active {
     max-height: 300px;
     padding: 15px;
     overflow-y: auto;
 }

 .faq-search-result-item {
     padding: 10px;
     border-bottom: 1px solid var(--glass-border);
     cursor: pointer;
     transition: var(--transition);
 }

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

 .faq-search-result-item:hover {
     background: rgba(255, 107, 0, 0.1);
 }

 .faq-search-result-item h4 {
     font-size: 1rem;
     margin-bottom: 5px;
     color: var(--primary);
 }

 .faq-search-result-item p {
     font-size: 0.9rem;
     margin-bottom: 0;
     color: var(--light);
     opacity: 0.8;
 }

 /* Q&A Animation Elements */
 .faq-animation-elements {
     position: relative;
     width: 100%;
 }

 .faq-central-element {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 80px;
     background: rgba(255, 107, 0, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2;
     border: 2px solid var(--primary);
     box-shadow: 0 0 30px rgba(255, 107, 0, 0.5);
     animation: pulse 3s infinite;
 }

 .faq-central-icon {
     font-size: 2rem;
     color: var(--primary);
 }

 .faq-pulse-rings {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .faq-pulse-ring {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 50%;
     border: 2px solid var(--primary);
     opacity: 0;
     animation: pulseRing 3s infinite;
 }

 .faq-pulse-ring:nth-child(1) {
     width: 100%;
     height: 100%;
     animation-delay: 0s;
 }

 .faq-pulse-ring:nth-child(2) {
     width: 140%;
     height: 140%;
     animation-delay: 1s;
 }

 .faq-pulse-ring:nth-child(3) {
     width: 180%;
     height: 180%;
     animation-delay: 2s;
 }


 .faq-floating-question {
     animation-name: floatQuestion;
     padding: 10px 15px;
     border-radius: 20px;
     font-size: 0.9rem;
     max-width: 200px;
     box-shadow: var(--shadow);
     background: rgba(255, 107, 0, 0.2);
     border: 1px solid var(--question-color);
     color: var(--light);
 }

 /* Update the animation keyframes for questions and answers to have clearer timing */
 @keyframes floatQuestion {
     0% {
         opacity: 0;
         transform: translateY(20px) scale(0.9);
     }

     5% {
         opacity: 1;
         transform: translateY(0) scale(1);
     }

     20% {
         opacity: 1;
         transform: translateY(0) scale(1);
     }

     25% {
         opacity: 0;
         transform: translateY(-20px) scale(0.9);
     }

     100% {
         opacity: 0;
         transform: translateY(-20px) scale(0.9);
     }
 }

 /* Update the positioning of floating questions and answers to avoid overlap */
 .faq-floating-question[data-delay="0"] {
     top: 25%;
     left: 5%;
 }

 .faq-floating-question[data-delay="1"] {
     top: 25%;
     right: -15%;
 }

 .faq-floating-question[data-delay="2"] {
     top: 20%;
     left: -0%;
 }

 .faq-floating-question[data-delay="3"] {
     top: 20%;
     right: -20%;
 }

 /* Adjust the animation duration to be longer for a clearer sequence */
 .faq-floating-question {
     position: absolute;
     opacity: 0;
     animation-duration: 20s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
 }


 .faq-question-bubble {}

 .faq-floating-question:nth-child(even) {
     border-bottom-left-radius: 0;
 }

 .faq-floating-question:nth-child(odd) {
     border-bottom-right-radius: 0;
 }

 /* Section Divider */
 .faq-section-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 40px;
 }

 .faq-divider-line {
     height: 2px;
     width: 100px;
     background: var(--gradient-1);
 }

 .faq-divider-icon {
     margin: 0 15px;
     font-size: 1.5rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* FAQ Categories Section */
 .faq-categories-section {
     padding: 80px 0 40px;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
     position: relative;
 }

 .faq-category-tabs {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 15px;
     margin-top: 30px;
 }

 .faq-category-tab {
     background: rgba(18, 26, 46, 0.7);
     border: 1px solid var(--glass-border);
     border-radius: 50px;
     padding: 12px 25px;
     color: var(--light);
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     transition: var(--transition);
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .faq-category-tab i {
     font-size: 1.2rem;
     color: var(--primary);
     transition: var(--transition);
 }

 .faq-category-tab:hover {
     background: var(--category-hover);
     transform: translateY(-3px);
 }

 .faq-category-tab.active {
     background: var(--category-active);
     border-color: var(--primary);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(255, 107, 0, 0.2);
 }

 .faq-category-tab.active i {
     color: var(--light);
 }

 /* FAQ Items Section */
 .faq-items-section {
     padding: 10px 0 80px;
     background: var(--dark);
 }

 .faq-category-content {
     display: none;
     animation: fadeIn 0.5s ease-out;
     padding: 20px 0px;
 }

 .faq-category-content.active {
     display: block;
 }

 .faq-category-header {
     margin-bottom: 30px;
 }

 .faq-category-header h3 {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .faq-category-header h3 i {
     font-size: 1.5rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Accordion Styles */
 .faq-accordion {
     max-width: 900px;
     margin: 0 auto;
 }

 .faq-accordion-item {
     background: rgba(18, 26, 46, 0.7);
     border: 1px solid var(--glass-border);
     border-radius: 10px;
     margin-bottom: 15px;
     overflow: hidden;
     transition: var(--transition);
 }

 .faq-accordion-item:hover {
     border-color: var(--primary);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .faq-accordion-header {
     padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     transition: var(--transition);
 }

 .faq-accordion-header h4 {
     margin-bottom: 0;
     font-size: 1.2rem;
     color: var(--light);
     transition: var(--transition);
     flex: 1;
 }

 .faq-accordion-icon {
     color: var(--primary);
     font-size: 1.2rem;
     transition: var(--transition);
 }

 .faq-accordion-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease-out;
 }

 .faq-accordion-content p {
     padding: 0 20px 20px;
     margin-bottom: 0;
 }

 .faq-accordion-item.active .faq-accordion-header {
     background: rgba(255, 107, 0, 0.1);
 }

 .faq-accordion-item.active .faq-accordion-header h4 {
     color: var(--primary);
 }

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

 .faq-accordion-item.active .faq-accordion-content {
     max-height: 1000px;
 }

 /* Contact Section */
 .faq-contact-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .faq-contact-content {
     display: flex;
     gap: 50px;
     align-items: flex-start;
 }

 .faq-contact-text {
     flex: 1;
 }

 .faq-contact-form {
     flex: 1;
     background: rgba(18, 26, 46, 0.7);
     border-radius: 16px;
     padding: 30px;
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
 }

 .faq-form-group {
     margin-bottom: 20px;
 }

 .faq-form-group label {
     display: block;
     margin-bottom: 5px;
     font-weight: 600;
 }

 .faq-form-group input,
 .faq-form-group textarea,
 .faq-form-group select {
     width: 100%;
     padding: 12px 15px;
     border-radius: 8px;
     border: 1px solid var(--glass-border);
     background: rgba(255, 255, 255, 0.05);
     color: var(--light);
     font-size: 1rem;
     transition: var(--transition);
 }

 .faq-form-group textarea {
     height: 150px;
     resize: vertical;
 }

 .faq-form-group .subject option {
     background: var(--dark);
 }

 .faq-form-group input:focus,
 .faq-form-group textarea:focus,
 .faq-form-group select:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.2);
 }

 /* CTA Section */
 .faq-cta-section {
     padding: 100px 0;
     background: var(--gradient-bg);
     position: relative;
     overflow: hidden;
 }

 .faq-cta-content {
     position: relative;
     z-index: 1;
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
 }

 .faq-cta-buttons {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin: 40px 0;
 }

 .faq-cta-shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     pointer-events: none;
 }

 .faq-cta-shape {
     position: absolute;
     opacity: 0.1;
 }

 .faq-cta-shape.faq-shape-1 {
     top: 20%;
     left: 5%;
     width: 200px;
     height: 200px;
     border: 3px solid var(--primary);
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
     animation: float 15s infinite ease-in-out;
 }

 .faq-cta-shape.faq-shape-2 {
     bottom: 10%;
     right: 5%;
     width: 150px;
     height: 150px;
     border: 3px solid var(--secondary);
     border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
     animation: float 12s infinite ease-in-out reverse;
 }

 .faq-cta-shape.faq-shape-3 {
     top: 50%;
     right: 15%;
     width: 100px;
     height: 100px;
     border: 3px solid var(--accent);
     border-radius: 80% 20% 50% 50% / 50% 40% 60% 50%;
     animation: float 10s infinite ease-in-out;
 }

 /* Floating Help Button */
 .faq-floating-help {
     position: fixed;
     bottom: 70px;
     right: 30px;
     z-index: 100;
 }

 .faq-help-button {
     background: var(--gradient-1);
     color: white;
     border: none;
     border-radius: 50px;
     padding: 12px 25px;
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     box-shadow: 0 5px 20px rgba(255, 107, 0, 0.4);
     transition: var(--transition);
 }

 .faq-help-button:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(255, 107, 0, 0.5);
 }

 .faq-help-button i {
     font-size: 1.2rem;
 }

 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

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

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

 @keyframes float {

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

     50% {
         transform: translateY(-20px);
     }
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }
 }

 @keyframes pulseRing {
     0% {
         transform: translate(-50%, -50%) scale(0.8);
         opacity: 0.5;
     }

     100% {
         transform: translate(-50%, -50%) scale(1.5);
         opacity: 0;
     }
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .faq-hero-title {
         font-size: 3rem;
     }

     .faq-hero-container {
         flex-direction: column;
     }

     .faq-hero-content-wrapper,
     .faq-hero-animation-wrapper {
         width: 100%;
     }

     .faq-interactive-animation {
         height: 400px;
     }

     /* Update the positioning of floating questions and answers to avoid overlap */
     .faq-floating-question[data-delay="0"] {
         top: 25%;
         left: 5%;
     }

     .faq-floating-question[data-delay="1"] {
         top: 25%;
         right: 5%;
     }

     .faq-floating-question[data-delay="2"] {
         top: 20%;
         left: 5%;
     }

     .faq-floating-question[data-delay="3"] {
         top: 20%;
         right: 5%;
     }

 }

 @media (max-width: 992px) {
     .faq-contact-content {
         flex-direction: column;
     }

     .faq-contact-text,
     .faq-contact-form {
         width: 100%;
     }
 }

 @media (max-width: 768px) {
     .faq-container {
         width: 95%;
     }

     .faq-hero-section {
        margin-top: 10%;
         padding: 60px 0;
         min-height: auto;
     }

     .faq-hero-content {
         padding: 30px;
     }

     .faq-hero-title {
         font-size: 2.5rem;
     }

     .faq-hero-subtitle {
         font-size: 1.1rem;
     }

     .faq-interactive-animation {
         height: 350px;
     }

     .faq-central-element {
         z-index: -1;
         opacity: 0.3;
     }

     .faq-category-tabs {
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: center;
         padding: 20px 15px;
     }

     .faq-category-tab {
         width: auto;
         font-size: 0.9rem;
     }

     .faq-cta-buttons {
         flex-direction: column;
         align-items: center;
     }
 }

 @media (max-width: 480px) {
     .faq-hero-title {
         font-size: 2rem;
     }

     .faq-hero-subtitle {
         font-size: 1rem;
     }

     .faq-hero-cta {
         flex-direction: column;
     }

     .faq-interactive-animation {
         height: 300px;
     }

     .faq-accordion-header h4 {
         font-size: 1rem;
     }

     .faq-floating-help {
         bottom: 20px;
         right: 20px;
     }

     .faq-help-button span {
         display: none;
     }

     .faq-help-button {
         width: 50px;
         height: 50px;
         padding: 0;
         justify-content: center;
     }

     .faq-items-section {
         padding: 0px 0 0px;
     }

     .faq-categories-section {
         padding: 80px 0 0px;
     }

     .faq-accordion-header h4 {
         margin-right: 10px;
         line-height: 1.5;
     }
 }

 /* FAQ Page End */


 /* Contact Page Start  */

 /* Hero Section */
 .contact-hero-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
     background: linear-gradient(to bottom, rgba(10, 17, 40, 0.44), rgba(18, 26, 46, 0.4));
 }

 .contact-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/contactbg.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.8;
     filter: blur(7px);
     transform: scale(1.1);
     z-index: -1;
 }

 .contact-hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at center, rgba(0, 194, 168, 0.1) 0%, rgba(10, 17, 40, 0.95) 70%);
     z-index: 0;
     opacity: 0.3;
 }

 .contact-hero-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     padding: 0;
     position: relative;
     z-index: 2;
 }

 .contact-hero-content-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .contact-hero-content {
     max-width: 800px;
     width: 700px;
     position: relative;
     z-index: 1;
     padding: 40px;
     border-radius: 20px;
     backdrop-filter: blur(1px);
     animation: fadeIn 3s ease-in-out;
 }

 .contact-hero-title {
     color: var(--heading-color);
     font-size: 4rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
     text-shadow: 0 0 10px rgba(255, 107, 0, 0.3);
 }

 .contact-hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .contact-hero-description {
     font-size: 1.1rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
 }

 .contact-hero-cta {
     display: flex;
     text-align: center;
     gap: 15px;
     margin-top: 30px;
     animation: fadeInUp 1s ease-out 0.6s forwards;
     opacity: 0;
 }

 /* Hologram Animation */
 .contact-hero-animation-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .contact-hologram-animation {
     width: 100%;
     height: 500px;
     position: relative;
     perspective: 1000px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .contact-hologram-container {
     position: relative;
     width: 400px;
     height: 400px;
     transform-style: preserve-3d;
     animation: rotateHologram 20s infinite linear;
 }

 .contact-hologram-base {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 150px;
     height: 20px;
     background: var(--hologram-base);
     border-radius: 50%;
     box-shadow: 0 0 30px var(--hologram-glow);
 }

 .contact-hologram-ring {
     position: absolute;
     bottom: 10px;
     left: 50%;
     transform: translateX(-50%);
     border-radius: 50%;
     border: 2px solid var(--hologram-base);
     animation: pulseRing 3s infinite;
 }

 .contact-hologram-ring:nth-child(1) {
     width: 160px;
     height: 10px;
     animation-delay: 0s;
 }

 .contact-hologram-ring:nth-child(2) {
     width: 180px;
     height: 10px;
     animation-delay: 1s;
 }

 .contact-hologram-ring:nth-child(3) {
     width: 200px;
     height: 10px;
     animation-delay: 2s;
 }

 .contact-hologram-projection {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
 }

 .contact-hologram-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 80px;
     background: rgba(0, 194, 168, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid var(--secondary);
     box-shadow: 0 0 30px var(--hologram-glow);
     animation: pulseIcon 3s infinite;
     z-index: 2;
 }

 .contact-hologram-icon i {
     font-size: 2.5rem;
     color: var(--secondary);
 }

 /* Connection Lines */
 .contact-connection-lines {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
 }

 .contact-connection-line {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100px;
     height: 2px;
     background: var(--connection-line);
     transform-origin: left center;
     animation: pulseLine 3s infinite;
 }

 .contact-connection-line[data-index="0"] {
     transform: rotate(45deg);
     animation-delay: 0s;
 }

 .contact-connection-line[data-index="1"] {
     transform: rotate(135deg);
     animation-delay: 0.5s;
 }

 .contact-connection-line[data-index="2"] {
     transform: rotate(225deg);
     animation-delay: 1s;
 }

 .contact-connection-line[data-index="3"] {
     transform: rotate(315deg);
     animation-delay: 1.5s;
 }

 .contact-connection-dot {
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 10px;
     height: 10px;
     background: var(--accent);
     border-radius: 50%;
     animation: moveDot 3s infinite;
 }

 /* Floating Icons */
 .contact-floating-icons {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
 }

 .contact-floating-icon {
     position: absolute;
     width: 60px;
     height: 60px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(5px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     transition: var(--transition);
     cursor: pointer;
     animation: floatIcon 5s infinite ease-in-out;
 }

 .contact-floating-icon:hover {
     transform: scale(1.1);
     background: rgba(255, 107, 0, 0.2);
     border-color: var(--primary);
 }

 .contact-floating-icon i {
     font-size: 1.5rem;
     color: var(--light);
     margin-bottom: 5px;
 }

 .contact-floating-icon span {
     font-size: 0.8rem;
     color: var(--light);
     font-weight: 600;
 }

 .contact-floating-icon[data-icon="email"] {
     top: 20%;
     left: 20%;
     animation-delay: 0s;
 }

 .contact-floating-icon[data-icon="form"] {
     top: 20%;
     right: 20%;
     animation-delay: 1s;
 }

 .contact-floating-icon[data-icon="social"] {
     bottom: 20%;
     right: 20%;
     animation-delay: 2s;
 }

 .contact-floating-icon[data-icon="faq"] {
     bottom: 20%;
     left: 20%;
     animation-delay: 3s;
 }

 /* Section Divider */
 .contact-section-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 40px;
 }

 .contact-divider-line {
     height: 2px;
     width: 100px;
     background: var(--gradient-1);
 }

 .contact-divider-icon {
     margin: 0 15px;
     font-size: 1.5rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Contact Methods Section */
 .contact-methods-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
     position: relative;
 }

 .contact-methods-grid {
     display: flex;
     flex-direction: column;
     gap: 30px;
     margin-top: 50px;
 }

 .contact-method-card {
     background: rgba(18, 26, 46, 0.7);
     border-radius: 16px;
     padding: 30px;
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     transition: var(--transition);
     height: 100%;
 }

 .contact-method-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .contact-method-icon {
     margin: 0 auto 20px;
     font-size: 2rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .contact-method-card:hover .contact-method-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .contact-method-detail {
     margin: 20px 0;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 8px;
     text-align: center;
 }

 .contact-email-link {
     font-size: 1.2rem;
     font-weight: 600;
     color: var(--accent);
 }

 .contact-email-link:hover {
     color: var(--primary);
 }

 .urgent-cont {
     background-color: var(--accent-color);
     padding: 10px;
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     transition: var(--transition);
     border-radius: 5px;
 }

 /* Contact Form */
 .contact-form-card {
     margin: 0 auto;
 }

 .contact-form {
     margin-top: 20px;
 }

 .contact-form-group {
     margin-bottom: 20px;
 }

 .contact-form-group label {
     display: block;
     margin-bottom: 5px;
     font-weight: 600;
 }

 .contact-form-group input,
 .contact-form-group textarea,
 .contact-form-group select {
     width: 100%;
     padding: 12px 15px;
     border-radius: 8px;
     border: 1px solid var(--glass-border);
     background: rgba(255, 255, 255, 0.05);
     color: var(--light);
     font-size: 1rem;
     transition: var(--transition);
 }

 .contact-form-group .subject option {
     background: var(--dark);
 }

 .contact-form-group textarea {
     height: 150px;
     resize: vertical;
 }

 .contact-form-group input:focus,
 .contact-form-group textarea:focus,
 .contact-form-group select:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 2px var(--form-focus);
 }

 .contact-form-privacy {
     margin: 20px 0;
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.7);
 }

 .contact-submit-btn {
     width: 100%;
     padding: 15px;
     margin-top: 10px;
 }

 /* FAQ Section */
 .contact-faq-section {
     padding: 80px 0;
     background: var(--gradient-bg);
 }

 .contact-faq-content {
     display: flex;
     gap: 50px;
     align-items: center;
 }

 .contact-faq-text {
     flex: 1;
 }

 .contact-faq-animation {
     flex: 1;
     position: relative;
     height: 400px;
     perspective: 1000px;
 }

 .contact-faq-cards {
     position: relative;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
 }

 .contact-faq-card {
     position: absolute;
     width: 80%;
     height: 200px;
     left: 10%;
     top: calc(50% - 100px);
     perspective: 1000px;
     cursor: pointer;
 }

 .contact-faq-card[data-index="0"] {
     transform: translateZ(0) translateY(0);
     z-index: 3;
 }

 .contact-faq-card[data-index="1"] {
     transform: translateZ(-100px) translateY(30px);
     z-index: 2;
     opacity: 0.8;
 }

 .contact-faq-card[data-index="2"] {
     transform: translateZ(-200px) translateY(60px);
     z-index: 1;
     opacity: 0.6;
 }

 .contact-faq-card-inner {
     position: relative;
     width: 100%;
     height: 100%;
     transition: transform 0.8s;
     transform-style: preserve-3d;
 }

 .contact-faq-card:hover .contact-faq-card-inner {
     transform: rotateY(180deg);
 }

 .contact-faq-card-front,
 .contact-faq-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     border-radius: 16px;
     padding: 30px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;

 }

 .contact-faq-card-front {
     backdrop-filter: blur(10px);
     color: var(--subheading-color);
     background: rgba(18, 26, 46, 0.7);
     border: 1px solid var(--glass-border);
 }

 .contact-faq-card-back {
     background: rgba(255, 107, 0, 0.1);
     border: 1px solid var(--primary);
     transform: rotateY(180deg);
 }

 .contact-faq-card-icon {
     font-size: 2rem;
     color: var(--primary);
     margin-bottom: 20px;
 }

 /* Social Media Section */
 .contact-social-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
 }

 .contact-social-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .contact-social-card {
     background: rgba(18, 26, 46, 0.7);
     border-radius: 16px;
     padding: 30px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .contact-social-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .contact-social-icon {
     margin: 0 auto 20px;
     font-size: 1.5rem;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .contact-social-card[data-platform="facebook"] .contact-social-icon {
     background: rgba(59, 89, 152, 0.2);
     color: #3b5998;
 }

 .contact-social-card[data-platform="twitter"] .contact-social-icon {
     background: rgba(29, 161, 242, 0.2);
     color: #1da1f2;
 }

 .contact-social-card[data-platform="linkedin"] .contact-social-icon {
     background: rgba(0, 119, 181, 0.2);
     color: #0077b5;
 }

 .contact-social-card[data-platform="instagram"] .contact-social-icon {
     background: rgba(225, 48, 108, 0.2);
     color: #e1306c;
 }

 .contact-social-card:hover .contact-social-icon {
     transform: scale(1.1);
 }

 .contact-social-card h3 {
     margin-bottom: 10px;
     color: var(--light);
 }

 .contact-social-card p {
     margin-bottom: 0;
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.7);
 }

 /* Why Contact Us Section */
 .contact-why-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
     position: relative;
 }

 .contact-benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin: 50px 0;
 }

 .contact-benefit-card {
     background: rgba(18, 26, 46, 0.7);
     border-radius: 16px;
     padding: 30px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     height: 100%;
 }

 .contact-benefit-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .contact-benefit-icon {
     margin: 0 auto 20px;
     font-size: 2rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .contact-benefit-card:hover .contact-benefit-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .contact-closing {
     text-align: center;
     max-width: 800px;
     margin: 0 auto;
     padding: 20px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 16px;
     border: 1px solid rgba(255, 107, 0, 0.3);
 }

 /* Floating Contact Button */
 .contact-floating-button {
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 100;
 }

 .contact-float-btn {
     background: var(--gradient-1);
     color: white;
     border: none;
     border-radius: 50px;
     padding: 12px 25px;
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     box-shadow: 0 5px 20px rgba(255, 107, 0, 0.4);
     transition: var(--transition);
 }

 .contact-float-btn:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(255, 107, 0, 0.5);
 }

 .contact-float-btn i {
     font-size: 1.2rem;
 }

 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 @keyframes rotateHologram {
     0% {
         transform: rotateY(0deg);
     }

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

 @keyframes pulseIcon {

     0%,
     100% {
         transform: translate(-50%, -50%) scale(1);
         box-shadow: 0 0 30px var(--hologram-glow);
     }

     50% {
         transform: translate(-50%, -50%) scale(1.1);
         box-shadow: 0 0 50px var(--hologram-glow);
     }
 }

 @keyframes pulseRing {
     0% {
         opacity: 0.7;
         transform: translateX(-50%) scale(1);
     }

     50% {
         opacity: 0.3;
         transform: translateX(-50%) scale(1.2);
     }

     100% {
         opacity: 0.7;
         transform: translateX(-50%) scale(1);
     }
 }

 @keyframes pulseLine {

     0%,
     100% {
         opacity: 0.7;
     }

     50% {
         opacity: 0.3;
     }
 }

 @keyframes moveDot {
     0% {
         right: 0;
         opacity: 0;
     }

     20% {
         opacity: 1;
     }

     100% {
         right: 100%;
         opacity: 0;
     }
 }

 @keyframes floatIcon {

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

     50% {
         transform: translateY(-15px);
     }
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .contact-hero-title {
         font-size: 3rem;
     }

     .contact-hero-container {
         flex-direction: column;
     }

     .contact-hero-content-wrapper,
     .contact-hero-animation-wrapper {
         width: 100%;
     }

     .contact-hologram-animation {
         height: 400px;
     }

     .contact-faq-content {
         flex-direction: column;
     }

     .contact-faq-text,
     .contact-faq-animation {
         width: 100%;
     }
 }

 @media (max-width: 992px) {

     .contact-methods-grid,
     .contact-benefits-grid {
         grid-template-columns: 1fr;
     }

     .contact-faq-animation {
         height: 350px;
         margin-top: 25%;
     }
 }

 @media (max-width: 768px) {
     .contact-container {
         width: 95%;
     }

     .contact-hero-section {
        margin-top: 10%;
         padding: 60px 0;
         min-height: auto;
     }

     .contact-hero-content {
         padding: 30px;
     }

     .contact-hero-title {
         font-size: 2.5rem;
     }

     .contact-hero-subtitle {
         font-size: 1.1rem;
     }

     .contact-hologram-animation {
         height: 350px;
     }

     .contact-hologram-container {
         width: 350px;
         height: 350px;
     }

     .contact-social-grid {
         grid-template-columns: 1fr 1fr;
     }

     .contact-hero-cta {
         flex-wrap: wrap;
     }
 }

 @media (max-width: 480px) {
     .contact-hero-title {
         font-size: 2rem;
     }

     .contact-hero-subtitle {
         font-size: 1rem;
     }

     .contact-hologram-animation {
         height: 300px;
     }

     .contact-hologram-container {
         width: 400px;
         height: 400px;
     }

     .contact-social-grid {
         grid-template-columns: 1fr;
     }

     .contact-floating-button {
         bottom: 20px;
         right: 20px;
     }

     .contact-float-btn span {
         display: none;
     }

     .contact-float-btn {
         width: 50px;
         height: 50px;
         padding: 0;
         justify-content: center;
     }
 }

 /* Contact Page End  */



 /* Cart Page Start */

 /* Hero Section */
 .cart-hero-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
     background: linear-gradient(to bottom, rgba(10, 17, 40, 0.5), rgba(18, 26, 46, 0.5));
 }

 .cart-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/cartbg.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.8;
     filter: blur(7px);
     transform: scale(1);
     z-index: -1;
 }

 .cart-hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at center, rgba(255, 107, 0, 0.1) 0%, rgba(10, 17, 40, 0.95) 70%);
     z-index: 0;
     opacity: 0.7;
 }

 .cart-hero-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     padding: 0;
     position: relative;
     z-index: 2;
 }

 .cart-hero-content-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .cart-hero-content {
     max-width: 800px;
     width: 700px;
     position: relative;
     z-index: 1;
     padding: 40px;
     border-radius: 20px;
     backdrop-filter: blur(1px);
     animation: fadeIn 3s ease-in-out;
 }

 .cart-hero-title {
     color: var(--heading-color);
     font-size: 4rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
     text-shadow: 0 0 10px rgba(255, 107, 0, 0.3);
 }

 .cart-hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .cart-hero-description {
     font-size: 1.1rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
 }

 .cart-hero-cta {
     display: flex;
     text-align: center;
     gap: 15px;
     margin-top: 30px;
     animation: fadeInUp 1s ease-out 0.6s forwards;
     opacity: 0;
 }

 /* Futuristic Cart Animation */
 .cart-hero-animation-wrapper {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .cart-3d-animation {
     width: 100%;
     height: 500px;
     position: relative;
     perspective: 1000px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .cart-hologram-container {
     position: relative;
     width: 300px;
     height: 300px;
     transform-style: preserve-3d;
 }

 /* Holographic Grid */
 .cart-hologram-grid {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     overflow: hidden;
 }

 .cart-grid-line {
     position: absolute;
     background: var(--cart-grid-line);
     opacity: 0.5;
 }

 .cart-grid-line-horizontal {
     height: 1px;
     width: 100%;
     left: 0;
 }

 .cart-grid-line-vertical {
     width: 1px;
     height: 100%;
     top: 0;
 }

 /* Holographic Base */
 .cart-hologram-base {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 150px;
     height: 4px;
     background: var(--secondary);
     border-radius: 50%;
     box-shadow: 0 0 30px var(--cart-hologram);
     opacity: 0.7;
 }

 .cart-hologram-platform {
     position: absolute;
     bottom: 4px;
     left: 50%;
     transform: translateX(-50%);
     width: 120px;
     height: 120px;
     border: 2px solid var(--secondary);
     border-radius: 50%;
     opacity: 0.3;
 }

 /* Central Cart Icon */
 .cart-icon-container {
     position: absolute;
     top: 63%;
     left: 63%;
     transform: translate(-50%, -50%);
     z-index: 10;
 }

 .cart-icon {
     width: 80px;
     height: 80px;
     background: rgba(255, 107, 0, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid var(--primary);
     box-shadow: 0 0 30px var(--cart-glow);
     animation: pulseCartIcon 3s infinite;
     z-index: 2;
 }

 .cart-icon i {
     font-size: 2.5rem;
     color: var(--primary);
 }

 /* Holographic Rings */
 .cart-hologram-rings {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
 }

 .cart-hologram-ring {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 50%;
     border: 1px solid var(--secondary);
     opacity: 0.5;
     animation: pulseRing 3s infinite;
 }

 .cart-hologram-ring:nth-child(1) {
     width: 140px;
     height: 140px;
     animation-delay: 0s;
 }

 .cart-hologram-ring:nth-child(2) {
     width: 180px;
     height: 180px;
     animation-delay: 1s;
 }

 .cart-hologram-ring:nth-child(3) {
     width: 220px;
     height: 220px;
     animation-delay: 2s;
 }

 /* Floating Items */
 .cart-floating-items {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .cart-floating-item {
     position: absolute;
     width: 60px;
     height: 60px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(5px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     transition: var(--transition);
     cursor: pointer;
     animation: floatItem 5s infinite ease-in-out;
 }

 .cart-floating-item:hover {
     transform: scale(1.1);
     background: rgba(0, 194, 168, 0.2);
     border-color: var(--secondary);
 }

 .cart-floating-item[data-item="ad-creator"] {
     top: 20%;
     left: 20%;
     animation-delay: 0s;
 }

 .cart-floating-item[data-item="analytics"] {
     top: 20%;
     right: 20%;
     animation-delay: 1.5s;
 }

 .cart-floating-item[data-item="targeting"] {
     bottom: 20%;
     right: 20%;
     animation-delay: 1s;
 }

 .cart-floating-item[data-item="automation"] {
     bottom: 20%;
     left: 20%;
     animation-delay: 2.5s;
 }

 .cart-floating-icon {
     font-size: 1.5rem;
     color: var(--light);
     margin-bottom: 5px;
 }

 .cart-floating-label {
     font-size: 0.7rem;
     color: var(--light);
     font-weight: 600;
     text-align: center;
 }

 /* Data Streams */
 .cart-data-streams {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 .cart-data-stream {
     position: absolute;
     top: 50%;
     left: 50%;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--secondary), transparent);
     transform-origin: left center;
     opacity: 0.6;
 }

 .cart-data-point {
     position: absolute;
     width: 6px;
     height: 6px;
     background: var(--cart-data-point);
     border-radius: 50%;
     box-shadow: 0 0 10px var(--cart-glow);
     animation: moveDataPoint 3s linear infinite;
 }

 /* Flying Items Animation */
 .cart-flying-items {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 .cart-flying-item {
     position: absolute;
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid var(--glass-border);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     animation: flyToCart 2s forwards;
 }

 .cart-flying-item i {
     font-size: 1.2rem;
     color: var(--light);
 }

 /* Section Divider */
 .cart-section-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 40px;
 }

 .cart-divider-line {
     height: 2px;
     width: 100px;
     background: var(--gradient-1);
 }

 .cart-divider-icon {
     margin: 0 15px;
     font-size: 1.5rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Cart Summary Section */
 .cart-summary-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
     position: relative;
 }

 .cart-summary-container {
     background: rgba(18, 26, 46, 0.7);
     border-radius: 16px;
     padding: 30px;
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     margin-top: 50px;
 }

 .cart-items-list {
     margin-bottom: 30px;
 }

 .cart-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
     margin-bottom: 20px;
     background: var(--cart-item-bg);
     border-radius: 12px;
     border: 1px solid var(--glass-border);
     transition: var(--transition);
 }

 .cart-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
     background: var(--cart-item-hover);
 }

 .cart-item-info {
     display: flex;
     align-items: center;
     gap: 20px;
     flex: 2;
 }

 .cart-item-icon {
     width: 60px;
     height: 60px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--primary);
     flex-shrink: 0;
 }

 .cart-item-details {
     flex: 1;
 }

 .cart-item-details h3 {
     font-size: 1.3rem;
     margin-bottom: 5px;
     color: var(--light);
 }

 .cart-item-details p {
     font-size: 0.9rem;
     margin-bottom: 10px;
     color: rgba(255, 255, 255, 0.7);
 }

 .cart-item-tags {
     display: flex;
     gap: 10px;
 }

 .cart-tag {
     padding: 4px 10px;
     background: rgba(0, 161, 224, 0.1);
     border-radius: 20px;
     font-size: 0.8rem;
     color: var(--accent);
 }

 .cart-item-pricing {
     display: flex;
     align-items: center;
     gap: 20px;
     flex: 1;
 }

 .cart-item-price {
     font-size: 1.2rem;
     font-weight: 600;
     color: var(--secondary);
     min-width: 80px;
     text-align: right;
 }

 .cart-item-quantity {
     display: flex;
     align-items: center;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 30px;
     padding: 5px;
 }

 .cart-quantity-btn {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     border: none;
     color: var(--light);
     font-size: 1rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .cart-quantity-btn:hover {
     background: var(--primary);
 }

 .cart-quantity-input {
     width: 40px;
     background: transparent;
     border: none;
     color: var(--light);
     font-size: 1rem;
     text-align: center;
     -moz-appearance: textfield;
 }

 .cart-quantity-input::-webkit-outer-spin-button,
 .cart-quantity-input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 .cart-item-subtotal {
     font-size: 1.2rem;
     font-weight: 600;
     color: var(--primary);
     min-width: 80px;
     text-align: right;
 }

 .cart-remove-btn {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(255, 59, 48, 0.1);
     border: none;
     color: var(--heading-color);
     font-size: 1rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .cart-remove-btn:hover {
     background: var(--heading-color);
     color: white;
 }

 .cart-summary-totals {
     background: rgba(18, 26, 46, 0.9);
     border-radius: 12px;
     padding: 20px;
     border: 1px solid var(--glass-border);
 }

 .cart-total-row {
     display: flex;
     justify-content: space-between;
     padding: 10px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     color: var(--light);
 }

 .cart-subtotal {
     color: var(--heading-color);
 }

 .cart-total-row:last-child {
     border-bottom: none;
 }

 .cart-grand-total {
     font-size: 1.3rem;
     font-weight: 600;
     color: var(--primary);
     padding: 15px 0;
 }

 .cart-actions {
     display: flex;
     justify-content: space-between;
     margin-top: 20px;
 }

 .cart-checkout-btn {
     padding: 15px 30px;
 }

 /* Add-ons Section */
 .cart-addons-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .cart-addons-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .cart-addon-card {
     background: rgba(18, 26, 46, 0.7);
     border-radius: 16px;
     padding: 30px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
 }

 .cart-addon-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .cart-addon-icon {
     margin: 0 auto 20px;
     font-size: 2rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .cart-addon-card:hover .cart-addon-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .cart-addon-card h3 {
     margin-bottom: 10px;
     color: var(--heading-color);
 }

 .cart-addon-card p {
     margin-bottom: 20px;
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.7);
 }

 .cart-addon-price {
     font-size: 1.5rem;
     font-weight: 600;
     color: var(--secondary);
     margin-bottom: 20px;
 }

 .cart-addon-btn {
     width: 100%;
 }

 /* Checkout Process Section */
 .cart-checkout-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
     position: relative;
 }

 .cart-checkout-process {
     margin-top: 50px;
 }

 .cart-process-steps {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 50px;
     position: relative;
     flex-wrap: wrap;
 }

 .cart-process-step {
     display: flex;
     align-items: center;
     gap: 15px;
     background: rgba(18, 26, 46, 0.7);
     border-radius: 12px;
     padding: 20px;
     border: 1px solid var(--glass-border);
     transition: var(--transition);
     position: relative;
     z-index: 2;
     flex: 1;
     min-width: 250px;
     margin: 10px;
 }

 .cart-process-step:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
     background: var(--cart-step-active);
 }

 .cart-process-step[data-step="1"] {
     background: var(--cart-step-active);
     border-color: var(--primary);
 }

 .cart-step-number {
     width: 40px;
     height: 30px;
     background: var(--primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     font-weight: 600;
     color: white;
 }

 .cart-step-content h3 {
     font-size: 1.2rem;
     margin-bottom: 5px;
     color: var(--light);
 }

 .cart-step-content p {
     font-size: 0.9rem;
     margin-bottom: 0;
     color: rgba(255, 255, 255, 0.7);
 }

 .cart-process-connector {
     height: 2px;
     background: var(--glass-border);
     flex-grow: 1;
     margin: 0 -10px;
     position: relative;
     z-index: 1;
 }

 .cart-checkout-cta {
     text-align: center;
     margin-top: 30px;
 }

 .cart-checkout-btn-large {
     padding: 15px 40px;
     font-size: 1.2rem;
 }

 /* FAQ Section */
 .cart-faq-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .cart-faq-container {
     margin-top: 50px;
 }

 .cart-faq-accordion {
     max-width: 800px;
     margin: 0 auto;
 }

 .cart-faq-item {
     background: rgba(18, 26, 46, 0.7);
     border-radius: 12px;
     margin-bottom: 20px;
     border: 1px solid var(--glass-border);
     overflow: hidden;
     transition: var(--transition);
 }

 .cart-faq-item:hover {
     border-color: var(--primary);
 }

 .cart-faq-header {
     padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     transition: var(--transition);
 }

 .cart-faq-header:hover {
     background: rgba(255, 107, 0, 0.1);
 }

 .cart-faq-header h3 {
     font-size: 1.2rem;
     margin-bottom: 0;
     color: var(--light);
 }

 .cart-faq-icon {
     font-size: 1.2rem;
     color: var(--primary);
     transition: var(--transition);
 }

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

 .cart-faq-content {
     padding: 0 20px;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease-out, padding 0.3s ease;
 }

 .cart-faq-item.active .cart-faq-content {
     padding: 0 20px 20px;
     max-height: 1000px;
 }

 /* Why Choose Us Section */
 .cart-why-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
     position: relative;
 }

 .cart-benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
     margin: 50px 0;
 }

 .cart-benefit-card {
     background: rgba(18, 26, 46, 0.7);
     border-radius: 16px;
     padding: 30px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     height: 100%;
 }

 .cart-benefit-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .cart-benefit-icon {
     margin: 0 auto 20px;
     font-size: 2rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--transition);
 }

 .cart-benefit-card:hover .cart-benefit-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .cart-closing {
     text-align: center;
     max-width: 800px;
     margin: 0 auto;
     padding: 20px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 16px;
     border: 1px solid rgba(255, 107, 0, 0.3);
 }

 /* Floating Cart Button */
 .cart-floating-button {
     position: fixed;
     bottom: 60px;
     right: 10px;
     z-index: 100;
 }

 .cart-float-btn {
     background: var(--gradient-1);
     color: white;
     border: none;
     border-radius: 50%;
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     cursor: pointer;
     box-shadow: 0 5px 20px rgba(255, 107, 0, 0.4);
     transition: var(--transition);
     position: relative;
 }

 .cart-float-btn:hover {
     transform: translateY(-5px) scale(1.1);
     box-shadow: 0 8px 25px rgba(255, 107, 0, 0.5);
 }

 .cart-float-count {
     position: absolute;
     top: -5px;
     right: -5px;
     background: var(--secondary);
     color: white;
     width: 25px;
     height: 25px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.8rem;
     font-weight: 600;
     border: 2px solid var(--dark);
 }

 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 @keyframes pulseCartIcon {

     0%,
     100% {
         transform: translate(-50%, -50%) scale(1);
         box-shadow: 0 0 30px var(--cart-glow);
     }

     50% {
         transform: translate(-50%, -50%) scale(1.1);
         box-shadow: 0 0 50px var(--cart-glow);
     }
 }

 @keyframes pulseRing {
     0% {
         opacity: 0.7;
         transform: translate(-50%, -50%) scale(1);
     }

     50% {
         opacity: 0.3;
         transform: translate(-50%, -50%) scale(1.2);
     }

     100% {
         opacity: 0.7;
         transform: translate(-50%, -50%) scale(1);
     }
 }

 @keyframes floatItem {

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

     50% {
         transform: translateY(-15px);
     }
 }

 @keyframes moveDataPoint {
     0% {
         right: 0;
         opacity: 0;
     }

     20% {
         opacity: 1;
     }

     100% {
         right: 100%;
         opacity: 0;
     }
 }

 @keyframes flyToCart {
     0% {
         opacity: 0;
         transform: translate(var(--startX), var(--startY)) scale(0.5);
     }

     50% {
         opacity: 1;
         transform: translate(calc(var(--startX) * 0.5), calc(var(--startY) * 0.5)) scale(1);
     }

     90% {
         opacity: 1;
         transform: translate(0, 0) scale(0.8);
     }

     100% {
         opacity: 0;
         transform: translate(0, 0) scale(0.2);
     }
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .cart-hero-title {
         font-size: 3rem;
     }

     .cart-hero-container {
         flex-direction: column;
     }

     .cart-hero-content-wrapper,
     .cart-hero-animation-wrapper {
         width: 100%;
     }

     .cart-3d-animation {
         height: 400px;
     }

     .cart-process-steps {
         flex-direction: column;
         align-items: stretch;
     }

     .cart-process-connector {
         width: 2px;
         height: 20px;
         margin: 0 auto;
     }
 }

 @media (max-width: 992px) {
     .cart-item {
         flex-direction: column;
         align-items: flex-start;
     }

     .cart-item-pricing {
         width: 100%;
         margin-top: 20px;
         justify-content: space-between;
     }

     .cart-actions {
         flex-direction: column;
         gap: 15px;
     }

     .cart-update-btn,
     .cart-checkout-btn {
         width: 100%;
     }
 }

 @media (max-width: 768px) {
     .cart-container {
         width: 95%;
     }

     .cart-hero-section {
        margin-top: 10%;
         padding: 60px 0;
         min-height: auto;
     }

     .cart-hero-content {
         padding: 30px;
     }

     .cart-hero-title {
         font-size: 2.5rem;
     }

     .cart-hero-subtitle {
         font-size: 1.1rem;
     }

     .cart-3d-animation {
         height: 350px;
     }

     .cart-hologram-container {
         width: 250px;
         height: 250px;
     }

     .cart-hero-cta {
         flex-direction: column;
     }

     .cart-item-info {
         flex-direction: column;
         align-items: flex-start;
     }

     .cart-item-pricing {
         flex-wrap: wrap;
         gap: 10px;
     }

     .cart-item-price,
     .cart-item-subtotal {
         min-width: auto;
         text-align: left;
     }
 }

 @media (max-width: 480px) {
     .cart-hero-title {
         font-size: 2rem;
     }

     .cart-hero-subtitle {
         font-size: 1rem;
     }

     .cart-3d-animation {
         height: 300px;
     }

     .cart-hologram-container {
         width: 200px;
         height: 200px;
     }

     .cart-floating-button {
         bottom: 20px;
         right: 20px;
     }

     .cart-float-btn {
         width: 50px;
         height: 50px;
         font-size: 1.2rem;
     }

     .cart-item-quantity {
         width: 100%;
         justify-content: center;
         margin: 10px 0;
     }
 }

 /* Cart Page End */



 /* Checkout Page Start */

 /* Hero Section */
 .checkout-hero-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
     background: linear-gradient(to bottom, rgba(10, 17, 40, 0.8), rgba(18, 26, 46, 0.8));
 }

 .checkout-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/checkoutbg.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.8;
     filter: blur(10px);
     transform: scale(1.1);
     z-index: -1;
 }

 .checkout-hero-section .checkout-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     position: relative;
     z-index: 1;
     max-width: 1300px;
     width: 100%;
    padding: 20px 40px;
 }

 .checkout-hero-content {
     flex: 1;
     max-width: 800px;
 }

 .checkout-hero-title {
     font-size: 3.5rem;
     margin-bottom: 20px;
     color: var(--heading-color);
     animation: fadeInUp 1s ease-out;
 }

 .checkout-hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .checkout-hero-description {
     font-size: 1.1rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
 }

 /* Progress Bar */
 .checkout-progress-container {
     margin-top: 40px;
     animation: fadeInUp 1s ease-out 0.6s forwards;
     opacity: 0;
 }

 .checkout-progress-bar {
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
 }

 .checkout-progress-step {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
     z-index: 1;
 }

 .checkout-step-icon {
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     color: var(--light);
     margin-bottom: 10px;
     transition: var(--transition);
     border: 2px solid transparent;
 }

 .checkout-progress-step.active .checkout-step-icon {
     background: var(--primary);
     color: white;
     box-shadow: 0 0 20px var(--checkout-glow);
 }

 .checkout-progress-step.completed .checkout-step-icon {
     background: var(--secondary);
     color: white;
 }

 .checkout-step-text {
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--light);
 }

 .checkout-progress-line {
     position: relative;
     height: 4px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 2px;
     margin: 0 25px;
 }

 .checkout-progress-completed {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 0%;
     background: var(--gradient-1);
     border-radius: 2px;
     transition: width 0.5s ease-out;
 }

 /* Hologram Animation */
 .checkout-hero-animation {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .checkout-hologram-container {
     position: relative;
     width: 300px;
     height: 300px;
     transform-style: preserve-3d;
     animation: rotateHologram 20s linear infinite;
 }

 @keyframes rotateHologram {
     0% {
         transform: rotateY(0deg);
     }

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

 .checkout-hologram-base {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 150px;
     height: 10px;
     background: var(--checkout-hologram);
     border-radius: 50%;
     box-shadow: 0 0 30px var(--checkout-hologram);
 }

 .checkout-hologram-projection {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
 }

 .checkout-hologram-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 80px;
     background: rgba(255, 107, 0, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid var(--primary);
     box-shadow: 0 0 30px var(--checkout-glow);
     animation: pulseIcon 3s infinite;
     z-index: 2;
 }

 .checkout-hologram-icon i {
     font-size: 2.5rem;
     color: var(--primary);
 }

 /* Holographic Rings */
 .checkout-hologram-rings {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
 }

 .checkout-hologram-ring {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 50%;
     border: 1px solid var(--secondary);
     opacity: 0.5;
     animation: pulseRing 3s infinite;
 }

 .checkout-hologram-ring:nth-child(1) {
     width: 140px;
     height: 140px;
     animation-delay: 0s;
 }

 .checkout-hologram-ring:nth-child(2) {
     width: 180px;
     height: 180px;
     animation-delay: 1s;
 }

 .checkout-hologram-ring:nth-child(3) {
     width: 220px;
     height: 220px;
     animation-delay: 2s;
 }

 /* Data Streams */
 .checkout-data-streams {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
 }

 .checkout-data-stream {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100px;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--secondary), transparent);
     transform-origin: left center;
 }

 .checkout-data-stream:nth-child(1) {
     transform: rotate(45deg);
 }

 .checkout-data-stream:nth-child(2) {
     transform: rotate(135deg);
 }

 .checkout-data-stream:nth-child(3) {
     transform: rotate(225deg);
 }

 .checkout-data-stream:nth-child(4) {
     transform: rotate(315deg);
 }

 .checkout-data-stream::after {
     content: "";
     position: absolute;
     top: 50%;
     right: 0;
     transform: translateY(-50%);
     width: 6px;
     height: 6px;
     background: var(--checkout-data-point);
     border-radius: 50%;
     box-shadow: 0 0 10px var(--checkout-glow);
     animation: moveDataPoint 3s linear infinite;
 }

 .checkout-data-stream:nth-child(1)::after {
     animation-delay: 0s;
 }

 .checkout-data-stream:nth-child(2)::after {
     animation-delay: 0.75s;
 }

 .checkout-data-stream:nth-child(3)::after {
     animation-delay: 1.5s;
 }

 .checkout-data-stream:nth-child(4)::after {
     animation-delay: 2.25s;
 }

 /* Floating Items */
 .checkout-floating-items {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .checkout-floating-item {
     position: absolute;
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid var(--glass-border);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     transition: var(--transition);
     animation: floatItem 5s infinite ease-in-out;
 }

 .checkout-floating-item i {
     font-size: 1.5rem;
     color: var(--light);
 }

 .checkout-floating-item[data-item="cart"] {
     top: 20%;
     left: 20%;
     animation-delay: 0s;
 }

 .checkout-floating-item[data-item="card"] {
     top: 20%;
     right: 20%;
     animation-delay: 1s;
 }

 .checkout-floating-item[data-item="shield"] {
     bottom: 20%;
     right: 20%;
     animation-delay: 2s;
 }

 .checkout-floating-item[data-item="rocket"] {
     bottom: 20%;
     left: 20%;
     animation-delay: 3s;
 }

 /* Main Checkout Content */
 .checkout-main {
     padding: 40px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
 }

 .checkout-form-container {
     background: var(--checkout-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     overflow: hidden;
     box-shadow: var(--shadow);
     position: relative;
 }

 /* Section Divider */
 .checkout-section-divider {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 40px;
 }

 .checkout-divider-line {
     height: 2px;
     width: 100px;
     background: var(--gradient-1);
 }

 .checkout-divider-icon {
     margin: 0 15px;
     font-size: 1.5rem;
     color: var(--primary);
     background: rgba(255, 107, 0, 0.1);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Multi-step Form */
 .checkout-step {
     display: none;
     padding: 40px;
     animation: fadeIn 0.5s ease-out;
 }

 .checkout-step.active {
     display: block;
 }

 /* Order Summary */
 .checkout-order-summary {
     margin-top: 30px;
 }

 .checkout-order-items {
     margin-bottom: 30px;
 }

 .checkout-order-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     margin-bottom: 15px;
     transition: var(--transition);
 }

 .checkout-order-item:hover {
     background: rgba(255, 107, 0, 0.1);
     transform: translateY(-5px);
 }

 .checkout-item-details {
     display: flex;
     gap: 20px;
     flex: 2;
 }

 .checkout-item-image {
     width: 60px;
     height: 60px;
     padding: 10px;
     background: rgba(0, 194, 168, 0.1);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--secondary);
 }

 .checkout-item-info h3 {
     font-size: 1.2rem;
     margin-bottom: 5px;
     color: var(--subheading-color);
 }

 .checkout-item-info p {
     font-size: 0.9rem;
     margin-bottom: 0;
     color: rgba(255, 255, 255, 0.7);
 }

 .checkout-item-pricing {
     display: flex;
     align-items: center;
     gap: 30px;
     flex: 1;
 }

 .checkout-item-quantity {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .checkout-quantity-btn {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid var(--glass-border);
     color: var(--light);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: var(--transition);
     padding: 15px;
 }

 .checkout-quantity-btn:hover {
     background: var(--primary);
     color: white;
 }

 .checkout-quantity-value {
     font-size: 1.1rem;
     font-weight: 600;
     min-width: 20px;
     text-align: center;
     color: var(--accent-color);
 }

 .checkout-item-price,
 .checkout-item-subtotal {
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--light);
 }

 .checkout-order-totals {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     padding: 20px;
     margin-bottom: 30px;
 }

 .checkout-total-row {
     display: flex;
     justify-content: space-between;
     padding: 10px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .checkout-total-row .checkout-subtotal {
     color: var(--heading-color);
 }

 .checkout-total-row span {
     color: var(--light);
 }

 .checkout-total-row:last-child {
     border-bottom: none;
 }

 .checkout-total-row .checkout-total {
     color: var(--accent-color);
 }

 .checkout-grand-total {
     font-size: 1.2rem;
     font-weight: 700;
     color: var(--primary);
     padding-top: 15px;
     margin-top: 10px;
     border-top: 2px solid rgba(255, 107, 0, 0.3);
 }

 .checkout-actions {
     display: flex;
     justify-content: space-between;
     margin-top: 30px;
 }

 /* Billing Form */
 .checkout-billing-form {
     margin-top: 30px;
 }

 .checkout-form-row {
     margin-bottom: 25px;
 }

 .checkout-form-row-split {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 .checkout-form-group {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .checkout-form-group label {
     font-size: 1rem;
     font-weight: 600;
     color: var(--light);
 }

 .checkout-input-container {
     position: relative;
     display: flex;
     align-items: center;
 }

 .checkout-input-icon {
     position: absolute;
     left: 15px;
     color: var(--secondary);
     font-size: 1.2rem;
 }

 .checkout-input {
     width: 100%;
     padding: 15px 15px 15px 45px;
     border-radius: 8px;
     border: 1px solid var(--glass-border);
     background: var(--glass-bg);
     color: var(--light);
     font-size: 1rem;
     transition: var(--transition);
 }

 .checkout-input option {
     background: var(--dark) !important;
 }

 .checkout-input:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 2px var(--checkout-input-focus);
 }

 .checkout-input-scan-line {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--primary), transparent);
     opacity: 0;
     transition: opacity 0.3s;
 }

 .checkout-input:focus~.checkout-input-scan-line {
     opacity: 1;
     animation: scanInput 2s linear infinite;
 }

 @keyframes scanInput {
     0% {
         top: 0;
     }

     100% {
         top: 100%;
     }
 }

 /* Payment Methods */
 .checkout-payment-methods {
     margin-top: 30px;
 }

 .checkout-payment-options {
     display: flex;
     gap: 20px;
     margin-bottom: 30px;
 }

 .checkout-payment-option {
     flex: 1;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     padding: 20px;
     text-align: center;
     cursor: pointer;
     transition: var(--transition);
     border: 2px solid transparent;
 }

 .checkout-payment-option:hover {
     background: rgba(255, 107, 0, 0.1);
     transform: translateY(-5px);
 }

 .checkout-payment-option.active {
     background: rgba(255, 107, 0, 0.1);
     border-color: var(--primary);
 }

 .checkout-payment-icon {
     font-size: 2rem;
     color: var(--light);
     margin-bottom: 10px;
 }

 .checkout-payment-option.active .checkout-payment-icon {
     color: var(--primary);
 }

 .checkout-payment-label {
     font-size: 1rem;
     font-weight: 600;
 }

 .checkout-payment-forms {
     margin-bottom: 30px;
 }

 .checkout-payment-form {
     display: none;
     animation: fadeIn 0.5s ease-out;
 }

 .checkout-payment-form.active {
     display: block;
 }

 /* Credit Card Form */
 .checkout-card-container {
     display: flex;
     flex-direction: column;
     gap: 30px;
     margin-bottom: 30px;
 }

 .checkout-card-preview {
     position: relative;
     width: 100%;
     max-width: 400px;
     height: 220px;
     margin: 0 auto;
     perspective: 1000px;
 }

 .checkout-card-front,
 .checkout-card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 16px;
     padding: 25px;
     backface-visibility: hidden;
     transition: transform 0.8s;
     background: var(--checkout-card-bg);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 }

 .checkout-card-back {
     transform: rotateY(180deg);
 }

 .checkout-card-preview.flipped .checkout-card-front {
     transform: rotateY(180deg);
 }

 .checkout-card-preview.flipped .checkout-card-back {
     transform: rotateY(0deg);
 }

 .checkout-card-chip {
     width: 50px;
     height: 40px;
     background: linear-gradient(135deg, #ffd700, #ffaa00);
     border-radius: 8px;
     margin-bottom: 30px;
     position: relative;
     overflow: hidden;
 }

 .checkout-card-chip::before,
 .checkout-card-chip::after {
     content: "";
     position: absolute;
     background: rgba(0, 0, 0, 0.1);
 }

 .checkout-card-chip::before {
     width: 100%;
     height: 1px;
     top: 50%;
     left: 0;
 }

 .checkout-card-chip::after {
     width: 1px;
     height: 100%;
     top: 0;
     left: 50%;
 }

 .checkout-card-number {
     display: flex;
     gap: 10px;
     margin-bottom: 30px;
     font-size: 1.3rem;
     color: var(--checkout-card-text);
     letter-spacing: 2px;
 }

 .checkout-card-details {
     color: var(--light);
     display: flex;
     justify-content: space-between;
 }

 .checkout-card-holder,
 .checkout-card-expiry {
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .checkout-card-holder label,
 .checkout-card-expiry label {
     font-size: 0.8rem;
     color: rgba(255, 255, 255, 0.6);
     text-transform: uppercase;
 }

 .checkout-card-type {
     position: absolute;
     top: 25px;
     right: 25px;
     font-size: 2rem;
     color: var(--checkout-card-text);
 }

 .checkout-card-stripe {
     width: 100%;
     height: 50px;
     background: rgba(0, 0, 0, 0.5);
     margin: 30px 0;
 }

 .checkout-card-cvc {
     width: 80%;
     margin-left: auto;
     background: rgba(255, 255, 255, 0.1);
     padding: 10px;
     border-radius: 4px;
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .checkout-card-cvc label {
     font-size: 0.8rem;
     color: rgba(255, 255, 255, 0.6);
     text-transform: uppercase;
 }

 .checkout-cvc-value {
     text-align: right;
     letter-spacing: 2px;
 }

 .checkout-secure-payment {
     display: flex;
     align-items: center;
     gap: 20px;
     background: rgba(0, 194, 168, 0.1);
     border-radius: 12px;
     padding: 20px;
     border: 1px solid rgba(0, 194, 168, 0.3);
 }

 .checkout-secure-icon {
     font-size: 2rem;
     color: var(--secondary);
 }

 .checkout-secure-text h4 {
     color: var(--secondary);
     margin-bottom: 5px;
 }

 .checkout-secure-text p {
     font-size: 0.9rem;
     margin-bottom: 0;
 }

 /* PayPal Form */
 .checkout-paypal-container {
     text-align: center;
     padding: 40px;
 }

 .checkout-paypal-logo {
     font-size: 4rem;
     color: #0070ba;
     margin-bottom: 20px;
 }

 .checkout-paypal-btn {
     background: #0070ba;
     color: white;
     padding: 15px 30px;
     border-radius: 50px;
     font-size: 1.1rem;
     font-weight: 600;
     margin-top: 20px;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: var(--transition);
 }

 .checkout-paypal-btn:hover {
     background: #005ea6;
     transform: translateY(-3px);
 }

 /* Bank Transfer Form */
 .checkout-bank-container {
     padding: 20px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
 }

 .checkout-bank-info h3 {
     color: var(--light);
     margin-bottom: 15px;
 }

 .checkout-bank-details {
     margin: 20px 0;
 }

 .checkout-bank-detail {
     display: flex;
     padding: 10px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .checkout-bank-detail:last-child {
     border-bottom: none;
 }

 .checkout-bank-label {
     flex: 1;
     font-weight: 600;
 }

 .checkout-bank-value {
     flex: 2;
 }

 .checkout-bank-note {
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.7);
     padding: 15px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 8px;
     border-left: 3px solid var(--primary);
 }

 /* Review and Confirm */
 .checkout-review-container {
     margin-top: 30px;
 }

 .checkout-review-sections {
     display: flex;
     flex-direction: column;
     gap: 20px;
     margin-bottom: 30px;
 }

 .checkout-review-section {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     overflow: hidden;
 }

 .checkout-review-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 15px 20px;
     background: rgba(255, 255, 255, 0.05);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .checkout-review-header h3 {
     margin-bottom: 0;
     font-size: 1.2rem;
     color: var(--heading-color);
 }

 .checkout-edit-btn {
     background: transparent;
     border: none;
     color: var(--accent);
     font-size: 0.9rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 5px;
     transition: var(--transition);
 }

 .checkout-edit-btn:hover {
     color: var(--primary);
 }

 .checkout-review-content {
     padding: 20px;
 }

 .checkout-review-items {
     margin-bottom: 20px;
 }

 .checkout-review-item {
     display: flex;
     justify-content: space-between;
     padding: 10px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

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

 .checkout-review-item-name {
     flex: 2;
     color: var(--heading-color);
 }

 .checkout-review-item-quantity,
 .checkout-review-item-price {
     flex: 1;
     color: var(--light);
     text-align: right;
 }

 .checkout-review-totals {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 8px;
     padding: 15px;
 }

 .checkout-review-total {
     display: flex;
     justify-content: space-between;
     padding: 5px 0;
     color: var(--accent-color);
 }

 .checkout-review-grand-total {
     font-weight: 700;
     color: var(--heading-color);
     padding-top: 10px;
     margin-top: 10px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .checkout-review-billing {
     line-height: 1.8;
     color: var(--light);
 }

 .checkout-review-billing-name {
     font-weight: 600;
     font-size: 1.1rem;
     color: var(--subheading-color);
 }

 .checkout-review-billing-email {
     color: var(--accent-color);
 }

 .checkout-review-payment {
     color: var(--light);
 }

 .checkout-review-payment-method {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 600;
     margin-bottom: 10px;
 }

 .checkout-terms-agreement {
     margin-bottom: 30px;
 }

 .checkout-terms-checkbox {
     display: flex;
     align-items: flex-start;
     gap: 10px;
 }

 .checkout-terms-checkbox input[type="checkbox"] {
     width: 20px;
     height: 20px;
     accent-color: var(--primary);
     margin-top: 3px;
 }

 .checkout-terms-link {
     color: var(--accent);
     text-decoration: underline;
 }

 .checkout-terms-link:hover {
     color: var(--primary);
 }

 .checkout-section-header p {
     text-align: center;
 }

 /* Get Started Section */
 .checkout-get-started-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
 }

 .checkout-get-started-content {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
     background: rgba(18, 26, 46, 0.7);
     border-radius: 16px;
     padding: 40px;
     border: 1px solid var(--glass-border);
     box-shadow: var(--shadow);
 }


 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 @keyframes pulseIcon {

     0%,
     100% {
         transform: translate(-50%, -50%) scale(1);
         box-shadow: 0 0 30px var(--checkout-glow);
     }

     50% {
         transform: translate(-50%, -50%) scale(1.1);
         box-shadow: 0 0 50px var(--checkout-glow);
     }
 }

 @keyframes pulseRing {
     0% {
         opacity: 0.7;
         transform: translate(-50%, -50%) scale(1);
     }

     50% {
         opacity: 0.3;
         transform: translate(-50%, -50%) scale(1.2);
     }

     100% {
         opacity: 0.7;
         transform: translate(-50%, -50%) scale(1);
     }
 }

 @keyframes moveDataPoint {
     0% {
         right: 0;
         opacity: 0;
     }

     20% {
         opacity: 1;
     }

     100% {
         right: 100%;
         opacity: 0;
     }
 }

 @keyframes floatItem {

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

     50% {
         transform: translateY(-15px);
     }
 }

 @keyframes scaleIn {
     from {
         transform: scale(0);
     }

     to {
         transform: scale(1);
     }
 }

 /* Responsive Design */
 @media (max-width: 1200px) {
     .checkout-hero-section .checkout-container {
         flex-direction: column;
           margin-top: 10%;
           padding: 20px 40px;
     }

     .checkout-hero-content,
     .checkout-hero-animation {
         max-width: 100%;
     }

     .checkout-hologram-container {
         margin: 40px auto;
     }
 }

 @media (max-width: 992px) {
     .checkout-progress-bar {
         flex-wrap: wrap;
         justify-content: center;
         gap: 20px;
     }

     .checkout-progress-line {
         display: none;
     }

     .checkout-order-item {
         flex-direction: column;
         gap: 20px;
     }

     .checkout-item-pricing {
         width: 100%;
         flex-wrap: wrap;
         justify-content: center;
     }

     .checkout-card-container {
         flex-direction: column;
     }
 }

 @media (max-width: 768px) {
     .checkout-hero-title {
         font-size: 2.5rem;
     }

     .checkout-form-row-split {
         grid-template-columns: 1fr;
         gap: 25px;
     }

     .checkout-payment-options {
         flex-direction: column;
     }

     .checkout-actions {
         flex-direction: column;
         gap: 15px;
     }

     .checkout-btn-secondary,
     .checkout-btn-primary {
         width: 100%;
     }

 }

 @media (max-width: 480px) {
     .checkout-hero-title {
         font-size: 2rem;
     }

     .checkout-card-chip {
         margin-bottom: 0;
     }

     .checkout-step {
         padding: 20px;
     }

     .checkout-section-header h2 {
         font-size: 1.8rem;
     }

     .checkout-card-preview {
         height: 180px;
     }

     .checkout-card-number {
         font-size: 1rem;
         margin-bottom: 0;
     }

     .checkout-paypal-btn {
         font-size: 0.8 !important;
     }
 }

 /* Checkout Page End */


 /* order-confirmation page Start */

 .confirm-section-header {
     text-align: center;
     margin-bottom: 40px;
 }

 .confirm-section-header i {
     color: var(--subheading-color);
 }

 .confirm-section-header p {
     max-width: 800px;
     margin: 0 auto 20px;
 }

 /* Hero Section */
 .confirm-hero-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
     background: linear-gradient(to bottom, rgba(10, 17, 40, 0.2), rgba(18, 26, 46, 0.2));

 }

 .confirm-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/confirmbg.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 1;
     filter: blur(10px);
     transform: scale(1.1);
     z-index: -1;
 }

 .confirm-hero-section .container {
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: space-between;
     gap: 50px;
     margin: 20px auto;
     position: relative;
     z-index: 1;
     margin: auto;
 }

 .confirm-hero-content {
     flex: 1;
     /* max-width: 800px; */
     margin-top: 5%;
 }

 .confirm-success-icon {
     position: relative;
     width: 120px;
     height: 120px;
     margin: 0 auto 30px;
 }

 .confirm-success-circle {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--subheading-color);
     color: var(--light);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 3rem;
     color: white;
     box-shadow: 0 0 30px var(--confirm-glow);
     animation: scaleIn 0.5s ease-out, pulseSuccess 3s infinite 0.5s;
 }

 .confirm-success-pulse {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     border: 2px solid var(--success);
     animation: pulseBorder 2s infinite;
 }

 @keyframes scaleIn {
     0% {
         transform: scale(0);
         opacity: 0;
     }

     60% {
         transform: scale(1.2);
     }

     100% {
         transform: scale(1);
         opacity: 1;
     }
 }

 @keyframes pulseSuccess {

     0%,
     100% {
         transform: scale(1);
         box-shadow: 0 0 30px var(--confirm-glow);
     }

     50% {
         transform: scale(1.05);
         box-shadow: 0 0 50px var(--confirm-glow);
     }
 }

 @keyframes pulseBorder {
     0% {
         transform: scale(1);
         opacity: 0.7;
     }

     100% {
         transform: scale(1.5);
         opacity: 0;
     }
 }

 .confirm-hero-title {
     font-size: 3.5rem;
     margin-bottom: 20px;
     text-align: center;
     color: var(--heading-color);
     animation: fadeInUp 1s ease-out;
 }

 .confirm-hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .confirm-hero-description {
     font-size: 1.1rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
 }

 .confirm-hero-cta {
     display: flex;
     text-align: center;
     justify-content: center;
     text-align: center;
     gap: 20px;
     margin-top: 30px;
     animation: fadeInUp 1s ease-out 0.6s forwards;
     opacity: 0;
 }

 /* Hero Animation - Receipt */
 .confirm-hero-animation {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     margin-top: 10%;
     padding: 80px 0;
 }

 .confirm-receipt-container {
     width: 550px;
     background: var(--confirm-receipt-bg);
     border-radius: 16px;
     border: 1px solid var(--confirm-receipt-border);
     overflow: hidden;
     box-shadow: var(--shadow);
     position: relative;
     transform-style: preserve-3d;
     perspective: 1000px;
     animation: receiptAppear 1s ease-out;
 }

 @keyframes receiptAppear {
     0% {
         transform: translateY(50px) rotateX(30deg);
         opacity: 0;
     }

     100% {
         transform: translateY(0) rotateX(0deg);
         opacity: 1;
     }
 }

 .confirm-receipt-header {
     padding: 20px;
     background: rgba(255, 255, 255, 0.05);
     border-bottom: 1px solid var(--confirm-receipt-border);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
 }

 .confirm-receipt-logo {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 1.2rem;
     font-weight: 600;
 }

 .confirm-receipt-logo span {
     color: var(--heading-color);
 }

 .confirm-receipt-logo i {
     color: var(--primary);
 }

 .confirm-receipt-title {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--light);
 }

 .confirm-receipt-body {
     padding: 20px;
     color: var(--light);
 }

 .confirm-receipt-detail {
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
 }

 .confirm-detail-label {
     font-weight: 600;
 }

 .confirm-receipt-items {
     margin: 20px 0;
     border-top: 1px dashed var(--confirm-receipt-border);
     border-bottom: 1px dashed var(--confirm-receipt-border);
     padding: 15px 0;
 }

 .confirm-receipt-item {
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
 }

 .confirm-item-name {
     flex: 2;
 }

 .confirm-item-quantity {
     margin-right: 20%;
 }

 .confirm-item-price {
     text-align: right;
 }

 .confirm-receipt-totals {
     margin-top: 20px;
 }

 .confirm-receipt-subtotal,
 .confirm-receipt-tax {
     display: flex;
     justify-content: space-between;
     margin-bottom: 5px;
 }

 .confirm-receipt-total {
     display: flex;
     justify-content: space-between;
     font-weight: 700;
     font-size: 1.1rem;
     color: var(--primary);
     margin-top: 10px;
     padding-top: 10px;
     border-top: 1px solid var(--confirm-receipt-border);
 }

 .confirm-receipt-footer {
     padding: 20px;
     background: rgba(255, 255, 255, 0.05);
     border-top: 1px solid var(--confirm-receipt-border);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
     color: var(--light);
 }

 .confirm-receipt-barcode {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5px;
 }

 .confirm-barcode-lines {
     width: 80%;
     height: 40px;
     background: repeating-linear-gradient(90deg, #000, #000 2px, transparent 2px, transparent 4px);
     position: relative;
 }

 .confirm-barcode-number {
     font-size: 0.8rem;
     letter-spacing: 2px;
 }

 .confirm-receipt-thank-you {
     font-style: italic;
     font-size: 0.9rem;
 }

 .confirm-receipt-hologram {
     position: absolute;
     top: 20px;
     right: 20px;
     width: 60px;
     height: 60px;
     perspective: 1000px;
 }

 .confirm-hologram-circle {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: radial-gradient(circle at center, rgba(0, 194, 168, 0.2), transparent 70%);
     box-shadow: 0 0 15px var(--confirm-hologram);
     animation: rotateHologram 10s linear infinite;
 }

 .confirm-hologram-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 1.5rem;
     color: var(--secondary);
     animation: pulseHologram 3s infinite;
 }

 @keyframes rotateHologram {
     0% {
         transform: rotateY(0deg);
     }

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

 @keyframes pulseHologram {

     0%,
     100% {
         opacity: 0.7;
     }

     50% {
         opacity: 1;
     }
 }

 .confirm-receipt-scan-line {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--secondary), transparent);
     animation: scanReceipt 3s linear infinite;
 }

 @keyframes scanReceipt {
     0% {
         top: 0;
         opacity: 0;
     }

     10% {
         opacity: 1;
     }

     90% {
         opacity: 1;
     }

     100% {
         top: 100%;
         opacity: 0;
     }
 }

 /* Data Streams */
 .confirm-data-streams {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 .confirm-data-stream {
     position: absolute;
     width: 150px;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--secondary), transparent);
     opacity: 0.6;
 }

 .confirm-data-stream:nth-child(1) {
     top: 30%;
     left: 0;
     animation: moveDataStream 3s linear infinite;
 }

 .confirm-data-stream:nth-child(2) {
     top: 50%;
     left: 0;
     animation: moveDataStream 3s linear infinite 1s;
 }

 .confirm-data-stream:nth-child(3) {
     top: 70%;
     left: 0;
     animation: moveDataStream 3s linear infinite 2s;
 }

 @keyframes moveDataStream {
     0% {
         left: -150px;
         opacity: 0;
     }

     10% {
         opacity: 0.6;
     }

     90% {
         opacity: 0.6;
     }

     100% {
         left: 100%;
         opacity: 0;
     }
 }

 /* Floating Elements */
 .confirm-floating-elements {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .confirm-floating-element {
     position: absolute;
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--light);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     animation: floatElement 5s infinite ease-in-out;
 }

 .confirm-floating-element[data-icon="chart"] {
     top: 20%;
     left: 10%;
     animation-delay: 0s;
     color: var(--primary);
 }

 .confirm-floating-element[data-icon="target"] {
     top: 70%;
     left: 15%;
     animation-delay: 1s;
     color: var(--secondary);
 }

 .confirm-floating-element[data-icon="analytics"] {
     top: 30%;
     right: 10%;
     animation-delay: 2s;
     color: var(--accent);
 }

 .confirm-floating-element[data-icon="ad"] {
     top: 60%;
     right: 15%;
     animation-delay: 3s;
     color: var(--success);
 }

 @keyframes floatElement {

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

     50% {
         transform: translateY(-20px);
     }
 }

 /* Particles */
 .confirm-particles-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 0;
 }

 /* Order Summary Section */
 .confirm-summary-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
 }

 .confirm-summary-card {
     background: var(--confirm-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     overflow: hidden;
     box-shadow: var(--shadow);
     padding: 30px;
 }

 .confirm-summary-details {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin-bottom: 30px;
 }

 .confirm-summary-detail {
     display: flex;
     align-items: center;
     gap: 15px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: var(--transition);
 }

 .confirm-summary-detail:hover {
     transform: translateY(-5px);
     background: rgba(255, 107, 0, 0.1);
 }

 .confirm-detail-icon {
     width: 50px;
     height: 50px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--primary);
     flex-shrink: 0;
 }

 .confirm-detail-content h3 {
     font-size: 1.2rem;
     margin-bottom: 5px;
     color: var(--light);
 }

 .confirm-detail-content p {
     font-size: 1.1rem;
     margin-bottom: 0;
     color: var(--primary);
     font-weight: 600;
 }

 .confirm-summary-items {
     margin-top: 30px;
 }

 .confirm-summary-items h3 {
     font-size: 1.3rem;
     margin-bottom: 20px;
     color: var(--light);
 }

 .confirm-item-card {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 20px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     margin-bottom: 15px;
     transition: var(--transition);
 }

 .confirm-item-card:hover {
     transform: translateY(-5px);
     background: rgba(0, 194, 168, 0.1);
 }

 .confirm-item-icon {
     width: 60px;
     height: 60px;
     background: rgba(0, 194, 168, 0.1);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--secondary);
     flex-shrink: 0;
 }

 .confirm-item-details {
     flex: 1;
 }

 .confirm-item-details h4 {
     font-size: 1.2rem;
     margin-bottom: 5px;
     color: var(--light);
 }

 .confirm-item-details p {
     font-size: 0.9rem;
     margin-bottom: 0;
     color: rgba(255, 255, 255, 0.7);
 }

 .confirm-item-quantity {
     width: 40px;
     height: 40px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     color: var(--primary);
     font-weight: 600;
 }

 .confirm-receipt-note {
     display: flex;
     align-items: flex-start;
     gap: 15px;
     padding: 20px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     margin-top: 30px;
     border-left: 3px solid var(--accent);
 }

 .confirm-receipt-note i {
     font-size: 1.5rem;
     color: var(--accent);
     margin-top: 3px;
 }

 .confirm-receipt-note p {
     margin-bottom: 0;
     font-size: 0.95rem;
 }

 /* Getting Started Section */
 .confirm-getting-started-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .confirm-steps-container {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .confirm-step-card {
     display: flex;
     gap: 20px;
     background: var(--confirm-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     overflow: hidden;
     box-shadow: var(--shadow);
     transition: var(--transition);
 }

 .confirm-step-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .confirm-step-number {
     width: 80px;
     background: var(--primary);
     color: white;
     font-size: 2.5rem;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .confirm-step-content {
     padding: 25px;
     flex: 1;
     position: relative;
 }

 .confirm-step-content h3 {
     font-size: 1.4rem;
     margin-bottom: 10px;
     color: var(--light);
 }

 .confirm-step-content p {
     margin-bottom: 0;
     padding-right: 60px;
 }

 .confirm-step-icon {
     position: absolute;
     top: 25px;
     right: 25px;
     width: 50px;
     height: 50px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--primary);
 }

 /* What's Next Section */
 .confirm-whats-next-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
 }

 .confirm-features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .confirm-feature-card {
     background: var(--confirm-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     overflow: hidden;
     box-shadow: var(--shadow);
     padding: 30px;
     display: flex;
     flex-direction: column;
     height: 100%;
     transition: var(--transition);
 }

 .confirm-feature-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .confirm-feature-icon {
     width: 70px;
     height: 70px;
     background: rgba(0, 194, 168, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
     color: var(--secondary);
     margin-bottom: 20px;
     transition: var(--transition);
 }

 .confirm-feature-card:hover .confirm-feature-icon {
     background: var(--secondary);
     color: white;
     transform: scale(1.1);
 }

 .confirm-feature-content {
     flex: 1;
 }

 .confirm-feature-content h3 {
     font-size: 1.3rem;
     margin-bottom: 10px;
     color: var(--light);
 }

 .confirm-feature-content p {
     font-size: 0.95rem;
     margin-bottom: 20px;
 }

 .confirm-feature-link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: var(--primary);
     font-weight: 600;
     margin-top: auto;
 }

 .confirm-feature-link:hover {
     color: var(--secondary);
 }

 .confirm-feature-link i {
     transition: var(--transition);
 }

 .confirm-feature-link:hover i {
     transform: translateX(5px);
 }

 /* FAQ Section */
 .confirm-faq-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .confirm-faq-container {
     max-width: 800px;
     margin: 0 auto;
 }

 .confirm-faq-accordion {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .confirm-faq-item {
     background: rgba(18, 26, 46, 0.7);
     border-radius: 12px;
     overflow: hidden;
     border: 1px solid var(--glass-border);
     transition: var(--transition);
 }

 .confirm-faq-item:hover {
     border-color: var(--primary);
 }

 .confirm-faq-header {
     padding: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     transition: var(--transition);
 }

 .confirm-faq-header:hover {
     background: rgba(255, 107, 0, 0.1);
 }

 .confirm-faq-header h3 {
     font-size: 1.2rem;
     margin-bottom: 0;
     color: var(--light);
 }

 .confirm-faq-icon {
     font-size: 1.2rem;
     color: var(--primary);
     transition: var(--transition);
 }

 .confirm-faq-item.active .confirm-faq-icon i {
     transform: rotate(180deg);
 }

 .confirm-faq-content {
     padding: 0 20px;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease-out, padding 0.3s ease;
 }

 .confirm-faq-item.active .confirm-faq-content {
     padding: 0 20px 20px;
     max-height: 1000px;
 }

 /* Thank You Section */
 .confirm-thank-you-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
 }

 .confirm-thank-you-content {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
     background: var(--confirm-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     overflow: hidden;
     box-shadow: var(--shadow);
     padding: 40px;
 }

 .confirm-closing {
     font-size: 1.3rem;
     font-weight: 600;
     color: var(--primary);
     margin: 30px 0;
 }

 .confirm-social-links {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 30px;
 }

 .confirm-social-link {
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--light);
     transition: var(--transition);
 }

 .confirm-social-link:hover {
     background: var(--primary);
     color: white;
     transform: translateY(-5px);
 }

 /* Footer */
 .confirm-footer {
     padding: 30px 0;
     background: var(--dark-alt);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .confirm-footer-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
 }

 .confirm-footer-links {
     display: flex;
     gap: 20px;
 }

 .confirm-footer-links a {
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.9rem;
 }

 .confirm-footer-links a:hover {
     color: var(--primary);
 }

 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 /* Responsive Design */
 @media (max-width: 1200px) {
     .confirm-hero-section .confirm-container {
         flex-direction: column;
         margin-top: 10%;
         padding: 40px 20px;
     }

     .confirm-hero-content,
     .confirm-hero-animation {
        margin-top: 20%;
         max-width: 100%;
         width: 100%;
     }

     .confirm-receipt-container {
         margin: 40px auto;
     }
 }

 @media (max-width: 992px) {
     .confirm-hero-title {
         font-size: 3rem;
     }

     .confirm-summary-details {
         grid-template-columns: 1fr;
     }

     .confirm-item-card {
         flex-direction: column;
         text-align: center;
     }

     .confirm-item-details {
         text-align: center;
     }

     .confirm-item-quantity {
         margin: 10px auto 0;
     }
 }

 @media (max-width: 768px) {
     .confirm-hero-title {
         font-size: 2.5rem;
     }

     .confirm-hero-cta {
         flex-direction: column;
     }

     .confirm-step-card {
         flex-direction: column;
     }

     .confirm-step-number {
         width: 100%;
         padding: 15px;
     }

     .confirm-step-content {
         padding: 20px;
     }

     .confirm-step-icon {
         position: static;
         margin: 20px auto 0;
     }

     .confirm-step-content p {
         padding-right: 0;
     }

     .confirm-receipt-note {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .confirm-footer-content {
         flex-direction: column;
         text-align: center;
     }

     .confirm-footer-links {
         justify-content: center;
     }
 }

 @media (max-width: 480px) {
     .confirm-hero-title {
         font-size: 2rem;
     }

     .confirm-section-header h2 {
         font-size: 1.8rem;
     }

     .confirm-receipt-container {
         width: 100%;
     }

     .confirm-receipt-body {
         padding: 15px;
     }

     .confirm-receipt-item {
         flex-direction: column;
         align-items: flex-start;
         gap: 5px;
     }

     .confirm-item-name,
     .confirm-item-quantity,
     .confirm-item-price {
         width: 100%;
         text-align: left;
     }
 }

 /* order-confirmation page End */


 /* LegalDisclaimer Page Start  */

 /* Hero Section */
 .legal-hero-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
     background: rgba(0, 0, 139, 0.201);
 }

 .legal-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/legalbg.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.5;
     filter: blur(7px);
     transform: scale(1.1);
     z-index: -1;
 }

 .legal-hero-section .legal-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     position: relative;
     z-index: 1;
 }

 .legal-hero-content {
     flex: 1;
     max-width: 600px;
 }

 .legal-hero-title {
     font-size: 3.5rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
     color: var(--heading-color);
 }

 .legal-hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .legal-hero-description {
     font-size: 1.1rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
 }

 .legal-hero-cta {
     display: flex;
     text-align: center;
     gap: 20px;
     animation: fadeInUp 1s ease-out 0.6s forwards;
     opacity: 0;
 }

 /* Hero Animation - Legal Document and Scales */
 .legal-hero-animation {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .legal-document-container {
     position: relative;
     width: 400px;
     height: 400px;
     perspective: 1000px;
     animation: fadeIn 1s ease-out;
 }

 .legal-document {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotateX(20deg);
     width: 250px;
     height: 350px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
     border: 1px solid var(--glass-border);
     padding: 20px;
     box-shadow: 0 0 30px var(--legal-document-glow);
     animation: floatDocument 5s infinite ease-in-out;
     z-index: 2;
 }

 @keyframes floatDocument {

     0%,
     100% {
         transform: translate(-50%, -50%) rotateX(20deg);
     }

     50% {
         transform: translate(-50%, -50%) rotateX(20deg) translateY(-15px);
     }
 }

 .legal-document-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     border-bottom: 1px solid var(--glass-border);
     padding-bottom: 10px;
 }

 .legal-document-title {
     font-size: 1.2rem;
     font-weight: 700;
     color: var(--primary);
 }

 .legal-document-seal {
     width: 40px;
     height: 40px;
     background: var(--primary);
     border-radius: 50%;
     position: relative;
     box-shadow: 0 0 10px var(--legal-glow);
 }

 .legal-document-seal::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 30px;
     height: 30px;
     border: 2px solid rgba(255, 255, 255, 0.5);
     border-radius: 50%;
 }

 .legal-document-content {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .legal-document-line {
     height: 8px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
     width: 100%;
 }

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

 .legal-document-line:nth-child(4) {
     width: 90%;
 }

 .legal-document-line:nth-child(6) {
     width: 70%;
 }

 .legal-document-signature {
     margin-top: 30px;
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .legal-signature-line {
     height: 2px;
     background: rgba(255, 255, 255, 0.3);
     width: 70%;
 }

 .legal-signature-text {
     font-size: 0.8rem;
     color: rgba(255, 255, 255, 0.5);
 }

 /* Scales of Justice */
 .legal-scales {
     position: absolute;
     top: 60%;
     left: 70%;
     transform: translate(-50%, -50%);
     width: 150px;
     height: 150px;
     z-index: 1;
 }

 .legal-scales-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 20px;
     height: 100px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .legal-scales-stand {
     width: 20px;
     height: 100px;
     background: linear-gradient(to bottom, var(--secondary), var(--accent));
     border-radius: 10px;
 }

 .legal-scales-beam {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 150px;
     height: 10px;
     background: var(--accent);
     border-radius: 5px;
     display: flex;
     justify-content: space-between;
     animation: balanceScales 5s infinite ease-in-out;
 }

 @keyframes balanceScales {

     0%,
     100% {
         transform: translateX(-50%) rotate(0deg);
     }

     25% {
         transform: translateX(-50%) rotate(5deg);
     }

     75% {
         transform: translateX(-50%) rotate(-5deg);
     }
 }

 .legal-scales-left,
 .legal-scales-right {
     position: relative;
     width: 40px;
     height: 40px;
 }

 .legal-scales-pan {
     position: absolute;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     width: 40px;
     height: 10px;
     background: var(--secondary);
     border-radius: 5px;
 }

 .legal-scales-pan::before {
     content: "";
     position: absolute;
     top: -20px;
     left: 50%;
     transform: translateX(-50%);
     width: 2px;
     height: 20px;
     background: var(--accent);
 }

 .legal-scales-weight {
     position: absolute;
     top: 30px;
     left: 50%;
     transform: translateX(-50%);
     width: 30px;
     height: 10px;
     background: rgba(255, 107, 0, 0.5);
     border-radius: 5px;
 }

 /* Shield */
 .legal-shield {
     position: absolute;
     top: 30%;
     left: 30%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 80px;
     z-index: 1;
 }

 .legal-shield-icon {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.5rem;
     color: var(--primary);
     animation: pulseShield 3s infinite;
 }

 @keyframes pulseShield {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.7;
     }

     50% {
         transform: scale(1.1);
         opacity: 1;
     }
 }

 /* Floating Elements */
 .legal-floating-elements {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .legal-floating-element {
     position: absolute;
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--light);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     animation: floatElement 5s infinite ease-in-out;
 }

 .legal-floating-element[data-icon="paragraph"] {
     top: 20%;
     left: 10%;
     animation-delay: 0s;
     color: var(--primary);
 }

 .legal-floating-element[data-icon="gavel"] {
     top: 70%;
     left: 15%;
     animation-delay: 1s;
     color: var(--secondary);
 }

 .legal-floating-element[data-icon="balance"] {
     top: 30%;
     right: 10%;
     animation-delay: 2s;
     color: var(--accent);
 }

 .legal-floating-element[data-icon="file"] {
     top: 60%;
     right: 15%;
     animation-delay: 3s;
     color: var(--light);
 }

 @keyframes floatElement {

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

     50% {
         transform: translateY(-20px);
     }
 }

 /* Particles */
 .legal-particles-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 0;
 }

 /* Quick Links Section */
 .legal-quick-links-section {
     padding: 40px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
     margin-top: -40px;
 }

 .legal-quick-links-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
 }

 .legal-quick-link {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     padding: 25px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     display: flex;
     flex-direction: column;
     align-items: center;
     color: var(--light);
 }

 .legal-quick-link:hover {
     transform: translateY(-10px);
     background: rgba(255, 107, 0, 0.1);
     border-color: var(--primary);
     color: var(--light);
 }

 .legal-quick-link-icon {
     width: 70px;
     height: 70px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
     color: var(--primary);
     margin-bottom: 15px;
     transition: var(--transition);
 }

 .legal-quick-link:hover .legal-quick-link-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .legal-quick-link h3 {
     font-size: 1.3rem;
     margin-bottom: 10px;
     color: var(--light);
 }

 .legal-quick-link p {
     font-size: 0.95rem;
     margin-bottom: 0;
     color: rgba(255, 255, 255, 0.7);
 }

 /* Legal Section */
 .legal-section {
     padding: 80px 0;
 }

 .legal-section:nth-child(odd) {
     background: var(--dark);
 }

 .legal-section:nth-child(even) {
     background: var(--gradient-bg);
 }

 .legal-content-card {
     background: var(--legal-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     padding: 30px;
     box-shadow: var(--shadow);
     transition: var(--transition);
 }

 .legal-content-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .legal-bullet-list {
     list-style-type: none;
     margin: 20px 0;
     padding-left: 20px;
 }

 .legal-bullet-list li {
     position: relative;
     color: var(--subheading-color);
     padding-left: 25px;
     margin-bottom: 10px;
 }

 .legal-bullet-list li::before {
     content: "\f00c";
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     position: absolute;
     left: 0;
     color: var(--primary);
 }

 /* Contact Options */
 .legal-contact-options {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin-top: 30px;
 }

 .legal-contact-option {
     display: flex;
     align-items: center;
     gap: 20px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     padding: 20px;
     transition: var(--transition);
     color: var(--light);
 }

 .legal-contact-option:hover {
     transform: translateY(-5px);
     background: rgba(255, 107, 0, 0.1);
     color: var(--light);
 }

 .legal-contact-icon {
     width: 60px;
     height: 60px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--primary);
     transition: var(--transition);
 }

 .legal-contact-option:hover .legal-contact-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .legal-contact-details h3 {
     font-size: 1.2rem;
     margin-bottom: 5px;
     color: var(--light);
 }

 .legal-contact-details p {
     font-size: 0.95rem;
     margin-bottom: 0;
     color: rgba(255, 255, 255, 0.7);
 }

 /* Conclusion Section */
 .legal-conclusion-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .legal-conclusion-content {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
     background: var(--legal-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     overflow: hidden;
     box-shadow: var(--shadow);
     padding: 40px;
 }

 .legal-conclusion-cta {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 30px;
 }

 /* Footer */
 .legal-footer {
     padding: 30px 0;
     background: var(--dark-alt);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .legal-footer-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
 }

 .legal-footer-links {
     display: flex;
     gap: 20px;
 }

 .legal-footer-links a {
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.9rem;
 }

 .legal-footer-links a:hover {
     color: var(--primary);
 }

 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 /* Responsive Design */
 @media (max-width: 1200px) {
     .legal-hero-section .legal-container {
         flex-direction: column;
           margin-top: 10%;
           padding: 20px 10px;
     }

     .legal-hero-content,
     .legal-hero-animation {
         max-width: 100%;
     }

     .legal-document-container {
         margin: 40px auto;
     }
 }

 @media (max-width: 992px) {
     .legal-hero-title {
         font-size: 3rem;
     }

     .legal-contact-options {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 768px) {
     .legal-hero-title {
         font-size: 2.5rem;
     }

     .legal-hero-cta {
         flex-direction: column;
     }

     .legal-conclusion-cta {
         flex-direction: column;
     }

     .legal-footer-content {
         flex-direction: column;
         text-align: center;
     }

     .legal-footer-links {
         justify-content: center;
     }
 }

 @media (max-width: 480px) {
     .legal-hero-title {
         font-size: 2rem;
     }

     .legal-section-header h2 {
         font-size: 1.8rem;
     }
 }

 /* LegalDisclaimer Page End  */



 /* Help Center Page Start */

 /* Hero Section */
 .support-section-header {
     text-align: center;
 }

 .support-hero-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
     z-index: 0;
     background: var(--gradient-bg);
 }

 .support-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/helpcenterbg.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.5;
     filter: blur(10px);
     transform: scale(1.1);
     z-index: -1;
 }

 .support-hero-section .support-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     position: relative;
     z-index: 1;
 }

 .support-hero-content {
     flex: 1;
     max-width: 600px;
 }

 .support-hero-title {
     font-size: 3.5rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
     color: var(--heading-color);
 }

 .support-hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .support-hero-description {
     font-size: 1.1rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
 }


 /* Hero Animation - Brain Network */
 .support-hero-animation {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .support-brain-container {
     position: relative;
     width: 400px;
     height: 400px;
     perspective: 1000px;
     animation: fadeIn 1s ease-out;
 }

 .support-brain-core {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100px;
     height: 100px;
     background: radial-gradient(circle at center, rgba(0, 194, 168, 0.3), transparent 70%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 0 30px var(--support-brain-glow);
     animation: pulseBrain 3s infinite;
     z-index: 2;
 }

 .support-brain-pulse {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     border: 2px solid var(--secondary);
     animation: pulseBorder 2s infinite;
 }

 @keyframes pulseBrain {

     0%,
     100% {
         transform: translate(-50%, -50%) scale(1);
         box-shadow: 0 0 30px var(--support-brain-glow);
     }

     50% {
         transform: translate(-50%, -50%) scale(1.1);
         box-shadow: 0 0 50px var(--support-brain-glow);
     }
 }

 @keyframes pulseBorder {
     0% {
         transform: scale(1);
         opacity: 0.7;
     }

     100% {
         transform: scale(1.5);
         opacity: 0;
     }
 }

 .support-brain-connections {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     transform-style: preserve-3d;
 }

 .support-connection {
     position: absolute;
     top: 50%;
     left: 50%;
     transform-origin: left center;
     z-index: 1;
 }

 .support-connection[data-node="1"] {
     transform: translate(-50%, -50%) rotate(0deg);
 }

 .support-connection[data-node="2"] {
     transform: translate(-50%, -50%) rotate(60deg);
 }

 .support-connection[data-node="3"] {
     transform: translate(-50%, -50%) rotate(120deg);
 }

 .support-connection[data-node="4"] {
     transform: translate(-50%, -50%) rotate(180deg);
 }

 .support-connection[data-node="5"] {
     transform: translate(-50%, -50%) rotate(240deg);
 }

 .support-connection[data-node="6"] {
     transform: translate(-50%, -50%) rotate(300deg);
 }

 .support-connection-line {
     position: absolute;
     top: 0;
     left: 0;
     width: 150px;
     height: 2px;
     background: linear-gradient(90deg, var(--secondary), transparent);
     transform-origin: left center;
 }

 .support-connection-node {
     position: absolute;
     top: 50%;
     left: 150px;
     transform: translate(0, -50%);
     width: 60px;
     height: 60px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 5px;
     border: 1px solid var(--glass-border);
     box-shadow: 0 0 15px var(--support-node-glow);
     animation: floatNode 5s infinite ease-in-out;
     cursor: pointer;
     transition: var(--transition);
     padding: 50px;
 }

 .support-connection-node:hover {
     background: rgba(255, 107, 0, 0.2);
     transform: translate(0, -50%) scale(1.1);
     box-shadow: 0 0 20px var(--support-glow);
 }

 .support-connection-node i {
     font-size: 1.2rem;
     color: var(--light);
 }

 .support-connection-node span {
     font-size: 0.8rem;
     color: var(--light);
     font-weight: 600;
 }

 .support-connection[data-node="1"] .support-connection-node {
     animation-delay: 0s;
 }

 .support-connection[data-node="2"] .support-connection-node {
     animation-delay: 0.8s;
 }

 .support-connection[data-node="3"] .support-connection-node {
     animation-delay: 1.6s;
 }

 .support-connection[data-node="4"] .support-connection-node {
     animation-delay: 2.4s;
 }

 .support-connection[data-node="5"] .support-connection-node {
     animation-delay: 3.2s;
 }

 .support-connection[data-node="6"] .support-connection-node {
     animation-delay: 4s;
 }

 @keyframes floatNode {

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

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

 .support-data-particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
 }

 /* Particles */
 .support-particles-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 0;
 }

 /* Quick Links Section */
 .support-quick-links-section {
     padding: 40px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
     margin-top: -40px;
 }

 .support-quick-links-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
 }

 .support-quick-link {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 16px;
     padding: 25px;
     text-align: center;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     display: flex;
     flex-direction: column;
     align-items: center;
     color: var(--light);
 }

 .support-quick-link:hover {
     transform: translateY(-10px);
     background: rgba(255, 107, 0, 0.1);
     border-color: var(--primary);
     color: var(--light);
 }

 .support-quick-link-icon {
     width: 70px;
     height: 70px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
     color: var(--primary);
     margin-bottom: 15px;
     transition: var(--transition);
 }

 .support-quick-link:hover .support-quick-link-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .support-quick-link h3 {
     font-size: 1.3rem;
     margin-bottom: 10px;
     color: var(--light);
 }

 .support-quick-link p {
     font-size: 0.95rem;
     margin-bottom: 0;
     color: rgba(255, 255, 255, 0.7);
 }

 /* Getting Started Section */
 .support-getting-started-section {
     padding: 80px 0;
     background: var(--dark);
 }

 .support-guides-container {
     display: flex;
     flex-direction: column;
     gap: 30px;
     margin-bottom: 40px;
 }

 .support-guide-card {
     display: flex;
     gap: 30px;
     background: var(--support-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     padding: 30px;
     transition: var(--transition);
 }

 .support-guide-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .support-guide-icon {
     width: 80px;
     height: 80px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     color: var(--primary);
     flex-shrink: 0;
     transition: var(--transition);
 }

 .support-guide-card:hover .support-guide-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .support-guide-content {
     flex: 1;
 }

 .support-guide-content h3 {
     font-size: 1.4rem;
     margin-bottom: 10px;
     color: var(--heading-color);
 }

 .support-guide-content p {
     margin-bottom: 15px;
 }

 .support-guide-list {
     list-style-type: none;
     margin-bottom: 20px;
 }

 .support-guide-list li {
     padding: 5px 0 5px 25px;
     position: relative;
 }

 .support-guide-list li::before {
     content: "\f00c";
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     position: absolute;
     left: 0;
     color: var(--secondary);
 }

 .support-guide-link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: var(--primary);
     font-weight: 600;
 }

 .support-guide-link:hover {
     color: var(--secondary);
 }

 .support-guide-link i {
     transition: var(--transition);
 }

 .support-guide-link:hover i {
     transform: translateX(5px);
 }

 .support-cta-button {
     text-align: center;
     margin-top: 30px;
 }

 /* Popular Topics Section */
 .support-popular-topics-section {
     padding: 80px 0;
     background: var(--gradient-bg);
 }

 .support-topics-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .support-topic-card {
     background: var(--support-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     padding: 30px;
     transition: var(--transition);
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .support-topic-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .support-topic-icon {
     width: 70px;
     height: 70px;
     background: rgba(0, 194, 168, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
     color: var(--secondary);
     margin-bottom: 20px;
     transition: var(--transition);
 }

 .support-topic-card:hover .support-topic-icon {
     background: var(--secondary);
     color: white;
     transform: scale(1.1);
 }

 .support-topic-card h3 {
     font-size: 1.3rem;
     margin-bottom: 10px;
     color: var(--accent-color);
 }

 .support-topic-card p {
     font-size: 0.95rem;
     margin-bottom: 20px;
 }

 .support-topic-articles {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 20px;
     flex: 1;
 }

 .support-topic-article {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 8px;
     transition: var(--transition);
     color: var(--light);
 }

 .support-topic-article:hover {
     background: rgba(255, 107, 0, 0.1);
     transform: translateX(5px);
     color: var(--light);
 }

 .support-topic-article i {
     color: var(--accent);
 }

 .support-topic-link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: var(--primary);
     font-weight: 600;
     margin-top: auto;
 }

 .support-topic-link:hover {
     color: var(--secondary);
 }

 .support-topic-link i {
     transition: var(--transition);
 }

 .support-topic-link:hover i {
     transform: translateX(5px);
 }


 /* Contact Support Section */
 .support-contact-section {
     padding: 80px 0;
     background: var(--dark);
 }

 .support-contact-methods {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     margin-bottom: 50px;
 }

 .support-contact-card {
     background: var(--support-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     padding: 30px;
     text-align: center;
     transition: var(--transition);
 }

 .support-contact-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .support-contact-icon {
     width: 80px;
     height: 80px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     color: var(--primary);
     margin: 0 auto 20px;
     transition: var(--transition);
 }

 .support-contact-card:hover .support-contact-icon {
     background: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .support-contact-card h3 {
     font-size: 1.4rem;
     margin-bottom: 15px;
     color: var(--subheading-color);
 }

 .support-contact-card p {
     margin-bottom: 20px;
 }

 .support-contact-form-container {
     background: var(--support-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     padding: 40px;
     box-shadow: var(--shadow);
 }

 .support-form-header {
     text-align: center;
     margin-bottom: 30px;
 }

 .support-form-header h3 {
     font-size: 1.8rem;
     color: var(--light);
 }


 /* Additional Resources Section */
 .support-resources-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .support-resources-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .support-resource-card {
     background: var(--support-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     padding: 30px;
     transition: var(--transition);
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .support-resource-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .support-resource-icon {
     width: 70px;
     height: 70px;
     background: rgba(0, 194, 168, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
     color: var(--secondary);
     margin-bottom: 20px;
     transition: var(--transition);
 }

 .support-resource-card:hover .support-resource-icon {
     background: var(--secondary);
     color: white;
     transform: scale(1.1);
 }

 .support-resource-card h3 {
     font-size: 1.3rem;
     margin-bottom: 10px;
     color: var(--subheading-color);
 }

 .support-resource-card p {
     font-size: 0.95rem;
     margin-bottom: 20px;
     flex: 1;
 }

 .support-resource-link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: var(--primary);
     font-weight: 600;
     margin-top: auto;
 }

 .support-resource-link:hover {
     color: var(--secondary);
 }

 .support-resource-link i {
     transition: var(--transition);
 }

 .support-resource-link:hover i {
     transform: translateX(5px);
 }

 /* Thank You Section */
 .support-thank-you-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
 }

 .support-thank-you-content {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
     background: var(--support-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     overflow: hidden;
     box-shadow: var(--shadow);
     padding: 40px;
 }

 .support-cta-buttons {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 30px;
 }


 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 /* Responsive Design */
 @media (max-width: 1200px) {
     .support-hero-section .support-container {
         flex-direction: column;
           margin-top: 10%;
           padding: 20px 10px;
     }

     .support-hero-content,
     .support-hero-animation {
         max-width: 100%;
     }

     .support-brain-container {
         margin: 40px auto;
     }
 }

 @media (max-width: 992px) {
     .support-hero-title {
         font-size: 3rem;
     }

     .support-guide-card {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .support-guide-list li {
         text-align: left;
     }

     .support-form-row {
         flex-direction: column;
     }
 }

 @media (max-width: 768px) {
     .support-hero-title {
         font-size: 2.5rem;
     }

     .support-cta-buttons {
         flex-direction: column;
     }
 }

 @media (max-width: 480px) {
     .support-hero-title {
         font-size: 2rem;
     }

     .support-section-header h2 {
         font-size: 1.8rem;
     }
 }

 /* Help Center Page End */


 /* Terms of service page Start */

 /* Hero Section */
 .terms-hero-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
     background: linear-gradient(to bottom, rgba(10, 17, 40, 0.5), rgba(18, 26, 46, 0.5));
 }

 .terms-hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/termbg.gif') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.5;
     filter: blur(7px);
     transform: scale(1.1);
     z-index: -1;
 }

 .terms-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     position: relative;
     z-index: 1;
 }

 .terms-hero-content {
     flex: 1;
     max-width: 600px;
 }

 .terms-hero-title {
     color: var(--heading-color);
     font-size: 3.5rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out;
 }

 .terms-hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease-out 0.2s forwards;
     opacity: 0;
 }

 .terms-hero-description {
     font-size: 1.1rem;
     margin-bottom: 30px;
     animation: fadeInUp 1s ease-out 0.4s forwards;
     opacity: 0;
 }

 .terms-hero-cta {
     display: flex;
     text-align: center;
     gap: 20px;
     animation: fadeInUp 1s ease-out 0.6s forwards;
     opacity: 0;
 }

 /* Hero Animation - Contract and Signature */
 .terms-hero-animation {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .terms-contract-container {
     position: relative;
     width: 400px;
     height: 400px;
     perspective: 1000px;
     animation: fadeIn 1s ease-out;
 }

 .terms-contract {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotateX(20deg);
     width: 250px;
     height: 350px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
     border: 1px solid var(--glass-border);
     padding: 20px;
     box-shadow: 0 0 30px var(--terms-contract-glow);
     animation: floatContract 5s infinite ease-in-out;
     z-index: 2;
 }

 @keyframes floatContract {

     0%,
     100% {
         transform: translate(-50%, -50%) rotateX(20deg);
     }

     50% {
         transform: translate(-50%, -50%) rotateX(20deg) translateY(-15px);
     }
 }

 .terms-contract-header {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-bottom: 20px;
     border-bottom: 1px solid var(--glass-border);
     padding-bottom: 10px;
 }

 .terms-contract-title {
     font-size: 1.2rem;
     font-weight: 700;
     color: var(--primary);
     margin-bottom: 5px;
 }

 .terms-contract-date {
     font-size: 0.8rem;
     color: var(--secondary);
 }

 .terms-contract-content {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .terms-contract-line {
     height: 8px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
     width: 100%;
 }

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

 .terms-contract-line:nth-child(4) {
     width: 90%;
 }

 .terms-contract-line:nth-child(6) {
     width: 70%;
 }

 .terms-contract-signature {
     margin-top: 30px;
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .terms-signature-line {
     height: 2px;
     background: rgba(255, 255, 255, 0.3);
     width: 70%;
 }

 .terms-signature-text {
     font-size: 0.8rem;
     color: rgba(255, 255, 255, 0.5);
 }

 /* Digital Signature */
 .terms-digital-signature {
     position: absolute;
     bottom: 30%;
     right: 20%;
     width: 80px;
     height: 80px;
     z-index: 3;
 }

 .terms-signature-pulse {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: radial-gradient(circle at center, rgba(0, 161, 224, 0.3), transparent 70%);
     animation: pulseSignature 2s infinite;
 }

 @keyframes pulseSignature {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.5;
     }

     50% {
         transform: scale(1.3);
         opacity: 0.8;
     }
 }

 .terms-signature-icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 2rem;
     color: var(--accent);
     animation: floatSignature 3s infinite ease-in-out;
 }

 @keyframes floatSignature {

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

     50% {
         transform: translate(-50%, -60%);
     }
 }

 /* Floating Elements */
 .terms-floating-elements {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .terms-floating-element {
     position: absolute;
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--light);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     animation: floatElement 5s infinite ease-in-out;
 }

 .terms-floating-element[data-icon="handshake"] {
     top: 20%;
     left: 10%;
     animation-delay: 0s;
     color: var(--primary);
 }

 .terms-floating-element[data-icon="lock"] {
     top: 70%;
     left: 15%;
     animation-delay: 1s;
     color: var(--secondary);
 }

 .terms-floating-element[data-icon="check"] {
     top: 30%;
     right: 10%;
     animation-delay: 2s;
     color: var(--accent);
 }

 .terms-floating-element[data-icon="file"] {
     top: 60%;
     right: 15%;
     animation-delay: 3s;
     color: var(--light);
 }

 @keyframes floatElement {

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

     50% {
         transform: translateY(-20px);
     }
 }

 /* Data Streams */
 .terms-data-streams {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 .terms-data-stream {
     position: absolute;
     width: 150px;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--secondary), transparent);
     opacity: 0.6;
 }

 .terms-data-stream:nth-child(1) {
     top: 30%;
     left: 0;
     animation: moveDataStream 3s linear infinite;
 }

 .terms-data-stream:nth-child(2) {
     top: 50%;
     left: 0;
     animation: moveDataStream 3s linear infinite 1s;
 }

 .terms-data-stream:nth-child(3) {
     top: 70%;
     left: 0;
     animation: moveDataStream 3s linear infinite 2s;
 }

 @keyframes moveDataStream {
     0% {
         left: -150px;
         opacity: 0;
     }

     10% {
         opacity: 0.6;
     }

     90% {
         opacity: 0.6;
     }

     100% {
         left: 100%;
         opacity: 0;
     }
 }

 /* Particles */
 .terms-particles-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     z-index: 0;
 }

 /* Quick Navigation Section */
 .terms-quick-nav-section {
     padding: 80px 0 40px;
     background: linear-gradient(to bottom, var(--dark-alt), var(--dark));
 }

 .terms-quick-nav-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin-bottom: 40px;
 }

 .terms-quick-nav-item {
     display: flex;
     align-items: center;
     gap: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     padding: 20px;
     transition: var(--transition);
     border: 1px solid var(--glass-border);
     color: var(--light);
 }

 .terms-quick-nav-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 107, 0, 0.1);
     border-color: var(--primary);
     color: var(--light);
 }

 .terms-quick-nav-number {
     width: 40px;
     height: 40px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     font-weight: 700;
     color: var(--primary);
     flex-shrink: 0;
     transition: var(--transition);
 }

 .terms-quick-nav-icon {
     width: 40px;
     height: 40px;
     background: rgba(0, 194, 168, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     color: var(--secondary);
     flex-shrink: 0;
     transition: var(--transition);
 }

 .terms-quick-nav-item:hover .terms-quick-nav-number,
 .terms-quick-nav-item:hover .terms-quick-nav-icon {
     background: var(--primary);
     color: white;
 }

 .terms-quick-nav-content {
     flex: 1;
 }

 .terms-quick-nav-content h3 {
     font-size: 1.1rem;
     margin-bottom: 5px;
     color: var(--subheading-color);
 }

 .terms-quick-nav-content p {
     font-size: 0.9rem;
     margin-bottom: 0;
     color: rgba(255, 255, 255, 0.7);
 }

 .terms-print-item {
     background: rgba(0, 194, 168, 0.1);
     border-color: var(--secondary);
 }

 .terms-print-item:hover {
     background: rgba(0, 194, 168, 0.2);
     border-color: var(--secondary);
 }

 .terms-print-item:hover .terms-quick-nav-icon {
     background: var(--secondary);
 }

 /* Terms Section */
 .terms-section {
     padding: 60px 0;
 }

 .terms-section:nth-child(odd) {
     background: var(--dark);
 }

 .terms-section:nth-child(even) {
     background: var(--gradient-bg);
     background-image: url('../img/termsinfobg.jpg');
 }


 .terms-content-card {
     background: var(--terms-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     padding: 40px;
     box-shadow: var(--shadow);
     transition: var(--transition);
     backdrop-filter: blur(20px);
 }

 .terms-content-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border-color: var(--primary);
 }

 .terms-content-card h3 {
     font-size: 1.4rem;
     color: var(--accent-color);
     margin-top: 30px;
     margin-bottom: 15px;
 }

 .terms-content-card h3:first-child {
     margin-top: 0;
 }

 .terms-bullet-list {
     list-style-type: none;
     margin: 20px 0;
     padding-left: 20px;
 }

 .terms-bullet-list li {
     position: relative;
     padding-left: 25px;
     margin-bottom: 10px;
 }

 .terms-bullet-list li::before {
     content: "\f00c";
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     position: absolute;
     left: 0;
     color: var(--primary);
 }

 /* Contact Information */
 .terms-contact-info {
     display: flex;
     flex-direction: column;
     gap: 20px;
     margin-top: 30px;
 }

 .terms-contact-item {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 15px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
     transition: var(--transition);
 }

 .terms-contact-item:hover {
     background: rgba(255, 107, 0, 0.1);
     transform: translateX(10px);
 }

 .terms-contact-icon {
     width: 50px;
     height: 50px;
     background: rgba(255, 107, 0, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--primary);
     flex-shrink: 0;
 }

 .terms-contact-text h3 {
     font-size: 1.2rem;
     margin: 0 0 5px;
     color: var(--light);
 }

 .terms-contact-text p {
     margin: 0;
     font-size: 1rem;
 }

 /* Conclusion Section */
 .terms-conclusion-section {
     padding: 80px 0;
     background: linear-gradient(to bottom, var(--dark), var(--dark-alt));
 }

 .terms-conclusion-content {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
     background: var(--terms-form-bg);
     border-radius: 16px;
     border: 1px solid var(--glass-border);
     overflow: hidden;
     box-shadow: var(--shadow);
     padding: 40px;
 }

 .terms-conclusion-cta {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 30px;
 }

 .terms-last-updated {
     margin-top: 30px;
     font-size: 0.9rem;
     color: rgba(255, 255, 255, 0.6);
 }


 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

 /* Responsive Design */
 @media (max-width: 1200px) {
     .terms-container {
         flex-direction: column;
         margin-top: 10%;
         padding: 20px 10px;
     }

     .terms-hero-content,
     .terms-hero-animation {
         max-width: 100%;
         text-align: center;
     }

     .terms-contract-container {
         margin: 40px auto;
     }
 }

 @media (max-width: 992px) {
     .terms-hero-title {
         font-size: 3rem;
     }

     .terms-contact-info {
         flex-direction: column;
     }
 }

 @media (max-width: 768px) {
     .terms-hero-title {
         font-size: 2.5rem;
     }

     .terms-hero-cta {
         flex-direction: column;
     }

     .terms-conclusion-cta {
         flex-direction: column;
     }
 }

 @media (max-width: 480px) {
     .terms-hero-title {
         font-size: 2.5rem;
     }

     .terms-section-header h2 {
         font-size: 1.8rem;
     }
 }

 /* Terms of service page End */



 /* Privacy Policy page Start  */


 /* Hero Section */
 .privacy-hero {
     min-height: 70vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     padding: 80px 0;
     z-index: 0;
 }

 .privacy-hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../img/privacybg.jpg') center/cover no-repeat;
     background-attachment: fixed;
     opacity: 0.3;
     filter: blur(10px);
     transform: scale(1.1);
     z-index: -1;
 }

 .privacy-hero__content {
     text-align: center;
     z-index: 10;
     max-width: 800px;
     padding: 0 20px;
 }

 .privacy-hero__title {
     font-size: 3.5rem;
     margin-bottom: 20px;
     color: var(--heading-color);
     text-shadow: 0 0 20px rgba(0, 194, 255, 0.3);
 }

 .privacy-hero__subtitle {
     font-size: 1.2rem;
     color: var(--accent-color);
     margin-bottom: 30px;
 }

 .particles-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .privacy-hero__animation {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 2;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* Privacy Shield Animation */
 .privacy-shield {
     position: relative;
     width: 300px;
     height: 300px;
     opacity: 0.2;
 }

 .shield-outer {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 200px;
     height: 240px;
     background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     border-radius: 100px 100px 10px 10px;
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
     box-shadow: 0 0 30px var(--glow-color);
     animation: pulse 3s infinite alternate;
 }

 .shield-inner {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 160px;
     height: 200px;
     background: var(--darker-bg);
     border-radius: 80px 80px 8px 8px;
     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
 }

 .lock {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 100px;
 }

 .lock-body {
     position: absolute;
     bottom: 0;
     width: 80px;
     height: 60px;
     background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
     border-radius: 10px;
     box-shadow: 0 0 15px var(--glow-color);
 }

 .lock-shackle {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 40px;
     height: 50px;
     border: 10px solid var(--primary-color);
     border-bottom: none;
     border-radius: 20px 20px 0 0;
     box-shadow: 0 0 15px var(--glow-color);
 }

 .data-particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .data-particles::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     background-image: radial-gradient(circle, var(--primary-color) 1px, transparent 1px),
         radial-gradient(circle, var(--accent-color) 1px, transparent 1px);
     background-size: 20px 20px;
     background-position: 0 0, 10px 10px;
     animation: particleMove 20s linear infinite;
 }

 /* Add this to the end of your privacy.css file to style the data particles */
 .data-particle {
     position: absolute;
     color: var(--primary-color);
     font-family: monospace;
     font-size: 12px;
     opacity: 0.7;
     animation: floatUp 5s linear infinite;
     text-shadow: 0 0 5px var(--glow-color);
 }

 @keyframes floatUp {
     0% {
         transform: translateY(0) rotate(0deg);
         opacity: 0;
     }

     10% {
         opacity: 0.7;
     }

     90% {
         opacity: 0.7;
     }

     100% {
         transform: translateY(-100px) rotate(360deg);
         opacity: 0;
     }
 }

 /* Add pulse animation for the shield */
 .privacy-shield.pulse .shield-outer {
     animation: shieldPulse 2s infinite alternate;
 }

 @keyframes shieldPulse {
     0% {
         box-shadow: 0 0 20px var(--glow-color);
     }

     100% {
         box-shadow: 0 0 50px var(--glow-color), 0 0 70px rgba(0, 194, 255, 0.2);
     }
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 0 20px var(--glow-color);
     }

     100% {
         box-shadow: 0 0 40px var(--glow-color), 0 0 60px rgba(0, 194, 255, 0.3);
     }
 }

 @keyframes particleMove {
     0% {
         background-position: 0 0, 10px 10px;
     }

     100% {
         background-position: 500px 500px, 510px 510px;
     }
 }

 /* Quick Links Section */
 .privacy-nav {
     background-color: var(--dark-bg);
     padding: 60px 0;
     text-align: center;
 }

 .privacy-nav__title {
     font-size: 2rem;
     margin-bottom: 30px;
     color: var(--primary-color);
 }

 .privacy-nav__grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin-top: 30px;
 }

 .privacy-nav__link {
     background-color: rgba(0, 26, 51, 0.7);
     border-radius: var(--border-radius);
     padding: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
     transition: all var(--transition-speed);
     border: 1px solid rgba(0, 194, 255, 0.1);
 }

 .privacy-nav__link:hover {
     transform: translateY(-5px);
     background-color: rgba(0, 26, 51, 0.9);
     border-color: var(--primary-color);
     box-shadow: 0 5px 15px rgba(0, 194, 255, 0.2);
 }

 .privacy-nav__link i {
     font-size: 2rem;
     color: var(--primary-color);
 }

 .privacy-nav__link span {
     font-weight: 500;
     color: var(--light-text);
 }

 /* Main Content */
 .privacy-content {
     padding: 60px 0;
     background-color: var(--darker-bg);
 }

 .privacy-intro {
     font-size: 1.1rem;
     line-height: 1.8;
     margin-bottom: 50px;
     padding: 30px;
     background-color: rgba(0, 26, 51, 0.5);
     border-radius: var(--border-radius);
     border-left: 4px solid var(--primary-color);
 }

 .privacy-section {
     margin-bottom: 60px;
     padding: 30px;
     background-color: rgba(0, 26, 51, 0.3);
     border-radius: var(--border-radius);
     transition: all var(--transition-speed);
     border: 2px solid var(--glass-border);
 }

 .privacy-section:hover {
     background-color: rgba(0, 26, 51, 0.5);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .privacy-section__header {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 25px;
     padding-bottom: 15px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .privacy-section__icon {
     width: 50px;
     height: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     border-radius: 50%;
     font-size: 1.5rem;
     color: var(--darker-bg);
     box-shadow: 0 0 15px rgba(0, 194, 255, 0.3);
 }

 .privacy-section__title {
     font-size: 1.8rem;
     color: var(--heading-color);
     margin-bottom: 0;
 }

 .privacy-section__content {
     padding-left: 65px;
 }

 .privacy-section__subtitle {
     font-size: 1.4rem;
     color: var(--primary-color);
     margin: 25px 0 15px;
 }

 .privacy-section__content p {
     margin-bottom: 15px;
     line-height: 1.7;
 }

 .privacy-list {
     margin: 20px 0;
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .privacy-list li strong {
     color: var(--accent);
 }

 .privacy-list li {
        flex-wrap: wrap;
     display: flex;
     align-items: flex-start;
     gap: 10px;
     color: var(--light);
 }

 .privacy-list li i {
     color: var(--primary-color);
     margin-top: 3px;
 }

 /* Visual Elements */
 .privacy-visual {
     margin: 40px 0;
     padding: 30px;
     background-color: rgba(0, 26, 51, 0.7);
     border-radius: var(--border-radius);
     text-align: center;
 }

 .privacy-visual__caption {
     margin-top: 20px;
     font-style: italic;
     color: var(--light);
 }

 /* Data Flow Visualization */
 .data-flow {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 15px;
 }

 .data-point {
     width: 80px;
     height: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     font-size: 2rem;
     transition: all var(--transition-speed);
 }

 .data-flow__arrow {
     font-size: 1.5rem;
     color: var(--primary-color);
 }

 .user-data {
     background: linear-gradient(135deg, #4a00e0, #8e2de2);
     color: white;
 }

 .collection {
     background: linear-gradient(135deg, #2193b0, #6dd5ed);
     color: white;
 }

 .processing {
     background: linear-gradient(135deg, #f12711, #f5af19);
     color: white;
 }

 .security {
     background: linear-gradient(135deg, #11998e, #38ef7d);
     color: white;
 }

 /* Sharing Visualization */
 .sharing-visual {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px 0;
 }

 .sharing-entity {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     padding: 15px;
     border-radius: 50%;
     width: 100px;
     height: 100px;
     justify-content: center;
     transition: all var(--transition-speed);
 }

 .sharing-entity i {
     font-size: 2rem;
 }

 .sharing-entity span {
     font-size: 0.8rem;
     text-align: center;
 }

 .us {
     background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     color: white;
     z-index: 2;
 }

 .sharing-connections {
     display: flex;
     justify-content: space-around;
     width: 100%;
     margin-top: 30px;
 }

 .connection {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
 }

 .connection-line {
     width: 2px;
     height: 50px;
     background-color: var(--primary-color);
     margin-bottom: 10px;
 }

 .connection-entity {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     padding: 15px;
     border-radius: 50%;
     width: 80px;
     height: 80px;
     justify-content: center;
     transition: all var(--transition-speed);
 }

 .service-providers .connection-entity {
     background: linear-gradient(135deg, #4a00e0, #8e2de2);
     color: white;
 }

 .legal .connection-entity {
     background: linear-gradient(135deg, #f12711, #f5af19);
     color: white;
 }

 .business .connection-entity {
     background: linear-gradient(135deg, #11998e, #38ef7d);
     color: white;
 }

 .connection-entity i {
     font-size: 1.5rem;
 }

 .connection-entity span {
     font-size: 0.7rem;
     text-align: center;
 }

 /* Security Measures */
 .security-grid {
     display: flex;

     gap: 20px;
     padding-left: 0 !important;
 }

 .security-item {
     display: flex;
     flex-direction: column;
     margin: auto;
     justify-content: center;
     align-items: flex-start;
     gap: 15px;
     padding: 20px;
     background-color: rgba(0, 26, 51, 0.5);
     border-radius: var(--border-radius);
     border-radius: var(--glass-border);
     transition: all var(--transition-speed);
 }

 .security-item:hover {
     background-color: rgba(0, 26, 51, 0.7);
     transform: translateY(-5px);
 }

 .security-item i {
     width: 50px;
     height: 50px;
     padding: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     border-radius: 50%;
     font-size: 1.5rem;
     color: var(--darker-bg);
 }


 .security-note {
     margin-top: 30px;
     padding: 15px;
     background-color: rgba(255, 193, 7, 0.1);
     border-left: 4px solid #ffc107;
     border-radius: var(--border-radius);
 }

 /* Rights Grid */
 .rights-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin-top: 30px;
 }

 .rights-card {
     padding: 25px;
     background-color: rgba(0, 26, 51, 0.5);
     border-radius: var(--border-radius);
     transition: all var(--transition-speed);
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }

 .rights-card:hover {
     background-color: rgba(0, 26, 51, 0.7);
     transform: translateY(-5px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .rights-card__icon {
     width: 60px;
     height: 60px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     border-radius: 50%;
     font-size: 1.5rem;
     color: var(--darker-bg);
     margin-bottom: 20px;
 }

 .rights-card .privacy-section__subtitle {
     font-size: 1.2rem;
     margin-bottom: 15px;
     color: var(--primary-color);
 }

 /* Contact Info */
 .contact-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
     margin-top: 30px;
 }

 .contact-card {
     display: flex;
     align-items: center;
     gap: 15px;
     padding: 20px;
     background-color: rgba(0, 26, 51, 0.5);
     border-radius: var(--border-radius);
     transition: all var(--transition-speed);
 }

 .contact-card:hover {
     background-color: rgba(0, 26, 51, 0.7);
     transform: translateY(-5px);
 }

 .contact-card__icon {
     width: 50px;
     height: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     border-radius: 50%;
     font-size: 1.5rem;
     color: var(--darker-bg);
 }

 .contact-card__content h4 {
     font-size: 1.2rem;
     margin-bottom: 5px;
     color: var(--primary-color);
 }

 /* Conclusion Section */
 .privacy-conclusion {
     background-color: var(--dark-bg);
     padding: 60px 0;
     text-align: center;
 }

 .privacy-conclusion p {
     font-size: 1.2rem;
     max-width: 800px;
     margin: 0 auto 30px;
 }

 .privacy-cta {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .privacy-cta__button {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 25px;
     background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     color: white;
     border-radius: 30px;
     font-weight: 600;
     transition: all var(--transition-speed);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .privacy-cta__button:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
     color: white;
 }


 /* Responsive Styles */
 @media (max-width: 1024px) {
     .privacy-hero__title {
         font-size: 3rem;
     }

     .privacy-section__content {
         padding-left: 30px;
     }
 }

 @media (max-width: 768px) {
     .privacy-hero {
         height: 400px;
     }
      .privacy-visual {
     display: none;
 }


     .privacy-hero__title {
         font-size: 2.5rem;
     }

     .privacy-shield {
         width: 200px;
         height: 200px;
     }

     .shield-outer {
         width: 150px;
         height: 180px;
     }

     .shield-inner {
         width: 120px;
         height: 150px;
     }

     .lock {
         width: 60px;
         height: 80px;
     }

     .lock-body {
         width: 60px;
         height: 45px;
     }

     .lock-shackle {
         width: 30px;
         height: 40px;
         border-width: 8px;
     }

     .privacy-section__header {
         flex-direction: column;
         text-align: center;
         gap: 10px;
     }

     .privacy-section__content {
         padding-left: 0;
     }

     .security-item,
     .contact-card {
         flex-direction: column;
         text-align: center;
     }

     .security-item__icon,
     .contact-card__icon {
         margin: 0 auto 15px;
     }

     .privacy-cta {
         flex-direction: column;
         align-items: center;
     }

     .data-flow {
         flex-direction: column;
     }

     .data-flow__arrow {
         transform: rotate(90deg);
         margin: 10px 0;
     }

     .sharing-connections {
         flex-direction: column;
         gap: 30px;
     }

     .connection-line {
         height: 30px;
     }
 }

 @media (max-width: 480px) {
     .privacy-hero__title {
         font-size: 2rem;
     }

     .privacy-hero__subtitle {
         font-size: 1rem;
     }

     .privacy-shield {
         width: 150px;
         height: 150px;
     }

     .shield-outer {
         width: 120px;
         height: 150px;
     }

     .shield-inner {
         width: 90px;
         height: 120px;
     }

     .privacy-nav__grid,
     .rights-grid,
     .contact-grid {
         grid-template-columns: 1fr;
     }


     .privacy-section {
         padding: 20px 15px;
     }

     .privacy-section__title {
         font-size: 1.5rem;
     }

     .privacy-section__subtitle {
         font-size: 1.2rem;
     }
 }

 /* Privacy Policy page End */