@import url('https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;800&family=Roboto:ital,wght@0,100;0,300;0,400;0,700;1,100&display=swap');


body{
    font-family: "montserrat", "Roboto";
    height: 100vh;
    text-align: center;
    width: 100%;
    background: white;
   
}
   
*{
    padding: 0;
    margin: 0;
    
}


a{
    text-decoration: none;
    color: black;
    
}

nav {
    background:white;
    color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  nav .mainMenu {
    display: flex;
    list-style: none;
  }
  nav .mainMenu li a {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: black;
    font-size: 15px;
    transition: 0.2s ease;
  }
  nav .mainMenu li a:hover {
    background: #375A78;
  }
  nav .openMenu {
    font-size: 1.6em;
    margin: 10px;
    display: none;
    cursor: pointer;
    font-weight: 400;
  }
  nav .mainMenu .closeMenu,
  .icons i {
    font-size: 2.4rem;
    display: none;
    cursor: pointer;
  }

   @media (max-width: 800px) {
    nav .mainMenu {
      height: 100vh;
      position: fixed;
      top: 0px;
      right: 0px;
      left: 0px;
      z-index: 10;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #375A78;
      transition: top 1s ease 0s;
      display: none;
    }
    nav .mainMenu .closeMenu {
      display: block;
      position: absolute;
      top: 20px;
      right: 20px;
    }
    nav .openMenu {
      display: block;
    }
    nav .mainMenu li a:hover {
      background: none;
      color: #375A78;
    }
    .icons i {
      display: flex;
      padding: 5px;
    }
  }

  .logo{

    max-height: 120px;
  }

  .nav-bar{

    display: flex;
    justify-content: space-around;
   
    min-height: 50px;

  }

  .nav-container {
    padding-top: 2em;
  }


  .hero{
    min-height: 80vh;
    align-items: center;
    background: black;
    justify-content: center;
    

    @media (min-width:800px){

      height: auto;
    }

  }

  .hero-img{
    position: relative;
    width: 100%;
    justify-content: center;
    min-height: 80vh;
    opacity: 0.3;
    




    @media (min-width: 768px){
      object-fit: cover;
      height: 90vh;
      overflow: hidden;
      
    }
  }

  


  .hero-text{
    top: 35%;
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    font-family: "Inknut+Antiqua";
    font-size: 1.5rem;
    color: white;

    
    
  }

  .hero-header{
   justify-content: center;
  width: 100%;
  position: absolute;
  top: 35%;
  display: flex;

  @media (min-width:768px){
      font-size: 2.6rem;
      top: 40%;
    }

    
  }

  .hero-subhead{
    justify-content: center;
  width: 100%;
  position: absolute;
  top: 50%;
  display: flex;

  @media (min-width:768px){
      font-size: 1rem;
      top: 50%;
    }


  }

  .hero-text2{
    position: absolute;
    
    text-align: center;
    
    font-weight: 300;
    font-size: 0.85rem;
    color: #9C9C9C;
    padding: 0.5em;

    @media (min-width:768px){
      font-size: 0.9rem;
      top: 50%;
    }


  }

  

  .contact-btn1{
    position: absolute;
    top: 70%;
    background: #375A78;
    color: white;
    padding: .8em;
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: .8em;
    
   
    @media (min-width:800px){
      top: 110%;
      font-size: 1rem;
    }

  }
  

   .contact-btn1 a{
    color: white;
   }

.button-div{
  justify-content: center;
  width: 100%;
  position: absolute;
  top: 70%;
  display: flex;

  @media (min-width:800px){
      top: 90%;
    }

}

section{
  padding-top: 2em;
  padding-left: 1em;
  padding-right: 1em;

  @media(min-width:768px){
    padding: 5em;
    padding-top: 3em;
    padding-bottom: 3em;
  }

  @media (min-width:1440px){
    padding: 10em;
    padding-top: 4em;
    padding-bottom: 4em;
  }
}

h3{
  font-size: 1rem;
  padding-bottom: 2em;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #375A78;
  padding-top: 1em;
}

.service-container{
  display: block;

  

  @media (min-width:800px){
    flex-wrap: wrap;

    
    gap: 1.5em;
    
    
    
  }
}

.flex-left{
  
  @media(min-width:768px){
    display: flex;
    gap: 2em;
    height: 300px;
    justify-content: space-around;
    
  }
}
.flex-right{
  

  @media(min-width:768px){
   gap: 2em;
    display: flex;
    justify-content: space-around;
  }
}


#service-1{
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  padding: 1em;
  backdrop-filter: blur(5px);
  transition: 0.5s;
  margin-bottom: 3em;
  
  @media (min-width:768px){
    width: 300px;
    height: 240px;
  }
  
 
  


}

