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

/* Montserrat font */
@font-face {
    font-family: "Montserrat";
    src: url("fonts/MyCustomFont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Crimson_Pro font */
@font-face {
    font-family: "Crimson_Pro";
    src: url("../fonts/Crimson_Pro/CrimsonPro-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Bree Serif */
@font-face {
    font-family: "Bree Serif";
    src: url("../fonts/Bree_Serif/BreeSerif-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 62.5%;
}

@media (max-width: 1200px) {
    html {
        font-size: 58%; /* Slightly smaller font for tablets */
    }
}

@media (max-width: 768px) {
    html {
        font-size: 55%; /* Smaller font for smaller devices */
    }
}

@media (max-width: 480px) {
    html {
        font-size: 50%; /* Adjust for very small screens */
    }
}
:root {
    --hero-font-size: 4rem;
    --sub-title-font-size: 3rem;
    --header-font-size: 1.8rem;
    --sub-title-body: 2rem;
    --font-montserrat: "Montserrat";
    --font-bree_serif: "Bree Serif", serif;
    --font-crimson_pro: "Crimson_Pro";
    --btn-size: 50px; /* Default size of the button */
    --btn-size-mobile: 45px; /* Button size on smaller screens */
    --btn-spacing: 30px; /* Default spacing from the edges */
    --btn-spacing-mobile: 15px; /* Spacing for mobile devices */
    --btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Shadow for the button */
    --btn-hover-scale: 1.1; /* Scale on hover */
    --btn-animation-scale: 1.2; /* Scale during beat animation */
}

.sub-title-hero {
    font-family: var(--font-crimson_pro);
    font-size: var(--sub-title-font-size);
}

.sub-title {
    font-family: var(--font-crimson_pro);
    font-size: var(--sub-title-font-size);
    font-weight: 600;
    color: #000;
}

.sub-title2 {
    font-family: var(--font-bree_serif);
    font-size: var(--sub-title-font-size);
    font-weight: 700;
    color: #054a91;
}

.sub-title-body {
    font-size: calc(var(--sub-title-body) - 0.2rem);
    font-family: var(--font-crimson_pro);
    color: #000;
}

/* Chatbox */
.chatbox-main {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 12;
}

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
    position: fixed;
    bottom: var(--btn-spacing);
    right: var(--btn-spacing);
    width: var(--btn-size);
    height: var(--btn-size);
    padding: 5px;
    box-shadow: var(--btn-shadow);
    transition: transform 0.2s ease-in-out;
    will-change: transform;
    z-index: 12; /* Ensure it stays above other elements */
    border: none; /* Remove default button borders */
    border-radius: 50%; /* Circular shape */
    background-color: #fff; /* Default button background */
    cursor: pointer; /* Show pointer on hover */
    visibility: hidden;
}
.open-button:hover {
    transform: scale(var(--btn-hover-scale));
}
@media (max-width: 768px) {
    .open-button {
        width: var(--btn-size-mobile);
        height: var(--btn-size-mobile);
        bottom: var(--btn-spacing-mobile);
        right: var(--btn-spacing-mobile);
    }
}

.open-button > svg {
    width: 100%;
    height: 100%;
    fill: #333;
    visibility: visible;
    left: 49%;
    bottom: 30%;
}

@keyframes beat {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(var(--btn-animation-scale));
    }
}

/* The popup chat - hidden by default */
.chat-popup {
    display: none;
    position: fixed;
    bottom: 0px; /* Distance from the bottom */
    right: 0px; /* Distance from the right */
    z-index: 12;
    width: 385px;
    height: 470px;
    max-height: 85%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    background-color: #fff;
}
@media (max-width: 768px) {
    .chat-popup {
        width: 90%;
        /* height: 85vh; */
    }
}

@media (max-width: 480px) {
    .chat-popup {
        width: 95%;
        height: 360px;
    }
    .welcomeChat{
        height: 80px !important;
    }
}

.chat-popup.show {
    display: block; /* Show when the class is present */
}

/* Add styles to the form container */
.form-container {
    max-width: 100%;
    background-color: white;
    z-index: 12 !important;
    box-shadow: 0 2px 10px #000;
    border-radius: 20px;
}

/* Chat Header */
.chat-header {
    padding: 10px 15px;
    font-size: 1.4rem;
    color: #fff;
    text-align: center;
    background: linear-gradient(180deg, #720d1d, #1f0308);
    background-color: red;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 80px;
}

.cancel {
    position: absolute;
    right: -10px;
    top: -10px;
    padding: 5px;
    width: 25px;
    height: 25px;
    background: #fff;
    font-size: 12px;
    color: #000;
    border-radius: 50%;
}
.welcomeChat{
    height: 100px;
}
/* Full-width textarea */
.form-container .chatarea {
    width: 100%;
    height: calc(100% - 70px);
    padding: 10px;
    overflow-y: auto;
}
@media (max-width: 480px) {
    .form-container .chatarea {
        padding: 5px;
    }
}

/* Scrollbar Styles */
.chatarea::-webkit-scrollbar {
    width: 8px;
}

.chatarea::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #d9d9d9;
    /* Rounded corners */
}

.chatarea::-webkit-scrollbar-thumb {
    background: #a9a9a9;
    border-radius: 10px;
}

/* Input Fields */
.chat-input > input,
.chat-input > input::placeholder {
    width: calc(100% - 50px);
    height: 40px;
    font-size: 1.4rem;
    padding: 5px 10px;
    margin-right: 5px;
    border-radius: 20px;
}

@media (max-width: 480px) {
    .chat-input > input {
        height: 35px;
        font-size: 1.2rem;
    }
}

.chat-input > button {
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
    margin-left: 5px;
    border-radius: 50%;
}

@media (max-width: 480px) {
    .chat-input > button {
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }
}

.welcomeChat > .d-block {
    font-size: 1.3rem;
}

.welcomeChat > .d-block > span {
    color: rgb(0, 0, 0);
    font-weight: 600 !important;
    font-family: var(--font-crimson_pro);
    font-size: 1.3rem;
    padding-left: 1rem;
}

.welcomeChat > .title,
.welcomeChat > .text {
    font-size: 1.6rem;
}
@media (max-width: 768px) {
    .welcomeChat > .title,
    .welcomeChat > .text {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .welcomeChat > .title,
    .welcomeChat > .text {
        font-size: 1.2rem;
    }
}
.welcomeChat > .text {
    font-weight: 400;
    font-size: 1.7rem;
}
.question > .p-3 {
    border: 2px solid #720d1d;
    cursor: pointer;
}

.question > .p-3:hover,
.answer > .p-3 {
    background: linear-gradient(180deg, #720d1d, #1f0308);
    background-color: red;
    color: #fff;
}
.welcome-chat-border {
    border-bottom: 1px solid #a9a9a9;
}
.chatbox-main .accordion {
    max-height: 100%;
    overflow-y: auto;
}

/* Accordion By nazish*/
.chatbox-main .accordion-button:not(.collapsed) {
    color: #fff !important;
    background: linear-gradient(180deg, #1f0308, #720d1d) !important;
    border-top-right-radius: 10px !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}
.chatbox-main .accordion-item {
    background: linear-gradient(180deg, #720d1d, #1f0308) !important;
    color: #fff;
    border-radius: 10px !important;
    font-family: var(--font-crimson_pro);
    font-size: 15px;
    font-weight: 400;
    margin-inline: 10px;
}
.chatbox-main .accordion-button {
    border-radius: 10px !important;
    background: linear-gradient(180deg, #720d1d, #1f0308) !important;
    color: #fff;
    font-size: 16px;
    font-family: var(--font-crimson_pro);
    font-weight: 300;
}
.chatbox-main .accordion-button::after {
    background-image: url("../assets/icons8-chevron-down-30.png") !important; /* Default state (collapsed) */
    transition: transform 0.3s ease, background-image 0.3s ease; /* Smooth transition */
}

.chatbox-main .accordion-button:not(.collapsed)::after {
    transition: transform 0.3s ease, background-image 0.3s ease; /* Smooth transition */
    background-image: url("../assets/icons8-chevron-down-30.png") !important; /* Open state */
    transform: rotate(-180deg);
}

/* Optional: Change color on hover or focus */

.expand .fa-expand,
.collapseBtn .fa-minus {
    color: #fff;
    position: absolute;
    font-size: 25px;
    top: 20px;
    right: 15px;
}
.chatbox-main .accordion-body {
    border-top: 1px solid #fff !important;
}
.my-expand {
    margin-inline: 50px !important;
}
.chatbox-main .accordion {
    margin-top: 10px;
    /* padding-bottom: 200px; */
    overflow-y: scroll;
    height: 180px;
}
@media screen and (max-width: 786px) {
    .accordion-item,
    .my-expand {
        margin-inline: 10px !important ;
    }

}
.team-u-video video{
    box-shadow: 0 0.2rem 1rem #0000001f;;
}
.chatbox-main .accordion {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer */
}

.chatbox-main .accordion::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.chat-header{
    height: 80px;
}
.welcomeChat{
    height: 100px;
}
.chatbox-main .accordion {
    height: 235px !important;
}
.copyright strong{
    font-size: 1.25rem !important;
}