/* Playfair Display  */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
:root{
    --gold: #FFD700;
    --green:#55D8A6;
    --blue:#002855;
    --grey: #555555;
}
li{
    style-decoration: none;
}
nav{
    background-color: white;
}
nav .logo img{
    width: 25rem ;
}
body{
   font-family: 'Poppins', sans-serif!important;
}
/* header show case */
/* header.show-case{

    right: 0;
    width: 100%;
    height: 650px;
    padding: 3px;
    display: flex;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.9);
 } */
 /* header.show-case video{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:650px;
    object-fit: cover;
    opacity: 0.2;
    background-size: cover;
    background:no-repeat center center fixed;
 } */
 .show-case  {
   position:relative;
 }
 .show-case .overlay{
   position: absolute; 
   bottom: 0;
   background: rgba(0,0,0,0.7); /* Black see-through */
   width: 100%;
   height:100%;
   transition: .5s ease;
   opacity: 1;
   color: white;
   font-size: 20px;
   font-size: 14px!important;
 }
 header h1{
    font-weight: 800;
    font-size: 3rem;
    padding-top:10rem;
    mix-blend-mode: overlay;
 }
 header h1 span{
    color: (--gold);
 }
 header .text{
    width: 74%;
    margin: 0 auto;
 }
 header .text p{
font-size: 1.1rem !important;
margin-top: 1rem;
padding: 0 4rem !important;
color: rgba(256,256,256,0.7);
 }
header button.header-contact{
background-color: var(--green);
border: none;
padding: 1rem 3rem;
color: white;
font-weight: 600;
border-radius: 0.5rem;
}
header h1 .orange{
   color: var(--gold);
}
 header .text{
    position: relative;
    z-index: 10;
    color: white;
    padding-top: rem;
    text-align: center!important;
    
   text-align: center;
 }
 header .logo{
   padding-left: 5rem;
 }
 .show-case video{
   width:100%;
   height:100%;
 }
 /* header .overlay{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
background:rgba(0,0,0, 1);
mix-blend-mode: overlay;
 } */
