@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=PT+Serif:wght@400;700&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,500;1,600;1,700;1,800;1,900&family=Questrial&family=Stardos+Stencil:wght@400;700&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');


body{     
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}
.main_nav ul{
    padding: 0px!important;
}

.block_quote{
    font-family: "Montserrat", sans-serif;
}

.timeline_box ol h3{
    color: #fff;
}
.timeline_box ol li{
  margin-left: 2.5rem;   
}



.cards { 
    display: grid;
    place-items: center; 
    min-height: 400px;
}  
.outer {
    display: flex;
    align-items: center;
    justify-content: center;
}  
.cards .card { 
    padding: 0.3rem; 
    max-width: 36rem; 
    position: absolute;
    pointer-events: none;
    opacity: 0;
    animation: animate 15s infinite linear;
    animation-delay: calc(3s * var(--delay));
}

.outer:hover .card {
    animation-play-state: paused;
}
.cards .card:last-child {
    animation-delay: calc(-3s * var(--delay));
}
  
  @keyframes animate {
    0% {
      opacity: 0;
      transform: translateY(100%) scale(0.5);
    }
    5%,
    20% {
      opacity: 0.4;
      transform: translateY(100%) scale(0.7);
    }
    25%,
    40% {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0%) scale(1);
    }
    45%,
    60% {
      opacity: 0.4;
      transform: translateY(-100%) scale(0.7);
    }
    65%,
    100% {
      opacity: 0;
      transform: translateY(-100%) scale(0.5);
    }
  }



.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 57.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 1600px){
    .container {
        max-width: 1260px!important; 
    }
}