/* ==========================
   ISLAP STYLE.CSS
========================== */



  @media (max-width:900px) {

    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
    }

    .nav-links {

      position: fixed;
      top: 0;
      right: 0;

      width: 300px;
      max-width: 80%;

      height: 100vh;

      background: #fff;

      transform: translateX(100%);
      transition: transform .35s ease;

    }

    .nav-links.active {

      transform: translateX(0);

    }

  }







  @media(max-width:768px) {

    .cta {

      padding: 90px 20px;

    }

    .cta h2 {

      font-size: 34px;

    }

  }

  /* ==========================
FORM
========================== */



  @keyframes fadeIn {

    from {

      opacity: 0;

      transform: translateY(40px);

    }

    to {

      opacity: 1;

      transform: translateY(0);

    }

  }

  /* ==========================
SCROLLBAR
========================== */


  /* ==========================
RESPONSIVE
========================== */

  @media(max-width:900px) {

    .hero h1 {

      font-size: 46px;

    }

    .section {

      padding: 80px 0;

    }

  }

  @media(max-width:768px) {

    .nav {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 0;
    }

    .nav ul {

      flex-wrap: wrap;

      justify-content: center;

      gap: 15px;

    }

    .hero {

      padding: 120px 20px;

    }

    .hero h1 {

      font-size: 36px;

    }

    .hero p {

      font-size: 18px;

    }

    .section h2 {

      font-size: 34px;

    }

    .cards {

      grid-template-columns: 1fr;

    }

    .gallery {

      grid-template-columns: 1fr;

    }

    .feature-grid {
      width: 90%;
    }

    .feature-box {
      padding: 28px 20px;
    }

    .feature-icon {
      width: 60px;
      height: 60px;
      font-size: 28px;
    }

  }

  @media(min-width:901px) {

    body {
      padding-top: 80px;
    }

  }

  @media(max-width:768px) {

    .hero {
      background-position: 95% center;
    }

  }

  @media(max-width:768px) {

    .hero-content {
      transform: scale(0.92);
    }

  }

  @media(max-width:768px) {

    .hero-info strong {
      font-size: 26px;
    }

    .hero-info span {
      font-size: 14px;
    }

    .hero-info div {
      padding: 18px;
    }

  }

  @media(max-width:768px) {

    .logo {
      font-size: 22px;
      letter-spacing: 0.5px;
    }

  }

  @media(max-width:768px) {

    .nav {
      padding: 12px 0;
    }

  }

  @media(max-width:768px) {

    .hamburger {
      width: 25px;
    }

    .hamburger span {
      height: 2px;
      margin: 5px 0;
    }

  }

  @media(max-width:480px) {


    .hero h1 {

      font-size: 30px;

    }

    .btn {

      width: 100%;

      text-align: center;

    }

    .section {

      padding: 65px 0;

    }

  }


  /* ==========================
   NOV HERO DESIGN
========================== */




  @media(max-width:768px) {

    .hero h1 {

      font-size: 38px;

    }


    .hero-info {

      grid-template-columns: 1fr;

    }

  }




  /* ==========================
   HERO FEATURES
========================== */






  @media(max-width:1000px) {


    .feature-grid {

      grid-template-columns: repeat(2, 1fr);

    }


  }



  @media(max-width:600px) {


    .feature-grid {

      grid-template-columns: 1fr;

    }


    .hero-features {

      padding: 30px 0;

    }

    .about-section {

      padding: 60px 0;

    }


  }






  @media(max-width:900px) {


    .about-grid {

      grid-template-columns: 1fr;

      gap: 40px;

    }


    .about-image img {

      height: 350px;

    }


    .about-content h2 {

      font-size: 34px;

    }


  }






  @media(max-width:768px) {

    .cta h2 {

      font-size: 32px;

    }

  }






  @media(max-width:900px) {

    .gallery {

      grid-template-columns: 1fr;

    }

  }








  @media(max-width:900px) {


    .contact-grid {

      grid-template-columns: 1fr;

    }


    .contact-form,
    .contact-info {

      padding: 30px;

    }


  }



  .footer-bottom p {

    color: #94a3b8;
    font-size: 15px;

  }

  @media(max-width:768px) {

    .footer-content {

      flex-direction: column;
      text-align: center;
      gap: 35px;

    }

    .footer-contact {

      text-align: center;

    }

  }


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

  @media (max-width:768px) {

    .contact-section {
      padding: 70px 0;
    }

    .contact-header {
      margin-bottom: 40px;
    }

    .contact-header h2 {
      font-size: 32px;
      line-height: 1.2;
    }

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

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

    .contact-form,
    .contact-info {
      padding: 25px;
      border-radius: 18px;
    }

    .contact-form h3,
    .info-box h3 {
      font-size: 22px;
      margin-bottom: 18px;
    }

    .contact-form input,
    .contact-form textarea {
      padding: 15px 16px;
      font-size: 15px;
      margin-bottom: 15px;
    }

    .contact-form textarea {
      height: 130px;
    }

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

    .info-box p {
      font-size: 15px;
      line-height: 1.7;
    }

    .map iframe {
      height: 250px;
    }

  }

  @media (max-width:480px) {

    .contact-section {
      padding: 55px 0;
    }

    .contact-header h2 {
      font-size: 28px;
    }

    .contact-header p {
      font-size: 15px;
    }

    .contact-form,
    .contact-info {
      padding: 20px;
    }

    .about-badge {
      font-size: 13px;
      padding: 7px 16px;
    }

    .map iframe {
      height: 220px;
    }

  }





  @media(max-width:900px) {

    .nav {
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
    }

    .hamburger {

      display: block;

    }

    .nav-links {

      position: fixed;

      top: 0;
      right: -100%;

      width: 300px;
      max-width: 80%;

      height: 100vh;

      background: white;

      display: flex;
      flex-direction: column;

      padding: 100px 35px;

      gap: 30px;

      transition: .4s ease;

      box-shadow: -10px 0 40px rgba(0, 0, 0, .15);

      z-index: 1001;

    }

    .nav-links.active {

      right: 0;

    }

    .nav-links li {

      list-style: none;

    }

    .nav-links a {

      font-size: 20px;
      font-weight: 600;

    }

    .close-menu {

      display: block;

      position: absolute;

      top: 30px;
      right: 30px;

      font-size: 30px;

      cursor: pointer;

    }

  }

  @media (max-height: 800px) and (min-width: 901px) {

    .hero {
      min-height: auto;
      padding: 120px 20px 80px;
    }

    .hero-info {
      margin-top: 40px;
    }

  }