/* section 2 services */
.sec2 {
   padding-top: 5rem;
}
.sec2-wrapper{
   background-image: url('./images/features background-01.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center center ;
   padding-bottom: 8rem;

}
.sec2 .card{
   position: relative;
   margin-top: 2rem;
   border-radius: 0.5rem;
 }
.sec2 img{
width: 100%;
height: 10rem;
object-fit: cover!important;
border-radius: 0.5rem;

}
.sec2 .card-end img{
   width:87%
   
}
.sec2 .card .overlay:hover{
/* background: rgba(0,0,0,0.3)!important; */
background:    rgba(64,131,136, 0.7);
transition: all 0.9 ease;
border-radius: 0.5rem;
}
.sec2 .card:hover{
   border: 2px solid var(--green);
   transition: all 0.9 ease;
   border-radius: 0.5rem;
}
.sec2 p.main{
   text-align: center;
}
.sec2 .overlay {
   border-radius: 0.5rem;
   position: absolute; 
   bottom: 0;
   background: rgba(0,0,0,0.7); /* Black see-through */
   width: 100%;
   height:100%;
   transition: .5s ease;
   opacity: 1;
   color: white;
   font-size: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   font-size: 14px!important;
 }
.sec2 h2{
   margin-top: 3rem;
   margin-bottom: 1rem;
   font-weight: 700;
   font-size: 3rem !important;

   
}
.sec2 .card p{
   font-size: 18px;
   font-weight : 600;
}
.sec2 .card1 .overlay{
   background-color: black;
   color: black;
}
 /* contact section */
 #contact {
   background-color: rgb(239,237,237);
   padding-top: 5rem;
   background-image: url('./images/contact.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center center ;
   padding-bottom: 5rem;
 }
 .contact h1{
 font-weight: 600;
 }
 .contact p{
   font-size: small;
 }
 .contact .part1{
   margin-top: 6rem;
 }
 .contact .part2{
   margin-top: 5rem;
   padding-left: 3rem;
 }
 .contact .clr{
   color: var(--green);
 }
 .contact .social i{
   color: white;
   margin-right: 0.3rem;
   margin-top: 1rem;
   background-color: var(--green);
   width: 2rem;
   height: 2rem;
   display: flex;
   justify-content: center;
   align-items: center;
   display: inline-flex;
   border-radius: 0.3rem;
 }
 .contact .social i:hover{
   background-color: var(--blue);
 }
 .contact form input,
 .contact form textarea,
 .contact form select
  {
   width: 90%;
   border-radius: 0.7rem;
   margin-top: 0.2rem;
   padding: 0.3rem;
 }
 .contact form textarea{
   height: 5rem;
 }
 .contact form textarea,
 .contact .email input{
 width: 70%!important;
 }
 .contact form label {
   margin-top: 1.3rem;
 }
 .contact form{
   font-size: small!important;
 }
 .contact button{
 
   border-style: none;
   background-color: var(--green);
   color: white;
   padding: 0.4rem 3rem;
   border-radius: 0.6rem;
   margin-bottom: 3rem;
   margin-top: 1rem;
 
 }
/* headline */

.headline{
 
   background-color : var(--blue);
   color: white;
   padding: 4rem;
}
.headline p{
   width: 80%;
   margin: 0 auto;
   text-align:center;
   font-size: 1.3rem;
   line-height: 2;
      font-family: 'Playfair Display', serif!important;
  
}
button:hover{
   background-color: var(--blue) !important;
}
 footer{
   background-color: black;
   padding: 1.5rem;
   color: white;
   text-align: center;
   
 }

 /* responsiveness */
 @media(max-width: 1200px){
   header h1 {
      padding-top: 5rem;
  }

 }
 @media(max-width: 992px){
  header h1 {
   font-size: 2.5rem;
}
#contact {
   padding-top: 0rem;
}
header .text p {
   font-size: 1rem !important;
   padding: 0 1rem !important;
}
.headline p {
   width: 100%;
   font-size: 1rem;
}
.contact .part2 {
   margin-top: 5rem;
   padding-left: 1rem;
}
.contact form textarea {
   width: 60%!important;
}
 }
 @media(max-width: 900px){

header .text {
   width: 80%;
   margin: 0 auto;
}
header .text p {
   font-size: .8rem !important;
   padding: 0 1rem !important;
 
}
header button.header-contact {
   padding: 0.6rem 3rem;
 }
 .sec2 h2 {
   margin-top: 0rem;
   font-size: 2.4rem !important;
}
}
@media(max-width: 768px){
   header h1 {
      padding-top: 3rem;
   }
   .contact form textarea {
      width: 80%!important;
  }
   header h1 {
      font-size: 2rem;
   }
}
@media(max-width: 600px){
header h1 {
   font-size: 1.7rem;
}
header .text {
   width: 100%;
   margin: 0 auto;
}
.sec2 h2 {
   margin-top: 0rem;
   font-size: 1.8rem !important;
}
.headline {
 
   padding: 3rem 1rem;
}
.headline p {
   line-height: 1.5;
   font-size: 0.7rem;
}
}
@media(max-width: 520px){
.contact form textarea, .contact .email input {
   width: 90%!important;
}
nav .logo img {
   width: 18rem;
}
header h1 {
   font-size: 1.5rem;
}
header h1 {
   padding-top: 2rem;
}
}
@media(max-width: 460px){
   header button.header-contact {
      padding: 0.3rem 1.4rem;
      font-weight: 500;
  }

header .text p {
   font-size: .5rem !important;
   padding: 0 1rem !important;
}
header h1 {
   padding-top: 1rem;
   font-size: 1.3rem;
}
header .text p {
   margin-top: 0rem;
}
}