/* color palette  */
:root {
    --font-one: "Merriweather", serif;
    --font-two: "Inter", sans-serif;
    --color-one: #0d1a1d;
    --color-two: #14347d;
    --color-three: #0088c9;
    --color-four: #003f82;
    --color-five: #fff;
    --color-six: #26890d;
}
/* @font-face {
    font-family: 'ImageFont';
    src: url('../fonts/Image.ttf') format('truetype');
    font-style: normal;
} */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
}
html {
    scroll-behavior: smooth;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
p, a, li {
    font-family: var(--font-two);
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
}
h2, h3, h4, h5, h6 {
    font-family: var(--font-one);
    line-height: 1.5;
}

.section-title {
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
}
.section-title h2 {
    font-size: 35px;
}
.title-underline {
    height: 2px;
    width: 100px;
    background: var(--color-three);
}
section {
    padding: 60px 0;
}

.dark-blue {
    color: var(--color-two);
}
.light-blue {
    color: var(--color-three);
}
.black {
    color: var(--color-one);
}
.blue {
    color: var(--color-four);
}
.white {
    color: var(--color-five);
}
.df {
    display: flex;
}
.fdc {
    flex-direction: column;
}
.gap50 {
    gap: 50px;
}
.gap30 {
    gap: 30px;
}
.jcc {
    justify-content: center;
}
.aic {
    align-items: center;
}
.tac {
    text-align: center;
}
.w50 {
    width: 50%;
}
.pb25 {
    padding-bottom: 25px;
}
.br5 {
    border-radius: 5px;
}
.img-cd img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.btn-wrap {
    display: flex;
    gap: 15px;
    padding-left: 50px;
}
.btn-3 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.btn-3 a:hover {
    transform: translateX(5px);
    transition: all .2s ease-out;
}
.btn-3 a {
    color: var(--color-three);
}
.btn-line {
    width: 2px;
    height: 125px;
    background: var(--color-three);
}


/* top-bar */
.top-contact-section {
    background: rgba(0, 0, 0, .5);
    padding: 15px 0;
    display: none;
}
.top-bar {
    display: flex;
    gap: 25px;
    justify-content: end;
}
.top-bar a i, .top-bar a {
    color: var(--color-five);
}
.top-bar a i:hover, .top-bar a:hover {
    color: var(--color-three);
}
.top-bar div a {
    display: flex;
    gap: 8px;
    align-items: center;
}


/* navigation  */
nav {
    background: rgba(0, 0, 0, .5);
}
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}
#logo a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#logo {
    max-width: 250px;
}
#logo a {
    display: flex;
}
#menu {
    display: flex;
    gap: 30px;
}
#menu a, .dropdown > a {
    color: var(--color-five);
    text-decoration: none;
    font-family: var(--font-two);
    border-bottom: 1px solid transparent;
    padding-left: 8px;
    text-transform: capitalize;
}
/* #menu a.active {
    color: var(--color-three);
} */
#menu a:hover, .dropdown > a:hover {
    color: var(--color-three);
}
#menuToggle {
    display: none;
    cursor: pointer;
    font-size: 1.5em;
    color: var(--color-five);
}
.dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background: rgba(0, 0, 0, .9);
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    flex-direction: column;
    border-radius: 5px;
}
.dropdown-content a {
    color: var(--color-one);
    padding: 12px 16px !important;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    color: var(--color-three);
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown a i {
    padding-bottom: 10px !important;
}

@media only screen and (max-width: 790px) {
    nav {
        padding-top: 5px;
    }
    #menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 72px;
        left: 0;
        width: 100%;
        background-color: var(--color-one);
        z-index: 1;
        height: 100vh;
        padding-top: 10px;
    }
    #logo {
        max-width: 200px;
    }
    #menu a, .dropdown > a {
        padding: 10px 30px;
    }
    #menuToggle {
        display: block;
    }
    #menuToggle.open {
        display: none;
    }
    #menuToggle.closed {
        display: block;
    }
    .dropdown-content {
        position: relative;
        width: 100%;
        box-shadow: none;
    }
}



/* hero-section  */
.hero-section {
    height: 100vh;
    position: relative;
    padding: 0;
}
#background-video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.hero-content {
    display: flex;
    align-items: center;
    gap: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}
.hero-left {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 25px;
    padding: 25px 35px;
    border-radius: 5px;
}
.hero-content h2 {
    color: var(--color-five);
    font-size: 100px;
}
.hero-content p {
    color: var(--color-five);
    font-size: 30px;
}
.hero-section .btn-1 {
    text-align: center;
}

