/* Base */
html,
body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(90deg, #E2F3FB 10%, #F4F5FF 100%) !important;
    color: #1b1b1b;
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}


/* Logo */
.logo-img {
    width: 171px;
    height: 121px;
}

/* Navbar */
.navbar {
    background: transparent;
}

.nav-link {
    font-family: "Inter";
    position: relative;
    font-size: 16px;
    text-decoration: none;
    color: rgba(51, 51, 51, 1);
    font-weight: 400px;
    margin-top: 40px;
}

.nav-link i {
    color: #05847D;
    height: 22px;
    width: 22px;
    font-weight: bold;
}

.nav-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    left: 0;
    bottom: -3px;
    background-color: #05847D;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.navbar-brand {
    font-weight: 700;
    color: #05847D !important;
}

.navbar-nav .nav-item {
    margin: 0 18px;
}

.auth-buttons {
    display: flex;
    align-items: center;
    color: rgba(51, 51, 51, 1);
    gap: 30px;
    margin-left: auto;
}

/* Buttons */
.btn-signup {
    border: 1px solid #05847D;
    color: #05847D;
    border-radius: 30px;
    padding: 8px 20px;
    font-size: 13px;
    transition: 0.3s;
    margin-top: 40px;
    margin-right: 0px;
}

.btn-signup:hover {
    background-color: #05847D;
    color: #fff;
}

.contact-section {
    background: linear-gradient(90deg, #E2F3FB 10%, #F4F5FF 100%) !important;
    min-height: 600px;
    text-align: center;
    padding: 10px 0;
}

.h21 {
    font-family: sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 10px;
    margin-top: -50px;
}

.p1 {
    font-family: 'Inter', sans-serif; /* ensure quotes */
font-weight: 400;   /* 400 → Regular */
font-style: normal; /* NOT 'Regular' */
    font-size: 16px;
    margin-bottom: 20px;
    color: rgba(51, 51, 51, 1); /* dark grey */
}

.custom-input {
    border-radius: 1px;
    border: 1px solid #ddd;
    padding: 8px 10px;
    font-size: 13px;
    color: #05847D;
}

.custom-input::placeholder {
  color: #9b9b9b;         /* color change */
  font-size: 12px;     /* size change */  /* style change */
  opacity: 1;          /* default opacity remove */
}



.btn-view {
    background: #05847D;
    color: #fff;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 13px;
}

.btn-submit {
    background: #05847D;
    color: #fff;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 13px;
}

.btn-send {
    background: #fff;
    border-radius: 50%;
    color: #05847D;
    margin-left: 6px;
    padding: 6px 8px;
    font-size: 13px;
}

.contact-section img {
    max-width: 400px;
    margin-bottom: 15px;
}


/* Footer */
.footer-section {
    background: #05847D;
    color: #fff;
}

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

.footer-section li {
    margin-bottom: 8px;
    font-size: 14px;
}

.social-icons i {
    font-size: 18px;
    color: #fff;
    cursor: pointer;
}

.social-link {
  font-size: 24px;       /* icon size */
  color: #fff;           /* default color */
  transition: all 0.3s ease;
}

.social-link:hover {
  color: #0d6efd;        /* hover color (blue) */
  transform: scale(1.2); /* size increase */
  text-shadow: 0 0 8px rgba(13, 110, 253, 0.6); /* light glow */
}


.profile-circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #05847eab; /* green shade, change if needed */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 11px;
  margin-top: 50px;
  margin-left: 100px;
}
.profile-name {
  font-size: 12px;
  font-weight: 500;
  margin-left: 100px;
}

