/* ===== Reset & Base ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 100%; /* 1rem = 16px (browser default) */
}

body {
font-family: Arial, sans-serif;
background-color: #f5faff;
color: #000;
line-height: 1.6;
}

/* ===== Header ===== */
header {
background-color: #009fda;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem; /* instead of px */
}

.logo img {
height: 3.75rem; /* 60px */
}

nav ul {
list-style: none;
display: flex;
gap: 1.25rem; /* 20px */
}

nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
transition: color 0.3s ease;
}

nav ul li a.active,
nav ul li a:hover {
text-decoration: underline;
}

/* ===== Hero Section ===== */
.hero {
text-align: center;
margin-top: 1.25rem; /* 20px */
}

.hero img {
max-width: 30%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 0.625rem; /* 10px */
}

/* ===== Services Section ===== */
.services {
padding: 3.75rem 1.25rem; /* 60px 20px */
text-align: center;
background: #f9f9f9;
}

.services h2 {
font-size: 2rem;
margin-bottom: 2.5rem; /* 40px */
color: #009fda;
}

.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); /* 260px */
gap: 1.875rem; /* 30px */
max-width: 62.5rem; /* 1000px */
margin: 0 auto;
}

.service-card {
background: #fff;
padding: 1.875rem 1.25rem; /* 30px 20px */
border-radius: 0.75rem; /* 12px */
box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.08); /* 4px 10px */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
transform: translateY(-0.375rem); /* 6px */
box-shadow: 0 0.375rem 0.9375rem rgba(0,0,0,0.12); /* 6px 15px */
}

.service-card .icon {
font-size: 2.5rem;
margin-bottom: 0.9375rem; /* 15px */
}

.service-card h3 {
color: #009fda;
margin-bottom: 0.75rem; /* 12px */
font-size: 1.2rem;
}

/* ===== Advantages Section ===== */
.advantages {
text-align: center;
padding: 3.125rem 1.25rem; /* 50px 20px */
background: #f5faff;
}

.advantages h2 {
margin-bottom: 1.25rem; /* 20px */
font-size: 1.8rem;
color: #009fda;
}

.adv-grid {
display: flex;
justify-content: center;
gap: 1.25rem; /* 20px */
margin-top: 1.875rem; /* 30px */
flex-wrap: wrap;
}

.adv {
flex: 1 1 15.625rem; /* 250px */
background: #fff;
padding: 1.5625rem; /* 25px */
border-radius: 0.625rem; /* 10px */
border: 0.0625rem solid #ddd; /* 1px */
transition: box-shadow 0.3s ease;
}

.adv:hover {
box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1); /* 4px 12px */
}

.adv h4 {
color: #009fda;
margin-bottom: 0.625rem; /* 10px */
}

/* ===== Pricing Image inside Advantages ===== */
.advantages img {
    max-width: 32%;   /* shrink it (try 300px if you want smaller) */
    width: 100%;        /* makes it responsive */
    height: auto;       /* keeps proportions */
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* ===== Pricing Heading inside Advantages ===== */
.advantages .pricing-image {
    margin-top: 40px;   /* add spacing above */
    display: block;     /* ensures it starts on its own line */
}
  
/* ===== About Page (Image Grid) ===== */
.about {
padding: 2.5rem 1.25rem; /* 40px 20px */
text-align: center;
}

.about h2 {
color: #009fda;
margin-bottom: 1.25rem; /* 20px */
}

.grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* always 2 columns */
gap: 2rem;
max-width: 50rem; /* optional, keeps it from stretching too wide */
margin: 0 auto;
padding-top: 1.5rem;
}


.grid-item {
background: #e8f5ff;
padding: 2.5rem; /* 40px */
border: 0.125rem dashed #009fda; /* 2px */
border-radius: 0.5rem; /* 8px */
}

.services > img {
max-width: 50%;
height: auto;
border-radius: 0.625rem; /* 10px */
margin-top: 1.25rem; /* 20px */
}

/* ===== Contact Page ===== */
.contact {
padding: 3.125rem 1.25rem; /* 50px 20px */
text-align: center;
}

.contact h2 {
color: #009fda;
margin-bottom: 1.25rem; /* 20px */
}

.contact-list {
list-style: none;
}

.contact-list li {
margin: 0.625rem 0; /* 10px */
font-size: 1.125rem; /* 18px */
}

/* ===== Google Form Container ===== */
.form-container {
margin-top: 1.875rem; /* 30px */
}

.form-container iframe {
width: 100%;
max-width: 50rem; /* 800px */
height: 56.25rem;  /* 900px */
border: none;
border-radius: 0.625rem; /* 10px */
}

/* ===== Footer ===== */
footer {
background-color: #009fda;
color: #fff;
text-align: center;
padding: 0.9375rem; /* 15px */
margin-top: 1.875rem; /* 30px */
}

/* ===== Responsive ===== */
@media (max-width: 48rem) { /* 768px */
nav ul {
    flex-direction: column;
    gap: 0.625rem; /* 10px */
}

.hero img {
    max-width: 90%;
}

.adv-grid {
    flex-direction: column;
    align-items: center;
}
}

/* ===== Temporary About Page Footer Fix ===== */
.about-page {
min-height: 100vh; /* full viewport height */
display: flex;
flex-direction: column;
}

.about-page footer {
margin-top: auto; /* pushes footer to bottom */
}
  

/* Mobile optimization for Advantages Section (iPhone width) */
@media (max-width: 26rem) {  /* ~416px, fits most iPhones */
    .adv-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 2 items per row */
      gap: 1rem;
    }
  
    .adv {
      padding: 0.75rem; /* smaller padding so text fits */
      font-size: 0.9rem; /* slightly smaller text */
    }
  
    .adv h4 {
      font-size: 1rem;
      margin-bottom: 0.3rem;
    }
  
    .adv p {
      font-size: 0.85rem;
      line-height: 1.3;
    }

    .advantages img{
        max-width: 80%;
    }
}