body {
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, rgba(254, 244, 255, 0.8) 0%, rgba(254, 244, 255, 0.8) 40%, rgba(254, 244, 255, 0) 60%, rgba(254, 244, 255, 0) 100%), url('/img/home-fade-phone.png');
    /* Replace with your phone image URL */
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 25% center;
    font-family: 'Lato', sans-serif;
    user-select: none; /* Adjust the user-select property as needed */
    position: relative; /* Add relative positioning to the body */
}

.circle {
    position: absolute;
    background-color: #951abe; /* Circle color */
    width: 40px; /* Adjust circle size */
    height: 40px; /* Adjust circle size */
    border-radius: 50%; /* Makes the shape a circle */
    opacity: 0.3; /* Adjust opacity as needed */
    z-index: 999; /* Ensure the circles are on top */
    filter: blur(5px); /* Add blur effect to circles */
}

/* Position the circles randomly */
.circle1 { top: 20px; left: 50px; }
.circle2 { top: 120px; left: 350px; }
.circle3 { top: 220px; left: 650px; }
.circle4 { top: 320px; left: 950px; }
.circle5 { top: 20px; left: 50px; }
.circle6 { top: 120px; left: 350px; }
.circle7 { top: 220px; right: 50px; }
.circle8 { top: 320px; right: 350px; }




.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90vh; /* Use min-height to ensure the container stretches to the full viewport height */
}

.column {
    width: 50%;
    margin: 0 10px; /* Adjust the margin as needed */
    display: flex;
    flex-direction: column;
}

.left-column {
    text-align: left;
    align-items: left;
    margin-left: 10%;
}

#seeDS {
    margin: 0 10px;
}





.left-column button {
    margin-top: 10px;
    padding: 7px 10px;
    background: linear-gradient(to top, #951abe, #fde3ff);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    flex: 5;
    border: 2px solid #edb8f5;
}

.left-column button:hover {
    color: #fef2ff;
    background: linear-gradient(to bottom, #951abe, #fde3ff);
    border: 2px solid #951abe;
}


.left-column h1 {
 font-size: 24px;
 margin-bottom: 3px;
 color: #951abe;
}

.left-column p {
    font-size: 18px;
    font-weight: 200;
    width: 70%;
    margin: 10px 0px;
    color: #951abe;
   }

.event {
    margin-top: 30px;
}


.event  button{
    margin-top: -5px;
}




.right-column {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    align-items: center;

}

.right-column img {
    width: 90%; /* Adjust image size as needed */
    margin-right: 2%; /* Gap between images */
}






footer {
    background-color: #f6c6fa; /* Blue footer background */
    padding: 20px;
    display: flex;
    justify-content: space-around;
    color: white;
    font-size: 14px;
    height: auto;
}

.footer-left {
    display: flex;
    align-items: center;
}

.footer-left a {
    text-decoration: none;
    color: #951abe;
    margin: 0 10px; /* Adjust the margin as needed */
    border: 2px solid #951abe;
    padding: 5px 10px;
    border-radius: 15px;
    font-weight: 700;
}

.footer-left a:hover {
    background-color: #951abe;
    color: #fef2ff;
}

.footer-right:before {
    content: "Follow us on: ";
    font-weight: bold;
    color: #951abe;
}

.footer-right {
    display: flex;
    align-items: center;
    margin-right: 30px;
    
}

.footer-right i {
    font-size: 24px;
    margin-left: 10px;
    color: #951abe;
    cursor: pointer;     /* Adjust the margin as needed */
}


/* Your existing CSS styles for larger screens */



/* Your existing CSS styles for larger screens */

/* Media query for screens 768px and smaller */
@media (max-width: 768px) {
    body {
        background-size: cover; /* Ensure background covers the viewport */
        background-position: center top; /* Center the background vertically */
    }

    .container {
        flex-direction: column; /* Stack columns vertically */
        align-items: center; /* Center-align content in the container */
    }

    .column {
        width: 80%; 
    }

    .left-column {
        text-align: center; /* Center-align text in the left column */
        margin: 20px auto; /* Center the column horizontally and add top margin */
    }
    
    .left-column button {
        margin-top: 20px;
        margin: 10px auto; /* Increase spacing for the button */
    }
    
    .left-column p {
        width: 80%; /* Adjust the width as needed for better readability */
        margin: 10px auto; /* Center-align the paragraph horizontally and add vertical margin */
        text-align: center; /* Center-align text in the left column */
    }
    

    .right-column {
        margin-top: 10px; /* Slightly adjust margin for better spacing */
    }

    .container {
        flex-direction: column; /* Change flex direction to stack columns vertically */
    }

    .left-column {
        order: 2; /* Change left column order to 2 */
    }

    .event  button{
        margin-top: -5px;
        margin-left: auto;
    }

    .event {
        margin-left: 10px;
        align-items: center; 
    }
    

    
    .right-column {
        display: flex;
        justify-content: center; /* Center-align contents horizontally */
        align-items: center; /* Center-align contents vertically */
        margin-top: 10px;
        text-align: center; 
        order: 1; /* Center-align text within the column */
    }
    

    .right-column img {
        width: 80%; /* Ensure images are fully responsive */
        margin: 0 auto; /* Center-align the image horizontally */
    }

    footer {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center-align content vertically */
        align-items: center; /* Center-align content horizontally */
        padding: 20px;
        color: white;
        font-size: 14px;
        height: auto;/* Set the width of the footer content to 80% */
        margin: 0 auto;
          /* Center-align the footer itself */
    }
.footer-right {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center items horizontally */
}

.footer-left {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center items horizontally */
}

    
    .footer-left,
    .footer-right {
        text-align: center;
        margin: 5px 0; /* Add spacing between footer elements */
    }
    
    .footer-left a {
        margin: 5px; /* Add spacing around each footer link */
        padding: 5px 10px; 
    }/* Optional: Add padding to create space inside each link */
    
    
    
}


/* Position the circles for screens smaller than 768px */
@media screen and (max-width: 767px) {
    /* Position the circles randomly */
 .circle1 { top: 20px; left: 50px; }
 .circle2 { top: 120px; left: 150px; }
 .circle3 { display: none; }
 .circle4 { display: none;}
 .circle5 { top: 20px; left: 50px; }
 .circle6 { top: 70px; left: 280px; }
 .circle7 { top: 200px; right: 50px; }
 .circle8 { top: 320px; right: 350px; }
 }
 
 @media screen and (max-width: 480px) {
     .circle1 { top: 20px; left: 50px; }
 .circle2 { top: 120px; left: 150px; }
 .circle3 { display: none; }
 .circle4 { display: none;}
 .circle5 { top: 20px; left: 50px; }
 .circle6 { display: none; }
 .circle7 { top: 200px; right: 50px; }
 .circle8 { top: 320px; right: 350px; }
 }