@import url("variables.d1e778e79b5e.css");

/* ---------------------Intro Section----------------------- */

.page-heading {
    font-size: clamp(1.75rem, 4vw + 1rem, 5rem);
    text-align: center;
    margin-top: 50px;
}

.cursive {
    font-family: var(--font-free-hand);
    color: var(--Secondry-blue);
}

.name-sec-1,
.name-sec-2,
.name-sec-3 {
    font-family: var(--font-inter);
}

.service-name {
    font-size: clamp(2rem, 2rem + 1vw, 5rem);
    line-height: 45px;
    margin: 20px auto;
    text-align: center;
    font-family: var(--font-poppins);
    padding: 0 10px;
    font-weight: 600;
    /* white-space: nowrap;
    overflow: hidden; */
}

.service-intro {
    font-family: var(--font-poppins);
    text-align: justify;
    margin: 20px 0;
    line-height: 25px;
}

.banner-block {
    border: 1px solid white;
    background-image: url("../images/banner1.9e78a2c657e9.png");
    background-repeat: no-repeat;
    background-size: cover;
}


/* ---------------------Intro Section End----------------------- */

.technology-block-items{
    width:70%;
    margin:0 auto;
    
}
/* ---------------------Sub Service Section----------------------- */

.sub-services-section>h2 {
    font-size: clamp(2rem, 1.2rem + 2vw, 2.8125rem);
    text-align: center;
    color: var(--Secondry-blue);
    font-weight: 500;
    font-family: var(--font-poppins);
    margin-top: 45px;
    margin-bottom: 30px;
}

.sub-services-section h2 span {
    font-weight: 700;
    color: var(--primary-green);
}

.sub-service-grid-block {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.sub-service-card {
    background-color: var(--card-bg-gray);
    padding: 20px;
    font-family: var(--font-poppins);
    border-radius: 10px;
    box-shadow: 0 3px 10px 1px var(--border-gray);
}

.sub-service-heading {
    position: relative;
    color: var(--white);
    padding-bottom: 5px;
    font-weight: 600;
}

.sub-service-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background-color: var(--white); /* og value --primary-orange changed for testing */
    transition: width 1s ease;
  }
  
  .sub-service-card:hover .sub-service-heading::after {
    width: 50%;
  }

  .sub-service-intro {
    text-align: justify;
    line-height: 27px;
    padding-top: 7px;
    color: var(--white);
  }



  /* Typing Animation Effect */

  .anim-typewriter{
    animation: typewriter 4s steps(44) 1s 1 normal both,
               blinkTextCursor 500ms steps(44) infinite normal;
  }
  @keyframes typewriter{
    from{width: 1em;}
    to{width: 22em;}
  }
  @keyframes blinkTextCursor{
    from{border-right-color: red;}
    to{border-right-color: transparent;}
  }




/* ---------------------Sub Service Section End----------------------- */

/* Media Query */

@media screen and (max-width:425px) {
    .mobile-card, .web-card, .ui-card, .qa-card {
        background-image: url("../images/white-paper-texture-background.1d2e77240f99.jpg") !important;
    }

    .mechanical-research, .mechanical-planning, .mechanical-support, .mechanical-design {
        background-image: url("../images/white-paper-texture-background.1d2e77240f99.jpg") !important;
    }

    .analog-circuit, .digital-circuit, .power-electronics, .pcb-design, .mixed-design, .embedded-gui {
        background-image: url("../images/white-paper-texture-background.1d2e77240f99.jpg") !important;
    }

    .predictive-analytics, .image-processing, .nlp, .rag, .intelligent-automation, .big-data, .explainable-ai, .ai-iot {
        background-image: url("../images/white-paper-texture-background.1d2e77240f99.jpg") !important;
    }
}

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

    .page-heading {
        margin-top: 160px;
    }
     .technology-block-items {
        margin-top: 20px;
        margin-bottom: 30px;
    }

}

@media screen and (min-width:1024px) {

    .page-starter {
        height: 65vh;
    }

    .service-intro {
        text-align: center;
    }

    .sub-service-grid-block {
        grid-template-columns: repeat(2, 1fr);
    }

    .sub-service-card {
        padding: 20px 30px;
    }
}

@media screen and (min-width:1600px) {

    /* .page-starter {
        height: 350px;
    } */
    .page-starter {
        margin-top: 250px;
    }
}

/* ------------------ Testing Code for software-service2.html ----------------- */

