@import url('https://fonts.googleapis.com/css?family=Poppins:700|Poppins:600|Poppins:500|Poppins:400|Poppins:300|Poppins:200|Poppins:100');

@import url(/animate/animate.css);

@font-face {
	font-family: Outfit-Md;
	src: url(/fonts/Outfit-Medium.ttf);
}

html{
	scroll-behavior: smooth;
}

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

:root {
	--text: #000000;
	--grey-text: #1a1a1a;
	--light-grey-text: #575757;
	--background-color: #f7f7f7;
	--primary: #EA2340;
	--secondary: #e9e9e9;
	--accent: #EA2340;


	--section-pad-up: 84px;
	--section-gap-up: 64px;
	--section-gap-down: 118px;
	--lg-border-rad: 44px;
	--md-border-rad: 28px;
	--sm-border-rad: 8px;
}

.bg-clr-dark{background-color: var(--text);}
.bg-clr-grey{background-color: var(--grey-text);}
.bg-clr-lightgrey{background-color: var(--light-grey-text);}
.bg-clr-bgwhite{background-color: var(--background-color);}
.bg-clr-primary{background-color: var(--primary);}
.bg-clr-offwhite{background-color: var(--secondary);}
.bg-clr-primaryaccent{background-color: var(--accent);}

.txt-clr-dark{color: var(--text);}
.txt-clr-grey{color: var(--grey-text);}
.txt-clr-lightgrey{color: var(--light-grey-text);}
.txt-clr-bgwhite{color: var(--background-color);}
.txt-clr-primary{color: var(--primary);}
.txt-clr-offwhite{color: var(--secondary);}
.txt-clr-primaryaccent{color: var(--accent);}

body {
	font-family: 'Poppins';
	font-weight: 500;
	line-height: 1.13;
	background: #fdfdfd;
	overflow-x: hidden;
	
}

*,
*::before,
*::after {
    box-sizing: border-box; /* Ensures padding/border don’t add to element’s width/height */
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: 'Poppins';
	font-weight: 600;
}

a {
	text-decoration: none;
}

html {
	font-size: 100%;
}

/* 16px */
h1 {
	font-size: 3.366rem;
	/* 53.92px */
}

h2 {
	font-size: 2.525rem;
	/* 40.32px */
}

h3 {
	font-size: 1.894rem;
	/* 30.24px */
}

h4 {
	font-size: 1.421rem;
	/* 22.72px */
}

h5 {
	font-size: 1.066rem;
	/* 17.12px */
}

p {
	font-size: 1rem;
	/* 16px */
}

small {
	font-size: 0.750rem;
	/* 12px */
}

/* Setting base font size */
html {
	font-size: 16px;
}

/* Heading and paragraph styles using clamp */

.h1-big{
	font-size: clamp(2.5rem, 4vw + 1rem, 4.8rem);
}

.span-big{
	font-size: clamp(2.5rem, 4vw + 1rem, 3.8rem);
}

h1 {
	font-size: clamp(2.5rem, 4vw + 1rem, 3.8rem);
}

/* Minimum: 2rem, Fluid: 4vw, Max: 3.366rem (53.92px) */
h2 {
	font-size: clamp(1.75rem, 3.5vw, 2.525rem);
}

/* Minimum: 1.75rem, Fluid: 3.5vw, Max: 2.525rem (40.32px) */
h3 {
	font-size: clamp(1.5rem, 2.75vw, 1.894rem);
}

/* Minimum: 1.5rem, Fluid: 2.75vw, Max: 1.894rem (30.24px) */
h4 {
	font-size: clamp(1.3rem, 2vw, 1.421rem);
}

/* Minimum: 1.25rem, Fluid: 2vw, Max: 1.421rem (22.72px) */
h5 {
	font-size: clamp(1rem, 1.5vw, 1.066rem);
}

/* Minimum: 1rem, Fluid: 1.5vw, Max: 1.066rem (17.12px) */
p {
	font-size: clamp(0.875rem, 1.25vw, 1rem);
}

/* Minimum: 0.875rem, Fluid: 1.25vw, Max: 1rem (16px) */
small {
	font-size: clamp(0.6rem, 1vw, 0.75rem);
}

.p-small {
	font-size: clamp(0.7rem, 1.25vw, 0.9rem);
}

/* Minimum: 0.75rem, Fluid: 1vw, Max: 0.75rem (12px) */
/* h1 { font-size: clamp(2.5rem, 4vw, 3.4rem); } */