.btn-1 a {
    background: var(--color-six);
    color: var(--color-five);
    padding: 10px 20px;
    border-radius: 5px;
    text-transform: uppercase;
}

.btn-1 {
    margin-top: 10px;
}
.btn-1:hover {
    transform: translateX(8px);
    transition: all .2s ease-out;
}
.btn-1:hover a {
    background: var(--color-three);
}

.btn-2 a {
    background: var(--color-three);
    color: var(--color-five);
    padding: 15px 30px;
    border-radius: 15px;
    min-width: 100%;
    text-transform: uppercase;
}
.btn-2 a:hover {
    background: #7e4c80;
}
.btn-2 {
    margin-top: 10px;
}


/* hero bbg slider  */
.hero-bg-slider-section {
    background: var(--color-three);
    padding: 30px 0;
    display: none;
}

.hero-section .btn-1 a {
    font-size: 30px;
}


/* about  */
.about-section {
    padding: 20px 0;
}
.about-img {
    max-width: 600px;
}
.about-img img {
    border-radius: 5px;
}
.hero-bg-s-img {
    max-width: 120px;
    margin: auto;
}
.hero-bg-s-img img svg {
    vertical-align: middle;
}


/* services  */
.service-section {
    background: var(--color-one);
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-top: 50px;
}
.service-card {
    border-radius: 5px;
    padding: 25px;
    border-radius: 5px;
    border-left: 5px solid var(--color-three);
    background: #142124;
}
.service-title {
    display: flex;
    gap: 15px;
}
.service-title i {
    font-size: 20px;
    color: var(--color-three);
}


/* who we serve  */
.who-we-serve-content ul {
    column-count: 2;
    column-gap: 40px;
    padding-top: 25px;
}
.who-we-serve-content ul li:before {
    content: '✔';
    color: var(--color-three);
    margin-right: 10px;
}
.who-we-serve-content ul li a {
    color: var(--color-one);
}
.who-we-serve-content ul li a:hover {
    color: var(--color-three);
    transition: all .2s ease-in;
}


/* reason  */
.reason-section {
    background: var(--color-one);
}
.reason-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding-top: 50px;
    width: 80%;
    margin: 0 auto;
}
.reason {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    border: 1px solid var(--color-five);
    padding: 20px;
    border-radius: 5px;
}
.reason:hover {
    background: var(--color-three);
    transition: all 0.2s ease-in;
}
.reason-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reason-img {
    max-width: 120px;
}


/* review  */
.review-section {
    background: var(--color-five);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-bottom: 120px;
}
.review-slide-wrapper {
    padding-top: 50px;
}
.review-content {
    text-align: center;
    color: var(--color-one);
    display: flex;
    flex-direction: column;
    gap: 30px;
    background: #ddf4ff;
    border-radius: 5px;
    padding: 20px;
}
.review-content h5 {
    font-size: 20px;
    font-weight: 500;
    padding-top: 10px;
}
.review-slider .splide__arrow {
    background: transparent;
}
.review-slider .splide__arrow svg {
    fill: var(--color-three);
}
.review-slider .splide__pagination {
    bottom: -2em;
}
.review-slider .splide__pagination__page.is-active {
    background: var(--color-three);
}
.review-slider .splide__arrow--prev {
    left: -2.2em;
}
.review-slider .splide__arrow--next {
    right: -2.2em;
}
.review-slider .splide__arrow {
    background: var(--color-five);
}
.quat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.quat-img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: none;
}
.review-slide-wrapper {
    padding-top: 20px;
}


