*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f2f2f2;
color:#06202B;
}
a{
text-decoration: none;}


/* UX button animation */
@keyframes bounce {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-12px) scale(1.05); }
  50%  { transform: translateY(0) scale(0.98); }
  70%  { transform: translateY(-6px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}


button:active {
  animation: bounce 0.4s;
}
.bounce {
  animation: bounce 0.5s ease;
}

/* ── SCROLL REVEAL (slide-in as content enters view) ── */
.reveal-up, .reveal-left, .reveal-right {
  opacity: 0; transition: opacity .65s ease, transform .65s ease;
}
.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-up.visible, .reveal-left.visible, .reveal-right.visible {
  opacity: 1; transform: none;
}

/* HERO */

.contact-hero{

margin:0px;
height:80vh;
background-color:#06202B; /* hero photo now shown via the rotating carousel */
position:relative;
isolation:isolate;
display:flex;
align-items:center;
justify-content:center;

}

@media (max-width: 991px) {
  .contact-hero {
    height: 60vh;
  }
}

@media (max-width: 575px) {
  .contact-hero {
    height: 50vh;
  }
}

.contact-hero h1{

color:white;
font-size:100px;
font-weight:600;
font-family: 'Abril Fatface';

}

@media (max-width: 767px) {
  .contact-hero h1 {
    font-size: 48px;
  }
}



/* NAVBAR — fixed, shrinks on scroll (consistent site-wide) */

.navbar{

position:fixed;
top:20px;
left:0;
right:0;
margin:0 80px;
height:90px;
background:white;
color: #2FC0EE;
border-radius:50px;
display:flex;
align-items:center;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
z-index:1000;
transition: top .3s, height .3s, box-shadow .3s;

}
.navbar.scrolled { top:10px; height:70px; box-shadow:0 6px 24px rgba(0,0,0,.13); }

.logo img { height:60px; transition: height .3s; }
.navbar.scrolled .logo img { height:42px !important; }

@media (max-width: 767px) {
  .navbar {
    margin: 0 20px;
    height: 70px;
    top: 15px;
  }

  .logo img {
    width: 120px !important;
    height: 40px !important;
  }
}

.nav-inner{

width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 40px;

}

@media (max-width: 767px) {
  .nav-inner {
    padding: 0 20px;
  }
}

nav ul{

display:flex;
gap:40px;
list-style:none;
font-weight:500;

}

nav li{

cursor:pointer;

}
nav li:hover{
color:#2f545f;
transform: translatey(-3px);
}
nav ul {
    display: flex;
    gap: 40px;
    list-style: none;
}

nav li {
    color: #38a8c8;
    cursor: pointer;
}

.navbar .nav-link,
.navbar .dropdown-toggle {
  color: #38a8c8 !important;
  font-weight: 500;
  font-size: 15px;
  padding: 6px 10px;
}

.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
  color: #2f545f !important;
}

.navbar .nav-link.active,
.navbar .nav-item.active > .nav-link {
  color: #ff8c38 !important;
}

/* Apply Now nav button */
.btn-apply-nav {
  display: inline-block;
  background: #FB963E;
  color: #fff !important;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  margin-left: 10px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 6px 18px rgba(251,150,62,.45);
}
.btn-apply-nav:hover { background: #e07e2a; color: #fff !important; box-shadow: 0 8px 22px rgba(251,150,62,.6); transform: translateY(-1px); }

.active {
    color: #ff8c38 !important;
}

@media (max-width: 767px) {
  nav ul {
    gap: 20px;
    font-size: 14px;
  }
}

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

.dropdown a {
    color: #38a8c8;
    font-size: 15px;
    display: block;
    text-decoration: none;
}

.dropdown-menu {
    display: block;
    position: absolute;
    top: 120%;
    right: 10%;

    background: white;
    padding: 15px 0;
    min-width: 180px;

    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);

    transition: all 0.3s ease;
}

/* MENU ITEMS */
.dropdown-menu li {
    padding: 10px 20px;
}

