@font-face {
     font-family: "JacR";
     src: url("../fonts/Jacques_Francois/JacquesFrancois-Regular.ttf") format("truetype");
 }

 /*
@font-face {
    font-family: "RoboR";
    src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "RoboM";
    src: url("../fonts/Roboto/Roboto-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "RoboS";
    src: url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype");
} */

 @font-face {
     font-family: "Sans";
     src: url("../fonts/OpenSans.ttf") format("truetype");
 }



 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     scroll-behavior: smooth;
 }


 html {
     overflow-x: hidden !important;
 }



 textarea {
     resize: none;
 }

 body {
     font-family: 'Sans';
     font-weight: 400;
     line-height: 30px;
     font-size: 16px;
     overflow-wrap: break-word;
     -webkit-font-smoothing: antialiased;
     background-color: #f3f3f347;
 }

 a {
     text-decoration: none;
 }

 /* scroll bar  */
 ::-webkit-scrollbar {
     width: 8px;
 }

 ::-webkit-scrollbar-track {
     background: #f1f1f1;
 }

 ::-webkit-scrollbar-thumb {
     background: var(--mainColor);
 }

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

 .mainBtn1 {
     font-size: 17px;
     padding: 12px 30px;
     font-weight: 500;
     background: #1f2937;
     color: white;
     border: none;
     position: relative;
     overflow: hidden !important;
     cursor: pointer;
     display: inline-block;
 }

 .mainBtn1 .gradient {
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
     margin-top: -0.25em;
     background-image: linear-gradient(rgba(0, 0, 0),
             rgba(0, 0, 0),
             rgba(0, 0, 0, 0.9));
 }

 .mainBtn1 .label {
     position: relative;
     top: -1px;
 }

 .mainBtn1 .transition {
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-duration: 500ms;
     background-color: var(--mainColor);
     border-radius: 9999px;
     width: 0;
     height: 0;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
 }

 .mainBtn1:hover .transition {
     width: 14em;
     height: 14em;
 }

 .mainBtn1:active {
     transform: scale(0.97);
 }

 .mainBtn1:hover .label {
     color: #000;
 }

 .mainBtn1:hover .gradient {
     background-image: linear-gradient(rgba(0, 0, 0, 0),
             rgba(0, 0, 0, 0),
             rgba(0, 0, 0, 0.2));
 }


 .customContainer,
 .customContainer3 {
     width: auto;
     padding-right: calc(1.5rem * .5);
     padding-left: calc(1.5rem * .5);
     margin-right: auto;
     margin-left: auto;
     transition: var(--easeInTransition);
 }

 h1 {
     font-size: clamp(1.65rem, 3vw, 2.65rem);
     font-family: 'Sans';
     color: var(--mainColor2);
     font-weight: 700;
 }

 h2 {
     font-size: clamp(1.65rem, 3vw, 2.65rem);
     font-family: 'Sans';
     color: var(--baseColor3);
     font-weight: 500;
 }

 h3 {
     font-size: clamp(1rem, 2vw, 1.5rem);
     font-family: 'Sans';
     color: var(--baseColor3);
     font-weight: 500;
     word-wrap: normal;
 }

 h4 {
     font-size: clamp(1.2rem, 2vw, 1.2rem);
     font-family: 'Sans';
     font-weight: 600;
 }

 h5 {
     font-size: clamp(1rem, 2vw, 1rem);
     font-family: 'Sans';
     color: var(--mainColor2);
     background-color: var(--mainColor);
     padding: 10px 20px 20px;
     display: inline-block;
     font-weight: 600;
     text-transform: uppercase;
     margin: 0;
     padding-bottom: 16px;
     margin-bottom: 30px !important;
     position: relative !important;
     overflow: hidden !important;
 }

 h5::before {
     content: "";
     position: absolute;
     left: 0;
     bottom: -5px;
     right: 0;
     background-repeat: repeat;
     height: 13px;
     background-size: 20px 20px;
     background-image: radial-gradient(circle at 10px -10px, transparent 14px, #fff 2px);
 }

 h5::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -5px;
     right: 0;
     background-repeat: repeat;
     height: 21px;
     background-size: 40px 20px;
     background-image: radial-gradient(circle at 10px 15px, #fff 12px, transparent 13px);
 }

 .choose-us-section,
 .schedule-section,
 .home-banner,
 .bg-gray,
 .service-achievement-section {
     h5::before {
         background-image: radial-gradient(circle at 10px -10px, transparent 14px, #eaeaea 2px);
     }

     h5::after {
         background-image: radial-gradient(circle at 10px 15px, #eaeaea 12px, transparent 13px);
     }
 }

 .service-page .choose-us-section {
     h5::before {
         background-image: radial-gradient(circle at 10px -10px, transparent 14px, #3c4141 2px);
     }

     h5::after {
         background-image: radial-gradient(circle at 10px 15px, #3c4141 12px, transparent 13px);
     }
 }

 /* h5>div {
     background: white;
     position: absolute !important;
     left: 0 !important;
     height: 50px !important;
     width: 100%;
     overflow: hidden;
     top: 31px;
     margin-bottom: 0 !important;
 }

 h5 svg {
     width: 610% !important;
     scale: 5;
     margin-top: -8px;
     margin-bottom: 0 !important;
 } */

 /* .choose-us-section h5 svg,
 .home-banner h5 svg {
     background: var(--bgColors) !important;
 } */

 h5 svg path {
     fill: #FBCF16 !important;
     margin-bottom: 0 !important;
 }

 @media (min-width: 320px) {

     .customContainer {
         width: auto;

     }
 }

 @media (min-width: 576px) {

     .customContainer {
         max-width: 540px;
         overflow: hidden;
     }
 }


 @media (min-width: 768px) {

     .customContainer {
         max-width: 720px;
     }
 }


 @media (min-width: 991px) {

     .customContainer {
         max-width: 960px;
     }
 }

 @media (min-width: 1200px) {

     .customContainer {
         max-width: 1170px;
     }

     .customContainer3 {
         max-width: 1580px;
     }
 }

 @media (max-width: 1600px) {

     section.home_banner.about_banner {
         height: 700px !important;
     }

 }

 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 /* Firefox */
 input[type=number] {
     -moz-appearance: textfield;
 }

 /* @media (min-width: 1500px) {

    .customContainer {
        max-width: 1470px;
    }
} */
 input:not(.exclude),
 textarea.form-control {
     margin-top: 7px !important;
     padding: 20px !important;
     border-color: #D9D9D9 !important;
     box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
 }

 .exclude {
     border-color: #999 !important;
 }

 .form-control.is-invalid,
 .was-validated .form-control:invalid {
     border-color: #D9D9D9 !important;
 }

 input::placeholder {
     color: #999 !important;
 }

 label.text-danger {
     padding-left: 10px;
     font-weight: 500;
     display: block;
     text-align: left !important;
 }

 label.form-label {
     display: none;
 }

 .choose_card .mainBtn2 {
     padding: 18px 40px 13px 40px;
 }

 .reviewSlide .fs14 {
     color: #454545 !important;
     text-transform: capitalize !important;
     font-size: clamp(1rem, 5vw, 1.3rem);
 }


 input.form-control,
 textarea.form-control {
     border-width: 10px !important;
 }

 input.form-control:focus,
 textarea.form-control:focus {
     box-shadow: none !important;
     border-color: var(--mainColor) !important;
 }