:root {
  
  --primary-color: #0d6efd; /* Bootstrap primary color */
  --dark-color: #000000;    /* Bootstrap dark color */
  --light-color: #f8f9fa;   /* Bootstrap light color */
  --text-light: #ffffff;     /* Light text color */
  --text-dark: #212529;      /* Dark text color */
  --font-size-base: 1rem;    /* Base font size */
  --line-height: 1.5;         /* Line height */
  --letter-spacing: 0.1rem;


}

/* Body styles */
html,body {
  color: var(--text-light);
  font-family: "Frank Ruhl Libre", serif;
  background-color: black;
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  margin: 0;
  padding: 0;
  max-width: 100%;/* For absolute positioning of nav buttons */
  height: 100%;
  scroll-behavior: smooth;
  touch-action: manipulation; /* Reduces the delay for touch events */
  -webkit-tap-highlight-color: transparent; /* Removes tap highlight */
  
}


.wrapper{
  max-width: 100%;
}

.full-section {
  height: 100vh; /* Full viewport height */
  overflow: hidden;
  flex-direction: column; /* Stack content vertically */
  max-width: 100%;
 
}

.navbar-brand{
  width:fit-content;
  display: flex;
  height: 100%;
  padding-left: 50px;
  
}

/* Ensure the navbar-toggler button has no border or shadow */
.navbar-toggler {
  border: none !important; /* Removes the default border */
  outline: none !important; /* Removes the default outline */
  box-shadow: none !important; /* Removes any focus shadow */
}

/* Ensure the navbar-toggler-icon is clear of borders and background */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  background-color: transparent !important;
  border: none !important; /* Ensures no borders on the icon */
  background-size: contain;
}

/* Remove any focus or hover effects */
.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important; /* Ensures no outline appears on focus */
  box-shadow: none !important; /* Ensures no shadow appears on focus */
  border: none !important; /* Ensures no border appears on click */
}


.nav-buttons {
    position: fixed;
    top: 50%;  /* Vertically centered */
    right: 20px;  /* Aligned to the right side */
    display: flex;
    flex-direction: column;  /* Arrange buttons vertically */
    gap: 40px;  /* Space between buttons */
    transform: translateY(-50%);
    z-index: 1000;
}
.nav-button {
    width: 10px;
    height: 2px; /*navbar height */
    background-color: #cfd4dd; /* Primary color */
    border: none;
    cursor: pointer;
    touch-action: manipulation; /* Reduces touch delay */
    transition: transform 0.1s ease-in-out, background-color 0.1s ease-in-out; 
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent; /* Remove touch highlight */
    padding: 1px;
    margin-bottom: 10px; /* Adequate spacing between buttons */
    z-index: 1000; /* Ensure buttons are above other elements */
}

.nav-button:hover {
    background-color: rgba(90, 93, 98, 0.6); /* Light hover effect */
}

.nav-button.active {
  transform: scale(1.5); /* Slightly enlarge the active button */
  background-color: #4c4f55; /* Change color for active section */
}


#section1{
  height: 100vh; /* Full viewport height */
  overflow: hidden;
  flex-direction: column; /* Stack content vertically */
  max-width: 100%;
  font-family: Frank Ruhl Libre, serif;
}
hr.border{
  width: 4rem;
  margin-top: -0.2rem;
}
.custom-img {
  object-fit:contain;max-width:100%; height: auto;
}
h1.display-4 {
  font-size: 4rem; /* Example default size */
  margin-bottom: 0.5rem;
  padding: 0;
  color: #fff; /* Light text color */
}
.vertical-line{
height: 70px;
}



