body {
  overflow-x: hidden;
}



.navbar-brand, .nav-link {
    font-size: 1.5rem; /* Adjust the size as needed */
  }

  /* Add space between navbar items */
  .nav-item {
    margin-right: 1rem; /* Adjust the spacing between items as needed */
  }

  /* Make the navbar toggler (hamburger) icon white */
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

  /* Fixes: Remove the button background, shadow, and border */
  .navbar-toggler {
    background-color: transparent; /* Remove button background */
    border: none; /* Remove button border */
    box-shadow: none; /* Remove any shadow around the button */
  }

  /* Optional: Add hover effect if desired */
  .navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Light hover effect */
  }

  

  .email-card {
    margin-top: 13%;
    margin-left: 9%;
    border: 1px solid #ddd; /* Optional: Add a light border */
    border-radius: 8px;     /* Rounded corners */
    background-color: #ffecec; /* Light background */
    padding: 1rem;          /* Add some padding */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
  
.email-card-body {
    text-align: center; /* Center the email text */
}
  
.email-text {
    color: #F65656;        /* Keep the email text in this color */
    font-size: 1.5rem;    /* Adjust font size as needed */
    font-weight: bold;  /* Emphasize the email */
}

/* Make the email link look like normal text */
.email-text a {
    color: inherit; /* Inherits the red color from .email-text */
    text-decoration: none; /* Removes underline */
    font-weight: bold; /* Ensures the email stays bold */
}

.email-text a:hover {
    text-decoration: underline; /* Adds underline on hover for UX */
}









  .full-screen {
    background-color: #F65656;
    height: 90vh; /* Full viewport height */
    color: white;
  }


/* first page*/
  .rounded-box {
    background-color: white;
    color: #ff5a5a;
    padding: 30px 40px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 2.0rem;
    text-align: center;
    width: fit-content;
}



.rounded-box-light {
    background-color: #ffecec;
    color: #ff5a5a;
    padding: 30px 55px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 2.0rem;
    text-align: center;
    width: fit-content;
    margin-top: -10px;
}

.text1 {
    font-size: 1.7rem;
    margin-top: 18px;;
}

.custom-btn {
    background-color: #ffecec; /* Change the background to white */
    color: #ff5a5a; /* Change the text color */
    height: 50px;
    border-radius: 50px;
    font-size: 19px;
    font-weight: bold;
    width:30%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-btn:hover {
  transform: translateY(-3px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    background-color: #ffecec;
    color: #F65656;
}












/*PAGE 2*/


/* Full-screen container settings */


/* Main heading styling */
.welcome-heading {
  font-size: 2.8rem;
  color: #ff5a5a;
  font-weight: bold;
  margin-bottom: 10px;
}


/* Highlighted word styling */
.highlighted-word {
  background-color: #ffecec;
  color: #ff5a5a;
  padding: 0.2em 0.5em;
  border-radius: 10px;
}

/* Subtitle styling */
.subtitle {
  font-size: 1.3rem;
  color: #ff5a5a;
  transform: translateY(30px); /* Move the element 20px upwards */


}

.subtitle1 {
  font-size: 1.7rem;
  color: #ffffff;
  transform: translateY(30px); /* Move the element 20px upwards */
}

.box {
  background-color: #F65656;
  color: white;
  font-weight: bold;
  border-radius: 10px;
}


/* Common Box Styles */
.rounded-box {
  border-radius: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}



.info-box-red {
  background-color: #ff5a5a;
  color: white;
  font-size: 1.2rem;
  height: 90%;
  padding-top: 90%;

}

.info-box-light-pink {
  background-color: #ffecec;
  color: #ff5a5a;
  font-size: 1.3rem;
  height: 90%;


}
/* Icon Styling */
.box-icon {
  height: auto;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.box-icon-small {
  width: 40%;
}

.box-icon-medium {
  width: 50%; /* Default size for other box icons */
}

.box-icon-large {
  width: 40%; 
  margin-top: 1%;
}


.rounded-box:hover .box-icon {
  transform: scale(1.1); /* Slight zoom effect on hover */
}















/*page 3 */
  .full-screen3 {
    background-color: #ffecec;
    height: 100vh; /* Ensures the section takes up the full viewport height */
    padding-top: 90px; /* Adds padding above the content */
    box-sizing: border-box; /* Ensures padding doesn't cause overflow */
  }
  


.img-fluid {
  max-width: 54%; /* Scales the image to 54% of the container width */
  height: auto; /* Maintains aspect ratio */
}











/*page 4 */

.full-screen4 {
  background-color: #ffecec; /* Light pink background */
  height: 80vh; /* Adjust to your desired height */
}

.text-content {
  color: #ff5a5a; /* Text color */
  text-align: left;
}

.main-text {
  font-size: 3.6rem; /* Adjust as needed */
  font-weight: bold;
  margin-bottom: 15px;
  margin-left: 30%;
}

.sub-text {
  font-size: 1.2rem;
}

.img-fluid {
  max-width: 60%; /* Adjust image size */
  height: auto;
}











/* General Bubble Styling */
.bubble {
  border-radius: 20px; /* Rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  color: #ffffff;
  padding: 40px; /* Increase padding to make the bubble larger */
  max-width: 800px; /* Make the bubble wider */
  width: 100%; /* Ensure it adapts responsively */
  text-align: center; /* Center-align text */
}

.bubble h3 {
  font-size: 2rem; /* Larger heading */
  font-weight: bold;
  margin-bottom: 15px;
}

.bubble p {
  font-size: 1.2rem; /* Larger paragraph text */
  line-height: 1.8;
  margin-bottom: 0;
}

/* Red Bubble */
.bubble-red {
  background-color: #ff5a5a;
}

/* Light Pink Bubble */
.bubble-pink {
  background-color: #ffecec;
  color: #ff5a5a;
}




.welcome-heading1 {
  font-size: 2.8rem;
  color: #ffffff;
  font-weight: bold;
}































































@media (max-width: 700px) {
    .rounded-box {
        font-size: 1.1rem; /* Adjust font size for the top box as well */
        width: 90%; /* Adjust width for smaller screens */
        padding: 15px 26px; /* Adjust padding for smaller screens */
    }
    
    .rounded-box-light {
        font-size: 1.1rem; /* Slightly smaller font size */
        width: 100%; /* Slightly reduce the width for smaller screens */
        padding: 15px 30px; /* Adjust padding for smaller screens */
    }
    .text1{
        font-size: 1.1rem;
        margin-top: -15%;

    }

    
    .custom-btn {
      font-size: 19px; /* Maintain original font size */
      width: 30%; /* Adjusted width for smaller screens */
      transform: translateY(-3px);

  }
  
  .custom-btn:hover {
    transform: translateY(-3px);
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
      background-color: #ffecec;
      color: #F65656;
  }



  .welcome-heading {
  font-size: 2.8rem;
  color: #ff5a5a;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Highlighted word styling */
/* Highlighted word styling */
.highlighted-word {
  background-color: #ffecec;
  color: #ff5a5a;
  padding: 0.2em 0.5em;
  border-radius: 10px;
  position: relative; /* Enable positioning adjustments */
  top: 15px; /* Move the element down by 5px; adjust as needed */
}













.w-80 {
  width: 80%;
}








/*BIG SIZE SCREEN PHONE L*/
    @media (min-width: 400px) and (max-width: 768px) {
      .mb-4 {
        margin-bottom: 1.5rem !important;
        margin-left: 45%;
        margin-top:30%;
    }
 .rounded-box {
        font-size: 1rem; /* Adjust font size for the top box as well */
        
        padding: 15px 26px; /* Adjust padding for smaller screens */
    }
    
    .rounded-box-light {
        font-size: 1rem; /* Slightly smaller font size */
        width: 70%; /* Slightly reduce the width for smaller screens */
        padding: 15px 30px; /* Adjust padding for smaller screens */
    }
    .text1{
        font-size: 1.1rem;
        margin-top: -15%;
        transform: translateY(-70px); /* Move the element 20px upwards */


    }
    .custom-btn {
      font-size: 15px; /* Font size for mid-range screen sizes */
      width: 40%; /* Width adjusted for mid-sized screens */
      transform: translateY(-3px);

  }
  
  .custom-btn:hover {
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */
  }
  
}


    /*mobile S AND M SIZE*/
    
        /* Media query to target screens between 320px and 375px */
    @media (min-width: 320px) and (max-width: 390px) {
  .test{
    margin-top: 40%;
  }
  .mb-4 {
    margin-bottom: 1.5rem !important;
    margin-left: 35%;
}
      .rounded-box {
        font-size: 1rem; /* Adjust font size for the top box as well */
        width: 66%; /* Adjust width for smaller screens */
        padding: 15px 26px; /* Adjust padding for smaller screens */
    }
    
    .rounded-box-light {
        font-size: 1rem; /* Slightly smaller font size */
        width: 80%; /* Slightly reduce the width for smaller screens */
        padding: 15px 30px; /* Adjust padding for smaller screens */
    }

    .box{
      width:130%;
    }

    .info-box-red {
      background-color: #ff5a5a;
      color: white;
      font-size: 1.2rem;
      height: 90%;
      padding-top: 90%;

    
    }
    
    /* Light Pink Box Style */
    .info-box-light-pink {
      background-color: #ffecec;
      color: #ff5a5a;
      font-size: 1.3rem;
      height: 90%;
    
    
    }




    .text1{
        font-size: 1.1rem;
        margin-top: -15%;
        transform: translateY(-70px); /* Move the element 20px upwards */


    }

      .custom-btn {
        font-size: 15px; /* Font size for smaller screens */
        width: 57%; /* Adjusted width for smallest screens */

        
    }
  
  
  .custom-btn:hover {
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Increase shadow on hover */

  }
  
}





}









footer {
  background-color: #ffecec; /* Light pink background */
  padding: 20px 0;
}

.footer-links a {
  color: #ff5722; /* Dark text color for links */
  text-decoration: none; /* Remove underline */
  font-size: 20px; /* Increased font size for all links */
  margin-bottom: 10px; /* Space between links */
}

.footer-links a:hover {
  color: #ff5722; /* Change link color on hover */
}

.mayreni-text {
  font-weight: bold; /* Make "Mayreni" bold */
  font-size: 24px; /* Larger font size for "Mayreni" */
}

/* Follow Us Section */
.follow-us p {
  color: #ff5722; /* Set "Follow us" text to #ff5722 */
  font-size: 20px; /* Match the font size of other links */
  margin-bottom: 10px; /* Space between text and icons */
}

.social-icons {
  display: flex;
  justify-content: center; /* Center icons horizontally */
  gap: 15px; /* Space between icons */
}

.social-icon {
  color: #ff5722; /* Set icon color to #ff5722 */
  font-size: 24px; /* Icon size */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease; /* Smooth color transition */
}

.social-icon:hover {
  color: #ff5722; /* Change icon color to dark on hover */
}

/* Copyright Section */
.copyright {
  text-align: center;
  color: #ff5722; /* Set copyright text to #ff5722 */
  font-size: 14px; /* Smaller font size for copyright */
  margin-top: 20px; /* Space between content and copyright */
}