body {
    position: unset;
}

p, h1, h2, h3, h4, h5 {
    font-family: 'Oswald', sans-serif;


}

.hero-grid {
    background-image: url("https://hostedmedia.parkersfiat.com/images/fiat500e/fiat-500e-1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 75vh;
    width:100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "hero-text hero-text";
}

.hero-text-container {
    display: flex;
    justify-self: center;
    flex-direction: column;
    justify-content: center;
    height:100%;
    align-items: center;
    padding: 0 7vw;
    row-gap: 3vh;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.hero-text-container h1 {
    margin-top:20%;
}

.reserve-50 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 50%;
    padding:0 2vw;
    margin-top:auto;
    border-radius: 45px 45px 0 0;
    background-color: rgba(0, 0, 0, 0.85);
    text-align: center;

}

.reserve-50 h3,  .reserve-50 h2 {
    margin:0;
    padding:0;
}


.reserve-50 h2 {
color:#0074d4;
font-size: 1.1rem;
font-family: 'Oswald', sans-serif;

}


.reserve-50 h3 {
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1; 

}

.circle-grid{
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    height:fit-content;
    margin: 20px 0;
}

.circle-grid-reverse {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    height:fit-content;
    margin: 0;
    justify-content: space-between; /* horizontal spacing */
  align-content: space-between;    
}

.circle {
display:flex;
flex-direction: column;
width: 60vh;
height: 60vh;
border-radius:999999px;
background:linear-gradient(to bottom, rgba(99,20,13) 0%, rgba(227,17,42) 100%);
justify-content: center;
z-index:99; 
overflow:hidden;  
border: 2vw solid  rgb(255, 255, 255);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) ;   
contain:content;
margin:auto;
}

.circle-left {
    display:flex;
flex-direction: column;
width:60vh;
height: 60vh;
border-radius:999999px;
background:linear-gradient(to bottom, rgba(99,20,13) 0%, rgba(227,17,42) 100%);
justify-content: center;
z-index:99; 
overflow:hidden;  
border: 2vw solid  rgb(255, 255, 255);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) ;   
contain:content;
margin:auto;


}


.circle img, .circle-left img, .explore-circle img {
    position:absolute;
    z-index: 0;
    width:auto;
    min-height:150%;
    align-self: center;


}
.circle:hover, .circle:hover h1, .circle:hover p, .circle:hover img,.circle-left:hover, .circle-left:hover h1, .circle-left:hover p, .circle-left:hover img, .explore-circle:hover img {
    transform: scale(1.05);
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transition: all 0.5s ease-in-out;
}

.circle:hover img, .circle-left:hover img, .explore-circle:hover img {
    opacity: 30%;
    transition: all 0.5s ease-in-out;
}

.CE img {
    max-width:fit-content;
}

