/* ==========================================================================
   #CARD
   ========================================================================== */
.card {
    overflow: hidden;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #fff;
}

.card-2 {
    /*-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: table;
    /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
    text-align: center;
    left: 38%;
    position: relative;
    border: 1px solid #999999;
    background-color: white;
}

    .card-2 .card-heading {
        background: url("../images/8.jpg") top center/cover no-repeat;
        width: 40%;
        display: table-cell;
    }

    .card-2 .card-body {
        display: table-cell;
        padding: 2%;
        padding-bottom: 2%;
        padding-top: 5%;
    }


.card-3 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: table;
    text-align: center;
    position: relative;
    border: 1px solid #999999;
    background-color: white;
}

    .card-3 .card-heading {
        background: url("../images/8.jpg") top center/cover no-repeat;
        width: 40%;
        display: table-cell;
    }

    .card-3 .card-body {
        display: table-cell;
        padding: 2%;
        padding-bottom: 4%;
        padding-top: 8%;
    }





/*===================================
          RESPONSIVE DESIGN 
=====================================*/
/*responsive site =
  https://www.browserstack.com/guide/what-are-css-and-media-query-breakpoints
  https://www.browserstack.com/guide/how-to-create-responsive-website
 */
@media (min-width: 1200px) {

    .card-2 {
        min-width: 400px;
        max-width: 600px;
        margin-top: 5%;
    }

    .card-3 {
        min-width: 400px;
        max-width: 600px;
        /*margin-top: 8%;*/
        left:33%;
    }

    .card-body h2 {
        font-weight: 700;
        font-size: 2.3rem;
    }

    .card-body h4 {
        font-weight: 500;
        font-size: 1.5rem;
    }

        .card-body h4 a {
            font-weight: 700;
            cursor: pointer;
            font-size: 1.5rem;
        }
}

@media (min-width: 992px) and (max-width:1199px) {

    .card-2 {
        min-width: 350px;
        max-width: 550px;
        margin-top: 5%;
        left:34%;
    }

    .card-3 {
        min-width: 350px;
        max-width: 550px;
        margin-top: 15%;
        left: 33%;
    }

    .card-body h2 {
        font-weight: 700;
        font-size: 2.1rem;
    }

    .card-body h4 {
        font-weight: 500;
        font-size: 1.3rem;
    }

        .card-body h4 a {
            font-weight: 700;
            cursor: pointer;
            font-size: 1.3rem;
        }
}

@media (min-width: 768px) and (max-width:991px) {

    .card-2 {
        min-width: 350px;
        max-width: 550px;
        margin-top: 8%;
        left: 28%;
    }

    .card-3 {
        min-width: 350px;
        max-width: 550px;
        margin-top: 18%;
        left: 33%;
    }

    .card-body h2 {
        font-weight: 700;
        font-size: 2.1rem;
    }

    .card-body h4 {
        font-weight: 500;
        font-size: 1.3rem;
    }

        .card-body h4 a {
            font-weight: 700;
            cursor: pointer;
            font-size: 1.3rem;
        }
}

@media (min-width: 600px) and (max-width:767px) {
  
    .card-2 {
        min-width: 320px;
        max-width: 520px;
        margin-top: 10%;
        left: 26%;
    }

    .card-3 {
        min-width: 320px;
        max-width: 520px;
        margin-top: 22%;
        left: 31%;
    }

    .card-body h2 {
        font-weight: 700;
        font-size: 2rem;
    }

    .card-body h4 {
        font-weight: 500;
        font-size: 1.1rem;
    }

        .card-body h4 a {
            font-weight: 700;
            cursor: pointer;
            font-size: 1.1rem;
        }
}

@media (min-width: 480px) and (max-width:599px) {
   
    .card-2 {
        min-width: 300px;
        max-width: 500px;
        margin-top: 10%;
        left: 20%;
    }


    .card-3 {
        min-width: 300px;
        max-width: 500px;
        margin-top: 30%;
        left: 25%;
    }

    .card-body h2 {
        font-weight: 700;
        font-size: 2rem;
    }

    .card-body h4 {
        font-weight: 500;
        font-size: 1.5rem;
    }

        .card-body h4 a {
            font-weight: 700;
            cursor: pointer;
            font-size: 1.5rem;
        }
}

@media (min-width: 360px) and (max-width:479px) {
    .card-2 {
        min-width: 288px;
        max-width: 477px;
        margin-top: 8%;
        left: 11%;
    }

    .card-3 {
        min-width: 288px;
        max-width: 477px;
        margin-top: 38%;
        left: 14%;
    }

    .card-body h2 {
        font-weight: 700;
        font-size: 2rem;
    }

    .card-body h4 {
        font-weight: 500;
        font-size: 1.5rem;
    }

        .card-body h4 a {
            font-weight: 700;
            cursor: pointer;
            font-size: 1.5rem;
        }
}

@media (min-width: 321px) and (max-width:359px) {

    .card-2 {
        min-width: 280px;
        max-width: 470px;
        margin-top: 42%;
        left: 2%;
    }

    .card-3 {
        min-width: 280px;
        max-width: 470px;
        margin-top: 42%;
        left: 12%;
    }

    .card-body h2 {
        font-weight: 700;
        font-size: 2rem;
    }

    .card-body h4 {
        font-weight: 500;
        font-size: 1.5rem;
    }

        .card-body h4 a {
            font-weight: 700;
            cursor: pointer;
            font-size: 1.5rem;
        }
}

@media (max-width: 320px) {

    .card-2 {
        min-width: 220px;
        max-width: 420px;
        margin-top: 45%;
        left: 1%;
    }

    .card-3 {
        min-width: 220px;
        max-width: 420px;
        margin-top: 45%;
        left: 20%;
    }

    .card-body h2 {
        font-weight: 700;
        font-size: 2rem;
    }

    .card-body h4 {
        font-weight: 500;
        font-size: 1.5rem;
    }

        .card-body h4 a {
            font-weight: 700;
            cursor: pointer;
            font-size: 1.5rem;
        }
}