html::-webkit-scrollbar {
    display: none;
}

html {
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-top: 0 !important;
}

body {
    color: #333333 !important;
}

:root {
    --color-dark-maroon: #460311 !important;
    --color-maroon: #5D0013 !important;
    --color-yellow: #C28618 !important;
    --color-light-yellow: #CC9934 !important;
    --color-gray: #6D6766 !important;

}

hr {
    margin: clamp(.1rem, 0.84vw, 2rem) 0;
    color: #000000 !important;
    border: 0;
    border-top: 1px solid !important;
    opacity: .25;
}

.h1,
h1 {
    line-height: .9;
}

.h2,
.h3,
.h4,
.h5,
.h6,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1;
}

.line-height {
    line-height: normal !important;
}

.cursor-pointer {
    cursor: pointer;
}

/* Pallete background colors */
.bg-dark-maroon {
    background-color: var(--color-dark-maroon) !important;
}

.bg-maroon {
    background-color: var(--color-maroon) !important;
}

.bg-yellow {
    background-color: var(--color-yellow) !important;
}

.transparent {
    background-color: transparent !important;
}

/* Pallete text colors */
.text-black {
    color: #333333 !important;
}

.text-light-black {
    color: rgb(51, 51, 51, .75) !important;
}

.text-maroon {
    color: var(--color-maroon) !important;
}

.text-dark-maroon {
    color: var(--color-dark-maroon) !important;
}

.text-yellow {
    color: var(--color-yellow) !important;
}

.text-light-yellow {
    color: var(--color-light-yellow) !important;
}

.text-semi-yellow {
    color: #E1C26B !important;
}

.text-super-light-yellow {
    color: #E1C26B !important;
}

.text-super-light-maroon {
    color: #AF818B !important;
}

.text-gray {
    color: var(--color-gray) !important;
}

.border-gray {
    border: clamp(0.5px, 0.2vw, 1px) solid #6D6766 !important;
}

/* Button */
.arrow-maroon {
    width: clamp(1px, 0.782vw, 30px);
    height: clamp(1px, 0.782vw, 30px);
}

.arrow-white {
    width: clamp(1px, 1.042vw, 40px);
    height: clamp(1px, 1.042vw, 40px);
}

.talk-btn-white,
.con con-btn,
.con-btn {
    width: clamp(1px, 10.417vw, 400px);
    height: clamp(1px, 2.865vw, 110px);
    border: clamp(1px, 0.2vw, 6px) solid #FFFFFF;
    border-radius: 50px;
}

.load-btn {
    width: clamp(1px, 10.417vw, 400px);
    height: clamp(1px, 2.865vw, 110px);
    border: clamp(1px, 0.2vw, 6px) solid #5D0013;
    border-radius: 50px;
}

.learn-btn {
    width: clamp(1px, 11.667vw, 448px);
    height: clamp(1px, 2.865vw, 110px);
    border: clamp(1px, 0.2vw, 6px) solid #5D0013;
    border-radius: 50px;
}

.read-btn {
    width: clamp(1px, 11.667vw, 448px);
    height: clamp(1px, 2.865vw, 110px);
    border: clamp(1px, 0.2vw, 6px) solid #5D0013;
    border-radius: 50px;
}

.talk-btn {
    width: clamp(1px, 28.698vw, 1178px);
    height: clamp(1px, 7.6042vw, 440px);
    border: clamp(2px, 0.2vw, 6px) solid #5D0013;
    border-radius: 200px;
}

.talk-btn-yellow {
    width: clamp(1px,36.3545vw,1386px);
    height: clamp(1px, 7.6042vw, 440px);
    border: clamp(2px, 0.2vw, 6px) solid white;
    border-radius: 200px;
}

.submit-btn {
    width: clamp(1px, 11.667vw, 448px);
    height: clamp(1px, 2.865vw, 110px);
    border: clamp(1px, 0.2vw, 6px) solid #5d0013;
    border-radius: 50px;
}