.circle h1, .explore-circle h1 {
    color: white;
    align-self: center;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin: 0;
    padding: 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.circle p, .explore-circle p {
    color: white;
    font-family: 'Oswald', sans-serif;
    align-self: center;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin: 0;
    padding: 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1;

}

.grid-text {
    display: flex;
    z-index: 1;
    margin-right: 4vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:white;
    row-gap: 5%;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.grid-text-envelop {
    position:absolute;
    z-index: 0;
    background:linear-gradient(to bottom, rgba(99,20,13) 0%, rgba(227,17,42) 100%);
    border-radius:100px;
    width:95%;
    height:40%;
    align-self: CENTER;
    justify-self: center;

}
.grid-text-envelop-reverse {
    position:absolute;
    z-index: 0;
    background:linear-gradient(to bottom, rgba(99,20,13) 0%, rgba(227,17,42) 100%);
    border-radius:100px;
    width:95%;
    height:50vh;
    align-self: CENTER;
    justify-self: center;
}

.circle-left h1 {
    color: white;
    font-family: 'Oswald', sans-serif;
    align-self: center;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin: 0;
    padding: 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.circle-left p {
    color: white;
    font-family: 'Oswald', sans-serif;
    align-self: center;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin: 0;
    padding: 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1;

}
.grid-text-left {
    display: flex;
    z-index: 1;
    margin-left: 4vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:white;   
    row-gap: 5%;

    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.icon-grid {
    display:grid; 
    grid-template-columns: auto auto auto;
    width:95%;
    height:auto;
    margin:15vh auto;
    column-gap: 0.2vw;
    background-color:rgb(99,20,13);



}

.feature-icons {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-justify: center;
    background: White;
    padding: 2vh 5vw ;
}

.feature-icons h3 {
    color:rgb(99,20,13);
    font-family: 'Oswald', sans-serif;
    text-shadow: none;
}

.feature-icons p {
    color:rgb(46, 46, 46);
    font-family: 'Oswald', sans-serif;
    text-shadow: none;
}

.feature-icons img {
    width: 30vh;
    height: auto;
    margin-bottom: 1rem;
}

#range, #redesign {
    font-size: 4vw;
}

.explore-grid {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    width: 100%;
    height:fit-content;
    margin: 0;
    justify-content: space-between; /* horizontal spacing */
  align-content: space-between;    
}


.explore-circle {
display:flex;
flex-direction: column;
width:25vw;
height: 25vw;
border-radius:999999px;
background-color: white;
justify-content: center;
z-index:99; 
overflow:hidden;  
border: 1vw solid  rgb(255, 255, 255);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) ;   
contain:content;
margin: 15vh aUTO;
}

#tech-button, #eff-button, #design-button {
    display: flex;
    position: relative;
    margin: 0 auto;
    width:100px ;
    height:100px;
    background-color: rgb(255, 255, 255); 
    border-radius: 99999px;
    vertical-align: middle;
    cursor:pointer;
    justify-content: center

}

.explore-btn-text {
    display:block;
    color: black;
    align-self: center;
    justify-content: center;;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1;
}



.explore-tech-modal, .explore-design-modal, .explore-efficieny-modal {
    position: fixed; /* Changed to fixed for stable positioning relative to the viewport */
    display: flex; /* Keeps flex for internal content alignment */
    justify-content: center; /* Centers content horizontally inside the modal */
    align-items: center; /* Centers content vertically inside the modal */
    left: 0;
    right: 0; /* Added to help center the modal */
    top: 0;
    bottom: 0; /* Added to help center the modal */
    margin: auto; /* Auto margins help in centering */
    height: 80vh;
    width:80vw;
    background-color: white;
    border: none;
    padding: 25px;
    box-shadow: 0 0 1000px rgba(0, 0, 0, 0.8);
    opacity: 0; /* Start with modal hidden */
    transition: opacity 0.3s; /* Smooth transition for the opacity */
    z-index: -5; /* Ensure the modal is above other elements */
}

.explore-tech-modal.active, .explore-design-modal.active, .explore-efficieny-modal.active {
    opacity: 1; /* Modal visible */
    z-index: 9999;
    height: 80vh;
    width:80vw;
    overflow: hidden;


}

.explore-modal-content {
    display: grid;
    grid-template-columns: 60% 40%;
    justify-content: center;
    align-items: center;
    border: solid 5px #a70000;
    width: 100%;
    height:100%;
    column-gap: 1.5vw;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;

}

.explore-modal-text-grid {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:100%;
    width:95%;
    column-gap: 0;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    text-align: left;


}

.explore-modal-text-grid p{
    font-size: 45%;
    width:100%
}

.explore-modal-text-grid h1 {
    font-size: 55%;
    width:100%;
    margin-top: 20px;
}

.explore-modal-text-grid h2 {
    font-size: 70%;
    padding-right:45px;
margin-top:25px;
}


.sub-image-grid {
    display:grid;
    width:auto;
    display:grid;
    width:100%;
    height:100%;
    grid-template-columns: 33% 33% 33%;
}

.sub-image {
width: 100%;
aspect-ratio: 1 / 1;
border-radius:999999px;
background-color: red;
justify-content: center;
z-index:99; 
overflow:hidden;  
border: 0.5vw solid  rgb(255, 255, 255);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) ;   
contain:content;
margin: 0 aUTO;
}

.modal-main-img {
    width:100%;
    height:auto;
    max-height:600px;
    aspect-ratio: 1 / 1;
    border-radius:999999px;
    background-color: red;
    justify-content: center;
    z-index:99; 
    overflow:hidden;  
    border: 0.5vw solid  rgb(255, 255, 255);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) ;   
    contain:content;
    margin: 1vh aUTO;
}
.modal-close, #modal-close {
position:absolute;
width:62px !important;
height: 35px !important;;
top:15px;
right:15px;  
cursor:pointer;}


.img-container {
    display:flex;
    flex-direction: column;
    height:100%;
}

form {
    display:flex;
    margin:auto;
    flex-direction: row;
    column-gap: 10px;
    padding: 20px 20px;
    width:75%;
    min-width:350px;
}

    form input {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #a70a0a;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    margin: 0;
    outline: none;
    transition: all 0.3s ease-in-out;
}   

form button {
    padding:0 2vw;
    background-color: #a70a0a   ;
    color:white;
    border-radius: 25px;

}

