@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap');

body, html {
    font-family: 'Roboto', sans-serif !important; 
    scroll-behavior: smooth;
}
:root {
    --F4Gray : #606060;
    --F4Green : #8ABC3E;
    --F4GrayRed : #B5332E;
}

.text-green {
    color: var(--F4Green);
}
.bg-green {
    background-color: var(--F4Green);
}
.border-green,.divide-green {
    border-color: var(--F4Green) !important;
}
.bg-lightgreen {
    background:rgba(138, 188, 62,20%);
}
.text-gray {
    color: var(--F4Gray );
}
.bg-gray {
    background-color: var(--F4Gray );
}
.border-gray {
    border-color: var(--F4Gray );
}
.border-b-13 {
    border-bottom: 13px solid transparent;
}

#home-section {
    height: 500px;
    background: url('./assets/images/hero-image.png');
    background-size: 100% 100%;
}
#map-section {
    height: 500px;
}
#cs-section {
    height: 500px;
    background: url('./assets/images/cs-section-bg.png');
    background-size: 100% 100%;
}
@media screen and (max-width: 1023.9px) {
    #home-section {
        height: 350px;
        background: url('./assets/images/hero-image.png');
        background-size: 100% 100%;
    }
    .home-heading,.home-info  {
        background: var(--F4Gray);
        opacity: 75%;
    }
    .bg-lightgreen.show {
        background:#ffffff;
    }
}
@media screen and (max-width: 640px) {
    #home-section,#cs-section {
        height: 250px;
        background-size: 100% 100%;
    }
}
.slick-next:before, .slick-prev:before {
    font-size: 30px !important;
}
.slider-2 .slick-next:before, .slider-2 .slick-prev:before {
    font-size: 30px !important;
    color: var(--F4Green);
}
.slick-prev {
    left: -35px !important;
}
.slick-next {
    right: -25px !important;
}
.slick-dots li.slick-active button:before {
    opacity: .75;
    color: var(--F4Green) !important;
}
@keyframes shrink {
  from {width: 15rem;}
  to {width: 2.5rem;}
}
@keyframes expand {
    from {width:2.5rem;}
    to {width:  15rem;}
}
.animation-out{
    width: 100%;
    animation: slide-out .7s ease-in-out forwards;
}
@keyframes slide-out {
    from {width: 100%;}
    to {width: 0;}
  }
  .sidebar-animation {
      width: 0px;
      animation: slide .5s ease-in-out forwards;
  }
  @keyframes slide {
    from {width: 0;}
    to {width: 100%;}
  }

/* Select Input  */
.customSelect:after {
    content: '';
    position: absolute;
    color: #ffffff;
    background: var(--F4Green);
    width: 30px;
    height: 25px;
    right: 0px;
    top: 0px;
    pointer-events: none;
}
.customSelect:before {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    right: 8px;
    top: 11px;
    border-top: 6px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
    z-index: 1;
    pointer-events: none;
}
/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {
    display: none;
}

.customSelect select {
    -webkit-appearance: none;   
    -moz-appearance: none;
    appearance: none;
    color: #606060;
    display: block;
    width: 100%;
    background-color: white;
    padding-left: 10px;
    border: none;
    -ms-word-break: normal;
    word-break: normal;
    outline: none;
}

/* Radio Buttons  */

input[type="radio"] + label span {
    transition: background .2s,
      transform .2s;
}

input[type="radio"] + label span:hover,
input[type="radio"] + label:hover span{
  transform: scale(1.2);
} 

input[type="radio"]:checked + label span {
  background-color: var(--F4Green);
  box-shadow: 0px 0px 0px 2px white inset;
}

/* Slider  */
input[type=range]::-webkit-slider-thumb {
	pointer-events: all;
	width: 24px;
	height: 24px;
	-webkit-appearance: none;
  
/* @apply w-6 h-6 appearance-none pointer-events-auto; */
}

.arrow-prev::before {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    top: 8px;
    left: 2px;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 9px solid #fff;
    border-bottom: 6px solid transparent;
}

.arrow-next:before {
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    top: 8px;
    left: 10px;
    border-top: 6px solid transparent;
    border-left: 9px solid #fff;
    border-right: 6px solid transparent;
    border-bottom: 6px solid transparent;
}