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

body{
  background-color: white !important;
}


.text-last-center{
  text-align-last: center;
}

  
  /* Home Page Stars */
  .our-exp-img{
    background-image: url('../src/assets/red-pen-with-spiral-notepads-laptop-cactus-plant-pot-white-background.webp');
  
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: auto;
  }
  
  
  /* Custom Pagination Dots */
  .custom-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    background-color: #EDF4F2; 
    border-radius: 50%;
    opacity: 1; 
    transition: background-color 0.3s;
  }
  
  .custom-pagination .swiper-pagination-bullet-active {
    background-color: #31473A;
  }

  .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #31473A;
  }

  .bg-split {

    background: linear-gradient(to bottom, white 50%, #EDF4F2 50%);
  }


  
.lets-talk-btn{
    button {
      letter-spacing: 2px;
      text-transform: uppercase;
      display: inline-block;
      text-align: center;
    
      position: relative;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
      transition: 0.3s ease all;
      z-index: 1;
    }
    
    button:before {
      transition: 0.5s all ease;
      position: absolute;
      top: 0;
      left: 50%;
      right: 50%;
      bottom: 0;
      opacity: 0;
      content: '';
      background-color: #EDF4F2;
     
      z-index: -1;
    }
    
    button:hover, button:focus {
      color: black !important;
    }
    
    button:hover:before, button:focus:before {
      transition: 0.5s all ease;
      left: 0;
      right: 0;
      opacity: 1;
    }
    
    button:active {
      transform: scale(0.9);
    }
    }
    
     
    .all-services-btn{
    
    .button {
      position: relative;
      transition: all 0.3s ease-in-out;
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
      padding-block: 0.5rem;
      padding-inline: 1.25rem;
      background-color: #31473A; 
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffff;
      gap: 10px;
      font-weight: bold;
      border: 3px solid #ffffff4d;
      outline: none;
      overflow: hidden;
      font-size: 15px;
      cursor: pointer;
    }
    
    .icon {
      width: 24px;
      height: 24px;
      transition: all 0.3s ease-in-out;
    }
    
    .button:hover {
      transform: scale(1.05) !important;
      
    }
    
    .button:hover .icon {
      transform: translate(4px) !important;
    }
    
    .button:hover::before {
      animation: shine 1.5s ease-out infinite;
    }
    
    .button::before {
      content: "";
      position: absolute;
      width: 100px;
      height: 100%;
      background-image: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0) 70%
      );
      top: 0;
      left: -100px;
      opacity: 0.6;
    }
    
    }

      /* Home Page Ends */

 
  
  
    /* About Page Stars */
