:root {
    --deep-blue: #00021c;
    --primary-blue: #334362;
    --orange: #f26522;
    --whitish: #feecdf;
}

body {
scroll-behavior: smooth;

}

.color-deepblue {
    color: var(--deep-blue) !important ;
}
.color-primaryblue {
    color: var(--primary-blue) ;
}
.color-orange {
    color: var(--orange);
}
.color-whitish {
    color:var(--whitish);
}

.bg-deepblue {
    background-color: var(--deep-blue);
}
.bg-primaryblue {
    background-color: var(--primary-blue);
}
.bg-orange {
    background-color: var(--orange)
}
.bg-whitish {
    background-color:var(--whitish)
}



.fullpage {
height: 100vh;

}

.landing-left {
background-color: var(--primary-blue);

}

.landing-right-dark {
background-color: var(--deep-blue);
}
    .landing-right-dark h2{
        color: white;
    }

.landing-right-light {
    background-color: var(--whitish);
    cursor: default !important;
    }
    .landing-right-light h2{
        color: var(--whitish);
        }

.image-container {
    position: relative;
    overflow: hidden;
    cursor: none;
}

.img-fluid {
    position: relative; /* Add this line */
    z-index: 2; /* Add this line */
}

.glow {
    position: absolute;
    background: radial-gradient(closest-side,#ffffff, #ffffff75,#ffffff80, #ffffff00);
    width: 550px; /* Adjust the glow size as needed */
    height: 550px; /* Adjust the glow size as needed */
    border-radius: 70%;
    opacity: 0;
    /* transition: opacity 0.3s; */
    pointer-events: none;
    z-index: 1; /* Make sure the glow is behind the image */
}


.image-container:hover .glow {
    opacity: 0.7;
    transform: translate(-50%, -50%);
}



/* animations */

.arrival-1 {
    opacity: 0;
    transform: translateY(-20px);
    animation: arrive 1s ease-out forwards;
    animation-delay: 0s; /* Move animation-delay after animation */
}

.arrival-2 {
    opacity: 0;
    transform: translateY(-20px);
    animation: arrive 1s ease-out forwards;
    animation-delay: 1s; /* Move animation-delay after animation */
}

.arrival-3 {
    opacity: 0;
    transform: translateY(-20px);
    animation: arrive 1s ease-out forwards;
    animation-delay: 2s; /* Move animation-delay after animation */
}

.arrival-4 {
    opacity: 0;
    transform: translateX(20px);
    animation: arrive 1s ease-out forwards;
    animation-delay: 3s; /* Move animation-delay after animation */
}

@keyframes arrive {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}






/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/