.site-footer{
  background:#0c2d57;
}

.social-icons{
  display:flex;
  gap:12px;
}

.social-btn{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:18px;
  text-decoration:none;
  transition:all .25s ease;
}

/* BOOTSTRAP STYLE HOVER */
.social-btn:hover{
  background:#fff;
  color:#0c2d57;
  transform:translateY(-3px);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.footer-text{
  font-size:14px;
  line-height:1.4;
  opacity:.9;
}

/* =====================
GLOBAL
===================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
scroll-behavior:smooth;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

section h2{
font-size:34px;
font-weight:700;
margin-bottom:20px;
}

.card h3{
font-size:21px;
font-weight:600;
}

/*FONTS*/

h1{
font-size:clamp(28px,5vw,52px);
}

h2{
font-size:34px;
}

h3{
font-size:21px;
}

p{
font-size:16px;
}

li{
font-size:16px;
}

body{
font-size:16px;
line-height:1.7;
position:relative;
z-index:0;
}

/* =====================
MOBILE MENU TOGGLE
===================== */

.menu-toggle{
display:none;
flex-direction:column;
justify-content:center;
gap:6px;
cursor:pointer;
z-index:1100;
}

.menu-toggle span{
width:28px;
height:3px;
background:white;
border-radius:2px;
transition:all 0.3s ease;
}

/* Animate to X */
.menu-toggle.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.menu-toggle.active span:nth-child(2){
opacity:0;
}

.menu-toggle.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}

/* =====================
HEADER SECTION
===================== */

header{
position:sticky;
top:0;
background:#0c2d57;
color:white;
z-index:1000;
transition:all 0.4s ease;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 0;
}

nav a{
color:white;
margin-left:20px;
text-decoration:none;
position:relative;
font-weight:500;
transition:all 0.3s ease;
}

nav a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0%;
height:2px;
background:#1e73be;
transition:width 0.3s ease;
}

nav a:hover{
color:#1e73be;
}

nav a:hover::after{
width:100%;
}

.nav-whatsapp{
background:#25D366;
padding:8px 16px;
border-radius:6px;
margin-left:25px;
font-weight:bold;
transition:all 0.3s ease;
}

.nav-whatsapp:hover{
transform:translateY(-2px);
box-shadow:0 6px 15px rgba(0,0,0,0.25);
color:white;
}

.nav-whatsapp::after{
display:none; /* remove underline effect */
}

.header-logo{
height:55px;
width:auto;
object-fit:contain;
}

/* =====================
HOME SECTION
===================== */

.hero{
position:relative;
background:url('images/20221122_133211.jpg') center/cover no-repeat;
color:white;
padding:32px 20px;
}

.hero h1{
font-size: clamp(28px, 5vw, 52px);
font-weight:700;
}

.hero p{
font-size:18px;
line-height:1.6;
}

.hero-content{
max-width:650px;
}

.hero-text{
font-size:18px;
margin-top:15px;
}

.hero-list li{
margin-bottom:10px;
font-size:18px;
}

.hero-list i{
color:#1e73be;
margin-right:10px;
}

.hero-buttons{
margin-top:25px;
display:flex;
gap:15px;
flex-wrap:wrap;
}

.btn-primary-custom{
background:#1e73be;
padding:14px 22px;
border-radius:8px;
color:white;
text-decoration:none;
font-weight:bold;
transition:all 0.3s ease;
}

.btn-primary-custom:hover{
background:#155d96;
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,0.25);
}

.btn-outline-custom{
border:2px solid white;
padding:12px 20px;
border-radius:8px;
color:white;
text-decoration:none;
font-weight:bold;
transition:all 0.3s ease;
}

.btn-outline-custom:hover{
background:white;
color:#1e73be;
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,0.25);
}

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45); /* darkness level */
z-index:0;
}

.hero .container{
position:relative;
z-index:1;
}

/* =====================
CONTACT STRIP
===================== */

.contact-strip{
background:#1e73be;
padding:20px 20px;
color:white;
}

.contact-strip-row{
max-width:1100px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
}

/* LEFT TEXT */
.contact-strip-left{
text-align:right;
}

.strip-title{
font-size:28px;
font-weight:700;
line-height:1.2;
}

.strip-subtitle{
font-size:18px;
margin-top:6px;
opacity:0.95;
}

/* RIGHT BUTTON */
.contact-strip-right{
display:flex;
align-items:center;
}

.strip-btn{
background:white;
color:#1e73be;
padding:14px 26px;
border-radius:6px;
font-weight:700;
text-decoration:none;
transition:all 0.3s ease;
white-space:nowrap;
}

.strip-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,0.25);
}