#service-2{
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  padding: 1em;
  backdrop-filter: blur(5px);
  transition: 0.5s;
  margin-bottom: 3em;
  
   @media (min-width:768px){
    width: 300px;
    height: 240px;
    
  }


}

#service-3{
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  padding: 1em;
  backdrop-filter: blur(5px);
  transition: 0.5s;
  margin-bottom: 3em;
  
  @media (min-width:768px){
    width: 300px;
    height: 240px;
  }


}

#service-4{
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  padding: 1em;
  backdrop-filter: blur(5px);
  transition: 0.5s;
  
  
@media (min-width:768px){
    width: 300px;
    height: 240px;
  }

}




.c1{
  width:65px;
  height: 65px;
  border-radius: 50%;
  border: 1px, solid, #375A78;
  margin-bottom: 0.5em;
  margin-top: 1em;
  padding: 0.1em;
}

h4{
  font-size: 0.95rem;
  padding-bottom: 1em;
}


p{
  font-size: 0.85rem;
  padding-bottom: 1em;
}


.advert1{
  padding: 0;
  position: relative;
  text-align: center;
  margin-top: 2em;
}
.advert{

  
   
    width: 100%;
    justify-content: center;
    min-height: 60vh;
    opacity: 0.2;
    




    @media (min-width: 768px){
     
      height: 80vh;
      object-fit: cover;
      width:100%;
      
    }
}

.advert-section{
    min-height: 80vh;
    align-items: center;
    background: black;
    justify-content: center;
    
    color: white;
    

    @media (min-width:800px){

      height: auto;
    }

}

.advert1-head{

  font-size:1.3rem;
  position: absolute;
  top: 10%;
  font-family: "Inknut+Antiqua";
  padding: 1em;

  @media(min-width:768px){
    top: 15%;
  }

}

.ad-header{
  width: 100%;
  justify-content: center;
  display:flex;
}

.advert1-sub{
  font-size: 1rem;
  position: absolute;
  top: 35%;
  font-weight: 300;
  padding: 1em;
}

.adsubhead{
  width: 100%;
  justify-content: center;
  display:flex;
}

.contact-btn-advert1{
  position: absolute;
  background: #375A78;
    color: white;
    padding: .8em;
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: .8em;
    top: 70%;
  align-self: center;
}

.contact-btn-advert1 a{
  color: white;
}

.ad-btn1{
  justify-content: center;
  width: 100%;
  position: absolute;
  top: 70%;
  display: flex;
}

.why p{
  padding-bottom: 2em;
}

.why-choose{
  display: block;

  @media (min-width:768px){
  display: grid;
  grid-template-columns: repeat(2,50%);
  gap: 2em;
  grid-template-areas: "pics" "blue";
  }
}

.gavel{
  width: 60px;
  padding: 2em;
  
 

}

.pics-left{
  grid-area: "pics";
  margin-top: 5em;
  
}

.blue{
  margin-top: 1em;
  margin-left: 1.5em;
  margin-right: 1.5em;
  border-radius: 10px;
  color: white;
  background: #375A78;
  padding: 1.5em;
  grid-area: "blue";
  

  @media(min-width:768px){
    height: 250px;
  }
}

.light{
  font-weight: 200;
}

.bold{
  font-weight: 500;
}

footer{
  background: #375A78;
  margin-top: 2em;
  color: white;
  padding: 1em;
}

footer p{
  font-size: 0.8rem;
}

.contact-blue{
  background: white;
  color: black;
  padding: .8em;
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: .8em;
}

@media (min-width:768px){
  .footer-container{
  display: flex;
  gap: 3em;
  justify-content: space-between;
  margin-bottom: 0.5em;
  }

h5{
  text-align: left;
  padding-bottom: 0.5em;
}

.address{
  text-align:  left;
  padding-right: 3em;

}

.hours{
  text-align: left;
}

.hours P{
  padding-right: 3em;
}

footer{
  padding: 4em;
  padding-top: 2em;
  padding-bottom: 2em;
}

.contact-us-footer{
  text-align: left;
}




}

