html{
    scroll-behavior: smooth;
}

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

html,
#section1,
#section2,
#section3,
#section4,
#section5 {
    min-width: 100vw;
    min-width: 100vh;
}

body{
    overflow-x: hidden;
}
body p{
    font-size: large;
}

#mid-section1{
    min-width: 100vw;
}

#section1{
    background-color: cornflowerblue;
}

.nav-item .nav-link{
    color: white !important;
    margin: 0 10px;
}

.navbar-brand{
    font-weight: bolder !important;
}

@media only screen and (max-width:780px){
    
   .nav2{
       display: flex;
       width: 40%;
       align-content: center !important;
       align-items: center !important;
       flex-direction: row;
       text-align: center;
       margin: auto !important;
   }

   .nav2 li{
       margin: auto;
   }
    .nav1{
        margin: 0 !important;
        margin: auto;
    }
    .navbar{
        margin: 0px !important;
    }
    .navbar-nav{
        margin: 0;
        text-align: center;
    }
    .navbar-nav{
        margin: 0;
        text-align: center;
    }

    ul.navbar-right{
        display: flex !important;
    }

}

@media only screen and (min-width:1160px){
    .nav1{
        margin: 0 100px;
    }
    .navbar{
        margin-left: 150px !important;
    }
    .nav1{
        margin: 0 200px;
    }    
}

@media only screen and (min-width:768px){
    .navbar{
        margin-left: 40px !important;
    }
    .nav1{
        margin: 0 -10px;
    }
    
}


@media only screen and (max-width:767px){
    
    .nav-item{
        font-size: x-large !important;
    }
    
}

@media only screen and (max-width:975px) {
    .navbar{
        margin-left: 20px !important;
    }
    .nav1{
        margin: 0 40px;
    }
}

@media only screen and (max-width:1028px){
    .nav1{
        margin: 0 40px;
    }
}

@media only screen and (min-width:967px){
    .nav1{
        margin: 0 120px !important;
    }
}


@media only screen and (min-width:1028px){
    .nav1{
        margin: 0 100px;
    }
}


@media only screen and (min-width:1300px) {
    .navbar{
        margin-left: 150px !important;
    }
    .nav1{
        margin: 0 320px;
    }

    .nav2{
        margin-left: 150px;
    }
}

.info1{
    padding: 20px;
    padding-top: 100px !important;
}

.info1 h1{
    color: white;
    font-size: 3.1em;
}

.info1 p{
    color: white;
    font-size: x-large;
}

 .main1{
     width: 80%;
     margin: auto;
    display: grid;
    margin-top: 100px !important;
    grid-template-columns: repeat(2, 1fr);
}

.main1 button{
    padding: 10px 20px;
    font-size: larger;
    outline: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
}

.dwnld-btn{
    background-color: orangered;
    color: white;
    margin-right: 10px;
}

.feature-btn{
    background-color: rgb(45, 92, 180);
    color: white;
}

.image1 img{
    max-width: 90%;
    float: right;
}

@media only screen and (max-width:1115px) {
    .main1{
        grid-template-columns: repeat(1, 1fr);
    }

    .image1{
        text-align: center !important;
    }
    .image1 img{
        text-align: center !important;
        float: none;
    }

    .info1{
        padding: 10px;
        padding-top: 0 !important;
    }

    .info1 h1{
        font-size: 2.2em;
    }
    .info1 p{
        font-size: medium;
    }

    button{
        font-size: medium;
    }
}


/* Mid section */

#mid-section1{
    padding: 80px 0;
}

.gallery1{
    width: 100%;
    margin: auto;
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    grid-gap: 1em;
}

.card1{
    text-align: center;
    padding: 15px;
}

.mid-info{
    margin-bottom: 30px;
}

.card1 h4, p{
    margin-top: 8px;
}

.mid-info h1{
    color: cornflowerblue;
    text-transform: uppercase;
    font-weight: bold;   
}

