body    {
    font-family: roboto;
    background-color: #262626;
    color: #262626;
}

/* ---------- Grid Layout ---------- */

section.content {
    display: grid;
    grid-template-areas:
    "hero-banner"
    "about-us"
    "featured-stories"
    "news-letter"
    "contact-us";
}

div.hero-banner {
    grid-area: hero-banner;
}

div.about-us {
    grid-area: about-us;
    margin: 100px;
}

div.our-service {
    grid-area: our-service;
}

div.featured-stories {
    grid-area: featured-stories;
}

div.contact-us {
    grid-area: contact-us;
}

/* ---------- END Grid Layout ---------- */



/* ---------- Hero Banner ---------- */

.hero-banner {
    background-image: url("../images/bg2.jpg");
    height: 650px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }


.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #919636;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidebar a {
    padding: 6px 6px 6px 32px;
    text-decoration: none;
    font-size: 18px;
    color: #262626;
    display: block;
    transition: 0.3s;
  }
  
  .sidebar a:hover {
    color: #4d4d4d;
  }
  
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 30px;
    margin-left: 50px;
  }
  
  .openbtn {
    font-size: 30px;
    cursor: pointer;
    background-color: transparent;
    color: #919636;
    padding: 10px 10px;
    border: none;
  }
  
  .openbtn:hover {
    background-color: transparent;
  }
  
  #main {
    transition: margin-left .5s;
    padding-left: 10px;
  }
  
  @media screen and (max-height: 450px) {
    .sidebar {padding-top: 10px;}
    .sidebar a {font-size: 18px;}
  }

@media (max-width: 425px) {
    .icons-about {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
        grid-template-areas:
        "secure-icon safe-icon private-icon";
    }
}
/* ---------- END Hero Banner ---------- */


/* ---------- About Us ---------- */

.about-us {
    height: auto;
    padding: 50px;
    background-color: #ffffff;
    font-size: 18px;
    color: #262626;
    line-height: 1.2em;
}

h1 {
    font-weight: 800;
    font-size: 25px;
    text-align: center;
}

h2 {
    color: #262626;
    font-size: 22px;
    font-weight: 550;
    padding-top: 10px;
    padding-bottom: 10px;
}

.about-text {
    padding-top: 20px;
    padding-bottom: 20px;
}

.icon {
    height: 95px;
    width: 95px;
}

.icons-about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
    grid-template-areas:
    "secure-icon"
    "safe-icon"
    "private-icon";
    }

div.secure-icon {
    grid-area: secure-icon;
    text-align: center;
    padding: 20px;
}

div.safe-icon {
    grid-area: safe-icon;
    text-align: center;
    padding: 20px;
}

div.private-icon {
    grid-area: private-icon;
    text-align: center;
    padding: 20px;
}

@media (min-width: 768px) {
    .icons-about {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
        grid-template-areas:
        "secure-icon safe-icon private-icon";
    }

    div.secure-icon {
        padding: 20px;
    }

    div.safe-icon {
        padding: 20px;
    }

    div.private-icon {
        padding: 20px;
    }
}

@media (max-width:425px) {
    .hero-banner {
        height: 460px;
    }

    .about-us {
        padding: 35px;
        padding-top: 35px;
    }
}

/* ---------- END About Us ---------- */


/* ---------- END Featured Stories ---------- */

.featured-stories {
    height: auto;
    padding: 50px;
    background-color: #f5f5f5;
    font-size: 18px;
    color: #262626;
    line-height: 1.2em;
}

.featured-text {
    padding-top: 20px;
    padding-bottom: 20px;
}

.movies {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
    "movies-icon movies-text";
    padding: 15px;
}

div.movies-icon {
    grid-area: movies-icon;
    text-align: center;
}

div.movies-text {
    grid-area: movies-text;
    text-align: left;
    margin-left: 15px;
}

@media (min-width: 768px) {
    .movies {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
        "movies-icon movies-text";
    } 
}

.music {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
    "music-icon music-text";
    padding: 15px;
}

div.music-icon {
    grid-area: music-icon;
    text-align: center;
}

div.music-text {
    grid-area: music-text;
    text-align: left;
    margin-left: 15px;
}

@media (min-width: 768px) {
    .music {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
        "music-icon music-text";
    } 
}

.games {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
    "games-icon games-text";
    padding: 15px;
    }

div.games-icon {
    grid-area: games-icon;
    text-align: center;
}

div.games-text {
    grid-area: games-text;
    text-align: left;
    margin-left: 15px;
}

@media (min-width: 768px) {
    .games {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
        "games-icon games-text";
    } 
}

.books {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
    "books-icon books-text";
    padding: 15px;
    }

div.books-icon {
    grid-area: books-icon;
    text-align: center;
}

div.books-text {
    grid-area: books-text;
    text-align: left;
    margin-left: 15px;
}

@media (min-width: 768px) {
    .books {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
        "books-icon books-text";
    } 
}

