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


:root{
  --primary-btn-color: #ffab00;
  --primary-btn-border: #ffb210;
  --hover-primary-btn-color: #ffbc34;
  --primary-background-color:#281972;
  --primary-color: #004AAD;
  --secondary-color: #363636;
}
.bg-primary-btn{
  font-size: 18px !important;
  background-color: var(--primary-btn-color);
}

.text-primary{
  color: var(--primary-color);
}
.bg-primary{
  background-color: var(--primary-background-color);
}

.text-orange{
  color: #FF914D;
}
.bg-gradient{
  background-image: linear-gradient(to right, #002960 , #59008F);
}
.form-gradient{
  background-image: linear-gradient(to right, #162840 , #004b8f);
}
.bg-gradient-sms {
  position: relative;
  min-height: 100vh; /* Set the desired height */
  width: 100%;
}
.bg-gradient-t{
  background-image: linear-gradient(to right, #ec433c, #d03d38);
}

.bg-gradient-sms::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/assets/banner-21bcdfec600ff7b9c5b4902c2f69fd6b21e49c51de3008e446f3e6feffe57c49.jpeg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scaleX(-1);
  z-index: -1; /* Move the pseudo-element behind the content */
}

.clock-font{
  font-family: 'Quantico', sans-serif !important;
}
.robot-cond-font{
  font-family: 'Roboto Condensed', sans-serif !important;
}
.gradien-sms{
  background: linear-gradient(145deg, #9946C6 0%, #001C73 100%);
}
.gradient-backgound{
  background: linear-gradient(to right,#a53895 0%,#de1774 24.88%,#e96547 48.1%,#ff8400 74.88%,#ff8400 100%);
}
.padding-select{
  padding-left: 0.1rem !important;
  padding-right: 1.7rem !important;
}
.detailtextsmall{
  font-size: .7rem;
  line-height: 1rem;
}
.min-height{
  min-width: 100vh;
}

@media only screen and (max-width: 540px) {
  .container{
    width: 89% !important;
  }
  .text-small{
    font-size: 8px;
    line-height: .5rem;
  }
  .textsmall {
    font-size: .6rem !important;
    line-height: .7rem !important;
  }
}
body{
  font-family: 'Poppins', sans-serif;
  margin: 0px;
}

.bg-customer-care{
  background-image: url(/assets/customer-happy-55ff63fb4d2e235e95d860683450c338d70c29fb7e020c343a92a1b4e144f6a8.webp) ;
  background-position: 85%;
  background-size: cover;
  height: 316px;
}
.bg-happy-people{
  background-image: url(/assets/happy-people-a3b65f00cc2b8981da0ceadb2742203bbe84b06fb497bb3292bf33abcd7bfa24.jpeg) ;
  background-position: right bottom;
  background-size: cover;
  height: 325px;
}
.gradient-text {
  font-size: 72px;
  background: -webkit-linear-gradient(to right,#fff, #fef08a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right,#fff, #fef08a);
}
.fs-small{
  font-size: .6rem !important;
  line-height: .7rem !important;
}
.lh-h1{
  line-height: 1.25 !important;
}
input.error{
  border: 2px solid #ff4747;
}
select.error{
  border: 2px solid #ff4747;
}
.error.parsley-required{
  font-size: 13px;
  color: #ff4747;
}
.parsley-error-list {
  font-size: 13px;
  color: #ff4747;
}
.error.parsley-type{
  font-size: 13px;
  color: #ff4747;
}
.custom-shadow{
  box-shadow: 20px 26px 49px 87px #0000001a,30px 22px 55px -22px #0000001a;
}
.input-fuel{
  background-color: #ffffff00;
  height: 100%;
  border: 3px solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 6px !important;
  -webkit-border-radius: 6px !important;
  -moz-border-radius: 6px !important;
  -ms-border-radius: 6px !important;
  -o-border-radius: 6px !important;
}
.input-fuel:hover{
  color: #3a3a3a;
  background-color: #ffcc06;
  border: 3px solid #ffffff;
}
input:checked ~ .input-fuel{
  color: #3a3a3a;
  background-color: #ffcc06;
  border: 3px solid #ffffff;
}
input:hover ~ .input-fuel{
  color: #3a3a3a;
  background-color: #ffcc06;
  border: 3px solid #ffffff;
}
input:hover ~ .input-fuel:after{
  content: none;
}

.input-payment {
  background-color: transparent;
  height: 100%;
  border: 3px solid #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px !important;
  color: white;
}
.input-payment::after {
  width: 0px !important;
  height: 0px !important;
  content: none !important;
}
.input-payment:hover{
  color: #3a3a3a;
  background-color: #ffcc06;
  border: 3px solid #ffffff;
}
input:checked ~ .input-payment{
  color: #3a3a3a;
  background-color: #ffcc06;
  border: 3px solid #ffffff;
}
input:hover ~ .input-payment{
  color: #3a3a3a;
  background-color: #ffcc06;
  border: 3px solid #ffffff;
}
.input-pay-radio{
  height: 100%;
}
.input-div{
  width: 100%;
}
.input-div-fuel{
  width: 100%;
}
#submitBtn:disabled {
  background: #ffe57d !important;
  color: #929292 !important;
  cursor: not-allowed;
}
.text-deco-color{
  text-decoration-color: #ffe57d;
  -moz-text-decoration-color: #ffe57d;
}
.text-bluedark{
  color: #0097B2 !important;
}
.bg-bluedark{
  background-color: #0097B2 !important;
}
.bg-green-light{
  background-color: #AEF4D4;
}
.bg-greendark{
  background-color: #20CD8D;
}
/* about page css*/
.answer-aboutUs {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out ;
}

.answer-aboutUs.answer-visible {
  max-height: 500px;
}

.custom-AboutUs-shadow{
  box-shadow: rgba(50, 50, 105, 0.15) 0px 1px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}
@media only screen and (max-width: 520px) {
  .bg-customer-care{
    background-position: 70%;
    height: 360px;
  }
  .text-sm-small{
    font-size: .575rem !important;
  }
  .text-smllest{
    font-size: 0.6rem !important;
  }
}
@media (max-width: 480px) {
  .customScale{
     transform: scale(.8);
    padding-top: 20px;
    padding-bottom: 30px;  
  }
  .custom-max-w{
    width: max-content;
  }
}
@media (max-width: 430px) {
  .custom-max-w{
    width: max-content;
  }
}
@media (max-width: 330px) {
  .custom-max-w{
    width: 100%;
  }
}
@media (max-width: 380px) {
  .customScale{
     transform: scale(.7);
    padding-top: 0px;  
  }
 
}

/* end about page css */
.input-usage {
  background-color: #ffffff;
  width: 100%;
  border: 2px solid #cacaca;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px !important;
  font-size: 16px;
  color: rgb(20, 20, 20);
  cursor: pointer;
}
.input-usage::after {
  width: 0px !important;
  height: 0px !important;
  content: none !important;
}
.input-usage:hover{
  color: white;
  border: 2px solid #ff8d29;
}
input:checked ~ .input-usage{
  color: white;
  background-color: #ff8d29;
  border: 2px solid #ff8d29;
}
input:hover ~ .input-usage{
  color: white;
  border: 2px solid #ff8d29;
  background-color: #ff8d29;
}
.input-usage-radio{
  height: 100%;
  width: 100%;
  left: 0;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */