@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800&family=Open+Sans:wght@300;400;600&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-pool-blue { background-color: #0077B6; } /* Bright Water Blue */
    .bg-pool-dark { background-color: #03045E; } /* Deep Sea Blue */
    .bg-pool-light { background-color: #CAF0F8; } /* Light Splash */
    
    .text-pool-blue { color: #0077B6; }
    .text-pool-dark { color: #03045E; }
    .text-pool-light { color: #00B4D8; }
    
    .font-montserrat { font-family: 'Montserrat', sans-serif; }
    .font-opensans { font-family: 'Open Sans', sans-serif; }
    
    .btn-pool {
        @apply inline-flex items-center justify-center bg-[#0077B6] text-white font-montserrat text-sm font-bold uppercase tracking-wider py-4 px-8 rounded-full hover:bg-[#03045E] transition-all duration-300 shadow-[0_8px_20px_rgba(0,119,182,0.3)] hover:shadow-[0_12px_25px_rgba(3,4,94,0.4)] hover:-translate-y-1;
    }
    
    .btn-pool-outline {
        @apply inline-flex items-center justify-center border-2 border-[#0077B6] text-[#0077B6] font-montserrat text-sm font-bold uppercase tracking-wider py-3.5 px-8 rounded-full hover:bg-[#0077B6] hover:text-white transition-all duration-300;
    }
    
    .nav-link {
        @apply text-slate-700 hover:text-[#0077B6] font-montserrat text-sm font-bold transition-colors duration-300 relative;
    }
    
    .nav-link::after {
        content: '';
        @apply absolute -bottom-1 left-0 w-0 h-0.5 bg-[#0077B6] transition-all duration-300;
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        @apply w-full;
    }
    
    .nav-link.active {
        @apply text-[#0077B6];
    }
}

/* Custom Water Wave Effect for Section Dividers */
.wave-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.wave-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
}

.wave-divider .shape-fill {
    fill: #ffffff;
}