/* Mobile Profile Styling */
.mobile-profile {
  z-index: 1050; /* Above navbar */
}
.mobile-profile .profile-circle {
  background: #05847D; /* green */
  color: white;
  font-weight: bold;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-profile .profile-name {
  font-size: 14px;
  font-weight: 500;
}

.footer-link {
  color: inherit;      
  text-decoration: none; 
}

.footer-link:hover {
  color: #fff; 
}


@media (max-width: 991px) {

    /* Navbar adjustments */
    .navbar-nav .nav-item {
        margin: 0 10px;
        /* reduce spacing */
    }

    .auth-buttons {
        gap: 20px;
        margin-left: auto;
    }

    .btn-signup {
        padding: 6px 16px;
        font-size: 12px;
        margin-top: 20px;
    }

    /* Hero text adjustments */
    .hero h1 {
        font-size: 48px;
    }

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

    .hero p {
        font-size: 14px;
    }

    .contact-section p {
        font-size: 12px;
    }

    .custom-input {
        font-size: 12px;
        padding: 6px 8px;
    }

    .btn-view,
    .btn-submit {
        font-size: 12px;
        padding: 6px 16px;
    }

    .btn-send {
        font-size: 12px;
        padding: 5px 6px;
    }

    .contact-section img {
        max-width: 300px;
    }
}

/* Mobiles (≤ 576px) */
@media (max-width: 576px) {

    /* Navbar adjustments */
    .logo-img {
        width: 120px;
        height: auto;
    }

    .navbar-nav .nav-item {
        margin: 0 6px;
        /* tighter spacing */
    }

    .auth-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .btn-signup {
        padding: 5px 14px;
        font-size: 11px;
        margin-top: 15px;
    }

    /* Hero section */
    .hero h1 {
        font-size: 36px;
    }

    .hero h2 {
        font-size: 20px;
    }

    .hero p {
        font-size: 12px;
    }

    .hero-rocket img {
        width: 180px;
    }

   

    .contact-section p {
        font-size: 11px;
    }

    .custom-input {
        font-size: 11px;
        padding: 5px 6px;
    }

    .btn-view,
    .btn-submit {
        font-size: 11px;
        padding: 5px 14px;
    }

    .btn-send {
        font-size: 11px;
        padding: 4px 5px;
    }

    .contact-section img {
        max-width: 250px;
    }

    /* Footer */
    .footer-section li {
        font-size: 12px;
    }

    .social-icons i {
        font-size: 16px;
    }
}

/* ---------------------------- */
/* Mobile & Tablet Navbar Only  */
/* ---------------------------- */

/* Tablets (≤ 991px) */
@media (max-width: 991px) {

    /* Overlay menu */
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 75%;
        height: 100%;
        background-color: rgba(5, 132, 125, 0.95);
        padding: 20px;
        transition: transform 0.3s ease-in-out;
        transform: translateX(-100%);
        z-index: 9999;
    }

    /* Show menu when collapsed */
    .navbar-collapse.show {
        transform: translateX(0);
    }

    /* Close button inside menu */
    .close-menu {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 28px;
        color: #fff;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10000;
    }

    /* Blur background when menu open */
    body.menu-open .hero,
    body.menu-open main,
    body.menu-open footer {
        filter: blur(6px);
        transition: filter 0.3s ease;
    }

    /* Mobile nav links color & spacing */
    .navbar-nav .nav-link {
        color: #fff !important;
        font-size: 18px;
        margin: 10px 0;
    }

    /* Mobile logout button */
    .mobile-logout {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

    .mobile-logout .btn {
        background-color: #E2F3FB;
        color: rgb(243, 10, 10) !important;
        font-weight: 600;
        font-size: 18px;
    }
}

/* Mobiles (≤ 576px) */
@media (max-width: 576px) {

    .h21 {
    font-family: sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px !important;
    color: rgba(51, 51, 51, 1);
    margin-bottom: 10px;
    margin-top: -10px;
}
    /* Navbar adjustments */
    .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .navbar .navbar-toggler {
        margin-left: 10px;
        order: -1;
        /* move toggler to left */
        border: none;
        padding: 2px 6px;
        /* smaller toggler */
    }

    /* Custom toggler lines */
    .navbar-toggler-icon {
        background-image: none;
        width: 20px;
        height: 2px;
        background-color: #05847D;
        display: block;
        position: relative;
    }

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        width: 24px;
        height: 2px;
        background-color: #05847D;
        left: 0;
    }

    .navbar-toggler-icon::before {
        top: -7px;
    }

    .navbar-toggler-icon::after {
        top: 7px;
    }

    /* Mobile profile circle */
      .profile-user{
    margin-top: -25px;
    margin-right: 20px;
  }

  #profile-circle {
    width: 32px;
    height: 32px;
    font-size: 14px;
    background-color: #05847D;
  }

    .login-text {
    color: #05847D;
    font-weight: 500;
    text-decoration: none;
    margin-top: 41px;
    margin-right: 18px !important;
  }
    /* Prevent horizontal scroll on mobile */
    body {
        overflow-x: hidden;
    }
}

/* Mobiles (≤ 576px) */
@media (max-width: 576px) {

    /* Navbar adjustments */
    .logo-img {
        width: 120px;
        height: auto;
    }

    .navbar-nav .nav-item {
        margin: 0 6px;
    }

    .auth-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .btn-signup {
        padding: 5px 14px;
        font-size: 11px;
        margin-top: 15px;
    }

    /* Hero section */
    .hero h1 {
        font-size: 36px;
    }

    .hero h2 {
        font-size: 20px;
    }

    .hero p {
        font-size: 12px;
    }

    .hero-rocket img {
        width: 180px;
    }

    /* Contact section */
    .contact-section h2 {
        font-size: 14px;
    }

    .contact-section p {
        font-size: 11px;
    }

    .custom-input {
        font-size: 11px;
        padding: 5px 6px;
    }

    .btn-view,
    .btn-submit {
        font-size: 11px;
        padding: 5px 14px;
    }

    .btn-send {
        font-size: 11px;
        padding: 4px 5px;
    }

    .contact-section img {
        max-width: 250px;
        display: block;
        margin: 0 auto;   /* center image */
    }

        .footer-section {
        display: flex;
        flex-direction: row;
        justify-content: space-around;  /* equal spacing */
        align-items: flex-start;
        text-align: nowrap;
    }

      .footer-section .col-md-3 {
    flex: 1;             /* equal width */
    max-width: none;     /* remove bootstrap fixed width */
  }

    .footer-section ul {
        margin: 0 10px;
    }

    /* Footer */
    .footer-section li {
        font-size: 12px;
    }

    .social-icons i {
        font-size: 16px;
    }

    /* space above email box */
  .footer-section .col-md-3 .d-flex {
    margin-top: 25px;   /* gap between sections */
  }

  /* shrink email input width */
  .footer-section .col-md-3 .form-control.custom-input {
    max-width: 260px;   /* smaller width */
    font-size: 11px;
  }

  /* send button align */
  .footer-section .col-md-3 .btn-send {
    padding: 5px 7px;
    font-size: 12px;
  }

  .footer-section .text-center {
    font-size: 10px;   /* smaller copyright */
    line-height: 1.4;
  }

  .fw-semibold {
    margin-top: 20px;
  }

    /* --- FIX SCROLL ISSUE --- */
    html, body {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;  /* enable vertical scroll */
    }
}