@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
	--blue-1: #08053f;
    --gray-1: #33324f;
    --radom-blue: #2a63ff;
    --blue-5: #618af9;
    --gray-6: #c9cbdf;
    --gray-2: #555470;
    --blue-2: #0e259c;
    --gray-10: #f8f8fb;
    --black: #000;
    --white: #fff;
    --blue-3: #2b47d8;
    --gray-3: #747894;
    --gray-4: #8d91ac;
    --gray-5: #b5b8cd;
    --blue-6: #c6d5ff;
    --blue-7: #e7edff;
    --gray-8: #e3e5f0;
    --gray-9: #eff0f8;
}
a {
	text-decoration: none;
}
img {
	max-width: 100%;
}
body {
    font-family: "Inter", sans-serif;
    color: var(--gray-1);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
}
.py-lg-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}
.button-small {
    color: var(--white);
    background-color: #080a1c;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 14px;
    transition: background-color .2s;
    display: flex;
}
.button-small.outline-gray {
    border: 1px solid var(--gray-6);
    color: var(--gray-2);
    background-color: #080a1c00;
    transition: opacity .2s, background-color .2s;
}
.button-small.blue {
    background-color: var(--radom-blue);
}
h1, h2, h3, h4 {
	color: var(--black);
}
button.navbar-toggler {
    padding: 0;
    border: 0;
    outline: none !important;
    box-shadow: none !important;
}
.product-name-container {
    background-color: var(--gray-10);
    border-radius: 10px;
    margin-bottom: 16px;
    padding: 12px;
    display: inline-block;
    color: var(--radom-blue);
    letter-spacing: .85px;
    text-transform: uppercase;
   	font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
}
.hero-card, .visual-card {
   	height: 420px;
    overflow: hidden;
    video {
    	margin-bottom: -5px;
		object-fit: cover;
    }
}
.feature-card {
    background: #fff;
}
.icon-box {
    background-color: var(--black);
    border-radius: 24px;
    width: 100%;
    height: 350px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.hover-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video fills the container without distortion */
    position: absolute;
    top: 0;
    left: 0;
}
.heading.h6 {
    color: var(--black);
    margin-bottom: 8px;
    font-family: Elza, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
}
.heading.h6.radom-blue, .heading.h6.is-heading-animated.blue {
    color: var(--radom-blue);
}
.cta-section {
    padding: 18% 0;
}
.contact-card {
    border: 1px solid var(--gray-8);
    background-color: var(--white);
    border-radius: 20px;
    padding: 32px;
}
.custom-input {
	height: 40px;
	border: 1px solid #cfd8e3;
	border-radius: 15px;
	padding: 0 15px;
	font-size: 16px;
	font-weight: 300;
	color: #111827;
	background-color: #f5f8fa;
	box-shadow: none !important;
	outline: none !important;
	&:focus {
		box-shadow: none !important;
		outline: none !important;
	}
}
.custom-input::placeholder {
  	color: #9ca3af;
}
.form-label {
	font-size: 1rem;
	margin-bottom: 0.5rem;
	color: #111827;
}
.text-danger {
  	color: #ef4444 !important;
}


@media (max-width: 991px) {
.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
footer {
	text-align: center;
}
.contact-card {
	padding: 18px;
}
}

@media (max-width: 575px) {
nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    li.nav-item {
    	margin: 5px 0;
    }
}
body.main-content {
	padding-top: 110px;
}
}