/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Poppins:wght@400;600&display=swap');

/* Reset and setup */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Updated body styles */
body { 
  font-family: 'Poppins', sans-serif;
  min-height: 100vh; /* Ensure it covers the full viewport height */
  background-image: url('images/6.jpg'); /* Set the background image */
  background-size: cover; /* Cover the entire background */
  background-position: center top; /* Center the background image */
  color: #000000; /* Dark black text */
  display: flex; /* Use flexbox for centering */
  flex-direction: column; /* Stack elements vertically */
  justify-content: center; /* Center content vertically */
  padding: 35px;
  line-height: 1.6;
  background-color: #000; /* Optional: Set a fallback background color */
}

/* Specific styles for Page 2 */
.page2-background {
    background-image: url('images/2.jpg'); /* Set the background image */
    background-size: cover; /* Cover the entire viewport */
    background-position: center; /* Center the image */
    min-height: 100vh; /* Full height of the viewport */
    margin: 0; /* Remove default margin */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 20px;
    line-height: 1.6;
}

/* Header with gradient background and modern texture */
header {
  text-align: center;
  padding: 30px 40px; /* Increased padding for a spacious feel */
  background: linear-gradient(135deg, rgba(0, 51, 102, 0.7), rgba(0, 150, 136, 0.5)); /* More transparent gradient */
  color: #ffffff; /* Changed text color to white for better contrast */
  border-radius: 20px; /* Adjusted for smaller screens */
  margin-bottom: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* Enhanced shadow for depth */
  position: relative; /* Position relative for pseudo-elements */
  overflow: hidden; /* Hide overflow for pseudo-elements */
}

/* Add a subtle texture or pattern */
header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://www.transparenttextures.com/patterns/white-paper.png'); /* Example texture */
  opacity: 0.1; /* Subtle texture */
  z-index: 0; /* Behind the text */
}

/* Logo styling */
#logo {
  width: 150px; /* Set a width for the logo */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 20px; /* Space below the logo */
}

/* Header Title Styling */
header h1 {
  font-size: 2.4rem; /* Increased font size for prominence */
  font-weight: 700;
  font-family: 'Montserrat', sans-serif; /* Modern font choice */
  margin: 5px 0; /* Increased margin for better spacing */
  color: #ffffff; /* White text for better contrast */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Subtle text shadow for depth */
  text-align: center; /* Centered text for balance */
  line-height: 1; /* Improved line height for readability */
  padding: 10px; /* Added padding for spacing */
  transition: color 0.3s ease; /* Smooth transition for hover effect */
}

h1:hover {
  color: #ffcc00; /* Change color on hover for interactivity */
}

/* Header Paragraph Styling */
header p {
  font-size: 1.0rem; /* Increased font size for better readability */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7); /* Slightly transparent white for a softer look */
  margin-top: 0; /* Remove top margin */
}

/* Hover effect for the header */
header:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
}

/* Card style for sections with soft shadow and hover effect */
section {
  color: white;
  background: rgba(0, 0, 0, 0.1); /* Black background with 90% opacity */
  border-radius: 30px; /* Rounded corners for a modern look */
  padding: 30px; /* Padding inside the section */
  margin: 20px 0; /* Margin around the section */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

section:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
}

/* Section Headers */
h2 {
  font-size: 1.4rem;
  color: white;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 15px;
  position: relative;
  font-weight: bold; /* Bold font for section headers */
  text-shadow: 1px 1px 0 #000000; /* Red border effect */
}

h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: #009688; /* Soft teal underline */
  margin-top: 8px;
  border-radius: 2px;
}

/* Styling for the promise section */
.promise {
    background: rgba(0, 0, 0, 0.6); /* Optional: Background color for the section */
    border-radius: 30px; /* Rounded corners for a modern look */
    padding: 30px; /* Padding inside the section */
    margin: 20px 0; /* Margin around the section */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
    color: white; /* Set text color to white for all text in this section */
}

/* Specific styles for headings within the promise section */
.promise h2 {
    color: #FF4500; /* OrangeRed */



}

/* Ensure all unordered list items are white */
.promise ul {
    list-style-type: none; /* Optional: Remove bullet points */
    padding: 0; /* Remove default padding */
}

.promise li {
    color: white; /* Set list item text color to white */
    margin-bottom: 10px; /* Space between list items */
}

/* Strong text within the promise section */
.promise strong {
    color: white; /* Ensure strong text is white */
}

/* Icon styling */
.icon {
  width: 30px; /* Set icon width */
  height: 30px; /* Maintain aspect ratio */
  margin-right: 10px; /* Space between icon and text */
}

/* List styles */
ul, ol {
  margin-left: 20px;
  color: #555;
}

li {
  margin-bottom: 12px;
  font-size: 0.9rem;
}

/* Stylish WhatsApp button with gradient */
#whatsapp-button {
  display: flex; /* Use flexbox to align logo and text */
  align-items: center; /* Center items vertically */
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  padding: 12px 25px;
  font-size: 1.rem;
  font-weight: 500;
  text-align: center;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