/* =====================
ABOUT SECTION
===================== */

img{
max-width:100%;
}

.about{
padding:60px 0;
line-height:1.6;
}

.about h3{
margin-top:20px;
}

.about-card h2{
  margin-bottom:15px;
}

.highlight{
  color:#1e73be;   /* your site blue */
  font-weight:600;
}

.about-img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:10px;
}

.about-card{
  padding-top: 40px !important;
}

/* =====================
ACCREDITATION LOGOS
===================== */

.logo-img{
height:80px;
object-fit:contain;
}


/* =====================
SERVICES SECTION
===================== */

.service-card{
background:white;
padding:25px;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
transition:all 0.3s ease;
height:100%;
position:relative;
overflow:hidden;
}

.service-card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 14px 28px rgba(0,0,0,0.15);
}

.service-icon{
width:70px;
height:70px;
object-fit:contain;
margin-bottom:15px;
}

.service-card ul{
padding-left:0;
margin-top:15px;
}

.service-card ul li{
list-style:none;
margin-bottom:8px;
font-size:14px;
}

.service-card ul li i{
color:#1e73be;
margin-right:8px;
}

/* =====================
PROJECTS SECTION
===================== */

.project-card{
position:relative;
overflow:hidden;
border-radius:14px;
height:360px;   /* taller cards */
cursor:pointer;
transition:all 0.3s ease;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.project-card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 14px 28px rgba(0,0,0,0.15);
}

.project-img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.2s ease;
}

.project-card:hover .project-img{
transform:scale(1.1);
}

.project-overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:20px;
background:linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
color:white;
display:flex;
align-items:flex-end;
justify-content:center;
text-align:center;
}

.project-overlay h4{
margin:0;
font-weight:600;
letter-spacing:1px;
}

.project-overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:25px 20px;
background:linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
color:white;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
text-align:center;
gap:8px;
}

/* ICON */
.project-icon{
width:42px;
height:42px;
border-radius:50%;
background:#1e73be;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
color:white;
opacity:0;
transform:translateY(10px) scale(0.8);
transition:all 0.35s ease;
}

/* SHOW ICON ON HOVER */
.project-card:hover .project-icon{
opacity:1;
transform:translateY(0) scale(1);
}

/* TEXT */
.project-overlay h4{
margin:0;
font-weight:600;
letter-spacing:1px;
}


/* FIX CAROUSEL FULL HEIGHT */

.project-card .carousel,
.project-card .carousel-inner,
.project-card .carousel-item{
height:100%;
}

.project-card .carousel-item img{
height:100%;
width:100%;
object-fit:cover;
}

/* =====================
WHY SECTION
===================== */

.why-list li{
  margin-bottom:10px;
  font-size:16px;
}

.why-list i{
  color:#1e73be;
  margin-right:8px;
}

/* IMAGES (NO EFFECTS) */
.why-img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
  border-radius: 10px;
}

/* BUTTON HOVER EFFECT */
#why .btn-primary{
  transition:all 0.3s ease;
  box-shadow:0 4px 12px rgba(30,115,190,0.25);
}

#why .btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(30,115,190,0.35);
  background:#1665a8; /* slightly darker blue */
}

/* =====================
CONTACT SECTION
===================== */

.contact-info,
.contact-box{
background:white;
padding:30px;
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
transition:all 0.3s ease;
}

.contact-info:hover,
.contact-box:hover{
transform:translateY(-6px);
box-shadow:0 14px 28px rgba(0,0,0,0.15);
}

.contact-list{
padding-left:0;
list-style:none;
}

.contact-list li{
margin-bottom:10px;
font-size:15px;
}

.contact-list i{
color:#1e73be;
margin-right:8px;
}

.contact-details p{
margin-bottom:8px;
font-size:14px;
}

.contact-details i{
color:#1e73be;
margin-right:8px;
}

.contact-box .btn-primary{
background:#1e73be;
border:none;
padding:12px;
font-weight:500;
}

.contact-box .btn-primary:hover{
background:#155a94;
}

.contact-box input,
.contact-box textarea{
font-size:16px;
}

.contact-section{
background:white;
}

.info-box{
padding:15px;
border-radius:10px;
}

.info-box h5{
font-weight:600;
margin-bottom:8px;
}

.info-box i{
color:#1e73be;
margin-right:6px;
}

.contact-box{
background:#f8f8f8;
}

/* Contact links style */
.info-box a{
color:#333;
text-decoration:none;
transition:0.2s ease;
}

.info-box a:hover{
color:#1e73be;
}

.info-box .bi-whatsapp{
color:#25D366;
}

