/*** Spinner Start ***/
/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
/*** Spinner End ***/

/*** Taller Sections Start ***/
/* Add a bit more vertical breathing room to content sections site-wide,
   without touching the footer, the copyright bar, or the homepage hero.
   (Doesn't apply to nelvia.php, which uses its own custom section classes
   rather than these Bootstrap py-4/py-5 utility classes.) */
.container-fluid.py-4:not(.footer),
.container-fluid.pt-4:not(.footer).pb-4 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.container-fluid.py-5:not(.footer),
.container-fluid.pt-5:not(.footer).pb-5 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
}
/*** Taller Sections End ***/

/*** Home Methodology Extra Height Start ***/
/* A bit more vertical breathing room specifically for the "Our Methodology"
   section on the home page (index.php only — the same section on about.php
   keeps the standard site-wide padding from the rule above). */
#home-methodology.container-fluid.pt-4.pb-4 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}

.home-methodology-cards {
    margin-top: 24px;
}
/*** Home Methodology Extra Height End ***/

/*** About Methodology Extra Height Start ***/
/* A bit more vertical breathing room for the "Methodology" section on the
   About page (about.php only), plus a bit more space above its 3 cards so
   they sit lower, clear of the title above them. */
#about-methodology.container-fluid.pt-4.pb-4 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}

.about-methodology-cards {
    margin-top: 24px;
}
/*** About Methodology Extra Height End ***/

/*** Call To Action Reduced Height Start ***/
/* Make all "call to action" banners across the site (the dev-cta component
   on web-development.php, e-commerce-solutions.php, it-infrastructure-cloud.php,
   cybersecurity.php, managed-it-services.php and nelvia.php, the solutions-cta
   on blog.php, and the cta section on the home page) a bit shorter than the
   site-wide section padding. */
.container-fluid.dev-cta.py-4,
.container-fluid.solutions-cta.py-4,
.container-fluid.cta.py-4 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}
/*** Call To Action Reduced Height End ***/

/*** Home Testimonial Extra Height Start ***/
/* The "What Our Clients Say" section on the home page uses a very tight
   pt-4/pb-2 pairing (1.5rem top, 0.5rem bottom by default) that the
   site-wide Taller Sections rule above doesn't match. Give it more
   breathing room, top and bottom. */
.container-fluid.testimonial.pt-4.pb-2 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}
/*** Home Testimonial Extra Height End ***/

/*** CTA Title Single Line Start ***/
@media (min-width: 992px) {
    .cta-title-nowrap {
        white-space: nowrap;
        font-size: 1.9rem;
    }
}
/*** CTA Title Single Line End ***/

/*** Section Subtitle Sizing Start ***/
.display-4 {
    font-size: 2.75rem;
}

.display-5 {
    font-size: 2.25rem;
}

@media (max-width: 768px) {
    .display-4 {
        font-size: 2.1rem;
    }

    .display-5 {
        font-size: 1.85rem;
    }
}
/*** Section Subtitle Sizing End ***/

/*** Section Separator Contrast Start ***/
.topbar.bg-light,
.expertise.bg-light,
.technologies.bg-light,
.cta.bg-light,
.tech-commitments.bg-light,
.core-competencies.bg-light,
.specialized-solutions.bg-light,
.dev-process.bg-light,
.enterprise-security.bg-light,
.solution-pillars.bg-light,
.engineering-standards.bg-light,
.defense-pillars.bg-light,
.managed-pillars.bg-light {
    background-color: #ECF0F1 !important;
}
/*** Section Separator Contrast End ***/

/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-xl-square {
    width: 66px;
    height: 66px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square,
.btn-xl-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn.btn-primary {
    color: var(--bs-white);
    border: none;
}

.btn.btn-primary:hover {
    background: var(--bs-dark);
    color: var(--bs-primary);
}

.btn.btn-light {
    color: var(--bs-primary);
    border: none;
}

.btn.btn-light:hover {
    color: var(--bs-white);
    background: var(--bs-primary);
}


/*** Topbar Start ***/
.topbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
    color: var(--bs-primary);
}

.topbar .dropdown .dropdown-menu a:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.topbar .dropdown .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: var(--bs-light);
    padding-top: 11px;
    border: 0;
    transition: .5s;
    opacity: 1;
}

/*** Topbar End ***/



/*** Navbar ***/
.navbar-light .navbar-nav .nav-link {
    font-family: 'Roboto', sans-serif;
    position: relative;
    margin-right: 25px;
    padding: 35px 0;
    color: var(--bs-white);
    font-size: 17px;
    font-weight: 400;
    outline: none;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-nav .nav-link,
.sticky-top.navbar-light .navbar-nav .nav-item .nav-link {
    padding: 20px 0;
    color: var(--bs-dark);
}

.navbar-light .navbar-nav .nav-item .nav-link {
    color: var(--bs-white);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-item .nav-link:hover,
.navbar-light .navbar-nav .nav-item .nav-link.active  {
    color: var(--bs-primary);
}

.navbar-light .navbar-brand img {
    max-height: 75px;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-brand img {
    max-height: 60px;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
}

.dropdown .dropdown-menu a:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: var(--bs-light);
    transition: .5s;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .sticky-top.navbar-light {
        position: relative;
        background: var(--bs-white);
    }

    .navbar.navbar-expand-lg .navbar-toggler {
        padding: 10px 20px;
        border: 1px solid var(--bs-primary);
        color: var(--bs-primary);
    }

    .navbar-light .navbar-collapse {
        margin-top: 15px;
        border-top: 1px solid #DDDDDD;
    }

    .navbar-light .navbar-nav .nav-link,
    .sticky-top.navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
        margin-left: 0;
        color: var(--bs-dark);
    }

    .navbar-light .navbar-nav .nav-item .nav-link {
        color: var(--bs-dark);
    }

    .navbar-light .navbar-brand img {
        max-height: 55px;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        border-radius: 10px;
        transition: .5s;
        opacity: 0;
    }

    .navbar-light {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        z-index: 999;
    }
    
    .sticky-top.navbar-light {
        position: fixed;
        background: var(--bs-light);
    }

    .navbar-light .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 0;
        height: 2px;
        bottom: -1px;
        left: 50%;
        background: var(--bs-primary);
        transition: .5s;
    }

    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before {
        width: calc(100% - 2px);
        left: 1px;
    }

    .navbar-light .navbar-nav .nav-link::after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        bottom: -1px;
        left: 50%;
        background: var(--bs-primary);
        transition: .5s;
    }

    .navbar-light .navbar-nav .nav-link:hover::after,
    .navbar-light .navbar-nav .nav-link.active::after {
        width: 2px;
        height: 12px;
    }
}
/*** Navbar End ***/