@media (max-width:425px) {
    .featured-stories {
        padding: 35px;
        padding-top: 35px;
    }
}

/* ---------- END Featured Stories ---------- */


/* ---------- Contact Us ---------- */

.contact-us {
    height: auto;
    padding: 50px;
    background-color: #262626;
    font-size: 18px;
    color: #ffffff;
    line-height: 1.2em;
}

.contact-icon {
    height: 40px;
    width: 40px;
}

.social-icon {
    height: 40px;
    width: 40px;
}

.contact-content {
    padding-top: 20px;
    display: grid;
    grid-template-areas:
    "company-details"
    "social-details"
    "map-details";

}

div.company-deatail {
    grid-area: company-detail;
}

div.social-details {
    grid-area: social-details;
}

@media (min-width: 768px) {
    .contact-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "company-details social-details map-detais";
    }
}

/* ---------- address --------- */

.company-details {
    display: grid;
    grid-template-areas:
    "pin"
    "email"
    "mobile";
}

div.pin {
    grid-area: pin;
    height: 40px;
    align-items: center;
}

div.email {
    grid-area: email;
    height: 40px;
    align-items: center;
}

div.mobile {
    grid-area: mobile;
    height: 40px;
    align-items: center;
}


.pin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "pin-icon pin-text";
    padding: 15px;
    }

div.pin-icon {
    grid-area: pin-icon;
    text-align: center;
    padding-right: 20px;
}

div.pin-text {
    grid-area: pin-text;
    text-align: left;
}

@media (min-width: 768px) {
    .pin {
        display: flex;
        align-items: center;
    } 
}


.email {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "email-icon email-text";
    padding: 15px;
    }

div.email-icon {
    grid-area: email-icon;
    text-align: center;
    padding-right: 20px;
}

div.email-text {
    grid-area: email-text;
    text-align: left;
}

@media (min-width: 768px) {
    .email {
        display: flex;
        align-items: center;
    } 
}

.mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "mobile-icon mobile-text";
    padding: 15px;
    }

div.mobile-icon {
    grid-area: mobile-icon;
    text-align: center;
    padding-right: 20px;
}

div.mobile-text {
    grid-area: mobile-text;
    text-align: left;
}

@media (min-width: 768px) {
    .mobile {
        display: flex;
        align-items: center;
    } 
}

@media (max-width:425px) {
    .pin {
        grid-template-columns: 1fr 2fr;
    }

    .email {
        grid-template-columns: 1fr 2fr;
        }

    .mobile {
        grid-template-columns: 1fr 2fr;
    }
}


/* ----------  End address --------- */

/* ----------  social --------- */

.social-details {
    display: grid;
    grid-template-areas:
    "facebook"
    "instagram"
    "twitter";
}

div.facebook {
    grid-area: facebook;
    height: 40px;
    align-items: center;
}

div.instagram {
    grid-area: instagram;
    height: 40px;
    align-items: center;
}

div.twitter {
    grid-area: twitter;
    height: 40px;
    align-items: center;
}

.facebook {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "facebook-icon facebook-text";
    padding: 15px;
    }

div.facebook-icon {
    grid-area: facebook-icon;
    text-align: center;
    padding-right: 20px;
}

div.facebook-text {
    grid-area: facebook-text;
    text-align: left;
}

@media (min-width: 768px) {
    .facebook {
        display: flex;
        align-items: center;
    }
    
}

.instagram {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "instagram-icon instagram-text";
    padding: 15px;
    }

div.instagram-icon {
    grid-area: instagram-icon;
    text-align: center;
    padding-right: 20px;
}

div.instagram-text {
    grid-area: instagram-text;
    text-align: left;
}

@media (min-width: 768px) {
    .instagram {
        display: flex;
        align-items: center;
    } 
}

.twitter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "twitter-icon twitter-text";
    padding: 15px;
    }

div.twitter-icon {
    grid-area: twitter-icon;
    text-align: center;
    padding-right: 20px;
}

div.twitter-text {
    grid-area: twitter-text;
    text-align: left;
}

@media (min-width: 768px) {
    .twitter {
        display: flex;
        align-items: center;
    } 
}

@media (max-width:425px) {
    .contact-us {
        padding: 35px;
        padding-top: 35px;
    }

    .facebook {
        grid-template-columns: 1fr 2fr;
    }

    .instagram {
        grid-template-columns: 1fr 2fr;
        }

    .twitter {
        grid-template-columns: 1fr 2fr;
    }
}

/* ----------  End social --------- */

/* ----------  map --------- */

.map-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "map";
}

div.map {
    grid-area: map;
    height: 219px;

}

@media (min-width: 768px) {
    .map-details {
        display: flex;
        align-items: center;
    } 
}

@media (max-width: 425px) {
    .map-details {
        justify-content: center;
        grid-template-columns: 1fr 6fr;
    } 
}

/* ----------  End map --------- */


/* ---------- End Contact Us ---------- */