.form-container {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:auto;
    background-color: rgb(255, 255, 255,0.8);
    padding: 0 5px;
    width:75%;
    border-radius: 25px;
    margin: auto;
}   

.form-container h1 {
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin: 10px 0;
    font-weight: 900;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1;
    color: #a70a0a;
}   

.form-container-modal form {
    display:flex;
    margin:auto;
    flex-direction: column;
    column-gap: 10px;
    padding: 0;
    width:75%;
    max-width:275px;
}

.form-container-modal form input {
    width: 70%;
    max-width:225px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #a70a0a;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    margin: 5px;
    outline: none;
    transition: all 0.3s ease-in-out;
}   

.form-container-modal form  button {
    width:80%;
    margin:10px 0px;
    height:4.5vh;
    max-width:225px;
   background-color: #a70a0a   ;
    color:white;
    border-radius: 25px;

}

.form-container-modal {
    display:flex;
    display:absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:auto;
    background-color: rgb(255, 255, 255,0.8);
    padding: 0;
    width:95%;
    border-radius: 25px;
    margin: auto;
    overflow: hidden;
}   

.form-container-modal h1 {
    font-size: 1.6vh;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    font-weight: 900;
    padding-top:10px ;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1;
    color: #a70a0a;
}   


#sub-image-grid-efficiency {
    margin-top:-350px;
}

#modal-main-img-efficiency {
    margin-top: -150px;
}

.BuyButton-ButtonTextContainer {
    margin-top:25px;
}


@media only screen and (max-width: 640px) {
    
    .hero-grid {
        display:flex; 
        flex-direction:column;
        height: auto;        width:100%;
        margin-bottom:5vh;
        padding-bottom:2vh;
        -ms-flex-align: end;
    }
    .hero-text-container {
        padding-top:25px;
    }
    
    .hero-text-container h1 {
        margin-top:15px;
    }

 
    .circle-grid, .circle-grid-reverse {
        grid-template-columns: 100%;
        margin:0

    }

    .circle, .circle-left {
        width: 80vw;
        height: 80vw;
        border: 10% solid rgb(255, 255, 255);
        margin: 5px auto;
    }

    .grid-text, .grid-text-left {
        margin-right: 0;
        margin-left: 0;
        padding: 10px 10px;
    }

    .grid-text-envelop, .grid-text-envelop-reverse {
        width: 100%;
        margin: 0 auto;
        height: 65%;
        border-radius: 10px;
    }

    .icon-grid {
        grid-template-columns: auto;
        margin: 10vh auto;
    }

    .explore-circle {
        width: 80vw;
        height: 80vw;
        border: 5% solid rgb(255, 255, 255);
        margin:20px auto;
    }

    .explore-grid {
        grid-template-columns: 100%;
        margin-top:25px;
    }

    .explore-tech-modal, .explore-design-modal, .explore-efficieny-modal {
        width: 90%;
        flex-direction: row;
        overflow: auto;
    }

    .explore-tech-modal.active, .explore-design-modal.active, .explore-efficieny-modal.active {
        overflow: auto;
    }

    .explore-modal-content {
        height:100%;
        grid-template-columns: 100%;
        border:none;
    }

    .explore-modal-text-grid {
        max-width:95vw;
    }

    .sub-image-grid {
        grid-template-columns: 100%;
        width:90%;
    }

    form {
        flex-direction: column;
        padding:auto;
    }
    .form-container-modal form  {
        flex-direction: column;
        padding:auto;
    }


    form input {
    width: 75%;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #a70a0a;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 400;
    color: #333;
    margin: 0;
    outline: none;
    transition: all 0.3s ease-in-out;
}   

form button {
    padding:5px;
    background-color: #a70a0a   ;
    color:white;
    width:75%;
    margin:10px;
    border-radius: 25px;
    overflow:auto;

}

.reserve-50 {
    width:100%;
    padding: 2vh 2vw;
    border-bottom-left-radius: 45px;
    border-bottom-right-radius: 45px;

}

    .form-container {
        width: 85%;
        margin: 2% auto;
    }

    .form-container-modal {
        width:100%;
    }

    form #updates_form {
        flex-direction: column;
    }   

    .modal-main-img {
        position: relative;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:80%;
        overflow:visible;
    }
    .form-container-modal form input {
        width:80%;
    }

    #sub-image-grid-efficiency {
        margin-top: 50px;
    }

    #modal-main-img-efficiency {
        margin-top: 45px;
        height:100%;
    }

    stripe-buy-button {
        margin:2% 0;
        border-radius: 45px;;
    }
}

/* You can continue to add more CSS rules or modify existing ones as needed */