#section2 {
  height: 100vh; /* Full viewport height */
  overflow: hidden;
  flex-direction: column; /* Stack content vertically */
  max-width: 100%;
  font-family: Frank Ruhl Libre, serif;
  background-image: url('img/1.png');
  background-size: cover;
  background-position: center;  
  display: flex; 
  padding: 0; /* Reset any default padding */
}
.inner-cover{
  background-color: rgba(0, 0, 0, 0.8); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  max-width: 90%; 
  min-height: 80%;
  margin: auto;
}
/* Default styling for larger screens */
.history h3 {
  font-size: 2.5rem; /* Default large font size */
}
.col-lg-2, .col-md-2 {
  padding: 0; /* No padding on larger screens */
}


  /* Make the cards smaller */
  .small-card {
    width: 100%; /* Adjust the width for smaller cards */
  }
  
  /* Make the card images smaller */
  .smaller-image {
    height: 100px; /* Adjust the height for smaller images */
    object-fit: cover; /* Ensures the image maintains its aspect ratio */
  }


/* Inner Cover */
.inner-cover {
  padding: 20px; /* Padding for the inner cover */
}

/* Default styling for larger screens */
.vision .title, .vision .small-heading {
  font-size: 1rem; /* Default font size for larger screens */
  text-align: center;
}

/* Default styling for larger screens */
.carousel-item {
  padding: 20px; /* Default padding for carousel items */
  cursor: pointer;
}

.small-card {
  transition: transform 0.3s; /* Optional: Add a transition effect */
  
}


#section3 {
  height: 100vh; /* Full viewport height */
  overflow: hidden;
  flex-direction: column; /* Stack content vertically */
  max-width: 100%;
  font-family: Frank Ruhl Libre, serif;
  display: flex; 
  padding: 0; /* Reset any default padding */
}


p.hurts{
  max-width: 500px;
}

.hurts-img-fluid{
object-fit: cover;
max-width: 100%;
height: 80vh;
}

#section4 {
  height: 100vh; /* Full viewport height */
  overflow: hidden;
  flex-direction: column; /* Stack content vertically */
  max-width: 100%;
  font-family: Frank Ruhl Libre, serif;
  display: flex; 
  padding: 0; /* Reset any default padding */
}

#section5 {
  height: 100vh; /* Full viewport height */
  overflow: hidden;
  flex-direction: column; /* Stack content vertically */
  max-width: 100%;
  font-family: Frank Ruhl Libre, serif;
  display: flex; 
  padding: 0; /* Reset any default padding */
}


.contact-img-fluid{
  max-width: 100%; 
  height: 55vh; 
  object-fit: cover;
}

/* Dark-themed form */
.contact-form {
  background-color: rgba(30, 30, 30, 0.7);
  padding: 10px 10px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Soft shadow for a sleek look */
  max-width: 70%;
  margin: auto;
  color: #fff;
}

.contact-form .form-title {
  color: #fff; /* White text for the form title */
  margin-bottom: 20px;
}

.contact-form .form-control {
  background-color: rgba(30, 30, 30, 0.9); /* Darker background with 90% opacity */
  color: #fff; /* White text for input fields */
  border: 0px solid #555; /* Dark border for input fields */
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 5px;
  transition: all 0.3s ease; /* Smooth transition for focus and hover effects */
  
}

.contact-form .form-control::placeholder {
  color: #bbb; /* Lighter placeholder text */
}

.contact-form .form-control:focus {
  background-color: #423f3f; /* Darker background on focus */
  border-color: #4e5053; /* Blue border on focus */
  outline: none; /* Remove the default outline */
}

.contact-form .btn-primary {
  background-color:#423f3f; /* Blue submit button */
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%; /* Make the button full width */
}

.contact-form .btn-primary:hover {
  background-color: #707780; /* Darker blue on hover */
}

.contact-form .btn-primary:focus {
  outline: none;
  box-shadow: 0 0 5px #3f3f40; /* Blue shadow on button focus */
}

  .input-group-text {
    background-color: transparent !important; /* Fully transparent background */
    border: none !important; /* Remove any border */
    padding: 0 8px; /* Adjust padding */
  }

  input::placeholder {
    font-size: 12px; /* Adjust the size as needed */
}
textarea::placeholder {
  font-size: 12px; /* Adjust the size as needed */
}
  
.row.footer{
  height:50vh;
 
}



.footer ul {

  padding: 0;
  margin: 0;
}

.footer li {
  list-style: none;

  text-align: left;
}

.footer li a {
  color: #7c7676;
  text-decoration: none;
}

