@media (max-width:991px){

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 20px;
}

.logo-title{
    display:flex;
    align-items:center;

    flex:1;
}

.mobile-toggle{
    display:flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    margin-left:auto;      /* pushes it to extreme right */
    margin-right:6px;

    border-radius:10px;

    background:rgba(255,255,255,.06);

    cursor:pointer;

    transition:.3s;
}

#menuIcon{
    display:block;
}

#closeIcon{
    display:none;
}

.mobile-toggle:hover{

background:rgba(255,255,255,.12);

}

.mobile-toggle i{

font-size:24px;
color:white;

}


.logo{

height:58px;

}

.title-tag{

margin-left:0;

}

.headline
{
    padding-top:0;
    line-height:0.4;

}

.head-line1{

font-size:14px;
font-weight:700;

}

.head-line2{

font-size:11px;

}

.head-tagline{

font-size:8.4px;
margin-top:4px;

}

.main-nav{

position:absolute;

top:100%;

left:0;

width:100%;

z-index:9999;

overflow:visible;

}

.main-nav-links{

display:none;

flex-direction:column;

width:100%;

background:#0D3B24;

max-height:80vh;      /* Maximum height */

overflow-y:auto;   

}

.main-nav-links.active{

display:flex;

}

.main-nav-links li{

width:100%;

list-style:none;

border-bottom:1px solid rgba(255,255,255,.08);

}

.dropbtn{

width:100%;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:10px;

    padding:10px 16px;   /* Reduced from 15px */

    background:none;

    border:none;

    cursor:pointer;

}

.nav-icon{

 width:22px;

    font-size:17px;

    color:#8BC34A;

}

	.nav-link{
    text-decoration: none;
    color: white;
}

.nav-link:hover{
    text-decoration: none;
}

.nav-link:visited{
    color: white;
}

.nav-link:active{
    color: white;
}

.nav-icon-btn .dropbtn{

    display:flex;
    flex-direction:row !important;
    align-items:center;
    justify-content:flex-start;

    gap:12px;

    width:100%;

    padding:12px 18px;
}

.dropbtn span{

 display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    font-size:14px;

    font-weight:500;

}

.dropbtn:hover{

background:#145B33;

}

.dropbtn:hover .nav-icon{

color:#F4C542;

}

.dropdown{
    width:100%;
}

.dropdown-content{

    display:none;

    position:relative;

    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;

    left:0;
    right:40px;

    background:#12462A;

    box-sizing:border-box;
	background:#12462A;

max-height:none;

overflow:visible;

}

.dropdown-content.show{
    display:block;
	    opacity: 1;
    visibility: visible;
    transform: translate(-0%, 0);
}



.dropdown-content a{

display:block;

padding:10px 50px;

font-size:13px;

font-weight:400;

color:#EAEAEA;

text-decoration:none;

border-top:1px solid rgba(255,255,255,.06);

transition:.25s;

    font-size:13px;

    line-height:1.4;

}

.dropdown-content a:hover{

background:#1C5F39;

color:#F4C542;

padding-left:64px;

}

.caret{

transition:.35s;

font-size:13px;

}

.caret.rotate{

transform:rotate(180deg);

}
}


/* ===========================
   MOBILE FOOTER
=========================== */
/* ==========================
   MOBILE FOOTER
========================== */
@media (max-width:991px){

.footer{
    padding:0;
}

/* Entire Footer */

.footer-grid{
    display:flex;
    flex-direction:column;
    gap:25px;
    padding:30px 20px;
}

/* Logo + Heading */

.logo-title-tag{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:15px;
    text-align:left;
}

.footer-logo{
    flex-shrink:0;
}

.footer-img{
    width:75px;
    height:75px;
}

.title-tag{
    flex:1;
}

.footer-headline-1{
    font-size:22px;
    margin:0;
    color:#F4B400;
}

.footer-headline-2{
    font-size:13px;
    margin:3px 0;
    color:#9CCC65;
}

.footer-tagline{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:6px;
    margin-left:0;
    font-size:12px;
    color:#D8B46A;
}

/* Follow Us */

.footer-link-header{
    margin-top:20px;
}

.footer-follow-us{
    text-align:center;
    font-size:20px;
    margin-bottom:15px;
    color:#F4C542;
}

.social-links{
    display:flex;
    justify-content:center;
    gap:18px;
    padding:0;
    margin:0;
    list-style:none;
}

.social-media{
    width:42px;
    height:42px;
}

/* Contact */


.footer-heading{
    color:#F4C542;
    font-size:20px;
    margin-bottom:15px;
}

.footer-grid-2 p{
    font-size:14px;
    line-height:1.7;
    color:#D8E3D2;
    margin:6px 0;
}

/* Copyright */

.copyright.section{
    padding:15px;
}

.copyright{
    font-size:12px;
    text-align:center;
    line-height:1.6;
}

}

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