/* contact  */
.contact-section {
    background: var(--color-five);
    background-image: linear-gradient(180deg, rgba(255,255,255,0) 25%, rgba(7,65,115,0.8) 100%),
    url(../img/contact1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.contact-left {
    width: 50%;
    gap: 10px;
}
.contact-left h5 {
    font-size: 20px;
    padding-top: 10px;
}
.contact-right {
    width: 50%;
}
.contact-form {
    border-radius: 5px;
    box-shadow: 2px 2px 2px #eee;
    padding: 25px;
    gap: 20px;
    background: var(--color-five);
}
.contact-form .form-group {
    width: 100%;
}
.contact-form input, .contact-form textarea {
    border: 1px solid var(--color-three);
    border-radius: 5px;
    padding: 10px;
    font-family: var(--font-two);
    font-size: 16px;
    width: 100%;
    outline: none;
}
.contact-form input::placeholder, .contact-form textarea::placeholder {
    color: rgb(214, 212, 212);
}
.contact-form input {
    height: 40px;
}
.submit-btn {
    border-radius: 5px;
    padding: 10px 24px !important;
    background: var(--color-six);
    color: var(--color-five);
    cursor: pointer;
    width: max-content !important;
    outline: none;
    border: none;
    font-size: 18px;
}
.submit-btn:hover {
    transform: translateX(8px);
    transition: all .2s ease-in;
    background: var(--color-three);
}
.contact-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contact-logo {
    max-width: 180px;
    padding-bottom: 20px;
}


/* industry  */
.industry-img {
    max-width: 150px;
    margin: auto;
    vertical-align: middle;
}
.industry-wrapper {
    padding-top: 50px;
}


/* footer  */
footer {
    background: var(--color-four);
}
.footer-links {
    justify-content: space-between;
    gap: 30px;
    padding: 50px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}
.footer-content h5, .footer-content a, .footer-content p {
    color: var(--color-five);
}
.footer-content h5 {
    font-size: 18px;
    font-family: var(--font-two);
    padding-bottom: 10px;
}
.footer-content a, .footer-content p {
    font-size: 15px;
    padding-bottom: 8px;
}
.footer-content a:hover {
    color: var(--color-three);
    transform: translateX(8px);
    transition: all .2s ease-in;
}
.footer-logo {
    max-width: 200px;
    padding-bottom: 30px;
}
.footer-content .social {
    padding-top: 20px;
    display: flex;
    gap: 12px;
}
.copyright p {
    font-size: 15px;
    padding: 20px 0;
}


/* mobile responsive  */

/* mobile  */
@media screen and (max-width:767px) {

    /* common  */
    .container {
        padding: 0 15px;
    }
    .btn-1 a {
        padding: 10px 20px;
    }
    .section-title h2 {
        font-size: 28px;
    }
    section {
        padding: 40px 0;
    }
    .gap50 {
        gap: 30px;
    }
    .w50 {
        width: 100%;
    }
    .section-title.aic {
        text-align: center;
    }
    
    /* topbar  */
    .top-contact-section {
        display: none;
    }

    /* hero  */
    .hero-section {
        background-image: url(../img/hero-mobile.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 80vh;
    }
    .hero-content {
        flex-direction: column;
        padding: 0 15px;
        gap: 2px;
    }
    .hero-left, .hero-right {
        width: 100%;
        padding: 0;
    }
    .hero-content h2 {
        color: var(--color-five);
        font-size: 28px;
    }
    #background-video {
        height: 80vh;
    }

    /* about  */
    .about-content {
        flex-direction: column;
    }

    /* service  */
    .service-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    /* who we serve  */
    .who-we-serve-wrapper {
        flex-direction: column;
    }
    .who-we-serve-content ul {
        column-count: 1;
    }

    /* reason  */
    .reason-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    /* contact  */
    .contact-left {
        display: none;
    }
    .contact-right {
        width: 100%;
    }
    .name, .contact {
        flex-direction: column;
    }

    /* footer  */
    .footer-links {
        flex-direction: column;
    }

}



@media screen and (max-width:991px) and (min-width:768px) {

    .hero-content h2 {
        font-size: 80px;
    }
    
    /* service  */
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* who we serve  */
    .who-we-serve-content ul {
        column-count: 1;
    }

    /* contact  */
    .name, .contact {
        flex-direction: column;
    }

    /* footer  */
    .footer-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        row-gap: 40px;
    }

}




/* ############################## our company  ######################################  */

nav.i-pg {
    background: var(--color-one);
}
.pg-top-section {
    background: var(--color-two);
    background-image: linear-gradient(180deg, rgba(0,0,0,0.0) 45%, rgba(7,65,115,0.0) 100%),
    url(../img/pg-top-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 400px;
    position: relative;
}
.pg-top-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.pg-img {
    max-width: 350px;
    margin: 0 auto;
}
.pg-title h2 {
    font-size: 50px;
}
.company-content {
    gap: 40px;
}
.our-company-img {
    padding-top: 50px;
    padding-bottom: 10px;
}
.our-company-txt ul {
    padding: 50px 0;
}
.our-company-txt ul li {
    padding-bottom: 10px;
}
.our-company-txt ul li:before {
    content: '✔';
    color: var(--color-three);
    margin-right: 10px;
}
.our-company-section {
    background: var(--color-two);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.8) 45%, rgba(255,255,255,0.9) 100%),
    url(../img/our-company.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/* ####  our company responsive   ###  */

@media screen and (max-width:767px) {
    
    .our-company-txt ul {
        width: 100%;
        padding-bottom: 0;
    }
    .company-content {
        flex-direction: column;
        gap: 0;
    }
}


/* ###############################  our team   #############################  */

.our-team-cards {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding-bottom: 50px;
}
.our-team-cards .card {
    background-color: #fff;
    box-shadow: 2px 2px 2px #ddf4ff;
    border-radius: 5px;
    width: calc(33.333% - 20px);
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.card-img img {
    border-radius: 5px 5px 0 0;
}
.card-txt {
    padding: 20px;
}
.card-txt h3 {
    padding-bottom: 10px;
    color: var(--color-one);
}


/* ### our team responsive ###  */

@media screen and (max-width:767px) {
    
    .our-team-cards {
        flex-direction: column;
    }
    .our-team-cards .card {
        width: 100%;
    }
}



/* ######################################### careers  ################################3##########  */
.opp-list {
    padding: 20px 0;
}
.careers-content h3 {
    padding: 15px 0;
    color: var(--color-one);
    font-size: 20px;
}
.careers-slide-wrapper {
    padding-top: 50px;
}
.careers-slider .splide__arrow {
    background: transparent;
}
.careers-slider .splide__arrow--next {
    right: 0;
    top: unset;
    bottom: -45px !important;
}
.careers-slider .splide__arrow--prev {
    right: 25px;
    top: unset;
    left: unset;
    bottom: -45px !important;
}
.careers-img {
    height: 250px;
}
.careers-content {
    border: 1px solid var(--color-one);
    padding: 20px;
    border-radius: 5px;
}
.careers-content:hover {
    border: 1px solid var(--color-three);
    background: var(--color-three);
    color: var(--color-five) !important;
    transition: all .2s ease-in;
}
.careers-content:hover h3 {
    color: var(--color-five);
}
.people-section {
    background: var(--color-one);
}


/* Careers pag responsive  */
@media screen and (max-width:767px) {
    
    /* page title  */
    .pg-title h2 {
        font-size: 38px;
    }
    .pg-top-img {
        display: none;
    }

    /* people  */
    .people  {
        flex-direction: column;
    }

    /* industry slider  */
    .industry-slider .splide__pagination {
        bottom: -20px;
    }
}


@media screen and (max-width:991px) and (min-width:768px) {

    /* industry slider  */
    .industry-slider .splide__pagination {
        bottom: -20px;
    }
}


/* ############################### connect with us ##########################################  */
.why-you-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 50px 0;
}
.why-you-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 2px 2px 2px 2px #eee;
    border-radius: 5px;
    padding: 20px;
}
.why-you-img {
    max-width: 60px;
}
.why-you-txt h3 {
    color: var(--color-three);
    padding-bottom: 15px;
    font-size: 20px;
}
.why-you-img img {
    object-fit: contain;
}


/* ###  connect with us responsive ###  */

@media screen and (max-width:767px) {
   
    .why-you-content {
        grid-template-columns: repeat(1, 1fr);
    }
}



/* ############################  CLOUD  #########################################################   */

.pg-top-section.service {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.0) 45%, rgba(7,65,115,0.0) 100%),
    url(../img/services-pg-top.png);
}
.service-content-section {
    background: var(--color-two);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.9) 45%, rgba(255,255,255,0.9) 100%),
    url(../img/service-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.what-we-do-sp {
    padding-top: 80px;
}
.service-content-section {
    padding-bottom: 0;
    padding-top: 20px;
}
.faq-content p.last, .service-content-section p.how-we-do {
    padding-bottom: 80px;
}

/* faq section   */
.accordion {
    padding-top: 50px;
    min-height: 500px;
}
.accordion .accordion-item {
    border-bottom: 1px solid var(--color-five);
}
.accordion .accordion-item button[aria-expanded='true'] {
    border-bottom: 1px solid var(--color-four);
}
.accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 20px;
    color: var(--color-five);
    font-size: 20px;
    font-weight: 400;
    border: none;
    outline: none;
} 
.accordion-item:nth-child(1) button {
    background-color: #071159;
}
.accordion-item:nth-child(2) button {
    background-color: #0e236c;
}
.accordion-item:nth-child(3) button {
    background-color: #14347d;
}
.accordion-item:nth-child(4) button {
    background-color: #1b448f;
}
.accordion-item:nth-child(5) button {
    background-color: #2155a0;
}
.accordion-item:first-child button {
    border-radius: 5px 5px 0 0;
}
.accordion-item:last-child button {
    border-radius:  0 0 5px 5px;
}
.accordion button:hover,
.accordion button:focus {
    cursor: pointer;
}
.accordion button:hover::after,
.accordion button:focus::after {
    cursor: pointer;
    color: var(--color-two);
    border: 1px solid var(--color-four);
}
  