.footer li a:hover {
  text-decoration: underline;
}

/* Copyright Styling */
.copyright {
 
  font-size: 0.75rem; /* Small font for the copyright text */
  color: #3a3535;
}

hr {
  border: 1px solid #ccc;
 
}

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







/* mobile version */
@media only screen and (max-width:600px){
  /* basic */
  .wrapper{
    max-width: 100%;
  }
  
  
  .nav-buttons {
      position: fixed;
      top: 50%;  /* Vertically centered */
      right: 15px;  /* Aligned to the right side */
      display: flex;
      flex-direction: column;  /* Arrange buttons vertically */
      gap: 80px;  /* Space between buttons */
      transform: translateY(-50%);
      z-index: 1000;
  }
 

  .nav-button {
      transform: scale(0.8);  /* Scale down the button */
      width: 20px;
      height: 1px; /*navbar height */
      touch-action: manipulation; /* Reduces touch delay */
      transition: transform 0.1s ease, background-color 0.3s ease; /* Smooth transition */
      pointer-events: auto;
      -webkit-tap-highlight-color: transparent; /* Remove touch highlight */
      padding: 2px;
     
  }
  .nav-button.active {
      transform: scale(1.0);  /* Scale down the button */
  }
    /* Ensure the navbar-toggler-icon is clear of borders and background */
  .navbar-toggler-icon {
  margin-right: -15px;
  }
  .navbar-brand{
   padding-left: 15px;
  }

  /* section1 */
  .h1.display-4{
    display: none;
  }
  .vertical-line{
    display: none;
  }
  .vertical-link{
    display: none;
  }
  .hello .display-4 {
    font-size: 1.5rem; /* Smaller size for small screens */
    text-align: center;
    padding-bottom: 1rem;
    padding-top: 4rem;
  }
  hr.border{
  display: none;
}
p.text-light {
  font-size: 0.775rem; /* Smaller font size for small screens */
  text-align: justify;  /* Center the text on small screens */
  padding-left: 15px;
  margin-right: 15px;
}
.custom-img {
  object-fit: contain;
  max-width:100%;
  height: auto;
  padding-bottom: 15vh;
}

/* section2 */
#section2 {
  height: auto; /* Allow height to adjust for smaller screens */
  padding: 20px; /* Add padding on small screens */
}
.inner-cover{
  max-width: 90%;
  height:80%;
  margin: auto;
}
.history h3 {
  font-size: 2rem; /* Smaller size for small screens */
    text-align: center;
    padding-top: 4rem;
}
.col-sm-12, .col-12 {
  padding: -10px; /* Add padding for better spacing on small screens */
}

.col-lg-2 img {
  max-width: 50%; /* Adjust image size for small screens */
  object-fit: contain;
  height: 25vh;   /* Maintain aspect ratio */
}
.vision{
  text-align: center;
}
.vision .title {
  font-size: 0.7rem; /* Smaller font size for titles on small screens */
  text-align: center; /* Center align text for better readability */
}
.vision .small-heading {
  font-size: 0.6rem; /* Smaller font size for small headings */
  text-align: center; /* Center align small headings */
}

.vision {
  padding: 0; /* Add padding for better spacing */
}
/* Default styling for larger screens */
.carousel-item {
  padding-right:4rem; /* Default padding for carousel items */
  padding-left: 4rem;
 
}

.small-card {
  transition: transform 0.3s; /* Optional: Add a transition effect */
  
  
}
.carousel .row {
  flex-wrap: nowrap;
  
  
}
.carousel .col {
 
  flex: 0 0 100%; /* Show 1 item per row on very small screens */
  max-width: 100%;
 
}

.carousel .col img {
  max-width: 100px;
  height: auto;
 
}

 /* section3 */
 p.hurts {
  font-size: 0.875rem; /* Adjust the font size for small screens */
  padding-top: 90px; /* Add padding around the text */
  text-align: center; /* Keep the text centered */
  line-height: 1.5; /* Increase line height for better readability */
  max-width: 70%; /* Make sure it takes up the full width on small screens */
}
.hurts-img-fluid{
  margin-top: 5rem;
  max-width: 100%;
  height: 60vh;
  }

 /* First Column: "CON" */
 .col-auto.text-start span {
 
  margin-left: 0; /* Remove the margin on small screens */
}

