:root{
    --light-gray: #A9A9AD;
    --gray: #4D5058;
    --dark-blue: #1E3D6B;
    --dark: #1E1E1E;
    --white: #FFFFFF;
}

body{
    backgoudn-color: red;
    font-family: 'Montserrat', Arial;
    color: var(--dark);
    font-size: 1.1rem;
}

.color-light-gray{
    color: var(--light-gray);
}

.color-gray{
    color: var(--gray);
}

.color-dark-blue{
    color: var(--dark-blue);
}

.color-white{
    color: var(--white);
}

.sub-title{
    font-size: 24px;
    font-weight: 700;
}

.title{
    font-size: 80px;
    font-weight: 900;
}

.title-section{
    font-size: 40px;
    font-weight: 700;
}

.title-service{
    font-size: 26px;
    line-height: 28px;
    font-weight: 700;
}

.title-service span{
    color: var(--dark-blue);
}

.text-description{
    font-size: 24px;
    font-weight: 400;
}

.carousel-caption{
    top: 30%;
}
.box-text{
    max-width: 277px;
}
.contact{
    background-color: var(--dark-blue);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}
.contact input[type="text"],
.contact input[type="tel"],
.contact input[type="email"], 
.contact textarea {
    background-color: transparent;
    border: 1px solid #FFFFFF;
    color: var(--white);
    border-radius: 5px;
    padding: 8px 12px;
    width: 100%;
}
.box-button{
    width: 170px;
}
.contact input[type="submit"]{
    width: 100%;
    border: none;
    background-color: var(--gray);
    color: var(--white);
    border-radius: 5px;
    padding: 8px 12px;
}
.contact input[type="text"]::placeholder,
.contact input[type="tel"]::placeholder,
.contact input[type="email"]::placeholder, 
.contact textarea::placeholder {
    color: var(--white);
}
footer{
    background-color: var(--gray);
    font-size: 12px;
}

/*
2560x1080
1920x1080
1440x900
1366x768
1280x1024
1024x768
960x600
800x480
768x1024
720x1280
480x800
375x667
360x640
320x480
*/

@media only screen and (min-width: 1920px){
}

@media only screen and (max-width: 1920px){
}

@media only screen and (max-width: 1440px){
}

@media only screen and (max-width: 1366px){
}

@media only screen and (max-width: 1280px){
}

@media only screen and (max-width: 1024px){
}

@media only screen and (max-width: 960px){
}

@media only screen and (max-width: 800px){
}

@media only screen and (min-width: 769px){
}

@media only screen and (min-width: 768px){
}

@media only screen and (max-width: 767px){
}

@media only screen and (max-width: 768px){
    .box-text {
        max-width: 100%;
    }
    .carousel-caption{
        top: 15%;
        background-color: rgb(0, 0, 0, 0.5);
        padding: 15px;
        border-radius: 5px;
    }
    .carousel-caption .h5{

    }
    .carousel-caption .title {
        font-size: 40px;
        line-height: 40px;
    }
    .carousel-caption .text-description {
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
    }
}

@media only screen and (max-width: 720px){
}

@media only screen and (max-width: 667px){
}

@media only screen and (max-width: 640px){
}

@media only screen and (max-width: 480px){
}

@media only screen and (max-width: 375px){
}

@media only screen and (max-width: 360px){
}

@media only screen and (max-width: 320px){
}