@tailwind base;
@tailwind components;
@tailwind utilities;





body {
  font-family: 'DM Sans', sans-serif;
}

a {
  cursor:pointer;
}


h1 {
  font-size: clamp(3rem, 5vw, 5rem) !important;
}

h2 {
  font-size:clamp(2rem, 4vw,3rem) !important;
}

h3 {
  border-right: 0.6px solid #D1D5DB;
}

.topbar {
  padding: 1rem;
}

.topbar p {
    font-size:0.8rem;
}

.hero-section {
  height:70vh;
}


section {
  display:flex;
  align-items:center; 
}

.card-left {
  margin-bottom: 10rem; 
}

.card-mid {
  margin-top: 9rem; 
}

.card-right {
  margin-bottom: 10rem; 
}

.stats-section {
  height: 40vh;
  overflow:hidden;
}

.testimonial-image {
  height: 100%;
}


.money-icon {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 70%;
  left: 60px;
  background-image: url('./money-icon.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 40%;
  
  transform: rotate(-25deg);
}

.notebook-icon {
  width: 170px;
  height: 150px;
  position: absolute;
  top: 70%;
  right: 60px;
  background-image: url('./notebook-icon.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 40%;
  
  transform: rotate(25deg);
}

.office-icon {
  width: 170px;
  height: 150px;
  position: absolute;
  top: 40%;
  right: 50%;
  background-image: url('./office-icons.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 40%;
  
  transform: rotate(10deg);
  transform: translateX(50%);
}

.card-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  
  background-color: aqua;
}


.vision-board {
  max-width: 900px;
  margin: 0  auto;

}

.vision-board img {
  width: 400px;
}

@media screen and (max-width: 768px){
  h3 {
    border-right: 0px solid #94a3b8;
  } 

  .card-left {
    margin-bottom: 0rem; 
  }
  
  .card-mid {
    margin-top: 0rem; 
  }
  
  .card-right {
    margin-bottom: 0rem; 
  }

  .money-icon{
    display: none;
  }

}