*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:'Poppins',sans-serif;
    background:#f6f9fc;
    color:#333;
}

.nav-link{
    color:#0b3954;
    text-decoration:none;
    position:relative;
    transition:0.3s ease;
}
.nav-link:hover{
    color:#087e8b;
}
/* ================= FULL SCREEN HERO SLIDER ================= */
.hero{
    width:100%;
    min-height:360px;
    display:flex;
    background:
    linear-gradient(
        0deg,
        #071047,
        #087e8b
    );
}

.full-width-section{
    width:100%;
    margin:0;
    padding:0;
}

/* Left Image 40% */
.hero-image{
    width:36%;
    overflow:hidden;  
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0px;    
}

/* Right Content 60% */
.hero-content{
    width:64%;
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:10px;
}

.hero-content h1{
    font-size:50px;
    font-weight:700;
    margin-bottom:10px;
}

.hero-content h2{
    font-size:26px;
    line-height:1.4;
    margin-bottom:20px;
}

.hero-content p{
    font-size:18px;
    margin-bottom:10px;
}

.hero-info{
    margin:10px 0;
}

.hero-info i{
    width:25px;
    color:#d8f3f5;
}

.hero-buttons{
    margin-top:5px;
}
.btn{
    display:inline-block;
    padding:14px 35px;
    border-radius:30px;
    margin:8px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}
.primary{
    background:white;
    color:#087e8b;
}
.secondary{
    color:white;
    border:2px solid white;
}
.btn:hover{
    transform:translateY(-5px);
}

/* Tablet */
@media(max-width:900px){
    .hero{
        flex-direction:column;
    }

    .hero-image{
        width:100%;
        height:350px;
    }

    .hero-content{
        width:100%;
        padding:40px 25px;
    }

    .hero-content h1{
        font-size:50px;
    }

    .hero-content h2{
        font-size:26px;
    }
}

/* Mobile */
@media(max-width:480px){
    .hero-image{
        height:250px;
    }

    .hero-content h1{
        font-size:40px;
    }

    .hero-content h2{
        font-size:22px;
    }

    .hero-content p{
        font-size:15px;
    }
}

/* Dark overlay */
.overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
    rgba(5,35,55,.75),
    rgba(8,126,139,.65)
    );
}

/* ================= NAVIGATION ================= */
.navbar{
    position:sticky;
    top:0;
    z-index:1000;
    background:white;
    box-shadow:
    0 3px 12px rgba(0,0,0,.12);
}

.nav-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1px 20px;
}

/* Logo */
.logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:24px;
    font-weight:700;
    color:#0b3954;
}

.logo img{
    height:55px;
}

/* Menu */
.menu{
    display:flex;
    align-items:center;
    gap:25px;
}

.menu a{
    text-decoration:none;
    color:#0b3954;
    font-size:15px;
    font-weight:500;
}

.menu a:hover{
    color:#087e8b;
}

/* Dropdown */
.dropdown{
    position:relative;
}

.dropdown-content{
    display:none;
    position:absolute;
    top:25px;
    left:0;
    width:220px;
    background:white;
    border-radius:8px;
    box-shadow:
    0 8px 20px rgba(0,0,0,.15);
    overflow:hidden;
}

.dropdown-content a{
    display:block;
    padding:12px 18px;
    border-bottom:1px solid #eee;
}

.dropdown-content a:hover{
    background:#e9f7f8;
}

.dropdown:hover .dropdown-content{
    display:block;
}

/* Mobile Icon */
.menu-toggle{
    display:none;
    font-size:30px;
    cursor:pointer;
}

/* Mobile Responsive */
@media(max-width:768px){
.nav-container{
    padding:10px 15px;
}
.menu-toggle{
    display:block;
}
.menu{
    position:absolute;
    top:65px;
    left:0;
    width:100%;
    background:white;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    padding:20px;
    gap:15px;
}
.menu.active{
    display:flex;
}

/* Mobile dropdown */
.dropdown{
    width:100%;
}
.dropdown-content{
    position:static;
    width:100%;
    box-shadow:none;
    margin-top:10px;
    display:none;
}
.dropdown:hover .dropdown-content{
    display:block;
}
.logo{
    font-size:25px;
}
.logo img{
    height:40px;
}
}

