@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap'); */

:root {
   --yellow: #f2c94c;
   --blue: #95b2d8;
   --lightblue: #f0f6fe;
   --lightGray: #a7a7a7;

   --liberty: #f2c94c;
   --moonstone: #51616D;
   --seaSerpent: #59C1D9;
   --slateGray: #74818C;
   --white: #F2F2F2;
   --navyBlue: #162C3C;
}

html {
   overflow-x: hidden !important;
}

body {
   overflow-x: hidden !important;
   font-family: Inter !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

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

a,
a:visited {
   text-decoration: none;
}

.container-fluid {
   padding: 0 !important;
}

/** COLORS */
.text-warning {
   color: var(--yellow) !important;
}

.text-liberty {
   color: var(--liberty) !important;
}

.text-moonstone {
   color: var(--moonstone) !important;
}

.text-gray {
   color: var(--slateGray) !important;
}

.text-navyBlue {
   color: var(--navyBlue) !important;
}

.bg-white-25 {
   background: linear-gradient(to bottom, rgba(226, 0, 0, 0) 0%, rgba(226, 0, 0, 0) 24.9%, white 25%, white 100%) !important;
}

.bg-lightblue {
   background-color: var(--lightblue) !important;
}

.bg-liberty {
   background-color: var(--liberty) !important;
}

.bg-navyBlue {
   background-color: var(--navyBlue) !important;
}

.carousel-item {
   max-height: 50rem;
}

.carousel-item img {
   width: 100%;
   height: auto;
   object-fit: cover;
   /* object-fit: cover;
   aspect-ratio: 4/3; */
}

.carousel-item.backdrop-img::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--navyBlue) !important;
   opacity: .8;
}

.carousel-control-circle {
   width: 3rem;
   height: 3rem;
   border-radius: 50%;
   background-color: #4b62a6d3;
   background-size: 60%;
}

/** PILL IMAGES */
.pill-left {
   border-top-left-radius: 35% 50%;
   border-bottom-left-radius: 35% 50%;
}

.pill-right {
   border-top-right-radius: 35% 50%;
   border-bottom-right-radius: 35% 50%;
}

.pill-left.border-white {
   border-top: solid white .5rem;
   border-left: solid white .5rem;
   border-bottom: solid white .5rem;
}

.pill-right.border-white {
   border-top: solid white .5rem;
   border-right: solid white .5rem;
   border-bottom: solid white .5rem;
}

/** BUTTONS */
.btn {
   border: none !important;
}

.btn-primary {
   color: black;
   background-color: var(--liberty) !important;
}

.btn-primary:hover {
   background-color: var(--lightblue) !important;
   color: var(--blue) !important;
}

.btn-secondary {
   background-color: var(--moonstone) !important;
}

.btn-secondary:hover {
   background-color: transparent !important;
   color: var(--seaSerpent) !important;
}

.btn-outline-light {
   border: 2px solid whitesmoke !important;
}

.input-group-text {
   border: solid 3px #95b2d838 !important;
}

.form-control {
   font-size: .9rem;
   border: solid 3px #95b2d838 !important;
}

.form-control:focus {
   box-shadow: 0 0 0 0.25rem #95b2d838 !important;
}

.form-control::placeholder {
   color: var(--lightGray);
   font-size: .9rem;
}

textarea.form-control {
   resize: none;
}

/** SCROLLBAR */
html *::-webkit-scrollbar {
   -webkit-appearance: none;
}

html *::-webkit-scrollbar:vertical {
   width: .4rem;
}

html *::-webkit-scrollbar-thumb {
   background-color: var(--navyBlue);
   border-radius: 1rem;
}

.modal-body {
   background-image: url("/assets/bgLightBlue.webp");
}

/** IMAGE STYLES */
.img-gradient {
   position: relative !important;
}

.img-gradient::before {
   content: "";
   position: absolute;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.158) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 65%, rgba(0, 0, 0, 0.158) 100%) !important;
   width: 100%;
   height: 100%;
}

/** FOOTER */
footer .fs-5 {
   font-size: .8rem !important;
}

footer .fs-6 {
   font-size: .6rem !important;
}

.hero-section {
   background: url('/assets/NDT.webp');
   background-size: cover;
   background-position: center;
   position: relative;
   padding: 140px 20px;
   color: white;

}

.hero-section::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--navyBlue);
   opacity: 0.4;
   z-index: 1;
}

.hero-content {
   position: relative;
   z-index: 2;
   text-align: center;
}

.hero-title {
   font-size: 3rem;
   font-weight: 800;
}

@media (max-width: 768px) {
   .hero-title {
      font-size: 2rem;
   }
}