h1,p,h2 {
    font-family: 'Cuprum', sans-serif;

}        

        .head-container{
            position:relative;
            width: 100%;
            height: 60vh;
            justify-content: center;
            align-items: center;
            
        }

        .head-content {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust the position accurately */
    width: 100%;
    height: 100%;
    display: flex;
    background-color: rgb(0,0,0,0.8);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

        #bck-vid{
            top: 0;
            left: 0;
            height:100%;
            width:100%;
            object-fit: cover;
            z-index: -2;
              }


.head-content-grid { 
    position: inherit;   
    display: grid; 
    width:100%; 
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    column-gap: 1%;
    
}

.head-content-grid-item {   
    display: flex;  
    height:100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color:white;
}

#ram-ev-head{
    width: 80%;
    height: auto;
    object-fit: contain;
    border-radius:5px 5px 5px 555px;
    border: 2px solid rgb(0, 204, 255);
    
}

.head-content-grid-item-text {
    width: 90%;
    height: auto;
    margin:auto;
    object-fit: contain;
    padding: 2%;
    color:white;

}

.head-content-grid-item-text h1{ 
    color : rgb(118, 251, 89);
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.head-content-grid-item-text p {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

#ram-elc-head, #ram-elc-head-logo{  
    width: 10%;
    height: auto;   
    position: absolute;
    bottom:0;
    left:0;
    padding-left:50px;
    padding-bottom:20px;
    z-index: -1;
}

#ram-rev-logo-2{
    width: 50%;
    height: auto; 
    margin:0;  

}

.video-gallery {
    display: grid;
    width:100%;
    grid-template-columns: repeat(3, 33%);
    gap: 10px;
    margin-top:10px;
    height:min-content;
}

