:root{
    --primary-color-text: gainsboro;
    --primary-color-bg: rgb(243, 242, 242);
    --secondary-color-bg: #005266ca;
}
body{
    margin: 0;
    padding: 0;
}
#banner{
    width: 100%;
    height: 450px;
    background-image: url("images/bg_01.png");
    background-size: cover;
    background-position: center;
    h1, p{
        color: var(--primary-color-text);
        text-transform: uppercase;
    }
    p{
        margin: 0 50px;
        font-family: "Open Sans";
        font-size: 18px;
    }
    h1{
        margin: 40px 50px;
        font-size: 60px;
        font-weight: bold; 
        font-family: "Roboto Flex";
    }
}
.intro{
    margin: 40px 0;
    p{
        text-align: center;
        font-family: "Roboto Flex";
        font-size: 18px;
    }
    .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;
    background-color: var(--primary-color-bg);
}
.why-choose-us{
    img{
        display: block;
        width: 250px;
        margin: 25px auto;
        border-radius: 20px;
        box-shadow: 5px 5px 5px slategrey;
    }
    h2, h3{
        text-align: center;
        font-family: "Open Sans";
        color: var(--secondary-color-bg);
        i{
            font-size: 20px;
        }
    }
    p{
        text-align: center;
    }
    blockquote{
        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;
    }
}