.mid-info{
    text-align: center;
}

.mid-info p{
    color: gray;
}

@media only screen and (max-width:850px)
{
    .gallery1{
        grid-template-columns: repeat(1, 1fr);
    }
    .mid-info h1{
        font-size: 1.6em;   
    }
    
}


 /* Make the image fully responsive */
 .carousel-inner img {
    width: 20%;
    height: 10% !important;
  }

  a.carousel-control-prev{
      color: grey !important;
  }

  @media only screen and (max-width:900px){
    .carousel-inner img {
        width: 45%;
        height: 40%;
      }
  }




  /* Section2 */

  #section2,
  #section3,
  #section4{
      margin-top: 50px 0;
  }

  .info2{
        padding: 25px;
        padding-top: 120px !important;
    }

  .info2 h1{
    color: cornflowerblue;
    font-weight: bold;
    text-transform: uppercase;   
  }

  .main2{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
  }

  .container-fluid{
      width: 90%;
      margin: auto;
  }

  .image2 img{
      float: right;
  }

  @media only screen and (max-width:800px) {
      .main2{
          grid-template-columns: repeat(1, 1fr);
      }
      .image2{
          text-align: center;
      }
      .image2 img{
          float: none !important;
      }
      .info2{
          text-align: center;
      }
      .info2 h1{
          font-size: x-large;
      }
      .info2{
        padding: 10px;
        padding-top: 10px !important;
    }
  }



  /* Section5 */

  #section5 .container-fluid{
      width: 80%;
      margin: auto;
  }

  .main5{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 2em;
  }

  .card5 span{
      font-size: 3em;
      color: cornflowerblue;
  }


  .card5::after{
    content:' \201D ';
    font-size: 6em;
    color: cornflowerblue;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bolder;
    float: right;
} 

.card5::before{
    content:' \201C ';
    font-weight: bolder;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 6em;
    color: cornflowerblue;
} 


@media only screen and (max-width:800px) {
    #section5 .container-fluid{
        width: 100%;
    }
}


/* Section 6 */ 

.info6 h1, .info6 p{
    color: white;
}

.info6{
    padding: 50px 0;
}

#section6{
    background-color: cornflowerblue;
}

#section6 .container-fluid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 20px;
    padding-bottom: 0 !important;
}

.image6 img{
    float: right;
    max-width: 90%;
}


@media only screen and (max-width:1254px) {
    #section6 .container-fluid{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    } 
    .image6 img{
        float: none;
        max-width: 90%;
    }
    .image6{
        text-align: center;
    }

    .info6 h1{
        font-size: 1.7em;
    }
    .info6 p{
        font-size: 1em;
    }
}



/* Footer */ 

footer{
    background-color: rgb(40, 37, 68);
    padding-top: 40px;
    color: white;
    padding-bottom: 100px;
}

footer .container-fluid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background-color: rgb(40, 37, 68);
}

footer .fun{
    color: orangered;
    font-size: 1.1em;
    font-weight: bolder;
}
footer .weather{
    font-weight: bolder;
    color: cornflowerblue;
    font-size: 1.1em;
}

footer .container-fluid{
    width: 80%;
    margin: auto;
}

footer .footer-card{
    text-align: center;
}

footer .container-fluid ul {
    display: grid;
    list-style: none;
    grid-template-columns: repeat(3, 1fr);
}


footer .container-fluid ul li a{
    text-decoration: none;
    color: white !important;
}

footer p{
    font-size: medium;
    text-align: center !important;
}


@media only screen and (max-width:1008px) {
    footer .container-fluid{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        background-color: rgb(40, 37, 68);
        grid-gap: 1em;
    }

    footer .container-fluid ul {
        display: grid;
        list-style: none;
        width: 60%;
        margin: auto;
        grid-template-columns: repeat(3, 1fr);
    }

    footer p{
        font-size: small;
    }
}