/*----------------------------------------------

[Responsive CSS]

Theme   : Lifegiver
Version : 1.0.0
Author  : mr.Root

----------------------------------------------*/

/*----------------------------------------------

[Content Index]

0. min-width: 768px and max-width: 991.98px
1. max-width: 767.98px
2. min-width: 576px and max-width: 767.98px
3. max-width: 575.98px



----------------------------------------------*/

/*----------------------------------------------
0. min-width: 768px and max-width: 991.98px
----------------------------------------------*/


@media (min-width: 768px) and (max-width: 991.98px) { 
    h1 {
        font-size: 36px;
    }
    .image-1 {
        max-width: 200px;
        max-height: auto;
        top: -50px;
        right: 0; 
        z-index: 1;
    }
    .image-2 {
        max-width: 200px;
        max-height: auto;
        bottom: -75px;
        left: 0px;
        z-index: 2;
    }
}


/*----------------------------------------------
1. max-width: 767.98px
----------------------------------------------*/
@media (max-width: 767.98px) { 
    h1 {
        font-size: 24px;
    }
    h2 {
        font-size: 24px;
    }
    p.text-bold-help{
        text-align: left;
        font-weight: normal;
    }
}



/*----------------------------------------------
2. min-width: 576px and max-width: 767.98px
----------------------------------------------*/
@media (min-width: 576px) and (max-width: 767.98px) { 
    .image-1 {
        max-width: 165px;
        max-height: auto;
        top: -25px;
        right: -50px; 
        z-index: 1;
    }
    .image-2 {
        max-width: 150px;
        max-height: auto;
        bottom: -35px;
        left: 0px;
        z-index: 2;
    }
}


/*----------------------------------------------
3. max-width: 575.98px
----------------------------------------------*/
@media (max-width: 575.98px) { 
    .cover-img-1 h2.text-white {
        margin-left: 20px;
        margin-bottom: 20px;
    }
    .cover-img-1 {
        background-position: center;
    }
    .cover-img-2 {
        background-image: url("../img/Image-5_1.jpg");
    }
    .cover-img-3 {
        background-image: url("../img/Image-6_1.jpg");
    }
    .cover-img-2 h2, .cover-img-3 h2 {
        color: #fff;
    }
    img.image-10 {
        width: 40%;
        height: auto;
        top: -20px;
        right: 10%;
        z-index: 1;
    }
    img.image-9 {
        width: 50%;
        height: auto;
        top: 40px;
        left: 5%;
        z-index: 2;
    }
   
}