@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');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Poppins",serif;
}
h2 {
    font-family: "Montserrat",serif;
}
/* ---------COLORS-------------- */
.bg_1 {
    background-color: #3d8eff;
}
.bg_2 {
    background-color: #ffac1e;
}
.color_1 {
    color: #ffac1e;
}
.color_2 {
    color: #005fe3;
}
.color_3 {
    color: #07c700;
}
.color_4 {
    color: #f08c00;
}
.bg_3 {
    background-color: rgba(255, 149, 0, 1);
}
.bg_4 {
    background-color: #ffe2b9;
}
.smaller_font {
    font-size: 11px;
}
.bg_black {
    background-color: #000000;
}
.bg_white {
    background-color: #ffffff;
}
/* -------------NAV CSS--------------- */
.navbar {
    width: 90%;
    top: 2rem;
}
.navbar-brand img {
    width: 250px;
}
.active {
    color: #ffc067 !important;
    font-weight: 800;
}
.nav-link:hover {
    color: #ffcc00 !important;
  } 
  .nav-link {
    position: relative;
    padding-bottom: 5px;
  }
  
  .nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ffcc00;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
  }
  
  .nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  } 
/* -----------BANNER CSS------------- */
.banner {
   background-image: url("../images/homepage/banner_image\ .png");
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   padding-top: 11rem !important;
}
.text-container,h1 {
    height: 50px;
}
.text-container {
    line-height: 50px;
    text-align: left;
    overflow: hidden;
}
.texts {
    position: relative;
    animation: text-change ease 8s infinite;
}
@keyframes text-change {
    0% {
        top: 0;
    }
    10% {
        top: 0;
    }
    20% {
        top: -50px;
    }
    30% {
        top: -50px;
    }
    40% {
        top: -100px;
    }
    50% {
        top: -100px;
    }
    60% {
        top: 0;
    }
    70% {
        top: 0px;
    }
    80% {
       top: -50px;
    }
    90% {
        top: -100px;
    }
    100% {
        top: 0;
    } 
}
/* ---------------------POPULAR CATEGORIES-------------------------- */
.box_hover:hover {
    background-color: #007bff;
    color: #fff !important;
    transform: translateY(-4px);
    transition: all 0.3s ease-out;
}  
/* -------LOGO CAROUSAL SECTION--------------- */
.logo_container{
    overflow: hidden;
    white-space: nowrap;
}
.logo_slide_a {
    animation: 10s logo_slide infinite linear;
    display: inline-block;
    overflow: hidden;
}
.logo_slide_b {
    animation: 10s logo_slide_2 infinite linear;
    display: inline-block;
    overflow: hidden;
    animation-direction: reverse;
}
.logo_slide img{
 margin: 0 10px;
 width: 170px;
}
.logo_a:hover .logo_slide_a{
    animation-play-state: paused;
}
.logo_b:hover .logo_slide_b{
    animation-play-state: paused;
}
@keyframes logo_slide {
    from{
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes logo_slide_2 {
    from{
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
/* -----------TOP COMPANIES-------------------------- */
    .top_companies .swiper {
      width: 100%;
      height: 500px;
      margin-left: auto;
      margin-right: auto;
    }

   .top_companies .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      height: calc((100% - 30px) / 2) !important;
      padding: 0;
    }
    .tilt {
        transition: transform 0.3s ease;
      }
      
      .tilt:hover {
        transform: rotate3d(1, 2, 0, 15deg);
      }
      
/* -----------------EXPLORE JOBS-------------------------- */
    html,
    body {
      position: relative;
    }
    .swiper_container {
     overflow: hidden;
     height: 450px;
   } 
    .swiper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      height: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 30px;
    }
    /* ---------------------------REVIEW SECTION----------------- */
    .smaller_font {
        font-size: 11px;
    }
    /* -------------INSTALL NOW DIV-------------------- */
    .install_now_div {
        background-color: rgba(61, 142, 255, 0.2);
    }
    /* ----------JOIN OUR COMMUNITY--------------------- */
    .join_our_community_div {
        background-color: rgba(61, 213, 255, 0.2);
    }
    /* ----------POST A JOB CSS-------------- */
    .post_a_job_div {
        background-image: linear-gradient(to bottom, #ffffff 8%,rgba(255, 149, 0, 0.6) 81%);
    }
    /* ----------FOOTER CSS---------------- */
    footer {
        background-image: url("../images/homepage/footer_background.png");
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
    /* ------------------BUTTON HOVER----------------- */
    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
        transition: background-color 0.3s ease;
      }
      
      .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
      }
      .btn {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }
      
      .btn:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      /* ------------------------------------- */
      .swiper-scrollbar-drag {
        background-color: #007bff;
        box-shadow: 0 0 10px rgba(7, 134, 207, 0.3);
      }
      .swiper-scrollbar {
          background-color: #e5e5ea;
          width: 15px !important;
          box-shadow: 0 0 10px rgba(0,0,0,0.2);
      }
      /* -------------------FOOTER HOVER------------------- */
      .footer-links a {
          transition: all 0.3s ease-in-out;
        }
        
      .footer-links a:hover {
          color: #007bff; 
          transform: translateX(5px);
        }
        
        .footer-links a::before {
          content: "";
          margin-right: 5px;
          transition: all 0.3s ease-in-out;
        }
        
        .footer-links a:hover::before {
          content: "\21D2";
          transform: translateX(5px);
        }
        /* --------------------------------------------------------------- */
    /* -----------------RESPONSIVE SECTION---------------------------- */
    @media screen and (max-width: 991px) {
        .navbar {
            position: static !important;
            width: 100%;
            border-radius: 0% !important;
         }
         footer {
            background-size: cover;
        }
        .logo_slide img {
            width: 200px;
        }
        .banner {
            padding-top: 4rem !important;
        }
    }
    @media screen and (max-width: 767px) {
        .logo_slide img {
            width: 130px;
        }
        .footer_logo {
            width: 250px;
        }
        .form_border {
            border: none !important;
            border-bottom: 1px solid #413f3f !important;
        }
    }
    @media screen and (max-width: 567px) {
        .navbar-brand img {
            width: 170px;
        }
        .logo_slide img {
            width: 70px;
        }
        .install_now_btn {
            position: static !important;
            transform: none !important;
             display: inline-block !important;
             margin-top: 15px;
        }
    }