/*** Carousel Hero Header Start ***/
.header-carousel .header-carousel-item img {
    object-fit: cover;
}

.header-carousel .header-carousel-item,
.header-carousel .header-carousel-item img {
        height: 700px;
}


.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: var(--bs-primary);
    color: var(--bs-white);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.header-carousel .owl-nav .owl-prev {
    bottom: 30px;
    left: 30px;
    margin-left: 90px;
}
.header-carousel .owl-nav .owl-next {
    bottom: 30px;
    left: 30px;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    box-shadow: inset 0 0 100px 0 var(--bs-light);
    color: var(--bs-primary);
}


.header-carousel .header-carousel-item .carousel-caption {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    padding-top: 120px;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
}

@media (max-width: 991px) {
    .header-carousel .header-carousel-item .carousel-caption {
        padding-top: 45px;
    }
}

@media (max-width: 767px) {
    .header-carousel .owl-nav .owl-prev {
        left: 50%;
        transform: translateX(-50%);
        margin-left: -45px;
    }


    .header-carousel .owl-nav .owl-next {
        left: 50%;
        transform: translateX(-50%);
        margin-left: 45px;
    }
}


.header-carousel .header-carousel-item img {
    animation-name: image-zoom;
    animation-duration: 10s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transition: 1s;
}

@keyframes image-zoom {
    0%  {height: 100%; opacity: 0.9;}

    25% {height: 110%; opacity: 0.50;}

    50% {height: 115%; opacity: 1;}

    75% {height: 110%; opacity: 0.50;}

    100% {height: 100%; opacity: 0.9;}
}
/*** Carousel Hero Header End ***/


/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/carousel-1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 140px 0 60px 0;
    transition: 0.5s;
}

@media (min-width: 992px) {
    .bg-breadcrumb {
        padding: 140px 0 60px 0;
    }
}

@media (max-width: 991px) {
    .bg-breadcrumb {
        padding: 60px 0 60px 0;
    }
}

.bg-breadcrumb .breadcrumb {
    position: relative;
}

.bg-breadcrumb .breadcrumb .breadcrumb-item a {
    color: var(--bs-white);
}
/*** Single Page Hero Header End ***/


/*** Service Start ***/
.service .service-item {
    background: var(--bs-light);
    border-radius: 10px;
    transition: 0.5s;
}

.service .service-item:hover {
    box-shadow: 0 0 45px rgba(0, 0, 0, .2);
}

.service .service-item .service-img {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: 0.5s;
}

.service .service-item .service-img img {
    transition: 0.5s;
}

.service .service-item:hover .service-img img {
    transform: scale(1.2);
}
/*** Service End ***/


/*** Features Start ***/
.feature .feature-item {
    text-align: center;
    border-radius: 10px;
    background: var(--bs-light);
    border: 1px solid transparent;
    transition: 0.5s;
}

.feature .feature-item:hover {
    border: 1px solid var(--bs-primary);
}

.feature .feature-item .feature-icon {
    background: var(--bs-white);
    border-radius: 10px;
    display: inline-block;
}
/*** Features End ***/

/*** Offer Start ***/
.offer-section .nav a.accordion-link {
    width: 100%;
    border-radius: 10px;
    display: flex;
    background: var(--bs-white);
    transition: 0.5s;
}

.offer-section .nav a.accordion-link.active {
    color: var(--bs-white);
    background: var(--bs-primary);
}

.offer-section .nav a.accordion-link h5 {
    transition: 0.5s;
}

.offer-section .nav a.accordion-link.active h5 {
    color: var(--bs-white);
}
/*** Offer End ***/

/*** Blog Start ***/
.blog .blog-item {
    border-radius: 10px;
    background: var(--bs-white);
    box-shadow: inset 0 0 45px rgba(0, 0, 0, .1);
    transition: 0.5s;
}

.blog .blog-item a {
    transition: 0.5s;
}

.blog .blog-item:hover a:hover {
    color: var(--bs-primary);
}

.blog .blog-item .blog-img {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.blog .blog-item .blog-img img {
    transition: 0.5s;
}

.blog .blog-item:hover .blog-img img {
    transform: scale(1.2);
}

.blog .blog-item .blog-img::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    background: rgba(42, 157, 143, 0.1);
    opacity: 0;
    transition: 0.5s;
    z-index: 1;
}

.blog .blog-item:hover .blog-img::after {
    opacity: 1;
}

.blog .blog-item .blog-img .blog-title {
    position: absolute;
    bottom: 25px;
    left: 25px;
    z-index: 5;
}

.blog .blog-item .blog-img .blog-title a {
    color: var(--bs-white);
    background: var(--bs-primary);
    transition: 0.5s;
}

.blog .blog-item:hover .blog-img .blog-title a:hover {
    color: var(--bs-dark);
}

.blog-carousel .owl-stage-outer {
    margin-top: 58px;
}

.blog .owl-nav .owl-prev {
    position: absolute;
    top: -58px;
    left: 0;
    background: var(--bs-primary);
    color: var(--bs-white);
    padding: 6px 35px;
    border-radius: 30px;
    transition: 0.5s;
}

.blog .owl-nav .owl-prev:hover {
    background: var(--bs-dark);
    color: var(--bs-primary);
}

.blog .owl-nav .owl-next {
    position: absolute;
    top: -58px;
    right: 0;
    background: var(--bs-primary);
    color: var(--bs-white);
    padding: 6px 35px;
    border-radius: 30px;
    transition: 0.5s;
}

.blog .owl-nav .owl-next:hover {
    background: var(--bs-dark);
    color: var(--bs-primary);
}
/*** Blog End ***/


/*** FAQs Start ***/
.faq-section .accordion .accordion-item .accordion-header .accordion-button {
    color: var(--bs-secondary);
}