.accordion button .accordion-title {
    padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
    display: inline-block;
    position: absolute;
    top: 18px;
    right: 20px;
    width: 22px;
    height: 22px;
    border: 1px solid;
    border-radius: 22px;
}
.accordion button .icon::before {
    display: block;
    position: absolute;
    content: '';
    top: 9px;
    left: 5px;
    width: 10px;
    height: 2px;
    background: currentColor;
}
.accordion button .icon::after {
    display: block;
    position: absolute;
    content: '';
    top: 5px;
    left: 9px;
    width: 2px;
    height: 10px;
    background: currentColor;
}
.accordion button[aria-expanded='true'] {
    color: var(--color-five);
}
.accordion button[aria-expanded='true'] .icon::after {
    width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
    opacity: 1;
    max-height: 9em;
    transition: all 200ms linear;
    will-change: opacity, max-height;
}
.accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
    background: var(--color-five);
    padding: 0 20px;
    border-left: 1px solid var(--color-one);
    border-right: 1px solid var(--color-one);
}
.accordion .accordion-content p {
    font-size: 18px;
    margin: 2em 0;
    color: var(--color-one);
}
.accordion-item:last-child .accordion-content {
    border-bottom: 1px solid var(--color-one);
    border-radius: 0 0 5px 5px;
}

