@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
  
  
html{
	scroll-behavior: smooth;
}
body{
    line-height: 1.5;
    font-family: 'Inter', sans-serif;
	scroll-behavior: smooth;
}
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}


.service-intro{
	position: relative;
	max-width: 100vw;
	 
}
.cover{
   
    width: 100%; 
	height: auto;
	
	
	
	
}   
.txt{
	width: 100%;
	position: absolute;
	color: white;
	/* justify-content: center; */
	text-align: center;
	letter-spacing: 2px;
	/* line-height: 35px; */
	top: 40%;
	z-index: 1;
}

.cover img{
    max-width: 100%;
}


@media screen and (max-width: 800px){
  .txt h1{
    font-size: 28px;
  }
}











.wholediv {
  padding-top: 5rem;
  margin-bottom: 120px;
}



/* investing intro */

.investing-intro h2{
  padding: 0rem 10rem;
  text-align: center; 
  color: #232761;   
  font-size: 28px;
}

.investing-intro p{
  padding: 0rem 10rem;
  text-align: center;
  color: darkslategray;
  font-weight: bold;
}



.services {
  max-width: 100vw;
  box-shadow: 2px 2px 20px rgba(0,0,0,0.12);

  padding: 3rem 5rem ;
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  grid-gap: 50px  ;
 

}

.service {
  padding: 30px; 
  background-color: white;
  text-align: center;
  box-sizing: border-box; 
}


.service p {

  font-size: 14px;
  color: darkslategray;
  font-size: 16px;
  padding: 0px 20px;
}




@media (max-width: 1024px){
  .services {
    
    padding: 2rem;
    grid-gap: 20px  ;
  }

}
@media (max-width: 768px) {
  .investing-intro h2{
    padding: 0rem 2rem;
  }
  .investing-intro p{
    padding: 0rem 2rem;
  }
 

  .services {
      grid-template-columns: 1fr; 
  }
  
  .service {
      max-width: 100%;
  }
  

}

@media (max-width: 520px){
  .investing-intro h2{
    padding: 0rem 1rem;
  }
  .investing-intro p{
    padding: 0rem 1rem;
  }
  .wholediv {
    padding-top: 2rem;
    margin-bottom: 120px;
}
  .services {
    padding: 1rem;
  }
  .service p {
    padding: 0px;
  }
  
}
















  






  /* benefits */



  .team-section {
    letter-spacing: .5px;
    display: grid;
    max-width: 100vw;
    padding: 5rem;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px 20px;
 
   
  }
  
  
  
  .container1 {
    position: relative;
  }
  .front{
    
    padding: 20px 0 40px 0;
 
  }
  .front img {
    width: 30%;
    display: block;
    margin: auto;
    padding: 20px;
    margin-bottom: 10px;
    background-color: white;
   

  }
  .front h2{
    font-size: 1.5rem;
    color: darkslategray;
    text-align: center;
  }
  .front h3{
    font-size: 1rem;
    color: darkslategray;
    font-weight: 500;
    
  }
  
  
  .back {
    align-items: center;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #171b45;
    padding: 30px;
    transform: perspective(600px) rotateY(180deg);
    transition: transform .5s linear 0s;
    backface-visibility: hidden;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.12);
    border-radius: 10px; 
  }

  .back img{ 
    width: 20%;
    object-fit: cover;
  }
  .back h2{
    font-size: 1.5rem;
    color: white;
    font-weight: 600;
  }
  .back h3{
    font-size: 1rem;
    color:rgba(232, 229, 229, 0.857) ;
    font-weight: 500;
  }
  .back p{
    font-size: 14px;
    color: rgba(232, 229, 229, 0.857);
  }
  
  .front {
   
    transform: perspective(600px) rotateY(0deg);
    transition: transform .5s linear 0s;
  
  
  }
  
  .container1:hover>.front {
    transform: perspective(600px) rotateY(-180deg);
    cursor: pointer;
  }
  
  .container1:hover>.back {
    transform: perspective(600px) rotateY(0deg);
    cursor: pointer;
  
  
  }
  
  
  
  @media(max-width: 1200px){
    .team-section {
      grid-gap : 50px ;
    }
    .front{
    
      padding: 20px 0 60px 0;
   
    }
  }
  @media(max-width: 1060px){
    .front img {
      width: 40%;
  
    }
    .team-section {
      grid-gap : 50px 100px ;
    }
    .team-section {
      grid-template-columns: repeat(2, 1fr);
  
  }
  .front{
    
    padding: 20px 0 80px 0;
 
  }
  }
  @media(max-width: 800px) {
    .team-section {
      grid-gap : 50px  ;
    }
    .team-section {
        grid-template-columns: repeat(2, 1fr);
  
    }
  }
  @media(max-width: 768px){
    .front img {
      width: 50%;
  
    }
    .back {
      padding: 10px;
    }
    /* .back img{
      display: none;
    } */

  }
  
  @media(max-width: 520px) {
    
    .team-section {
        grid-template-columns: repeat(1, 1fr);
    
        padding: 2rem;
    }
    .back {
      padding: 30px;
    }
    .back img{
      display: block;
      width: 30%;
      
      margin: auto;
      margin-bottom: 10px;
    }
   
   
  }
 @media(max-width: 355px){
    .back {
      padding: 15px;
    }
    
  }
    @media(max-width: 320px){
    
      .back img{
        display: none;
      }

    }

  






  /* get in  touch */

  .getintouch{
    text-align: center;
  }

   .getintouch a{
    background-color:  #689726 ;
    text-decoration: none;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    padding: 1rem 3rem;
    
}




/* other services */



  .otherservices-div{
    background-image: linear-gradient(white, #e7e7e7);
    padding: 5rem;
    
    
}

  .otherservices-div h2{
    text-align: center;
    font-size: 28px;
    color: #232761;
  }


  .other-div{
    max-width: 100vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    
    
   
}


.other-box{
 
    width:30% ;
   padding: 20px;
   margin-bottom: 20px;
    border-bottom: 5px solid rgb(104, 151, 38);
    box-shadow: 2px 2px 20px rgba(0,0,0,0.12);
   
    
}


.other-box a{
  width: 100%;
  text-decoration: none;
  color: #232761;
  font-size: 24px;
 
  font-weight: 500;
  
}
.other-box a:hover{
  color: #689726;
}

@media screen and (max-width: 800px){
  
.other-box{
  width:100% ;
}
}