.faq-section .accordion .accordion-item .accordion-header .accordion-button.collapsed {
    color: var(--bs-dark);
}
/*** FAQs End ***/

/*** Team Start ***/
.team .team-item {
    position: relative;
    padding: 0 25px 25px 25px;
    border-radius: 10px;
    transition: 0.5s;
}

.team .team-item::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background: var(--bs-light);
    border-radius: 10px;
    transition: 0.5s;
    z-index: -1;
}

.team .team-item:hover::before {
    height: 0;
}

.team .team-item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    transition: 0.5s;
    z-index: -1;
}

.team .team-item:hover::after {
    height: 100%;
    background: var(--bs-primary);
}

.team .team-item .team-img {
    width: 100%; 
    height: 100%;
    border-radius: 100%;
    position: relative;
    margin-top: 50%;
    transform: translateY(-50%);
    margin-bottom: -50%;
    display: flex;
    justify-content: center;
    border: 4px solid var(--bs-primary);
    border-style: dotted;
    padding: 4px;
    background: var(--bs-white);
    transition: 0.5s;
}

.team .team-item:hover .team-img {
    border: 4px solid var(--bs-white);
    border-style: dotted;
    background: 0;
}

.team .team-item .team-img img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    transition: 0.5s;
}

.team .team-item .team-title {
    padding: 25px 0 25px 0;
    text-align: center;
}

.team .team-item .team-title h4,
.team .team-item .team-title p {
    transition: 0.5s;
}

.team .team-item:hover .team-title h4,
.team .team-item:hover .team-title p {
    color: var(--bs-white);
}

.team .team-item .team-icon {
    display: flex;
    justify-content: center;
}

.team .team-item .team-icon a {
    transition: 0.5s;
}

.team .team-item:hover .team-icon a {
    color: var(--bs-dark);
    background: var(--bs-white);
}

.team .team-item:hover .team-icon a:hover {
    color: var(--bs-primary);
    background: var(--bs-dark);
}
/*** Team End ***/

/*** Testimonial Start ***/
.client-review-item {
    position: relative;
    background: var(--bs-white);
    border-radius: 12px;
    padding: 32px 32px 24px 32px;
    box-shadow: 0 10px 40px rgba(4, 16, 26, 0.07);
    border: 1px solid rgba(4, 16, 26, 0.06);
    transition: 0.4s;
}

.client-review-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(4, 16, 26, 0.12);
    border-color: rgba(42, 157, 143, 0.25);
}

.client-review-quote {
    position: absolute;
    top: -22px;
    left: 40px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 8px 20px rgba(42, 157, 143, 0.35);
}

.client-review-stars i {
    color: #FFC107;
    font-size: 14px;
    margin-right: 2px;
}

.client-review-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--bs-secondary);
    margin-bottom: 20px;
}

.client-review-author {
    display: flex;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(4, 16, 26, 0.08);
}

.client-review-author img,
.testimonial-carousel .owl-item .client-review-author img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 18px;
    border: 3px solid var(--bs-light);
    flex-shrink: 0;
}

.client-review-author h5 {
    color: var(--bs-secondary);
    font-weight: 600;
}

.client-review-author span {
    color: var(--bs-primary);
    font-size: 14px;
}

.testimonial-carousel {
    position: relative;
}

.testimonial-carousel .owl-stage-outer {
    padding: 24px 2px 10px 2px;
    margin: 20px 0 30px 0;
}

.testimonial-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.testimonial-carousel .owl-item {
    height: auto;
    display: flex;
}

