@import url("../../../global/css/main.css");

@media 
(min-width: 672px) 
and (max-width: 990px) {
    section {
        position: relative;
        width: 100%;
    }
    
    .section-1 {
        position: relative;
        margin-top: 4rem;
        height: 15rem;
        overflow: hidden;
        background-color: white;
    }

    .owl-carousel {
        position: relative;
        height: 15rem;
    }

    .owl-carousel .owl-item {
        position: relative;
        height: 15rem;
        display: flexbox;
    }

    .owl-nav .owl-next {
        position: absolute;
        right: 0;
        width: 2rem;
        height: 13rem;
        line-height: 13rem;
        background-color: transparent !important;
        transition: .3s;
    }

    .owl-nav .owl-prev {
        position: absolute;
        left: 0;
        width: 2rem;
        height: 13rem;
        line-height: 13rem;
        background-color: transparent !important;
        transition: .3s;
    }
    
    .section-2 {
        margin-top: 3rem;
        height: 73rem;
    }
    
    .section-2 .image-box {
        position: absolute;
        top: 52%;
        left: 10%;
        width: 80%;
        height: 45%;
        overflow: hidden;
    }
    
    .section-2 .image-box img {
        position: relative;
        width: 100%;
        object-fit: cover;
        object-position: top center;
        top: -3rem;
    }
    
    .section-2 .text-box {
        position: absolute;
        top: 2%;
        left: 15%;
        width: 70%;
        height: 60%;
        overflow: hidden;
    }
    
    .section-2 .text-box .main-headline {
        position: relative;
        text-align: start;
        margin-top: 1rem;
        /* margin-left: 10%; */
        margin-bottom: 1.5rem;
        font-size: 3rem;
        color: var(--primary);
    }
    
    .section-2 .text-box p {
        position: relative;
        /* margin-left: 10%; */
        margin-bottom: 1rem;
        text-align: justify;
        max-width: 100%;
        font-size: 1.1rem;
    }
    
    .section-2 .text-box .sub-headline {
        position: relative;
        text-align: center;
        top: .7rem;
        font-weight: 500;
        color: var(--secondary);
    }
    
    .section-3 {
        height: 65rem;
    }
    
    .section-3 .text-box {
        position: absolute;
        top: 5%;
        left: 0;
        width: 100%;
        height: 60%;
    }
    
    .section-3 .text-box .main-headline {
        position: relative;
        text-align: center;
        margin-top: 1rem;
        font-size: 3rem;
        color: var(--primary);
    }
    
    .section-3 .text-box table{
        position: relative;
        margin-top: 4rem;
        left: 15%;
        width: 70%;
        border-collapse: collapse;
        background-color: bisque;
        transition: .2s ease;
        -webkit-transition: .2s ease;
        -moz-transition: .2s ease;
        -ms-transition: .2s ease;
        -o-transition: .2s ease;
    }
    
    .section-3 .text-box table tr {
        height: 3rem;
        transition: .2s ease;
        -webkit-transition: .2s ease;
        -moz-transition: .2s ease;
        -ms-transition: .2s ease;
        -o-transition: .2s ease;
    }
    
    .section-3 .text-box table tr:hover {
        cursor: pointer;
        background-color: rgb(255, 214, 164);
        height: 3.5rem;
        font-size: 1.4rem;
    }
    
    .section-3 .text-box table tr:hover table {
        margin-top: 4.5rem;
    }
    
    .section-3 .text-box table td {
        text-align: center;
        font-size: 1.2rem;
        border: 2px solid white;
    }
    
    .section-3 .text-box table .col-left {
        background-color: rgb(255, 196, 124);
        color: white;
    }
    
    .section-3 .text-box .termin-btn {
        position: absolute;
        bottom: 7rem;
        left: 25%;
        width: 50%;
        height: 3rem;
        border: none;
        border-radius: 7px;
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        -ms-border-radius: 7px;
        -o-border-radius: 7px;
        background-color: var(--primary);
        color: white;
        font-size: 1rem;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        transition: .2s ease;
        -webkit-transition: .2s ease;
        -moz-transition: .2s ease;
        -ms-transition: .2s ease;
        -o-transition: .2s ease;
    }
    
    .section-3 .text-box .termin-btn:hover {
        cursor: pointer;
        background-color: var(--primary-dark);
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    }
    
    .section-3 .image-box {
        position: absolute;
        top: 65%;
        left: 10%;
        width: 80%;
        height: 40%;
        overflow: hidden;
    }
    
    .section-3 .image-box img {
        position: relative;
        width: 100%;
        object-fit: fill;
        object-position: left top;
        object-position: 0 -10rem;
    }
}