.read-btn:hover,
.learn-btn:hover,
.talk-btn-white:hover,
.con-btn:hover,
.submit-btn:hover {
    background-color: #C28618 !important;
    border: clamp(1px, 0.2vw, 6px) solid #C28618;
    color: white !important;
}

.con-btn:hover {
    background-color: #5D0013 !important;
    border: clamp(1px, 0.2vw, 6px) solid #5D0013;
}

.service-btn:hover {
    background-color: #5D0013 !important;
}

.read-btn:hover .arrow-maroon,
.learn-btn:hover .arrow-maroon {
    display: none;
}

.read-btn:hover .arrow-white,
.learn-btn:hover .arrow-white {
    display: block !important;
}

.talk-btn:hover {
    background-color: #5D0013;
    border: clamp(2px, 0.2vw, 6px) solid #5D0013;
    color: white !important;
}

.talk-btn-yellow:hover {
    background-color: #C28618;
    border: clamp(2px, 0.2vw, 6px) solid #C28618;
    color: white !important;
}

.talk-btn:hover a,
.read-btn:hover a,
.learn-btn:hover a,
.talk-btn-white:hover a,
.con-btn:hover a {
    color: #FFFFFF !important;
}

.service-btn:hover {
    background-color: #5D0013 !important;
}

.b-btn-white {
    border-bottom: clamp(1px, 0.4vw, 12px) solid transparent;
}

.b-btn-maroon {
    border-bottom: clamp(1px, 0.4vw, 12px) solid transparent;
}

.b-btn-white:hover {
    border-bottom: clamp(1px, 0.4vw, 12px) solid rgb(255, 255, 255, .53);
}

.b-btn-maroon:hover {
    border-bottom: clamp(1px, 0.4vw, 12px) solid #5D0013;
}

.arrow-circle img {
    width: clamp(1px, 3.1vw, 58px);
    height: clamp(1px, 3.1vw, 58px);
}

.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gap-lg {
    gap: clamp(1px, 1.458vw, 70px);
}


@keyframes moveRight {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.arrow-circle {
    position: relative;
    opacity: 0;
}


@media (max-width:767px) {

    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.2;
    }

    .learn-btn {
        width: clamp(1px, 46.05vw, 448px);
        height: clamp(1px, 10.466vw, 110px);
        border: clamp(1px, 0.6vw, 6px) solid #5D0013;
        border-radius: 50px;
    }

    .read-btn {
        width: clamp(1px, 46.05vw, 448px);
        height: clamp(1px, 10.466vw, 110px);
        border: clamp(1px, 0.6vw, 6px) solid #5D0013;
        border-radius: 50px;
    }

    .talk-btn {
        width: clamp(1px, 85vw, 1178px);
        height: clamp(1px, 20.466vw, 440px);
        border: clamp(2px, 0.6vw, 6px) solid #5D0013;
        border-radius: 200px;
    }

    .talk-btn-yellow {
        width: clamp(1px, 85vw, 1178px);
        height: clamp(1px, 20.466vw, 440px);
        border: clamp(2px, 0.6vw, 6px) solid #FFFFFF;
        border-radius: 200px;
    }

    .talk-btn-white,
    .con con-btn,
    .con-btn {
        width: clamp(1px, 33.256vw, 400px);
        height: clamp(1px, 10.466vw, 110px);
        border: clamp(1px, 0.6vw, 6px) solid #FFFFFF;
        border-radius: 50px;
    }

    .arrow-maroon {
        width: clamp(1px, 3.49vw, 30px);
        height: clamp(1px, 3.49vw, 30px);
    }

    .arrow-white {
        width: clamp(1px, 4.652vw, 40px);
        height: clamp(1px, 4.652vw, 40px);
    }

    .gap-lg {
        gap: clamp(1px, 3vw, 70px);
    }
}