body { margin: 0; align-items: center; color: white; background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2000 1400%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter id=%22b%22 x=%22-200%25%22 y=%22-200%25%22 width=%22500%25%22 height=%22500%25%22%3E%3CfeGaussianBlur in=%22SourceGraphic%22 stdDeviation=%2220%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath fill=%22%23023%22 d=%22M0 0h2000v1400H0z%22%2F%3E%3Cellipse cx=%2289.104%22 cy=%22125.227%22 rx=%222.087%22 ry=%221.764%22 fill=%22%23fff%22 opacity=%22.272%22%2F%3E%3Cellipse cx=%22375.638%22 cy=%2224.963%22 rx=%221.097%22 ry=%221.03%22 fill=%22%23fff%22 opacity=%22.905%22%2F%3E%3Cellipse cx=%22486.357%22 cy=%22121.885%22 rx=%222.171%22 ry=%221.787%22 fill=%22%23fff%22 opacity=%22.04%22%2F%3E%3Cellipse cx=%22698.72%22 cy=%2246.051%22 rx=%222.141%22 ry=%221.934%22 fill=%22%23fff%22 opacity=%22.109%22%2F%3E%3Cellipse cx=%22994.081%22 cy=%2210.715%22 rx=%221.803%22 ry=%221.522%22 fill=%22%23fff%22 opacity=%22.674%22%2F%3E%3Cellipse cx=%221027.511%22 cy=%22100.932%22 rx=%222.385%22 ry=%221.923%22 fill=%22%23fff%22 opacity=%22.427%22%2F%3E%3Cellipse cx=%221287.979%22 cy=%22139.542%22 rx=%221.416%22 ry=%221.318%22 fill=%22%23fff%22 opacity=%22.36%22%2F%3E%3Cellipse cx=%221486.189%22 cy=%2237.2%22 rx=%221.226%22 ry=%221.211%22 fill=%22%23fff%22 opacity=%22-.102%22%2F%3E%3Cellipse cx=%221635.839%22 cy=%2216.624%22 rx=%221.504%22 ry=%221.039%22 fill=%22%23fff%22 opacity=%22.669%22%2F%3E%3Cellipse cx=%221837.096%22 cy=%22134.351%22 rx=%221.925%22 ry=%221.887%22 fill=%22%23fff%22 opacity=%22.394%22%2F%3E%3Cellipse cx=%2230.167%22 cy=%22190.851%22 rx=%221.932%22 ry=%221.468%22 fill=%22%23fff%22 opacity=%22.144%22%2F%3E%3Cellipse cx=%22394.846%22 cy=%22144.202%22 rx=%221.734%22 ry=%221.394%22 fill=%22%23fff%22 opacity=%22.633%22%2F%3E%3Cellipse cx=%22446.734%22 cy=%22141.578%22 rx=%221.861%22 ry=%221.799%22 fill=%22%23fff%22 opacity=%22.536%22%2F%3E%3Cellipse cx=%22671.653%22 cy=%22184.937%22 rx=%221.919%22 ry=%221.601%22 fill=%22%23fff%22 opacity=%22.21%22%2F%3E%3Cellipse cx=%22963.3%22 cy=%22242.983%22 rx=%221.517%22 ry=%221.187%22 fill=%22%23fff%22 opacity=%22.031%22%2F%3E%3Cellipse cx=%221021.417%22 cy=%22202.589%22 rx=%221.308%22 ry=%221.144%22 fill=%22%23fff%22 opacity=%22.331%22%2F%3E%3Cellipse cx=%221355.778%22 cy=%22203.31%22 rx=%222.145%22 ry=%221.776%22 fill=%22%23fff%22 opacity=%22.329%22%2F%3E%3Cellipse cx=%221419.179%22 cy=%22263.679%22 rx=%221.669%22 ry=%221.383%22 fill=%22%23fff%22 opacity=%22-.059%22%2F%3E%3Cellipse cx=%221612.62%22 cy=%22143.255%22 rx=%221.886%22 ry=%221.485%22 fill=%22%23fff%22 opacity=%22.717%22%2F%3E%3Cellipse cx=%221950.811%22 cy=%22193.804%22 rx=%222.317%22 ry=%221.888%22 fill=%22%23fff%22 opacity=%22.059%22%2F%3E%3Cellipse cx=%2246.607%22 cy=%22378.352%22 rx=%221.68%22 ry=%221.351%22 fill=%22%23fff%22 opacity=%22.145%22%2F%3E%3Cellipse cx=%22237.367%22 cy=%22419.865%22 rx=%221.435%22 ry=%221.388%22 fill=%22%23fff%22 opacity=%22.61%22%2F%3E%3Cellipse cx=%22415.516%22 cy=%22382.888%22 rx=%221.436%22 ry=%221.074%22 fill=%22%23fff%22 opacity=%22.605%22%2F%3E%3Cellipse cx=%22686.802%22 cy=%22394.326%22 rx=%221.784%22 ry=%221.501%22 fill=%22%23fff%22 opacity=%22-.094%22%2F%3E%3Cellipse cx=%22902.693%22 cy=%22327.878%22 rx=%221.676%22 ry=%221.59%22 fill=%22%23fff%22 opacity=%22.287%22%2F%3E%3Cellipse cx=%221142.715%22 cy=%22330.92%22 rx=%222.045%22 ry=%221.966%22 fill=%22%23fff%22 opacity=%22.315%22%2F%3E%3Cellipse cx=%221342.619%22 cy=%22398.756%22 rx=%221.544%22 ry=%221.357%22 fill=%22%23fff%22 opacity=%22.8%22%2F%3E%3Cellipse cx=%221402.427%22 cy=%22330.999%22 rx=%221.207%22 ry=%221.19%22 fill=%22%23fff%22 opacity=%22.223%22%2F%3E%3Cellipse cx=%221742.022%22 cy=%22283.027%22 rx=%221.292%22 ry=%221.176%22 fill=%22%23fff%22 opacity=%22.509%22%2F%3E%3Cellipse cx=%221946.773%22 cy=%22311.49%22 rx=%221.791%22 ry=%221.408%22 fill=%22%23fff%22 opacity=%22.508%22%2F%3E%3Cellipse cx=%22122.468%22 cy=%22452.221%22 rx=%221.845%22 ry=%221.773%22 fill=%22%23fff%22 opacity=%22.505%22%2F%3E%3Cellipse cx=%22341.999%22 cy=%22483.866%22 rx=%222.321%22 ry=%221.916%22 fill=%22%23fff%22 opacity=%22.123%22%2F%3E%3Cellipse cx=%22465.36%22 cy=%22533.12%22 rx=%221.089%22 ry=%221.018%22 fill=%22%23fff%22 opacity=%22.439%22%2F%3E%3Cellipse cx=%22797.565%22 cy=%22505.446%22 rx=%221.666%22 ry=%221.183%22 fill=%22%23fff%22 opacity=%22.194%22%2F%3E%3Cellipse cx=%22830.986%22 cy=%22477.49%22 rx=%221.548%22 ry=%221.287%22 fill=%22%23fff%22 opacity=%22.037%22%2F%3E%3Cellipse cx=%221156.402%22 cy=%22466.198%22 rx=%221.178%22 ry=%221.09%22 fill=%22%23fff%22 opacity=%22.084%22%2F%3E%3Cellipse cx=%221294.106%22 cy=%22544.175%22 rx=%221.405%22 ry=%221.166%22 fill=%22%23fff%22 opacity=%22.789%22%2F%3E%3Cellipse cx=%221579.746%22 cy=%22544.092%22 rx=%221.832%22 ry=%221.763%22 fill=%22%23fff%22 opacity=%22.097%22%2F%3E%3Cellipse cx=%221642.604%22 cy=%22480.109%22 rx=%222.129%22 ry=%221.869%22 fill=%22%23fff%22 opacity=%22.506%22%2F%3E%3Cellipse cx=%221885.604%22 cy=%22421.242%22 rx=%221.608%22 ry=%221.132%22 fill=%22%23fff%22 opacity=%22.424%22%2F%3E%3Cellipse cx=%22172.616%22 cy=%22682.338%22 rx=%221.809%22 ry=%221.484%22 fill=%22%23fff%22 opacity=%22.406%22%2F%3E%3Cellipse cx=%22251.041%22 cy=%22689.525%22 rx=%221.654%22 ry=%221.467%22 fill=%22%23fff%22 opacity=%22.417%22%2F%3E%3Cellipse cx=%22462.542%22 cy=%22659.677%22 rx=%222.123%22 ry=%221.82%22 fill=%22%23fff%22 opacity=%22.769%22%2F%3E%3Cellipse cx=%22710.485%22 cy=%22568.666%22 rx=%221.322%22 ry=%221.216%22 fill=%22%23fff%22 opacity=%22.242%22%2F%3E%3Cellipse cx=%22949.632%22 cy=%22647.215%22 rx=%221.498%22 ry=%221.476%22 fill=%22%23fff%22 opacity=%22-.051%22%2F%3E%3Cellipse cx=%221139.909%22 cy=%22660.101%22 rx=%221.27%22 ry=%221.132%22 fill=%22%23fff%22 opacity=%22.535%22%2F%3E%3Cellipse cx=%221386.774%22 cy=%22574.707%22 rx=%221.978%22 ry=%221.772%22 fill=%22%23fff%22 opacity=%22.256%22%2F%3E%3Cellipse cx=%221574.011%22 cy=%22617.194%22 rx=%222.068%22 ry=%221.59%22 fill=%22%23fff%22 opacity=%22.711%22%2F%3E%3Cellipse cx=%221640.43%22 cy=%22578.829%22 rx=%221.818%22 ry=%221.742%22 fill=%22%23fff%22 opacity=%22.883%22%2F%3E%3Cellipse cx=%221992.171%22 cy=%22656.889%22 rx=%221.75%22 ry=%221.566%22 fill=%22%23fff%22 opacity=%22-.007%22%2F%3E%3Cellipse cx=%2297.812%22 cy=%22785.164%22 rx=%221.893%22 ry=%221.628%22 fill=%22%23fff%22 opacity=%22.487%22%2F%3E%3Cellipse cx=%22266.874%22 cy=%22712.323%22 rx=%221.736%22 ry=%221.563%22 fill=%22%23fff%22 opacity=%22.584%22%2F%3E%3Cellipse cx=%22498.479%22 cy=%22836.891%22 rx=%221.491%22 ry=%221.343%22 fill=%22%23fff%22 opacity=%22.52%22%2F%3E%3Cellipse cx=%22762.646%22 cy=%22776.29%22 rx=%222.483%22 ry=%221.997%22 fill=%22%23fff%22 opacity=%22.619%22%2F%3E%3Cellipse cx=%22916.526%22 cy=%22718.274%22 rx=%221.151%22 ry=%221.141%22 fill=%22%23fff%22 opacity=%22.081%22%2F%3E%3Cellipse cx=%221003.467%22 cy=%22702.765%22 rx=%221.849%22 ry=%221.532%22 fill=%22%23fff%22 opacity=%22.21%22%2F%3E%3Cellipse cx=%221271.709%22 cy=%22737.436%22 rx=%221.469%22 ry=%221.356%22 fill=%22%23fff%22 opacity=%22.375%22%2F%3E%3Cellipse cx=%221513.289%22 cy=%22828.52%22 rx=%221.566%22 ry=%221.1%22 fill=%22%23fff%22 opacity=%22.663%22%2F%3E%3Cellipse cx=%221724.973%22 cy=%22727.64%22 rx=%222.086%22 ry=%221.772%22 fill=%22%23fff%22 opacity=%22.592%22%2F%3E%3Cellipse cx=%221897.969%22 cy=%22729.439%22 rx=%222.12%22 ry=%221.883%22 fill=%22%23fff%22 opacity=%22.789%22%2F%3E%3Cellipse cx=%2217.915%22 cy=%22962.89%22 rx=%221.627%22 ry=%221.504%22 fill=%22%23fff%22 opacity=%22.275%22%2F%3E%3Cellipse cx=%22348.247%22 cy=%22841.791%22 rx=%221.597%22 ry=%221.32%22 fill=%22%23fff%22 opacity=%22-.098%22%2F%3E%3Cellipse cx=%22410.847%22 cy=%22905.321%22 rx=%222.202%22 ry=%221.726%22 fill=%22%23fff%22 opacity=%22-.086%22%2F%3E%3Cellipse cx=%22656.278%22 cy=%22967.465%22 rx=%221.972%22 ry=%221.575%22 fill=%22%23fff%22 opacity=%22.241%22%2F%3E%3Cellipse cx=%22943.777%22 cy=%22847.983%22 rx=%222.359%22 ry=%221.999%22 fill=%22%23fff%22 opacity=%22.074%22%2F%3E%3Cellipse cx=%221075.936%22 cy=%22970.555%22 rx=%222.382%22 ry=%221.943%22 fill=%22%23fff%22 opacity=%22-.128%22%2F%3E%3Cellipse cx=%221228.32%22 cy=%22952.166%22 rx=%222.299%22 ry=%221.825%22 fill=%22%23fff%22 opacity=%22-.205%22%2F%3E%3Cellipse cx=%221426.543%22 cy=%22861.716%22 rx=%221.97%22 ry=%221.919%22 fill=%22%23fff%22 opacity=%22.008%22%2F%3E%3Cellipse cx=%221715.774%22 cy=%22954.558%22 rx=%221.718%22 ry=%221.61%22 fill=%22%23fff%22 opacity=%22.199%22%2F%3E%3Cellipse cx=%221962.334%22 cy=%22888.398%22 rx=%221.914%22 ry=%221.757%22 fill=%22%23fff%22 opacity=%22-.019%22%2F%3E%3Cellipse cx=%2288.533%22 cy=%221019.981%22 rx=%221.637%22 ry=%221.463%22 fill=%22%23fff%22 opacity=%22-.078%22%2F%3E%3Cellipse cx=%22354.494%22 cy=%221055.312%22 rx=%221.66%22 ry=%221.368%22 fill=%22%23fff%22 opacity=%22.434%22%2F%3E%3Cellipse cx=%22572.276%22 cy=%221094.314%22 rx=%222.23%22 ry=%221.731%22 fill=%22%23fff%22 opacity=%22.739%22%2F%3E%3Cellipse cx=%22799.178%22 cy=%221090.467%22 rx=%221.631%22 ry=%221.348%22 fill=%22%23fff%22 opacity=%22.633%22%2F%3E%3Cellipse cx=%22904.347%22 cy=%221102.835%22 rx=%222.244%22 ry=%221.856%22 fill=%22%23fff%22 opacity=%22.652%22%2F%3E%3Cellipse cx=%221172.046%22 cy=%221051.809%22 rx=%221.91%22 ry=%221.901%22 fill=%22%23fff%22 opacity=%22-.008%22%2F%3E%3Cellipse cx=%221308.215%22 cy=%221068.045%22 rx=%221.934%22 ry=%221.786%22 fill=%22%23fff%22 opacity=%22.211%22%2F%3E%3Cellipse cx=%221407.102%22 cy=%221007.868%22 rx=%221.61%22 ry=%221.29%22 fill=%22%23fff%22 opacity=%22.475%22%2F%3E%3Cellipse cx=%221691.477%22 cy=%221000.98%22 rx=%221.991%22 ry=%221.499%22 fill=%22%23fff%22 opacity=%22-.046%22%2F%3E%3Cellipse cx=%221903.917%22 cy=%221058.115%22 rx=%221.812%22 ry=%221.781%22 fill=%22%23fff%22 opacity=%22-.013%22%2F%3E%3Cellipse cx=%226.566%22 cy=%221168.879%22 rx=%222.04%22 ry=%221.687%22 fill=%22%23fff%22 opacity=%22.08%22%2F%3E%3Cellipse cx=%22280.411%22 cy=%221145.14%22 rx=%222.106%22 ry=%221.984%22 fill=%22%23fff%22 opacity=%22.196%22%2F%3E%3Cellipse cx=%22472.018%22 cy=%221253.337%22 rx=%221.873%22 ry=%221.431%22 fill=%22%23fff%22 opacity=%22.272%22%2F%3E%3Cellipse cx=%22792.371%22 cy=%221225.878%22 rx=%221.276%22 ry=%221.1%22 fill=%22%23fff%22 opacity=%22.769%22%2F%3E%3Cellipse cx=%22994.49%22 cy=%221157.294%22 rx=%221.942%22 ry=%221.486%22 fill=%22%23fff%22 opacity=%22.89%22%2F%3E%3Cellipse cx=%221012.293%22 cy=%221253.653%22 rx=%221.835%22 ry=%221.357%22 fill=%22%23fff%22 opacity=%22.217%22%2F%3E%3Cellipse cx=%221343.026%22 cy=%221136.605%22 rx=%221.505%22 ry=%221.098%22 fill=%22%23fff%22 opacity=%22.545%22%2F%3E%3Cellipse cx=%221457.249%22 cy=%221155.198%22 rx=%222.001%22 ry=%221.857%22 fill=%22%23fff%22 opacity=%22.332%22%2F%3E%3Cellipse cx=%221770.04%22 cy=%221135.47%22 rx=%221.864%22 ry=%221.475%22 fill=%22%23fff%22 opacity=%22-.143%22%2F%3E%3Cellipse cx=%221807.26%22 cy=%221196.482%22 rx=%221.224%22 ry=%221.075%22 fill=%22%23fff%22 opacity=%22.195%22%2F%3E%3Cellipse cx=%2282.088%22 cy=%221399.136%22 rx=%221.162%22 ry=%221.14%22 fill=%22%23fff%22 opacity=%22.499%22%2F%3E%3Cellipse cx=%22381.873%22 cy=%221396.335%22 rx=%222.09%22 ry=%221.617%22 fill=%22%23fff%22 opacity=%22.368%22%2F%3E%3Cellipse cx=%22415.159%22 cy=%221279.344%22 rx=%221.736%22 ry=%221.646%22 fill=%22%23fff%22 opacity=%22.737%22%2F%3E%3Cellipse cx=%22680.836%22 cy=%221378.894%22 rx=%222.102%22 ry=%221.786%22 fill=%22%23fff%22 opacity=%22.127%22%2F%3E%3Cellipse cx=%22885.221%22 cy=%221344.199%22 rx=%221.592%22 ry=%221.238%22 fill=%22%23fff%22 opacity=%22.652%22%2F%3E%3Cellipse cx=%221140.865%22 cy=%221287.211%22 rx=%221.434%22 ry=%221.233%22 fill=%22%23fff%22 opacity=%22.199%22%2F%3E%3Cellipse cx=%221396.443%22 cy=%221322.772%22 rx=%221.736%22 ry=%221.463%22 fill=%22%23fff%22 opacity=%22.653%22%2F%3E%3Cellipse cx=%221498.603%22 cy=%221386.027%22 rx=%221.88%22 ry=%221.495%22 fill=%22%23fff%22 opacity=%22.393%22%2F%3E%3Cellipse cx=%221783.798%22 cy=%221304.753%22 rx=%221.653%22 ry=%221.499%22 fill=%22%23fff%22 opacity=%22.191%22%2F%3E%3Cellipse cx=%221959.103%22 cy=%221344.336%22 rx=%221.545%22 ry=%221.37%22 fill=%22%23fff%22 opacity=%22.356%22%2F%3E%3Cg transform=%22rotate(-58.651 981.894 -1304.078)%22%3E%3Cdefs%3E%3ClinearGradient id=%22a%22 x1=%220%22 y1=%221%22 x2=%22308.806%22 y2=%221%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop stop-color=%22%23fff%22%2F%3E%3Cstop offset=%22.3%22 stop-color=%22%23fff%22 stop-opacity=%22.1%22%2F%3E%3Cstop offset=%22.7%22 stop-color=%22%23fff%22 stop-opacity=%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect x=%22-15.44%22 y=%22-12.5%22 width=%22123.522%22 height=%2225%22 rx=%2225%22 ry=%2225%22 fill=%22url(%23a)%22 filter=%22url(%23b)%22 opacity=%22.4%22%2F%3E%3Crect width=%22185.284%22 height=%228%22 rx=%228%22 ry=%228%22 fill=%22url(%23a)%22%2F%3E%3C%2Fg%3E%3Cg transform=%22rotate(-62.577 835.57 -520.603)%22 fill=%22url(%23a)%22%3E%3Crect x=%22-15.783%22 y=%22-12.5%22 width=%22126.261%22 height=%2225%22 rx=%2225%22 ry=%2225%22 filter=%22url(%23b)%22 opacity=%22.4%22%2F%3E%3Crect width=%22189.391%22 height=%228%22 rx=%228%22 ry=%228%22%2F%3E%3C%2Fg%3E%3Cg transform=%22rotate(-62.874 863.212 -122.075)%22 fill=%22url(%23a)%22%3E%3Crect x=%22-13.18%22 y=%22-12.5%22 width=%22105.442%22 height=%2225%22 rx=%2225%22 ry=%2225%22 filter=%22url(%23b)%22 opacity=%22.4%22%2F%3E%3Crect width=%22158.162%22 height=%228%22 rx=%228%22 ry=%228%22%2F%3E%3C%2Fg%3E%3Cg transform=%22rotate(-57.503 1411.015 -368.204)%22 fill=%22url(%23a)%22%3E%3Crect x=%22-12.028%22 y=%22-12.5%22 width=%2296.222%22 height=%2225%22 rx=%2225%22 ry=%2225%22 filter=%22url(%23b)%22 opacity=%22.4%22%2F%3E%3Crect width=%22144.333%22 height=%228%22 rx=%228%22 ry=%228%22%2F%3E%3C%2Fg%3E%3Cg transform=%22rotate(-56.833 1659.301 -378.024)%22 fill=%22url(%23a)%22%3E%3Crect x=%22-16.61%22 y=%22-12.5%22 width=%22132.876%22 height=%2225%22 rx=%2225%22 ry=%2225%22 filter=%22url(%23b)%22 opacity=%22.4%22%2F%3E%3Crect width=%22199.314%22 height=%228%22 rx=%228%22 ry=%228%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } nav { position: sticky; top: 2em; width: min(90%, 1200px); background-color: black; display: flex; justify-content: space-between; align-items: center; margin-left: calc(50% - min(45%, 600px)); margin-right: calc(50% - min(45%, 600px)); color: #fed; padding: 1em .5em; border-radius: 1em; border-color: #8bf; border-style: solid; transition: all 0.3s ease, border-radius 0.6s ease, border 0.1s ease; z-index: 10; } nav.scrolled { width: 100%; border-top-width: 0; border-left-width: 0; border-right-width: 0; border-radius: 0; margin-left: 0; margin-right: 0; padding: 1em .5em; top: 0; } .image-wrapper { max-width: 420px; padding: 1.5rem; background: linear-gradient(135deg, #f8f9fa, #ffffff); border-radius: 1.25rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } @media (max-width: 768px) { .image-wrapper { margin-bottom: 1rem; } } .hero-section { border-bottom: 2px solid #8bf; position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.1; pointer-events: none; } .hero-image { position: relative; animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .hero-buttons .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(139, 255, 255, 0.3); transition: all 0.3s ease; } @media (max-width: 992px) { .hero-section .row { text-align: center; } .hero-buttons { justify-content: center; } .hero-image { margin-top: 30px; } } @media (max-width: 576px) { h1.display-3 { font-size: 2.5rem; } .hero-buttons .btn { display: block; width: 100%; margin-bottom: 10px; } .hero-buttons .btn.me-3 { margin-right: 0 !important; } } /* Feature cards */ .feature-card { height: 100%; padding: 2rem; border-radius: 1.25rem; background: linear-gradient(135deg, #ffffff, #f8f9fa); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); transition: transform 0.4s ease, box-shadow 0.4s ease; } .feature-card h5 { font-weight: 700; margin-bottom: 0.75rem; } .feature-card p { color: #6c757d; margin: 0; } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12); } /* Appear animation */ [data-animate] { opacity: 0; transform: translateY(40px); transition: all 0.8s ease; } [data-animate].active { opacity: 1; transform: translateY(0); } h3.display-6 { color: #8bf; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px rgb(158, 200, 255), 0 0 2px rgb(158, 200, 255); } .display-5 { color: #fff; } .lead { color: #8bf; } .portfolio-card { background-color: #111; border-radius: 10px; overflow: hidden; border: 1px solid #222; transition: all 0.3s ease; height: 100%; } .portfolio-card:hover { transform: translateY(-5px); border-color: #8bf; box-shadow: 0 10px 30px rgba(139, 255, 255, 0.1); } .portfolio-image-wrapper { position: relative; overflow: hidden; height: 200px; } .portfolio-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; cursor: pointer; } .portfolio-card:hover .portfolio-image { transform: scale(1.05); } .portfolio-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; cursor: pointer; } .portfolio-image-wrapper:hover .portfolio-overlay { opacity: 1; } .portfolio-content { background-color: #111; } .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); } @media (max-width: 768px) { .portfolio-image-wrapper { height: 180px; } .portfolio-content { padding: 1rem !important; } } .pricing-row { transition: all 0.3s ease; } .pricing-row:hover { background-color: rgba(139, 255, 255, 0.05); } .features-list { list-style: none; padding-left: 0; } .features-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.3rem; } .features-list li:before { content: "✓"; position: absolute; left: 0; color: #8bf; font-weight: bold; } .badge { padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; } .price-tag { display: block; } .additional-services { transition: all 0.3s ease; } .additional-services:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(139, 255, 255, 0.1); } @media (max-width: 768px) { .pricing-row { padding: 1.5rem !important; } .pricing-header, .pricing-row .row>div { } .pricing-row .row>div.text-center { text-align: center !important; margin-top: 1rem; } .price-tag { display: inline-block; margin-right: 1rem; } } .logo_div { font-family: fantasy; display: inline-block; text-align: center; margin: .25em 1em; white-space: nowrap; text-shadow: 0 0 30px #fff, 0 0 30px #fff, 0 0 30px rgb(158, 200, 255), 0 0 30px rgb(158, 200, 255); } .logo_div img { width: 2em; } h5 h4 h3 h2 { color: #fff; } .services-bar { display: flex; justify-content: space-between; text-align: center; margin: .25em 1em; } .services-bar div { padding: 0 1em; } .button { cursor: pointer; } .prices-button { font-weight: bold; cursor: pointer; text-shadow: 0 0 30px #fff, 0 0 30px #fff, 0 0 30px rgb(158, 200, 255), 0 0 30px rgb(158, 200, 255); } .prices-button:hover { text-shadow: 0 0 20px #fff, 0 0 20px #fff, 0 0 20px rgb(158, 200, 255), 0 0 20px rgb(158, 200, 255); } .services-button { display: none; font-weight: bold; cursor: pointer; text-shadow: 0 0 30px #fff, 0 0 30px #fff, 0 0 30px rgb(158, 200, 255), 0 0 30px rgb(158, 200, 255); } .service-button { display: inline; padding: .5em 1em; white-space: nowrap; color: #fed; transition: background-color 0.3s ease, color 0.3s ease; } .get-quote-button { cursor: pointer; display: inline-block; text-align: center; margin: .25em 1em; border: solid 1px orange; padding: .5em 1em; background-color: orange; border-radius: 1em; color: black; white-space: nowrap; box-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px rgb(255, 165, 0), 0 0 10px rgb(255, 165, 0); } .get-quote-button:hover { background-color: #ffb84d !important; border-color: #ffb84d !important; color: black !important; box-shadow: 0 0 15px #fff, 0 0 15px #fff, 0 0 15px rgb(255, 165, 0), 0 0 15px rgb(255, 165, 0); } @media (max-width: 520px) { .morethan520 { display: none; } .lessthan520 { display: block; } .get-quote-button { padding: 0em .4em; } } @media (min-width: 520px) { .morethan520 { display: inline; } .lessthan520 { display: none; } } @media screen and (max-width: 1300px) { .services-bar { display: none; } .services-button { display: inline; } } main { padding-top: 1em; } .service-icon img { height: 80px; } .footer { border-top: 2px solid #8bf; } .footer a:hover { color: #fff !important; text-decoration: underline !important; } .social-icon:hover { color: #fff !important; transform: translateY(-3px); } .newsletter-form .form-control:focus { border-color: #8bf !important; box-shadow: 0 0 0 0.2rem rgba(139, 255, 255, 0.25) !important; background-color: #222 !important; } .newsletter-form .btn:hover { background-color: #66d9d9 !important; border-color: #66d9d9 !important; } .badge { font-size: 0.75rem; font-weight: 500; } .back-to-top { display: inline-block; padding: 8px 20px; border: 1px solid #8bf; border-radius: 20px; transition: all 0.3s ease; } .back-to-top:hover { background-color: #8bf; color: #000 !important; text-decoration: none !important; transform: translateY(-3px); } /* Responsive Adjustments */ @media (max-width: 768px) { .footer { text-align: center; } .footer-contact .d-flex, .footer-links .row { justify-content: center; } .footer-legal .list-inline { display: flex; flex-wrap: wrap; justify-content: center; } .footer-legal .list-inline-item { margin: 5px 10px !important; } .social-links .d-flex { justify-content: center; } .trust-badges .d-flex { justify-content: center; } }