.testimonial-carousel .owl-item .client-review-item {
    margin: 0 2px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.client-review-text {
    flex-grow: 1;
}

.testimonial .owl-nav .owl-prev,
.testimonial .owl-nav .owl-next {
    position: absolute;
    top: -58px;
    background: var(--bs-primary);
    color: var(--bs-white);
    padding: 6px 30px;
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .owl-nav .owl-prev {
    left: 0;
}

.testimonial .owl-nav .owl-next {
    right: 0;
}

.testimonial .owl-nav .owl-prev:hover,
.testimonial .owl-nav .owl-next:hover {
    background: var(--bs-secondary);
    color: var(--bs-white);
}

.testimonial-carousel .owl-dots {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.testimonial-carousel .owl-dots .owl-dot {
    width: 12px;
    height: 12px;
    border-radius: 12px;
    margin: 0 6px;
    background: rgba(4, 16, 26, 0.15);
    transition: 0.5s;
}

.testimonial-carousel .owl-dots .owl-dot.active {
    width: 28px;
    background: var(--bs-primary);
}
/*** Testimonial End ***/

/*** CTA Start ***/
.cta-text {
    color: var(--bs-dark);
    opacity: .75;
    font-size: 16px;
    line-height: 1.8;
}

.cta-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 0;
    font-weight: 600;
    color: var(--bs-secondary);
    font-size: 15px;
}

.cta-feature i {
    font-size: 22px;
    color: var(--bs-primary);
}

.cta-divider {
    width: 1px;
    height: 34px;
    border-left: 2px dotted rgba(9, 29, 46, .25);
    margin-right: 8px;
}

.cta-subtext {
    color: var(--bs-dark);
    font-size: 15px;
}

.cta-input {
    border: 2px solid var(--bs-primary);
    border-radius: 8px;
    padding: 14px 22px;
    font-size: 15px;
    background: var(--bs-light);
}

.cta-input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(42, 157, 143, .2);
}

.cta-btn {
    padding: 14px 34px;
    font-weight: 700;
    transition: 0.4s;
}

.cta-btn:hover {
    background: var(--bs-secondary);
    color: var(--bs-white);
}

@media (max-width: 767.98px) {
    .cta-divider {
        display: none;
    }

    .cta-feature {
        width: 50%;
        padding-left: 0;
    }
}
/*** CTA End ***/

/*** Footer Start ***/
.footer {
    background: var(--bs-secondary);
}

.footer .footer-item {
    display: flex;
    flex-direction: column;
}

.footer .footer-item a {
    line-height: 35px;
    color: var(--bs-body);
    transition: 0.5s;
}

.footer .footer-item p {
    line-height: 1.6;
    max-width: 316px;
}

.footer .footer-item a:hover {
    color: var(--bs-primary);
}

.footer .footer-item .footer-btn a,
.footer .footer-item .footer-btn a i {
    transition: 0.5s;
}

.footer .footer-item .footer-btn a:hover {
    background: var(--bs-white);
}

.footer .footer-item .footer-btn a:hover i {
    color: var(--bs-primary);
}
/*** Footer End ***/

/*** copyright Start ***/
.copyright {
    background: var(--bs-dark);
}
/*** copyright end ***/

/*** Elix Technologies Logo Start ***/
.navbar-brand .elix-logo {
    height: 60px;
    width: auto;
}

.footer-item .elix-logo {
    height: 72px;
    width: auto;
    max-width: 100%;
    margin-bottom: 1rem;
}

@media (max-width: 400px) {
    .footer-item .elix-logo {
        height: 56px;
    }
}

/* Below 992px the navbar always sits on a solid light background
   (see .navbar-light rules above), so the dark logo is always legible
   and the white variant stays hidden. */
.navbar-brand .elix-logo-white {
    display: none;
}

@media (max-width: 991.98px) {
    .navbar-brand .elix-logo {
        height: 46px;
    }
}

/* From 992px up, the navbar floats transparently over the hero image
   until the page is scrolled (JS then adds .sticky-top and a solid
   background) — so swap to the white logo while it's transparent. */
@media (min-width: 992px) {
    .navbar-light:not(.sticky-top) .navbar-brand .elix-logo-white {
        display: inline-block;
    }

    .navbar-light:not(.sticky-top) .navbar-brand .elix-logo-dark {
        display: none;
    }
}
/*** Elix Technologies Logo End ***/


/*** Positioning Photo Start ***/
.positioning-photo {
    padding: 0 20px 20px 0;
}

.positioning-photo-accent {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 0;
    bottom: 0;
    background: var(--bs-primary);
    border-radius: 10px;
    z-index: 0;
}

.positioning-photo-frame {
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 25px 55px rgba(9, 29, 46, .18);
}

.positioning-photo-frame img {
    transition: transform .6s ease;
}

.positioning-photo:hover .positioning-photo-frame img {
    transform: scale(1.1);
}
/*** Positioning Photo End ***/

/*** Skill Bar Start ***/
.skill-bar h6 {
    font-weight: 600;
    color: var(--bs-secondary);
}

.skill-bar .progress {
    background: rgba(9, 29, 46, .08);
    overflow: hidden;
}

.skill-bar .progress-bar {
    width: 0;
    transition: width 1.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/*** Skill Bar End ***/

/*** Contact Page Start ***/
.contact-form-card,
.contact-info-card {
    background: #ECF0F1;
    border: 1px solid rgba(9, 29, 46, .08);
    border-top: 4px solid transparent;
    box-shadow: 0 12px 30px rgba(9, 29, 46, .1);
    transition: transform .45s cubic-bezier(.25, .8, .25, 1), box-shadow .45s ease, border-color .45s ease;
}

.contact-form-card:hover,
.contact-info-card:hover {
    transform: translateY(-8px);
    border-color: rgba(42, 157, 143, .35);
    border-top-color: var(--bs-primary);
    box-shadow: 0 20px 45px rgba(9, 29, 46, .16);
}

.contact-input {
    background: var(--bs-white);
    border: 1px solid rgba(9, 29, 46, .1);
    border-radius: 10px;
    padding: 14px 18px;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.contact-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(42, 157, 143, .15);
    transform: translateY(-2px);
}

.contact-info-icon {
    width: 48px;
    height: 48px;
    background: var(--bs-primary);
    color: var(--bs-white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform .4s cubic-bezier(.25, .8, .25, 1), background .4s ease, box-shadow .4s ease;
}

.contact-info-card .d-flex:hover .contact-info-icon {
    background: linear-gradient(135deg, var(--bs-primary), #1c6e64);
    transform: scale(1.1) rotate(-6deg);
    box-shadow: 0 10px 20px rgba(42, 157, 143, .3);
}

.contact-info-card a {
    text-decoration: none;
}

.contact-info-card a:hover {
    color: var(--bs-primary) !important;
}
/*** Contact Page End ***/

/*** Free Consultation Page Start ***/
.bg-breadcrumb-consultation {
    background-image: linear-gradient(rgba(9, 29, 46, 0.78), rgba(9, 29, 46, 0.78)), url(../img/consultation-hero-dashboard.jpg);
    background-position: center 30%;
}

.consultation-form-card {
    background: var(--bs-white);
    border-radius: 20px;
    border-top: 6px solid var(--bs-primary);
    box-shadow: 0 20px 50px rgba(9, 29, 46, .12);
    transition: transform .45s cubic-bezier(.25, .8, .25, 1), box-shadow .45s ease;
}

.consultation-form-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(9, 29, 46, .18);
}

.consultation-form-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary), #1c6e64);
    color: var(--bs-white);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(42, 157, 143, .35);
}
/*** Free Consultation Page End ***/

/*** Privacy Policy Page Start ***/
.bg-breadcrumb-privacy {
    background-image: linear-gradient(rgba(9, 29, 46, 0.78), rgba(9, 29, 46, 0.78)), url(../img/privacy-policy-hero.jpg);
}
/*** Privacy Policy Page End ***/

/*** Why Choose Start ***/
.why-choose .positioning-photo {
    padding: 0 0 20px 20px;
}

.why-choose .positioning-photo-accent {
    left: 0;
    right: 20px;
}

.why-choose-item {
    padding: 16px 0;
    border-bottom: 1px solid rgba(9, 29, 46, .08);
    transition: transform .35s ease;
}

.why-choose-item:last-child {
    border-bottom: none;
}

.why-choose-item:hover {
    transform: translateX(6px);
}

.why-choose-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(42, 157, 143, .1);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background .35s ease, color .35s ease;
}