.serve-industry-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    box-shadow: 2px 2px 2px #eee;
    border-radius: 5px;
    background: var(--color-five);
}
.serve-industry-content h5 {
    font-size: 20px;
    padding-bottom: 10px;
}
.serve-industry-content .btn-3 i {
    padding-left: 10px;
    margin: 10px 0 25px 0;
}
.serve-industry-slide-wrapper {
    padding-top: 50px;
}
.serve-industry-txt {
    padding: 0 20px;
}
.serve-industry-img img {
    border-radius: 5px 5px 0 0;
}
.serve-industry-slider .splide__arrow:disabled {
    opacity: 0;
}
.serve-industry-slider .splide__arrow--next {
    right: -2.2em;
}
.serve-industry-slider .splide__arrow--prev {
    left: -2.2em;
}
.serve-industry-slider .splide__arrow {
    border-radius: 5px;
    background: #ddf4ff;
}
.serve-industry-section {
    background: #ddf4ff;
}

.capabilities-card-wrapper {
    display: flex;
    gap: 40px;
    padding: 50px 0;
}
.capab-card {
    padding: 25px;
    background: var(--color-five);
    color: var(--color-three);
    border-radius: 5px;
    box-shadow: 2px 2px 2px #eee;
    flex: 1;
}
.capab-card.first {
    background: var(--color-three);
    color: var(--color-five);
}
.capab-card .card-txt {
    padding: 0;
}
.capab-card .card-title h4 {
    font-size: 22px;
    padding-bottom: 15px;
}


/* ### Cloud services responsive ###  */
 @media screen and (max-width:767px) {
    
    /* capabilities  */
    .capabilities-card-wrapper {
        flex-direction: column;
    }
 }



/* ###############################  retail   ######################################  */

