@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;
    }

    .input-group input {
        padding: clamp(12px, 1.2vw, 16px);
        font-size: clamp(15px, 1.1vw, 16px);
    }
}

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

    .input-group input {
        padding: 14px 16px;
        font-size: 16px;
        border-radius: 8px;
    }

    .input-group label {
        font-size: 15px;
    }
}