html{

 background-image: linear-gradient(rgb(93, 181, 244), rgb(99, 246, 99));

}

body {

  background-image: url(img/image-lion-background.png);
  background-position: top center;
  background-repeat: no-repeat;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.125rem;

}

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

.container {
    width: 1024px;
    min-height: 360px;
    margin-left: auto;
    margin-right: auto;
}

header {
    display: flex;
    width: 1024px;
    min-height: 100px;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20PX;

    border-bottom: 1px solid rgb(239, 238, 238);

}



main{
    display: flex;
    width: 1024px;
    min-height: 300px; 
    align-items:center;
    margin-left: auto;
    margin-right: auto;  
    margin-bottom: auto; 

}

.main2 {
   width: 1024px;
   min-height: 300px;
   padding-top: 50px;
   margin-left: auto;
   margin-right: auto;  
   margin-bottom: auto; 
   padding-left: 50px;
   padding-right: 50px;
}

    .cards {
    width: 1024px;
    min-height: 200px;
    display: flex; 
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto; 
    text-align: center;

    }
       .card1 {
    width: 30%;
    background-image: url(img/image-background-card1.jpg);
    min-height: 255px;
    background-size: cover;
    background-position: bottom;

       }

       .card2 {
    width: 30%;
    background-image: url(img/image-background-card2.jpg);
    min-height: 255px;
    background-size: cover;
    background-position: bottom;

       }
       

       .card3 {
    width: 30%;
    background-image: url(img/image-background-card3.jpg);
    min-height: 255px;
    background-size: cover;
    background-position: bottom;


       }
       
       .card1, .card2, .card3 {
        padding: 20px 20px 20px 30px
        box-sizing: border-box;

       }
  

    .HeroBox1 {
flex: 2;
padding-right: 40px;
    }


    .HeroBox2 {
flex: 1;
    }

    h1 {

    font-size: 3.25rem;
    color: rgb(255, 255, 255);
    margin-bottom: 1.25rem ;

  font-family: "Belleza", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-shadow: 4%;
  

}

h2 {

    font-size: 1.75rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    margin-bottom: 1rem;
    color: aliceblue;
    margin-top: 20px;
    
}

   P {
line-height: 1.75rem;
margin-bottom: 0.5rem;
color: aliceblue;

   }

   .cards p{
font-size: 0.85rem;
line-height: 1.2rem;
margin 20px 30px;

   }
  .cards i {

    font-size: 80px;
    color: aliceblue;
    margin-top: 20px;
   }
   .cards a {
color: aliceblue;
text-decoration: none;
   }

   .mybutton {
background-color: aliceblue;
color: rgb(18, 136, 172);
font-family: "Belleza", sans-serif;
padding: 11px 25px;
display: inline-block;
margin-top: 20px;
border-radius: 12px;
box-shadow: 2px 2px rgba(0, 0, 0, 4%);
 
   }





.HeroBox2 img {

  border-radius: 40px; 
   } 



   .mybutton:hover {
background-color: aqua;
transition-duration: 1 second;
}

 nav  a.mybutton2{
margin-left: 20px;
font-family: "Belleza", sans-serif;
padding: 3px 15px;
display: inline-block;
margin-top: 20px;
border-radius: 12px;
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;

 }

nav {
  display: flex;
  gap: 12px;
}

  .navbutton {
display: inline-block;
border: 1px solid white;
padding: 11px 25px;
font-family: "Belleza", sans-serif;
position: relative;
text-align: center;
border-radius: 12px;

 }

 .dropdown {
display: none;
position: absolute;
z-index: 1 ;
padding-top: 20px;
text-align: center;
width: 200px;
 }

 .navbutton:hover .dropdown {
display: block;
 }

 .dropdown .navbutton  {
 width: 80px;
background-color: white ;
 margin-bottom: 6px;

 }

  .dropdown .navbutton a {
 color: rgb(0, 149, 255);

 }

.testimonals{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 100px;

} 

 .tbox {
    width: 47%;
    padding: 50px;
    border: 1px solid white;
    box-sizing:border-box ;
    margin-top: 50px;
 }

 .tbox :last-child {

    font-size: .8rem;
 }

 .tbox p:last-of-type {

font-size: 0.8rem;
padding-left: 45px;

 }