/*Background image from top page*/
.container-image-main{
    background-image: url(../image/home-page.jpg);
   
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height:40vh;
    object-fit: cover;
}
.active:hover{
 color: #BE5804 !important;
}

/*Classes Imagens center and fit it */
.container-img-class{
    width: 150px;
    height: 150px;
    text-align: center;
    object-fit: cover;
 
}
/*hold menu on top of the page*/
.fixar{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    background-color: black !important;
}
/*container with a price and join now btn*/
.window-top-up{
    width: 60vw;
    height: auto;
    background-color: #e97b1a83;    
}
/*text position and size from container with price and join btn*/
.font-promotion{
    font-size: 100%;
    text-align: center;
}
/*head style from classes container*/
.hd-classes{
    text-decoration: none;
    color: white;
}
/*class to blue background color*/
.blue-color{
    background-color: #0872C9;
}
/*class to orange background color*/
.ora-color{
    background-color: #BE5804;
}
/* margin top to put all contain down 56 pixel because navbar was cutting the content*/
.main-marg{
    margin-top: 56px !important;
}
/* just to make my hover social midias more fun and attractive*/
footer a:hover i {
    transform: rotate(-15deg) scale(1.5);
}
/*make my main links to navgation bar on footer be orange when hover it*/
.link-footer-ora:hover{
    color: #BE5804;
}
/*I use body to set a font family that I choose*/
body{
    font-family:sans-serif, serif;
}
/*just to make marge in locations details*/
.location-items{
    border-top: 1px solid black;
    padding: 10px 0;
    height: 95px;
}
/*style to a thank you page is a main container imag*/
.confirm-main-contant{
    background-image: url("../image/home-page.jpg");
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/*link to back to home in a thank you page*/
.confirm-main-link-home{
    width: 100vw;
    height: auto;
    background-color: #be58048f;
    margin: auto;
}
/*centralize the text content of thank you page*/
.text-position{
    text-align: justify !important;
}





/* the same class as before but some changes to tablets size*/
@media only screen and (min-width: 768px) {
.container-image-main{
        width: 100%;
        height: 40vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-image: url(../image/home-page.jpg);
}
#howtofind{
    margin-top: 0px;
}
.md-textarea{
    height: 300px;
}
.map-container{
    width: 100%;
    height: 550px;
}
.window-top-up{
    width: 50vw;
    height: auto;
    background-color: #e97b1a83;
    margin-top: 40%;
    float:right;
    margin-bottom:10px !important ;
}
.link-classes{
    text-decoration: none;
    color: white;
}
.link-classes:hover{
    color: #e9791a;
}
.font-promotion{
    font-size: 200%;
    text-align: center;
}
.location-items{
    border: none;
}

}
/* the same class as before but some changes to big tablets size*/
@media only screen and (min-width: 992px) {
    .container-image-main{
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        background-image: url(../image/home-page.jpg);
    }
    .link-classes{
        text-decoration: none;
        color: white;
    }
    .link-classes:hover{
        color: #e9791a;
    }
    .window-top-up{
        width: 50vw;
        height: auto;
        background-color: #e97b1a83;
        float: right;
    }
    .font-promotion{
        font-size: 200%;
        text-align: center;
    }
}
/* the same class as before but some changes to laptop and desktop size*/
@media only screen and (min-width: 1400px) {
    .container-image-main{
        width: 100%;
        height: 70vh;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        background-image: url(../image/home-page.jpg);
    }
    .link-classes{
        text-decoration: none;
        color: white;
    }
    .link-classes:hover{
        color: #e9791a;
    }
    .window-top-up{
        width: 50vw;
        height: auto;
        background-color: #e97b1a83;
        float: right;
    }
    .font-promotion{
        font-size: 300%;
        text-align: center;    
    }
    #contactus{
        font-size: 150%;
    }
}