html {font-size:14px;scroll-behavior:smooth;scroll-padding-top:80px} .about-image-placeholder {max-width:400px;width:100%;height:auto;border-radius:15px;box-shadow:0 10px 30px rgba(30,58,138,0.2);overflow:hidden;transition:all 0.3s ease;margin:0 auto} .error-hero {background:linear-gradient(135deg,#f8fafc 0%,#ffffff 100%);min-height:60vh;display:flex;align-items:center} .error-number {position:relative;display:inline-block} .error-number h1 {font-size:8rem;font-weight:900;color:var(--primary-color);text-shadow:0 4px 8px rgba(30,58,138,0.2);margin:0;line-height:1} .error-line {width:100px;height:4px;background:linear-gradient( 135deg,var(--primary-color) 0%,var(--secondary-color) 100% );margin:0 auto;border-radius:2px;box-shadow:0 2px 8px rgba(30,58,138,0.3)} .helpful-card {transition:all 0.3s ease;border-radius:15px;overflow:hidden} .helpful-card:hover {transform:translateY(-5px);box-shadow:0 15px 40px rgba(30,58,138,0.15) !important} .helpful-card .card-body {padding:2rem 1.5rem} .service-highlight {transition:all 0.3s ease;border-radius:15px;overflow:hidden} .service-highlight:hover {transform:translateY(-3px);box-shadow:0 10px 30px rgba(30,58,138,0.15) !important} .error-cta {background:linear-gradient( 135deg,var(--primary-color) 0%,var(--secondary-color) 100% )} .search-box .input-group {border-radius:25px;overflow:hidden;box-shadow:0 4px 15px rgba(30,58,138,0.1)} .search-box .form-control {border:none;padding:12px 20px;font-size:1rem} .search-box .form-control:focus {box-shadow:none;border:none} .search-box .btn {border:none;padding:12px 20px;border-radius:0 25px 25px 0} .seo-footer {border-top:1px solid rgba(30,58,138,0.1)} @media (max-width:768px) {.error-number h1 {font-size:6rem} .error-hero {min-height:50vh;padding:3rem 0} .helpful-card .card-body {padding:1.5rem 1rem} } @media (max-width:576px) {.error-number h1 {font-size:4rem} .error-line {width:80px;height:3px} .search-box .input-group {max-width:100% !important} } .about-image-placeholder:hover {transform:translateY(-5px);box-shadow:0 15px 40px rgba(30,58,138,0.3)} .about-image-placeholder img {width:100%;height:auto;object-fit:cover;border-radius:15px;transition:all 0.3s ease} @media (max-width:768px) {.about-image-placeholder {max-width:100%;width:100%;margin:0} .about-image-placeholder img {width:100%;height:auto} } @media (max-width:576px) {.about-image-placeholder {max-width:100%;width:100%;margin:0;border-radius:10px} .about-image-placeholder img {width:100%;height:auto;border-radius:10px} } @media (min-width:768px) {html {font-size:16px} } body {padding-top:80px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.6;color:var(--dark-color);background-color:#ffffff} html {position:relative;min-height:100%} .btn:focus,.btn:active:focus,.btn-link.nav-link:focus,.form-control:focus,.form-check-input:focus {box-shadow:0 0 0 0.1rem white,0 0 0 0.25rem var(--primary-color)} .form-floating > .form-control-plaintext::placeholder,.form-floating > .form-control::placeholder {color:var(--bs-secondary-color);text-align:end} .form-floating > .form-control-plaintext:focus::placeholder,.form-floating > .form-control:focus::placeholder {text-align:start} :root {--primary-color:#1e3a8a;--secondary-color:#60a5fa;--success-color:#198754;--info-color:#0dcaf0;--warning-color:#ffc107;--danger-color:#dc3545;--light-color:#f8fafc;--dark-color:#1f2937;--cta-color:#2563eb;--gradient-bg:linear-gradient(135deg,#1e3a8a 0%,#60a5fa 100%);--bs-primary:#1e3a8a;--bs-primary-rgb:30,58,138;--bs-secondary:#60a5fa;--bs-secondary-rgb:96,165,250;--bs-light:#f8fafc;--bs-light-rgb:248,250,252;--bs-dark:#1f2937;--bs-dark-rgb:31,41,55} h1,h2,h3,h4,h5,h6 {font-weight:600;line-height:1.3} .display-1,.display-2,.display-3,.display-4 {font-weight:700} .navbar {transition:all 0.3s ease;backdrop-filter:blur(15px);background:linear-gradient( 135deg,rgba(255,255,255,0.9) 0%,rgba(248,250,252,0.95) 100% ) !important;border-bottom:1px solid rgba(30,58,138,0.1);padding:1rem 0;z-index:1030} .navbar.scrolled {box-shadow:0 4px 30px rgba(30,58,138,0.15),0 2px 8px rgba(0,0,0,0.1);background:linear-gradient( 135deg,rgba(248,250,252,0.98) 0%,rgba(255,255,255,0.98) 100% ) !important;border-bottom:1px solid rgba(30,58,138,0.2);padding:0.5rem 0;backdrop-filter:blur(20px);position:relative} .navbar.scrolled::before {content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient( 135deg,rgba(96,165,250,0.03) 0%,rgba(30,58,138,0.05) 100% );pointer-events:none} .navbar-brand {font-weight:700;font-size:1.5rem;color:var(--dark-color) !important;transition:all 0.3s ease;text-shadow:0 1px 2px rgba(0,0,0,0.1)} .navbar-brand:hover {color:var(--primary-color) !important;transform:scale(1.05);text-shadow:0 2px 4px rgba(30,58,138,0.3)} .brand-text {background:var(--gradient-bg);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .nav-link {font-weight:500;color:var(--dark-color) !important;transition:all 0.3s ease;padding:0.75rem 1rem !important;margin:0 0.25rem;border-radius:25px;position:relative;text-decoration:none} .nav-link:hover {color:var(--primary-color) !important;background-color:rgba(30,58,138,0.1);transform:translateY(-2px)} .nav-link.active {color:var(--primary-color) !important;background-color:rgba(30,58,138,0.15);font-weight:600} .nav-link.active::after {content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:20px;height:3px;background:var(--gradient-bg);border-radius:2px;box-shadow:0 2px 8px rgba(30,58,138,0.3);animation:pulse 2s infinite} @keyframes pulse {0% {box-shadow:0 2px 8px rgba(30,58,138,0.3)} 50% {box-shadow:0 2px 12px rgba(30,58,138,0.5)} 100% {box-shadow:0 2px 8px rgba(30,58,138,0.3)} } .contact-btn {background:var(--cta-color) !important;color:white !important;border-radius:25px !important;padding:0.75rem 1.5rem !important;margin-left:0.5rem !important;font-weight:600;box-shadow:0 4px 15px rgba(37,99,235,0.3);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1)} .contact-btn:hover {color:white !important;background:var(--gradient-bg) !important;transform:translateY(-3px);box-shadow:0 8px 25px rgba(37,99,235,0.4);border:1px solid rgba(255,255,255,0.2)} .custom-toggler {border:none;background:none;padding:0.5rem;border-radius:8px;transition:all 0.3s ease} .custom-toggler:focus {box-shadow:none;outline:none} .custom-toggler:hover {background-color:rgba(30,58,138,0.1)} .navbar-toggler-icon {background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231F2937' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important} @media (max-width:991.98px) {.navbar-collapse {background:linear-gradient( 135deg,rgba(248,250,252,0.98) 0%,rgba(255,255,255,0.98) 100% );border-radius:15px;padding:1rem;margin-top:1rem;box-shadow:0 10px 40px rgba(30,58,138,0.15),0 4px 15px rgba(0,0,0,0.1);backdrop-filter:blur(15px);border:1px solid rgba(30,58,138,0.1)} .nav-link {padding:1rem 1.5rem !important;margin:0.25rem 0;border-radius:15px} .nav-link:hover {background-color:rgba(30,58,138,0.1);transform:translateX(10px)} .contact-btn {margin-left:0 !important;margin-top:0.5rem !important;text-align:center} } .sticky-top {position:fixed !important;top:0;width:100%;z-index:1030} .nav-link i {font-size:0.9rem;margin-right:0.5rem;transition:all 0.3s ease} .nav-link:hover i {transform:scale(1.1);color:var(--primary-color)} .navbar-nav .nav-item {animation:fadeInDown 0.6s ease-out;animation-fill-mode:both} .navbar-nav .nav-item:nth-child(1) {animation-delay:0.1s} .navbar-nav .nav-item:nth-child(2) {animation-delay:0.2s} .navbar-nav .nav-item:nth-child(3) {animation-delay:0.3s} .navbar-nav .nav-item:nth-child(4) {animation-delay:0.4s} .navbar-nav .nav-item:nth-child(5) {animation-delay:0.5s} .navbar-nav .nav-item:nth-child(6) {animation-delay:0.6s} .navbar-nav .nav-item:nth-child(7) {animation-delay:0.7s} @keyframes fadeInDown {from {opacity:0;transform:translateY(-20px)} to {opacity:1;transform:translateY(0)} } .nav-link:focus {outline:2px solid var(--primary-color);outline-offset:2px} .hero-section,.services-hero,.projects-hero,.skills-hero,.contact-hero,.about-hero {background:var(--gradient-bg);position:relative;overflow:hidden} .hero-section::before,.services-hero::before,.projects-hero::before,.skills-hero::before,.contact-hero::before,.about-hero::before {content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.2);z-index:1} .hero-section .container,.services-hero .container,.projects-hero .container,.skills-hero .container,.contact-hero .container,.about-hero .container {position:relative;z-index:2} .hero-section h1,.services-hero h1,.projects-hero h1,.skills-hero h1,.contact-hero h1,.about-hero h1 {color:#ffffff !important;text-shadow:3px 3px 6px rgba(0,0,0,0.5),1px 1px 2px rgba(0,0,0,0.3),0 0 20px rgba(255,255,255,0.1);font-weight:700;letter-spacing:-0.5px;animation:fadeInUp 1s ease-out} .hero-section h2,.services-hero h2,.projects-hero h2,.skills-hero h2,.contact-hero h2,.about-hero h2 {color:#fef3c7 !important;text-shadow:2px 2px 4px rgba(0,0,0,0.4),1px 1px 2px rgba(0,0,0,0.2);font-weight:600;letter-spacing:0.5px;animation:fadeInUp 1s ease-out 0.2s both} .hero-section .lead,.services-hero .lead,.projects-hero .lead,.skills-hero .lead,.contact-hero .lead,.about-hero .lead {color:#fef9e7 !important;text-shadow:2px 2px 4px rgba(0,0,0,0.4),1px 1px 2px rgba(0,0,0,0.2);font-weight:500;letter-spacing:0.3px;font-style:italic;animation:fadeInUp 1s ease-out 0.4s both} .hero-section p,.services-hero p,.projects-hero p,.skills-hero p,.contact-hero p,.about-hero p {color:#fef9e7 !important;text-shadow:2px 2px 4px rgba(0,0,0,0.4),1px 1px 2px rgba(0,0,0,0.2);animation:fadeInUp 1s ease-out 0.4s both} .hero-section .text-primary,.services-hero .text-primary,.projects-hero .text-primary,.skills-hero .text-primary,.contact-hero .text-primary,.about-hero .text-primary {color:#ffffff !important;text-shadow:3px 3px 6px rgba(0,0,0,0.5),1px 1px 2px rgba(0,0,0,0.3),0 0 20px rgba(255,255,255,0.1)} .hero-section .text-secondary,.services-hero .text-secondary,.projects-hero .text-secondary,.skills-hero .text-secondary,.contact-hero .text-secondary,.about-hero .text-secondary {color:#fef3c7 !important;text-shadow:2px 2px 4px rgba(0,0,0,0.4),1px 1px 2px rgba(0,0,0,0.2)} .hero-section .text-muted,.services-hero .text-muted,.projects-hero .text-muted,.skills-hero .text-muted,.contact-hero .text-muted,.about-hero .text-muted {color:#fef9e7 !important;text-shadow:2px 2px 4px rgba(0,0,0,0.4),1px 1px 2px rgba(0,0,0,0.2)} .hero-section .cta-buttons,.services-hero .cta-buttons,.projects-hero .cta-buttons,.skills-hero .cta-buttons,.contact-hero .cta-buttons,.about-hero .cta-buttons {animation:fadeInUp 1s ease-out 0.6s both} @keyframes fadeInUp {from {opacity:0;transform:translateY(30px)} to {opacity:1;transform:translateY(0)} } .hero-section h1:hover,.services-hero h1:hover,.projects-hero h1:hover,.skills-hero h1:hover,.contact-hero h1:hover,.about-hero h1:hover {transform:scale(1.02);transition:transform 0.3s ease} .hero-section .lead:hover,.services-hero .lead:hover,.projects-hero .lead:hover,.skills-hero .lead:hover,.contact-hero .lead:hover,.about-hero .lead:hover {transform:scale(1.01);transition:transform 0.3s ease} .hero-section .btn-primary,.services-hero .btn-primary,.projects-hero .btn-primary,.skills-hero .btn-primary,.contact-hero .btn-primary,.about-hero .btn-primary {background:#ffffff;color:var(--primary-color);border:none;font-weight:600;box-shadow:0 4px 15px rgba(255,255,255,0.3)} .hero-section .btn-primary:hover,.services-hero .btn-primary:hover,.projects-hero .btn-primary:hover,.skills-hero .btn-primary:hover,.contact-hero .btn-primary:hover,.about-hero .btn-primary:hover {background:#f8fafc;color:var(--primary-color);transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,255,255,0.4)} .hero-section .btn-outline-primary,.services-hero .btn-outline-primary,.projects-hero .btn-outline-primary,.skills-hero .btn-outline-primary,.contact-hero .btn-outline-primary,.about-hero .btn-outline-primary {border:2px solid #ffffff;color:#ffffff;background:transparent;font-weight:600} .hero-section .btn-outline-primary:hover,.services-hero .btn-outline-primary:hover,.projects-hero .btn-outline-primary:hover,.skills-hero .btn-outline-primary:hover,.contact-hero .btn-outline-primary:hover,.about-hero .btn-outline-primary:hover {background:#ffffff;color:var(--primary-color);border-color:#ffffff;transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,255,255,0.3)} .card {border:none;transition:all 0.3s ease;border-radius:15px} .card:hover {transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,0.1) !important} .service-card,.project-card,.skill-card,.training-card {height:100%;border:none;transition:all 0.3s ease} .service-card:hover,.project-card:hover,.skill-card:hover,.training-card:hover {transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,0.15) !important} .btn {border-radius:25px;padding:12px 30px;font-weight:500;text-transform:none;transition:all 0.3s ease;border:none} .btn-lg {padding:15px 35px;font-size:1.1rem} .btn-primary {background:var(--gradient-bg);border:none} .btn-primary:hover {background:linear-gradient(135deg,#1c3c87 0%,#4f7ed6 100%);transform:translateY(-2px);box-shadow:0 8px 25px rgba(30,58,138,0.3)} .btn-outline-primary {border:2px solid var(--primary-color);color:var(--primary-color)} .btn-outline-primary:hover {background:var(--primary-color);transform:translateY(-2px);box-shadow:0 8px 25px rgba(30,58,138,0.3)} .badge {padding:8px 15px;font-weight:500;border-radius:20px} .progress {height:8px;border-radius:10px;background-color:var(--light-color)} .progress-bar {border-radius:10px;transition:width 0.6s ease} .skill-item {transition:all 0.3s ease;border-radius:15px} .skill-item:hover {background-color:var(--light-color);transform:translateY(-3px)} .skill-level {margin-top:15px} .stat-item {padding:20px;transition:all 0.3s ease} .stat-item:hover {transform:translateY(-5px)} .project-header {border-bottom:1px solid var(--light-color);padding-bottom:15px} .tech-stack .badge {margin:2px;font-size:0.75rem} .gallery-item {transition:all 0.3s ease} .gallery-item:hover {transform:scale(1.05)} .image-placeholder {display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all 0.3s ease} .image-placeholder:hover {background-color:rgba(96,165,250,0.1) !important} .form-control,.form-select {border-radius:10px;border:2px solid #e2e8f0;padding:12px 20px;transition:all 0.3s ease;background-color:#ffffff;color:#1f2937;font-size:1rem;font-weight:500;line-height:1.5} .form-control:focus,.form-select:focus {border-color:var(--primary-color);box-shadow:0 0 0 0.2rem rgba(30,58,138,0.25);background-color:#ffffff;color:#1f2937;outline:none} .form-control::placeholder {color:#6b7280;opacity:1} .form-control:focus::placeholder {color:#9ca3af} .form-select {cursor:pointer} .form-select option {color:#1f2937;background-color:#ffffff} .form-label {font-weight:600;color:var(--dark-color);margin-bottom:8px;font-size:1rem} .form-check-input {width:1.2rem;height:1.2rem;border:2px solid #e2e8f0;border-radius:0.25rem;background-color:#ffffff;transition:all 0.3s ease} .form-check-input:checked {background-color:var(--primary-color);border-color:var(--primary-color)} .form-check-input:focus {border-color:var(--primary-color);box-shadow:0 0 0 0.2rem rgba(30,58,138,0.25);outline:none} .form-check-label {color:#4b5563;font-weight:500;margin-left:0.5rem;cursor:pointer} textarea.form-control {min-height:120px;resize:vertical;font-family:inherit} .contact-content .form-control,.contact-content .form-select {border:2px solid #e5e7eb;background-color:#ffffff;color:#111827} .contact-content .form-control:focus,.contact-content .form-select:focus {border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1);background-color:#ffffff} .contact-content .form-label {color:#374151;font-weight:600} .form-control.is-invalid,.form-select.is-invalid {border-color:#dc2626;background-color:#fef2f2;color:#991b1b} .form-control.is-invalid:focus,.form-select.is-invalid:focus {border-color:#dc2626;box-shadow:0 0 0 0.2rem rgba(220,38,38,0.25)} .form-control.is-valid,.form-select.is-valid {border-color:#16a34a;background-color:#f0fdf4;color:#15803d} .form-control.is-valid:focus,.form-select.is-valid:focus {border-color:#16a34a;box-shadow:0 0 0 0.2rem rgba(22,163,74,0.25)} .form-control:hover:not(:focus),.form-select:hover:not(:focus) {border-color:#d1d5db} .form-label.required::after {content:" *";color:#dc2626;font-weight:700} .contact-content .btn-primary {background:linear-gradient( 135deg,var(--primary-color),var(--secondary-color) );border:none;padding:12px 32px;font-weight:600;border-radius:8px;box-shadow:0 4px 15px rgba(30,58,138,0.3);transition:all 0.3s ease} .contact-content .btn-primary:hover {transform:translateY(-2px);box-shadow:0 8px 25px rgba(30,58,138,0.4)} .contact-content .btn-primary:active {transform:translateY(0)} .contact-info .contact-item a {color:inherit;text-decoration:none;transition:all 0.3s ease;position:relative} .contact-info .contact-item a:hover {color:var(--primary-color);text-decoration:none;transform:translateX(3px)} .contact-info .contact-item a::after {content:"";position:absolute;width:0;height:2px;bottom:-2px;left:0;background:linear-gradient( 135deg,var(--primary-color) 0%,var(--secondary-color) 100% );transition:width 0.3s ease} .contact-info .contact-item a:hover::after {width:100%} .alert {border-radius:10px;padding:1rem 1.5rem;border:none;font-weight:500} .alert-info {background-color:#eff6ff;color:#1e40af} .alert-success {background-color:#f0fdf4;color:#15803d} .alert-danger {background-color:#fef2f2;color:#dc2626} .org-item {padding:20px;transition:all 0.3s ease;border-radius:10px} .org-item:hover {background-color:var(--light-color);transform:translateY(-3px)} .azure-service {background-color:var(--light-color);border-radius:10px;margin-bottom:10px;transition:all 0.3s ease} .azure-service:hover {background-color:rgba(96,165,250,0.1);transform:translateY(-2px)} .stats-section {background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);position:relative;overflow:hidden} .stats-section::before {content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient( ellipse at center,rgba(30,58,138,0.03) 0%,transparent 70% );pointer-events:none} .stats-section h2 {color:var(--primary-color);font-weight:700;position:relative;z-index:2} .stats-section .lead {position:relative;z-index:2} .stat-card {background:rgba(255,255,255,0.9);border-radius:20px;padding:3rem 2rem;text-align:center;position:relative;border:1px solid rgba(30,58,138,0.1);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,0.1);overflow:hidden} .stat-card::before {content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient( 90deg,var(--primary-color),var(--secondary-color) );transform:translateX(-100%);transition:transform 0.6s ease} .stat-card:hover::before {transform:translateX(0)} .stat-card:hover {transform:translateY(-10px);box-shadow:0 20px 40px rgba(30,58,138,0.2);border-color:var(--secondary-color)} .stat-icon {width:80px;height:80px;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient( 135deg,var(--primary-color),var(--secondary-color) );color:white;font-size:2rem;box-shadow:0 8px 25px rgba(30,58,138,0.3);transition:all 0.3s ease} .stat-card:hover .stat-icon {transform:scale(1.1) rotate(5deg);box-shadow:0 12px 30px rgba(30,58,138,0.4)} .stat-number {font-size:3.5rem;font-weight:800;color:var(--primary-color);line-height:1;margin-bottom:0.5rem;text-shadow:0 2px 4px rgba(0,0,0,0.1);display:inline-block} .stat-suffix {font-size:2rem;font-weight:600;color:var(--secondary-color);display:inline-block;margin-left:0.2rem} .stat-label {font-size:1.1rem;color:var(--text-color);font-weight:500;margin-top:0.5rem;text-transform:uppercase;letter-spacing:0.5px} @keyframes countUp {from {opacity:0;transform:translateY(20px)} to {opacity:1;transform:translateY(0)} } .stat-number.counting {animation:countUp 0.6s ease-out} @media (max-width:768px) {.stat-card {padding:2rem 1.5rem;margin-bottom:2rem} .stat-number {font-size:2.5rem} .stat-suffix {font-size:1.5rem} .stat-icon {width:60px;height:60px;font-size:1.5rem} } .wave-separator,.diagonal-separator,.cloud-separator,.angular-separator {position:relative;height:120px;overflow:hidden;line-height:0;transform:rotate(180deg)} .wave-separator svg,.diagonal-separator svg,.cloud-separator svg,.angular-separator svg {position:relative;display:block;width:calc(100% + 1.3px);height:120px;transition:all 0.3s ease} .wave-separator {background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);margin-bottom:-1px;cursor:pointer;transition:all 0.4s ease} .wave-separator svg path {fill:#ffffff;transition:all 0.4s ease} .wave-separator.natural-clouds {background:linear-gradient(135deg,#e6f0fa 0%,#f0f6fc 50%,#fafcfe 100%);box-shadow:0 10px 30px rgba(230,240,250,0.4)} .wave-separator.natural-clouds svg path {fill:#e6f0fa;filter:drop-shadow(0 2px 4px rgba(230,240,250,0.3))} .wave-separator.natural-clouds::before {background:linear-gradient( 45deg,rgba(230,240,250,0.1) 0%,rgba(240,246,252,0.1) 50%,rgba(230,240,250,0.1) 100% )} .wave-separator.natural-clouds .floating-particles::before,.wave-separator.natural-clouds .floating-particles::after {background:rgba(230,240,250,0.6);box-shadow:0 0 6px rgba(230,240,250,0.4)} .wave-separator.natural-clouds::after {content:"";position:absolute;width:100%;height:100%;background:radial-gradient( circle at 30% 70%,rgba(255,255,255,0.4) 0%,transparent 50% ),radial-gradient( circle at 70% 30%,rgba(230,240,250,0.3) 0%,transparent 50% ),radial-gradient( circle at 50% 50%,rgba(240,246,252,0.2) 0%,transparent 50% );pointer-events:none;z-index:1;animation:cloud-patterns 10s ease-in-out infinite} .diagonal-separator {background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);margin-bottom:-1px;transform:rotate(0deg)} .diagonal-separator svg path {fill:#f8fafc;transition:all 0.4s ease} .diagonal-separator:hover svg path {fill:#e2e8f0;transform:translateX(5px)} .cloud-separator {background:linear-gradient(135deg,#e2e8f0 0%,#f1f5f9 100%);margin-bottom:-1px;cursor:pointer;transition:all 0.4s ease} .cloud-separator svg path {fill:#ffffff;animation:cloud-drift 8s ease-in-out infinite;transition:all 0.4s ease} .cloud-separator.natural-clouds {background:linear-gradient(135deg,#e6f0fa 0%,#f0f6fc 50%,#fafcfe 100%);box-shadow:0 10px 30px rgba(230,240,250,0.4)} .cloud-separator.natural-clouds svg path {fill:#e6f0fa;filter:drop-shadow(0 2px 4px rgba(230,240,250,0.3))} .cloud-separator.natural-clouds::before {background:linear-gradient( 45deg,rgba(230,240,250,0.1) 0%,rgba(240,246,252,0.1) 50%,rgba(230,240,250,0.1) 100% )} .cloud-separator.natural-clouds .floating-particles::before,.cloud-separator.natural-clouds .floating-particles::after {background:rgba(230,240,250,0.6);box-shadow:0 0 6px rgba(230,240,250,0.4)} .cloud-separator.natural-clouds::after {content:"";position:absolute;width:100%;height:100%;background:radial-gradient( circle at 20% 80%,rgba(255,255,255,0.3) 0%,transparent 50% ),radial-gradient( circle at 80% 20%,rgba(230,240,250,0.2) 0%,transparent 50% ),radial-gradient( circle at 40% 40%,rgba(240,246,252,0.1) 0%,transparent 50% );pointer-events:none;z-index:1;animation:cloud-patterns 12s ease-in-out infinite} @keyframes cloud-patterns {0%,100% {opacity:0.3;transform:scale(1) rotate(0deg)} 50% {opacity:0.6;transform:scale(1.1) rotate(5deg)} } @keyframes cloud-drift {0%,100% {transform:translateX(0px) scale(1)} 33% {transform:translateX(10px) scale(1.02)} 66% {transform:translateX(-5px) scale(0.98)} } .angular-separator {background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);margin-bottom:-1px;transform:rotate(0deg)} .angular-separator svg path {fill:#f8fafc;animation:angular-pulse 4s ease-in-out infinite} @keyframes angular-pulse {0%,100% {opacity:1;transform:scaleY(1)} 50% {opacity:0.8;transform:scaleY(1.05)} } .cloud-separator:hover svg path {animation-duration:4s} .angular-separator:hover svg path {animation-duration:2s} .wave-separator::before,.diagonal-separator::before,.cloud-separator::before,.angular-separator::before {content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient( 45deg,rgba(30,58,138,0.02) 0%,rgba(96,165,250,0.02) 50%,rgba(30,58,138,0.02) 100% );pointer-events:none;z-index:1} .wave-separator svg,.diagonal-separator svg,.cloud-separator svg,.angular-separator svg {z-index:2;position:relative} @media (max-width:768px) {.wave-separator,.diagonal-separator,.cloud-separator,.angular-separator {height:80px} .wave-separator svg,.diagonal-separator svg,.cloud-separator svg,.angular-separator svg {height:80px} } @media (max-width:480px) {.wave-separator,.diagonal-separator,.cloud-separator,.angular-separator {height:60px} .wave-separator svg,.diagonal-separator svg,.cloud-separator svg,.angular-separator svg {height:60px} } @media (prefers-color-scheme:dark) {.wave-separator {background:linear-gradient(135deg,#1e293b 0%,#334155 100%)} .diagonal-separator {background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%)} .cloud-separator {background:linear-gradient(135deg,#334155 0%,#475569 100%)} .angular-separator {background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%)} } .wave-separator::after {content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient( 90deg,transparent,rgba(255,255,255,0.1),transparent );animation:shimmer 3s infinite;z-index:3} @keyframes shimmer {0% {left:-100%} 100% {left:100%} } .diagonal-separator::after {content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient( 135deg,rgba(30,58,138,0.05) 0%,rgba(96,165,250,0.05) 100% );z-index:2;opacity:0;transition:opacity 0.3s ease} .diagonal-separator:hover::after {opacity:1} .cloud-separator {background-attachment:fixed;background-size:cover;background-position:center} .hero-section {position:relative;z-index:10} .summary-section {position:relative;z-index:9;background:#ffffff} .stats-section {position:relative;z-index:8} .wave-separator .floating-particles,.cloud-separator .floating-particles {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1} .floating-particles::before,.floating-particles::after {content:"";position:absolute;width:4px;height:4px;background:rgba(230,240,250,0.3);border-radius:50%;animation:float-particles 20s linear infinite} .floating-particles::before {top:20%;left:20%;animation-delay:0s} .floating-particles::after {top:60%;right:30%;animation-delay:10s} @keyframes float-particles {0% {transform:translateY(0) rotate(0deg);opacity:0} 10% {opacity:1} 90% {opacity:1} 100% {transform:translateY(-120px) rotate(360deg);opacity:0} } .hero-section .container,.summary-section .container,.stats-section .container {animation:fade-in-up 0.8s ease-out} @keyframes fade-in-up {from {opacity:0;transform:translateY(30px)} to {opacity:1;transform:translateY(0)} } .separator-animate {animation-play-state:paused} .separator-animate.in-view {animation-play-state:running} .wave-separator svg,.diagonal-separator svg,.cloud-separator svg,.angular-separator svg {will-change:transform} .wave-separator,.cloud-separator {position:relative;overflow:hidden} .wave-separator::after,.cloud-separator::after {transform-origin:center} .separator-ripple {position:absolute;border-radius:50%;background:rgba(230,240,250,0.4);transform:scale(0);animation:ripple-effect 0.6s ease-out;pointer-events:none;z-index:5} @keyframes ripple-effect {0% {transform:scale(0);opacity:1} 100% {transform:scale(4);opacity:0} } .cloud-separator:active {transform:scale(0.98)} .wave-separator.natural-clouds,.cloud-separator.natural-clouds {animation:gentle-glow 2s ease-in-out infinite} @keyframes gentle-glow {0%,100% {box-shadow:0 10px 30px rgba(230,240,250,0.4)} 50% {box-shadow:0 15px 40px rgba(230,240,250,0.6)} } .cloud-separator:hover {background:linear-gradient(135deg,#e6f0fa 0%,#f0f6fc 50%,#fafcfe 100%);box-shadow:0 15px 35px rgba(230,240,250,0.5);transform:translateY(-2px);transition:all 0.4s ease} .cloud-separator:hover svg path {fill:#e6f0fa;filter:drop-shadow(0 3px 6px rgba(230,240,250,0.4));transition:all 0.4s ease} .cloud-separator:hover::before {background:linear-gradient( 45deg,rgba(230,240,250,0.15) 0%,rgba(240,246,252,0.15) 50%,rgba(230,240,250,0.15) 100% );transition:all 0.4s ease} .cloud-separator:hover .floating-particles::before,.cloud-separator:hover .floating-particles::after {background:rgba(230,240,250,0.8);box-shadow:0 0 8px rgba(230,240,250,0.6);transform:scale(1.2);transition:all 0.4s ease} .cloud-separator:hover::after {content:"";position:absolute;width:100%;height:100%;background:radial-gradient( circle at 20% 80%,rgba(255,255,255,0.3) 0%,transparent 50% ),radial-gradient( circle at 80% 20%,rgba(230,240,250,0.2) 0%,transparent 50% ),radial-gradient( circle at 40% 40%,rgba(240,246,252,0.1) 0%,transparent 50% );pointer-events:none;z-index:1;animation:cloud-patterns 12s ease-in-out infinite} .separator-clicked {background:linear-gradient( 135deg,#e6f0fa 0%,#f0f6fc 50%,#fafcfe 100% ) !important;animation:success-pulse 0.8s ease-out} @keyframes success-pulse {0% {transform:scale(1);box-shadow:0 0 0 0 rgba(230,240,250,0.7)} 70% {transform:scale(1.02);box-shadow:0 0 0 10px rgba(230,240,250,0)} 100% {transform:scale(1);box-shadow:0 0 0 0 rgba(230,240,250,0)} } @media (prefers-reduced-motion:reduce) {.cloud-separator svg path,.angular-separator svg path {animation:none !important} .cloud-separator::after,.floating-particles::before,.floating-particles::after {animation:none !important} .diagonal-separator:hover svg path {transform:none !important} .separator-ripple {animation:none !important} } .professional-footer,.professional-footer .container,.professional-footer .container-fluid,footer.professional-footer {background-color:#f8fafc !important} .professional-footer {border-top:1px solid rgba(96,165,250,0.2);min-height:100px} .footer-cta,.footer-cta .container,.footer-cta .container-fluid {background-color:#f8fafc !important} .footer-cta {padding:60px 0;text-align:center;border-bottom:1px solid rgba(96,165,250,0.15)} .cta-heading {color:#1f2937;font-weight:700;margin-bottom:1rem;font-size:2.5rem} .cta-text {color:#1f2937;font-size:1.25rem;margin-bottom:2rem;opacity:0.8} .btn-footer-cta {background-color:#2563eb;color:white;border:none;padding:15px 40px;font-size:1.1rem;font-weight:600;border-radius:30px;transition:all 0.3s ease;text-decoration:none;display:inline-flex;align-items:center;box-shadow:0 4px 15px rgba(37,99,235,0.3)} .btn-footer-cta:hover {background-color:#60a5fa;color:white;transform:translateY(-2px);box-shadow:0 8px 25px rgba(96,165,250,0.4)} .footer-main,.footer-main .container,.footer-main .row,.footer-main .col-lg-4,.footer-main .col-lg-2,.footer-main .col-lg-3,.footer-main .col-md-6 {background-color:#f8fafc !important} .footer-main {padding:80px 0 60px} .footer-brand h5 {color:#1f2937;font-weight:700;margin-bottom:1rem;font-size:1.5rem} .footer-brand .brand-text {background:linear-gradient(135deg,#1e3a8a 0%,#60a5fa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .footer-description {color:#1f2937;line-height:1.6;margin-bottom:2rem;opacity:0.8} .footer-title {color:#1f2937;font-weight:600;margin-bottom:1.5rem;font-size:1.1rem;position:relative;padding-bottom:0.5rem} .footer-title::after {content:"";position:absolute;bottom:0;left:0;width:30px;height:2px;background:linear-gradient(135deg,#1e3a8a 0%,#60a5fa 100%);border-radius:2px} .footer-links {list-style:none;padding:0;margin:0} .footer-links li {margin-bottom:0.75rem} .footer-links a {color:#1f2937;text-decoration:none;transition:all 0.3s ease;opacity:0.8;display:block;position:relative;padding-left:1rem} .footer-links a::before {content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:4px;background-color:#60a5fa;border-radius:50%;transition:all 0.3s ease} .footer-links a:hover {color:#1e3a8a;opacity:1;transform:translateX(5px)} .footer-links a:hover::before {background-color:#1e3a8a;transform:translateY(-50%) scale(1.5)} .footer-contact {margin-bottom:2rem} .contact-item {display:flex;align-items:center;margin-bottom:1rem;color:#1f2937} .contact-item i {width:20px;color:#1e3a8a;margin-right:1rem;font-size:1.1rem} .contact-item span {opacity:0.8;transition:opacity 0.3s ease} .contact-item:hover span {opacity:1} .contact-item a {color:inherit;text-decoration:none;transition:all 0.3s ease;position:relative} .contact-item a:hover {color:#1e3a8a;text-decoration:none;transform:translateX(3px)} .contact-item a::after {content:"";position:absolute;width:0;height:2px;bottom:-2px;left:0;background:linear-gradient(135deg,#1e3a8a 0%,#60a5fa 100%);transition:width 0.3s ease} .contact-item a:hover::after {width:100%} .footer-social {margin-top:2rem} .social-links {display:flex;gap:1rem;margin-top:1rem} .social-link {display:flex;align-items:center;justify-content:center;width:45px;height:45px;background-color:#ffffff;color:#1e3a8a;border-radius:50%;text-decoration:none;transition:all 0.3s ease;border:2px solid #e5e7eb;font-size:1.2rem} .social-link:hover {background-color:#1e3a8a;color:white;transform:translateY(-3px);box-shadow:0 8px 20px rgba(30,58,138,0.3);border-color:#60a5fa} .footer-bottom,.footer-bottom .container,.footer-bottom .container-fluid,.footer-bottom .row,.footer-bottom .col-md-6 {background-color:#f8fafc !important} .footer-bottom {padding:30px 0;border-top:1px solid rgba(96,165,250,0.15)} .copyright-text {color:#1f2937;opacity:0.7;margin:0;font-size:0.9rem} .footer-bottom-links {display:flex;align-items:center;gap:1rem;justify-content:flex-end} .footer-bottom-links a {color:#1f2937;text-decoration:none;font-size:0.9rem;opacity:0.7;transition:all 0.3s ease} .footer-bottom-links a:hover {color:#1e3a8a;opacity:1} .footer-bottom-links .divider {color:#60a5fa;opacity:0.5} body footer,body .professional-footer,html footer,html .professional-footer {background-color:#f8fafc !important} .container,.container-fluid,.container-sm,.container-md,.container-lg,.container-xl {background-color:inherit !important} .professional-footer .container,.professional-footer .container-fluid {background-color:#f8fafc !important} @media (max-width:768px) {.cta-heading {font-size:2rem} .cta-text {font-size:1rem} .footer-main {padding:50px 0 30px} .footer-cta {padding:40px 0} .footer-brand h5 {font-size:1.3rem;text-align:center;margin-bottom:1rem} .footer-description {text-align:center;font-size:0.95rem;line-height:1.7;margin-bottom:2.5rem;padding:0 1rem} .footer-title {font-size:1.1rem;text-align:center;margin-bottom:1.5rem} .footer-title::after {left:50%;transform:translateX(-50%);width:40px} .footer-links {text-align:center;margin-bottom:2rem} .footer-links a {padding:0.5rem 0;justify-content:center;display:flex;align-items:center;font-size:0.95rem} .footer-links a::before {position:relative;margin-right:0.5rem;left:auto;top:auto;transform:none} .footer-contact {text-align:center;margin-bottom:2rem} .contact-item {justify-content:center;margin-bottom:1.2rem;font-size:0.95rem} .contact-item i {margin-right:0.8rem;font-size:1.1rem} .footer-social {text-align:center;margin-top:2rem} .social-links {justify-content:center;gap:1.2rem;flex-wrap:wrap} .social-link {width:50px;height:50px;font-size:1.3rem} .footer-bottom {padding:25px 0} .footer-bottom-links {justify-content:center;margin-top:1rem;flex-wrap:wrap;gap:0.8rem} .footer-bottom .col-md-6 {text-align:center;margin-bottom:1rem} .footer-bottom .text-md-end {text-align:center !important} .copyright-text {font-size:0.85rem;line-height:1.5} .footer-main .col-lg-4,.footer-main .col-lg-2,.footer-main .col-lg-3,.footer-main .col-md-6 {margin-bottom:3rem} .footer-main .col-lg-4:last-child,.footer-main .col-lg-2:last-child,.footer-main .col-lg-3:last-child,.footer-main .col-md-6:last-child {margin-bottom:1rem} } @media (max-width:576px) {.footer-main {padding:40px 0 25px} .footer-main .col-lg-4,.footer-main .col-lg-2,.footer-main .col-lg-3 {margin-bottom:2.5rem;padding:0 1.5rem} .footer-brand h5 {font-size:1.2rem} .footer-description {font-size:0.9rem;padding:0 0.5rem} .footer-title {font-size:1rem;margin-bottom:1.2rem} .footer-links a {font-size:0.9rem;padding:0.4rem 0} .contact-item {font-size:0.9rem;margin-bottom:1rem} .contact-item i {font-size:1rem;margin-right:0.7rem} .social-links {gap:1rem} .social-link {width:45px;height:45px;font-size:1.2rem} .btn-footer-cta {padding:12px 30px;font-size:1rem;width:100%;max-width:300px} .footer-bottom {padding:20px 0} .footer-bottom-links {gap:0.6rem;font-size:0.85rem} .footer-bottom-links a {padding:0.3rem 0.6rem} .copyright-text {font-size:0.8rem;padding:0 1rem} } @media (max-width:400px) {.footer-main {padding:35px 0 20px} .footer-main .col-lg-4,.footer-main .col-lg-2,.footer-main .col-lg-3 {padding:0 1rem;margin-bottom:2rem} .footer-brand h5 {font-size:1.1rem} .footer-description {font-size:0.85rem} .social-links {gap:0.8rem} .social-link {width:42px;height:42px;font-size:1.1rem} .footer-bottom-links {flex-direction:column;gap:0.5rem} .footer-bottom-links .divider {display:none} } @media (hover:none) and (pointer:coarse) {.footer-links a {min-height:44px;display:flex;align-items:center;padding:0.7rem 1rem;margin:0.2rem 0;border-radius:8px;transition:background-color 0.2s ease} .footer-links a:active {background-color:rgba(30,58,138,0.1);transform:scale(0.98)} .contact-item {min-height:44px;padding:0.5rem;border-radius:8px;transition:background-color 0.2s ease} .contact-item:active {background-color:rgba(30,58,138,0.05)} .social-link {min-width:44px;min-height:44px;transition:all 0.2s ease} .social-link:active {transform:scale(0.95);background-color:var(--primary-color);color:white} .btn-footer-cta {min-height:48px;font-size:1.1rem;transition:all 0.2s ease} .btn-footer-cta:active {transform:scale(0.98)} } .footer-main {contain:layout style} .footer-links,.social-links {contain:layout} @media (prefers-reduced-motion:reduce) {.footer-links a,.social-link,.contact-item {transition:none;transform:none} .footer-links a:hover,.social-link:hover {transform:none} } @media (prefers-contrast:high) {.footer-main {border-top:3px solid var(--primary-color)} .footer-links a {border:1px solid transparent} .footer-links a:focus,.footer-links a:hover {border-color:var(--primary-color);background-color:rgba(30,58,138,0.1)} .social-link {border:2px solid var(--primary-color)} .contact-item {border-left:3px solid transparent} .contact-item:hover {border-left-color:var(--primary-color)} } .whatsapp-float {position:fixed;bottom:20px;right:20px;width:60px;height:60px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1000;box-shadow:0 4px 20px rgba(37,211,102,0.4);transition:all 0.3s ease;animation:pulse 2s infinite} .whatsapp-float:hover {transform:scale(1.1);box-shadow:0 6px 30px rgba(37,211,102,0.6)} .whatsapp-float a {color:white;font-size:24px;text-decoration:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center} .whatsapp-float:active {transform:scale(0.95)} @keyframes pulse {0% {box-shadow:0 4px 20px rgba(37,211,102,0.4)} 50% {box-shadow:0 4px 20px rgba(37,211,102,0.6)} 100% {box-shadow:0 4px 20px rgba(37,211,102,0.4)} } .whatsapp-chat-modal {position:fixed;bottom:20px;right:20px;width:350px;height:500px;background:white;border-radius:15px;box-shadow:0 8px 30px rgba(0,0,0,0.15);display:none;z-index:1001;overflow:hidden;animation:slideUp 0.3s ease-out} .whatsapp-chat-modal.active {display:block} @keyframes slideUp {from {transform:translateY(100%);opacity:0} to {transform:translateY(0);opacity:1} } .chat-container {height:100%;display:flex;flex-direction:column} .chat-header {background:#075e54;color:white;padding:15px;display:flex;align-items:center;justify-content:space-between;border-radius:15px 15px 0 0} .chat-header-info {display:flex;align-items:center} .profile-img {width:40px;height:40px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:10px} .profile-img i {color:white;font-size:18px} .profile-details h4 {margin:0;font-size:16px;font-weight:600} .profile-details .status {font-size:12px;opacity:0.8} .chat-close {cursor:pointer;padding:5px;border-radius:50%;transition:background 0.3s ease} .chat-close:hover {background:rgba(255,255,255,0.1)} .chat-messages {flex:1;padding:20px;background:#e5ddd5;overflow-y:auto;display:flex;flex-direction:column;gap:15px} .message {max-width:80%;word-wrap:break-word} .message.received {align-self:flex-start} .message.sent {align-self:flex-end} .message-text {background:white;padding:10px 15px;border-radius:15px;box-shadow:0 2px 5px rgba(0,0,0,0.1);margin-bottom:5px} .message.sent .message-text {background:#dcf8c6} .message-time {font-size:11px;color:#666;text-align:right;margin-top:5px} .message.received .message-time {text-align:left} .chat-input-container {background:white;padding:15px;border-radius:0 0 15px 15px;border-top:1px solid #e0e0e0} .chat-input {display:flex;gap:10px;align-items:center} .chat-input input {flex:1;padding:10px 15px;border:1px solid #ddd;border-radius:25px;outline:none;font-size:14px} .chat-input input:focus {border-color:#25d366} .send-btn {background:#25d366;color:white;border:none;padding:10px 15px;border-radius:25px;cursor:pointer;font-size:14px;font-weight:500;transition:background 0.3s ease;white-space:nowrap} .send-btn:hover {background:#128c7e} .send-btn i {margin-right:5px} .typing-indicator {display:flex;align-items:center;gap:5px;color:#666;font-size:12px;padding:10px 15px;background:white;border-radius:15px;max-width:80%;align-self:flex-start} .typing-dots {display:flex;gap:3px} .typing-dots span {width:4px;height:4px;background:#666;border-radius:50%;animation:typing 1.4s infinite} .typing-dots span:nth-child(2) {animation-delay:0.2s} .typing-dots span:nth-child(3) {animation-delay:0.4s} @keyframes typing {0%,60%,100% {transform:translateY(0)} 30% {transform:translateY(-10px)} } @media (max-width:768px) {.whatsapp-chat-modal {width:calc(100% - 40px);height:70vh;bottom:90px;right:20px} .whatsapp-float {bottom:20px;right:20px;width:55px;height:55px} .whatsapp-float a {font-size:22px} } @media (max-width:480px) {.whatsapp-chat-modal {width:calc(100% - 20px);height:75vh;bottom:80px;right:10px} .send-btn {padding:8px 12px;font-size:12px} } .whatsapp-chat-modal.closing {animation:slideDown 0.3s ease-out forwards} @keyframes slideDown {from {transform:translateY(0);opacity:1} to {transform:translateY(100%);opacity:0} } @media (max-width:400px) {.chat-header {padding:12px} .profile-details h4 {font-size:14px} .profile-details .status {font-size:11px} .chat-messages {padding:15px} .chat-input-container {padding:12px} .chat-input input {padding:8px 12px;font-size:13px} } .interest-icon {display:flex;justify-content:center;align-items:center;margin-bottom:1rem} .interest-icon i {font-size:4rem;color:var(--primary-color);transition:all 0.3s ease;text-shadow:0 2px 8px rgba(30,58,138,0.2)} .interest-icon i:hover {transform:scale(1.1);color:var(--secondary-color);text-shadow:0 4px 12px rgba(30,58,138,0.3)} .interest-icon-small {display:flex;justify-content:center;align-items:center;margin-bottom:0.75rem} .interest-icon-small i {font-size:2.5rem;color:var(--primary-color);transition:all 0.3s ease;text-shadow:0 2px 6px rgba(30,58,138,0.15)} .interest-icon-small i:hover {transform:scale(1.05);color:var(--secondary-color);text-shadow:0 3px 8px rgba(30,58,138,0.25)} .interest-card {background:#ffffff;border-radius:15px;box-shadow:0 5px 20px rgba(30,58,138,0.1);transition:all 0.3s ease;border:1px solid rgba(30,58,138,0.05);overflow:hidden} .interest-card:hover {transform:translateY(-5px);box-shadow:0 15px 40px rgba(30,58,138,0.15);border-color:rgba(30,58,138,0.1)} .interest-card.secondary {background:#f8fafc;border:1px solid rgba(30,58,138,0.08)} .interest-card.secondary:hover {background:#ffffff;transform:translateY(-3px);box-shadow:0 10px 30px rgba(30,58,138,0.12)} .interest-title {color:var(--primary-color);font-weight:600;margin-bottom:1rem;font-size:1.25rem} .interest-title-small {color:var(--primary-color);font-weight:600;margin-bottom:0.75rem;font-size:1.1rem} .interest-description {color:#6c757d;line-height:1.6;margin-bottom:1.5rem;font-size:0.95rem} .interest-description-small {color:#6c757d;line-height:1.5;font-size:0.9rem} .interest-tags {display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center} .tag {background:linear-gradient( 135deg,var(--primary-color) 0%,var(--secondary-color) 100% );color:white;padding:0.25rem 0.75rem;border-radius:20px;font-size:0.8rem;font-weight:500;text-transform:uppercase;letter-spacing:0.5px;box-shadow:0 2px 6px rgba(30,58,138,0.2);transition:all 0.3s ease} .tag:hover {transform:translateY(-1px);box-shadow:0 4px 10px rgba(30,58,138,0.3)} @media (max-width:768px) {.interest-icon i {font-size:3.5rem} .interest-icon-small i {font-size:2rem} .interest-title {font-size:1.1rem} .interest-title-small {font-size:1rem} .interest-description {font-size:0.9rem} .interest-description-small {font-size:0.85rem} } @media (max-width:576px) {.interest-icon i {font-size:3rem} .interest-icon-small i {font-size:1.75rem} .tag {font-size:0.75rem;padding:0.2rem 0.6rem} }