@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
*{
    padding: 0px;
    margin: 0px;
    font-family: "Special Elite", system-ui;
}
html {
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden; /* Prevents horizontal scroll */
}
body{
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
  width: 100%;
    overflow-x: hidden; /* Prevents horizontal scroll */
}
p, h5{
    font-family: Helvetica, Arial, sans-serif;
}

header {
    display: flex; /* Enables flexbox */
    justify-content: space-between; /* Positions the logo and nav to opposite ends */
    align-items: flex-end; /* Centers items vertically */
    padding: 10px 60px; /* Adds some padding inside the header */
    background-color: black;
     padding-bottom: 40px;
}

.logo img {
    width: 160px; /* Adjust based on your logo's size */
    height: auto; /* Maintains the aspect ratio */
}

nav a {
    margin-left: 20px; /* Adds space between each link */
    text-decoration: none; /* Optional: removes the underline from links */
    color: white; /* Optional: sets the color of the links */
    font-size: 25px;
  
    
    
}
nav a:hover {
    color: #cebdb6; /* New color on mouseover */
}

.content-area h1{
    color: white;
    font-size: 50px;
    text-align: center;
    padding-top: 80px;
}
.content-area p{
    color: white;
    text-align: center;
    padding-top: 40px;
    font-size: 17px;
    width: 700px;
    margin: 0px auto;

}
.form{
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
.form input{
    background: transparent;
    border: 1px solid white;
    padding: 16px 296px 16px 20px;
    color: white;
    font-size: 16px;
    margin-right: 30px;
}
.form button{
    padding: 10px 30px;
    background-color: rgb(64, 62, 83);
    border: none;
    color: white;
    border-radius: 4px;
    font-size: 35px;
    cursor: pointer;
}
.main-section {
    background: 
}
.main-section h1{
    text-align: center;
    font-size: 55px;
    padding: 50px 0px;
}
.inner-main{
    display: flex;
    justify-content: space-between;
    margin: 0px 40px;
    margin-bottom: 50px;

}
.inner-column {
    display: flex;
    flex-direction: row; /* This will be changed to column in a media query for smaller screens */
    justify-content: center; /* Center children horizontally */
    align-items: center; /* Center children vertically */
    text-align: center; /* Ensure text is centered */
}

.inner-column .imgg {
   display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically, if needed */
}

.inner-column img {
   max-width: 100%; /* Ensures the image is responsive and doesn't exceed its container's width */
    height: auto; /* Maintains the image's aspect ratio */
    max-height: 600px; /* Maximum height to prevent the image from becoming too large */
    width: auto; /* Maintains aspect ratio, but you can adjust or remove this if you set a max-width */

}
.inner-column2 img {
   max-width: 100%; /* Ensures the image is responsive and doesn't exceed its container's width */
    height: auto; /* Maintains the image's aspect ratio */
    max-height: 600px; /* Maximum height to prevent the image from becoming too large */
    width: auto; /* Maintains aspect ratio, but you can adjust or remove this if you set a max-width */

}
.inner-column3 img {
   max-width: 100%; /* Ensures the image is responsive and doesn't exceed its container's width */
    height: auto; /* Maintains the image's aspect ratio */
    max-height: 600px; /* Maximum height to prevent the image from becoming too large */
    width: 700px; /* Maintains aspect ratio, but you can adjust or remove this if you set a max-width */
    border-radius: 20%;

}
.inner-column4 img {
   max-width: 100%; /* Ensures the image is responsive and doesn't exceed its container's width */
    height: auto; /* Maintains the image's aspect ratio */
    max-height: 60px; /* Maximum height to prevent the image from becoming too large */
    width: 60px; /* Maintains aspect ratio, but you can adjust or remove this if you set a max-width */
    border-radius: 20%;

}
.inner-column5 img {
    max-width: 100%; /* Ensures the image is responsive and doesn't exceed its container's width */
    height: auto; /* Maintains the image's aspect ratio */
    max-height: 600px; /* Maximum height to prevent the image from becoming too large */
    width: auto; /* Maintains aspect ratio, but you can adjust or remove this if you set a max-width */
    border-radius: 50%;

}
.inner-column2{
   display: flex;
    flex-direction: row; /* This will be changed to column in a media query for smaller screens */
    justify-content: center; /* Center children horizontally */
    align-items: center; /* Center children vertically */
    text-align: center; /* Ensure text is centered */
}
.inner-column2 .imgg{
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically, if needed */
}
.inner-column2 .imgggg{

     width: 400px;
    border-radius: 50%;
}
.inner-column .imgggg{

     width: 400px;
    border-radius: 50%;
}
.inner-column5 .imgggg{

     width: 400px;
    border-radius: 50%;
    padding-left: 30px;
}
.inner-column img, .inner-column2 img, .inner-column3 img, .inner-column4 img, .inner-column5 img {
    max-width: 95%; /* Reduce slightly to prevent overflow */
}
.inner-column h2{
    text-align: center;
    margin-bottom: 40px;
    margin-top: 10px;
    font-size: 33px;
  color: rgb(22, 21, 33);
}
.inner-column h5{
    color: rgb(94, 94, 94);
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}
.inner-column p{
    text-align: center;
    color: rgb(94, 94, 94);
    line-height: 1.4;
    font-size: 16px;
    font-weight: 400;
    padding:30px 0px;
}
.inner-column ul li{
    color: rgb(94, 94, 94);
    line-height: 1.5;
    font-size: 16px;
    margin: 0px 30px;
    font-family: Helvetica, Arial, sans-serif;

}
.inner-column2 h2{
     text-align: center;
    margin-bottom: 40px;
    margin-top: 10px;
    font-size: 33px;
  color: white;
}
.inner-column2 h5{
    color: white;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}
.inner-column2 p{
   text-align: center;
    color: white;
    line-height: 1.4;
    font-size: 16px;
    font-weight: 400;
    padding:30px 0px;
}
.inner-column2 ul li{
    color: white;
    line-height: 1.5;
    font-size: 16px;
    margin: 0px 30px;
    font-family: Helvetica, Arial, sans-serif;

}
.text-content {
    padding-top: 40px;
    padding-left: 40px; /* Adds spacing between the image and text */
    max-width: 600px; /* Adjust this value based on your design needs */
    text-align: left; /* Ensures text within is left-justified */
    margin-right: auto; /* Centers the div in the parent container */
}
b{
    font-family: Helvetica, Arial, sans-serif;

}
footer{
    background:url('./assets/City.png');
    height: 250px;
    object-fit: cover;
background-position: center center;
}
footer h1{
    font-size: 60px;
    padding: 40px 0px 0px 0px;
    line-height: 1.5;
    color: white;
    text-align: center;
}
footer .privacy{
    text-align: center;
    color: white;
    margin: 96px 0px;
}
footer .privacy a{
    color: rgb(226, 226, 226);
    text-decoration: none;
}
footer p{
    text-align: center;
    color: rgb(150, 150, 150);
}
.main-privacy{
    width: 700px;
    margin: 0px auto;
}
.main-privacy h1{
    padding: 5rem 0rem;
    text-align: center;
    font-size: 55px;
}
.content{
    padding: 20px 0px;
}
.main-privacy .date{
    font-style: italic;
}
.main-privacy .content h5{
    color: rgb(94, 94, 94);
    font-size: 18px;
    font-weight: 600;
}
.main-privacy .content p{
    color: rgb(94, 94, 94);
    line-height: 1.5;
}
.footer-2{
   background: black;
    height: auto;
    padding-bottom: 30px;
}
.footer-2 .privacy{
    padding: 90px;
    margin: 0px;
}
.author{
    background-color: #cebdb6;
    
    object-fit: cover;
background-position: center center;
padding: 20px;
}
.author h1{
    font-size: 60px;
    padding: 40px 0px 0px 0px;
    line-height: 1.5;
    color: white;
    text-align: center;
}
.story{
    background-color: black;
    
    object-fit: cover;
background-position: center center;
padding: 20px;
}
.story h1{
    font-size: 60px;
    padding: 40px 0px 0px 0px;
    line-height: 1.5;
    color: white;
    text-align: center;
}
.badges-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the badges within the container */
    gap: 20px; /* Adjust the space between badges */
}

