@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,500;1,600;1,700;1,800;1,900&display=swap');


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



@layer base {

  @font-face {
    font-family: 'Gustavo_Bold';
    font-weight: 700;
    src: url('./assets/fonts/Gustavo_trial-Bold.ttf') format('truetype');
  }

  @font-face {
    font-family: 'Gustavo_Regular';
    font-weight: 400;
    src: url('./assets/fonts/Gustavo_trial-Regular.ttf') format('truetype');
  }

  @font-face {
    font-family: 'Gustavo_Medium';
    font-weight: 500;
    src: url('./assets/fonts/Gustavo_trial-Medium.ttf') format('truetype');
  }

  @font-face {
    font-family: 'Gustavo_Light';
    font-weight: 200;
    src: url('./assets/fonts/Gustavo_trial-Light.ttf') format('truetype');
  }
  
  :root {
    --yellow: #FCF325;
    --green: #2F9B48;
    --green-dark: #0E2625;
    --green-light: #3E5151;
    --green-extralight:#BDD9D7;
  }
  html {
    font-family: "Poppins", system-ui, sans-serif;
  }
  
  body{
    background: var(--green-dark);
  }
}


@layer components {
    .p{
        line-height: 1.75;
        font-weight: 300;
        font-size: 1rem/* 16px*/;
        color: rgb(107 114 128); 
    }
    h1, h3, h2,h5{
      font-family: "Gustavo_Regular";
      color:#fff;
    }
    .h2{
        font-size: 3rem;
        line-height: 1;
        font-weight: 600;
        background: -webkit-linear-gradient(#0E9304, #2B2B2B);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;;
    }
    .section-title {
        margin-bottom: 0.75rem;
        font-family: Sora, sans-serif;
        font-size: 2.25rem;
        line-height: 2.25rem;
        font-weight: 700;
        line-height: 1.25 !important;
    }
}

.wrapper {
  width: 100%;
  padding: 20px;
  float: left;
  /* min-height: 100vh; */
  position: relative;
}
.home_video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dot-pattern {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle,#3E5151 2px,transparent 0);
  background-position: 0 0,25px 25px;
  background-size: 120px 120px;
  animation: moveDotsUpwards 5s linear infinite;
}
@keyframes moveDotsUpwards {
  0% {
      background-position:0 0, 25px 25px
  }

  to {
      background-position:0 -120px, 25px -25px
  }
}
.glow {
  width: 300px;
  height: 300px;
  filter: blur(100px);
  background-color: #FCF325f7;
  top: -10%;
  left: -15%;;
  position:absolute;
}
.section_banner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
nav{
  background:var(--green-light);
}
.navbar-nav li a{
  color: rgba(255, 255, 255, 0.45);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 12px 24px;
  border-radius: 8px;
  transition: .3s all ease-in;
}
.navbar-nav li a:hover, .navbar-nav li a.active {
  background: var(--yellow);
  color: var(--green-dark);
}
.theme-btn{
  display: inline-flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  background: var(--yellow);
  text-decoration: none;
  color: var(--green-dark);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transition: .3s all ease-in;
}
.theme-btn:hover{
  background:var(--green);
}
/* insights_section css */
.insights_section dt{
  font-family: "Gustavo_Bold";
  color:#fff;
}

/* Solution section */
.solution_wrapper{
  width: 100%;
  float: left;
  position: relative;
  border-radius:30px;
}

/* Service Section */
.service_wrapper{
  width: 100%;
  float: left;
  position: relative;
}

/* Products Section */
.products_wrapper{
  width: 100%;
  float: left;
  position: relative;
}

/* getintouch wrapper */
.getintouch{
  width: 100%;
  float: left;
  position: relative; 
}
.getintouch dd{
  font-family: 'Gustavo_Light';
  color:#fff;
}

/* footer wrapper */
.footer_wrapper{
width: 100%;
float: left;
}

/* client slider scroll */
.slider-container {
  overflow: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
}
.slider-item {
  display: inline-block;
  /* width: 20%;  */
  cursor: pointer;
  vertical-align: middle; /* Center vertically */
}
.slider-item img{
  height: 80px;
  min-width:100%;
}