/* Main Style Imported */
    @import url(mainstyle.css);

  /*=============
   Common CSS 
  ===============*/ 
    /* Header CSS */
    [data-resumev2-theme="light"] [data-logo="light"], [data-resumev2-theme="dark"] [data-logo="dark"]{
      display: block;
    }
     [data-resumev2-theme="light"] [data-logo="dark"],  [data-resumev2-theme="dark"] [data-logo="light"]{
      display: none;
    }
    .nav-link{
      color: var(--nav-text) !important;  
      text-transform: uppercase;
    } 
    .banner_main{
      background:linear-gradient(0deg, rgb(26 26 26), rgb(26 26 26 / 54%)), url(../../assets/images/banner3.webp) no-repeat;
      background-position: center center;
      background-size: cover;
      height: 220px;
    }
    .headline{
      -webkit-text-stroke: 1.25px white;
      color: transparent !important;
      font-family:var(--primefont);
      font-size: 45px;
    }
    @media (max-width:2500){
      .headline{ 
        font-size: calc(.6rem + 2vw);
      }
    }
    .card-img{
      position: relative;
    } 
    .img-label{
      position: absolute;
      left: 0px;
      bottom: 25px;
      min-height: 45px;
      display: flex;
      align-items: center;
      padding: 15px 40px 15px 10px;
      width: fit-content;
      border-radius: 0 50px 50px 0; 
      border-left: 0 !important;
      background-color: var(--card-bg);
    }
    .icon-bg{
      width: 30px;
      height: 30px;
      border-radius: 5px;
      background-color: var(--body-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.3s ease;
    }
    .icon-bg:hover{
      transform: translateY(-5px);
      background-color: var(--prime-bg);
      color: white; 
    }

  /* timeline */
  .timeline {
    position: relative;
    border-left: 3px solid var(--prime-border);
    padding-left: 0;
    display: grid;
    gap: 1rem;
  }

  .timeline__year-group {
    display: grid;
    gap: 1rem;
  }

  .timeline__year {
    background: var(--prime-bg);
    color: #fff;
    padding: 0.25rem 0.75rem;
    font-weight: bold;
    width: fit-content;
  }

  .timeline__cards {
    display: grid;
    gap: 1rem;
    z-index: 0;
    padding-left: 1.5rem;
  }
  .timeline__card{
    position: relative;  
  }
  .timeline__card::before {
      content: "";
      inline-size: 100%;
      block-size:  3px;
      background-color: var(--prime-bg);
      position: absolute;
      inset-block-start: 1rem;
      inset-inline-start: calc(-1.7 * 1rem);
      z-index: -1;
  }

  .timeline__card {
    background: var(--body-bg);
    padding: 15px;
    border-left: 3px solid var(--prime-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }
  
  .card__content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: var(--head-text);
  }

  .card__content p {
    margin: 0;
    color: var(--para-text);
  }

  .time-line-main  .slimScrollDiv, .time-line-main  .slimScrollDiv .time-line-scroll{
    height: 470px !important; 
  }

  .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
      color:white !important;
      background-color: var(--prime-bg);
      box-shadow: unset;
  } 
  .nav-link{
    border-radius: 8px !important;
  }
  .portfolio-slide{
    min-height: 760px;
  }
  .splide__arrow--prev {
      left: unset;
      right: 55px;
      width:25px;
      height:25px;
      top: 30px;
      bottom: -10px;
      border-radius: 5px;
      background-color:var(--body-bg);
      border: 1px solid var(--second-border);
      box-shadow: unset !important; 
      font-size: 12px;
  }
  .splide__arrow--next {
      left: unset;
      right: 20px;
      width:25px;
      height:25px;
      top: 30px;
      bottom: -10px;
      border-radius: 5px;
      background-color:var(--body-bg);
      border: 1px solid var(--second-border);
      box-shadow: unset !important; 
      font-size: 12px;
  }
  .splide__arrow svg{
    fill: var(--para-text);
    opacity: 1;
  } 
   #portfolio-slider  .slimScrollDiv, #portfolio-slider  .slimScrollDiv .portfolio-slider-track{
    height: 740px !important; 
  }
  .portfolio-slide img{
    object-position: top center;
    transition: 0.5s ease;
  }
   .portfolio-card{
    overflow: hidden;
   }
  .portfolio-label{
    opacity: 0;
    transition: 0.5s;
  }
  .img-label.portfolio-label{
    left: -100%;
  }
  .portfolio-card:hover .portfolio-label{
    opacity: 1;
    left: 0;
  }
  .portfolio-card:hover img{
    transform: scale(1.1);
  }
  .material-symbols-outlined { 
    font-weight: 200 !important; 
  }
  .about-card:hover{
    background-color: var(--prime-bg);
  }
  .about-card:hover h4, .about-card:hover p, .about-card:hover span{
    color: white !important;
  }
  .client-card{
    overflow: hidden;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .client-card img{
    transition: 0.5s ease;
  }
  .client-card:hover img{
    transform: scale(1.2);
  }
  .client-card:hover{
    border-color: var(--prime-border) !important ;
  }
    [data-resumev2-theme="dark"] .client-card img{
      filter: contrast(0);
    }
    .form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {
      display: none;
    } 
    .form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label { 
      transform: scale(.85) translateY(-.8rem) translateX(.15rem);
      opacity: 0.5;
      font-size: 12px;
    } 
    .error{
      color: red;
    }
    .form-control, .form-select-cust{
      position: relative !important;
    }
    label.error{
      position: absolute;
      bottom: 0;
      top: unset !important;
      left: unset !important; 
      text-align: right;
      padding: 5px 10px;
      width: 100%;
      height: unset !important;
      min-height: unset !important;
      font-size: 10px !important;
      transform: unset !important;
      line-height: unset !important;
      z-index: 5;
      opacity: 1 !important;
      color: red !important;
    }