:root{
    --primary-color-text: gainsboro;
    --primary-color-bg: rgb(243, 242, 242);
    --secondary-color-bg: #005266ca;
}
html, body {
  margin: 0;
  padding: 0;
}
#banner{
    width: 100%;
    height: 400px;
    margin: 0 !important;
    padding: 0 !important;
    background-image: url("images/bg_01.png");
    background-size: cover;
    background-position: center;
    .row{
        margin-left: 0;
        margin-right: 0;
    }
    h1, p{
        color: var(--primary-color-text);
        text-transform: uppercase;
    }
    p{
        margin: 0 120px;
        font-family: "Open Sans";
        font-size: 18px;
    }
    h1{
        margin: 40px 120px;
        font-size: 60px;
        font-weight: bold; 
        font-family: "Roboto Flex";
    }
}
.intro{
    margin-top: 40px;
    p{
        text-align: center;
        font-family: "Roboto Flex";
    }
    p.intro{
        display: block;
        width: 60%;
        margin: 0 auto;
        margin-bottom: 50px;
        font-size: 22px;
    }
    .round{
        width: 100px;
        height: 100px;
        margin: 0 auto;
        text-align: center;
        i{
            padding: 15px;
            font-size: 40px;
            border-radius: 20px;
            color: var(--secondary-color-bg);
            border: 4px solid var(--secondary-color-bg);
        }
    }
    h2{
        text-align: center;
        color: var(--secondary-color-bg);
    }
}
.separator{
    height: 50px;
    margin: 30px 0;
    background-color: var(--primary-color-bg);
}
.container{
    > h2:first-of-type{
        text-align: center;
        font-family: "Open Sans";
        color: var(--secondary-color-bg);
        margin: 30px 0;
    }
    > h2 + div:first-of-type{
        width: 50%;
        text-align: center;
        margin: 0 auto;
        font-size: 22px;
        font-family: 'Roboto Flex';
    }
}
.why-choose-us{
    display: flex;
    align-items: center;
    .illu{
        width: 100%;
        height: 400px;
        position: relative;
        div{
            position: absolute;
            img{
                display: block;
                width: 250px;
                margin: 25px auto;
                border-radius: 20px;
                box-shadow: 5px 5px 5px slategrey;
            }
        }
        div:first-of-type {
            top: 0;
            left: 70px;
        }
        div:last-of-type {
            bottom: 70px;
            right: 70px;
        }
    }
    .choose-txt{
        margin: 50px 0;
        border-left: 3px solid var(--secondary-color-bg);
        h3{
            text-align: center;
            font-family: "Open Sans";
            color: var(--secondary-color-bg);
            margin: 20px 0;
            i{
                font-size: 20px;
            }
        }
        p{
            text-align: center;
        }
        blockquote{
            width: 80%;
            margin: 0 auto;
            padding: 0 15px;
            text-align: center;
        }
    }
}
footer.my-footer{
    height: auto;
    margin-top: 50px;
    background-color: #002d3c;
    .copy{
        padding-top: 50px;
        text-align: center;
        h3{
            color: var(--primary-color-text);
        }
        .link{
            padding: 20px 0;
            a{
                color: var(--primary-color-text);
                i{
                    font-size: 30px;
                }
                &:hover{
                    color: var(--secondary-color-bg);
                }
            }
        }
    }
    p{
        margin-top: 25px;
        color: var(--primary-color-text);
    }
    img{
        width: 100px;
    }
}