@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Cuprum:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
    

    body{
        font: 14px/1.5 "Roboto", Verdana, sans-serif;
        background-color: #eee;
        width: 100wv;
        
    }

    .header-container{
        width: 100wv;
        display: flex;
        text-wrap: nowrap;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        background-color: #eee;
        
    }
    

    .offer{
        display: flex;
        text-wrap: wrap;
        padding: 0.2em 0.5em;
        color: black;
        font-size: large;
        font-weight: bold;
        font-style: italic;
        
    }

    .offer img{
        height: 1.2em;
        margin-right: 0.5em;
    }


    .logo img{
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        padding: 0.5em;
        /* padding-left: 0.5; */
        width: 12em;
        image-resolution: 200dpi;
        border-radius: 0.3em;
        background-color: #fff;
        box-shadow: 0 0 1em 0.2em rgb(0,0,0,0.2);
    }

   
    .menu ul{
        display: flex;
        list-style: none;
    }

    .menu ul li{
        display: block;
        text-align: center;
        padding: 0 0.2em ;
        margin: 0.5em 0.3em;
       
    }

    a {
        text-decoration: none;
        color: black;
        font-family: "Cuprum";
        font-size: large;

    }

    .menu a :hover{
        background-color: black;
        box-shadow: 0 0 1em 0.2em rgb(0,0,0,0.2);
        border-radius: 0.2em;
        color: #fff;
    }
    
  .photo {
    background-image: url("https://images.unsplash.com/photo-1709486814423-9b4570144816?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    
     width: 100wv;
     height: 60vh;
     background-size: cover;
     background-position:center;
    }

    .photo{
        display: flex;
        height: auto;
        flex-direction: column;
        align-items: flex-end;
        padding: 7%;
        
    }

    .reason {
        background-color: rgb(116, 113, 113);
        background: rgba(116, 113, 113, 0.3);
        padding: 3em;
        border-radius: 0.3em;
    }

    .reason > h1{
        color:#fff
        ;
        margin-bottom: 0.5em;
        font-style: italic;
        
    }

    .photo ul li{
        color: #fff;
        list-style-type: "✔";
        
        font-size: larger;
        font-weight: bold;
        /* font-style: italic; */
        padding: 0.3em;
    }

    .section1, .section2{
        text-align: center;
        background-color: #fff;
        margin-bottom: 2em;
        /* box-shadow: 0 0 1em 0.2em rgb(0,0,0,0.2); */
    }


    .section1 h1, .section2 h1{
        text-align: center;
        font-size: 2.5em;
        box-shadow: 0 0 1em 0.2em rgb(0,0,0,0.2);
        color: black;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .section1 > div , .list{
        width: 100wv;
        background-color:#eee;
        color: black;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        padding-bottom: 2.5em;
        padding-top: 2.5em;
        
    }
    
    .section1-3{
        padding-right: 0.3em;
    }

    article > p{
        font-size:large;
        /* margin:0.5em; */
    }
    article > h3{
        margin-bottom: 1em;
        font-size:1.5em;
    }

    article > img, .list > section > img{
        margin: 1em;
        max-height: 5em;
    }

    footer{
        background-color: #fff;
    }

    .footer-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5em;
        box-shadow: 0 0 1em 0.2em rgb(0,0,0,0.2);
        
    }

    .contact, .contact-addreess, .rights{
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: medium;
        color:black;
       
    }

    .contact-addreess p:first-of-type {
        margin-top: 0.85em;
    }

    .rights img{
        height: auto;
        max-width: 10em;
        padding-left: 3em;
    }

    .contact table{
        margin-top: 0.75em;
        margin-right: 0.5em;
        padding-right: 0.5em;
        background-color: #eee;
        font-size: medium;
        border-radius: 0.3em;
        box-shadow: 0 0 1em 0.2em rgb(0,0,0,0.2);
       
        
    }

    .contact img{
        height:2.5em;
        padding: 0.5em;
        margin-top: 0.2em;
        background-color: #eee;
    }


    @media (max-width: 650px) {
        
        body{
            font: 12px/1.5 Lato, Verdana, san-serif;
        }

        .logo img{
            display:none
        }

        .rights{
            display: none;
        }

        .section1 > div , .list{
            flex-direction: column;
        }

      
    }

  

    .offer p::before {
        font-family: "FontAwesome";
        content: "\f2a0";
        display: inline-block;
        padding-right: 0.5em;
        vertical-align: middle;
        font-weight: 900;
        /* color: black; */
     }

     .section1-1 h3::before {
        font-family: "FontAwesome";
        content: "\e1b0";
        display: flex;
        justify-content: center;
        font-size: 3em;
        /* color: black; */
     }

     .section1-2 h3::before {
        font-family: "FontAwesome";
        content: "\e4d8";
        display: flex;
        justify-content: center;
        font-size: 3em;
        /* color: black; */
     }
     
     .section1-3 h3::before {
        font-family: "FontAwesome";
        content: "\f2b5";
        display: flex;
        justify-content: center;
        font-size: 3em;
        /* color: black; */
     }

     .list .section1-1 h3::before {
        font-family: "FontAwesome";
        content: "\f118";
        display: flex;
        justify-content: center;
        font-size: 3em;
        /* color: black; */
     }

     .list .section1-2 h3::before {
        font-family: "FontAwesome";
        content: "\f64f";
        display: flex;
        justify-content: center;
        font-size: 3em;
        /* color: black; */
     }

     .list .section1-3 h3::before {
        font-family: "FontAwesome";
        content: "\f091";
        display: flex;
        justify-content: center;
        font-size: 3em;
        /* color: black; */
     }

     .list .section1-4 h3::before {
        font-family: "FontAwesome";
        content: "\f5da";
        display: flex;
        justify-content: center;
        font-size: 3em;
        /* color: black; */
     }

     .contact table tr td p::before {
        font-family: "FontAwesome";
        content: "\f2a0";
        display: inline-block;
        padding-right: 0.5em;
        vertical-align: middle;
        /* font-weight: 900; */
        /* color: black; */
     }