/* Define the primary color variable */
:root {
    --primary-color: #f03a49;
    --primary-color-hover: #d6333c;
    --primary-custom: #022D62;
    --primary-gray: #f5f5f5;
    --primary-bg: #fdecee;
    /* darker red for hover */
}

/* Links and text */

.text-info {
    color: var(--primary-custom) !important;
}

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

.bg-info {
    background-color: var(--primary-custom) !important;
}

.text-custom-grey {
    color: #B1BECE !important;
}

.bg-semi-circle {
    background-color: #B0B0B0 !important;
}

.bg-custom-gray {
    background: var(--primary-gray) !important;
}



/* Feature card border on hover */
.feature-card.border:hover {
    border-color: var(--primary-color) !important;
}

/* Dropdown links hover */
.dropdown-link:hover,
.dropdown-link:hover .drop-title,
.dropdown-link:hover i {
    color: var(--primary-color) !important;
}

/* Input and textarea border on focus */
.register-form input:focus,
.register-form textarea:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
}

/* Custom button */
.btn-custom {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    transition: background-color 0.3s, border-color 0.3s !important;
}

.btn-custom:hover {
    background-color: var(--primary-color-hover) !important;
    border-color: var(--primary-color-hover) !important;
    color: #fff !important;
}

/* Quote decorations */
.quote-decor {
    position: absolute;
    height: 80px;
    width: 80px;
    z-index: 1;
}

.quote-top-left {
    top: -3vh;
    left: 5%;
}

.quote-bottom-right {
    bottom: -10vh;
    right: 5%;
    transform: rotate(180deg);
}

/* Responsive */
@media (max-width: 991px) {
    .quote-decor {
        height: 60px;
        width: 60px;
    }

    .quote-top-left {
        top: -2vh;
        left: 0%;
    }

    .quote-bottom-right {
        right: 0%;
    }
}

@media (max-width: 768px) {
    .quote-top-left {
        top: 0vh;
        left: -5%;
    }

    .quote-bottom-right {
        right: -3%;
    }

    .introduction-heading {
        margin-bottom: 1.375rem;
    }
}

@media (max-width: 575px) {
    .quote-top-left {
        top: 0;
        left: 2%;
    }

    .quote-bottom-right {
        right: 2%;
    }
}

/* Custom icon process */
.custom-icon-process {
    color: rgb(61, 61, 61);
}

.process-card-two:hover .custom-icon-process,
.process-card-two:hover .process-icon {
    color: var(--primary-color);
}




.dropdown-grid--single {
    display: block !important;
    min-width: max-content;
    width: auto !important;
}

.dropdown-grid--single .dropdown-grid-item {
    width: 100% !important;

    border-radius: var(--bs-border-radius) !important;
}

.footer-text {
    color: var(--bs-secondary-dark) !important;
    opacity: .7 !important;
}




/* Position parent as context */
.navbar .nav-item.dropdown {
    position: relative;
}

/* Keep full width and align below menu item */
.navbar .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin-top: 0 !important;
}




/* Custom PLM Feature Card */
.custom-feature-card .app-two-single-feature-icon i {
    background-color: var(--primary-bg) !important;
    /* #fdecee */
    color: var(--primary-color) !important;
    /* #f03a49 */
    font-size: 25px !important;
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    text-align: center !important;
    display: inline-block !important;
    border-radius: 10px !important;
}



.btn-outline-light:hover,
.btn-outline-light:active,
.btn-outline-light.active,
.btn-outline-light.show {
    color: white !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Define the primary color variable */
:root {
    --primary-color: #f03a49;
    --primary-color-hover: #d6333c;
    --primary-custom: #022D62;
    --primary-gray: #f5f5f5;
    --primary-bg: #fdecee;
    /* darker red for hover */
}

/* Links and text */

.text-info {
    color: var(--primary-custom) !important;
}

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

.bg-info {
    background-color: var(--primary-custom) !important;
}

.text-custom-grey {
    color: #B1BECE !important;
}

.bg-semi-circle {
    background-color: #B0B0B0 !important;
}

.bg-custom-gray {
    background: var(--primary-gray) !important;
}

.text-primary,
a:hover {
    color: var(--primary-color) !important;
}

.career-card-hover:hover {
    color: white !important;
}

/* Feature card border on hover */
.feature-card.border:hover {
    border-color: var(--primary-color) !important;
}

/* Dropdown links hover */
.dropdown-link:hover,
.dropdown-link:hover .drop-title,
.dropdown-link:hover i {
    color: var(--primary-color) !important;
}

/* Input and textarea border on focus */
.register-form input:focus,
.register-form textarea:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
}

/* Custom button */
.btn-custom {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    transition: background-color 0.3s, border-color 0.3s !important;
}

.btn-custom:hover {
    background-color: var(--primary-color-hover) !important;
    border-color: var(--primary-color-hover) !important;
    color: #fff !important;
}

/* Quote decorations */
.quote-decor {
    position: absolute;
    height: 80px;
    width: 80px;
    z-index: 1;
}

.quote-top-left {
    top: -3vh;
    left: 5%;
}

.quote-bottom-right {
    bottom: -10vh;
    right: 5%;
    transform: rotate(180deg);
}

/* Responsive */
@media (max-width: 991px) {
    .quote-decor {
        height: 60px;
        width: 60px;
    }

    .quote-top-left {
        top: -2vh;
        left: 0%;
    }

    .quote-bottom-right {
        right: 0%;
    }
}

@media (max-width: 768px) {
    .quote-top-left {
        top: 0vh;
        left: -5%;
    }

    .quote-bottom-right {
        right: -3%;
    }

    .introduction-heading {
        margin-bottom: 1.375rem;
    }
}