/* Divider: Vertical Line */
.col-auto.d-flex.align-items-center.justify-content-center div {
  height: 100px; /* Shorten the height of the divider */

}

/* Second Column: "Trast" */
.col-auto.text-end span {

  font-weight: 300; /* Maintain the weight */

}

/* Optional: Center the content for small screens */
 /*.col-auto {
   /* text-align: center; Center align the text 
  margin: 0 auto;  Center the elements 
} */

/* Optional: Adjust the spacing between the columns 
.d-flex.align-items-center.ms-5 {
  margin-left: 0; /* Remove the left margin on smaller screens 
} */

/* section5 */
.contact-img-fluid{
  max-width: 100%; 
  height: 50vh; 
  object-fit: cover;
  align-items: center;
  margin-top: -3rem;
}
/* Dark-themed form */
.contact-form {
  max-width: 300px;
  margin: auto;
  margin-top: -5rem;
  margin-right: 3rem;
}

.footer li {
  list-style: none;

  text-align: left;
}

.footer li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 8px;
}

.footer li a:hover {
  text-decoration: underline;
}

/* Copyright Styling */
.small {
 
  font-size: 0.05rem; /* Small font for the copyright text */
  color: #5d5353;
}
.footer .col-lg-2, .footer .col-md-4, .footer .col-sm-6 {
  margin-top: -10px;
  width: 20%; /* Divide into 2 columns */
  padding-left: 20px; /* Add some padding */
  
}

.footer .col-lg-2:nth-child(odd), .footer .col-md-4:nth-child(odd), .footer .col-sm-6:nth-child(odd) {
  clear: both; /* Ensure odd columns start a new row */
}

/* For the copyright section */
.footer .col-12 {
  padding: 5px;
}

.footer {
  margin-bottom: 0; /* Removes any bottom margin */
  padding-bottom: 0; /* Removes any bottom padding */
}

.footer ul {
  margin-bottom: 0; /* Ensures no margin at the bottom of the list */
  padding-bottom: 0; /* Ensures no padding at the bottom of the list */
}

.footer li {
  margin-bottom: 0; /* Removes any space between list items */
}

.footer li:last-child {
  margin-bottom: 0; /* Ensures the last list item doesn't have extra margin */
}

}


/* Tablet and iPad sizes (601px to 1024px) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
/* General wrapper and section styles */
.wrapper {
    max-width: 100%;
    flex: 1;
}



.nav-buttons {
  position: fixed;
  top: 50%;  /* Vertically centered */
  right: 23px;  /* Aligned to the right side */
  display: flex;
  flex-direction: column;  /* Arrange buttons vertically */
  gap: 110px;  /* Space between buttons */
  transform: translateY(-50%);
  z-index: 1000;
}


.nav-button {
  transform: scale(1);  /* Scale down the button */
  width: 20px;
  height: 4px; /*navbar height */
  padding: 6px;
  touch-action: manipulation; /* Reduces touch delay */
  transition: transform 0.1s ease, background-color 0.3s ease; /* Smooth transition */
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent; /* Remove touch highlight */
  padding: 3px;   
  touch-action: manipulation;
}
.nav-button.active {
  transform: scale(1.5);  /* Scale down the button */
}
.navbar-brand{
   padding-left: 25px;
  }

 /* section1 */
 h1.display-4 {
  font-size: 5rem; /* Adjust font size for small screens */
  margin-bottom: 0.25rem;
}
.vertical-line{
height: 100px;
}

.hello .display-4 {
  font-size: 5.5rem; /* Smaller size for small screens */
  text-align:left;
 
  padding-top: -4rem;
}
hr.border{
display: none;
}
p.text-light {
font-size: 1.3rem; /* Smaller font size for small screens */
text-align: left;  /* Center the text on small screens */
padding-left: 5px;
margin-right:5px;
}
.custom-img {
object-fit: cover;
max-width:100%;
height: auto;

}




