/* General Body and Font Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* Add default line-heights and word wrapping to prevent overlap */
p, a, span, button {
    line-height: 1.6;
    overflow-wrap: break-word;
}

h1, h2, h3 {
    line-height: 1.3;
    overflow-wrap: break-word;
}


/* --- Fix for anchor link scrolling with sticky header --- */
main[id], section[id] {
    scroll-margin-top: 120px; /* Adjust this value based on your sticky header's height */
}

/* --- Utility Classes --- */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* --- Background and Effect Classes --- */
.dot-grid-background {
    background-color: #FFFEFF; /* Fallback background color */
    background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
    background-size: 20px 20px;
}

.svg-background {
    background-image: url('assets/test.png'); /* Ensure this path is correct */
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
}

.social-icon:hover svg path {
    fill: #F97316; /* Corresponds to Tailwind's orange-500 */
}

/* --- Responsive Styles for Larger Screens --- */

/* Base font size for calculations */
:root {
    font-size: 16px;
}

/* For Full HD screens (1920px) and up */
@media (min-width: 1920px) {
    :root {
        font-size: 24px !important; /* Increase base font size */
    }
    /* Header */
    header svg { width: 120px; }
    header nav a, header nav button { font-size: 1.1rem; }
    /* Hero */
    main img.w-\[400px\] { width: 550px; }
    main .text-5xl { font-size: 3.5rem; line-height: 1.2; }
    /* Test Series */
    #test-series .pt-\[88px\] .text-3xl { font-size: 2.25rem; line-height: 1.2; }
    #test-series .h-64 { height: 18rem; padding: 1.75rem; }
    #test-series .text-xl { font-size: 1.4rem; line-height: 1.3; }
    #test-series .text-2xl { font-size: 1.6rem; line-height: 1.3; }
    #test-series .text-sm { font-size: 1rem; line-height: 1.4; }
    #test-series .w-20 { width: 6rem; }
    #test-series .w-24 { width: 7rem; }
    #test-series .w-52 { width: 15rem; }
    /* Mentors */
    section > div > .flex.justify-between .text-2xl { font-size: 2.25rem; line-height: 1.2; }
    #scrollLeft svg, #scrollRight svg { width: 12px; height: 12px; }
    section > div > div > svg { width: 100px; height: auto; }
    .mentor-card { width: 20rem; }
    .mentor-card img { width: 8rem; height: 8rem; }
    /* Sample Evaluations */
    section .bg-\[\#5A7D6A\] h1 { font-size: 2.5rem; line-height: 1.2; }
    section .bg-\[\#5A7D6A\] img.h-72 { height: 22rem; }
    #prevBtn svg, #nextBtn svg { width: 1.75rem; height: 1.75rem; }
    /* Aira AI */
    section img.w-\[250px\] { width: 320px; }
    section .pl-14 .text-3xl { font-size: 2.25rem; line-height: 1.2; }
    section .pl-14 .border-2 { padding: 1.5rem 1rem; }
    section .pl-14 .border-2 svg { width: 38px; height: 38px; }
    /* Promo Card */
    section .dot-grid-background.h-72 { height: 20rem; }
    section img.w-64 { width: 20rem; }
    /* Testimonials */
    #testimonials .w-\[396px\] { width: 480px; height: auto; padding: 2rem; }
    #testimonials .w-\[396px\] img { width: 3.5rem; height: 3.5rem; }
    #scroll-left svg, #scroll-right svg { width: 24px; height: 24px; }
    /* Footer */
    #about-us { padding: 3rem 5rem; }
    #about-us svg[width="210"] { width: 240px; }
    #about-us .flex.gap-32 { gap: 10rem; }
    .social-icon svg { width: 24px; height: 24px; }
}

/* For QHD screens (2560px) and up */
@media (min-width: 2560px) {
    :root {
        font-size: 30px !important; /* Further increase base font size */
    }
    /* Header */
    header svg { width: 140px; }
    header nav a, header nav button { font-size: 1.2rem; }
    /* Hero */
    main img.w-\[400px\] { width: 650px; }
    main .text-5xl { font-size: 4rem; line-height: 1.2; }
    /* Test Series */
    #test-series .pt-\[88px\] .text-3xl { font-size: 2.5rem; line-height: 1.2; }
    #test-series .h-64 { height: 20rem; padding: 2rem; }
    #test-series .text-xl { font-size: 1.5rem; line-height: 1.3; }
    #test-series .text-2xl { font-size: 1.75rem; line-height: 1.3; }
    #test-series .text-sm { font-size: 1.1rem; line-height: 1.5; }
    #test-series .w-20 { width: 7rem; }
    #test-series .w-24 { width: 8rem; }
    #test-series .w-52 { width: 18rem; }
    /* Mentors */
    section > div > .flex.justify-between .text-2xl { font-size: 2.5rem; line-height: 1.2; }
    #scrollLeft svg, #scrollRight svg { width: 14px; height: 14px; }
    section > div > div > svg { width: 115px; }
    .mentor-card { width: 22rem; }
    .mentor-card img { width: 9rem; height: 9rem; }
    /* Sample Evaluations */
    section .bg-\[\#5A7D6A\] h1 { font-size: 2.75rem; line-height: 1.2; }
    section .bg-\[\#5A7D6A\] img.h-72 { height: 25rem; }
    #prevBtn svg, #nextBtn svg { width: 2rem; height: 2rem; }
    /* Aira AI */
    section img.w-\[250px\] { width: 380px; }
    section .pl-14 .text-3xl { font-size: 2.5rem; line-height: 1.2; }
    section .pl-14 .border-2 { padding: 2rem 1.25rem; }
    section .pl-14 .border-2 svg { width: 42px; height: 42px; }
    /* Promo Card */
    section .dot-grid-background.h-72 { height: 22rem; }
    section img.w-64 { width: 24rem; }
    /* Testimonials */
    #testimonials .w-\[396px\] { width: 540px; height: auto; padding: 2.5rem; }
    #testimonials .w-\[396px\] img { width: 4rem; height: 4rem; }
    #scroll-left svg, #scroll-right svg { width: 28px; height: 28px; }
    /* Footer */
    #about-us { padding: 4rem 6rem; }
    #about-us svg[width="210"] { width: 280px; }
    #about-us .flex.gap-32 { gap: 12rem; }
    .social-icon svg { width: 26px; height: 26px; }
}

/* For 4K screens (3840px) and up */
@media (min-width: 3840px) {
    :root {
        font-size: 40px !important; /* Maximize font size for 4K */
    }
    /* Header */
    header svg { width: 180px; }
    header nav a, header nav button { font-size: 1.4rem; }
    /* Hero */
    main img.w-\[400px\] { width: 800px; }
    main .text-5xl { font-size: 4.5rem; line-height: 1.2; }
    /* Test Series */
    #test-series .pt-\[88px\] .text-3xl { font-size: 3rem; line-height: 1.2; }
    #test-series .h-64 { height: 24rem; padding: 2.5rem; }
    #test-series .text-xl { font-size: 1.75rem; line-height: 1.3; }
    #test-series .text-2xl { font-size: 2rem; line-height: 1.3; }
    #test-series .text-sm { font-size: 1.25rem; line-height: 1.6; }
    #test-series .w-20 { width: 9rem; }
    #test-series .w-24 { width: 10rem; }
    #test-series .w-52 { width: 22rem; }
    /* Mentors */
    section > div > .flex.justify-between .text-2xl { font-size: 3rem; line-height: 1.2; }
    #scrollLeft svg, #scrollRight svg { width: 24px; height: 24px; }
    section > div > div > svg { width: 130px; }
    .mentor-card { width: 26rem; }
    .mentor-card img { width: 11rem; height: 11rem; }
    /* Sample Evaluations */
    section .bg-\[\#5A7D6A\] h1 { font-size: 3rem; line-height: 1.2; }
    section .bg-\[\#5A7D6A\] img.h-72 { height: 30rem; }
    #prevBtn svg, #nextBtn svg { width: 2.5rem; height: 2.5rem; }
    /* Aira AI */
    section img.w-\[250px\] { width: 450px; }
    section .pl-14 .text-3xl { font-size: 3rem; line-height: 1.2; }
    section .pl-14 .border-2 { padding: 2.5rem 1.5rem; }
    section .pl-14 .border-2 svg { width: 48px; height: 48px; }
    /* Promo Card */
    section .dot-grid-background.h-72 { height: 26rem; }
    section img.w-64 { width: 28rem; }
    /* Testimonials */
    #testimonials .w-\[396px\] { width: 1000px; height: auto; padding: 3rem; }
    #testimonials .w-\[396px\] img { width: 4.5rem; height: 4.5rem; }
    #scroll-left svg, #scroll-right svg { width: 48px; height: 48px; }
    /* Footer */
    #about-us { padding: 5rem 7rem; }
    #about-us svg[width="210"] { width: 340px; }
    #about-us .flex.gap-32 { gap: 14rem; }
    .social-icon svg { width: 30px; height: 30px; }
}