/* COPY ALL STYLES FOR FEATURE HOME */
/* ADD CUTSOM STYLES HERE */
:root {
    --primary: #17254d;
    --secondary-200: #009483;
    --secondary-300: #007766;
    --secondary-400: #006758;
    --secondary-500: #7fcac1;
    --neutral-700: #374151;
    --neutral-content: "#9CA3AF";
}

@font-face {
    font-family: "Mukta";
    src: url("../fonts/Mukta/Mukta-ExtraLight.ttf") format("truetype");
    font-weight: 100;
}

@font-face {
    font-family: "Mukta";
    src: url("../fonts/Mukta/Mukta-ExtraLight.ttf") format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: "Mukta";
    src: url("../fonts/Mukta/Mukta-Light.ttf") format("truetype");
    font-weight: 300;
}

@font-face {
    font-family: "Mukta";
    src: url("../fonts/Mukta/Mukta-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Mukta";
    src: url("../fonts/Mukta/Mukta-Medium.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Mukta";
    src: url("../fonts/Mukta/Mukta-SemiBold.ttf") format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: "Mukta";
    src: url("../fonts/Mukta/Mukta-Bold.ttf") format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "Mukta";
    src: url("../fonts/Mukta/Mukta-ExtraBold.ttf") format("truetype");
    font-weight: 800;
}

@font-face {
    font-family: "Almarai";
    src: url("../fonts/Almarai/Almarai-Light.ttf") format("truetype");
    font-weight: 100;
}

@font-face {
    font-family: "Almarai";
    src: url("../fonts/Almarai/Almarai-Light.ttf") format("truetype");
    font-weight: 200;
}

@font-face {
    font-family: "Almarai";
    src: url("../fonts/Almarai/Almarai-Light.ttf") format("truetype");
    font-weight: 300;
}

@font-face {
    font-family: "Almarai";
    src: url("../fonts/Almarai/Almarai-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Almarai";
    src: url("../fonts/Almarai/Almarai-Regular.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Almarai";
    src: url("../fonts/Almarai/Almarai-Bold.ttf") format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: "Almarai";
    src: url("../fonts/Almarai/Almarai-Bold.ttf") format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "Almarai";
    src: url("../fonts/Almarai/Almarai-ExtraBold.ttf") format("truetype");
    font-weight: 800;
}

body {
    color: var(--primary);
}

.home-item .banner {
    transition-duration: 1000ms;
}

.home-item:hover .banner,
.home-item.hover .banner {
    transform: scale(1.25);
    transition-duration: 1000ms;
}

.home-item .action {
    opacity: 0;
    transition: all 0.5s ease-out;
    transition-duration: 700ms;
}

.home-item:hover .action,
.home-item.hover .action {
    opacity: 1;
    transition: all 0.5s ease-in;
    transform: scale(1.25);
    transition-duration: 700ms;
}

.download-btn:hover path,
.download-btn.hover path {
    fill: var(--primary);
}

.download-btn:active path,
.download-btn.active path {
    fill: #fff;
}

.download-btn:focus path,
.download-btn.focus path {
    fill: #fff;
}

/* NEUTRAL OUTLINE BUTTON */
.neutral-btn:hover path,
.neutral-btn.hover path {
    fill: var(--neutral-700);
}

.neutral-btn:disabled path,
.neutral-btn.disabled path {
    fill: var(--neutral-content);
}

.download-link path {
    fill: var(--secondary-200);
}

.download-link:hover path,
.download-link.hover path {
    fill: var(--secondary-300);
}

.download-link:active path,
.download-link.active path {
    fill: var(--secondary-400);
}

.download-link:focus path,
.download-link.focus path {
    fill: var(--secondary-500);
}

#progress-bar,
#progress-bar-c {
    width: 0;
}

select:invalid {
    color: #a5abb6;
}

.rotate180 {
    transform: rotate(180deg);
    transition-duration: 500ms;
}

.rotateC180 {
    transition-duration: 500ms;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/* Chatbot css starts */
.chatbot-container {
    position: fixed;
    right: 0;
    z-index: 12;
    bottom: 45px;
    width: 100px;
}

    .chatbot-container .chatbot-icons .chatbot img {
        position: absolute;
        right: 20px;
        bottom: 60px;
        cursor: pointer;
    }

    .chatbot-container .frame-container {
        background-color: transparent;
        width: 500px;
        height: 600px;
        position: fixed;
        bottom: 0px;
        right: 96px;
        z-index: 10000;
    }

        .chatbot-container .frame-container .chatbot-iframe {
            width: 100%;
            height: 100%;
            max-height: 600px;
            max-width: 500px;
            border: none;
            position: fixed;
            right: 96px;
            bottom: 0;
            z-index: 9999;
        }

        .chatbot-container .frame-container .close-chat-icon {
            width: 20px;
            height: 20px;
            color: #fff;
            border: 2px solid #fff;
            border-radius: 50%;
            display: inline-block;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 20px;
            right: 25px;
            background-color: #273867;
            cursor: pointer;
            z-index: 10000;
        }

    .chatbot-container .chatbot-icons .ant-spin-dot-item {
        background-color: #ffffff;
    }

@media (max-width: 650px) {
    .chatbot-container .frame-container {
        width: 100% !important;
        right: 0px !important;
        z-index: 10000;
        height: 100%;
        bottom: 0px !important;
    }

        .chatbot-container .frame-container .chatbot-iframe {
            max-width: unset !important;
            max-height: unset !important;
            right: 0px !important;
        }
}
/* Chatbot css ends */

/* Chatbot css starts - left position */
.chatbot-container-left {
    position: fixed;
    left: 0;
    z-index: 9999;
    bottom: 45px;
    width: 100px;
}

    .chatbot-container-left .chatbot-icons .chatbot img {
        position: absolute;
        left: 20px;
        bottom: 60px;
        cursor: pointer;
    }

    .chatbot-container-left .frame-container {
        background-color: transparent;
        width: 500px;
        height: 600px;
        position: fixed;
        bottom: 0px;
        left: 96px;
        z-index: 10000;
    }

        .chatbot-container-left .frame-container .chatbot-iframe {
            width: 100%;
            height: 100%;
            max-height: 600px;
            max-width: 500px;
            border: none;
            position: fixed;
            left: 96px;
            bottom: 0;
            z-index: 9999;
        }

        .chatbot-container-left .frame-container .close-chat-icon {
            width: 20px;
            height: 20px;
            color: #fff;
            border: 2px solid #fff;
            border-radius: 50%;
            display: inline-block;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 20px;
            right: 25px;
            background-color: #273867;
            cursor: pointer;
            z-index: 10000;
        }

    .chatbot-container-left .chatbot-icons .ant-spin-dot-item {
        background-color: #ffffff;
    }

@media (max-width: 650px) {
    .chatbot-container-left .frame-container {
        width: 100% !important;
        left: 0px !important;
        z-index: 10000;
        height: 100%;
        bottom: 0px !important;
    }

        .chatbot-container-left .frame-container .chatbot-iframe {
            max-width: unset !important;
            max-height: unset !important;
            left: 0px !important;
        }
}
/* Chatbot css ends - left position */

/*Floating Labels*/
.download-form label {
    position: relative;
    z-index: 10;
}

.download-form input,
.download-form select {
    background-color: #fff;
}
/* .download-form input::placeholder {
  opacity: 0;
}
.download-form .showPlaceholder::placeholder {
  opacity: 1 !important;
}
.download-form .input-span {
  position: absolute;
  top: 0;
  left: 11px;
  transform: translateY(13px);
  font-size: 0.825em;
  transition-duration: 300ms;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #fff;
  color: #a5abb6;
  z-index: 0;
}
label:focus-within > .input-span,
input:not(:placeholder-shown) + .input-span {
  transform: translateY(-10px);
  color: #17254d;
} */

/* HEADER */
.active-link {
    border-bottom: 2px solid #fff;
}

/* model-overlay*/
modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
}

.modal-overlay.modal-overlay-visible {
    display: block;
}
/* Video Modal Description Scrollbar */
#modalDescription::-webkit-scrollbar {
    width: 8px;
}

#modalDescription::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#modalDescription::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

    #modalDescription::-webkit-scrollbar-thumb:hover {
        background: #555;
    }