@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
--primary-color: #231F20;
--secondary-color: #656565;
--body-color: #656565;
--white-color: #FFFFFF;
--h1: clamp(40px, 2vw, 3vw);  /* Minimum size updated to 28px */
--h2: clamp(24px, 1.667vw, 1.667vw);  /* Minimum size updated to 24px */
--h3: clamp(22px, 1.458vw, 1.458vw);  /* Minimum size updated to 22px */
--h4: clamp(20px, 1.25vw, 1.25vw);    /* Minimum size updated to 18px */
--h5: clamp(16px, 1.042vw, 1.042vw);  /* Unchanged */
--h6: clamp(14px, 0.729vw, 0.729vw); 
--body-font: clamp(14px, 0.729vw, 0.729vw);
--primary-font: "Rubik";
--border-radius-8: clamp(8px, 0.417vw, 0.417vw);
--border-radius-12: clamp(12px, 0.625vw, 0.625vw);
--border-radius-16: clamp(16px, 0.833vw, 0.833vw);
}

* { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
body { font-family: "Rubik", serif; ; margin: 0; padding: 0; color: var(--secondary-color);; }

.w50 { width: 50%; }
.w100 { width: 100%; }
.h100 { height: 100%; }
img { width: 100%; height: 100%; object-fit: cover; }

h1 { font-size: var(--h1); font-weight: 600; line-height: 1.4; margin: 0 0 1.5rem; color: var(--primary-color); }
p { margin-top: clamp(8px, 0.42vw, 2.5vw); font-weight: 500; color: var(--primary-color); }

/* display classes */
.d_flex { display: flex; }
.d_ib { display: inline-block; }

/* flex classes */
.flex_wrap { flex-wrap: wrap; } 
.align_center { align-items: center; }
.align_start { align-items: flex-start; }
.align_end { align-items: flex-end; }
.space_between { justify-content: space-between; }
.flex_start { justify-content: flex-start; }
.flex_end { justify-content: flex-end; }
.flex_center { justify-content: center; }
.flex_column { flex-direction: column; }
.row_reverse { flex-direction: row-reverse; }

/* Padding */
.pd8 { padding: clamp(8px, 0.42vw, 2.5vw); }
.pd16, .pdtrl16 { padding: clamp(16px, 0.83vw, 3.33vw); }
.pd24 { padding: clamp(24px, 1.25vw, 4vw); }
.pd32 { padding: clamp(16px, 1.7vw, 5vw); }
.pd48 { padding: clamp(30px, 2.5vw, 6vw); }
.pd64 { padding: clamp(30px, 3.33vw, 8vw); }

/* Padding Top */
.pt8, .p8-0 { padding-top: clamp(8px, 0.42vw, 2.5vw); }
.pt16, .p16-0 { padding-top: clamp(16px, 0.83vw, 3.33vw); }
.pt40, .p40-0 { padding-top: clamp(20px, 2.08vw, 5.5vw); /* max changed to vw */ }

/* Padding Bottom*/
.pb8, .p8-0 { padding-bottom: clamp(8px, 0.42vw, 2.5vw); }
.pb16, .p16-0 { padding-bottom: clamp(16px, 0.83vw, 3.33vw); }

/* Position Classes */
.relative{ position: relative; }
.absolute{ position: absolute; }

/* Text Classes */
.text_center { text-align: center; }
.text_right { text-align: right; }
.text_left { text-align: left; }

/* Login Css */
.login-section { height: 100dvh; }
.login-form { padding: clamp(16px, 2.083vw, 3.5vw); background: #FFFFFF; border-radius: 1.042vw; width: 100%; max-width: 35%; margin: 0 auto; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; }
.input-group { margin-bottom: clamp(16px, 1.042vw, 1.042vw); }
.input-group label { display: block; margin-bottom: 5px; color: var(--primary-color); }
.input-group input { width: 100%; padding: 0.781vw; border: 1px solid #ddd; border-radius: 4px; }
.login-form button { background-color: var(--primary-color); border: 1px solid var(--primary-color); color: white; padding: clamp(15px, 0.781vw, 1vw); border-radius: 4px; cursor: pointer; font-size: 14px; transition: all .4s; display: block; width: 100%; }
.login-form button:hover { background-color: transparent; color: var(--primary-color); }
.login-form .forgot-password a { color: var(--primary-color); text-decoration: none; transition: all .4s; font-size: 14px; }
.login-form .forgot-password a:hover { color: var(--secondary-color);; }
.company-logo { max-width: clamp(150px, 10.417vw, 11vw); }

.custom-shape-divider-bottom { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: -1; }
.custom-shape-divider-bottom svg { position: relative; display: block; width: calc(289% + 1.3px); height: 36.458vw; }
.custom-shape-divider-bottom .shape-fill { fill: var(--primary-color); }
.lottie-animation { width: 100%; max-width: clamp(70px, 6.771vw, 6.771vw); position: absolute; top: 1.563vw; right: 1.563vw; }

/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Responsive Media Queries CSS
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
@media (max-width: 1280px) {
    .login-form { max-width: 70%; }
    .login-bottom-content { display: flex ; align-items: center; justify-content: center; }
    .login-bottom-inner { padding: 0; }
} 

@media (max-width: 991px) {
    .login-form { max-width: 100%; }
}