.badges-container img {
    width: 100px; /* Set a fixed width for all badges to ensure they are the same size */
    height: auto; /* Maintain aspect ratio */
}
.badges-container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the badges within the container */
    gap: 20px; /* Adjust the space between badges */
}

.badges-container2 img {
    width: 200px; /* Set a fixed width for all badges to ensure they are the same size */
    height: auto; /* Maintain aspect ratio */
}
#email-placeholder {
    font-size: 20px; /* Adjusts the size of the text */
    color: white; /* Adjusts the color of the text */
}
/* Media Queries for responsiveness */
@media (max-width: 768px) {
    .inner-main, .inner-column, .inner-column2, .inner-column3, .inner-column4, .inner-column5 {
        flex-direction: column; /* Stacks flex items vertically */
        align-items: center; /* Centers items in the cross axis */
        
    }
    
    .inner-column img, .inner-column2 img, .inner-column3 img, .inner-column4 img, .inner-column5 img {
       
        margin-bottom: 10px; /* Adds space between stacked items */
    }
    .inner-column5 img {
       
        padding-top: 30px; /* Adds space between stacked items */
        max-width: 70%;
        
    }
    
    .content-area p, .inner-column p, .inner-column2 p {
        width: 90%; /* Makes the paragraph width responsive */
        text-align: center; /* Centers the text */
    }
    
   
    
    header, .form, .content {
        padding-bottom: 30px; /* Reduces padding for smaller screens */
        padding-left: 0px;
    }
    
    .form input, .form button {
        padding: 10px; /* Adjust padding for comfort on touch devices */
        margin-bottom: 10px; /* Adds bottom margin for stacked form elements */
    }
}

@media (max-width: 550px) {
    .logo img {
        width: 100px; /* Adjusts logo size for very small devices */
    }
}
#mc_embed_signup {background:#fff; false;clear:left; font:14px Helvetica,Arial,sans-serif; width: 600px;}