/* nsla_styles.css */

    /* Custom styles for the navbar and background */
		.navbar {
		  /* background-color: #FFFEFA;*/
		  border-bottom: 3px solid #F2F2F2;
		  background-color: #0099FF; /* #198bfe #0f7bff #0099FF #003366 Dark blue background */
		  z-index: 1000; /* Ensures navbar stays on top */
		  padding: 20px 0; /* Adjust top and bottom padding for increased height */
		}
		.navbar-brand img {
		  width: 350px; /* Adjust size of the logo */
		}
		.nav-link {
		  color: white ; /* White text */
		  font-size: 1.4rem;  
		  

		}
		.nav-link:hover {
		  color: #ffcc00 !important; /* Gold color on hover */
		}
		.navbar-toggler-icon {
		  background-color: transparent;
		}	
	
    body {
      background-color: #FFFEFA;
    }

    .carousel-inner img {
            width: 100%;
			height: 100vh;
            /* height: 500px;  Adjust to the desired carousel height */
            object-fit: cover;
			
            /*z-index: -1;*/
    }
	
		/* Bold text in container */
	.bold-text-container {
		text-align: center;
		padding: 20px 0;
		position: relative;
		z-index: 1;
        }
		/* title text in container */
	.title-text-container {
		text-align: center;
		padding: 20px 0;
		position: relative;
		z-index: 1;
        }
	.bold-text-container h2 {
		font-weight: bold;
		color: #0165FC; /*#0190EE; #1E5EF6;			*/
	}

	.bold-text-container p {
		color: color: #0165FC; /*#0190EE; #1E5EF6;			*/
        }

	    /* Custom styles for the container with square panels */
    .panel {
      background-color: #0165FC;
      color: white;
      text-align: center;
      padding: 20px;
    }

    .square-panel {
      height: 300px;
      width: 600px;
    }
    
    .container {
      padding: 20px;
    }

    .panel-container {
      display: flex;
      gap: 20px; /* Space between panels */
      justify-content: center;
    }
	
	 /* Styling for the image text panels */
		.image-text-panel {
		  display: flex;
		  align-items: center;
		  padding: 20px;
		  margin-bottom: 20px;
		  background-color:  #FFFEFA;
		  border-radius: 10px;
		}
		
		.image-text-panel img {
		  max-width: 100%;
		  height: auto;
		  border-radius: 10px;
		  max-height: 300px; /* Limit image height */
		}

    .panel-text {
      margin-left: 20px;
    }

    .panel-text h4 {
      font-size: 1.5rem;
      font-weight: bold;
	  color: #002198
    }

    .panel-text p {
      font-size: 1rem;
      margin-bottom: 10px;
    }


    /* Thumbnail styles */
    .thumbnail {
      width: 100%;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .thumbnail:hover {
      transform: scale(1.05);
    }

    /* Thumbnail container and spacing */
    .thumb-container {
      display: flex;
      justify-content: center;
      gap: 20px; /* Space between thumbnails */
      padding-top: 5px;
	  padding-bottom: 40px;
      flex-wrap: wrap; /* Ensures wrapping of thumbnails if needed */
    }

    /* Individual thumbnail wrapper */
    .thumbnail-container {
      text-align: center;
      width: 400px; /* Fixed width for the thumbnails */	  
    }

    /* Text styling for below the thumbnails */
    .thumb-text {      
      font-size: 1.5rem;
      margin-top: 10px;
      word-wrap: break-word; /* Ensures text wraps correctly */
      word-break: break-word; /* Breaks long words to avoid overflow */
    }
	
	  .aeroplane-image {
      background-image: url('NSLA_Airlines_Home_AS1137679661.jpg'); /* AdobeStock_1137679661.jpeg Replace with your background image */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100vh; /* Full viewport height */
      position: relative; /* So that the title image can be positioned over it */
    }
	
    .title-image {
      position: absolute;
      top: 20px; /* Adjust position from the top */
      left: 50%;
      transform: translateX(-50%); /* Centers the title image */
      
      /* Set the width and height of the title image */
      width: 80%;  /* Adjust width to a percentage of the screen */
      max-width: 600px;  /* Set a max width for larger screens */
      height: 150px; /* Adjust height as needed */
      
      object-fit: contain; /* Ensure the image keeps its aspect ratio */
      opacity: 1.0; /* Adjust transparency */
      z-index: 10; /* Ensure it sits on top of the background */
    }
	
    .tagline-text {
      position: absolute;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 7rem; /* Large text */
      font-weight: 300; /* Thin font */
      color: white; /* White text color */
      text-align: center;
      text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7); /* Shadow for visibility */
      z-index: 999; /* Ensure text appears above background */
    }

    /* Ensure content below the navbar is not hidden under it */
    .content {
      margin-top: 80px; /* Offset for the fixed navbar */
    }	
	
    /* Transparent contact button */
    .navbar .contact-btn {
      background-color: transparent;
      border: 2px solid #ffffff;
      width: 150px;
      height: 50px;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      font-size: 1.75rem;
      cursor: pointer;
      margin-left: auto
    }

    .navbar .contact-btn:hover {
      background-color: #0071BC;
    }	
	