.why-choose-item:hover .why-choose-icon {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.why-choose-item h5 {
    transition: color .35s ease;
}

.why-choose-item:hover h5 {
    color: var(--bs-primary);
}
/*** Why Choose End ***/

/*** Strategic Areas of Expertise Start ***/
.expertise.bg-light .expertise-item,
.solution-pillars.bg-light .expertise-item,
.defense-pillars.bg-light .expertise-item,
.managed-pillars.bg-light .expertise-item {
    background: var(--bs-white);
}

/*** Defense Pillars Start ***/
.expertise-item .expertise-item-photo {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.expertise-item .expertise-item-icon-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(42, 157, 143, .1);
    color: var(--bs-primary);
    font-size: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: transform .4s cubic-bezier(.25,.8,.25,1), background .4s ease, color .4s ease;
}

.expertise-item:hover .expertise-item-icon-circle {
    background: linear-gradient(135deg, var(--bs-primary), #1c6e64);
    color: var(--bs-white);
    transform: scale(1.05);
}

.expertise-item-featured .expertise-item-icon-circle {
    background: rgba(255, 255, 255, .15);
    color: var(--bs-white);
}

.expertise-item-featured:hover .expertise-item-icon-circle {
    background: rgba(255, 255, 255, .25);
    color: var(--bs-white);
}
/*** Defense Pillars End ***/

/*** Pillar Card Hover Start ***/
.pillar-card {
    position: relative;
    height: 480px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(9, 29, 46, .12);
}

.pillar-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.pillar-card:hover .pillar-card-img {
    transform: scale(1.06);
}

.pillar-card-overlay {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-height: calc(100% - 32px);
    background: rgba(9, 29, 46, .94);
    border-radius: 14px;
    padding: 18px 22px;
    color: var(--bs-white);
    overflow-y: auto;
    transform: translateY(calc(100% - 66px));
    transition: transform .5s cubic-bezier(.25, .8, .25, 1);
}

.pillar-card:hover .pillar-card-overlay {
    transform: translateY(0);
}

.pillar-card-title {
    color: var(--bs-white);
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}

.pillar-card-details {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s ease, transform .4s ease;
    margin-top: 12px;
}

.pillar-card:hover .pillar-card-details {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .4s ease .15s, transform .4s ease .15s;
}

.pillar-card-subtitle {
    color: rgba(255, 255, 255, .8);
    font-size: .9rem;
    margin-bottom: .75rem;
}

.pillar-card-list li {
    position: relative;
    padding: 5px 0;
    color: var(--bs-white);
    font-weight: 500;
    font-size: .85rem;
    line-height: 1.4;
}

.pillar-card-list li strong {
    color: var(--bs-white);
}

.pillar-card-list li i {
    color: var(--bs-primary);
    margin-right: 8px;
}

@media (max-width: 767px) {
    .pillar-card {
        height: 420px;
    }
}
/*** Pillar Card Hover End ***/

.expertise-item {
    position: relative;
    background: var(--bs-light);
    border-radius: 10px;
    border-top: 4px solid transparent;
    overflow: hidden;
    transition: transform .45s cubic-bezier(.25,.8,.25,1), box-shadow .45s ease, border-color .45s ease, background .45s ease;
}

.expertise-item:hover {
    transform: translateY(-12px);
    background: var(--bs-white);
    border-top-color: var(--bs-primary);
    box-shadow: 0 25px 55px rgba(9, 29, 46, .14);
}

.expertise-item .expertise-number {
    position: absolute;
    top: -6px;
    right: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 5.5rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(9, 29, 46, .12);
    transition: -webkit-text-stroke-color .45s ease, transform .45s ease;
    pointer-events: none;
    user-select: none;
}

.expertise-item:hover .expertise-number {
    -webkit-text-stroke: 1.5px rgba(42, 157, 143, .35);
    transform: translateY(-4px);
}

.expertise-item h4 {
    position: relative;
    padding-top: 1.5rem;
    transition: color .35s ease;
}

.expertise-item:hover h4 {
    color: var(--bs-primary);
}

.expertise-list li {
    position: relative;
    padding: 6px 0;
    color: var(--bs-dark);
    font-weight: 500;
    transition: transform .35s ease;
}

.expertise-item:hover .expertise-list li {
    transform: translateX(4px);
}

.expertise-list li i {
    color: var(--bs-primary);
    margin-right: 10px;
}

.expertise-link {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--bs-dark);
    transition: color .35s ease, letter-spacing .35s ease;
}

.expertise-link i {
    margin-left: 8px;
    font-size: 13px;
    transition: transform .35s ease;
}

.expertise-item:hover .expertise-link {
    color: var(--bs-primary);
}

.expertise-item:hover .expertise-link i {
    transform: translateX(6px);
}

/*** Solutions Page "Discover" Links Pulse Start ***/
@keyframes solutions-blink {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.solutions-blink {
    display: inline-flex;
    animation: solutions-blink 1.2s ease-in-out infinite;
}
/*** Solutions Page "Discover" Links Pulse End ***/

/*** Solutions Page Text/Image Blocks - Reduced Mobile Gap Start ***/
/* Below the xl breakpoint the text and image columns stack (see the
   order-1/order-2 classes on these rows). The row's g-5 gutter (3rem) was
   designed for the side-by-side desktop layout; once stacked it reads as an
   overly large empty gap between the text and the image, so it's reduced
   here for the 6 solution blocks only. */
@media (max-width: 1199.98px) {
    .solution-nelvia .row.g-5,
    .solution-management .row.g-5,
    .solution-custom-business .row.g-5,
    .solution-patient .row.g-5,
    .solution-pos .row.g-5,
    .solution-custom-dev .row.g-5 {
        --bs-gutter-y: 1.5rem;
    }
}
/*** Solutions Page Text/Image Blocks - Reduced Mobile Gap End ***/

.expertise-item-featured,
.expertise.bg-light .expertise-item-featured,
.solution-pillars.bg-light .expertise-item-featured,
.defense-pillars.bg-light .expertise-item-featured,
.managed-pillars.bg-light .expertise-item-featured {
    background: linear-gradient(135deg, var(--bs-primary), #1f7a6f);
    border-top-color: transparent;
    box-shadow: 0 20px 45px rgba(42, 157, 143, .3);
}

.expertise-item-featured:hover,
.expertise.bg-light .expertise-item-featured:hover,
.solution-pillars.bg-light .expertise-item-featured:hover,
.defense-pillars.bg-light .expertise-item-featured:hover,
.managed-pillars.bg-light .expertise-item-featured:hover {
    background: linear-gradient(135deg, var(--bs-primary), #1f7a6f);
    border-top-color: #556B2F;
    box-shadow: 0 28px 55px rgba(42, 157, 143, .4);
}

.expertise-item-featured .expertise-number {
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .35);
}

.expertise-item-featured:hover .expertise-number {
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55);
}

.expertise-item-featured h4,
.expertise-item-featured:hover h4 {
    color: var(--bs-white);
}

.expertise-item-featured p {
    color: rgba(255, 255, 255, .85);
}

.expertise-item-featured .expertise-list li {
    color: var(--bs-white);
}

.expertise-item-featured .expertise-list li i {
    color: var(--bs-white);
}

.expertise-item-featured .expertise-link,
.expertise-item-featured:hover .expertise-link {
    color: var(--bs-white);
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}
/*** Strategic Areas of Expertise End ***/

/*** Technologies Start ***/
.team.bg-light .team-item::before {
    background: var(--bs-white);
}

.technologies {
    position: relative;
    overflow: hidden;
}

.technologies::before,
.technologies::after {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.technologies::before {
    top: -180px;
    left: -140px;
    background: radial-gradient(circle, rgba(42, 157, 143, .18), transparent 70%);
}

.technologies::after {
    bottom: -200px;
    right: -160px;
    background: radial-gradient(circle, rgba(9, 29, 46, .10), transparent 70%);
}

.tech-marquee-wrapper {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    row-gap: 18px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.tech-marquee-row {
    display: flex;
    width: max-content;
}

.tech-marquee-row.row-1 {
    animation: tech-scroll 38s linear infinite;
}

.tech-marquee-row.row-2 {
    animation: tech-scroll-reverse 38s linear infinite;
}

.tech-marquee-row:hover {
    animation-play-state: paused;
}

.tech-logo-item {
    flex: 0 0 auto;
    width: 170px;
    margin: 0 12px;
    background: var(--bs-white);
    border: 1px solid rgba(9, 29, 46, .06);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(9, 29, 46, .07);
    padding: 20px 15px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform .4s cubic-bezier(.25,.8,.25,1), box-shadow .4s ease, border-color .4s ease;
}

.tech-logo-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 50px rgba(9, 29, 46, .16);
    border-color: rgba(42, 157, 143, .35);
}

.tech-logo-badge {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(42, 157, 143, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: background .4s ease, transform .4s ease;
}

.tech-logo-item:hover .tech-logo-badge {
    background: rgba(42, 157, 143, .16);
    transform: scale(1.1) rotate(-4deg);
}

.tech-logo-badge img {
    height: 32px;
    width: auto;
    max-width: 70%;
}

.tech-logo-item span {
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-dark);
    white-space: nowrap;
    transition: color .35s ease;
}

.tech-logo-item:hover span {
    color: var(--bs-primary);
}

@keyframes tech-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes tech-scroll-reverse {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .tech-logo-item {
        width: 130px;
        padding: 20px 10px 16px;
    }

    .tech-logo-badge {
        width: 54px;
        height: 54px;
    }

    .tech-logo-badge img {
        height: 26px;
    }

    .technologies::before,
    .technologies::after {
        width: 260px;
        height: 260px;
    }
}
/*** Technologies End ***/

/*** Methodology Start ***/
.methodology {
    position: relative;
    background: radial-gradient(ellipse 900px 500px at 85% 0%, rgba(42, 157, 143, .22), transparent 60%), var(--bs-dark);
    overflow: hidden;
}

.methodology::before,
.methodology::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.methodology::before {
    top: -220px;
    right: -160px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(42, 157, 143, .30), transparent 70%);
}

.methodology::after {
    bottom: -240px;
    left: -180px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(42, 157, 143, .16), transparent 70%);
}

.methodology-dots {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 100%, black 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 100% 60% at 50% 100%, black 0%, transparent 75%);
    pointer-events: none;
}

