.elementor-292 .elementor-element.elementor-element-94b85e8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-292 .elementor-element.elementor-element-cb01308{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.22);overflow:visible;}.elementor-292 .elementor-element.elementor-element-cb01308:not(.elementor-motion-effects-element-type-background), .elementor-292 .elementor-element.elementor-element-cb01308 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-292 .elementor-element.elementor-element-3e68b04{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -16px) 0px;font-family:"Poppins", Sans-serif;font-size:13px;font-weight:400;color:#000000;}.elementor-292 .elementor-element.elementor-element-3e68b04 a{color:#2E22FD;}.elementor-292 .elementor-element.elementor-element-3e68b04 a:hover, .elementor-292 .elementor-element.elementor-element-3e68b04 a:focus{color:#2E22FD;}.elementor-292 .elementor-element.elementor-element-0758d94{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;overflow:visible;}.elementor-widget-theme-post-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-292 .elementor-element.elementor-element-3a75d22 .elementor-heading-title{font-family:"Lora", Sans-serif;font-size:36px;font-weight:600;color:#000000;}.elementor-292 .elementor-element.elementor-element-389a016{color:#000000;}.elementor-292 .elementor-element.elementor-element-88430d8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.7;--padding-top:8px;--padding-bottom:8px;--padding-left:8px;--padding-right:8px;overflow:visible;}.elementor-292 .elementor-element.elementor-element-88430d8:not(.elementor-motion-effects-element-type-background), .elementor-292 .elementor-element.elementor-element-88430d8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://kapricorp.com/wp-content/uploads/2026/01/img3.jpg");}.elementor-292 .elementor-element.elementor-element-88430d8::before, .elementor-292 .elementor-element.elementor-element-88430d8 > .elementor-background-video-container::before, .elementor-292 .elementor-element.elementor-element-88430d8 > .e-con-inner > .elementor-background-video-container::before, .elementor-292 .elementor-element.elementor-element-88430d8 > .elementor-background-slideshow::before, .elementor-292 .elementor-element.elementor-element-88430d8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-292 .elementor-element.elementor-element-88430d8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-292 .elementor-element.elementor-element-1c3141f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-widget-table-of-contents{--header-color:var( --e-global-color-secondary );--item-text-color:var( --e-global-color-text );--item-text-hover-color:var( --e-global-color-accent );--marker-color:var( --e-global-color-text );}.elementor-widget-table-of-contents .elementor-toc__header, .elementor-widget-table-of-contents .elementor-toc__header-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-table-of-contents .elementor-toc__list-item{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-292 .elementor-element.elementor-element-9b9c909{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--box-border-width:0px;--box-border-radius:0px;--separator-width:0px;--box-padding:5px;--header-color:#FFFFFF;--item-text-color:#FFFFFF;--item-text-hover-color:#FFFFFF;--item-text-hover-decoration:underline;--item-text-active-color:#FFFFFF;--marker-color:#FFFFFF;}.elementor-292 .elementor-element.elementor-element-9b9c909 .elementor-toc__header-title{text-align:start;}.elementor-292 .elementor-element.elementor-element-47a1f92{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-292 .elementor-element.elementor-element-e6edfbe .elementor-button{background-color:transparent;fill:#FFFFFF;color:#FFFFFF;background-image:linear-gradient(180deg, #DD000E 0%, #AA000B 100%);border-radius:22px 22px 22px 22px;}.elementor-292 .elementor-element.elementor-element-e6edfbe .elementor-button:hover, .elementor-292 .elementor-element.elementor-element-e6edfbe .elementor-button:focus{color:#FFFFFF;}.elementor-292 .elementor-element.elementor-element-e6edfbe .elementor-button:hover svg, .elementor-292 .elementor-element.elementor-element-e6edfbe .elementor-button:focus svg{fill:#FFFFFF;}.elementor-292 .elementor-element.elementor-element-0f8408c .elementor-button{background-color:transparent;background-image:linear-gradient(180deg, #DD000E 0%, #AA000B 100%);border-radius:22px 22px 22px 22px;}.elementor-292 .elementor-element.elementor-element-79fe81d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-292 .elementor-element.elementor-element-b0a7d93{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-292 .elementor-element.elementor-element-296c011{color:#000000;}.elementor-292 .elementor-element.elementor-element-850334e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.85;overflow:visible;}.elementor-292 .elementor-element.elementor-element-850334e:not(.elementor-motion-effects-element-type-background), .elementor-292 .elementor-element.elementor-element-850334e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://kapricorp.com/wp-content/uploads/2026/01/bg-wave-shape1.webp");}.elementor-292 .elementor-element.elementor-element-850334e::before, .elementor-292 .elementor-element.elementor-element-850334e > .elementor-background-video-container::before, .elementor-292 .elementor-element.elementor-element-850334e > .e-con-inner > .elementor-background-video-container::before, .elementor-292 .elementor-element.elementor-element-850334e > .elementor-background-slideshow::before, .elementor-292 .elementor-element.elementor-element-850334e > .e-con-inner > .elementor-background-slideshow::before, .elementor-292 .elementor-element.elementor-element-850334e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#F1F1F1;--background-overlay:'';}.elementor-292 .elementor-element.elementor-element-2975fb2{color:#000000;}.elementor-292 .elementor-element.elementor-element-8270f4b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-292 .elementor-element.elementor-element-5de3dc8{color:#000000;}.elementor-292 .elementor-element.elementor-element-a18758b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-292 .elementor-element.elementor-element-d03273a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:19px;--margin-bottom:19px;--margin-left:19px;--margin-right:19px;--padding-top:12px;--padding-bottom:12px;--padding-left:12px;--padding-right:12px;overflow:visible;}.elementor-292 .elementor-element.elementor-element-ae6acfb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-292 .elementor-element.elementor-element-40e1716{font-family:"Poppins", Sans-serif;font-weight:400;color:#000000;}@media(min-width:768px){.elementor-292 .elementor-element.elementor-element-cb01308{--content-width:1400px;}.elementor-292 .elementor-element.elementor-element-0758d94{--content-width:1400px;}.elementor-292 .elementor-element.elementor-element-88430d8{--content-width:1400px;}.elementor-292 .elementor-element.elementor-element-1c3141f{--width:60%;}.elementor-292 .elementor-element.elementor-element-79fe81d{--width:40%;}.elementor-292 .elementor-element.elementor-element-b0a7d93{--content-width:1400px;}.elementor-292 .elementor-element.elementor-element-850334e{--content-width:1400px;}.elementor-292 .elementor-element.elementor-element-8270f4b{--content-width:1400px;}.elementor-292 .elementor-element.elementor-element-a18758b{--content-width:1400px;}.elementor-292 .elementor-element.elementor-element-d03273a{--width:50%;}.elementor-292 .elementor-element.elementor-element-ae6acfb{--width:50%;}}/* Start custom CSS for text-editor, class: .elementor-element-389a016 *//* Hero Section */ .kapri-hero-section { position: relative; overflow: hidden; display: flex; align-items: center; } /* Animated Background */ .kapri-hero-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 0; } /* Tech grid */ .tech-grid { position: absolute; width: 100%; height: 100%; background-image: linear-gradient(rgba(220, 38, 38, 0.04) 2px, transparent 2px), linear-gradient(90deg, rgba(220, 38, 38, 0.04) 2px, transparent 2px); background-size: 100px 100px; animation: gridSlide 30s linear infinite; transform: perspective(500px) rotateX(60deg); transform-origin: center bottom; } @keyframes gridSlide { from { transform: perspective(500px) rotateX(60deg) translateY(0); } to { transform: perspective(500px) rotateX(60deg) translateY(100px); } } /* Radar circles */ .radar-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid rgba(220, 38, 38, 0.1); border-radius: 50%; animation: radarPulse 4s infinite ease-out; } .radar-circle:nth-child(2) { width: 300px; height: 300px; animation-delay: 0s; } .radar-circle:nth-child(3) { width: 500px; height: 500px; animation-delay: 1.3s; } .radar-circle:nth-child(4) { width: 700px; height: 700px; animation-delay: 2.6s; } @keyframes radarPulse { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 50% { opacity: 0.3; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } /* Scanning line */ .scan-beam { position: absolute; top: 50%; left: 50%; width: 2px; height: 300px; background: linear-gradient(180deg, transparent, rgba(220, 38, 38, 0.4), transparent); transform-origin: top center; animation: beamRotate 8s linear infinite; } @keyframes beamRotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Floating particles */ .particle-hero { position: absolute; width: 3px; height: 3px; background: #dc2626; border-radius: 50%; box-shadow: 0 0 8px rgba(220, 38, 38, 0.6); animation: particleRise 15s infinite ease-in-out; } .particle-hero:nth-child(5) { left: 10%; animation-delay: 0s; } .particle-hero:nth-child(6) { left: 25%; animation-delay: 3s; } .particle-hero:nth-child(7) { left: 50%; animation-delay: 6s; } .particle-hero:nth-child(8) { left: 75%; animation-delay: 9s; } .particle-hero:nth-child(9) { left: 90%; animation-delay: 12s; } @keyframes particleRise { 0% { bottom: 0; opacity: 0; transform: scale(0); } 25% { opacity: 1; transform: scale(1); } 100% { bottom: 100%; opacity: 0; transform: scale(1.5); } } /* Glowing orbs */ .glow-orb-hero { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(220, 38, 38, 0.15), transparent 70%); filter: blur(60px); animation: orbFloat 10s infinite ease-in-out; } .glow-orb-hero:nth-child(10) { width: 400px; height: 400px; top: -100px; right: 10%; } .glow-orb-hero:nth-child(11) { width: 350px; height: 350px; bottom: -100px; left: 15%; animation-delay: 5s; } @keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, -50px) scale(1.2); } } .kapri-hero-container { max-width: 1400px; margin: 0 auto; padding: 0 10px; position: relative; z-index: 1; width: 100%; } /* Hero Content */ .kapri-hero-content { margin: 0 auto; text-align: center; animation: heroFadeIn 1.5s ease-out; } @keyframes heroFadeIn { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } /* Badge */ .kapri-hero-badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 30px; background: rgba(220, 38, 38, 0.1); border: 2px solid #dc2626; border-radius: 50px; margin-bottom: 30px; animation: badgeGlow 2s infinite; } @keyframes badgeGlow { 0%, 100% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.3); } 50% { box-shadow: 0 0 40px rgba(220, 38, 38, 0.5); } } .badge-icon { font-size: 24px; animation: iconPulse 1.5s infinite; } @keyframes iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .badge-text { font-size: 13px; font-weight: 700; color: #dc2626; letter-spacing: 3px; text-transform: uppercase; } /* Main Title */ .kapri-hero-title { font-size: 28px; font-weight: 700; color: #1a1a1a; line-height: 1.2; margin-bottom: 30px; animation: titleAppear 1s ease-out 0.3s both; } @keyframes titleAppear { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .kapri-hero-highlight { background: linear-gradient(135deg, #dc2626, #ff4444); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; animation: gradientShift 3s infinite; } @keyframes gradientShift { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(10deg); } } /* Subtitle */ .kapri-hero-subtitle { font-size: 20px; line-height: 1.8; color: #555555; margin: 0 auto 40px; animation: subtitleAppear 1s ease-out 0.6s both; } @keyframes subtitleAppear { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .kapri-hero-subtitle strong { color: #1a1a1a; font-weight: 700; } /* Description Box */ .kapri-hero-description { margin: 0 auto 50px; padding: 35px 40px; background: #ffffff; backdrop-filter: blur(10px); border: 2px solid rgba(220, 38, 38, 0.15); border-radius: 20px; text-align: left; animation: descriptionAppear 1s ease-out 0.9s both; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(220, 38, 38, 0.1); } @keyframes descriptionAppear { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .kapri-hero-description::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.05), transparent); animation: boxShimmer 3s infinite; } @keyframes boxShimmer { 0%, 100% { left: -100%; } 50% { left: 100%; } } .kapri-hero-description p { font-size: 17px; line-height: 1.9; color: #333333; position: relative; z-index: 1; } .kapri-hero-description p:first-child { margin-bottom: 20px; } .kapri-hero-description strong { color: #dc2626; font-weight: 700; } /* Tags */ .kapri-hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 50px; animation: tagsAppear 1s ease-out 1.2s both; } @keyframes tagsAppear { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hero-tag { padding: 12px 25px; background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.2); border-radius: 50px; color: #1a1a1a; font-size: 14px; font-weight: 600; transition: all 0.3s ease; } .hero-tag:hover { background: #dc2626; color: #ffffff; border-color: #dc2626; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3); } /* CTA Buttons */ .kapri-hero-cta { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; animation: ctaAppear 1s ease-out 1.5s both; } @keyframes ctaAppear { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .cta-button { padding: 18px 40px; font-size: 18px; font-weight: 700; text-decoration: none; border-radius: 50px; transition: all 0.4s ease; position: relative; overflow: hidden; } .cta-button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transform: translate(-50%, -50%); transition: width 0.5s, height 0.5s; } .cta-button:hover::before { width: 400px; height: 400px; } .cta-button span { position: relative; z-index: 1; } .cta-primary { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #ffffff; border: 2px solid transparent; box-shadow: 0 10px 30px rgba(220, 38, 38, 0.4); } .cta-primary:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(220, 38, 38, 0.6); } .cta-secondary { background: transparent; color: #1a1a1a; border: 2px solid #dc2626; } .cta-secondary:hover { background: #dc2626; color: #ffffff; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(220, 38, 38, 0.4); } /* Scroll Indicator */ .scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); animation: scrollBounce 2s infinite; } @keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } .scroll-indicator span { display: block; width: 30px; height: 50px; border: 2px solid rgba(220, 38, 38, 0.5); border-radius: 20px; position: relative; } .scroll-indicator span::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: #dc2626; border-radius: 50%; animation: scrollDot 2s infinite; } @keyframes scrollDot { 0%, 100% { top: 8px; opacity: 1; } 50% { top: 30px; opacity: 0.3; } } /* Responsive */ @media (max-width: 1024px) { .kapri-hero-title { font-size: 52px; } .kapri-hero-subtitle { font-size: 18px; } } @media (max-width: 768px) { .kapri-hero-title { font-size: 42px; } .kapri-hero-subtitle { font-size: 16px; } .kapri-hero-description { padding: 30px 25px; } .kapri-hero-description p { font-size: 15px; } .kapri-hero-cta { flex-direction: column; align-items: center; } .cta-button { width: 100%; max-width: 300px; text-align: center; } } @media (max-width: 480px) { .kapri-hero-title { font-size: 32px; } .hero-tag { font-size: 12px; padding: 10px 20px; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-296c011 */.kapri-operational-section { min-height: 100vh; padding: 50px 5%; position: relative; overflow: hidden; display: flex; align-items: center; } /* Animated Background */ .kapri-operational-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 0; } /* Geometric pattern */ .geometric-pattern { position: absolute; width: 100%; height: 100%; opacity: 0.05; } .geometric-pattern::before, .geometric-pattern::after { content: ''; position: absolute; width: 500px; height: 500px; border: 2px solid #dc2626; border-radius: 50%; animation: geometricRotate 30s linear infinite; } .geometric-pattern::before { top: -100px; right: -100px; } .geometric-pattern::after { bottom: -100px; left: -100px; animation-delay: 15s; } @keyframes geometricRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Pulse waves */ .pulse-wave { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; border: 3px solid rgba(220, 38, 38, 0.3); animation: pulseExpand 4s infinite ease-out; } .pulse-wave:nth-child(2) { animation-delay: 0s; } .pulse-wave:nth-child(3) { animation-delay: 1.3s; } .pulse-wave:nth-child(4) { animation-delay: 2.6s; } @keyframes pulseExpand { 0% { width: 100px; height: 100px; opacity: 0; } 50% { opacity: 0.3; } 100% { width: 600px; height: 600px; opacity: 0; } } /* Floating icons */ .floating-icon { position: absolute; font-size: 40px; opacity: 0.1; animation: iconFloat 20s infinite ease-in-out; } .floating-icon:nth-child(5) { top: 10%; left: 10%; animation-delay: 0s; } .floating-icon:nth-child(6) { top: 20%; right: 15%; animation-delay: 5s; } .floating-icon:nth-child(7) { bottom: 15%; left: 20%; animation-delay: 10s; } .floating-icon:nth-child(8) { bottom: 25%; right: 10%; animation-delay: 15s; } @keyframes iconFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-50px) rotate(180deg); } } .kapri-operational-container { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; width: 100%; } /* Content Layout */ .kapri-operational-content { display: grid; grid-template-columns: 45% 55%; gap: 80px; align-items: center; } /* Left Side - Text Content */ .kapri-operational-text { animation: slideInLeft 1s ease-out; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: translateX(0); } } .kapri-operational-badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 25px; background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05)); border: 2px solid #dc2626; border-radius: 50px; margin-bottom: 30px; animation: badgePulse 2s infinite; } @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.3); } 50% { box-shadow: 0 0 40px rgba(220, 38, 38, 0.5); } } .badge-icon { font-size: 24px; animation: iconRotate 3s infinite linear; } @keyframes iconRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .badge-text { font-size: 13px; font-weight: 700; color: #dc2626; letter-spacing: 2px; text-transform: uppercase; } .kapri-operational-title { font-size: 42px; font-weight: 900; color: #1a1a1a; line-height: 1.2; margin-bottom: 25px; } .kapri-operational-highlight { color: #dc2626; position: relative; display: inline-block; } .kapri-operational-highlight::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #dc2626, #b91c1c); animation: underlineExpand 1s ease-out 0.5s both; } @keyframes underlineExpand { from { width: 0; } to { width: 100%; } } .kapri-operational-description { font-size: 18px; line-height: 1.8; color: #555555; margin-bottom: 15px; } .kapri-operational-highlight-text { font-size: 20px; line-height: 1.8; color: #1a1a1a; font-weight: 600; margin-bottom: 40px; padding: 25px; background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(220, 38, 38, 0.02)); border-left: 4px solid #dc2626; border-radius: 10px; animation: highlightPulse 3s infinite; } @keyframes highlightPulse { 0%, 100% { background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(220, 38, 38, 0.02)); } 50% { background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.04)); } } /* Right Side - Benefits List */ .kapri-operational-benefits { animation: slideInRight 1s ease-out; } @keyframes slideInRight { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } } .benefits-grid { display: flex; flex-direction: column; gap: 20px; margin-right: 20px; } .benefit-card { display: flex; align-items: flex-start; gap: 25px; padding: 30px; background: #ffffff; border: 2px solid rgba(220, 38, 38, 0.1); border-radius: 20px; position: relative; overflow: hidden; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); animation: benefitFadeIn 0.8s ease-out both; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); } .benefit-card:nth-child(1) { animation-delay: 0.1s; } .benefit-card:nth-child(2) { animation-delay: 0.2s; } .benefit-card:nth-child(3) { animation-delay: 0.3s; } .benefit-card:nth-child(4) { animation-delay: 0.4s; } .benefit-card:nth-child(5) { animation-delay: 0.5s; } @keyframes benefitFadeIn { from { opacity: 0; transform: translateX(50px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } /* Card shine effect */ .benefit-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.08), transparent); transition: left 0.7s ease; } .benefit-card:hover::before { left: 100%; } .benefit-card:hover { border-color: #dc2626; transform: translateX(-10px) scale(1.02); box-shadow: 0 20px 50px rgba(220, 38, 38, 0.15), 0 0 40px rgba(220, 38, 38, 0.1); } /* Benefit Icon */ .benefit-icon { width: 70px; height: 70px; background: linear-gradient(135deg, #dc2626, #b91c1c); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3); transition: all 0.5s ease; position: relative; overflow: hidden; } .benefit-icon::after { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .benefit-card:hover .benefit-icon::after { transform: translateX(100%); } .benefit-card:hover .benefit-icon { transform: scale(1.15) rotate(360deg); box-shadow: 0 15px 40px rgba(220, 38, 38, 0.5); } /* Benefit Content */ .benefit-content { flex: 1; } .benefit-number { display: inline-block; font-size: 12px; font-weight: 700; color: #dc2626; background: rgba(220, 38, 38, 0.1); padding: 4px 12px; border-radius: 20px; margin-bottom: 10px; letter-spacing: 1px; } .benefit-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 0; transition: color 0.3s ease; } .benefit-card:hover .benefit-title { color: #dc2626; } /* Decorative corner */ .benefit-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 40px 40px; border-color: transparent transparent rgba(220, 38, 38, 0.1) transparent; transition: all 0.3s ease; } .benefit-card:hover::after { border-width: 0 0 60px 60px; border-color: transparent transparent rgba(220, 38, 38, 0.2) transparent; } /* Responsive */ @media (max-width: 1024px) { .kapri-operational-content { grid-template-columns: 1fr; gap: 60px; } .kapri-operational-title { font-size: 42px; } } @media (max-width: 768px) { .kapri-operational-section { padding: 60px 5%; } .kapri-operational-title { font-size: 36px; } .kapri-operational-description, .kapri-operational-highlight-text { font-size: 16px; } .benefit-card { padding: 25px 20px; } .benefit-icon { width: 60px; height: 60px; font-size: 28px; } } @media (max-width: 480px) { .kapri-operational-title { font-size: 28px; } .benefit-card { flex-direction: column; align-items: center; text-align: center; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-2975fb2 */.kapri-capabilities-section { min-height: 100vh; padding: 50px 5%; position: relative; background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 50%, #ffffff 100%); overflow: hidden; } /* Animated Background */ .kapri-capabilities-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 0; } /* Matrix-style grid */ .matrix-grid { position: absolute; width: 100%; height: 100%; background-image: linear-gradient(rgba(220, 38, 38, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 38, 38, 0.03) 1px, transparent 1px); background-size: 50px 50px; animation: matrixScroll 20s linear infinite; } @keyframes matrixScroll { from { transform: translateY(0); } to { transform: translateY(50px); } } /* Glowing orbs */ .glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; animation: orbPulse 8s infinite ease-in-out; } .glow-orb:nth-child(2) { width: 400px; height: 400px; background: radial-gradient(circle, #dc2626, transparent); top: -100px; left: 10%; } .glow-orb:nth-child(3) { width: 350px; height: 350px; background: radial-gradient(circle, #b91c1c, transparent); bottom: -100px; right: 15%; animation-delay: 4s; } @keyframes orbPulse { 0%, 100% { transform: scale(1); opacity: 0.15; } 50% { transform: scale(1.2); opacity: 0.25; } } /* Floating particles */ .floating-particle { position: absolute; width: 4px; height: 4px; background: #dc2626; border-radius: 50%; animation: particleFloat 15s infinite ease-in-out; } .floating-particle:nth-child(4) { top: 10%; left: 5%; animation-delay: 0s; } .floating-particle:nth-child(5) { top: 30%; right: 10%; animation-delay: 3s; } .floating-particle:nth-child(6) { top: 50%; left: 15%; animation-delay: 6s; } .floating-particle:nth-child(7) { top: 70%; right: 20%; animation-delay: 9s; } .floating-particle:nth-child(8) { bottom: 20%; left: 25%; animation-delay: 12s; } @keyframes particleFloat { 0%, 100% { transform: translateY(0) scale(0); opacity: 0; } 25% { transform: translateY(-100px) scale(1); opacity: 0.8; } 50% { transform: translateY(-200px) scale(1.5); opacity: 0.4; } 75% { transform: translateY(-100px) scale(1); opacity: 0.6; } } /* Scan lines */ .scan-line { position: absolute; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.3), transparent); animation: scanVertical 5s infinite ease-in-out; } .scan-line:nth-child(9) { top: 0; } @keyframes scanVertical { 0%, 100% { transform: translateY(0); opacity: 0; } 50% { transform: translateY(100vh); opacity: 0.4; } } .kapri-capabilities-container { max-width: 1600px; margin: 0 auto; position: relative; z-index: 1; } /* Section Header */ .kapri-capabilities-header { text-align: center; margin-bottom: 30px; animation: fadeInDown 1s ease-out; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } .kapri-capabilities-badge { display: inline-block; padding: 12px 30px; background: rgba(220, 38, 38, 0.1); border: 2px solid #dc2626; border-radius: 50px; color: #dc2626; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 25px; animation: badgeGlow 2s infinite; box-shadow: 0 0 20px rgba(220, 38, 38, 0.2); } @keyframes badgeGlow { 0%, 100% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.2); } 50% { box-shadow: 0 0 40px rgba(220, 38, 38, 0.4); } } .kapri-capabilities-title { font-size: 42px; font-weight: 900; color: #1a1a1a; margin-bottom: 20px; } .kapri-capabilities-highlight { background: linear-gradient(135deg, #dc2626, #ff4444); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .kapri-capabilities-subtitle { font-size: 18px; color: #666666; max-width: 800px; margin: 0 auto; line-height: 1.8; } /* Capabilities Grid - 4 per row */ .kapri-capabilities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } /* Capability Card */ .kapri-capability-card { background: #ffffff; backdrop-filter: blur(10px); border: 2px solid rgba(220, 38, 38, 0.15); border-radius: 20px; padding: 35px; position: relative; overflow: hidden; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); animation: cardFadeIn 0.8s ease-out both; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); } .kapri-capability-card:nth-child(1) { animation-delay: 0.1s; } .kapri-capability-card:nth-child(2) { animation-delay: 0.2s; } .kapri-capability-card:nth-child(3) { animation-delay: 0.3s; } .kapri-capability-card:nth-child(4) { animation-delay: 0.4s; } .kapri-capability-card:nth-child(5) { animation-delay: 0.5s; } .kapri-capability-card:nth-child(6) { animation-delay: 0.6s; } @keyframes cardFadeIn { from { opacity: 0; transform: translateY(50px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Corner decorations */ .kapri-capability-card::before, .kapri-capability-card::after { content: ''; position: absolute; width: 40px; height: 40px; border: 2px solid #dc2626; transition: all 0.5s ease; opacity: 0; } .kapri-capability-card::before { top: 15px; left: 15px; border-right: none; border-bottom: none; } .kapri-capability-card::after { bottom: 15px; right: 15px; border-left: none; border-top: none; } .kapri-capability-card:hover::before, .kapri-capability-card:hover::after { opacity: 1; animation: cornerExpand 0.5s ease; } @keyframes cornerExpand { from { width: 20px; height: 20px; } to { width: 40px; height: 40px; } } /* Shimmer effect */ .kapri-capability-card .shimmer { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.2), transparent); transition: left 0.7s ease; } .kapri-capability-card:hover .shimmer { left: 100%; } .kapri-capability-card:hover { border-color: #dc2626; transform: translateY(-15px) scale(1.02); box-shadow: 0 25px 60px rgba(220, 38, 38, 0.4), 0 0 80px rgba(220, 38, 38, 0.2), inset 0 0 50px rgba(220, 38, 38, 0.05); } /* Card Icon */ .kapri-capability-icon { width: 70px; height: 70px; background: linear-gradient(135deg, #dc2626, #b91c1c); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(220, 38, 38, 0.4); transition: all 0.5s ease; position: relative; overflow: hidden; } .kapri-capability-icon::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .kapri-capability-card:hover .kapri-capability-icon::before { transform: translateX(100%); } .kapri-capability-card:hover .kapri-capability-icon { transform: rotateY(360deg) scale(1.1); box-shadow: 0 15px 40px rgba(220, 38, 38, 0.6); } /* Card Title */ .kapri-capability-title { font-size: 20px; font-weight: 800; color: #1a1a1a; margin-bottom: 20px; transition: color 0.3s ease; position: relative; z-index: 1; } .kapri-capability-card:hover .kapri-capability-title { color: #dc2626; } /* Feature List */ .kapri-capability-features { list-style: none; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; padding-left: 0px; margin-left: 0px; } .kapri-capability-feature { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #555555; line-height: 1.6; transition: all 0.3s ease; } .kapri-capability-feature::before { content: '▸'; color: #dc2626; font-size: 16px; flex-shrink: 0; margin-top: 2px; transition: all 0.3s ease; } .kapri-capability-card:hover .kapri-capability-feature { transform: translateX(5px); color: #1a1a1a; } .kapri-capability-card:hover .kapri-capability-feature::before { color: #ff4444; transform: scale(1.3); } /* Pulse animation on hover */ .kapri-capability-card:hover { animation: cardPulse 0.5s ease; } @keyframes cardPulse { 0%, 100% { transform: translateY(-15px) scale(1.02); } 50% { transform: translateY(-18px) scale(1.03); } } /* Responsive */ @media (max-width: 1400px) { .kapri-capabilities-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1024px) { .kapri-capabilities-grid { grid-template-columns: repeat(2, 1fr); } .kapri-capabilities-title { font-size: 46px; } } @media (max-width: 768px) { .kapri-capabilities-section { padding: 60px 5%; } .kapri-capabilities-grid { grid-template-columns: 1fr; gap: 25px; } .kapri-capabilities-title { font-size: 36px; } .kapri-capability-card { padding: 30px 25px; } } @media (max-width: 480px) { .kapri-capabilities-title { font-size: 28px; } .kapri-capability-icon { width: 60px; height: 60px; font-size: 28px; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-5de3dc8 */.advantages-section { min-height: 100vh; display: flex; position: relative; } .left-side { width: 50%; background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 80px 60px; } /* Left Side Animated Background */ .left-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none; } /* Circuit board pattern */ .circuit-pattern { position: absolute; width: 100%; height: 100%; background-image: linear-gradient(rgba(220, 38, 38, 0.1) 2px, transparent 2px), linear-gradient(90deg, rgba(220, 38, 38, 0.1) 2px, transparent 2px); background-size: 40px 40px; animation: circuitMove 15s linear infinite; } @keyframes circuitMove { from { transform: translate(0, 0); } to { transform: translate(40px, 40px); } } /* Scanning lines */ .scan-line-left { position: absolute; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, #dc2626, transparent); animation: scanDown 4s infinite ease-in-out; } .scan-line-left:nth-child(2) { animation-delay: 0s; } .scan-line-left:nth-child(3) { animation-delay: 2s; } @keyframes scanDown { 0%, 100% { top: 0; opacity: 0; } 50% { top: 100%; opacity: 1; } } /* Glowing circles */ .glow-circle-left { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(220, 38, 38, 0.2), transparent 70%); animation: glowPulse 3s infinite ease-in-out; } .glow-circle-left:nth-child(4) { width: 300px; height: 300px; top: -100px; left: -100px; } .glow-circle-left:nth-child(5) { width: 250px; height: 250px; bottom: -80px; right: -80px; animation-delay: 1.5s; } @keyframes glowPulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.2); opacity: 0.6; } } /* Floating hexagons */ .hex-left { position: absolute; width: 60px; height: 60px; border: 2px solid rgba(220, 38, 38, 0.3); transform: rotate(45deg); animation: hexFloat 10s infinite ease-in-out; } .hex-left:nth-child(6) { top: 20%; left: 10%; animation-delay: 0s; } .hex-left:nth-child(7) { top: 60%; right: 15%; animation-delay: 3s; } @keyframes hexFloat { 0%, 100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(405deg) translateY(-30px); } } /* Left Content */ .left-content { position: relative; z-index: 10; max-width: 600px; } .left-header { margin-bottom: 50px; animation: slideInLeft 1s ease-out; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } .left-badge { display: inline-block; padding: 10px 20px; background: rgba(220, 38, 38, 0.2); border: 2px solid #dc2626; border-radius: 50px; color: #dc2626; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; animation: badgeGlow 2s infinite; } @keyframes badgeGlow { 0%, 100% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.3); } 50% { box-shadow: 0 0 40px rgba(220, 38, 38, 0.6); } } .left-title { font-size: 42px; font-weight: 900; color: #ffffff; margin-bottom: 15px; line-height: 1.2; } .left-subtitle { font-size: 18px; color: #cccccc; line-height: 1.6; } /* Left Advantages List */ .advantages-list { display: flex; flex-direction: column; gap: 20px; } .advantage-item { display: flex; align-items: center; gap: 20px; padding: 20px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(220, 38, 38, 0.2); border-radius: 15px; border-left: 4px solid #dc2626; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); animation: fadeInLeft 0.8s ease-out both; position: relative; overflow: hidden; } .advantage-item:nth-child(1) { animation-delay: 0.1s; } .advantage-item:nth-child(2) { animation-delay: 0.2s; } .advantage-item:nth-child(3) { animation-delay: 0.3s; } .advantage-item:nth-child(4) { animation-delay: 0.4s; } .advantage-item:nth-child(5) { animation-delay: 0.5s; } .advantage-item:nth-child(6) { animation-delay: 0.6s; } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } .advantage-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.1), transparent); transition: left 0.6s ease; } .advantage-item:hover::before { left: 100%; } .advantage-item:hover { background: rgba(220, 38, 38, 0.1); transform: translateX(10px); box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3); } .advantage-number { width: 50px; height: 50px; background: linear-gradient(135deg, #dc2626, #b91c1c); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; color: #ffffff; flex-shrink: 0; box-shadow: 0 5px 15px rgba(220, 38, 38, 0.4); transition: all 0.4s ease; } .advantage-item:hover .advantage-number { transform: rotateY(360deg) scale(1.1); } .advantage-text { flex: 1; font-size: 17px; font-weight: 600; color: #ffffff; line-height: 1.6; } /* RIGHT SIDE - Why Kapri Corp */ .right-side { width: 50%; background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 80px 60px; } /* Right Side Animated Background */ .right-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none; } /* Dotted pattern */ .dot-pattern { position: absolute; width: 100%; height: 100%; background-image: radial-gradient(circle, rgba(220, 38, 38, 0.05) 2px, transparent 2px); background-size: 30px 30px; animation: dotMove 20s linear infinite; } @keyframes dotMove { from { transform: translate(0, 0); } to { transform: translate(30px, 30px); } } /* Floating particles */ .particle-right { position: absolute; background: #dc2626; border-radius: 50%; animation: particleFloat 8s infinite ease-in-out; } .particle-right:nth-child(2) { width: 8px; height: 8px; top: 15%; left: 20%; animation-delay: 0s; } .particle-right:nth-child(3) { width: 6px; height: 6px; top: 50%; right: 15%; animation-delay: 2s; } .particle-right:nth-child(4) { width: 10px; height: 10px; bottom: 30%; left: 30%; animation-delay: 4s; } @keyframes particleFloat { 0%, 100% { transform: translateY(0) scale(0); opacity: 0; } 50% { transform: translateY(-80px) scale(1); opacity: 0.6; } } /* Wave lines */ .wave-line-right { position: absolute; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.2), transparent); animation: waveMove 6s infinite ease-in-out; } .wave-line-right:nth-child(5) { top: 30%; animation-delay: 0s; } .wave-line-right:nth-child(6) { top: 70%; animation-delay: 3s; } @keyframes waveMove { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } /* Circle rings */ .circle-ring-right { position: absolute; border: 3px dashed rgba(220, 38, 38, 0.15); border-radius: 50%; animation: ringRotate 20s infinite linear; } .circle-ring-right:nth-child(7) { width: 250px; height: 250px; top: 10%; right: 10%; } .circle-ring-right:nth-child(8) { width: 200px; height: 200px; bottom: 15%; left: 10%; animation-delay: 10s; } @keyframes ringRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Right Content */ .right-content { position: relative; z-index: 10; max-width: 600px; } .right-header { margin-bottom: 50px; animation: slideInRight 1s ease-out; } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } .right-badge { display: inline-block; padding: 10px 20px; background: rgba(220, 38, 38, 0.1); border: 2px solid #dc2626; border-radius: 50px; color: #dc2626; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; animation: badgePulse 2s infinite; } @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); } } .right-title { font-size: 42px; font-weight: 900; color: #1a1a1a; margin-bottom: 15px; line-height: 1.2; } .right-subtitle { font-size: 18px; color: #666666; line-height: 1.6; } /* Right Reasons List */ .reasons-list { display: flex; flex-direction: column; gap: 20px; } .reason-item { display: flex; align-items: center; gap: 20px; padding: 20px; background: #ffffff; border: 2px solid rgba(220, 38, 38, 0.1); border-radius: 15px; border-left: 4px solid #dc2626; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); animation: fadeInRight 0.8s ease-out both; position: relative; overflow: hidden; } .reason-item:nth-child(1) { animation-delay: 0.1s; } .reason-item:nth-child(2) { animation-delay: 0.2s; } .reason-item:nth-child(3) { animation-delay: 0.3s; } .reason-item:nth-child(4) { animation-delay: 0.4s; } .reason-item:nth-child(5) { animation-delay: 0.5s; } .reason-item:nth-child(6) { animation-delay: 0.6s; } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .reason-item::before { content: ''; position: absolute; top: 0; right: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.05), transparent); transition: right 0.6s ease; } .reason-item:hover::before { right: 100%; } .reason-item:hover { background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), #ffffff); transform: translateX(-10px); box-shadow: 0 10px 30px rgba(220, 38, 38, 0.15); } .reason-number { width: 50px; height: 50px; background: linear-gradient(135deg, #dc2626, #b91c1c); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; color: #ffffff; flex-shrink: 0; box-shadow: 0 5px 15px rgba(220, 38, 38, 0.3); transition: all 0.4s ease; } .reason-item:hover .reason-number { transform: rotateY(360deg) scale(1.1); } .reason-text { flex: 1; font-size: 17px; font-weight: 600; color: #1a1a1a; line-height: 1.6; } /* Responsive */ @media (max-width: 1024px) { .advantages-section { flex-direction: column; } .left-side, .right-side { width: 100%; min-height: 50vh; } .left-title, .right-title { font-size: 36px; } } @media (max-width: 768px) { .left-side, .right-side { padding: 60px 30px; } .left-title, .right-title { font-size: 32px; } .advantage-text, .reason-text { font-size: 15px; } } @media (max-width: 480px) { .left-side, .right-side { padding: 40px 20px; } .left-title, .right-title { font-size: 28px; } .advantage-item, .reason-item { padding: 15px; } .advantage-number, .reason-number { width: 40px; height: 40px; font-size: 16px; } } .applications-section { min-height: 100vh; padding: 50px 2%; position: relative; overflow: hidden; } /* Animated Background */ .app-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 0; } /* Grid pattern */ .grid-pattern { position: absolute; width: 100%; height: 100%; background-image: linear-gradient(rgba(220, 38, 38, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 38, 38, 0.02) 1px, transparent 1px); background-size: 60px 60px; animation: gridScroll 25s linear infinite; } @keyframes gridScroll { from { transform: translate(0, 0); } to { transform: translate(60px, 60px); } } /* Radar sweep */ .radar-sweep { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; border: 3px solid rgba(220, 38, 38, 0.08); border-radius: 50%; } .radar-sweep::before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.3), transparent); transform-origin: left center; animation: radarRotate 6s infinite linear; } @keyframes radarRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Floating particles */ .particle-app { position: absolute; width: 8px; height: 8px; background: #dc2626; border-radius: 50%; animation: particleDrift 10s infinite ease-in-out; } .particle-app:nth-child(3) { top: 15%; left: 10%; animation-delay: 0s; } .particle-app:nth-child(4) { top: 30%; right: 15%; animation-delay: 2s; } .particle-app:nth-child(5) { bottom: 25%; left: 20%; animation-delay: 4s; } .particle-app:nth-child(6) { top: 70%; right: 25%; animation-delay: 6s; } @keyframes particleDrift { 0%, 100% { transform: translate(0, 0) scale(0); opacity: 0; } 50% { transform: translate(50px, -50px) scale(1); opacity: 0.6; } } /* Connecting lines */ .connect-line { position: absolute; height: 2px; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.2), transparent); animation: lineSlide 8s infinite ease-in-out; } .connect-line:nth-child(7) { width: 300px; top: 20%; left: -150px; animation-delay: 0s; } .connect-line:nth-child(8) { width: 250px; top: 60%; right: -125px; animation-delay: 4s; } @keyframes lineSlide { 0%, 100% { transform: translateX(0); opacity: 0; } 50% { transform: translateX(300px); opacity: 0.5; } } .container { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; } /* Section Header */ .section-header { text-align: center; margin-bottom: 30px; animation: fadeInDown 1s ease-out; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } .section-badge { display: inline-block; padding: 12px 25px; background: rgba(220, 38, 38, 0.1); border: 2px solid #dc2626; border-radius: 50px; color: #dc2626; font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 25px; animation: badgePulse 2s infinite; } @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); } 50% { box-shadow: 0 0 0 15px rgba(220, 38, 38, 0); } } .section-title { font-size: 42px; font-weight: 900; color: #1a1a1a; margin-bottom: 20px; } .highlight-red { color: #dc2626; position: relative; } .highlight-red::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 4px; background: #dc2626; animation: underlineExpand 1s ease-out 0.5s both; } @keyframes underlineExpand { from { width: 0; } to { width: 100%; } } .section-subtitle { font-size: 18px; color: #666666; max-width: 700px; margin: 0 auto; line-height: 1.8; } /* Applications Grid */ .applications-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } /* Application Card */ .app-card { background: #ffffff; border: 2px solid rgba(220, 38, 38, 0.1); border-radius: 20px; padding: 40px; position: relative; overflow: hidden; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); animation: fadeInUp 0.8s ease-out both; } .app-card:nth-child(1) { animation-delay: 0.1s; } .app-card:nth-child(2) { animation-delay: 0.2s; } .app-card:nth-child(3) { animation-delay: 0.3s; } .app-card:nth-child(4) { animation-delay: 0.4s; } .app-card:nth-child(5) { animation-delay: 0.5s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .app-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.05), transparent); transition: left 0.7s ease; } .app-card:hover::before { left: 100%; } .app-card:hover { border-color: #dc2626; transform: translateY(-10px); box-shadow: 0 20px 50px rgba(220, 38, 38, 0.2); } /* Card Header */ .card-header2 { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 3px solid #dc2626; } .card-title2 h3 { font-size: 22px; font-weight: 800; color: #1a1a1a; margin-bottom: 8px; transition: color 0.3s ease; } .app-card:hover .card-title h3 { color: #dc2626; } .card-category { font-size: 12px; color: #999999; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; } /* Application Items List */ .app-items { display: flex; flex-direction: column; gap: 15px; } .app-item { display: flex; align-items: flex-start; gap: 15px; padding: 15px; background: rgba(220, 38, 38, 0.02); border-radius: 12px; border-left: 3px solid #dc2626; transition: all 0.3s ease; } .app-item:hover { background: rgba(220, 38, 38, 0.08); transform: translateX(10px); } .item-icon { color: #dc2626; font-size: 20px; flex-shrink: 0; margin-top: 2px; transition: transform 0.3s ease; } .app-item:hover .item-icon { transform: scale(1.3) rotate(360deg); } .item-text { font-size: 16px; color: #333333; line-height: 1.6; font-weight: 500; } /* Sub-applications for Critical Infrastructure */ .sub-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 15px; } .sub-app-item { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(220, 38, 38, 0.02); border-radius: 10px; border: 1px solid rgba(220, 38, 38, 0.1); transition: all 0.3s ease; font-size: 14px; color: #333333; font-weight: 600; } .sub-app-item:hover { background: rgba(220, 38, 38, 0.08); border-color: #dc2626; transform: translateY(-3px); } .sub-app-icon { font-size: 18px; } /* Responsive */ @media (max-width: 1200px) { .applications-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { .section-title { font-size: 42px; } } @media (max-width: 768px) { .applications-section { padding: 60px 5%; } .section-title { font-size: 36px; } .applications-grid { grid-template-columns: 1fr; } .app-card { padding: 30px 25px; } .card-title h3 { font-size: 20px; } .sub-apps { grid-template-columns: 1fr; } } @media (max-width: 480px) { .section-title { font-size: 28px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-c234b0e */.contact-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 5%; overflow: hidden; } /* Animated Background Effects */ .animated-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 0; } /* Network grid */ .network-grid { position: absolute; width: 100%; height: 100%; background-image: linear-gradient(rgba(220, 38, 38, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 38, 38, 0.03) 1px, transparent 1px); background-size: 50px 50px; animation: gridMove 20s linear infinite; } @keyframes gridMove { from { transform: translate(0, 0); } to { transform: translate(50px, 50px); } } /* Radar circle */ .radar-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; border: 3px solid rgba(220, 38, 38, 0.08); border-radius: 50%; animation: radarPulse 3s infinite ease-out; } .radar-circle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.3), transparent); transform-origin: left center; animation: radarSweep 4s infinite linear; } @keyframes radarPulse { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } 50% { opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; } } @keyframes radarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Concentric circles */ .concentric-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid rgba(220, 38, 38, 0.1); border-radius: 50%; animation: expandCircle 4s infinite ease-out; } .concentric-circle:nth-child(3) { width: 300px; height: 300px; animation-delay: 0s; } .concentric-circle:nth-child(4) { width: 400px; height: 400px; animation-delay: 1s; } .concentric-circle:nth-child(5) { width: 500px; height: 500px; animation-delay: 2s; } @keyframes expandCircle { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 50% { opacity: 0.3; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } /* Floating particles */ .particle { position: absolute; background: #dc2626; border-radius: 50%; animation: particleFloat 8s infinite ease-in-out; } .particle:nth-child(6) { width: 8px; height: 8px; top: 20%; left: 15%; animation-delay: 0s; } .particle:nth-child(7) { width: 6px; height: 6px; top: 40%; right: 20%; animation-delay: 2s; } .particle:nth-child(8) { width: 10px; height: 10px; top: 60%; left: 30%; animation-delay: 4s; } .particle:nth-child(9) { width: 7px; height: 7px; bottom: 20%; right: 25%; animation-delay: 6s; } @keyframes particleFloat { 0%, 100% { transform: translateY(0) scale(0); opacity: 0; } 50% { transform: translateY(-100px) scale(1); opacity: 0.6; } } /* Digital lines */ .digital-line { position: absolute; height: 2px; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.2), transparent); animation: lineMove 6s infinite ease-in-out; } .digital-line:nth-child(10) { width: 300px; top: 20%; left: -150px; animation-delay: 0s; } .digital-line:nth-child(11) { width: 250px; top: 60%; right: -125px; animation-delay: 2s; } .digital-line:nth-child(12) { width: 200px; bottom: 30%; left: -100px; animation-delay: 4s; } @keyframes lineMove { 0%, 100% { transform: translateX(0); opacity: 0; } 50% { transform: translateX(200px); opacity: 0.5; } } /* Hexagon shapes */ .hexagon { position: absolute; width: 80px; height: 80px; border: 2px solid rgba(220, 38, 38, 0.1); transform: rotate(45deg); animation: hexagonRotate 15s infinite linear; } .hexagon:nth-child(13) { top: 15%; right: 10%; } .hexagon:nth-child(14) { bottom: 20%; left: 15%; animation-delay: 5s; } @keyframes hexagonRotate { from { transform: rotate(45deg); } to { transform: rotate(405deg); } } .contact-container { max-width: 1000px; width: 100%; position: relative; z-index: 10; animation: fadeInUp 1s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .contact-header { margin-bottom: 50px; text-align: center; } .section-badge { display: inline-block; padding: 10px 20px; background: rgba(220, 38, 38, 0.1); border: 2px solid #dc2626; border-radius: 50px; color: #dc2626; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; animation: badgePulse 2s infinite; } @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); } } .contact-title { font-size: 42px; font-weight: 900; color: #1a1a1a; margin-bottom: 15px; } .contact-subtitle { font-size: 18px; color: #666666; line-height: 1.6; } /* Contact Cards */ .contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-bottom: 40px; } .contact-card { background: #ffffff; border: 2px solid rgba(220, 38, 38, 0.1); border-radius: 15px; padding: 20px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; animation: fadeInUp 0.8s ease-out both; } .contact-card:nth-child(1) { animation-delay: 0.2s; } .contact-card:nth-child(2) { animation-delay: 0.3s; } .contact-card:nth-child(3) { animation-delay: 0.4s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .contact-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.05), transparent); transition: left 0.6s ease; } .contact-card:hover::before { left: 100%; } .contact-card:hover { border-color: #dc2626; transform: translateY(-5px); box-shadow: 0 15px 40px rgba(220, 38, 38, 0.15); } .card-header1 { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } .card-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #dc2626, #b91c1c); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 5px 15px rgba(220, 38, 38, 0.3); transition: all 0.4s ease; } .contact-card:hover .card-icon { transform: rotateY(360deg) scale(1.1); } .card-label { font-size: 14px; font-weight: 700; color: #dc2626; text-transform: uppercase; letter-spacing: 1px; } .card-content { position: relative; z-index: 1; } .card-text { font-size: 18px; font-weight: 600; color: #1a1a1a; line-height: 1.6; } .card-text a { color: #1a1a1a; text-decoration: none; transition: color 0.3s ease; } .card-text a:hover { color: #dc2626; } .address-text { font-size: 16px; line-height: 1.8; } /* Features List */ .features-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 40px; padding-top: 40px; border-top: 2px solid rgba(220, 38, 38, 0.1); } .feature-item { display: flex; align-items: center; gap: 15px; padding: 13px 20px; background: #ffffff; border-radius: 50px; border: 2px solid rgba(220, 38, 38, 0.2); transition: all 0.3s ease; animation: fadeInUp 0.8s ease-out both; } .feature-item:nth-child(1) { animation-delay: 0.6s; } .feature-item:nth-child(2) { animation-delay: 0.7s; } .feature-item:nth-child(3) { animation-delay: 0.8s; } .feature-item:hover { background: #dc2626; border-color: #dc2626; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3); } .feature-icon { font-size: 24px; transition: transform 0.3s ease; } .feature-item:hover .feature-icon { transform: scale(1.2) rotate(360deg); } .feature-text { font-size: 16px; font-weight: 700; color: #333333; transition: color 0.3s ease; } .feature-item:hover .feature-text { color: #ffffff; } /* Responsive */ @media (max-width: 1024px) { .contact-title { font-size: 32px; } .contact-cards { grid-template-columns: 1fr; } } @media (max-width: 768px) { .contact-section { padding: 60px 5%; } .contact-title { font-size: 28px; } .card-text { font-size: 16px; } .features-list { flex-direction: column; align-items: center; } .feature-item { width: 100%; max-width: 300px; justify-content: center; } } @media (max-width: 480px) { .contact-section { padding: 40px 20px; } .contact-card { padding: 20px; } .contact-title { font-size: 24px; } }/* End custom CSS */ /* Start custom CSS for text-editor, class: .elementor-element-40e1716 *//* Question mark pattern */ .kapri-question-pattern { position: absolute; font-size: 200px; color: rgba(220, 38, 38, 0.02); font-weight: 900; animation: kapriPatternFloat 20s infinite ease-in-out; } .kapri-question-pattern:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; } .kapri-question-pattern:nth-child(2) { top: 60%; right: 10%; animation-delay: 5s; } .kapri-question-pattern:nth-child(3) { bottom: 10%; left: 50%; animation-delay: 10s; } @keyframes kapriPatternFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(10deg); } } /* Animated waves */ .kapri-wave-line { position: absolute; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.15), transparent); animation: kapriWaveMove 6s infinite ease-in-out; } .kapri-wave-line:nth-child(4) { top: 25%; animation-delay: 0s; } .kapri-wave-line:nth-child(5) { top: 55%; animation-delay: 2s; } .kapri-wave-line:nth-child(6) { bottom: 25%; animation-delay: 4s; } @keyframes kapriWaveMove { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } /* Floating circles */ .kapri-floating-circle { position: absolute; border-radius: 50%; border: 3px dashed rgba(220, 38, 38, 0.2); animation: kapriCircleFloat 15s infinite ease-in-out; } .kapri-floating-circle:nth-child(7) { width: 150px; height: 150px; top: 20%; right: 15%; } .kapri-floating-circle:nth-child(8) { width: 200px; height: 200px; bottom: 15%; left: 10%; animation-delay: 7s; } @keyframes kapriCircleFloat { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(20px, -20px) rotate(180deg); } } .kapri-faq-section .kapri-container { max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; } /* FAQ Header */ .kapri-faq-header { text-align: center; margin-bottom: 70px; animation: kapriFadeInDown 1s ease-out; } @keyframes kapriFadeInDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } .kapri-faq-title { font-size: 52px; font-weight: 900; color: #1a1a1a; line-height: 1.2; margin-bottom: 20px; } .kapri-highlight-red { color: #dc2626; position: relative; } .kapri-highlight-red::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 4px; background: #dc2626; animation: kapriUnderlineExpand 1s ease-out 0.5s both; } @keyframes kapriUnderlineExpand { from { width: 0; } to { width: 100%; } } .kapri-faq-subtitle { font-size: 18px; color: #666666; line-height: 1.6; } /* FAQ Accordion */ .kapri-faq-accordion { display: flex; flex-direction: column; gap: 10px; } .kapri-faq-item { background: #ffffff; border-radius: 15px; border: 2px solid transparent; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); animation: kapriFadeInUp 0.8s ease-out both; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); } @keyframes kapriFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .kapri-faq-item:nth-child(1) { animation-delay: 0.1s; } .kapri-faq-item:nth-child(2) { animation-delay: 0.15s; } .kapri-faq-item:nth-child(3) { animation-delay: 0.2s; } .kapri-faq-item:nth-child(4) { animation-delay: 0.25s; } .kapri-faq-item:nth-child(5) { animation-delay: 0.3s; } .kapri-faq-item:nth-child(6) { animation-delay: 0.35s; } .kapri-faq-item:nth-child(7) { animation-delay: 0.4s; } .kapri-faq-item:nth-child(8) { animation-delay: 0.45s; } .kapri-faq-item:nth-child(9) { animation-delay: 0.5s; } .kapri-faq-item:hover { border-color: rgba(220, 38, 38, 0.3); box-shadow: 0 10px 40px rgba(220, 38, 38, 0.15); transform: translateY(-5px); } .kapri-faq-item.active { border-color: #dc2626; box-shadow: 0 15px 50px rgba(220, 38, 38, 0.2); } .kapri-faq-question { width: 100%; padding: 28px 30px; background: transparent; border: none; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; transition: all 0.3s ease; position: relative; } .kapri-faq-question::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #dc2626; transform: scaleY(0); transition: transform 0.3s ease; } .kapri-faq-item.active .kapri-faq-question::before { transform: scaleY(1); } .kapri-faq-question:hover { background: rgba(220, 38, 38, 0.02); } .kapri-faq-q-number { font-size: 16px; font-weight: 800; color: #ffffff; background: linear-gradient(135deg, #dc2626, #b91c1c); width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.4s ease; } .kapri-faq-item:hover .kapri-faq-q-number { transform: scale(1.1) rotate(360deg); box-shadow: 0 5px 15px rgba(220, 38, 38, 0.4); } .kapri-faq-q-text { flex: 1; font-size: 16px; font-weight: 700; color: #1a1a1a; line-height: 1.5; transition: color 0.3s ease; } .kapri-faq-item.active .kapri-faq-q-text { color: #dc2626; } .kapri-faq-toggle { font-size: 36px; font-weight: 300; color: #dc2626; flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(220, 38, 38, 0.05); transition: all 0.4s ease; } .kapri-faq-item:hover .kapri-faq-toggle { background: rgba(220, 38, 38, 0.1); transform: rotate(90deg); } .kapri-faq-item.active .kapri-faq-toggle { transform: rotate(135deg); background: #dc2626; color: #ffffff; } .kapri-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s ease; background: linear-gradient(135deg, rgba(220, 38, 38, 0.02), transparent); } .kapri-faq-item.active .kapri-faq-answer { max-height: 500px; padding: 0 30px 30px 35px; } .kapri-faq-answer p { font-size: 16px; line-height: 1.9; color: #555555; position: relative; padding-left: 0x; } .kapri-faq-answer p::before { content: '→'; position: absolute; left: 0; color: #dc2626; font-weight: bold; } /* CTA Section */ .kapri-faq-cta { margin-top: 80px; text-align: center; padding: 50px; background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); border-radius: 20px; position: relative; overflow: hidden; animation: kapriFadeInUp 0.8s ease-out 0.6s both; } .kapri-faq-cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(220, 38, 38, 0.1), transparent); animation: kapriCtaRotate 10s infinite linear; } @keyframes kapriCtaRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .kapri-faq-cta-content { position: relative; z-index: 1; } .kapri-faq-cta h3 { font-size: 32px; font-weight: 800; color: #ffffff; margin-bottom: 15px; } .kapri-faq-cta p { font-size: 18px; color: #cccccc; margin-bottom: 30px; } .kapri-cta-button { display: inline-block; padding: 18px 45px; background: linear-gradient(135deg, #dc2626, #b91c1c); color: #ffffff; font-size: 18px; font-weight: 700; text-decoration: none; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(220, 38, 38, 0.4); } .kapri-cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(220, 38, 38, 0.6); background: linear-gradient(135deg, #b91c1c, #991b1b); } /* Responsive */ @media (max-width: 600px) { .kapri-faq-section { padding: 40px 3%; } .kapri-faq-header { margin-bottom: 40px; } .kapri-faq-title { font-size: 28px; } .kapri-faq-subtitle { font-size: 15px; } .kapri-faq-question { padding: 18px 15px; gap: 12px; } .kapri-faq-q-number { width: 38px; height: 38px; font-size: 13px; } .kapri-faq-q-text { font-size: 15px; } .kapri-faq-toggle { width: 35px; height: 35px; font-size: 30px; } .kapri-faq-item.active .kapri-faq-answer { padding: 0 15px 20px 65px; } .kapri-faq-answer p { font-size: 14px; line-height: 1.7; } .kapri-faq-cta { margin-top: 50px; padding: 30px 20px; } .kapri-faq-cta h3 { font-size: 22px; } .kapri-faq-cta p { font-size: 15px; margin-bottom: 20px; } .kapri-cta-button { padding: 14px 30px; font-size: 15px; } .kapri-question-pattern { font-size: 100px; opacity: 0.5; } .kapri-floating-circle { display: none; } } @media (max-width: 400px) { .kapri-faq-title { font-size: 24px; } .kapri-faq-q-number { width: 35px; height: 35px; font-size: 12px; } .kapri-faq-q-text { font-size: 14px; } .kapri-faq-item.active .kapri-faq-answer { padding: 0 12px 15px 57px; } }/* End custom CSS */