@media (max-width:991px){

.footer-grid-2{
    width:100%;
    display:flex;
    justify-content:flex-start;
    text-align:left;
}

.contact-box{
    width:100%;
    max-width:100%;
}

.footer-heading{
    margin:15px 0;
    padding-left:0;
    text-align:left;
    font-size:22px;
}

.contact-info{
    width:100%;
}

.contact-info p{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-bottom:14px;

    font-size:14px;
    line-height:1.7;
}

.contact-info p span{
    display:block;
}

.contact-info strong{
    display:block;
    margin-bottom:5px;
}

.contact-info i{
    font-size:16px;
    margin-top:4px;
    min-width:18px;
    color:#F4C542;
}

.contact-info a{
    color:#D8E3D2;
    text-decoration:none;
    word-break:break-word;
}

.contact-info a:hover{
    color:#F4C542;
}
}



/* Desktop dropdown */
@media (min-width:992px){

.dropdown{
    position:relative;
}


.dropdown-content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
      background: #163C1C;
    min-width: 260px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    transition: all .3s ease;
    transform: translateY(15px);
}

.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-content a {
    color: white;
    background: #163C1C;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 500;
}

.dropdown-content a:hover {
    background: #0E5A2A;
    color: #F4C542;
}

}

/* ===========================================
   MAIN SECTION - MOBILE RESPONSIVE
=========================================== */

@media (max-width:991px){

    /* Hero Section (Slider) */
.header-content-image{
    width:100%;
    height:320px;
    overflow:hidden;
}

.slider{
    display:flex;
    align-items:stretch;
     height:100%;
}

.slide{
    min-width:100%;
     height:100%;
}

.main-img{
    position:relative;
    width:100%;
    height:300px;
    overflow:hidden;
}

.main-image{
    width:100%;
    height:100%;
}

.main-img-link{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

	
.slide,
.slider,
.main-img,
.main-image{
    background:none;
}
/* Hero text */

.marine-header{

position:absolute;

left:18px;

right:18px;

bottom:18px;

z-index:10;

color:#fff;

}

.marine-header h1{

font-size:16px;

line-height:1.2;

margin-bottom:8px;

}

.marine-header h2{

font-size:13px;

line-height:1.5;

}
/* Hide second caption */
.marine-header div:last-child{
    display:none;
}

.mission-section{
    margin:0;
    padding:25px 18px 45px;
}

.mission-heading h2{

    font-size:32px;

    text-align:center;

}

.mission-heading p{

    font-size:16px;

    line-height:1.8;

    text-align:center;

    color:#555;

}

.mission-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:24px;

    margin-top:45px;

}

.mission-card{

    padding:20px 20px;

    border-radius:16px;

}

.mission-card i{

    font-size:38px;

    margin-bottom:18px;

}

.mission-card h3{

    font-size:22px;

    margin-bottom:14px;

}

.mission-card p{

    font-size:15px;

    line-height:1.8;

}


}

/* ==========================
   MOBILE (up to 768px)
========================== */
@media (max-width: 768px) {

  /* Header */
  .header {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0.6rem;
  }

  .logo-title {
    display: flex;
    align-items: center;
  }

  .logo {
    height: 55px;
    margin: 0;
  }

  .headline {
    padding-top: 0;
    line-height: 1.1;
  }

  .head-line1 {
    font-size: 1rem;
  }

  .head-line2 {
    font-size: 0.72rem;
  }

  .head-tagline {
    display: none;
  }

  /* Hero Image */
  .header-content-image {
    width: 100%;
    height: auto;
    min-height: auto;
    overflow: hidden;
  }

  .slider,
  .slide,
  .main-image {
    width: 100%;
    height: auto;
  }

  .main-img-link {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  /* Mission Section */
  .mission-section {
    padding: 3rem 1.2rem;
  }

  .mission-heading h2 {
    font-size: 2rem;
  }

  .mission-heading p {
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify;
  }

  .mission-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .mission-card {
    padding: 2rem 1.5rem;
  }

  .mission-card h3 {
    font-size: 1.2rem;
  }

  .mission-card p {
    font-size: 0.95rem;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }

  .footer-grid-2 {
    justify-content: center;
  }

  .logo-title-tag {
    justify-content: center;
  }

  .footer-tagline {
    justify-content: center;
    margin-left: 0;
  }

  .social-links {
    justify-content: center;
    gap: 1rem;
  }

  .social-media {
    width: 40px;
    height: 40px;
  }
}


@media (max-width: 480px) {

  .logo {
    height: 45px;
  }

  .head-line1 {
    font-size: 0.9rem;
  }

  .head-line2 {
    font-size: 0.65rem;
  }

  .header-content-image {
    height: auto;
  }

  .mission-heading h2 {
    font-size: 1.6rem;
  }

  .mission-heading p,
  .mission-card p {
    font-size: 0.9rem;
  }

  .mission-card {
    padding: 1.5rem 1rem;
  }

  .mission-card i {
    font-size: 2.5rem;
  }

  .footer-headline-1 {
    font-size: 1.1rem;
  }

  .footer-headline-2 {
    font-size: 0.85rem;
  }
}