@media (max-width: 575px) {
    .quote-top-left {
        top: 0;
        left: 2%;
    }

    .quote-bottom-right {
        right: 2%;
    }
}

/* Custom icon process */
.custom-icon-process {
    color: rgb(61, 61, 61);
}

.process-card-two:hover .custom-icon-process,
.process-card-two:hover .process-icon {
    color: var(--primary-color);
}




.dropdown-grid--single {
    display: block !important;
    min-width: max-content;
    width: auto !important;
}

.dropdown-grid--single .dropdown-grid-item {
    width: 100% !important;

    border-radius: var(--bs-border-radius) !important;
}

.footer-text {
    color: var(--bs-secondary-dark) !important;
    opacity: .7 !important;
}




/* Position parent as context */
.navbar .nav-item.dropdown {
    position: relative;
}

/* Keep full width and align below menu item */
.navbar .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin-top: 0 !important;
}




/* Custom PLM Feature Card */
.custom-feature-card .app-two-single-feature-icon i {
    background-color: var(--primary-bg) !important;
    /* #fdecee */
    color: var(--primary-color) !important;
    /* #f03a49 */
    font-size: 25px !important;
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    text-align: center !important;
    display: inline-block !important;
    border-radius: 10px !important;
}

.btn-outline-light:hover,
.btn-outline-light:active,
.btn-outline-light.active,
.btn-outline-light.show {
    color: white !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Define the primary color variable */
:root {
    --primary-color: #f03a49;
    --primary-color-hover: #d6333c;
    --primary-custom: #022D62;
    --primary-gray: #f5f5f5;
    --primary-bg: #fdecee;
    /* darker red for hover */
}

/* Links and text */

.text-info {
    color: var(--primary-custom) !important;
}

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

.bg-info {
    background-color: var(--primary-custom) !important;
}

.text-custom-grey {
    color: #B1BECE !important;
}

.bg-semi-circle {
    background-color: #B0B0B0 !important;
}

.bg-custom-gray {
    background: var(--primary-gray) !important;
}



/* Feature card border on hover */
.feature-card.border:hover {
    border-color: var(--primary-color) !important;
}

/* Dropdown links hover */
.dropdown-link:hover,
.dropdown-link:hover .drop-title,
.dropdown-link:hover i {
    color: var(--primary-color) !important;
}

/* Input and textarea border on focus */
.register-form input:focus,
.register-form textarea:focus {
    border-color: var(--primary-color) !important;
    outline: none !important;
}

/* Custom button */
.btn-custom {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    transition: background-color 0.3s, border-color 0.3s !important;
}

.btn-custom:hover {
    background-color: var(--primary-color-hover) !important;
    border-color: var(--primary-color-hover) !important;
    color: #fff !important;
}

/* Quote decorations */
.quote-decor {
    position: absolute;
    height: 80px;
    width: 80px;
    z-index: 1;
}

.quote-top-left {
    top: -3vh;
    left: 5%;
}

.quote-bottom-right {
    bottom: -10vh;
    right: 5%;
    transform: rotate(180deg);
}

/* Responsive */
@media (max-width: 991px) {
    .quote-decor {
        height: 60px;
        width: 60px;
    }

    .quote-top-left {
        top: -2vh;
        left: 0%;
    }

    .quote-bottom-right {
        right: 0%;
    }
}

@media (max-width: 768px) {
    .quote-top-left {
        top: 0vh;
        left: -5%;
    }

    .quote-bottom-right {
        right: -3%;
    }

    .introduction-heading {
        margin-bottom: 1.375rem;
    }
}

@media (max-width: 575px) {
    .quote-top-left {
        top: 0;
        left: 2%;
    }

    .quote-bottom-right {
        right: 2%;
    }
}

/* Custom icon process */
.custom-icon-process {
    color: rgb(61, 61, 61);
}

.process-card-two:hover .custom-icon-process,
.process-card-two:hover .process-icon {
    color: var(--primary-color);
}




.dropdown-grid--single {
    display: block !important;
    min-width: max-content;
    width: auto !important;
}

.dropdown-grid--single .dropdown-grid-item {
    width: 100% !important;

    border-radius: var(--bs-border-radius) !important;
}

.footer-text {
    color: var(--bs-secondary-dark) !important;
    opacity: .7 !important;
}




/* Position parent as context */
.navbar .nav-item.dropdown {
    position: relative;
}

/* Keep full width and align below menu item */
.navbar .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin-top: 0 !important;
}




/* Custom PLM Feature Card */
.custom-feature-card .app-two-single-feature-icon i {
    background-color: var(--primary-bg) !important;
    /* #fdecee */
    color: var(--primary-color) !important;
    /* #f03a49 */
    font-size: 25px !important;
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    text-align: center !important;
    display: inline-block !important;
    border-radius: 10px !important;
}


.two-bg-dark-light {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(40%, #111827), color-stop(0, #f5f5f5)) !important;
    background-image: linear-gradient(90deg, #022D62 40%, #ffffff 0) !important;
}

.btn-outline-light:hover,
.btn-outline-light:active,
.btn-outline-light.active,
.btn-outline-light.show {
    color: white !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}



.input-group.is-invalid .form-control {
    border-color: #dc3545 !important;
    /* Bootstrap's red color */
}



.input-group.is-invalid .form-select {
    border-color: #dc3545 !important;
}

.form-control:focus {
    border-color: #dc3545 !important;
}



@media(min-width: 320px)and (max-width: 767px) {

    .two-bg-dark-light {
        background-image: -webkit-gradient(linear, left top, right top, color-stop(40%, #111827), color-stop(0, #f5f5f5)) !important;
        background-image: linear-gradient(90deg, #022D62 0%, #ffffff 0) !important;
    }

    .feature-section.ptb-100 {
        padding-bottom: 0px !important;
    }
}