*{
  box-sizing: border-box;
  font-style: italic;
}
body{
  background-color: rgb(255, 236, 194);
}
/* Main Content Styles */

.card{
  background-color: rgb(255, 236, 194);
}

.col-xl-6,.col-xl-5{
  border: none;
}


.card h2{
  background-color: rgba(255,0,0,0.6);
  text-transform: capitalize;
  margin-bottom: 0;
  padding:8px;
  box-shadow: 6px 6px 15px black;
}

.card p{
  background-color: orange;
  width: 100%;
  padding:10px;
  text-align: left;
  padding-left: 25%;
  box-shadow: 4px 4px 15px black;
}



/* For Extra Large Devices Only */
@media (min-width:1200px){
  #logo-img{
      /* height: 100px; */
  }
 #nav-list li div:hover{
     border: 2px solid white;
     border-radius: 2px;
 }
}

/* For Large Devices Only */
@media (min-width:992px) and (max-width:1199px){
  #nav-list li a{
      color: white;
      font-weight: 500;
      font-style: italic;
      width: 100%;
      font-size: 1.4em;
  }
  #logo-img{
      width: 200px;
      height: auto;
  }
  #nav-list{
      padding:5px;
  }
}
/* For Medium Devices Only */
@media (min-width:768px) and (max-width:991px){
  
  #nav-list{
      color: black;
      font-weight: 500;
      font-style: italic;
      margin:0;
  }
  #nav-list li a{
      width: 100%;
  }
  #nav-list li:active{
      background-color: white;
      text-decoration: none;
  }
  #logo-img{
      width: 200px;
      height: auto;
  }
  #nav-list li{
      padding:10px;
  }
  hr{
      margin: 0;
      opacity: 0.8;
  }
}

/* For  Small Devices Only */
@media (min-width:576px) and (max-width:767px){
  #logo-img{
      width: 200px;
      height: auto;
      margin:10px;
  }
  #nav-list li:active{
      background-color: white;
      text-decoration: none;
  }
  #nav-list{
      width: 100%;
      margin:0;
  }
  hr{
      width: 100%;
      margin:0;
  }
  .navbar-toggle{
      margin-top:60px;
  }
 
}
/* For  Extra Small Devices Only */
@media (max-width:575px){
  #logo-img{
      width: 200px;
      height: auto;
      margin:10px;
  }
  #nav-list li{
      padding:10px;
  }
  #nav-list li:active{
      background-color: white;
      text-decoration: none;
  }
  hr{
      margin: 0;
  }
  #nav-list{
      width: 100%;
      margin:0;
  }
}