/* =========================================================
   Responsive CSS Template - Desktop First (max-width)
   ---------------------------------------------------------
   This file adjusts styles for smaller screens.
   Default styles (outside any @media block) should be
   for your largest breakpoint (e.g., laptop/desktop).
   ========================================================= */

/* Default Styles (Desktop First Approach)
   ---------------------------------------------------------
   These styles apply to your largest screens (e.g., 992px and above,
   or 1200px and above if you're targeting XL as base).
   Make sure your 'style.css' or main CSS reflects the desktop design here.
   ========================================================= */
body {
    font-size: 18px; /* Base font size for desktops */
    /* Add any general styles for desktop here */
}

/* Header/Navbar adjustments for desktop */
.navbar-brand {
    font-size: 2rem; /* Full size logo on desktop */
}
.navbar-nav .nav-link {
    padding: 0 20px; /* Adjust padding for desktop nav links */
}
/* Adjustments for buttons on desktop */
.btn {
    padding: 12px 25px;
    font-size: 1.1rem;
}

/* Hero Section adjustments for desktop */
.hero-section {
    padding: 100px 50px; /* Full padding for desktop */
}
.hero-section h1 {
    font-size: 5rem; /* Full desktop heading size */
}
.hero-section p {
    font-size: 1.25rem; /* Full paragraph text size */
}

/* Feature Cards adjustments for desktop */
.feature-card {
    padding: 30px; /* Full padding inside cards */
}
.feature-card .icon-circle {
    width: 100px; /* Full size icons */
    height: 100px;
    font-size: 3.5rem;
}
.feature-card h3 {
    font-size: 1.8rem; /* Full card titles */
}

/* About Section adjustments for desktop */
.about-section h2 {
    font-size: 3.8rem;
}


/* =========================================================
   Large Devices (Laptops, large tablets in landscape)
   ---------------------------------------------------------
   Max width: 1199.98px (Bootstrap's `xl` breakpoint minus 0.02px)
   These styles apply to screens UP TO 1199.98px wide.
   ========================================================= */
@media (max-width: 1199.98px) {
    body {
        font-size: 17px; /* Slightly smaller base font */
    }
    .hero-section h1 {
        font-size: 4.5rem;
    }
    .hero-section p {
        font-size: 1.15rem;
    }
    .feature-card .icon-circle {
        width: 90px;
        height: 90px;
        font-size: 3.2rem;
    }
    /* Add other adjustments for this range */
}


/* =========================================================
   Medium Devices (Tablets, small laptops)
   ---------------------------------------------------------
   Max width: 991.98px (Bootstrap's `lg` breakpoint minus 0.02px)
   These styles apply to screens UP TO 991.98px wide.
   ========================================================= */
@media (max-width: 991.98px) {
    body {
        font-size: 16px; /* Typical desktop font size, now for tablets */
    }

    /* Header/Navbar for tablets */
    .navbar-brand {
        font-size: 1.8rem;
    }
    /* Nav links might need adjustments if they stack on smaller laptops */
    .navbar-nav .nav-link {
        padding: 0 15px;
    }

    /* Hero Section for tablets */
    .hero-section {
        padding: 80px 30px;
    }
    .hero-section h1 {
        font-size: 3.5rem;
    }
    .hero-section p {
        font-size: 1rem;
    }
    .hero-section .btn {
        /* Adjust button sizing if they become too wide or need stacking */
        display: block; /* Example: make buttons stack */
        width: 100%;
        margin-bottom: 15px; /* Add space between stacked buttons */
        margin-right: 0 !important; /* Override Bootstrap's me-3 */
    }


    /* Feature Cards for tablets (e.g., 2 per row for col-md-6) */
    .feature-card {
        padding: 25px;
        margin-bottom: 20px; /* Add space below each card when they start wrapping */
    }
    .feature-card .icon-circle {
        width: 80px;
        height: 80px;
        font-size: 2.8rem;
    }
    .feature-card h3 {
        font-size: 1.5rem;
    }

    /* About Section for tablets */
    .about-section h2 {
        font-size: 3rem;
    }
}


/* =========================================================
   Small Devices (Mobile phones, portrait tablets)
   ---------------------------------------------------------
   Max width: 767.98px (Bootstrap's `md` breakpoint minus 0.02px)
   These styles apply to screens UP TO 767.98px wide.
   ========================================================= */
@media (max-width: 767.98px) {
    body {
        font-size: 15px; /* Smaller base font for phones */
    }

    /* Header/Navbar for mobile */
    .navbar {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-brand {
        font-size: 1.5rem;
    }
    .navbar-nav .nav-link {
        padding: 8px 0; /* Adjust padding for stacked mobile menu items */
        text-align: center;
    }

    /* Hero Section for mobile */
    .hero-section {
        padding: 60px 15px; /* Less padding on very small screens */
        height: auto; /* Allow height to collapse if content is short */
        position: relative;
        /* top: 80px; */
    }
    .hero-section h1 {
        font-size: 2.2rem; /* Significantly smaller heading for phones */
    }
    .hero-section p {
        font-size: 0.9rem; /* Smaller paragraph text */
    }
    .hero-section .btn {
        padding: 10px 20px; /* Smaller buttons */
        font-size: 0.9rem;
    }

    /* Feature Cards for mobile (e.g., 1 per row for col-md-6/col-lg-4 on smaller screens) */
    .feature-card {
        padding: 15px;
        margin-bottom: 15px; /* Less space between stacked cards */
    }
    .feature-card .icon-circle {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    .feature-card h3 {
        font-size: 1.2rem;
    }

    /* About Section for mobile */
    .about-section h2 {
        font-size: 2.2rem;
    }
}

/* =========================================================
   Extra Small Devices (Very small phones) - Optional
   ---------------------------------------------------------
   Max width: 575.98px (Bootstrap's `sm` breakpoint minus 0.02px)
   For older or very small phone screens.
   ========================================================= */
@media (max-width: 575.98px) {
    /* Further reduce font sizes or padding if needed for tiny screens */
    body {
        font-size: 14px;
    }
    .hero-section h1 {
        font-size: 1.8rem;
    }
    .hero-section p {
        font-size: 0.8rem;
    }
}