/* 
Theme Name: Be Bold - Drone
Text Domain: BeBold
Version: 1.0
Description: Custom Be Bold Theme
Tags: responsive
Author: Paolo Armentano
Author URI: https://be-bold.co.uk/

*/

:root {
    --yellow: #F2C600;
}

* {
    font-family: 'montserrat';
}

.h1 {
    background-color: black;
    color: white;
}

.yellow-btn {
    background-color: var(--yellow);
    padding: 10px 12px;
    color: black;
    border-radius: 5px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
}

.yellow-btn:hover {
    background-color: black;
    color: white;
}

.section-2 {
    background-color: #EDEDEA;
    display: flex;
    padding: 3em 9em;
}

.black-btn {
    background-color: black;
    padding: 10px 12px;
    color: white;
    border-radius: 5px;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
}

.black-btn:hover {
    color: var(--yellow);
}

.david-img {
    height: 370px;
    width: 370px;
}

.section-3 {
    padding: 3em 9em;
    text-align: center;
}

.section-4 {
    padding: 3em 9em;
    background-image: url(https://be-bold.co.uk/wp-content/uploads/Drone6.jpeg?id=26935);
}

.inner-section-4{
    padding: 3em;
    width: 60%;
    background-color: rgba(0,0,0,0.5);
}

.inner-section-4 h2 {
    background-color: var(--yellow);
    color: black;
}

.inner-section-4 p {
    color: white;
}

.section-5 {
    display: flex;
    text-align: center;
}

.card-1 {
    background-image: url(https://be-bold.co.uk/wp-content/uploads/Drone9.jpeg?id=26938);
    color: white;
    padding: 2em 1em;
}

.card-2 {
    background-image: url(https://be-bold.co.uk/wp-content/uploads/Be-Bold-background-colours.jpg?id=25629);
    padding: 2em 1em;
}

.card-3 {
    background-image: url(https://be-bold.co.uk/wp-content/uploads/Drone2.jpg?id=26930);
    padding: 2em 1em;
    color: white;
}

.section-6 {
    background-color: #ededed;
}

.section-7-title {
    padding: 3em 9em;
    font-weight: bold;
    text-align: center;
}

footer {
    background-color: black;
    height: 500px;
    padding: 50px;
}

.footer-container {
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
}

footer a {
    color: white;
}

footer a:hover {
    color: var(--yellow);
    text-decoration: none;
}