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

:root {
    --brand-blue: #3D52A0;
    --brand-blue-2: #7091E6;
}

/* small animations */
@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@keyframes pingslow {
    0% {
        transform: scale(1);
        opacity: 0.2;
    }

    70% {
        transform: scale(1.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.animate-fadein {
    animation: fadein 0.9s ease-out;
}

.animate-pingslow {
    animation: pingslow 3s infinite;
}

/* base */
body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;

}

/* nav underline animation */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--brand-blue);
    transition: width 0.25s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* dropdown desktop */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    z-index: 50;
    border-radius: 6px;
    padding: 6px 0;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 8px 14px;
    color: #374151;
}

/* gradient */
.gradient-bg {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-2) 100%);
}

/* hero tweaks */
#home {
    position: relative;
    overflow: visible;
}

/* cards hover */
.service-card:hover {
    transform: translateY(-8px);
    transition: transform .25s ease, box-shadow .25s ease;
}

/* portfolio images */
.portfolio-item img {
    transition: transform .45s ease;
}

/* responsive helper adjustments */
@media (max-width: 1023px) {

    /* ensure hero decorative shapes hidden on smaller screens */
    .animate-pingslow {
        display: none;
    }

    /* nav spacing adjustments */
    nav .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* mobile menu: ensure dropdown content inside mobile is static */
#mobile-menu .dropdown-content {
    position: static;
    box-shadow: none;
    background: transparent;
    padding: 0;
    display: none;
}

/* small accessibility tweak for focus states */
:focus {
    outline: 3px solid rgba(99, 102, 241, 0.12);
    outline-offset: 2px;
}

/* small fix: ensure hero image doesn't overflow */
#home img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* footer link spacing */
footer a {
    transition: color .2s ease;
}

/* index.css - responsive fixes & small utilities */

/* font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --brand-blue: #3d52a0;
    --brand-blue-2: #7091e6;
}

/* base */
html,
body {
    height: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* nav underline animation */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--brand-blue);
    transition: width .22s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* desktop dropdown */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: white;
    min-width: 200px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 6px 0;
    z-index: 40;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 8px 12px;
    color: #374151;
    text-decoration: none;
}

/* helper: prevent accidental large margins */
.ml-12,
.mr-12 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* images */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* small screens */
@media (max-width: 1024px) {
    nav .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1 {
        line-height: 1.05;
    }

    .shadow-xl {
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    }

    /* softer on mobile */
}

/* ensure mobile dropdown inside mobile menu remains static */
#mobile-menu .dropdown-content {
    position: static;
    box-shadow: none;
    background: transparent;
    padding: 0;
    display: none;
}

/* subtle hover */
.p-6:hover {
    transform: translateY(-4px);
    transition: transform .22s ease;
}

/* focus states accessibility */
:focus {
    outline: 3px solid rgba(59, 130, 246, 0.12);
    outline-offset: 2px;
}

/* small grid tweak for mobile */
@media (max-width: 640px) {
    .grid.grid-cols-2 {
        gap: 8px;
    }

    .h-36 {
        height: 9rem;
    }

    /* keep gallery images reasonable */
}

/* small utility shadow */
.shadow-sm {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* --- layout fixes for mid-size screens (>=720px) --- */

/* show desktop links earlier (720px) and hide mobile toggle */
@media (min-width: 720px) {

    /* show desktop menu */
    #desktop-links {
        display: flex !important;
    }

    /* hide mobile toggle button and mobile menu */
    #mobile-toggle {
        display: none !important;
    }



    /* make hero switch to row earlier */
    #hero-wrap {
        flex-direction: row;
        align-items: center;
    }

    /* slightly reduce hero padding on mid screens */
    #hero-wrap>div {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* adjust gallery image height for mid screens (keeps consistent layout) */
    #hero-wrap .h-36 {
        height: 10.5rem;
    }

    /* ~168px */
    #hero-wrap .sm\:h-44 {
        height: 11.5rem;
    }

    /* ensure nav links don't overflow */
    nav .max-w-screen-xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* minor tweak to ensure no unwanted horizontal scroll */
@media (min-width: 720px) and (max-width: 1024px) {
    body {
        overflow-x: hidden;
    }

    /* reduce large gaps on service cards */
    .grid.grid-cols-1.md\:grid-cols-2 {
        gap: 1rem;
    }
}

/* remove leftover large margins applied earlier */
.ml-12,
.mr-12 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---------- mid-size layout fixes: 765px — 1265px ---------- */

/* ensure no horizontal scroll for mid-size viewports */
@media (min-width: 765px) and (max-width: 1265px) {

    html,
    body {
        overflow-x: hidden;
    }

    .container.mx-auto {
        max-width: 1100px;
        padding-left: 1rem;
        padding-right: 1rem;
    }




    /* your hero container uses flex-col md:flex-row; override to row here */
    #home .flex {
        flex-direction: row !important;
        align-items: center !important;
        gap: 1.25rem !important;
    }

    /* hero children full width split */
    #home .flex>div {
        width: 50% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* shrink large headings slightly to avoid wrapping */
    #home h1 {
        font-size: clamp(1.6rem, 2.1vw, 2.4rem) !important;
        line-height: 1.08 !important;
    }

    /* hero gallery image sizing: keep consistent heights */
    #home .grid img {
        height: 160px !important;
        object-fit: cover !important;
    }

    /* remove the ml-12 / mr-12 margins that cause overflow */
    .ml-12,
    .mr-12 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* reduce big gaps on service grids and cards */
    .gap-8 {
        gap: 1rem !important;
    }

    .container.mx-auto {
        max-width: 1100px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* footer: ensure grid columns fit */
    footer .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    /* but allow full footer columns for larger mid screens */
    @media (min-width: 1000px) {
        footer .grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1.5rem;
        }
    }
}

/* small safety fallback at exactly >=1266px -> return to normal desktop */
@media (min-width: 1266px) {
    .md\:flex {
        display: flex !important;
    }




    #home .grid img {
        height: auto !important;
    }
}

/* mobile menu dropdown inside #mobile-menu (if you have inner dropdowns) */
#mobile-menu .dropdown-content {
    display: none;
    padding-left: 0;
    padding-right: 0;
}

#mobile-menu .dropdown>a,
#mobile-menu .dropdown>button {
    width: 100%;
}

/* tiny accessibility focus */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline-offset: 3px;
}