﻿

    .home-body {
        top: 0;
        object-fit: cover;
        z-index: -1;
        position: fixed;
        filter: grayscale(50%);
        opacity: 5%;
    }

    .main-hero {
        margin-top: 20px;
    }

    .hero {
        position: relative;
        margin: auto;
        font-family: Arial, Helvetica, sans-serif;
        width: 85%;
        height: 90vh;
        background-color: #fff;
        background-position: center;
        background-size: 35em;
        background-attachment: fixed;
        background-repeat: no-repeat;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        /* box-shadow: inset -20px 10px 25px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: inset -20px 10px 25px rgba(0, 0, 0, 0.3);
            -webkit-box-shadow: inset -20px 10px 25px rgba(0, 0, 0, 0.3);*/
    }

    .hero-content {
        color: #696969;
        background-image: linear-gradient(to bottom, #fff, #CFCFCF);
        padding: 8px 24px;
        border-radius: 50px;
        max-width: 80%;
        text-align: center;
        box-shadow: -20px 10px 25px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: -20px 10px 25px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: -20px 10px 25px rgba(0, 0, 0, 0.3);
    }

        .hero-content h2 {
            letter-spacing: 4px;
            font-size: 40px;
            font-weight: bold;
        }

    .hero p {
        font-size: 15px;
        letter-spacing: 2px;
    }

    .news-heading {
        position: relative;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70%;
        border-bottom-style: solid;
        border-image: linear-gradient(to right, #eee, #317e74, #eee 100%) 1;
        margin-bottom: 30px;
        margin-top: 5vh;
    }

        .news-heading h3 {
            letter-spacing: 3px;
        }

    .news-section {

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .testimonials-section {
       
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
       
    }

.testimonial {
    /*  display: grid;
    place-items: center;
*/
    height: 70vh;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 10px;
    /* padding-left: 20px;
    padding-right: 20px;*/
    text-align: center;
    width: 50vh;
    color: #fff;
    overflow: auto;
    background-image: linear-gradient(to bottom, #317e74, #235B54);
    box-shadow: -10px 10px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -10px 10px 8px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: -10px 10px 8px rgba(0, 0, 0, 0.3);
}
    .testimonial p {
        margin-top: 1px;
       
        padding-left: 20px;
        padding-right: 20px;
    }
    .lnk-more a {
        text-decoration: none;
        color: #fff;
    }

    .lnk-more {
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 0px;
    }

    .lnk-u {
        border-bottom: 1px solid #eee;
        position: relative;
        margin: auto;
        width: 0px;
        bottom: 0px;
    }

    .lnk-more a:hover {
        text-decoration: solid;
        color: lightgreen;
    }

    .testimonial:hover .lnk-u {
        width: 50%;
        transition: 0.3s ease;
    }

    .prog-icon {
        background-color: #fff;
        padding: 8px;
        margin: 5px;
        border-radius: 50px;
        width: 70px;
    }

    .prog-icon {
        filter: grayscale(100%);
    }

    .bottom-banner {
        position: relative;
        margin: auto;
        margin-top: 35px;
    }



@media only screen and (max-width: 600px) {
  
    .hero {
        
        /*background-attachment: local;*/
        width: 100%;
        height: 35em;
        /*background-size: contain;*/
    }

    .hero-content {
        max-width: 100%;
    }

    .main-hero {
        /*max-width: 100%;*/
        /*background-size: contain;*/
       
    }

    .testimonials-section {
       
        display: grid;
        place-items: center;
       
    }

    .testimonial {
             
        margin-top: 15px;
        padding: 10px;
        width: 80%;
       
    }
}


@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* Apply tablet-specific styles here */
    .hero {
        /*background-attachment: local;*/

        width: 100%;
        height: 35em;
        /*background-size: contain;*/
    }

    .hero-content {
        max-width: 100%;
    }

    .main-hero {
        /*max-width: 100%;*/
        /*background-size: contain;*/
    }

    .testimonials-section {
      
        display: grid;
        place-items: center;
    }

    .testimonial {
        margin-top: 15px;
        padding: 10px;
        width: 50vh;
    }
}

@media only screen and (min-width: 1025px) {
    /* Apply desktop-specific styles here */
    .testimonials-section {        
      width:100%;

    }

    .testimonial {
        margin-top: 15px;
        padding: 10px;
        width: 50vh;
        overflow-y:unset;

    }
}