@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Manrope',sans-serif;
}

a {
    text-align: none;
    color: #369FFF;
}

i {
    font-size: 24px;
}

.container {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr;
    ;
}

    .container .lef-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 40px 0;
    }

    .container .left-section .logo img {
        width: 40px;
    }

    .container .lef-section .pic img {
        width: 100px;
    }

body {
    font-family: 'Roboto', sans-serif;
}
/* Custom Color Classes */
.text-custom-green {
    color: rgb(109, 171, 108);
}

.bg-custom-green {
    background-color: rgb(109, 171, 108);
}
.top-\[135px\] {
    top: 135px;
}
.top-\[7px\] {
    top: 7px;
}

.h-\[135px\] {
    height: 135px;
}

.w-\[86rem\] {
    width: 86rem;
}

.right-\[-50rem\] {
    right: -50rem;
}

.bottom-\[-115px\] {
    bottom: -115px;
}

.bottom-\[6px\] {
    bottom: 6px;
}
.h-fit {
    height: fit-content;
}
.invert {
    --tw-invert: invert(100%);
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}


.text-gray-500 {
    color: #c9c9c9;
}

.bg-gray-300 {
    background-color: rgba(17, 17, 17, 0.48);
}

.text-red-500 {
    color: rgb(201, 75, 75);
}

.bg-black-900 {
    background-color: #000;
}

.text-black-900 {
    color: #000;
}

/* Custom Checkbox Styles */
.checkbox-wrapper-Transparent {
    display: flex;
    align-items: center;
}

.cbx {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .cbx span:first-child {
        position: relative;
        width: 18px;
        height: 18px;
        border: 1px solid #9098A9;
        border-radius: 3px;
        transition: all 0.2s ease;
    }

    .cbx:hover span:first-child {
        border-color: #10B981;
    }

input[type="checkbox"]:checked + .cbx span:first-child {
    border-color: #10B981;
}

/* Additional Checkbox Styles for Visual Effects */
.cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: rgb(109, 171, 108);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.1s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}

input[type="checkbox"]:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
}

.cbx span:first-child:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(109, 171, 108);
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
    transition: all 0.6s ease;
}

input[type="checkbox"]:checked + .cbx span:first-child:before {
    transform: scale(3);
    opacity: 0;
}

/* Ripple Effect Styles */
.ripple-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 700ms linear;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Button Styles */
.btn {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s;
}