:root {
    --primary: #0e69ad;
    --accent: #62b6ff;
    --gray-1: #ffffff;
    --gray-2: #e4e8ec;
    --gray-3: #40454a;
}

/* DARK THEME */
.dark {
    --primary: #5eb2ff;
    --accent: #1a73e8;
    --gray-1: #1a1d21;
    --gray-2: #2b3036;
    --gray-3: #d7d9dd;

    --bg: #0d1117;
    --text: #f1f5f9;
}

html {
    scroll-behavior: smooth;
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
    animation: fadeUp 1s ease forwards;
}

/* Nav underline hover */
header {
    backdrop-filter: blur(16px);
}

.nav-link {
    position: relative;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.3s ease-in-out;
}

.nav-link:hover::after {
    width: 100%;
}


/* Hero Section Start */
.bg-grid {
    background:
        linear-gradient(90deg, #0e69ad40 1px, transparent 1px),
        linear-gradient(180deg, #0e69ad40 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 20s linear infinite;
    opacity: 0.4;
}

@keyframes gridMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 600px;
    }
}


/* TILES LIKE YOUR CARDS */
.tiles-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.tile {
    position: absolute;
    width: 140px;
    height: 140px;
    background: #62b6ff20;
    border: 1px solid #0e68ad30;
    transform: rotate(45deg);
    backdrop-filter: blur(6px);
    animation: floatTile 6s infinite ease-in-out;
}

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

    50% {
        transform: translateY(-25px) rotate(45deg);
    }

    100% {
        transform: translateY(0) rotate(45deg);
    }
}

/* Tile Positions */
.t1 {
    top: 10%;
    left: 5%;
}

.t2 {
    top: 40%;
    left: -5%;
    animation-delay: 1s;
}

.t3 {
    bottom: 10%;
    left: 10%;
    animation-delay: 2s;
}

.t4 {
    top: 15%;
    right: 10%;
    animation-delay: 1.4s;
}

.t5 {
    top: 45%;
    right: 2%;
    animation-delay: 2.2s;
}

.t6 {
    bottom: 5%;
    right: 15%;
    animation-delay: 3s;
}

.t7,
.t8,
.t9,
.t10 {
    opacity: 0.4;
    width: 100px;
    height: 100px;
}


@keyframes moveLine {
    0% {
        transform: translateY(-100%);
    }

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

.l1 {
    left: 20%;
    animation-delay: 1s;
}

.l2 {
    left: 50%;
}

.l3 {
    left: 80%;
    animation-delay: 2s;
}


/* Floating */
@keyframes floating {

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

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

.floating {
    animation: floating 5s infinite ease-in-out;
}


/* Shine Effect */
.shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    animation: shineMove 6s infinite ease;
}

@keyframes shineMove {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(150%);
    }

    100% {
        transform: translateX(-100%);
    }
}


/* Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.blob {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--accent) 20%, transparent 70%);
    filter: blur(120px);
    opacity: 0.4;
    animation: blobMove 12s infinite ease-in-out;
    z-index: 0;
}

.blob1 {
    top: 0;
    left: 30%;
    animation-delay: 0s;
}

.blob2 {
    bottom: -10%;
    right: 10%;
    animation-delay: 3s;
}

@keyframes blobMove {

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

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

/* Hero Section Start */

/* Before Footer Wave Pattern Section Start */
.ocean {
    height: 180px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.wave {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='150'><defs><linearGradient id='a' x1='50%' x2='50%' y1='-10.959%' y2='100%'><stop stop-color='%2362b6ff' stop-opacity='.25' offset='0%'/><stop stop-color='%230e69ad' offset='100%'/></linearGradient></defs><path fill='url(%23a)' fill-rule='evenodd' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z' transform='matrix(-1 0 0 1 1600 0)'/></svg>") repeat-x;

    position: absolute;
    bottom: -2px;
    width: 6400px;
    height: 150px;
    transform-origin: bottom !important;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
}

.wave:nth-of-type(2) {
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite
}

/* Animations */
@keyframes wave {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1600px;
    }
}


@media (max-width: 768px) {
    .ocean {
        height: 150px;
    }
}

/* Before Footer Wave Pattern Section End */

/* =========================================================
    Hide reCAPTCHA v3 badge 
========================================================= */
.grecaptcha-badge {
  visibility: hidden;
}

.recaptcha-info {
  font-size: 14px;
}