:root {
    --Primary-color: #2980B9;
    --Secondary-color: rgb(252, 252, 40);
    --Tetiary-color: rgba(21, 255, 0, 0.856);
    --Primary-font: Open Sans;
    --Secondary-font: Montserrat;
    --Tetiary-font: Mitr;
    --Extra-font: Courgette;
    --Extrastyle-font: ;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.guard {
    width: 100%;
    background-color: transparent;
    text-align: left;
    margin-left: 0%;
}
.main{
    width: 100%;
    background-color: transparent;
    margin-top: 0px;
}
.text {
    margin-top: -40px;
    margin-left: 35px;
    font-size: 20px;
    background-color: transparent;
}
.guard img {
    width: 70%;
    height: auto;
}
.guard h2 {
    color: var(--Primary-color);
    font-size: 20px;
    font-family: var(--Secondary-font);
    text-align: left;
    padding: 10px;
}
.guard h4, h2{
    width: 70%;
    margin-left: 20%;
    padding: 10px;
    text-align: left;
    color: var(--Primary-color);
    font-family: var(--Secondary-font);
    font-size: 20px;
    text-transform: uppercase;
}
.guard ul {
    width: 70%;
    margin-left: 15%;
    font-size: 15px;
    color: black;
    text-decoration: none;
    list-style: disc;
    padding: 10px;
    font-family: var(--Primary-font);
    text-align: left;
}
.safe {
    width: 100%;
    background-color: transparent;
    margin-left: 0%;
    display: flex;
    margin-bottom: -20px;
    margin-top: 50px;
    font-size: 20px;
}
.safe1{
    width: 50%;
}
.safe2{
    width: 50%;
}
.safe h2 {
    color: var(--Primary-color);
    font-size: 30px;
    font-family: var(--Primary-font);
    text-align: left;
    color: var(--Primary-color);
    margin-bottom: 10px;
    margin-top: 10px;
}
.safe img {
    width: 90%;
    height: 400px;
    margin-left: 10%;
}
.safe h4 {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 20px;
    font-size: 20px;
    font-family: var(--Secondary-font);
    text-transform: uppercase;
    text-align: left;
}
.cuard{
    width: 400px;
    height: 300px;
    margin-left: 2%;
}
.intro {
    width: 60%;
    margin-left: 15%;
    color: black;
    text-align: justify;
    font-family: var(--Primary-font);
    font-size: 15px;
    margin-bottom: 20px;
    padding: 0px 10px;
}
.li{
    columns: 2;
    margin-left: 10%;
    font-size: 15px;
    font-family: var(--Primary-font);
    list-style: disc;
    padding: 0px 10px;
}


@media screen AND (max-width:500px){
    .guard {
        width: 100%;
        color: rgb(2, 0, 0);
        background-color: whitesmoke;
        text-align: left;
        margin-left: 0px;
    }
    .main{
        width: 100%;
        background-color: white;
        margin-top: 0px;
    }
    .text {
        margin-top: 0px;
        margin-left: 35px;
        font-size: 20px;
        background-color: white;
    }
    .guard img {
        width: 90%;
        margin-left: 5%;
        height: auto;
    }
    .guard h2 {
        color: black;
        font-size: 20px;
        font-family: var(--Secondary-font);
        text-align: left;
        padding: 10px;
    }
    .guard h4, h2{
        width: 70%;
        margin-left: 15%;
        text-align: left;
        color: black;
        font-family: var(--Secondary-font);
        font-size: 20px;
        text-transform: uppercase;
    }
    .guard ul {
        width: 70%;
        margin-left: 5%;
        font-size: 15px;
        padding: 10px;
        color: grey;
        text-decoration: none;
        list-style: disc;
        font-family: var(--Primary-font);
        text-align: left;
    }
    .safe {
        width: 100%;
        background-color: white;
        display: block;
        margin-left: 0;
        margin-bottom: -20px;
        margin-top: 50px;
        font-size: 20px;
    }
    .safe h2 {
        width: 300px;
        color: black;
        font-size: 30px;
        font-family: var(--Secondary-font);
        text-align: left;
        margin-bottom: 10px;
        margin-top: 0px;
    }
    .safe img {
        width: 350px;
        height: 250px;
        margin-left: 0%;
    }
    .safe h4 {
        width: 380px;
        margin-left: 0%;
        margin-bottom: 20px;
        font-size: 17px;
        padding: 10px;
        font-family: var(--Secondary-font);
        text-transform: uppercase;
        text-align: left;
    }
    .cuard{
        width: 20%;
        height: auto;
        margin-left: 2%;
    }
    .intro {
        width: 380px;
        margin-left: 1%;
        font-weight: lighter;
        color: black;
        font-family: var(--Primary-font);
        font-size: 14px;
        margin-bottom: 20px;
        padding: 0px 10px;
    }
    .li{
        width: 380px;
        margin-left: 0%;
        font-size: 15px;
        font-family: var(--Primary-font);
        list-style: disc;
        padding: 0px 10px;
    }
}