.dropdown-menu li a {
    color: #062C33;
    font-size: 15px;
    display: block;
}

/* HOVER EFFECT */
.dropdown-menu li:hover {
    background: #f5f5f5;
}

/* SHOW DROPDOWN */
.dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

nav {
    position: relative;
    z-index: 1000;
}

/* Mobile nav toggle (hamburger + slide-down panel) */
.hamburger{
  display:none;background:none;border:none;cursor:pointer;padding:6px;
}
.hamburger span{
  display:block;width:24px;height:2px;background:#38a8c8;margin:5px 0;
  border-radius:2px;transition:.3s;
}
.mobile-nav{
  display:none;position:absolute;top:100%;left:20px;right:20px;
  background:#fff;border-radius:16px;padding:10px 20px;margin-top:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);flex-direction:column;gap:2px;
  z-index:999;
}
.mobile-nav.open{display:flex;}
.mobile-nav a{
  color:#38a8c8;font-weight:500;padding:12px 4px;border-bottom:1px solid #f0f0f0;
}
.mobile-nav a:last-child{border:none;}
.mobile-nav a.btn-apply-nav{
  color:#fff !important;text-align:center;border:none;margin-top:8px;box-shadow:none;
}
@media(max-width:767px){
  nav.nav-primary > .nav-links{display:none;}
  .hamburger{display:block;}
}
@media(prefers-reduced-motion:reduce){
  .hamburger span,.mobile-nav,.dropdown-menu{transition:none !important;}
}


/* CONTACT SECTION */

.contact-section{

margin:120px 80px;

}

.contact-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:80px;

}