#section2 {
padding: 0; /* Reset any default padding */
}

.inner-cover{
background-color: rgba(0, 0, 0, 0.8); 
display: flex; 
align-items: center; 
justify-content: center; 
max-width: 90%; 
min-height: 80%;
padding-top: 160px;

}
/* Default styling for larger screens */
.history h3 {
font-size: 2.5rem; /* Default large font size */
}
.col-lg-2, .col-md-2 {
padding: 0; /* No padding on larger screens */
}


/* Make the cards smaller */
.small-card {
  width: 100%; /* Adjust the width for smaller cards */
}

/* Make the card images smaller */
.smaller-image {
  height: 500px; /* Adjust the height for smaller images */
  object-fit: cover; /* Ensures the image maintains its aspect ratio */
}


/* Inner Cover */
.inner-cover {
padding: 20px; /* Padding for the inner cover */
}

/* Default styling for larger screens */
.vision .title, .vision .small-heading {
font-size: 1rem; /* Default font size for larger screens */
text-align: center;
}

/* Default styling for larger screens */
.carousel-item {
padding: 20px; /* Default padding for carousel items */

}

.small-card {
transition: transform 0.3s; /* Optional: Add a transition effect */
}





/* Dark-themed form */
.contact-form {
max-width: 700px;
margin: auto;
margin-top: 25rem;
margin-right: 2rem;
}


.row.footer{
height: auto; /* Allow footer to size automatically based on content */
margin-top: auto; /* Push footer to the bottom of the section */
}



.footer li {
list-style: none;

text-align: left;
}

.footer li a {
color: #ffffff;
text-decoration: none;
font-size: 8px;
}

.footer li a:hover {
text-decoration: underline;
}

/* Copyright Styling */
.small {

font-size: 0.05rem; /* Small font for the copyright text */
color: #5d5353;
}
.footer .col-lg-2, .footer .col-md-4, .footer .col-sm-6 {
margin-top: 10px;
width: 20%; /* Divide into 2 columns */
padding-left: 35px; /* Add some padding */

}

.footer .col-lg-2:nth-child(odd), .footer .col-md-4:nth-child(odd), .footer .col-sm-6:nth-child(odd) {
clear: both; /* Ensure odd columns start a new row */

}

/* For the copyright section */
.footer .col-12 {
padding: 5px;
}

.footer {
margin-bottom: 0; /* Removes any bottom margin */
padding-bottom: 0; /* Removes any bottom padding */

}

.footer ul {
margin-bottom: 0; /* Ensures no margin at the bottom of the list */
padding-bottom: 0; /* Ensures no padding at the bottom of the list */
}

.footer li {
margin-bottom: 0; /* Removes any space between list items */
}

.footer li:last-child {
margin-bottom: 0; /* Ensures the last list item doesn't have extra margin */
}


}
#landscapeImageContainer {
transition: opacity 0.6s ease-in-out;
}

#landscapeImageContainer.d-none {
opacity: 0;
}

#landscapeImageContainer:not(.d-none) {
opacity: 1;
}


#typingText {
text-align: justify;
font-size: 0.9rem;
line-height: 1.4;
}

#landscapeImageContainer {
transition: opacity 0.6s ease-in-out;
}

#landscapeImageContainer.d-none {
opacity: 0;
}

#landscapeImageContainer:not(.d-none) {
opacity: 1;
}

.small-card {
cursor: pointer;
transition: transform 0.6s ease;
}

.small-card:hover {
transform: scale(1.05);
}



/* Expand the clickable area of nav-buttons without changing their visible size */
.nav-button {
  position: relative; /* Enable pseudo-element positioning */
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.1s ease; /* Smooth transition */
  z-index: 10; /* Ensure buttons are clickable over other elements */
}

.nav-button::before {
  content: ''; /* Invisible area */
  position: absolute;
  top: -10px; /* Extend clickable area upward */
  bottom: -10px; /* Extend clickable area downward */
  left: -10px; /* Extend clickable area leftward */
  right: -10px; /* Extend clickable area rightward */
  z-index: -1; /* Place behind the visible button */
}