.methodology-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--bs-white);
}

.methodology-eyebrow-bar {
    display: inline-block;
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: var(--bs-primary);
    box-shadow: 0 0 12px rgba(42, 157, 143, .8);
}

/*** Section Eyebrow Bar Start ***/
/* Same glowing teal bar as the Methodology eyebrows above, reused on every
   other section's small uppercase "title" label site-wide. Text color is
   left to the existing text-primary utility class (teal), unlike
   .methodology-eyebrow which forces white for its dark-background section. */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.section-eyebrow-bar {
    display: inline-block;
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: var(--bs-primary);
    box-shadow: 0 0 12px rgba(42, 157, 143, .8);
    flex-shrink: 0;
}
/*** Section Eyebrow Bar End ***/

.methodology-item {
    position: relative;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 42px 30px 26px;
    text-align: center;
    transition: transform .4s cubic-bezier(.25,.8,.25,1), border-color .4s ease, background .4s ease, box-shadow .4s ease;
}

.methodology-item:hover {
    transform: translateY(-10px);
    border-color: rgba(42, 157, 143, .55);
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 25px 50px rgba(0, 0, 0, .35);
}

.methodology-badge {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary), #1c6e64);
    color: var(--bs-white);
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px rgba(42, 157, 143, .18), 0 15px 30px rgba(0, 0, 0, .4);
    transition: transform .4s ease, box-shadow .4s ease;
}

.methodology-item:hover .methodology-badge {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 0 0 9px rgba(42, 157, 143, .22), 0 18px 34px rgba(0, 0, 0, .45);
}

.methodology-item h4 {
    margin-top: 18px;
}

.methodology-item p {
    color: rgba(255, 255, 255, .68);
    margin-bottom: 0;
}

.methodology-arrow {
    display: none;
}

@media (min-width: 992px) {
    .methodology-arrow {
        display: block;
        position: absolute;
        top: 50%;
        right: -32px;
        transform: translateY(-50%);
        color: rgba(42, 157, 143, .55);
        font-size: 20px;
        z-index: 2;
    }
}

@media (max-width: 768px) {
    .methodology-badge {
        width: 48px;
        height: 48px;
        font-size: 15px;
    }

    .methodology-item {
        padding: 45px 24px 28px;
    }
}
/*** Methodology End ***/

/*** Flip Card Start ***/
.flip-card {
    perspective: 1500px;
    height: 280px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform .8s cubic-bezier(.25,.8,.25,1);
    transform-style: preserve-3d;
    box-shadow: 0 15px 40px rgba(9, 29, 46, .18);
    border-radius: 16px;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 35px;
}