.info-box .bi-facebook{
color:#1877F2;
}

.info-box a{
cursor:pointer;
}

/* Social icon buttons */
.info-box .social a{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border-radius:50%;
text-decoration:none;
transition:all 0.3s ease;
padding-left: 5px;
}

/* Icon size */
.info-box .social a i{
font-size:30px;
transition:all 0.3s ease;
}

/* Default colors */
.info-box .social .bi-whatsapp{ color:#25D366; }
.info-box .social .bi-facebook{ color:#1877F2; }



/* WhatsApp hover */
.info-box .social a:hover .bi-whatsapp{ color:white; }
.info-box .social a:hover:has(.bi-whatsapp){
background:#25D366;
}

/* Facebook hover */
.info-box .social a:hover .bi-facebook{ color:white; }
.info-box .social a:hover:has(.bi-facebook){
background:#1877F2;
}

/* =====================
FLOATING BUTTONS
===================== */

.callbtn,
.whatsapp{
position:fixed;
right:20px;
display:flex;
align-items:center;
gap:10px;
padding:14px 16px;
border-radius:50px;
color:white;
text-decoration:none;
font-weight:600;
z-index:9999;
overflow:hidden;
transition:all 0.3s ease;
}

/* Positions */
.callbtn{ 
bottom:90px;   /* was 80 */
background:#0c2d57; 
padding-left: 24px;
padding-top: 18px;
margin-bottom: 10px;
}

.whatsapp{ 
bottom:20px; 
background:#25D366;
padding-left: 24px;
padding-top: 18px;
}

/* Icons bigger */
.callbtn i,
.whatsapp i{
font-size:22px;
min-width:22px;
}

/* Hide text initially */
.callbtn span,
.whatsapp span{
max-width:0;
opacity:0;
white-space:nowrap;
transition:all 0.3s ease;
}

/* Hover expand */
.callbtn:hover span,
.whatsapp:hover span{
max-width:120px;
opacity:1;
}

/* Slight grow on hover */
.callbtn:hover,
.whatsapp:hover{
padding-right:20px;
transform:translateX(-4px);
}

/* =====================
FOOTER TOP
===================== */

#footer-top{
  width:100%;
  background:#1e73be;
  color:white;
}

.c2 a{
    color: white;
    font-weight: 500;
}

.c3 a{
color: white;
}

.c4 h5{
color:black;
}

.c4 p{
    color: black;
}

/* TEXT */
#footer-top h5{
  margin-bottom:15px;
  font-weight:600;
}

#footer-top a:hover{
  color:#0c2d57;
}

/* LIST */
.contact-list{
  list-style:none;
  padding:0;
  margin:0;
}

.contact-list li{
  margin-bottom:8px;
}

/* ICONS */
#footer-top i{
  color:white;
}

/* SOCIAL */
.social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  color:white;
  margin:0 5px;
  font-size:18px;
  transition:all 0.3s ease;
}

.social a:hover{
  background:white;
  color:#1e73be;
  transform:translateY(-3px);
}

/* LOGO */
.footer-logo{
  max-width:150px;
}

/* =====================
FOOTER SECTION
===================== */

footer{
background:#0c2d57;
color:white;
text-align:center;
padding:20px;
}

/* =====================
MOBILE
===================== */

@media(max-width:768px){

/* Menu hidden by default */
nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#0c2d57; /* matches header blue */
  width:100%;
  overflow:hidden;
  max-height:0; /* hidden */
  transition:max-height 0.4s ease;
}

/* Menu visible when active */
nav.active{
  max-height:500px; /* adjust if you have more links */
  padding:15px 0;
}

/* Links styling */
nav a{
  color:white;
  text-decoration:none;
  font-weight:500;
  padding:12px 0;
  text-align:center;
  transition:all 0.3s ease;
}

nav a:hover{
  color:#1e73be; /* subtle hover effect */
}

/* Show toggle button on mobile */
.menu-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  z-index:1100;
}

/* Hamburger animation */
.menu-toggle span{
  width:28px;
  height:3px;
  background:white;
  border-radius:2px;
  transition:all 0.3s ease;
}

.menu-toggle.active span:nth-child(1){
  transform:rotate(45deg) translate(5px,5px);
}

.menu-toggle.active span:nth-child(2){
  opacity:0;
}

.menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg) translate(5px,-5px);
}

.hero{

padding:80px 20px;
}

.header-logo{
height:45px;
}

.contact-strip-row{
flex-direction:column;
text-align:center;
}

.contact-strip-left{
text-align:center;
}

.footer-columns {
    flex-direction: column;
  }
  .footer-col {
    margin-bottom: 20px;
  }

}