*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"poppins",sans-serif;
}
body{
    background-color: #c9d6ff;
    background:linear-gradient(to right,#e2e2e2,#c9d6ff);
}
/* Default styles for larger screens */
.container {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    width: 400px; /* Fixed width for larger screens */
    padding: 1.5rem;
    margin: 50px auto;
    border-radius: 10px;
    box-shadow: 0 20px 35px rgba(0,0,1,0.9);
	justify-content: center;
    align-items: center;
}

/* Tablets and smaller desktops (up to 1024px) */
@media (max-width: 1024px) {
    .container {
        width: 80%; /* Adjust to take 80% of screen width */
        max-width: 600px; /* Limit maximum width */
    }
}

/* Mobile devices (up to 768px) */
@media (max-width: 768px) {
    .container {
        width: 90%; /* Adjust to take 90% of screen width */
        padding: 1rem; /* Reduce padding for smaller screens */
    }
}

/* Small mobile devices (up to 480px) */
@media (max-width: 480px) {
    .container {
        width: 95%; /* Almost full width */
        padding: 0.8rem; /* Further reduce padding */
        margin: 30px auto; /* Reduce top margin */
    }
}




/* Ensure the logos are sized consistently */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between logos */
    margin: 20px 0;
    flex-wrap: wrap; /* Allow logos to wrap on smaller screens */



}







.logo-container img {
    width: 20%; /* Use percentage to make it responsive */
    max-width: 250px; /* Max width for larger screens */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Maintains aspect ratio, avoiding distortion */
    border: 1px solid #ddd; /* Optional border */
    border-radius: 5px; /* Optional rounded corners */
    background-color: #fff; /* Optional background for visibility */
}

/* Ensure the logos are sized consistently */
.logo-container-ins {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between logos */
    margin: 20px 0;
    flex-wrap: wrap; /* Allow logos to wrap on smaller screens */
}

.logo-container-ins img {
    width: 90%; /* Use percentage to make it responsive */
    max-width: 1000px; /* Max width for larger screens */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Maintains aspect ratio, avoiding distortion */
    border: 1px solid #ddd; /* Optional border */
    border-radius: 5px; /* Optional rounded corners */
    background-color: #fff; /* Optional background for visibility */
}

/* Tablet devices (up to 768px) */
@media (max-width: 768px) {
    .logo-container img {
        width: 30%; /* Increase width for better visibility */
        max-width: 200px;
    }
}

/* Mobile devices (up to 480px) */
@media (max-width: 480px) {
    .logo-container img {
        width: 50%; /* Further increase width for smaller screens */
        max-width: 150px;
    }
}


.title-container h1 {
    font-size: 24px;
    color: #333;
    margin-top: 10px;
    font-weight: bold;
}


.whatsapp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366; /* WhatsApp green */
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
    width: max-content;
}

.whatsapp-button:hover {
    background-color: #1ebe57; /* Darker green on hover */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.4);
}

.whatsapp-logo {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}


.logo {
    border: 2px solid #ccc; /* Light grey border */
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.5); /* Stronger shadow */
    border-radius: 5px; /* Optional: rounded corners */
    padding: 5px; /* Spacing inside the border */
    transition: all 0.3s ease-in-out; /* Smooth effect */
}

.logo:hover {
    box-shadow: 12px 12px 25px rgba(0, 0, 0, 0.6); /* Even stronger shadow on hover */
}

form{
    margin:0 2rem;
}
.form-title{
    font-size:1.5rem;
    font-weight:bold;
    text-align:center;
    padding:1.3rem;
    margin-bottom:0.4rem;
}
input{
    color:inherit;
    width:100%;
    background-color:transparent;
    border:none;
    border-bottom:1px solid #757575;
    padding-left:1.5rem;
    font-size:15px;
}
.input-group{
    padding:1% 0;
    position:relative;

}
.input-group i{
    position:absolute;
    color:black;
}
input:focus{
    background-color: transparent;
    outline:transparent;
    border-bottom:2px solid hsl(327,90%,28%);
}
input::placeholder{
    color:transparent;
}
label{
    color:#757575;
    position:relative;
    left:1.2em;
    top:-1.3em;
    cursor:auto;
    transition:0.3s ease all;
}
input:focus~label,input:not(:placeholder-shown)~label{
    top:-3em;
    color:hsl(327,90%,28%);
    font-size:15px;
}
.recover{
    text-align:right;
    font-size:1rem;
    margin-bottom:1rem;

}
.recover a{
    text-decoration:none;
    color:rgb(125,125,235);
}
.recover a:hover{
    color:blue;
    text-decoration:underline;
}
.btn{
    font-size:1.1rem;
    padding:8px 0;
    border-radius:5px;
    outline:none;
    border:none;
    width:100%;
    background:rgb(125,125,235);
    color:white;
    cursor:pointer;
    transition:0.9s;
}
.btn:hover{
    background:#07001f;
}
.or{
    font-size:1.1rem;
    margin-top:0.5rem;
    text-align:center;
}
.icons{
    text-align:center;
}
.icons i{
    color:rgb(125,125,235);
    padding:0.8rem 1.5rem;
    border-radius:10px;
    font-size:1.5rem;
    cursor:pointer;
    border:2px solid #dfe9f5;
    margin:0 15px;
    transition:1s;
}
.icons i:hover{
    background:#07001f;
    font-size:1.6rem;
    border:2px solid rgb(125,125,235);
}
.links{
    display:flex;
    justify-content:space-around;
    padding:0 4rem;
    margin-top:0.9rem;
    font-weight:bold;
}
button{
    color:rgb(125,125,235);
    border:none;
    background-color:transparent;
    font-size:1rem;
    font-weight:bold;
}
button:hover{
    text-decoration:underline;
    color:blue;
}

/* Mobile styles (up to 600px) */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

/* Tablet styles (601px to 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    body {
        font-size: 16px;
    }
}

/* Desktop styles (1025px and above) */
@media (min-width: 1025px) {
    body {
        font-size: 18px;
    }
}
/* Phone Group Wrapper */
.phone-group {
    position: relative;
}

/* Phone Wrapper Styling */
.phone-wrapper {
    display: flex;
    align-items: center;
    border: none;
    border-bottom: 1px solid #757575;
    width: 100%;
    padding-left: 1.5rem;
}

/* Dropdown Styling */
.phone-wrapper select {
    background-color: transparent;
    border: none;
    font-size: 15px;
    color: inherit;
    padding: 0 10px;
    appearance: none; /* Removes default dropdown arrow */
    outline: none;
    cursor: pointer;
}

.phone-wrapper select:focus {
    border-bottom: 2px solid hsl(327, 90%, 28%);
}

/* Input Field in Phone Wrapper */
.phone-wrapper input {
    border: none;
    flex: 1;
    font-size: 15px;
    color: inherit;
    background-color: transparent;
    outline: none;
}

.phone-wrapper input::placeholder {
    color: transparent;
}

/* Adjust Icon Position */
.phone-group i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: black;
}

/* Focus Effect for the Entire Phone Group */
.phone-wrapper:focus-within {
    border-bottom: 2px solid hsl(327, 90%, 28%);
}