@media (max-width: 991px) {
  .contact-section {
    margin: 80px 20px;
  }

  .contact-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .contact-form {
    order: 1;
  }

  .contact-left {
    order: 2;
  }

  .contact-form {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .contact-form h2,
  .contact-form p {
    text-align: center;
  }

  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .map {
    width: 100%;
    height: 300px;
  }
}

@media (max-width: 575px) {
  .contact-section {
    margin: 60px 10px;
  }

  .contact-form {
    padding: 0 10px;
  }

  .contact-form h2 {
    font-size: 32px;
  }

  .contact-form p {
    font-size: 16px;
  }

  .contact-cards {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .contact-card {
    min-height: 140px;
  }

  .map {
    height: 260px;
  }
}


/* CONTACT CARDS */

.contact-cards{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;
margin-bottom:30px;

}

.contact-card{
background:#2fc1ee82;
height:150px;
border-radius:15px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-weight:500;
color:#1c1c1c;

}

.contact-card .icon{

font-size:50px;
color:#3aa6c9;
margin-bottom:10px;
}

.contact-card:hover{
background:white;
color:#3aa6c9;
width: 105%;
height: 160px;
transition:0.5s;
border: 0.5px #3aa6c9;

}

.btn:hover{
  color:#2FC0EE;
  background-color: white;
  transition: 0.5s;
}


/* MAP */
.map{
  width:100%;
  height:300px;
  border-radius:12px;
  overflow:hidden;
  margin-top:20px;
}

.map iframe{
  width:100%;
  height:100%;
  border:0;
}


/* FORM */

.contact-form h2{

font-size:40px;
color:#f28c3c;
margin-bottom:10px;

}

.contact-form p{

margin-bottom:30px;
font-size:18px;

}

.contact-form label{

display:block;
margin-top:15px;
margin-bottom:5px;
font-weight:500;

}

.contact-form input{

width:100%;
height:45px;
border:none;
background:#ddd;
border-radius:10px;
padding-left:15px;

}

.contact-form textarea{

width:100%;
height:140px;
border:none;
background:#ddd;
border-radius:10px;
padding:10px;
resize:none;

}

.contact-form button{

margin-top:25px;
width:100%;
height:50px;
border:none;
border-radius:30px;
background:#3aa6c9;
color:white;
font-size:18px;
cursor:pointer;

}

/* FOOTER */

footer{
margin-top:80px;
background:#06202B;
color:white;
padding:70px 80px;
}


.footer-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:60px;
}

.newsletter{
margin-top:50px;
padding-top:40px;
border-top:1px solid rgba(255,255,255,0.1);
text-align:center;
}
.newsletter h3{
font-size:16px;
font-weight:500;
margin-bottom:16px;
}

.newsletter-form{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
align-items:center;
max-width:700px;
margin:0 auto;
}

.newsletter-form input{
padding:12px 16px;
border-radius:6px;
border:none;
font-family:'Poppins',sans-serif;
font-size:0.9rem;
flex:1;
min-width:180px;
outline:none;
transition:box-shadow 0.2s;
}
.newsletter-form input:focus{
box-shadow:0 0 0 3px rgba(251,150,62,0.4);
}

.newsletter-form button{
padding:12px 28px;
background:#FB963E;
color:white;
border:none;
border-radius:6px;
font-weight:600;
font-family:'Poppins',sans-serif;
cursor:pointer;
white-space:nowrap;
transition:background 0.2s;
}
.newsletter-form button:hover{
background:#e07e2a;
}

.social-icons{
margin-top:20px;
display:flex;
gap:18px;
}

.social-icons a{
width:36px;
height:36px;
border-radius:50%;
background:#247a9f;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:16px;
transition:0.3s;
text-decoration: none;
}

.footlink,
.footer-links ul a,
.footer-links a.footlink {
 text-decoration: none;
 color:white;
}

.footlink:hover,
.footer-links ul a:hover,
.footer-links a.footlink:hover {
  color: #f28c3c;
  cursor: pointer;
  text-decoration:none;
}

.social-icons a:hover{
background:#f28c3c;
transform:translateY(-3px);
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links ul li {
  margin-bottom: 10px;
}

.footer-links ul a {
  color: white;
  text-decoration: none;
  display: block;
}

.footer-links ul a:hover {
  color: #f28c3c;
}

@media (max-width: 991px) {
  footer {
    padding: 40px 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-about,
  .footer-links,
  .footer-contact,
  .newsletter {
    width: 100%;
  }

  .footer-about {
    text-align: center;
  }

  .social-icons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .social-icons a {
    margin-bottom: 10px;
  }

  .footer-links,
  .footer-contact,
  .newsletter {
    text-align: center;
  }

  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
    min-width: unset;
  }
}

/* ══════════════════════════════════════════
   BACK TO TOP
══════════════════════════════════════════ */
.back-to-top{
  position:fixed;bottom:26px;right:26px;z-index:500;
  width:44px;height:44px;border-radius:50%;
  background:#f28c3c;color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease,background .2s;
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:#e07e2a;}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none;}}
@media(max-width:575px){.back-to-top{width:40px;height:40px;bottom:18px;right:18px;font-size:16px;}}



/* ══════════════════════════════════════════
   ICON SYSTEM (self-hosted inline SVG, no icon fonts)
══════════════════════════════════════════ */
.icon{
  width:1em;height:1em;display:inline-block;
  fill:currentColor;vertical-align:-0.125em;
  flex-shrink:0;
}
.icon.fa-spin{animation:icon-spin 1s linear infinite;}
@keyframes icon-spin{100%{transform:rotate(360deg);}}

/* ══════════════════════════════════════════
   HERO IMAGE CAROUSEL (auto-rotating, no user controls)
══════════════════════════════════════════ */
.contact-hero{overflow:hidden;}
.contact-hero::before{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(6,32,43,.45) 0%,rgba(6,32,43,.65) 100%);}
.contact-hero h1{position:relative;z-index:1;}
.hero-carousel{position:absolute;inset:0;overflow:hidden;z-index:-1;}
.hero-carousel-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease-in-out;}
.hero-carousel-slide.active{opacity:1;}
@media (prefers-reduced-motion:reduce){.hero-carousel-slide{transition:none;}}