.fw-1 {
	font-weight: 100;
}

.fw-2 {
	font-weight: 200;
}

.fw-3 {
	font-weight: 300;
}

.fw-4 {
	font-weight: 400;
}

.fw-5 {
	font-weight: 500;
}

.fw-6 {
	font-weight: 600;
}

.fw-7 {
	font-weight: 700;
}

.section-gap-both{
	margin: var(--section-gap-up) 0;
}

.section-pad-both{
	padding: var(--section-pad-up) 0;
}

.section-pad-up{
	padding: var(--section-pad-up) 0 0 0 ;
}

.section-gap-up {
	margin: var(--section-gap-up) 0 0 0;
}

.section-gap-down {
	margin-bottom: 0 0 var(--section-gap-down) 0;
}

.badge-txt {
	padding: 4px 10px;
	background-color: #ffffff36;
	border-radius: var(--sm-border-rad);
	color: white;
}

.rec-roundbtn {
	padding: 4px 10px;
	background-color: var(--primary);
	border-radius: 6px;
	color: white;
}

.myrounded-4 {
	border-radius: 12px;
}

.myrounded-5 {
	border-radius: 20px;
}

.roundbox-padding{
	padding: clamp(32px, 2vw + 1.8rem, 64px) clamp(28px, 2vw + 2rem, 58px);
}

.boxicon-width{
	width: 72px;
}

.underline-lg {
    position: relative;
    z-index: 2;
    display: inline-block;
}

.underline-lg:before {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 10px;
    background-color: #EA2340;
    transition: height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)
}

.underline-lg:hover:before {
    height: 95%; /* Expands to full width on hover */
}



/* - - - - Main CSS - - - - */

.rel-box {
	position: relative;
}


.abs-box {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: center;
	gap: 60px;
	transition: gap 0.3s ease-in-out;
}

.abs-box a {
	color: var(--background-color);
	font-size: clamp(0.6rem, 1vw, 1rem);
}

@media screen and (max-width:992px) {
	.abs-box {
		gap: clamp(26px, 2vw, 60px);
	}
}

@media screen and (max-width: 768px) {
	.abs-box {
		margin-left: 38px;
	}
	.abs-box a {
		font-size: clamp(0.35rem, 1vw, 1rem);
	}	
}

.parallax-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
    z-index: 1; /* Make sure the overlay is behind the content but above the background */
}

.roundbox-padding {
    z-index: 2; /* Ensure content is above the overlay */
}



.btn{
	transition: all 0.3s ease-in-out;
}

.btn-hover-primary:hover
{
	background-color:var(--primary);
}

.icon-card{
	transition: all 0.3s ease-in-out;
}

.icon-card:hover{
	transform: scale(1);
	.boxicon-width{
		animation: swing 0.5s 1;
	}
}

.form-control{
	border: 1px solid #aaaaaa;
	transition: all 0.3s ease-in-out;
}

.form-control:focus {
	border: 1px solid rgba(255, 31, 15, 0.5);
box-shadow: 0 0 0px 2px rgba(255, 31, 15, 0.5); /* Add a slight shadow around the input */
outline: none;
}

.form-label{
	font-size: 14px;
	color: #4d4d4d;
}


.button-primary {
    background-color: #EA2340;
    border: none;
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
	text-align: center;
}

.button-primary:hover {
    background-color: #161616; /* Darker shade on hover */
}


.button-outline-primary {
    background-color: transparent;
	border: 2px solid var(--primary);
    color: var(--primary);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}



.button-outline-primary:hover {
    background-color: var(--primary);
	border: 2px solid transparent;
    color: #fff; /* Switch text to white on hover */
}

.button-outline-white {
    background-color: transparent;
	border: 1px solid white;
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
	text-align: center;

}



.button-outline-white:hover {
    background-color: var(--primary);
	border: 1px solid transparent;
    color: #fff; /* Switch text to white on hover */
}


.btn-nobg-primary{
	color: var(--primary);
	transition: all 0.3s ease-in-out;
}

.btn-nobg-primary:hover{
	color: var(--text);
}

/* .btn-nobg-primary:before{
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	height: 1px;
	width: 0%;
	background-color: var(--grey-text);
	transition: all 0.3s ease-in-out;
}

.btn-nobg-primary:hover:before
{
	width: 100%;
} */
.btn-nobg-dark{
	color: var(--text);
}