#whatsapp-button:hover {
  background: linear-gradient(135deg, #009688, #00796b);
  transform: scale(1.05);
}

/* WhatsApp logo styling */
.whatsapp-logo {
  width: 24px; /* Set logo size */
  height: 24px; /* Maintain aspect ratio */
  margin-right: 10px; /* Space between logo and text */
}

/* Stylish Email button with gradient */
.email-button {
  display: flex; /* Use flexbox to align logo and text */
  align-items: center; /* Center items vertically */
  background: linear-gradient(135deg, #DB4437, #C1353D); /* Gradient for Gmail button */
  color: #fff; /* Text color */
  padding: 12px 25px; /* Padding around the button */
  font-size: 1.1rem; /* Font size */
  font-weight: 500; /* Font weight */
  text-align: center; /* Center text */
  border-radius: 30px; /* Rounded corners */
  text-decoration: none; /* Remove underline from link */
  transition: background 0.3s ease, transform 0.3s ease; /* Smooth transition for background and transform */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  cursor: pointer; /* Change cursor to pointer on hover */
  margin-top: 10px; /* Space between WhatsApp and email buttons */
}

.email-button:hover {
  background: linear-gradient(135deg, #C1353D, #DB4437); /* Reverse gradient on hover */
  transform: scale(1.05); /* Slightly increase size */
}

/* Email logo styling */
.email-logo {
  width: 24px; /* Set logo size */
  height: 24px; /* Maintain aspect ratio */
  margin-right: 10px; /* Space between logo and text */
}

/* Stylish Instagram button with gradient */
.Instagram-button {
  display: flex; /* Use flexbox to align logo and text */
  align-items: center; /* Center items vertically */
  background: linear-gradient(45deg, #F58529, #F77737, #FBB034, #FFDC80); /* Gradient for Instagram button */
  color: #fff; /* Text color */
  padding: 12px 25px; /* Padding around the button */
  font-size: 1.1rem; /* Font size */
  font-weight: 500; /* Font weight */
  text-align: center; /* Center text */
  border-radius: 30px; /* Rounded corners */
  text-decoration: none; /* Remove underline from link */
  transition: background 0.3s ease, transform 0.3s ease; /* Smooth transition for background and transform */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  cursor: pointer; /* Change cursor to pointer on hover */
  margin-top: 10px; /* Space between buttons */
}

.Instagram-button:hover {
  background: linear-gradient(135deg, #F58529, #DD2A7B, #8134B8); /* Instagram gradient on hover */
  transform: scale(1.05); /* Slightly increase size */
}

/* Insta logo styling */
.Insta-logo {
  width: 24px; /* Set logo size */
  height: 24px; /* Maintain aspect ratio */
  margin-right: 10px; /* Space between logo and text */
}

/* Container for forms */
.container {
    width: 100%; /* Allow the container to take the full width of its parent */
    max-width: 400px; /* Maximum width for the form container */
    margin: 20px auto; /* Increased top margin to move it further down */
    padding: 20px; /* Padding inside the container */
    background-color: rgba(0, 86, 179, 0.3); /* Darker blue with 30% transparency */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Form styles */
form {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack inputs vertically */
}

.payment-button {
    display: inline-block; /* Makes the link behave like a block element */
    background-color: #007BFF; /* A brighter button background color */
    color: white; /* Button text color */
    padding: 10px 20px; /* Reduced padding for a smaller button */
    border: 2px solid #007BFF; /* Border to create a box effect */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* No underline */
    font-weight: bold; /* Bold text */
    font-size: 14px; /* Smaller font size */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
    margin-left: 25px; /* Adjust this value to move the button to the right */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.payment-button:hover {
    background-color: #0056b3; /* Darker shade on hover */
    border-color: #0056b3; /* Match border color on hover */
}

/* Input styles */
input {
    width: 100%; /* Full width */
    padding: 12px; /* Padding inside inputs */
    margin: 5px 0; /* Margin between inputs */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 8px; /* Rounded corners */
    font-size: 1rem; /* Font size */
}

/* Button styles */
button {
    padding: 12px; /* Padding inside button */
    background-color: #003366; /* Deep blue background */
    color: #fff; /* White text */
    border: none; /* No border */
    border-radius: 8px; /* Rounded corners */
    font-size: 1.1rem; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background 0.3s ease; /* Transition for hover effect */
}

button:hover {
    background-color: #005580; /* Darker blue on hover */
}

/* Style for auth links in the header */
.auth-links {
    position: absolute; /* Position it absolutely within the header */
    top: 20px; /* Distance from the top */
    right: 20px; /* Distance from the right */
    display: flex; /* Use flexbox for layout */
    gap: 15px; /* Space between links */
    flex-wrap: wrap; /* Allow links to wrap to the next line if needed */
}

/* Link Styles */
.auth-links a {
    display: inline-block; /* Make the link behave like a block element */
    padding: 10px 15px; /* Padding inside the button */
    background-color: #007F7F; /* Deep blue background */
    color: white; /* White text */
    text-decoration: none; /* No underline */
    border-radius: 10px; /* Rounded corners */
    font-weight: 600; /* Bold font */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    min-width: 100px; /* Minimum width for buttons */
    text-align: center; /* Center text */
}

/* Hover Effect */
.auth-links a:hover {
    background-color: cyan; /* Darker blue on hover */
    text-decoration: none; /* Keep no underline on hover */
}

/* Link styles */
p {
    text-align: center; /* Center text */
}

a {
    color: #009688; /* Soft teal color for links */
    text-decoration: none; /* No underline */
}

a:hover {
    text-decoration: underline; /* Underline on hover */
}



/* About Us and Privacy Policy section styles */
.about, .privacy-policy {
    background-color: rgba(0, 150, 160, 0.2); /* Lighter teal with 50% opacity */
    color: white; /* White text color */
    border-radius: 12px; /* Rounded corners */
    padding: 20px; /* Padding inside the sections */
    margin-bottom: 40px; /* Margin from below */
}

.services_text {
    color: white;
    margin: 0;
    font-size: 2em; /* Larger font size for emphasis */
}

.white-text {
    text-align: center; /* Corrected spelling */
    color: white;
    font-size: 24px; /* Adjust the size as needed */
}

.card_body {
    padding: 35px; /* Increased padding for comfort */
}

.address-box {
    width: 100%; /* Make it full width */
    height: 100px; /* Set a specific height */
    resize: none; /* Prevent resizing */
}

.custom-checkbox {
    display: flex;
    align-items: center; /* Center the checkbox vertically */
}

.custom-control-input {
    width: 20px; /* Adjust the size of the checkbox */
    height: 20px; /* Adjust the size of the checkbox */
    margin-right: 10px; /* Space between checkbox and label */
}

.custom-control-label {
    font-size: 16px; /* Font size for the label */
    color: #333; /* Text color */
}

.remember-password {
    margin-top: 5px; /* Space between checkbox and text */
    font-size: 14px; /* Font size for the text */
    color: #fff; /* Change text color to white */
}

.form-label-group {
    position: relative;
    margin-bottom: 0rem; /* More space between form elements */
    color: white; /* Set font color to white */
}

.toggle-password {
    position: absolute; /* Position the icon absolutely */
    right: 10px; /* Position it to the right */
 top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
    cursor: pointer; /* Change cursor to pointer */
    color: #003366; /* Color of the icon */
}

/* Additional styles for the file input */

footer {
    background-color: #3333; /* Change this to your desired footer background color */
    color: white; /* Change this to your desired text color */
    padding: 20px;
    text-align: center;
}

.footer-links {
    display: inline-block;
}

.footer-links a {
    color: white; /* Link color */
    text-decoration: none; /* Remove underline */
    padding: 0 10px; /* Add some padding around links */
}

.divider {
    color: white; /* Divider color */
    padding: 0 10px; /* Add some padding around the divider */
}

/* Services Section */
.services_section {
    padding: 20px; /* Adjust as needed */
}

.cookies_text {
    margin: 0;
}

	.container1 {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #007BFF; /* Blue background */
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000; /* Ensure it's on top */
}

.container1 a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.container1:hover {
    background-color: #0056b3; /* Darker blue on hover */
}


/* Responsive adjustments */
@media (max-width: 600px) {
    .auth-links {
        flex-direction: column; /* Stack links vertically on small screens */
        align-items: center; /* Center links */
        margin: 10px 0; /* Adjust margin for smaller screens */
    }

    .auth-links a {
        font-size: 14px; /* Smaller font size for links */
        padding: 5px 0; /* Adjust padding for links */
    }

    .services_section {
        margin-top: 20px; /* Top margin for small screens */
    }

    body {
        padding: 15px; /* Reduce padding on smaller screens */
    }

    header {
        padding: 15px; /* Reduce header padding */
    }

    header h1 {
        font-size: 2rem; /* Smaller font size for h1 */
    }

    header p {
        font-size: 1rem; /* Smaller font size for paragraph */
    }

    .services_text {
        font-size: 1.5em; /* Adjusted font size for smaller screens */
    }

    .form-control {
        padding: 8px; /* Adjust padding for smaller screens */
    }

    .email_bt_2 {
        width: 100%; /* Ensure full width on smaller screens */
    }

    .promise {
        padding: 20px; /* Adjust padding for promise section */
    }
}

@media (min-width: 601px) and (max-width: 992px) {
    .auth-links {
        flex-direction: row; /* Keep links horizontal on medium screens */
        justify-content: space-around; /* Space links evenly */
    }

    .auth-links a {
        font-size: 16px; /* Default font size for links */
        padding: 10px 0; /* Adjust padding for links */
    }

    .services_section {
        margin-top: 40px; /* Top margin for medium screens */
    }
}

@media (min-width: 993px) {
    .auth-links {
        flex-direction: row; /* Keep links horizontal on large screens */
        justify-content: space-around; /* Space links evenly */
    }

    .auth-links a {
        font-size: 18px; /* Larger font size for links */
        padding: 10px 20px; /* Adjust padding for links */
    }

    .services_section {
        margin-top: 60px; /* Top margin for large screens */
    }
}