footer {
    position: relative;
    width: 100%;
    background-image: url('/images/FGMNEW.png');
    background-size: cover;             /* ✅ cover entire footer */
    background-position: center;
    padding: 20px;                      /* 🔧 better base padding */
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;                 /* ✅ center text on all devices */
    flex-wrap: wrap;                    /* 🔧 allow wrapping on smaller screens */
}

/* ✅ Small desktops & laptops */
@media (max-width: 1200px) {
    footer {
        padding: 18px;
    }
}

/* ✅ Tablets / small laptops */
@media (max-width: 992px) {
    footer {
        padding: 16px;
    }
}

/* ✅ Large phones / portrait tablets */
@media (max-width: 768px) {
    footer {
        padding: 14px;
        text-align: center;             /* 🔧 ensure text stays centered */
    }
}

/* ✅ Small phones */
@media (max-width: 480px) {
    footer {
        padding: 12px;
        font-size: 0.9rem;              /* 🔧 shrink text a bit */
    }
}

.contact-section {
    max-width: 900px;
    width: 100%;
    padding: 20px;
    margin: 0 auto;              /* ✅ centers the section */
}

/* Contact grid layout */
.contact-grid {
    display: flex;
    justify-content: center;     /* center the whole grid */
    gap: 50px;                   /* spacing between the two columns */
    margin-top: 20px;
    text-align: center;          /* center text inside columns */
    flex-wrap: wrap;             /* ✅ prevents overflow on smaller screens */
}

.contact-col {
    flex: 1;
    min-width: 250px;
    max-width: 400px;            /* ✅ keeps columns balanced */
}

/* ✅ Medium desktops & laptops */
@media (max-width: 1200px) {
    .contact-grid {
        gap: 40px;               /* reduce spacing */
    }
}

/* ✅ Tablets / small laptops */
@media (max-width: 992px) {
    .contact-grid {
        gap: 30px;               /* tighter spacing */
    }
    .contact-col {
        max-width: 350px;        /* avoid columns being too wide */
    }
}

/* ✅ Large phones / portrait tablets */
@media (max-width: 768px) {
    .contact-grid {
        flex-direction: column;  /* stack vertically */
        align-items: center;
        gap: 25px;
    }
    .contact-col {
        max-width: 100%;         /* full width on small screens */
    }
}

/* ✅ Small phones */
@media (max-width: 480px) {
    .contact-section {
        padding: 15px;           /* compact padding */
    }
    .contact-grid {
        gap: 20px;               /* smaller gap */
    }
    .contact-col {
        min-width: 100%;         /* single column */
    }
}











/* Logo */
.contact-section img {
    max-width: 100%;     /* ✅ never overflow container */
    height: auto;        /* ✅ maintain aspect ratio */
    display: block;      /* ✅ removes extra bottom space */
    margin: 0 auto;      /* ✅ keep image centered */
}

/* Medium desktops & laptops */
@media (max-width: 1200px) {
    .contact-section img {
        max-width: 80%;  /* 🔧 slightly smaller */
    }
}

/* Tablets / small laptops */
@media (max-width: 992px) {
    .contact-section img {
        max-width: 70%;  /* 🔧 scale down */
    }
}

/* Large phones / portrait tablets */
@media (max-width: 768px) {
    .contact-section img {
        max-width: 60%;  /* 🔧 smaller logo */
    }
}

/* Small phones */
@media (max-width: 480px) {
    .contact-section img {
        max-width: 50%;  /* 🔧 keep compact */
    }
}


.contact-section h1 {
    font-size: 2rem;      /* ✅ default for desktops */
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.2;     /* 🔧 improves readability */
}

/* Medium desktops & laptops */
@media (max-width: 1200px) {
    .contact-section h1 {
        font-size: 1.8rem;
    }
}

/* Tablets / small laptops */
@media (max-width: 992px) {
    .contact-section h1 {
        font-size: 1.6rem;
    }
}