.aboutus-img{
  background-image: url('/images/modern-minimalist-office.webp');

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: auto;
}
.abou-c-img{
  background-image: url('../src/assets/businessman-making-phone-call-urban-environment.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: auto;
}

/* For about us List */
@media only screen and (max-width: 542px) {
  .text-list-div{
    padding-left: 0;
    padding-right: 0;
  }
  .no-list-rs {
    display: block; 
    padding: 1rem; 
    
  }
  .space-y-4{
    margin-top: 10px;
  }



  

  .absolute {
    position: static; 
  }

  

  .text-base {
    font-size: 0.875rem; 
  }

  .text-3xl {
    font-size: 1.5rem; 
  }

 
}


.Testimonials-swiper{

  .swiper-button-next{
   @apply right-2
}
.swiper-button-prev{
  @apply 
  left-2

}
.swiper-button-prev, .swiper-button-next {
  @apply
   sm:w-[40px]
  sm:h-[40px]
  rounded-full
  !text-primary

  w-[30px]
  h-[30px]



 
  bg-secondary
  
  shadow-[0px_5px_15px_rgba(0,0,0,0.35)]

}
.swiper-button-prev::after, .swiper-button-next::after{
  @apply md:text-lg
  text-sm
}

}

.about-us-c-btn{
  .neu-button {
    background-color: #EDF4F2; 
    border-radius: 50px;
    font-weight: bold;
    box-shadow: inset 4px 4px 10px #c9d4d1, inset -4px -4px 10px #ffffff; 
    color: #31473A; 
    cursor: pointer;
    font-size: 18px;
    padding: 6px 20px;
    transition: all 0.2s ease-in-out;
    border: 2px solid #c9d4d1; 
  }
  
  .neu-button:hover {
    box-shadow: 
      inset 2px 2px 5px #c9d4d1, 
      inset -2px -2px 5px #ffffff, 
      2px 2px 5px #c9d4d1, 
      -2px -2px 5px #ffffff; 
  }
  
  .neu-button:focus {
    outline: none;
    box-shadow: 
      inset 2px 2px 5px #c9d4d1, 
      inset -2px -2px 5px #ffffff, 
      2px 2px 5px #c9d4d1, 
      -2px -2px 5px #ffffff; 
  }
  
  }


  /* About Page Ends */



          /* Service page stars */

.services-bg-img{
  background-image: url('/images/businessmen-working-strategic-planning.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: auto;
}

.it-ai-img{
  background-image: url('../src/assets/129770.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: auto;
}


.exe-c-btn{
  .box {
   padding: 10px 15px;
    float: left;
    border: #31473A 1px solid;
    transition: .5s linear;
    position: relative;
    display: block;
    overflow: hidden;
   
    text-align: center;
    
    background: transparent;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  .box:before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    border-bottom: 3px solid transparent;
    border-left: 3px solid transparent;
    box-sizing: border-box;
    transform: translateX(100%);
  }
  
  .box:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-top: 3px solid transparent;
    border-right: 3px solid transparent;
    box-sizing: border-box;
    transform: translateX(-100%);
  }
  
  .box:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  
  }
  
  .box:hover:before {
    border-color: #262626;
    height: 100%;
    transform: translateX(0);
    transition: .3s transform linear, .3s height linear .3s;
  }
  
  .box:hover:after {
    border-color: #31473A;
    height: 100%;
    transform: translateX(0);
    transition: .3s transform linear, .3s height linear .5s;
  }
  
  button {
    color: #31473A;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    border: none;
    background: transparent;
  }
  }


  .custom-list-dots {
      ul {
      li {
      @apply relative pl-5 flex items-start  w-fit h-fit;
      &::before {
      content: '■';
      @apply absolute left-0 pr-2 text-green-800 sm:text-[12px] ;
      }
      }
      }
      }

/* Service page Ends */


/* Recruitment Page Stars */
.recruitment-img{
  background-image: url("/images/guyana-flag-in-waves-effect.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: auto;
}
.r-hr-img{
  
  background-image: url('../src/assets/kaieteur-falls.webp');

  background-position: center center;;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: auto;
}


.bg-recruitment-split{
background: linear-gradient(to bottom, #EDF4F2 65%, white 35%);

}

/* Recruitment Page Ends */
 

  /* Contact Page stars */
  .contact-shadow{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  }
    .contact-form {
      .form {
        position: relative;
      }
    .input{
      height: 40px !important;
    }
    .selected-flag{
      background-color: #EDF4F2 !important;
    }
      .input, .textarea {
        width: 100%;
      
        background-color: #EDF4F2;
        border: none;
        border-bottom: 1px solid rgba(221, 221, 221, 0.39);
        outline: none;
        padding: 0.7em;
        color: black;
      }
    
      .input:focus, .textarea:focus {
        outline: none;
      }
    
      .input-border, .textarea-border, .phone-input-border {
        position: absolute;
        width: 0%;
        height: 2px;
        bottom: 0;
        left: 0;
        transition: 0.7s;
      }
    
      .textarea-border {
        bottom: 6px;
      }
    
      /* Hover effects for input and textarea */
      .input:hover ~ .input-border, 
      .textarea:hover ~ .textarea-border{
        width: 100%;
      }
    
      /* React-Phone-Input-2 Styling */
      .phone-input-container {
        position: relative;
      }
    
      .phone-input {
        width: 100%;
        height: 40px !important;
        /* background-color: #EDF4F2; */
        border: none;
        outline: none;
        padding: 0.7em 0.5em 0.7em 3.5em; 
        color: black;
      }
    
      .phone-input:focus {
        outline: none;
      }
    
      .react-tel-input .flag-dropdown {
        position: absolute;
        top: 50%;
        left: 0;
        color: black;
        transform: translateY(-50%);
        background: transparent;
        border: none;
      }
    
      .react-tel-input .form-control {
        background-color: #EDF4F2;
        height: 40px;
        border: none;
        box-shadow: none;
        padding: 0.7em 0.5em 0.7em 3.5em;
        color: black;
        width: 100%;
      }
    
      .react-tel-input .form-control:hover {
        outline: none;
      }
    
    
      /* Hover effect for PhoneInput */
      .react-tel-input , .form-control:hover ~ .phone-input-border {
        width: 100%;
      }
       .react-tel-input:hover ~ .phone-input-border{
        width: 100%;
       }
    
      /* Phone Input Border */
      .phone-input-border {
        position: absolute;
       left: 0;
       bottom: 0;
        
        width: 0%;
        height: 2px;
        
        transition: 0.7s;
      }
    
      /* Responsive Grid */
      @media (max-width: 640px) {
        .contact-form {
          padding: 1rem;
        }
    
        .grid {
          grid-template-columns: 1fr;
        }
      }
  
      .input::placeholder , textarea::placeholder , .phone-input::placeholder{
        font-style: italic;
      }
    }

    .contact-bg-img{
        background-image: url('/images/office-desktop-with-laptop-business-man.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        aspect-ratio: auto;
      }

      /* Contact Page Ends */