.video {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.video-thumb {
    width: 100%; max-height: 95%;
    transition: transform 0.3s ease;
    cursor: pointer;    object-fit: cover;

}

.video:hover .video-thumb {
    transform: scale(1.05);
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; 
    height: auto;
    pointer-events: none;

}

.video:hover img:not(.video-play-icon) {
    transform: scale(1.05);
}


.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lightbox-content {
    max-width: 80%;
    max-height: 80%;
}

.close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

.first-ever-grid-1, .first-ever-grid-2 {
    display: grid;
    height: 349px;    
    overflow: hidden;
}

.first-ever-grid-1 {
    grid-template-columns: 60% 40%;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;



}
.first-ever-grid-2 {
    grid-template-columns: 30% 40% 30%;
    margin-left:auto;
    margin-right:auto;

}

.first-ever-grid-item {
    position: relative;
    display: inline-block;
    overflow: hidden;
    object-fit: cover;
}

.first-ever-grid-item img { 
object-fit: cover;
width: 100%;     min-height: 349px; max-height:349px;

}

.first-ever-grid-item-text-left, .first-ever-grid-item-text-right {
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.first-ever-grid-item-text-right {
    background-color:black;
    color:  white;
}

.first-ever-grid-item-text-left {
    background-color: rgb(118, 251, 89);
    color:black;

}

.first-ever-grid-item-text-left h1, .first-ever-grid-item-text-left p, .first-ever-grid-item-text-right h1, .first-ever-grid-item-text-right p{
    padding:2% 6%;
}

.talk-range {
    display:flex;
    flex-direction: column;
    width:100%;
    background: black;
    margin-top:10px;
    text-align: center;
    padding:3% 0;

}

.talk-range-grid {
    display:grid;
    grid-template-columns: 45% 10% 45%;
    width:80%;
    margin-top:1%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
}
.talk-range-grid h2 {
    color:rgb(118, 251, 89);
    font-size: 6em;
    margin:0;
}
.talk-range-grid h1 {
    font-size: 4em;

}

.talk-range-grid p {
    color:white;
    font-size: 1.5em;
    margin:0;
    padding:0;
}

.talk-range h1, .talk-range p {
color:white;
padding:0 25%;
}


.batt-1 {
    width: 300px;
    margin:AUTO;
}

.capability-section {
    display:grid;
    grid-template-columns: 40% 60%;
    width:100%;
    margin: 3% auto;
}

.capability-right { 
    overflow: hidden;
}

.capability-left { 
    display:flex;
    overflow: hidden;
}

.capability-text {
    margin:auto;
    padding:5% 5%;


}

.capability-text h1 {
    color:Black;
    font-size: 3em;
    margin:0;
}

#capability-img, #tech-img-2 {
    margin:auto;
    width:80%;
    max-height:400px;
    object-fit: contain;


}

.tech-section {
    display:grid;
    grid-template-columns: 60% 40%;
    width:100%;
    height:auto;
    margin: 3% auto;
    padding:1% 0;
    background-color: whitesmoke;
}

.tech-right { 
    overflow: hidden;
}

.tech-left { 
    display:flex;
    overflow: hidden;
}

.tech-text {
    margin:auto;
    padding:5% 5%;



}

.tech-text h1 {
    color:Black;
    font-size: 3em;
    margin:0;
}

.brk-img {
    width:100%;
}

.lux-section {
    display:grid;
    grid-template-columns: 33% 32% 33%;
    width:100%;
    margin: 3% auto;
    column-gap: 1%;
    justify-content: center;
    align-content: center;
    text-align: center;}

.lux-content {
    display:flex;
    flex-direction: column;
    padding:0 2%;
    row-gap: 15px;
}

.lux-img{
    width:90%;
    margin:0 auto;
}

.towing-section {
    background-color: black;
    width:100%;
}

.towing-grid {
    display:grid;
    grid-template-columns: 50% 50%;
    width:100%;
}

.towing-flex {  
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color:white;
    padding: 5%;
}

.button-flex {
    display:grid;
    grid-template-columns: 50% 50%;
    column-gap: 3%;
    justify-content: center;
    align-items: center;
    margin-left:auto;
    margin-right:auto;
    padding:3%;
    background-color: rgb(118, 251, 89);
    


}   

.button-flex h1 {
    margin-bottom:5%;
}

.form-container {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width:95%;
    margin:0 auto;
    

}

.contest-button {
    display:flex;
    width:95%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

button {
    padding: 10px 20px;
    font-size: 1.5em;
    background-color:black;
    color:white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

input{
    padding: 10px 10px;
    font-size: 1.5em;
    width:70%;
    color:black;
    border: none;
    border-radius: 5px;
    margin:auto;

}

.contest-button button {
    width:100%;

}

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#updates_form {
    display:flex;
    flex-direction: row;
    width:100%;
}


@media screen and (max-width: 768px) {
    .head-content-grid { 
    position: inherit;   
    display: grid; 
    width:100%; 
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: 1%;
    padding-bottom:3%;
     }

     .head-container {
         height: 100vh;}

     .head-content-grid-item {
height:auto;
margin-top: -20px;
    
    }
    .head-content-grid-item-text {
        padding:0;
    }

    .video-gallery {    
        grid-template-columns: 100%;
        gap: 10px;
        margin-top:10px;
        height:min-content;
    }

    .talk-range-grid {
        display:grid;
        grid-template-columns: 100%;
        width:80%;
        margin-top:1%;
        margin-left:auto;
        margin-right:auto;
        text-align: center;
    }

    .first-ever-grid-1 {
        grid-template-columns: 100%;
        margin-top:10px;
        margin-left:auto;
        margin-right:auto;
    
    }

    .first-ever-grid-2 {
        grid-template-columns: 100%;
        margin-left:auto;
        margin-right:auto;
        height:auto;
    
    }

    .capability-section {
        display:grid;
        grid-template-columns: 100%;
        width:100%;
        margin: 3% auto;
    }

    .towing-grid {
        display:grid;
        grid-template-columns: 100%;
        width:100%;
    }
    .tech-section {
        display:grid;
        grid-template-columns: 100%;
        width:100%;
        height:auto;
        margin: 3% auto;
        padding:1% 0;
        background-color: whitesmoke;
    }

    .lux-section {
        display:grid;
        grid-template-columns: 100%;
        width:100%;
        margin: 3% auto;
        column-gap: 1%;
        justify-content: center;
        align-content: center;
        text-align: center;}

        #capability-img, #tech-img-2, #lux-img {
            margin:auto;
            width:100%;
            max-height:400px;
            object-fit: contain;
        
        
        }

        .towing-flex img {
            width: 80%;
            height: auto;
        }

        #ram-ev-head{
            width: 90%;
            height: auto;
            object-fit: contain;
            border-radius:0;
            border: 2px solid rgb(0, 204, 255);
            
        }

        #ram-rev-logo-2 {    
            width: 90%;
            height: auto; 
            margin:0;  
        }


        #ram-elc-head-logo, #ram-elc-head{  
            display:none;

        }

        .talk-range h1, .talk-range p {
            color:white;
            padding:0 10%;
        }  
        
        .button-flex {
            grid-template-columns: auto;
            row-gap: 16%;
            padding:8%;
            height:250px;
        }

        .button-flex h1 {
            margin-bottom:5%;
            font-size: 20px;;
        }
}