/* Extra Small Devices (Phones) */
@media only screen and (max-width: 576px){
    #slot .banner{
        height: auto;
    }
    #slot .banner-form-title h2{
        font-size: 1rem;
        margin: 0;
    }
    #slot .banner-form {
        background-color: white;
        border-radius: .0rem .0rem .60rem .60rem;
        padding: 1rem 1rem;
        border: 2px solid transparent;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        transition: 0.4s ease-in-out;
    }
    #slot .img-card{
        position: relative;
        border-radius: .50rem;
        height: 300px;
        overflow: hidden;
    }
    #slot .hidden-cont{
        position: absolute;
        bottom: 0;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1.50rem;
        color: white;
        transform: translateY(71%);
        transition: transform 0.4s ease-in-out;
    }
    #slot .hover-imgcard{
        position: relative;
        width: 99%;
        padding: 1.50rem 1rem;
        border: 1px solid var(--dark-clr);
        border-radius: .50rem;
        background-color: var(--card-clr);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        overflow: hidden;
    }
    #slot .scroller-height{
        height: auto;
        overflow-y: visible;
    }
    #slot .side-buttons {
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        gap: .50rem;
    }
    #slot .side-content {
        background-color: var(--card-clr);
        padding: 1.50rem;
        border-radius: .50rem;
    }

    #slot .solnicon {
        width: 90%;
        transform: scale(1.0);
        transition: transform 0.4s ease-in-out;
    }

    #slot .max-sec {
        display: flex;
        flex-wrap: nowrap;
        justify-content: start;
        overflow-x: scroll;
        padding: 0;
        gap: 1rem;
        margin: 2rem 0;
    }
    
    #slot .devprocess{
        position: relative;
        background-color: var(--card-clr);
        padding: 1.50rem 2.25rem;
    }
    #slot .num {
        position: absolute;
        top: -10%;
        left: -9%;
        width: 60px;
        height: 60px;
        font-size: 1.50rem;
        font-weight: bolder;
        border: 0.50rem solid white;
        /* text-align: center; */
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--dark-clr);
        color: white;
        border-radius: 6rem;
    }

    #slot .title {
        display: flex;
        flex-direction: column;
        background-color: var(--card-clr);
        border: 2px solid var(--dark-clr);
        color: black;
        padding: .85rem 0rem;
        cursor: pointer;
        border-radius: 1rem;
        font-size: 1rem;
        font-weight: 600;
        text-align: center;
        height: 60px;
        overflow: hidden; 
        position: relative;
        transition: height 0.4s ease;
        margin: 1rem 0;
    }

}

/* Small Devices (Tablets) */
@media only screen and (min-width: 577px) and (max-width: 768px){
    #slot .banner{
        height: auto;
    }
    #slot .hover-imgcard{
        position: relative;
        width: 47%;
        padding: 1.50rem 1rem;
        border: 1px solid var(--dark-clr);
        border-radius: .50rem;
        background-color: var(--card-clr);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        overflow: hidden;
    }
    #slot .scroller-height{
        height: auto;
        overflow-y: visible;
    }
    #slot .max-sec {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        padding: 0;
        gap: .50rem;
        margin: 2rem 0;
    }
    #slot .side-buttons {
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        gap: .50rem;
    }
    #slot .devprocess{
        position: relative;
        background-color: var(--card-clr);
        padding: 1.50rem 2.50rem;
    }
}

/* Medium Devices (Laptops, Smaller Desktops) */
@media only screen and (min-width: 769px) and (max-width: 992px){
    #slot .banner{
        height: auto;
    }
    #slot .hidden-cont{
        position: absolute;
        bottom: 0;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        color: white;
        transform: translateY(70%);
        transition: transform 0.4s ease-in-out;
    }

    #slot .hover-imgcard{
        position: relative;
        width: 48%;
        padding: 1.50rem 1rem;
        border: 1px solid var(--dark-clr);
        border-radius: .50rem;
        background-color: var(--card-clr);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        overflow: hidden;
    }
    #slot .side-buttons {
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        gap: .50rem;
    }
    .translate30 {
        transform: translateY(0%);
    }
    .translate60 {
        transform: translateY(0%);
    }
    .translate90{
        transform: translateY(0%);
    }
    .translate110{
        transform: translateY(0%);
    }
    .translate120{
        transform: translateY(0%);
    }

}

@media only screen and (min-width: 993px) and (max-width: 1200px) {
    #slot .hidden-cont{
        position: absolute;
        bottom: 0;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        color: white;
        transform: translateY(68%);
        transition: transform 0.4s ease-in-out;
    }

    #slot .hover-imgcard{
        position: relative;
        width: 31%;
        padding: 1.50rem 1rem;
        border: 1px solid var(--dark-clr);
        border-radius: .50rem;
        background-color: var(--card-clr);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        overflow: hidden;
    }
    #slot .devprocess{
        position: relative;
        background-color: var(--card-clr);
        padding: 1.50rem 2.75rem;
    }
    
}

@media only screen and (min-width: 1201px) and (max-width: 1399px) {
    #slot .hidden-cont{
        position: absolute;
        bottom: 0;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        color: white;
        transform: translateY(65%);
        transition: transform 0.4s ease-in-out;
    }

    #slot .hover-imgcard{
        position: relative;
        width: 31%;
        padding: 1.50rem 1rem;
        border: 1px solid var(--dark-clr);
        border-radius: .50rem;
        background-color: var(--card-clr);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        overflow: hidden;
    }
    
}

/* Extra Large Devices (4K Monitors, TVs) */
@media only screen and (min-width: 1441px) and (max-width: 1920px){
    #slot .hidden-cont{
        position: absolute;
        bottom: 0;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1.50rem;
        color: white;
        transform: translateY(71%);
        transition: transform 0.4s ease-in-out;
    }
}

@media only screen and (min-width: 1921px){
    
}