.flip-card-front {
    background: var(--bs-white);
    border: 1px solid rgba(9, 29, 46, .1);
}

.flip-card-front h4 {
    color: var(--bs-secondary);
    font-weight: 700;
}

.flip-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-primary), #1c6e64);
    color: var(--bs-white);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    box-shadow: 0 10px 20px rgba(42, 157, 143, .25);
}

.flip-card-back {
    background: linear-gradient(135deg, var(--bs-secondary), #0c3049);
    color: rgba(255, 255, 255, .85);
    transform: rotateY(180deg);
}

.flip-card-back p {
    color: rgba(255, 255, 255, .85);
}

.flip-card-back .fst-italic {
    color: var(--bs-primary);
}

@media (max-width: 991px) {
    .flip-card {
        height: 320px;
    }
}
/*** Flip Card End ***/

/*** Technical Expertise Start ***/
/* .positioning-photo has a 20px right/bottom padding that reveals the teal
   accent square behind the photo - the wrapper needs to be 20px taller than
   the frame itself so that reveal stays even on all sides. */
.technical-expertise .positioning-photo {
    height: 420px;
}

.technical-expertise .positioning-photo-frame {
    height: 400px;
}

.technical-expertise .positioning-photo-frame img {
    height: 100%;
    object-fit: cover;
}

.tech-expertise-item {
    padding: 10px;
    border-radius: 12px;
    transition: transform .4s cubic-bezier(.25,.8,.25,1), background .4s ease;
}

.tech-expertise-item:hover {
    background: rgba(9, 29, 46, .03);
    transform: translateY(-6px);
}

.tech-expertise-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 14px;
    background: rgba(42, 157, 143, .1);
    color: var(--bs-primary);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .4s cubic-bezier(.25,.8,.25,1), background .4s ease, color .4s ease;
}

.tech-expertise-item:hover .tech-expertise-icon {
    background: linear-gradient(135deg, var(--bs-primary), #1c6e64);
    color: var(--bs-white);
    transform: scale(1.1) rotate(-6deg);
    box-shadow: 0 10px 20px rgba(42, 157, 143, .3);
}

@media (max-width: 1199px) {
    .technical-expertise .positioning-photo {
        height: 360px;
    }

    .technical-expertise .positioning-photo-frame {
        height: 340px;
    }
}

@media (max-width: 767px) {
    .technical-expertise .positioning-photo {
        height: 300px;
    }

    .technical-expertise .positioning-photo-frame {
        height: 280px;
    }
}
/*** Technical Expertise End ***/

/*** About Page Photos Start ***/
/* Compact, consistent photo sizing for about.html sections. Accent peeks
   toward the outer edge of the page: left-peek when the photo sits in the
   left column, default (right-peek) when it sits in the right column. */
.about .positioning-photo,
.core-competencies .positioning-photo {
    padding: 0 0 20px 20px;
    height: 360px;
}

.about .positioning-photo-accent,
.core-competencies .positioning-photo-accent {
    left: 0;
    right: 20px;
}

.about .positioning-photo-frame,
.tech-commitments .positioning-photo-frame,
.security-asset .positioning-photo-frame,
.core-competencies .positioning-photo-frame {
    height: 340px;
}

.about .positioning-photo-frame img,
.tech-commitments .positioning-photo-frame img,
.security-asset .positioning-photo-frame img,
.core-competencies .positioning-photo-frame img {
    height: 100%;
    object-fit: cover;
}

.tech-commitments .positioning-photo,
.security-asset .positioning-photo {
    height: 360px;
}

@media (max-width: 1199px) {

    .about .positioning-photo,
    .tech-commitments .positioning-photo,
    .security-asset .positioning-photo,
    .core-competencies .positioning-photo {
        height: 300px;
    }

    .about .positioning-photo-frame,
    .tech-commitments .positioning-photo-frame,
    .security-asset .positioning-photo-frame,
    .core-competencies .positioning-photo-frame {
        height: 280px;
    }
}

@media (max-width: 767px) {

    .about .positioning-photo,
    .tech-commitments .positioning-photo,
    .security-asset .positioning-photo,
    .core-competencies .positioning-photo {
        height: 260px;
    }

    .about .positioning-photo-frame,
    .tech-commitments .positioning-photo-frame,
    .security-asset .positioning-photo-frame,
    .core-competencies .positioning-photo-frame {
        height: 240px;
    }
}
/*** About Page Photos End ***/

/*** Engineering Standards Start ***/
.engineering-standards .positioning-photo {
    height: 420px;
}

.engineering-standards .positioning-photo-frame {
    height: 400px;
}

.engineering-standards .positioning-photo-frame img {
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1199px) {
    .engineering-standards .positioning-photo {
        height: 360px;
    }

    .engineering-standards .positioning-photo-frame {
        height: 340px;
    }
}

@media (max-width: 767px) {
    .engineering-standards .positioning-photo {
        height: 300px;
    }

    .engineering-standards .positioning-photo-frame {
        height: 280px;
    }
}
/*** Engineering Standards End ***/

/*** Development Process Start ***/
.dev-process-track {
    padding: 0 40px;
    margin-bottom: 10px;
}

.dev-process-line-zone {
    position: absolute;
    top: 40px;
    transform: translateY(-50%);
    left: calc(21px + 12.5%);
    right: calc(21px + 12.5%);
    height: 4px;
}

.dev-process-line,
.dev-process-line-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    border-radius: 2px;
}

.dev-process-line {
    width: 100%;
    background: rgba(9, 29, 46, .12);
}

.dev-process-line-fill {
    width: 0%;
    background: var(--bs-primary);
    transition: width 10s ease;
    z-index: 1;
}