/* ================= SECTIONS ================= */
section{
    max-width:1100px;
    margin:auto;
    padding:70px 20px;
}
.title{
    text-align:center;
    font-size:34px;
    color:#0b3954;
    margin-bottom:35px;
}
.about{
    background:white;
    padding:30px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    text-align: justify;
}
.cards{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}
.card{
    background:white;
    padding:25px;
    border-radius:15px;
    box-shadow:
    0 5px 20px rgba(0,0,0,.08);
}
.card h3{
    color:#087e8b;
    margin-bottom:10px;
}
table{
    width:100%;
    border-collapse:collapse;
    background:white;
}
/* Zebra striping */
tr:nth-of-type(odd) {
  background: #eee;
}
th{
    background:#0b3954;
    color:white;
    padding:14px;
}
td{
    padding:14px;
    border-bottom:1px solid #ddd;
}
footer{
    background:#0b3954;
    color:white;
    text-align:center;
    padding:25px;
}
/* ================= RESPONSIVE ================= */
@media(max-width:768px){
.hero h1{
    font-size:34px;
}
.hero p{
    font-size:16px;
}
.menu-icon{
    display:block;
}
.title{
    font-size:28px;
}
table{
    font-size:14px;
}
}

/* Top Sticky Band */

.top-band{
   /* position:sticky; */
    top:0;
    z-index:2000;
    width:100%;
    background:
    linear-gradient(
        90deg,
        #10a6a6,
        #087e8b,
        #0b3954
    );
    color:white;
    padding:8px 20px;
    font-size:14px;
    box-shadow:
    0 3px 12px rgba(0,0,0,0.15);
}

.top-content{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:35px;
    flex-wrap:wrap;
}

.top-content span{
    display:flex;
    align-items:center;
    gap:8px;
}

.top-content i{
    font-size:15px;
    color:#ffffff;
}

/* Mobile Responsive */
@media(max-width:768px){
    .top-band{
        font-size:12px;
        padding:8px 10px;
    }

    .top-content{
        gap:12px;
        justify-content:center;
    }
}

/* Mobile Menu Icon */
.menu-icon{
    display:none;
    font-size:30px;
    cursor:pointer;
}

.gradient-heading {
  display: inline-block; /* Keeps the gradient container tight to the text */
  background-image: linear-gradient(to right, #00c6ff, #0072ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gradient-heading2 {
  display: inline-block; /* Keeps the gradient container tight to the text */
  background-image: linear-gradient(to right, #FBB725, #F04F00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gradient-heading3 {
  display: inline-block; /* Keeps the gradient container tight to the text */
  background-image: linear-gradient(to right, #3de07b, #220bec);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.responsive-image{
    width:40%;
    height:auto;
    display:block;
    object-fit:cover;
    box-shadow: 0 3px 3px rgba(2, 0, 0, 0.18);
    border-radius:5px;
}

.gradient-top {
  display: inline-block; /* Keeps the gradient container tight to the text */
  background-image: linear-gradient(to right, #ff5100, #e5ff00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gradient-top2 {
  display: inline-block; /* Keeps the gradient container tight to the text */
  background-image: linear-gradient(to right, #e5ff00, #ff5100);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.icon-circle {
  width: 40px;
  height: 40px;
  background-color: #0975bd; /* Solid circle color */
  border-radius: 50%;         /* Makes it a perfect circle */
  color: #ffffff;             /* Icon color */
  
  /* Flexbox to center the icon perfectly */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Adjust icon size inside the circle */
  font-size: 24px; 
}

.rounded-bordered-image {
  /* Set the border thickness, style, and color */
  border: 1px solid #98989b; 
  
  /* Round the outer corners of the border and the image */
  border-radius: 12px; 
  
  /* Optional: Ensures rectangular images crop nicely instead of stretching */
  object-fit: cover; 

 /*Others */
 width:25%;
 margin-right:5px;
 padding:2px;
}

/* Mobile view */
@media(max-width:768px){
    .responsive-image{
        width:100%;
        margin-bottom: 10px;
        border-radius:8px;
    }
}