/* .mobile-card,  .web-card, .ui-card, .qa-card {
    background-position: center;
    background-size: cover;
    background-size: 110%;
    background-repeat: no-repeat;
    border-image: linear-gradient(to bottom, hsla(23, 90%, 55%, 0.9), hsla(23, 90%, 55%, 0.9), hsla(24, 96%, 10%, 0.9)) fill 1;
    transition: border-image 0.5s ease, background-size 0.5s ease;
    border-radius: 15px;
    overflow: hidden;
} */

.overlay-card {
    background-position: center;
    background-size: cover;
    background-size: 110%;
    background-repeat: no-repeat;
    /* border-image: linear-gradient(to bottom, hsla(23, 90%, 55%, 0.9), hsla(23, 90%, 55%, 0.9), hsla(24, 96%, 10%, 0.9)) fill 1; */
    transition: border-image 0.5s ease, background-size 0.5s ease;
    border-radius: 15px;
    overflow: hidden;
}

/* Enterprise Section Style */

.enterprise-service-name{
    color: var(--primary-orange);
}

.enterprise-overlay {
    border-image: linear-gradient(to bottom, hsla(23, 90%, 55%, 0.9) 30%, hsla(24, 96%, 10%, 0.9)) fill 1;
}

.enterprise-overlay:hover {
    border-image: linear-gradient(to bottom, hsla(23, 90%, 55%, 0.9), hsla(24, 96%, 10%, 0.9) 70%) fill 1;
    background-size: 120%;
}

.mobile-card {
    background-image: url("../images/representation-user-experience-interface-design.e6905d13277d.jpg");
}

.web-card {
    background-image: url("../images/computer-program-coding-screen.cbd021857b58.jpg");
}

.ui-card {
    background-image: url("../images/develop-coding-web-design-coding-web-template.b75eb446761a.jpg");
}

.qa-card {
    background-image: url("../images/programming-background-with-person-working-with-codes-computer.23fbf732efa5.jpg");
}

/* Enterprise Section Style End */


/* Mechanical Section Style */

.mechanical-service-name{
    color: var(--primary-light-blue);
}

.mechanical-overlay {
    border-image: linear-gradient(to bottom, hsla(192, 98%, 39%, 0.9) 30%, hsla(0, 0%, 0%, 0.9)) fill 1;
}

.mechanical-overlay:hover {
    border-image: linear-gradient(to bottom, hsla(192, 98%, 39%, 0.9), hsla(0, 0%, 0%, 0.9) 70%) fill 1;
    background-size: 120%;
}

.mechanical-design {
    background-image: url("../images/mechanical-design-card-img.28f6c2c5ffb8.jpg");
}

.mechanical-support {
    background-image: url("../images/manufacture-support-card.677813c89940.jpg");
}

.mechanical-research {
    background-image: url("../images/technical-studies-img.7ed944ac256a.jpg");
}

.mechanical-planning {
    background-image: url("../images/planning-card.84a74c208a83.jpg");
}
/* Mechanical Section Style End*/


/* Embedded Section Style */

.embedded-service-name{
    color: var(--primary-blue);
}

.embedded-overlay {
    border-image: linear-gradient(to bottom, hsla(206, 100%, 33%, 0.9) 30%, hsla(0, 0%, 0%, 0.9)) fill 1;
}

.embedded-overlay:hover {
    border-image: linear-gradient(to bottom, hsla(206, 100%, 33%, 0.9), hsla(0, 0%, 0%, 0.9) 70%) fill 1;
    background-size: 120%;
}

.analog-circuit {
    background-image: url("../images/analog-circuit-img.b0db362612c4.jpg");
}

.digital-circuit {
    background-image: url("../images/digital-circuit-img.48e8e7dbb346.jpg");
}

.power-electronics {
    background-image: url("../images/power-electronics-img.f051619bb932.jpg");
}

.pcb-design {
    background-image: url("../images/pcb-design.20b77aabd634.jpg");
}

.mixed-design {
    background-image: url("../images/mixed-design-img.e917b1144286.jpg");
}
.embedded-gui  {
    background-image: url("../images/gui-embedded.9efda32a9aba.jpg");
}

/* Embedded Section Style End */


/* Data Science Section */

.data-science-service-name{
    color: var(--primary-green);
}

.data-science-overlay {
    border-image: linear-gradient(to bottom, hsla(139, 75%, 40%, 0.9) 30%, hsla(0, 0%, 0%, 0.9)) fill 1;
}

