/* global elements */
*{
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth
}
.subheading{
  padding: 5px;
  color: indigo;
}
.underline{
  margin: 10px auto 40px auto;
  border: 2px solid;
  border-color:orange;
  width:10%;
}
/* Scroll animation */
.jump-up {
  /*opacity: 0;*/
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.jump-up.active {
  opacity: 1;
  transform: translateY(0);
}
/* Header */

header{
  /*max-width: 1100px;
  height: 100vh;*/
  
}
nav{
  display: flex;
  justify-content: space-between;
  background: #fff;
 /* border-bottom: 5px solid #6c35a6;*/
  padding: 0 30px;
}
#logo{
  width:250px;
  object-fit: contain;
}
#logo2{
  width:200px;
  object-fit: contain;
}
#title{
  display: none;
  /*align-items: center;*/
  color:#4b0082;
  font-size: 30px;
  width:fit-content;
  
  
}

#nav-ul{
  list-style: none;
  display: flex;
  gap:10px;
  align-items: center;
  /*border: solid red*/
}
#nav-ul li{
  /*border: solid green*/
}
#nav-ul a{
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 30px;
  color:#6c35a6;
  font-weight: 500;
  
  /*border: solid red*/
}
#current-page-link a{
  color:white;
  background: blueviolet;
  border: 2px solid orange
}
#menu-btns{
  display: none;
}
#menu-open{
  display: none;
}
#menu-close{
  display: none;
}

#nav2{
  display: none;
}
#hero2{
  height: 400px;
  
}
#hero2-text{
  width:80%;
  position:relative;
  top:50%;
  left:50%;
  transform: translateX(-50%);
  text-align: center;
}
#hero2-text h2{
  color:#fff;
  text-shadow: 2px 2px 2px black;
  font-size: 50px;
}
/* Footer */
footer{
  background: #6c35a6;
  color:#fff;
  padding: 30px;
}
#footer-box{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
footer ul{
  list-style: none;
  gap: 15px;
  margin-bottom: 20px;
}
footer ul li{
  padding: 8px;
  color:#dddddd
  
}
footer a{
  color:skyblue;
}
footer ul li a{
  color:#dddddd;
  text-decoration: none;
}
#copyright{
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.info-container2 i {
  color: orange;
  margin-right: 8px;
}
.info-container2 p{
  margin-top: 12px;
  color:#dddddd
}

#to-top{
  color:#eeeeee
}
#location{
  display: inline-flex;
  padding: 0;
  align-items: center;
  height: 20px;
}
#address{
  margin: 0;
  padding: 0;
  width:fit-content;
  height: auto;
  display: inline-flex;
}
#address p{
  margin: 0;
}
#author{
  text-align: center;
}

@media(max-width:780px){
  header{
    
  }
  nav{
    height:100px;
    width:100%;
  display: flex;
  justify-content: space-between;
    padding: 0 10px;
    position:fixed;
  background: #fff;
  border-bottom: 5px solid blueviolet;
    /*position:relative;*/
    top:0;
    z-index: 4;
    box-shadow: 1px 2px 10px black;
}
#logo{
  width:190px;
  object-fit: contain;
  
}
#logo2{
  width:100px;
  object-fit: contain;
}
#title{
  display: none;
  align-items: center;
  font-size: 15px;
  text-align: center;
  width:150px;
}
#nav-ul{
  display: block;
  width:100%;
  position:fixed;
  z-index: 3;
  left:0;
  top:100px;
  background: white;
  height: 0;
  overflow: hidden;
  transition: 0.5s ease;
  object-fit: contain;
 /* border: solid red*/
}
#nav-ul li{
  /*border-bottom: 1px solid #ddd;*/
  padding: 0;
  text-align: center
}
#nav-ul a{
  /*width:100vw;*/
  display: block;
  border-radius: 0px;
  color:darkviolet;
  font-weight: 900;
  padding: 15px;
  /*border: solid red*/
}
#current-page-link a{
  color:white;
  
}
  #menu-btns{
    /*border: solid red;*/
    width:35px;
    display: grid;
    align-items: center;
   /* font-size: 23px;*
    margin-right: 20px;
    margin-left: auto;*/
  }
#menu-open{
  width:30px;
  display: grid;
  align-items: center;
  color:blueviolet;
 /* border: solid red*/
}
#menu-close{
  width:32px;
  align-items: center;
  color:red;
}
  #nav2{
  display: flex;
    justify-content: space-between;
    padding: 5px;
    background: blueviolet;
    height: 30px;
    position:fixed;
    width:100%;
    top:60px;
    z-index: 4;
}
  #nav2 i{
    margin: auto 6px;
  }
  #hero2{
  height: 300px;
    
  
}
  #hero2-text{
  top:170px;
}
#hero2-text h2{
  font-size: 40px;
}
}