.pg-top-section.retail {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/retail-bg.avif);
}
.segment-card-wrapper {
    padding: 50px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.segment-card {
    padding: 25px;
    color: var(--color-five);
    background: var(--color-three);
    border-radius: 5px;
}
.segment-card h4 {
    font-size: 22px;
    padding-bottom: 15px;
}
.segment-card:nth-child(odd) {
    background: var(--color-three);
}
.segment-card:nth-child(even) {
    background: var(--color-two);
}
.project-details-section {
    background: var(--color-one);
}
.project-result-wrapper {
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.project-result-card {
    color: var(--color-five);
    display: flex;
    gap: 30px;
    border-radius: 5px;
    background: #142124;
    border-right: 3px solid var(--color-three);
}
.project-result-card:nth-child(odd) {
    flex-direction: row-reverse;
    border-right: none;
    border-left: 3px solid var(--color-three);
}
.project-result-txt {
    width: 75%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.project-result-txt h4 {
    font-size: 20px;
}
.project-result-img {
    width: 25%;
}
.project-result-img img {
    border-radius: 5px 0 0 5px;
}
.segment-section .intro {
    padding-bottom: 50px;
}
.segment-section.our-company-section {
    background: var(--color-two);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.6) 45%, rgba(255,255,255,0.9) 100%),
    url(../img/industry-bg.jpg);
}
.join-us-section .btn-1 {
    margin-top: 25px;
}
.project-details-section, .serve-industry-txt p {
    display: none !important;
}
.serve-industry-content {
    min-height: 325px;
}
.our-team-cards.our-company {
    padding-top: 40px;
}
.our-team-cards.our-company .card-img {
    height: 260px;
}


/* ###  retail page responsive   ###  */

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

    .segment-card-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .project-result-card:nth-child(odd), .project-result-card:nth-child(even) {
        flex-direction: column;
    }
    .project-result-img, .project-result-txt {
        width: 100%;
    }
    .contact-left.connect {
        display: flex;
        width: 100%;
    }
    .contact-wrapper.connect {
        flex-direction: column;
    }
    
}


.contact-left.connect {
    background: var(--color-five) !important;
    border-radius: 5px;
    padding: 25px;
}
.contact-left.connect p.spe {
    color: #2155a0;
    font-weight: 500;
    font-size: 18px;
}
.contact-left.connect .btn-wrap {
    margin: 20px 0;
}

/* ###############################  retail   ######################################  */

.pg-top-section.transportation {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/transportation-bg.jpeg);
}

/* ###############################  travel   ######################################  */

.pg-top-section.travel {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/travel-bg.jpg);
}

/* ###############################  manufacture   ######################################  */

.pg-top-section.manufacture {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/manufacture-bg.avif);
}

/* ###############################  healthcare   ######################################  */

.pg-top-section.healthcare {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/healthcare-bg.avif);
}

/* ###############################  education   ######################################  */

.pg-top-section.education {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/education-bg.webp);
}

/* ###############################  Information Technology   ######################################  */

.pg-top-section.information {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/Information-bg.avif);
}

/* ###############################  aerospace   ######################################  */

.pg-top-section.aerospace {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/aerospace-bg.jpg);
}

/* ###############################  insuarance   ######################################  */

.pg-top-section.insuarance {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.7) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/insuarance-bg.jpg);
}

/* ###############################  Cloud Services   ######################################  */

.pg-top-section.cloud {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.7) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/Cloud-bg.jpg);
}

/* #####################  digital transformation n migration  ##############################  */

.pg-top-section.migration {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.7) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/migration-bg.avif);
}

/* #####################  cyber security  ##############################  */

.pg-top-section.cyber {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.7) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/cyber-bg.jpg);
}

/* #####################  it-outsourcing  ##############################  */

.pg-top-section.it-outsourcing {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.7) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/it-outsourcing-bg.jpg);
}

/* #####################  Loss Prevention & Asset Protection  ##############################  */

.pg-top-section.loss {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.7) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/loss-bg.jpg);
}



.segment-card.e-commerce {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.8) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/E-commerce.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.Brick-and-Mortar {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.8) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/Brick-and-Mortar.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.Omni-channel {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/Omni-channel.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.segment-card.shipping {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/shipping.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.warehouse {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/warehouse.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.supply-chain {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/supply-chain.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.segment-card.hotel {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/hotel.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.travel-agency {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/travel-agency.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.transportation {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/transportation-card.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.segment-card.production {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/production.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.supplier {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/supplier.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.inventory {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/inventory.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.segment-card.ehr {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/ehr.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.telemedicine {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/telemedicine.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.health-it {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/health-it.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.infra {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/infra.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.segment-card.tech {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/edu-tech.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.info {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/edu-info.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.campus {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.8) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/campus.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.segment-card.network {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/network.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.cloud-it {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/cloud-it.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.software {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/software.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.it-consult {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/it-consult.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.segment-card.flight {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/flight.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.airport {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.8) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/airport.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.aircraft {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.6) 45%, rgba(7,65,115,0.5) 100%),
    url(../img/aircraft.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.segment-card.claim {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.8) 45%, rgba(7,65,115,0.8) 100%),
    url(../img/claim.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.crm {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.8) 45%, rgba(7,65,115,0.8) 100%),
    url(../img/crm.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.segment-card.infra-ma {
    background-image: linear-gradient(180deg, rgba(0,0,0,0.8) 45%, rgba(7,65,115,0.8) 100%),
    url(../img/infra-ma.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}