.data-science-overlay:hover {
    border-image: linear-gradient(to bottom, hsla(139, 75%, 40%, 0.9), hsla(0, 0%, 0%, 0.9) 70%) fill 1;
    background-size: 120%;
}

.predictive-analytics {
    background-image: url("../images/predictive-analytics-img.664510d13a20.jpg");
}

.image-processing {
    background-image: url("../images/image-processing-img.4ffa9d6cd91a.jpg");
}

.nlp {
    background-image: url("../images/nlp-img.93f428953e15.jpg");
}

.rag {
    background-image: url("../images/rag-img.a89bca9e720d.jpg");
}

.intelligent-automation {
    background-image: url("../images/intelligent-automation-img.6ed727140d4c.jpg");
}

.big-data {
    background-image: url("../images/big-data-img.5f1a5740f56d.jpg");
}

.explainable-ai {
    background-image: url("../images/explainable-ai-img.6008e54154b7.jpg");
}

.ai-iot {
    background-image: url("../images/ai-iot-img.773dfa2675ba.jpg");
}





/* Data Science Section End */

/* .mobile-card .sub-service-heading, .web-card .sub-service-heading, .ui-card .sub-service-heading {
    color: white;
    font-size: 1.5rem;
} */

/* .mobile-card .sub-service-intro, .web-card .sub-service-intro, .ui-card .sub-service-intro {
    color: white;
}

.sub-service-card {
    overflow: hidden;
} */


/* .overlay {
    border-image: linear-gradient(to bottom, hsla(23, 90%, 55%, 0.9), hsla(23, 90%, 55%, 0.9), hsla(24, 96%, 10%, 0.9)) fill 1;
    transition: border-image 0.5s ease;
    border-radius: 15px;
} */

/* .mobile-card:hover {
    border-image: linear-gradient(to bottom, hsla(23, 90%, 55%, 0.9), hsla(24, 96%, 10%, 0.9), hsla(24, 96%, 10%, 0.9)) fill 1;
    background-size: 120%;
}

.web-card:hover {
    border-image: linear-gradient(to bottom, hsla(23, 90%, 55%, 0.9), hsla(24, 96%, 10%, 0.9), hsla(24, 96%, 10%, 0.9)) fill 1;
    background-size: 120%;
}

.ui-card:hover {
    border-image: linear-gradient(to bottom, hsla(23, 90%, 55%, 0.9), hsla(24, 96%, 10%, 0.9), hsla(24, 96%, 10%, 0.9)) fill 1;
    background-size: 120%;
} */

.service-tech img {
    transition: transform 0.3s ease;
}

.service-tech img:hover {
    transform: translateY(-5px);
}


/* ===================================================
   Services Index Page
   =================================================== */

/* page-intro reused from other pages */
.page-intro {
    font-size: clamp(1rem, 0.5rem + 1vw, 1.3125rem);
    text-align: justify;
    font-family: var(--font-poppins);
    padding: 0 10px;
    font-weight: 400;
    color: var(--Secondry-blue);
    margin: 20px 0 60px;
}

/* Grid */
.svc-index-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 56px 0 90px;
}

/* ---- Cards ---- */

.svc-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    border-radius: 16px;
    border: 1.5px solid var(--very-light-gray);
    background: #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Coloured top bar */
.svc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    transition: height 0.4s ease;
}

.svc-card--orange::before  { background: var(--primary-orange); }
.svc-card--blue::before    { background: var(--primary-blue); }
.svc-card--lightblue::before { background: var(--primary-light-blue); }
.svc-card--green::before   { background: var(--primary-green); }

/* Subtle colour wash on hover */
.svc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.svc-card--orange::after  { background: linear-gradient(135deg, rgba(243,116,35,0.06) 0%, transparent 60%); }
.svc-card--blue::after    { background: linear-gradient(135deg, rgba(0,93,166,0.06) 0%, transparent 60%); }
.svc-card--lightblue::after { background: linear-gradient(135deg, rgba(2,158,195,0.06) 0%, transparent 60%); }
.svc-card--green::after   { background: linear-gradient(135deg, rgba(26,178,75,0.06) 0%, transparent 60%); }

.svc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.11);
}

.svc-card:hover::before { height: 7px; }
.svc-card:hover::after  { opacity: 1; }

