body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: hsl(0, 0%, 100%);
    overflow-x: hidden;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #000;
    color: #fff;
}

.main-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5rem 2rem;
    animation: fadeIn 2s;
}

.buttons {
    display: flex;
    flex-direction: column;
}

.app-store,
.coming-soon {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    padding: 10px 20px;
    
   
    cursor: pointer;
    background-color: transparent;
    transition: all 0.3s;
}

.app-store {
    color: #000;
}

.app-store:hover {
    background-color: #000;
    color: #fff;
}




.icon {
    width: 50px;
    height: 50px;
    background-color: #000;  /* Placeholder background */
    margin: 0 auto 20px auto;
    transition: transform 0.3s;
}

.icon:hover {
    transform: rotate(360deg);
}

footer {
    text-align: center;
    padding: 1rem;
    background-color: #000;
    color: #fff;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.app-store {
    color: #000;
    display: flex;
    align-items: center;
    gap: 10px;  /* Spacing between the image and the text */
}

.appstore-img {
    width: flex; /* Adjust based on your preference and the image's aspect ratio */
    height: auto;
}




.hero-container {
    display: flex;  /* This makes the child divs inside this container display in a row */
    align-items: center;  /* Vertically aligns the items in the center */
}



.appstore-button {
    max-width: 10px !important;
}

.features-button {
    max-width: 10px !important;
}
.button1 {
    margin-right: 20px; 
    max-width: 10px !important;
}
.button2 {
    margin-right: 20px !important; 
    max-width: 10px !important;
}

.buttons-container {
    display: flex !important;      /* This makes the child divs inside this container display in a row */
    align-items: center !important; /* Vertically aligns the items in the center */
}

.appstore-button{
    margin-right: 30px; /* Adds spacing between the two divs. Remove if unnecessary. */

}

.features-button {
    margin-right:40px;
}

.container {
    display: flex;
    align-items: flex-end;
}

.appstore-button, .features-button {
    margin: 0 10px;
}

footer {
    background-color: #0B1524;  /* Light grey background */
    padding: 10px 20px;         /* Padding around the text */
    font-family: 'Arial', sans-serif;  /* A clean and simple font */
    font-size: 14px;            /* Modest font size */
    text-align: center;         /* Center the text */
    color: #ffffff;                /* Dark grey color for text */
}

/* A bit of space between the two lines */
footer p:not(:last-child) {
    margin-bottom: 8px;
}

.learn-more-btn {
    margin-left: 20px;
}

.learn-btn {
    min-width: fit-content;
    max-width: fit-content;
    margin-left: 100px;
    padding:auto;

}


.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 20px; /* For spacing between hero-copy and the Learn More button */
}

.hero-copy {
    font-size: 24px;
    font-weight: bold;
    position: relative;
    top: -150px; /* Adjust this value to your preference */
    right:-90px;
    
}


.learn-more {
    padding: 10px 20px;
    font-size: 18px;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

.hero-title {
    margin-right:8px;
    margin-bottom: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 45px; /* example size */
    font-weight: bold;
    margin-top: 0px;
}

.section-title {

  
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 45px; /* example size */
    font-weight: bold;

}

#privacyLink {
    color: white;
    text-decoration: none; /* Removes the underline */
}

#privacyLink:hover {
    text-decoration: underline; /* Underlines the link on hover for better UX */
}

.heart-icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px; /* Adjusted to make the heart smaller */
    height: 20px; /* Adjusted to make the heart smaller */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="red" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>') no-repeat center;
    background-size: contain;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(0.95);
    }
}

.privacy-container {
    width: 100%; /* make sure it occupies the full width of its parent */
    box-sizing: border-box; /* ensures any padding or borders are included in width */
}

.hero-inner2 {
    display: flex; 
    justify-content: space-between; /* space content out */
    align-items: start;  /* align to the top */
}

.container2 {
    max-width: 100%;  /* ensures container doesn't exceed viewport width */
    padding: 0 20px;  /* provides some space on left and right */
    box-sizing: border-box;  /* padding is included in width calculation */
}

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

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

#contactUs {
    color: white;
    text-decoration: none; /* Removes the underline */
}

#contactUs:hover {
    text-decoration: underline; /* Underlines the link on hover for better UX */
}
.hero-app {
    margin-left: 170px; /* Adjust this value as needed */
}

/* Resetting the right positioning for hero-title */
.hero-title {
    right: 0;
    margin-top: -50px; /* Adjust this value as needed */
    margin-bottom: 20px; /* Add some space between the title and the video */
}
/* Adjusting the hero-copy positioning */
.hero-copy {
    font-size: 24px;
    font-weight: bold;
    top: 0; /* Resetting the top positioning */
    /* ... other properties ... */
}