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

:root{
    --bg: #f6f9fc;
    --card: #ffffff;
    --primary: #0d47a1;
    --primary-2: #1976d2;
    --accent: #ffca28;
    --muted: #6b7280;
    --text: #0f1724;
    --radius: 12px;
    --container: 1100px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

html,body{
    height:100%;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    line-height:1.6;
    font-size:16px;
}

.container{
    width:90%;
    max-width:var(--container);
    margin:0 auto;
}

header{
    background:linear-gradient(90deg,var(--primary),var(--primary-2));
    color:#fff;
    padding:14px 0;
}

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    height: 20px;
}

nav h1{
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:0.2px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand .logo{
    width:48px;
    height:48px;
    object-fit:cover;
    border-radius:8px;
    box-shadow:0 4px 10px rgba(2,6,23,0.15);
}

/* Primary (highlighted) header styles */
.primary-header{
    background: linear-gradient(90deg, rgba(13,71,161,0.92), rgba(25,118,210,0.82));
    color:#fff;
    padding:28px 0;
    box-shadow:0 14px 40px rgba(13,71,161,0.18);
    border-bottom:6px solid rgba(255,202,40,0.12);
    position:relative;
}

.primary-brand{gap:18px;justify-content:center;align-items:center;text-align:center}
.primary-brand .large-logo{width:100px;height:100px;border-radius:14px;box-shadow:0 16px 40px rgba(2,6,23,0.18)}
.primary-brand .brand-text h1{font-size:2rem;color:#fff;margin:0;font-weight:700;letter-spacing:0.4px}
.primary-brand .brand-text .tagline{color:rgba(255,255,255,0.92);font-weight:600;margin-top:4px;font-size:0.9rem}

/* subtle glowing accent below header */
.primary-header::after{content:'';display:block;position:absolute;left:50%;transform:translateX(-50%);bottom:-16px;width:70%;height:8px;background:linear-gradient(90deg, rgba(255,202,40,0.18), rgba(255,255,255,0.02));border-radius:40px;filter:blur(6px);opacity:0.9}

/* Secondary header holds nav (subtle) */
.secondary-header{background:rgba(13,71,161,0.06);padding:10px 0;border-bottom:1px solid rgba(13,71,161,0.10);backdrop-filter:blur(6px)}
.secondary-header .main-nav{align-items:center}

/* Ensure nav links remain visible on secondary header */
.secondary-header .nav-links li a{color:var(--text);background:transparent;padding:8px 10px}
.secondary-header .nav-links li a:hover{background:rgba(13,71,161,0.10);color:var(--primary-2)}

/* Adjustments for mobile when primary header present */
@media (max-width:768px){
  .primary-brand .brand-text h1{font-size:1.25rem}
  .primary-brand .large-logo{width:72px;height:72px}
}

nav ul{
    list-style:none;
    display:flex;
    gap:14px;
    align-items:center;justify-content: space-evenly;
    width: 100%;

}

nav ul li a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    padding:8px 12px;
    border-radius:8px;
    transition:background .18s, color .18s, transform .18s;
}

nav ul li a:hover{
    background:rgba(255,255,255,0.08);
    transform:translateY(-2px);
}

.main-header{
    text-align:center;
    padding:60px 20px;
    background:linear-gradient(180deg, rgba(13,71,161,0.06), transparent);
    color:var(--primary-2);
}

.main-header h1{
    font-size:2rem;
    margin-bottom:8px;
}

.main-header p{
    color:var(--muted);
    font-weight:500;
}

.section{
    padding:48px 0;
}

.section h2{
    text-align:center;
    margin-bottom:18px;
    color:var(--primary);
    font-size:1.25rem;
}

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.card{
    background:var(--card);
    padding:22px;
    border-radius:var(--radius);
    box-shadow:0 6px 18px rgba(12,16,22,0.06);
    transition:transform .2s, box-shadow .2s;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(12,16,22,0.08);
}

.card.center{
    text-align:center;
}

footer{
    background:var(--primary);
    color:#fff;
    text-align:center;
    padding:20px 0;
    margin-top:40px;
}

img{
    max-width:100%;
    border-radius:8px;
    display:block;
   
}

/* Utility */
.btn{
    display:inline-block;
    background:var(--primary);
    color:#fff;
    padding:10px 14px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
}

/* Responsive tweaks */
@media (max-width:900px){
    .main-header h1{font-size:1.6rem}
    nav h1{font-size:1rem}
}

@media (max-width:768px){
    nav{flex-direction:column;align-items:flex-start}
    nav ul{flex-direction:column;width:100%;gap:10px;margin-top:10px}
    nav ul li a{width:100%}
    .container{width:94%}
    .section{padding:28px 0}
}

@media (max-width:420px){
    .main-header{padding:36px 12px}
    .main-header h1{font-size:1.3rem}
}

/* Header & Topbar */
.topbar{background:#0b3b82;color:#fff;font-size:0.95rem}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.topbar a{color:rgba(255,255,255,0.9);text-decoration:none}

.main-nav{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:14px 0;position:relative;width:100%}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-text h1{font-size:1.1rem;margin:0;word-break:break-word}
.brand-text .tagline{display:block;color:var(--muted);font-size:0.85rem}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:1.4rem;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0}
.nav-links{list-style:none;display:flex;gap:12px;align-items:center;margin-left:12px;flex-wrap:wrap}
.nav-links li a{color:#fff;padding:8px 10px;border-radius:8px;text-decoration:none;transition:background .18s;white-space:nowrap}
.nav-links li a:hover{background:rgba(255,255,255,0.08)}
.contact-btn{background:var(--accent);color:#0b3b82;padding:8px 12px;border-radius:8px;font-weight:700}

/* Mobile nav links - hidden by default */
@media (max-width:768px){
    .main-nav .nav-links{display:none !important}
}

/* Footer */
.site-footer{background:linear-gradient(180deg,var(--primary-2),var(--primary));color:#fff;padding:40px 0 0}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:28px 0}
.site-footer h4{margin-bottom:10px}
.site-footer p, .site-footer li, .site-footer a{color:rgba(255,255,255,0.9)}
.site-footer .footer-logo{width:72px;height:72px;object-fit:cover;border-radius:10px;margin-bottom:8px}
.site-footer ul{list-style:none;padding:0}
.site-footer ul li{margin-bottom:8px}
.subscribe{display:flex;gap:8px;margin-top:8px}
.subscribe input{flex:1;padding:8px;border-radius:8px;border:0}
.subscribe .btn{padding:8px 10px}
.site-footer .col{padding:0 12px;overflow:hidden}
.site-footer p{margin:6px 0;font-size:0.9rem;line-height:1.5}
.site-footer h4{font-size:1rem;margin-bottom:12px;font-weight:700;color:#fff}
.site-footer .footer-logo{width:70px;height:70px;margin:0 auto 10px;display:block;border-radius:8px}
.site-footer .col-links ul{flex-direction:column}
.site-footer .nav-links{display:flex;flex-direction:column;gap:0;margin-left:0;align-items:flex-start}
.site-footer .nav-links li a{padding:8px 0;color:#fff;white-space:normal;word-break:break-word;display:block}
.site-footer .col:nth-child(3) .nav-links{flex-direction:column;align-items:flex-start}
.site-footer .footer-recognition{margin-top:8px;font-size:0.85rem}
.site-footer .footer-recognition p{margin:3px 0}
.contact-list{list-style:none;padding:0}
.contact-list li{margin-bottom:8px;display:flex;align-items:center;gap:10px;font-size:0.9rem}
.contact-list a{color:rgba(255,255,255,0.9);text-decoration:none;transition:color .2s}
.contact-list a:hover{color:#ffca28}
.site-footer .col-contact{grid-column:auto;grid-row:auto;text-align:left}
.footer-bottom{background:rgba(0,0,0,0.15);margin-top:20px;padding:16px 0;text-align:center;border-top:1px solid rgba(255,255,255,0.1)}
.footer-bottom p{margin:0;font-size:0.9rem}

/* Responsive header & footer */
@media (max-width:900px){
    .footer-grid{grid-template-columns:1fr 1fr;gap:20px;padding:24px 0}
    .site-footer{padding:30px 0 0}
    .site-footer h4{font-size:1rem;margin-bottom:12px}
    .site-footer p{font-size:0.9rem}
    .site-footer .col{padding:16px 12px}
    .site-footer .col-contact{grid-column:auto;grid-row:auto}
    .contact-list li{font-size:0.9rem;gap:8px}
}

.social-icons{display:flex;justify-content:center;gap:20px;padding:20px 0;flex-wrap:wrap}
.social-icons a{display:flex;align-items:center;justify-content:center;width:45px;height:45px;background:rgba(255,255,255,0.15);border-radius:50%;color:#fff;text-decoration:none;font-size:20px;transition:background .3s, transform .3s}
.social-icons a:hover{background:#ffca28;color:#0d47a1;transform:translateY(-3px)}

@media (max-width:768px){
    .nav-toggle{display:block}
    .main-nav .nav-links{display:none !important;position:absolute;left:8px;right:8px;top:calc(100% + 8px);background:var(--card);flex-direction:column;padding:8px 0;border-radius:8px;box-shadow:0 12px 30px rgba(2,6,23,0.15);z-index:100;min-width:160px;gap:0;overflow:visible;max-height:none}
    .main-nav .nav-links li{width:100%;list-style:none}
    .main-nav .nav-links li a{display:block;width:100%;color:var(--text);padding:12px 16px;border-radius:0;margin:0;text-align:left}
    .main-nav .nav-links li a:hover{background:rgba(15,23,36,0.05)}
    .main-nav .nav-links li:first-child a{border-radius:6px 6px 0 0}
    .main-nav .nav-links li:last-child a{border-radius:0 0 6px 6px}
    .main-nav.open .nav-links{display:flex !important}
    .contact-btn{display:none}
    .brand-text h1{font-size:1rem}
    .footer-grid{grid-template-columns:1fr;gap:16px;padding:20px 0}
    .site-footer .col{padding:16px 12px;display:block}
    .site-footer .col-contact{grid-column:auto;grid-row:auto;text-align:left}
    .site-footer .footer-logo{width:60px;height:60px;margin-bottom:10px}
    .site-footer h4{font-size:0.95rem;margin-bottom:12px}
    .site-footer p{font-size:0.85rem;margin-bottom:6px}
    .site-footer ul li{margin-bottom:8px}
    .site-footer .nav-links{display:flex !important;flex-direction:column;gap:0;margin-left:0;align-items:flex-start}
    .site-footer .nav-links li a{display:block;padding:8px 0;font-size:0.95rem;color:#fff;white-space:normal}
    .site-footer .col-links ul{flex-direction:column}
    .contact-list{width:100%}
    .contact-list li{font-size:0.85rem;gap:8px;margin-bottom:8px;display:flex;align-items:flex-start}
    .contact-list i{font-size:16px;margin-top:2px;flex-shrink:0}
    .footer-bottom{padding:14px 0;margin-top:16px}
    .footer-bottom p{font-size:0.85rem}
}

/* Single featured image styling */
.img-section{padding:28px 0}
.single-image-wrapper{max-width:980px;margin:28px auto;padding:6px;border-radius:14px;border:1px solid rgba(15,23,36,0.08);box-shadow:0 18px 48px rgba(2,6,23,0.12);overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.9))}
.single-image-wrapper img{display:block;width:100%;height:auto;object-fit:cover}

.gallery-row{display:flex;gap:28px;justify-content:center;margin-top:18px}
.gallery-row img{width:300px;height:300px;object-fit:cover;border-radius:12px;box-shadow:0 12px 30px rgba(2,6,23,0.08);border:1px solid rgba(15,23,36,0.06)}

@media (max-width:900px){
    .single-image-wrapper{max-width:720px}
    .gallery-row img{width:220px;height:220px}
}

@media (max-width:520px){
    .single-image-wrapper{margin:18px 12px}
    .gallery-row{flex-direction:column;gap:12px}
    .gallery-row img{width:100%;height:240px}
    body{font-size:15px}
    .container{width:95%}
    .nav-links li a{padding:10px 14px;font-size:14px}
}

@media (max-width:480px){
    .primary-brand{gap:12px}
    .primary-brand .large-logo{width:60px;height:60px}
    .primary-brand .brand-text h1{font-size:1.1rem}
    .primary-brand .brand-text .tagline{font-size:0.8rem}
    .nav-toggle{font-size:1.2rem;padding:6px}
    .section{padding:24px 0}
    .section h2{font-size:1.1rem;margin-bottom:14px}
    .card{padding:16px}
    .main-header{padding:40px 16px}
    .main-header h1{font-size:1.4rem}
    .site-footer{padding:20px 0 0}
    .footer-grid{grid-template-columns:1fr;gap:12px;padding:16px 0}
    .site-footer .col{padding:12px 6px;border-radius:8px}
    .site-footer .footer-logo{width:50px;height:50px;margin:0 auto 10px}
    .site-footer h4{font-size:0.85rem;margin-bottom:8px}
    .site-footer p{font-size:0.75rem;margin-bottom:8px}
    .site-footer ul li{margin-bottom:4px}
    .site-footer .nav-links{display:flex !important;flex-direction:column;gap:0;margin-left:0}
    .site-footer .nav-links li a{display:block;padding:4px 0;font-size:0.7rem;line-height:1.3;color:#fff}
    .site-footer ul li a{font-size:0.75rem}
    .contact-list{padding:0}
    .contact-list li{font-size:0.7rem;gap:4px;margin-bottom:4px}
    .contact-list i{font-size:14px}
    .social-icons{gap:12px;padding:12px 0}
    .social-icons a{width:36px;height:36px;font-size:16px}
    .footer-bottom{padding:10px 0;margin-top:10px}
    .footer-bottom p{font-size:0.75rem}
}

@media (max-width:360px){
    .site-footer .col{padding:10px 4px}
    .site-footer h4{font-size:0.8rem}
    .site-footer p{font-size:0.7rem}
    .site-footer .nav-links{display:flex !important;flex-direction:column;gap:0;margin-left:0}
    .site-footer .nav-links li a{display:block;padding:3px 0;font-size:0.65rem;color:#fff}
    .site-footer ul li a{font-size:0.65rem}
    .contact-list li{font-size:0.65rem}
    .social-icons a{width:32px;height:32px;font-size:14px}
}

/* Social Media Icons */
.social-icons{display:flex;gap:12px;margin-top:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.social-icons a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;transition:background .2s,transform .2s;border:1px solid rgba(255,255,255,0.18)}
.social-icons a:hover{background:rgba(255,255,255,0.18);transform:translateY(-3px)}
.social-icons svg{width:24px;height:24px}