.svc-card--orange:hover  { border-color: rgba(243,116,35,0.35); }
.svc-card--blue:hover    { border-color: rgba(0,93,166,0.35); }
.svc-card--lightblue:hover { border-color: rgba(2,158,195,0.35); }
.svc-card--green:hover   { border-color: rgba(26,178,75,0.35); }

/* Card inner padding wrapper */
.svc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 28px 0;
}

.svc-card-title {
    font-family: var(--font-poppins);
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--Secondry-blue);
    margin: 0;
    padding: 0 28px;
    line-height: 1.3;
}

.svc-card-desc {
    font-family: var(--font-poppins);
    font-size: 0.88rem;
    color: var(--font-gray);
    line-height: 1.8;
    margin: 0;
    padding: 0 28px;
    flex: 1;
}

/* Bottom link bar */
.svc-card-link {
    font-family: var(--font-poppins);
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 14px 28px;
    border-top: 1px solid var(--very-light-gray);
    margin-top: 8px;
    transition: gap 0.25s ease, padding-left 0.25s ease;
}

.svc-card--orange .svc-card-link  { color: var(--primary-orange); }
.svc-card--blue .svc-card-link    { color: var(--primary-blue); }
.svc-card--lightblue .svc-card-link { color: var(--primary-light-blue); }
.svc-card--green .svc-card-link   { color: var(--primary-green); }

.svc-card:hover .svc-card-link {
    gap: 12px;
    padding-left: 32px;
}

/* Icon box */
.svc-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: transform 0.35s ease;
}

.svc-card:hover .svc-card-icon {
    transform: scale(1.12) rotate(-4deg);
}

.svc-card--orange .svc-card-icon  { background: #fff3ea; color: var(--primary-orange); }
.svc-card--blue .svc-card-icon    { background: #e6f0fb; color: var(--primary-blue); }
.svc-card--lightblue .svc-card-icon { background: #e0f7fc; color: var(--primary-light-blue); }
.svc-card--green .svc-card-icon   { background: var(--light-primary-green); color: var(--primary-green); }

/* Category tag badge */
.svc-card-tag {
    font-family: var(--font-poppins);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
}

.svc-card--orange .svc-card-tag  { background: #fff3ea; color: var(--primary-orange); }
.svc-card--blue .svc-card-tag    { background: #e6f0fb; color: var(--primary-blue); }
.svc-card--lightblue .svc-card-tag { background: #e0f7fc; color: var(--primary-light-blue); }
.svc-card--green .svc-card-tag   { background: var(--light-primary-green); color: var(--primary-green); }

/* Responsive */
@media screen and (max-width: 480px) {
    .svc-index-grid {
        gap: 18px;
        padding: 36px 0 60px;
    }

    .svc-card-top {
        padding: 20px 18px 0;
    }

    .svc-card-title {
        padding: 0 18px;
        font-size: 1.1rem;
    }

    .svc-card-desc {
        padding: 0 18px;
        font-size: 0.85rem;
    }

    .svc-card-link {
        padding: 12px 18px;
    }
}

@media screen and (min-width: 425px) {
    .page-intro {
        text-align: center;
    }
}

@media screen and (min-width: 768px) {
    .svc-index-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-heading {
        margin-top: 160px;
    }
}

/* ---------------------Join Us CTA Block----------------------- */

.join-us-block {
    background-color: var(--light-primary-orange);
    padding-top: 30px;
    padding-bottom: 30px;
    font-family: var(--font-inter);
    text-align: justify;
    margin-top: 100px;
}

.join-us-block h2 {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--Secondry-blue);
}

.join-us-block h2 span {
    color: var(--primary-orange);
}

.join-us-block p {
    font-size: 1.1rem;
    color: var(--Secondry-blue);
}

.join-us-btn {
    background-color: var(--primary-orange);
    border: 1px solid var(--primary-orange);
    color: var(--white);
    padding: 10px;
    width: 100%;
    font-weight: 600;
    border-radius: 9px;
    transition: background-color 0.3s ease;
}

.join-us-btn:hover {
    background-color: transparent;
    color: var(--primary-orange);
}

@media screen and (min-width: 1024px) {
    .join-us-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        padding: 30px 60px;
    }

    .join-us-block {
        padding: 0;
    }

    .join-us-content p {
        margin-bottom: 0;
    }

    .join-us-btn {
        width: 100%;
    }
}

/* ---------------------Join Us CTA Block End----------------------- */