/* Large phones / portrait tablets */
@media (max-width: 768px) {
    .contact-section h1 {
        font-size: 1.4rem;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .contact-section h1 {
        font-size: 1.2rem;
    }
}

/* Tagline */
.contact-section h2 {
    font-size: 1.2rem;     /* 🔧 slightly larger for desktops */
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.3;      /* 🔧 improves readability */
}

/* Medium desktops & laptops */
@media (max-width: 1200px) {
    .contact-section h2 {
        font-size: 1.1rem;
    }
}

/* Tablets / small laptops */
@media (max-width: 992px) {
    .contact-section h2 {
        font-size: 1rem;
    }
}

/* Large phones / portrait tablets */
@media (max-width: 768px) {
    .contact-section h2 {
        font-size: 0.95rem;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .contact-section h2 {
        font-size: 0.9rem;
    }
}


/* Section headings */
.contact-section h3 {
    font-size: 1.5rem;     /* ✅ default for desktops */
    margin-top: 5px;
    margin-bottom: 10px;
    color: black;
    line-height: 1.3;      /* 🔧 improves readability */
}

/* Medium desktops & laptops */
@media (max-width: 1200px) {
    .contact-section h3 {
        font-size: 1.3rem;
    }
}

/* Tablets / small laptops */
@media (max-width: 992px) {
    .contact-section h3 {
        font-size: 1.2rem;
    }
}

/* Large phones / portrait tablets */
@media (max-width: 768px) {
    .contact-section h3 {
        font-size: 1.1rem;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .contact-section h3 {
        font-size: 1rem;
    }
}


/* Paragraphs */
.contact-section p {
    margin: 6px 0;
    line-height: 1.5;
    font-size: 1rem;       /* ✅ good default for desktops */
    color: #222;           /* optional: improve contrast */
}

/* Medium desktops & laptops */
@media (max-width: 1200px) {
    .contact-section p {
        font-size: 0.95rem;
    }
}

/* Tablets / small laptops */
@media (max-width: 992px) {
    .contact-section p {
        font-size: 0.9rem;
    }
}

/* Large phones / portrait tablets */
@media (max-width: 768px) {
    .contact-section p {
        font-size: 0.9rem;
        line-height: 1.6;   /* 🔧 extra spacing for readability */
    }
}

/* Small phones */
@media (max-width: 480px) {
    .contact-section p {
        font-size: 0.85rem;
        line-height: 1.6;
    }
}


/* Links */
.contact-section a {
    color: black;
    text-decoration: none;
    font-size: 1rem;           /* ✅ good default size */
    transition: color 0.3s, text-decoration 0.3s;
}

/* Hover / Focus */
.contact-section a:hover,
.contact-section a:focus {
    text-decoration: underline;
    color: rgb(13, 94, 244);
    outline: none;             /* remove default outline */
}

/* Keyboard navigation accessibility */
.contact-section a:focus-visible {
    outline: 2px dashed rgb(13, 94, 244);
    outline-offset: 3px;
}

/* Medium screens (laptops/tablets) */
@media (max-width: 992px) {
    .contact-section a {
        font-size: 0.95rem;
    }
}

/* Phones */
@media (max-width: 600px) {
    .contact-section a {
        font-size: 0.9rem;       /* 🔧 slightly smaller */
        padding: 4px 2px;        /* ✅ bigger tap area */
    }
}


/* Social icons container */
.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 0;
    margin: 10px 0;
    list-style: none;
    flex-wrap: wrap; /* ✅ avoids overflow on mobile */
}

/* Social icons */
.social-links li a {
    font-size: 24px;   /* ✅ desktop default */
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-flex; /* ✅ ensures icons are centered */
    align-items: center;
    justify-content: center;
}

/* Hover (desktop) + Focus (keyboard users) */
.social-links li a:hover,
.social-links li a:focus {
    transform: scale(1.2);
    color: rgb(13, 94, 244);
    outline: none;
}

/* Accessibility for keyboard nav */
.social-links li a:focus-visible {
    outline: 2px dashed rgb(13, 94, 244);
    outline-offset: 3px;
}

/* Tablets & small laptops */
@media (max-width: 992px) {
    .social-links li a {
        font-size: 22px;
    }
}

/* Phones */
@media (max-width: 600px) {
    .social-links {
        gap: 12px; /* ✅ tighter spacing */
    }
    .social-links li a {
        font-size: 20px;
        padding: 8px;  /* ✅ bigger tap area for fingers */
    }
}

/* Very small phones */
@media (max-width: 400px) {
    .social-links li a {
        font-size: 18px;
    }
}


/* Brand Colors */
.social-links li a .fa-facebook { color: #1877F2; }
.social-links li a .fa-instagram { color: #E4405F; }
.social-links li a .fa-twitter { color: #1DA1F2; }
.social-links li a .fa-youtube { color: #FF0000; }
.social-links li a .fa-linkedin { color: #0077B5; }

/* Hover Colors */
.social-links li a:hover .fa-facebook { color: #145dbf; }
.social-links li a:hover .fa-instagram { color: #cc3366; }
.social-links li a:hover .fa-twitter { color: #0d8ddb; }
.social-links li a:hover .fa-youtube { color: #cc0000; }
.social-links li a:hover .fa-linkedin { color: #005983; }

footer h3 {
  font-size: 1.5rem;      /* ✅ default for desktop */
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;  /* ✅ ensures underline only matches text width */
  text-align: center;
}

footer h3::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;             /* ✅ underline covers 60% of text for balance */
  height: 3px;
  background-color: rgb(13, 94, 244);
  border-radius: 2px;     /* ✅ softer underline edges */
}

/* Medium screens (tablets, small laptops) */
@media (max-width: 992px) {
  footer h3 {
    font-size: 1.3rem;
  }
  footer h3::before {
    width: 70%; /* slightly wider underline */
  }
}

/* Small screens (phones) */
@media (max-width: 600px) {
  footer h3 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
  }
  footer h3::before {
    bottom: -6px; /* tighter spacing under text */
    width: 80%;   /* almost full width for readability */
  }
}



/* Footer bottom section */
#footer-bottom {
    color: black;
    width: 100%;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;         /* ✅ allows stacking on small screens */
    font-size: 0.9rem;
    gap: 10px;               /* ✅ consistent spacing when wrapped */
}

/* Links */
#footer-bottom a {
    color: rgb(13, 94, 244);
    text-decoration: none;
    margin-left: 10px;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

#footer-bottom a:hover,
#footer-bottom a:focus {
    text-decoration: underline;
    color: rgb(9, 72, 189);  /* ✅ slightly darker on hover */
    outline: none;
}

/* Tablet screens */
@media (max-width: 992px) {
    #footer-bottom {
        font-size: 0.85rem;
        padding: 10px 15px;
    }
}

/* Mobile screens */
@media (max-width: 600px) {
    #footer-bottom {
        flex-direction: column;  /* ✅ stack items vertically */
        text-align: center;
        gap: 8px;
        font-size: 0.8rem;
    }
    #footer-bottom a {
        margin-left: 0;          /* ✅ remove awkward offset */
        margin-right: 0;
    }
}