.section {
    position: relative;
    width: 100%;
   /* display: block;*/
}

.full-height {
    min-height: 85vh;
}

.over-hide {
    overflow: hidden;
}

.padding-tb {
    padding: 100px 0;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

.checkbox:checked + label,
.checkbox:not(:checked) + label {
    position: relative;
    cursor: pointer;
    margin: 0 auto;
    text-align: center;
    margin-right: 6px;
    margin-left: 6px;
   /* display: inline-block;*/
    width: 50px;
    height: 50px;
    border: 3px solid #bdc3c7;
    background-size: cover;
    background-position: center;
   /* box-sizing: border-box;*/
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background-image: url('../Images/cnt10.png');
    animation: border-transform 6s linear infinite alternate forwards;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}

.checkbox.scnd + label {
    background-image: url('../Images/S20.png');
}

.checkbox.thrd + label {
    background-image: url('../Images/S22.png');
}

.checkbox.foth + label {
    background-image: url('../Images/s23.png');
}


.checkbox:checked + label {
    box-shadow: 0 8px 25px 0 rgba(16,39,112,.3);
    transform: scale(1.3);
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}

@keyframes border-transform {
    0%,100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }

    14% {
        border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    }

    28% {
        border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }

    42% {
        border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    }

    56% {
        border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    }

    70% {
        border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    }

    84% {
        border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    }
}

.slider-height-padding {
    padding-top: 440px;
}

.card-style {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    z-index: 100;
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: 'Adobe Devanagari';
    font-size: 16px;
}

    .card-style li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: block;
        z-index: 100;
        padding: 0;
        margin: 0;
        list-style: none;
        height: 400px;
        border: 5px solid #bdc3c7;
        background-size: cover;
        background-position: center;
        background-image: url('../Images/cnt10.png');
        border-radius: 50%;
        box-sizing: border-box;
        
        /* font-weight: 900;*/
        font-family: 'Adobe Devanagari';
        font-size: 16px;
        letter-spacing: 2px;
        line-height: 2.7;
        color: darkblue;
        writing-mode: horizontal-tb;
        opacity: 0;
        pointer-events: none;
        box-shadow: 0 8px 25px 0 rgba(16,39,112,.1);
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }


        .card-style li:nth-child(1) {
            background-image: url('../Images/cnt10.png');
           
        }

        .card-style li:nth-child(2) {
            background-image: url('../Images/S20.png');
        }

        .card-style li:nth-child(3) {
            background-image: url('../Images/s22.png');
        }

        .card-style li:nth-child(4) {
            background-image: url('../Images/s23.png');
        }


.checkbox.frst:checked ~ .card-style li:nth-child(1) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.checkbox.scnd:checked ~ .card-style li:nth-child(2) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.checkbox.thrd:checked ~ .card-style li:nth-child(3) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}

.checkbox.foth:checked ~ .card-style li:nth-child(4) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}





@media (max-width: 767px) {
    .slider-height-padding {
        padding-top: 340px;
    }

    .card-style li {
        height: 300px;
        font-size: 16px;
        letter-spacing: 1px;
    }
}

@media (max-width: 575px) {
    .slider-height-padding {
        padding-top: 240px;
    }

    .card-style li {
        height: 200px;
    }
}


/*Text Hover Effects*/

.containers {
    width: 1200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 15px;
    margin: 0 auto;
}

.card {
    position: relative;
    width: 550px;
    height: 400px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 15px 60px rgba(0,0,0, .5);
    border-radius: 15px;
}

    .card .face {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .card .face.face1 {
            box-sizing: border-box;
            padding: 5px;
        }

            .card .face.face1 h2 {
                margin: 0;
                padding: 0;
            }

            .card .face.face1 .content {
                font-family: Adobe Devanagari;
                font-size: 16px;
                margin: 0;
                padding: 0 0 5px 0;
                font-family: 'Adobe Devanagari';
                font-size: 18px;
                letter-spacing: 2px;
                word-spacing: 6px;
            }

        .card .face.face2 {
            /* background: #111;*/
            transition: 0.5s;
        }

    .card:nth-child(1) .face.face2 {
        background: linear-gradient(45deg, #3503ad, #f7308c);
        border-radius: 15px;
    }

    .card:nth-child(2) .face.face2 {
        background: linear-gradient(45deg, #ccff00, #09afff);
        border-radius: 15px;
    }

    .card:nth-child(3) .face.face2 {
        background: linear-gradient(45deg, #e91e63, #ffeb3b);
        border-radius: 15px;
    }

    .card:hover .face.face2 {
        height: 60px;
        border-radius: 0 0 15px 15px;
    }

    .card .face.face2:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: rgba(255,255,255, 0.1);
        border-radius: 15px 0 0 15px;
    }

    .card .face.face2 h2 {
        margin: 0;
        padding: 0;
        font-size: 20px;
        color: #fff;
        transition: 0.5s;
        text-shadow: 0 2px 5px rgba(0,0,0, .2);
    }

    .card:hover .face.face2 h2 {
        font-family: Adobe Devanagari;
        font-size: 16px;
        font-style: normal;
    }

/*Overlay Text on Image*/
.container {
    position: relative;
    width: 100%;
}

.image {
    opacity: 1;
    /*    display: block;*/
    width: 100%;
    height: 400px;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.containers:hover .image {
    opacity: 0.3;
}

.containers:hover .middle {
    opacity: 1;
}

.TruckText {
    /* background-color: #04AA6D;*/
    color: darkblue ;
    font-family: 'Adobe Devanagari';
    font-size: 15px;
    text-align: left;
    margin-top: 1%;
    padding: 3px 12px;
    /*  word-spacing: 6px;*/
    top: 0;
    width: 700px;
    height: 320px;
    /*background: hsl(195, 53%, 79%,0.7);*/
    background: hsl(0, 0%, 100%,0.9);
}
.figcaption {
    display: block;
    width: 420px;
    margin-top: 2%;
    padding: 3px 12px;
    font-weight: bold;
    font-family: Adobe Devanagari;
    font-size: 26px;
    line-height: 1.6;
    letter-spacing: 2px;
    word-spacing: 6px;
    text-align: center;
    align-items:center;
    position: absolute;
    top: -20px;
    left: 35%;
    /*color: var(--white-1);*/
    color: darkblue;
    /*background: hsla(var(--hue), 25%, 10%, .5);*/
    background: hsl(195, 53%, 79%,0.6);
}
.figcaption1 {
    display: block;
    width: 640px;
    margin-top: 2%;
    padding: 3px 12px;
    font-weight: bold;
    font-family: Adobe Devanagari;
    font-size: 26px;
    line-height: 1.6;
    letter-spacing: 2px;
    word-spacing: 6px;
    text-align: center;
    align-items: center;
    position: absolute;
    top: -20px;
    left: 25%;
    /*color: var(--white-1);*/
    color: darkblue;
    /*background: hsla(var(--hue), 25%, 10%, .5);*/
    background: hsl(195, 53%, 79%,0.6);
}