@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Gothic+A1:wght@300;400;500;600;700;800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

.font-primary{
font-family: 'Inter', sans-serif;
}
.font-secondary{
font-family: 'Bebas Neue', sans-serif;
}
.font-tertiary{
font-family: 'Gothic A1', sans-serif;
}
.hero-section{
background: linear-gradient(177.4deg, #6EEFEF -52.56%, #EEFFFF 60.7%, #FFFFFF 93.44%);

}
.about-section {
  background: linear-gradient(177.4deg, #FFFFFF -52.56%, #6EEFEF 0%, #EEFFFF 60.7%, #FFFFFF 93.44%);
}

/* .footer-section-bg{
   background: linear-gradient(177.4deg, #FFFFFF 17.9%, #ffffff 0%, #b8914a 60.7%, #B8914A 93.44%);
} */

h1,h2,h3,h4,h5,h6,p,a,span{
    font-family: 'Gothic A1', sans-serif;
}

h1,h2,h3,h4,h5,h6{
    color: #2F4F4F
}

h2.text-4xl, footer h3, footer h4{color:#ffffff}
.mobil-about{
    margin-bottom: 20px !important;
}

@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
}

/* Sticky Navigation Styles */
/* Professional sticky nav that works on both desktop and mobile */

/* Base nav styles - starts absolute at top */
nav {
    transition: all 0.3s ease-in-out;
    position: absolute;
}

/* Sticky nav when scrolled */
nav.sticky {
    position: fixed !important;
    left: 0;
    right: 0;
    z-index: 100;
    animation: slideDown 0.3s ease-out;
}

/* Slide down animation */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

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

/* Nav container adjustments when sticky */
nav.sticky #nav-container {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(110px);
    border-color: rgba(47, 79, 79, 0.1) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Text color changes when sticky */
nav.sticky a {
    color: #2F4F4F !important;
}

nav.sticky a:hover {
    color: #39ADAD !important;
}

/* Logo swap when sticky */
nav.sticky .nav-logo-primary {
    display: none !important;
}

nav.sticky .nav-logo-secondary {
    display: block !important;
}

/* Button styles when sticky */
nav.sticky .border-white {
    border-color: #2F4F4F !important;
}

nav.sticky button i {
    color: #2F4F4F !important;
}

/* Mobile menu button when sticky */
nav.sticky #mobile-menu-btn i {
    color: #2F4F4F !important;
}

/* Smooth padding adjustment */
nav.sticky .max-w-full {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Add padding to body when nav becomes sticky to prevent content jump */
body.nav-is-sticky {
    padding-top: 80px;
}

@media (min-width: 1024px) {
    body.nav-is-sticky {
        padding-top: 90px;
    }
}

/* Mobile menu adjustments when sticky */
nav.sticky #mobile-menu {
    top: 100%;
    margin-top: 0.5rem;
}

/* Ensure mobile menu stays below sticky nav */
nav.sticky+* {
    margin-top: 0;
}

/* Performance optimization */
nav {
    will-change: transform, background-color;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    nav,
    nav.sticky {
        transition: none;
        animation: none;
    }
}
.welcome-container, .welcome-section{
    background: #FEF2EE;
}

.-scale-x-100
 {
    --tw-scale-x: -1 ! important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) ! important;
}