.dev-process-circle {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(9, 29, 46, .15);
    background: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;
    color: rgba(9, 29, 46, .35);
    transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.dev-process-step.active .dev-process-circle {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    box-shadow: 0 0 0 6px rgba(42, 157, 143, .15), 0 0 18px rgba(42, 157, 143, .55);
}

.dev-process-card {
    background: var(--bs-white);
    border: 2px solid var(--bs-primary);
    border-radius: 12px;
    padding: 18px 16px;
    height: 100%;
    text-align: center;
    box-shadow: 0 12px 24px rgba(9, 29, 46, .07);
    transition: transform .4s cubic-bezier(.25, .8, .25, 1), box-shadow .4s ease;
}

.dev-process-card .dev-process-title {
    font-size: 16px;
    margin-bottom: 10px;
}

.dev-process-card p {
    font-size: 14px;
    margin-bottom: 0;
}

.dev-process-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(9, 29, 46, .12);
}

.dev-process-title {
    color: var(--bs-secondary);
    font-weight: 700;
    transition: color .25s ease;
}

.dev-process-card-col.active .dev-process-title {
    color: var(--bs-primary);
}

@media (max-width: 767px) {
    .dev-process-track {
        padding: 0 10px;
    }

    .dev-process-circle {
        width: 56px;
        height: 56px;
        font-size: 16px;
    }

    .dev-process-card {
        padding: 14px 12px;
    }
}
/*** Development Process End ***/

/*** Dev CTA Start ***/
.dev-cta-features {
    gap: 0;
}

.dev-cta-feature {
    flex: 1 1 0;
    padding: 0 18px;
    text-align: center;
}

.dev-cta-feature:first-child {
    padding-left: 0;
}

.dev-cta-feature:last-child {
    padding-right: 0;
}

.dev-cta-feature i {
    font-size: 30px;
    color: var(--bs-primary);
    margin-bottom: 14px;
    display: inline-block;
}

.dev-cta-feature h6 {
    font-weight: 700;
    color: var(--bs-secondary);
    margin-bottom: 8px;
    font-size: 15px;
}

.dev-cta-feature p {
    font-size: 13px;
    color: rgba(9, 29, 46, .6);
    line-height: 1.5;
}

.dev-cta-divider {
    width: 0;
    align-self: stretch;
    border-left: 2px dotted rgba(9, 29, 46, .25);
    margin-top: 6px;
}

@media (max-width: 575px) {
    /* Keep the two CTA buttons side by side instead of stacking. */
    .dev-cta .d-flex.flex-wrap.gap-3 {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .dev-cta .d-flex.flex-wrap.gap-3 .btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 12px 10px !important;
        font-size: 14px;
        white-space: normal;
    }

    /* Two features per row (icon beside the title, description below),
       with the dotted divider only between the first two; the third
       feature drops to its own row spanning the full width. */
    .dev-cta-features {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        row-gap: 20px;
        column-gap: 10px;
    }

    .dev-cta-feature {
        display: grid !important;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        row-gap: 4px;
        align-content: start;
        text-align: left;
        padding: 0;
    }

    .dev-cta-feature i {
        grid-row: 1;
        grid-column: 1;
        font-size: 22px;
        margin-bottom: 0;
        align-self: center;
    }

    .dev-cta-feature h6 {
        grid-row: 1;
        grid-column: 2;
        margin-bottom: 0;
        align-self: center;
    }

    .dev-cta-feature p {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .dev-cta-feature:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .dev-cta-feature:nth-of-type(3) {
        grid-column: 3;
        grid-row: 1;
    }

    .dev-cta-feature:nth-of-type(5) {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .dev-cta-divider {
        display: none;
    }

    .dev-cta-divider:nth-of-type(2) {
        display: block;
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        margin: 0;
        width: 0;
    }
}
/*** Dev CTA End ***/

/*** E-commerce Specialized Solutions Start ***/
/* Both photos crop to the exact same box so they line up regardless of
   their original aspect ratio (see the Technical Expertise fix for why the
   wrapper needs to be 20px taller than the frame). */
.ecommerce-solutions .positioning-photo {
    height: 420px;
}

.ecommerce-solutions .positioning-photo-frame {
    height: 400px;
}

.ecommerce-solutions .positioning-photo-frame img {
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1199px) {
    .ecommerce-solutions .positioning-photo {
        height: 360px;
    }

    .ecommerce-solutions .positioning-photo-frame {
        height: 340px;
    }
}

@media (max-width: 767px) {
    .ecommerce-solutions .positioning-photo {
        height: 300px;
    }

    .ecommerce-solutions .positioning-photo-frame {
        height: 280px;
    }
}
/*** E-commerce Specialized Solutions End ***/

/*** Enterprise Security Start ***/
.enterprise-security-item {
    padding: 40px 24px;
    border-radius: 12px;
    background: #ECF0F1;
    border: 1px solid rgba(9, 29, 46, .08);
    border-top: 4px solid transparent;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(9, 29, 46, .08);
    transition: transform .45s cubic-bezier(.25, .8, .25, 1), box-shadow .45s ease, border-color .45s ease;
}

.enterprise-security-item:hover {
    transform: translateY(-8px);
    border-color: rgba(42, 157, 143, .35);
    border-top-color: var(--bs-primary);
    box-shadow: 0 20px 45px rgba(9, 29, 46, .14);
}

.enterprise-security-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(42, 157, 143, .1);
    color: var(--bs-primary);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform .4s cubic-bezier(.25, .8, .25, 1), background .4s ease, color .4s ease;
}

.enterprise-security-item:hover .enterprise-security-icon {
    background: linear-gradient(135deg, var(--bs-primary), #1c6e64);
    color: var(--bs-white);
    transform: scale(1.1) rotate(-6deg);
    box-shadow: 0 10px 20px rgba(42, 157, 143, .3);
}

.enterprise-security-item h4 {
    font-weight: 700;
    color: var(--bs-secondary);
    margin-bottom: 10px;
    font-size: 20px;
}

.enterprise-security-item p {
    color: rgba(9, 29, 46, .65);
}
/*** Enterprise Security End ***/

/*** Language Switcher Start ***/
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lang-switch-link {
    color: var(--bs-dark);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .5px;
    text-decoration: none;
    transition: color .3s;
}

.lang-switch-link:hover {
    color: var(--bs-primary);
}

.lang-switch-link.active {
    color: var(--bs-primary);
    text-decoration: underline;
}

.lang-switch-sep {
    color: var(--bs-dark);
    opacity: .35;
    font-size: 12px;
}

.navbar-nav .lang-switcher {
    padding: 4px 12px;
}
/*** Language Switcher End ***/