/* ========== CUSTOM FONTS ========== */
@font-face {
    font-family: "sooner";
    src:
        url("../fonts/sooner/sooner-regular.woff2") format("woff2"),
        url("../fonts/sooner/sooner-regular.woff") format("woff"),
        url("../fonts/sooner/sooner-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "agatta";
    src:
        url("../fonts/agatta/agatta-regular.woff2") format("woff2"),
        url("../fonts/agatta/agatta-regular.woff") format("woff"),
        url("../fonts/agatta/agatta-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
.font-agatta {
    font-family: "agatta";
}
.font-sooner {
    font-family: "sooner";
}

/* ========== NAVIGATION STYLES ========== */

/* Smooth navbar transition */
nav {
    transition: all 0.3s ease-in-out;
}

/* Video overlay */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* Active nav item styles */
.nav-item-initial.active {
    background-color: white;
    color: #db3444;
    font-weight: 800;
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
}

.nav-item-scrolled.active {
    background-color: #fee2e2;
    color: #db3444;
    font-weight: 800;
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    transition: all 0.3s ease;
}

.nav-item-scrolled:hover {
    background-color: #fbf0f0;
    color: #db3444;
    font-weight: 300;
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    transition: all 0.3s ease;
}

.nav-item-scrolled.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
}

/* ========== MOBILE MENU STYLES ========== */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.mobile-menu.active {
    max-height: 500px; /* Adjust based on your menu height */
}

/* Mobile menu icon color handling */
#navbar.scrolled #mobile-menu-btn {
    color: #000000; /* visible on white nav */
}

/* Hamburger icon animation */
#mobile-menu-btn {
    transition: transform 0.3s ease;
}

#mobile-menu-btn.active {
    transform: rotate(90deg);
}

/* ========== FORM VALIDATION STYLES ========== */
.error-message {
    color: #db3444;
    font-size: 12px;
    margin-top: 4px;
}

.input-error {
    border-color: #db3444 !important;
}

/* ========== MODAL ANIMATIONS ========== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes checkmark {
    0% {
        transform: scale(0) rotate(45deg);
    }
    50% {
        transform: scale(1.2) rotate(45deg);
    }
    100% {
        transform: scale(1) rotate(45deg);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.animate-checkmark {
    animation: checkmark 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both;
}

/* ========== RESPONSIVE UTILITIES ========== */
@media (max-width: 640px) {
    .nav-link.active::after {
        bottom: -20px;
        height: 16px;
        width: 4px;
    }
}

/* ========== SMOOTH SCROLLING ========== */
html {
    scroll-behavior: smooth;
}

/* ========== CUSTOM BUTTON CORNER ========== */
.custom-btn-corner {
    position: absolute;
    left: 0.5px;
    bottom: 0;
    width: 12px;
    height: 12px;
    background-color: #db3444;
    transition: background-color 0.3s;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

@media (min-width: 768px) {
    .custom-btn-corner {
        width: 16px;
        height: 16px;
    }
}

button:hover .custom-btn-corner {
    background-color: #ffffff;
}

/* ========== SWIPER CUSTOMIZATION ========== */
.testimonialSwiper {
    overflow: hidden;
}

.testimonialSwiper .swiper-wrapper {
    align-items: stretch;
}

/* Hide partial slides on larger screens */
@media (min-width: 1280px) {
    .testimonialSwiper {
        overflow: hidden;
    }
}

/* Pagination Dot Color*/
.swiper-pagination-bullet-active {
    background-color: #db3444 !important;
}

/* ========== SEE MORE FUNCTIONALITY ========== */
.review-text {
    transition: max-height 0.3s ease;
}

.full-text {
    display: none;
}

.review-text.expanded .short-text {
    display: none;
}

.review-text.expanded .full-text {
    display: inline;
}

/* ========== VIEW MORE/LESS STYLES ========== */
.all-reviews-grid {
    display: none;
}

.all-reviews-grid.active {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
    margin-top: 2rem;
}

@media (min-width: 640px) {
    .all-reviews-grid.active {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .all-reviews-grid.active {
        grid-template-columns: repeat(4, 1fr);
    }
}

.testimonialSwiper.hidden {
    display: none;
}