/* Footer styling */
    footer {
      background-color: #198bfe; /* Dark blue footer */
      color: white;
      padding: 40px 0;
      text-align: center;
    }

    footer .social-links a {
      color: white;
      font-size: 1.5rem;
      margin: 0 15px;
      transition: color 0.3s;
    }

    footer .social-links a:hover {
      color: #ffcc00; /* Gold color on hover */
    }

    footer .footer-nav a {
      color: white;
      margin: 0 10px;
      font-size: 1.2rem;
      text-decoration: none;
      transition: color 0.3s;
    }

    footer .footer-nav a:hover {
      color: #ffcc00; /* Gold color on hover */
    }	
			  
	.vision-box {
		background-color: #f8f9fa; /* Light background */
		padding: 20px; /* Padding around the content */
		border: 1px solid #ddd; /* Light border around the box */
		border-radius: 5px; /* Rounded corners */
	}
				
    .vision-header-text {	
		color: #002198;
		white-space: nowrap;
	}		

    .vision-text {
        font-size: 1.1rem; /* Regular font size */
		color: #002198;
	}
	
	.About-image img {
		border-radius: 15px; /* rounded corners */
	}

    .no-wrap {
            white-space: nowrap; /* Prevent "Our Vision" from breaking into multiple lines */
        }	

  .social-icons i {
    font-size: 30px;
    transition: transform 0.3s ease;
	color: White
  }

  .social-icons i:hover {
    transform: scale(1.2);
    color: #ffcc00; /* Change color on hover */
  }
 a {
      text-decoration: none;
    }  

 .launching-soon {
    position: fixed;
    bottom: 12px;
    right: 18px;
    font-size: 13px;
    font-style: italic;
    color: #003366;          /* airline-blue style */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: rgba(255, 255, 255, 0.7); /* soft background for readability */
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    z-index: 9999;
  }
  
.newsletter-bar {
    width: 100%;
    background: #003366; /* airline blue */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    gap: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin-top: 40px; /* keeps it separate from contact/footer */
  }
  .newsletter-bar span {
    font-size: 15px;
    font-style: italic;
  }
  .newsletter-bar form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }
  .newsletter-bar input[type="email"] {
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    width: 220px;
  }
  .newsletter-bar button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background-color: #ffcc00; /* accent */
    color: #003366;
    font-weight: bold;
    cursor: pointer;
  }
  .newsletter-bar button:hover {
    background-color: #ffdb4d;
  }
  .newsletter-msg {
    font-size: 13px;
    margin-left: 8px;
  }
  .newsletter-msg.error {
    color: #ffdede;
  }