.indigo {
    background-color: rgb(81 69 205);
}

.car_input {
    width: 100%;
    border-top: none !important;
    border-right: none !important;
    border-bottom: 2px solid lightgrey;
    border-left: none !important;
    /* background-clip: content-box; */
}

.car_input_short {
    width: 48%;
}

.car_input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px white inset !important;
    box-shadow: 0 0 0 100px white inset !important;
}

.car_input:focus,
.car_input:active,
.car_input:hover,
.car_input:visited,
.car_input:target {
    border: none !important;
    border-bottom: 2px solid rgb(81 69 205) !important;
    box-shadow: 0 0 0 100px white inset !important;
}

.doubled_inputs {
    width: 100%;
    display: flex;
}

@media screen and (max-width: 768px) {
    .doubled_inputs {
        flex-direction: column;
    }

    .car_input_short {
        width: 100%;
    }
}

.short_input_container {
    width: 48%;
}

.short_input_container_left {
    margin-right: 2%;
}

.short_input_container_right {
    margin-left: 2%;
}

@media screen and (max-width: 768px) {
    .short_input_container {
        width: 100%;
    }

    .short_input_container_left {
        margin-right: 0;
    }

    .short_input_container_right {
        margin-top: 15px;
        margin-left: 0;
    }
}

.plan_card {
    height: 573px;
    width: 48%;
    margin-inline: 1%;
    padding: 12px;
    border: 1px solid lightgrey;
    border-radius: 12px;
    cursor: pointer;
}

.plan_card_landing {
    border: 1px solid rgb(104 117 245);
}




/* Light theme */
@media (prefers-color-scheme: light) {
    ::-webkit-scrollbar {
        width: 4px;
    }

    ::-webkit-scrollbar-track {
        background-color: rgb(55, 65, 81);
    }

    ::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 2px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar {
        width: 4px;
    }

    ::-webkit-scrollbar-track {
        /* background-color: rgb(55, 65, 81); */
        background-color: white;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 2px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }
}

.absolute-bottom-32 {
    position: absolute;
    bottom: 115px;
}

.absolute-bottom-22 {
    position: absolute;
    bottom: 72px;
}

.absolute-bottom-12 {
    position: absolute;
    bottom: 30px;
}

.extra-outer-div {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.outer-div {
    width: 50px;
    height: 50px;
    border: 1px solid rgb(229 237 255);
    border-radius: 50%;
    background-color: rgb(240 245 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner-div {
    width: 35px;
    height: 35px;
    border: 1px solid rgb(180 198 252);
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }

/*base code*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  .animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  /*the animation definition*/
  @-webkit-keyframes bounceInUp {
    0%, 100%, 60%, 75%, 90% {
      -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
      transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 3000px, 0);
      transform: translate3d(0, 3000px, 0)
    }
    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0)
    }
    75% {
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0)
    }
    90% {
      -webkit-transform: translate3d(0, -5px, 0);
      transform: translate3d(0, -5px, 0)
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0)
    }
  }
  @keyframes bounceInUp {
    0%, 100%, 60%, 75%, 90% {
      -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
      transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 3000px, 0);
      -ms-transform: translate3d(0, 3000px, 0);
      transform: translate3d(0, 3000px, 0)
    }
    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, -20px, 0);
      -ms-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0)
    }
    75% {
      -webkit-transform: translate3d(0, 10px, 0);
      -ms-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0)
    }
    90% {
      -webkit-transform: translate3d(0, -5px, 0);
      -ms-transform: translate3d(0, -5px, 0);
      transform: translate3d(0, -5px, 0)
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0)
    }
  }
  .bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
  }

/*the animation definition*/
@-webkit-keyframes flipInY {
    0% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      opacity: 0
    }
    40% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in
    }
    60% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      opacity: 1
    }
    80% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }
    100% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px)
    }
  }
  @keyframes flipInY {
    0% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      opacity: 0
    }
    40% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in
    }
    60% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      opacity: 1
    }
    80% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }
    100% {
      -webkit-transform: perspective(400px);
      -ms-transform: perspective(400px);
      transform: perspective(400px)
    }
  }
  .flipInY {
    -webkit-backface-visibility: visible!important;
    -ms-backface-visibility: visible!important;
    backface-visibility: visible!important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
  }


/* Initial state of the element */
.reveal-element {
  opacity: 0;
  transform: translateY(20px); /* Adjust as needed for the desired reveal effect */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Apply the reveal effect when the element comes into view */
.reveal {
  opacity: 1;
  transform: translateY(0);
}

.landing_1st_section {
  height: calc(100vh - 100px);
}


.modal {
	/* Underlay covers entire screen. */
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:1000;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display:flex;
	flex-direction:column;
	align-items:center;
  justify-content:center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

.modal > .modal-underlay {
	/* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
	position: absolute;
	z-index: -1;
	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
}

.modal > .modal-content {
	/* Position visible dialog near the top of the window */
  max-height: 85vh;


	/* Sizing for visible dialog */

	/* Display properties for visible dialog*/
	border:solid 1px #999;
	border-radius:8px;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
	background-color:white;
	padding:0.5rem;

	/* Animate when opening */
	animation-name:zoomIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

.modal.closing {
	/* Animate when closing */
	animation-name: fadeOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

.modal.closing > .modal-content {
	/* Animate when closing */
	animation-name: zoomOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes zoomIn {
	0% {transform: scale(0.9);}
	100% {transform: scale(1);}
}

@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0.9);}
}