/* Desktop */
@media screen and (min-width: 1280px ) {  
    .slideshow-container {
        width: 100%;
        height: 500px;
        overflow: hidden;
    }

    .slideshow-container .uk-slideshow-items {
        height: 500px;
    }

    .slider-cta-container {
        width: 100%;
        margin-top: -300px;
        position: relative;
        pointer-events: none;
        height: 300px;
    }

    .slider-cta-text {
        top: 100px;
        font-family: var(--font-family-main);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        color: #FFF;
        font-size: var(--font-size-cta);
        position: absolute;
        text-align: left;
        width: 100%;
        z-index: 100;
    }

    .slider-cta-container .slider-cta-container-gridient {
        width: 100%;
        height: 100px;
        bottom: 0;
        overflow-y: hidden;
        position: absolute;
    }

    .section-title {
        font-family: var(--font-family-main);
        font-size: var(--font-size-big);
    }

    .section-main .uk-container {
        padding-top: 70px;
        padding-bottom: 80px;
    }

    .section-main .main-text {
        font-family: var(--font-family-main);
        color: var(--color_dark);
        font-size: var(--font-size-mid);
        text-align: justify;
        text-indent: 30px;
    }

    .section-rent {
        background-color: var(--color_light);
        position: relative;
    }

    .section-rent .uk-container {
        padding-top: 40px;
        padding-bottom: 70px;
    }

    .section-rent .car-frame {
        border-radius: 5px;
        border: 1px solid var(--color_dark);
        height: 200px;
        transition: all 0.3s;
        margin-bottom: 28px;
    }

    .section-rent .car-frame:hover {
        transition: all 0.3s;
        box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 15px 0px;
    }

    .car-frame-img {
        height: 200px;
        width: 368px;
        border-radius: 5px 0 0 5px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat; 
        position: relative;
        overflow: hidden;
    }

    .price-tag {
        position: absolute;
        font-size: var(--font-size-normal);
        background-color: #000;
        color: #FFF;
        
        top: 80px;
        left: -24px;
        width: 150px;
        transform: rotate(-45deg); 
        transform-origin: top left; 
        
        text-align: center;
        font-weight: 500; 
        padding-top: 3px;
        padding-bottom: 3px; 
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    }

    .car-frame-details {
        padding-left: 30px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: #FFF;
        border-radius: 0 5px 5px 0;
        position: relative;
    }

    .car-name {
        font-size: var(--font-size-big);
        color: var(--color_dark);
    }

    .car-model-year {
        font-size: var(--font-size-normal);
        color: var(--color_dark);
        padding-left: 8px;
    }

    .car-description {
        font-size: var(--font-size-normal);
        color: var(--color_dark);
        line-height: 22px;
    }

    .car-options {
        position: absolute;
        bottom: 22px;
        left: 30px;
        font-size: var(--font-size-small);
        color: var(--color_mid);
        width: 560px;
        line-height: 14px;
    }

    .car-reservation-button {
        position: absolute;
        bottom: 20px;
        right: 40px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 8px;
        padding-bottom: 8px;
        border: 1px solid var(--color_dark);
        border-radius: 5px;
        background-color: var(--color_dark);
        color: #FFF;
        font-size: var(--font-size-small);
        transition: all 0.3s;
        cursor: pointer;
    }

    .car-reservation-button-disabled {
        position: absolute;
        bottom: 20px;
        right: 40px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 8px;
        padding-bottom: 8px;
        border: 1px solid var(--color_dark);
        border-radius: 5px;
        background-color: var(--color_dark);
        color: #EEE;
        font-size: var(--font-size-small);
    }

    .car-reservation-button:hover {
        color: var(--color_light);
        transition: all 0.3s;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px 0px;
    }

    .section-rent .section-rent-gridient {
        width: 100%;
        height: 120px;
        bottom: 0;
        overflow-y: hidden;
        position: absolute;
    }

    .section-map {
        background-color: #FFF;;
    }

    .section-map .uk-container {
        padding-top: 40px;
        padding-bottom: 70px;
    }

    .map-container {
        position: relative;
        padding-bottom: 56.25%; /* Aspect ratio: 16:9 */
        height: 0;
        overflow: hidden;
    }
      
    .map-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 5px;
    }

}


/* Mobile */
@media screen and (max-width: 1280px ) {  
    .slideshow-container {
        width: 100%;
        aspect-ratio: 16/8;
        overflow: hidden;
    }

    .slideshow-container .uk-slideshow-items {
        height: 100%;
        overflow: hidden;
    }

    .slider-cta-container {
        width: 100%;
        margin-top: -300px;
        position: relative;
        pointer-events: none;
        height: 300px;
    }

    .slider-cta-text {
        bottom: 30px;
        font-family: var(--font-family-main);
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        color: #FFF;
        font-size: var(--font-size-cta);
        position: absolute;
        text-align: left;
        width: 80%;
        z-index: 100;
        line-height: 40px;
    }

    .slider-cta-container .slider-cta-container-gridient {
        width: 100%;
        height: 100px;
        bottom: 0;
        overflow-y: hidden;
        position: absolute;
    }

    .section-title {
        font-family: var(--font-family-main);
        font-size: var(--font-size-big);
    }

    .section-main .uk-container {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .section-main .main-text {
        font-family: var(--font-family-main);
        color: var(--color_dark);
        font-size: var(--font-size-normal);
        text-align: justify;
        text-indent: 20px;
    }

    .section-rent {
        background-color: var(--color_light);
        position: relative;
    }

    .section-rent .uk-container {
        padding-top: 30px;
        padding-bottom: 40px;
    }

    .section-rent .car-frame {
        border-radius: 5px;
        border: 1px solid var(--color_dark);
        box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px 0px;
        margin-bottom: 20px;
    }

    .car-frame-img {
        height: 200px;
        width: 100%;
        border-radius: 5px 5px 0 0 ;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat; 
        position: relative;
        overflow: hidden;
    }

    .price-tag {
        position: absolute;
        font-size: var(--font-size-normal);
        background-color: #000;
        color: #FFF;
        
        top: 80px;
        left: -24px;
        width: 150px;
        transform: rotate(-45deg); 
        transform-origin: top left; 
        
        text-align: center;
        font-weight: 500; 
        padding-top: 3px;
        padding-bottom: 3px; 
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    }

    .car-frame-details {
        padding-left: 30px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: #FFF;
        border-radius: 0 0 5px 5px ;
        position: relative;
    }

    .car-name {
        font-size: var(--font-size-big);
        color: var(--color_dark);
    }

    .car-model-year {
        font-size: var(--font-size-normal);
        color: var(--color_dark);
        padding-left: 8px;
    }

    .car-description {
        font-size: var(--font-size-normal);
        color: var(--color_dark);
        line-height: 20px;
    }

    .car-options {
        margin-top:22px;
        font-size: var(--font-size-small);
        color: var(--color_mid);
        line-height: 14px;
    }

    .car-reservation-button-container {
        text-align: center;
    }

    .car-reservation-button {
        margin-top: 22px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 8px;
        padding-bottom: 8px;
        border: 1px solid var(--color_dark);
        border-radius: 5px;
        background-color: var(--color_dark);
        color: #FFF;
        font-size: var(--font-size-small);
        cursor: pointer;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px 0px;
    }

    .section-rent .section-rent-gridient {
        width: 100%;
        height: 80px;
        bottom: 0;
        overflow-y: hidden;
        position: absolute;
    }

    .section-map {
        background-color: #FFF;;
    }

    .section-map .uk-container {
        padding-top: 20px;
        padding-bottom: 50px;
    }

    .map-container {
        position: relative;
        padding-bottom: 56.25%; /* Aspect ratio: 16:9 */
        height: 0;
        overflow: hidden;
    }
      
    .map-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 5px;
    }

}