@media (min-width:1024px){
  .hero-text{
    font-size: 2rem;
  }

  .hero-text2{
    font-size: 1rem;
  }

  .button-div{
    top: 75%;
  }

  h3{
    font-size: 1.1rem;
  }

  #service-1{
    padding: 1.5em;
  }

  #service-2{
    padding: 1.5em;
  }

  #service-3{
    padding: 1.5em;
  }

  #service-4{
    padding: 1.5em;
  }

  .flex-left{
    padding-bottom: 3em;
  }

  p{
    font-size: 0.95rem;
  }

  section{
    padding: 8em;
    padding-bottom: 4em;
    padding-top: 4em;
  }

  .gavel{
    width: 80px;
  }

  .blue{
    padding: 2em;
    height: 200px;
  }

  footer{
    padding: 8em;
        padding-top: 2em;
        padding-bottom: 2em;
  }

  .contact-form{
    width: 400px;
    margin-left: 3em;
    padding: 2em;
  }

  input{
    width: 300px;
  }

  textarea{
    width: 300px;
  }
}

@media(min-width:1440px){
  .hero-text{
    font-size: 2.5rem;
  }

  .hero-text2{
    font-size: 1.5rem;
  }

  .contact-btn1{
    font-size: 1.2rem;
    
  }

  .button-div{
    top: 70%;
  }

  h3{
    font-size: 1.4rem;
  }

  
}


.c-head{
  text-align: center;
}



/*contact-page*/

.contact-form{
  background: #375A78;
  border-radius: 10px;
  padding: 1.5em;
  color: white;
  font-weight: 300;
}

.contact-c{
  display: block;

  @media(min-width:768px){
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-areas: "contact us" "form";
   
  }
}



label{
  display: block;
  padding-bottom: 0.5em;
}

.text1{
  background: #375A78;
  border-bottom: white 1px solid;
  border-top: none;
  border-left: none;
  border-right: none;
  margin-bottom: 1em;
}

.text2{
  background: #375A78;
  border-bottom: white 1px solid;
  border-top: none;
  border-left: none;
  border-right: none;
  margin-bottom: 1em;
}

.submit{
  background: white;
  color: black;
  padding: .8em;
  padding-left: 1em;
  padding-right: 1em;
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: .8em;
    margin-top: 1em;
}

textarea{
  background: #375A78;
  border-bottom: white 1px solid;
  border-top: none;
  border-left: none;
  border-right: none;
  margin-bottom: 1em;
}

.fill-out{
  padding-bottom: 2em;
}

@media(min-width:768px){
  h3{
    text-align: left;
  }

  .fill-out{
    padding-right: 5em;
    text-align: left;
    padding-top: 12em;
  }

  


}

/*about page*/

.div-about-hero{
   min-height: 50vh;
  align-items: center;
    background: black;
    justify-content: center;
  
  @media(min-width:768px){
    height: 60vh;
  }

}

.expert-head{
  width: 100%;
  justify-content: center;
  display: flex;
}

.about-ad{
  width: 100%;
 position: relative ;
 min-height: 50vh;
 justify-content: center;
  z-index: 1;
opacity: 0.2;

@media(min-width:768px){
  height: 60vh;
}
}

.expert{
  position: absolute;
  top: 30%;
  z-index: 2;
  color: white;

  @media(min-width:768px){
    top: 40%;
  }

  @media(min-width:1440px){
    font-size: 2.1rem;
  }
}

.contact-btn-about{
  position: absolute;
   z-index: 2;
    background: #375A78;
    color: white;
    padding: .8em;
    border-radius: 10px;
    border: none;
    font-weight: 500;
    font-size: .8em;

    @media(min-width:1440px){
      font-size: 1.2rem;
    }
    
}

.contact-btn-about a{
  color: white;
}

.button-about{
  width:100%;
  justify-content: center;
  position: absolute;
  top: 50%;
  z-index: 2;
  text-align: center;
  display: flex;
  color: white;

  @media(min-width:768px){
    top: 60%;
  }
}

.circle-abt{
  width: 60px;
}

.about-gavel{
 width:55px;
  height: 55px;
  border-radius: 50%;
  background: #375A78;
  margin-bottom: 0.5em;
  margin-top: 1em;
  padding: 0.3em;
}

.circles{
  display: flex;

  justify-content: space-around;
  padding-bottom: 1em;
  padding-top: 1em;

  @media(min-width:768px){
    justify-content: center;
    gap: 8em;
  }
}


@media(min-width:768px){
  p{
    text-align: left;
  }

  .about-ad{
    height: 70vh;
  }

  .div-about-hero{
    height: 70vh;
  }
}