/* Import Navigation Styles */
@import url('nav.css');
*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body{

    font-family: "poppins", sans-serif;

    background: #F6F9FF;

    color: #333;

    line-height: 1.6;

    padding: 20px;
    overflow-x: hidden;

}


/* Hero Section */

.cuttingedge-hero {

    position: relative;

    min-height: 60vh;

    display: flex;

    align-items: center;

    background: linear-gradient(135deg, #EEF4FF, #FFFFFF);

    padding-top: 80px;

    overflow: hidden;

    margin-top: -20px;

    margin-left: -20px;

    margin-right: -20px;

}


.cuttingedge-hero::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -10%;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);

    border-radius: 50%;

    animation: float 20s ease-in-out infinite;

}


@keyframes float {

    0%, 100% { transform: translate(0, 0) rotate(0deg); }

    33% { transform: translate(30px, -30px) rotate(120deg); }

    66% { transform: translate(-20px, 20px) rotate(240deg); }

}


.hero-content {

    position: relative;

    text-align: center;

    padding: 0 20px;

    z-index: 1;

    max-width: 800px;

    margin: 0 auto;

}


.hero-content h1 {

    font-size: 3.5rem;

    font-weight: 800;

    color: #132C6F;

    margin-bottom: 1.5rem;

    animation: fadeInUp 1s ease;

}


.hero-content p {

    font-size: 1.3rem;

    color: #5A6473;

    margin-bottom: 2rem;

    animation: fadeInUp 1s ease 0.2s both;

}


.hero-features {

    display: flex;

    justify-content: center;

    gap: 3rem;

    animation: fadeInUp 1s ease 0.4s both;

}


.feature {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 1rem;

    color: #5A6473;

}


.feature i {

    color: #2563EB;

    font-size: 1.2rem;

}


@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* Service Sections */

.service-section {

    padding: 80px 20px;

    background: #F4F8FF;

    margin: 0 -20px;

}


.service-section:nth-child(even) {

    background-color: #FFFFFF;

}


.container {

    max-width: 1200px;

    margin: 0 auto;

}


.section-header {

    display: flex;

    align-items: center;

    gap: 2rem;

    margin-bottom: 3rem;

}


.section-icon {

    width: 80px;

    height: 80px;

    background: #2563EB;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}


.section-icon i {

    font-size: 2rem;

    color: white;

}


.section-title h2 {

    font-size: 2.5rem;

    font-weight: 700;

    color: #070D5E;

    margin-bottom: 0.5rem;

}


.section-title p {

    font-size: 1.2rem;

    color: #6B7280;

    font-family: "inter", sans-serif;

}


/* Service Content */

.service-content {

    background: #FFFFFF;

    border-radius: 20px;

    padding: 50px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}


/* ERP Section Styles */

.content-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 3rem;

    margin-bottom: 3rem;

}


.content-left h3,

.content-right h3 {

    font-size: 1.5rem;

    font-weight: 600;

    color: #1E3A8A;

    margin-bottom: 1rem;

}


.content-left p,

.content-right p {

    font-size: 1.1rem;

    line-height: 1.7;

    color: #5A6473;

    font-family: "inter", sans-serif;

    margin-bottom: 1.5rem;

}


.key-features h4,

.industries-served h4 {

    font-size: 1.2rem;

    font-weight: 600;

    color: #2563EB;

    margin-bottom: 1rem;

}


.key-features ul {

    list-style: none;

}


.key-features li {

    font-size: 1rem;

    line-height: 1.6;

    color: #5A6473;

    margin-bottom: 0.8rem;

    padding-left: 1.5rem;

    position: relative;

    font-family: "inter", sans-serif;

}


.key-features li::before {

    content: '▶';

    position: absolute;

    left: 0;

    color: #2563EB;

    font-size: 0.8rem;

    top: 0.3rem;

}


.key-features strong {

    color: #132C6F;

    font-weight: 600;

}


.industry-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 0.8rem;

}


.industry-tags span {

    background: #EAF2FF;

    color: #2563EB;

    padding: 0.5rem 1rem;

    border-radius: 20px;

    font-size: 0.9rem;

    font-weight: 500;

}


.benefits-h3 {

    font-size: 1.5rem;

    font-weight: 600;

    color: #1E3A8A;

    margin-bottom: 2rem;

}


/* Benefits Grid */

.benefits-grid {

    margin-bottom: 3rem;

}


.benefits-grid h3 {

    font-size: 1.5rem;

    font-weight: 600;

    color: #1E3A8A;

    margin-bottom: 2rem;

}


.benefits-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

}


.benefit-card {

    background: #FFFFFF;

    padding: 2rem;

    border-radius: 15px;

    text-align: center;

    transition: all 0.3s ease;

}


.benefit-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2);

}


.benefit-card i {

    font-size: 2.5rem;

    color: #2563EB;

    margin-bottom: 1rem;

}


.benefit-card h4 {

    font-size: 1.2rem;

    font-weight: 600;

    color: #2563EB;

    margin-bottom: 0.8rem;

}


.benefit-card p {

    font-size: 0.95rem;

    color: #6B7280;

    font-family: "inter", sans-serif;

}


/* Tech Stack */

.tech-stack h3 {

    font-size: 1.5rem;

    font-weight: 600;

    color: #1E3A8A;

    margin-bottom: 2rem;

}


.tech-logos {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: 1.5rem;

}


.tech-item {

    background: #FFFFFF;

    padding: 1.5rem;

    border-radius: 15px;

    text-align: center;

    transition: all 0.3s ease;

}


.tech-item:hover {

    background: #EAF2FF;

    transform: translateY(-3px);

}


.tech-item i {

    font-size: 2rem;

    color: #2563EB;

    margin-bottom: 0.5rem;

}


.tech-item span {

    font-size: 0.9rem;

    font-weight: 600;

    color: #2563EB;

}


/* Product Engineering Styles */

.lifecycle h3 {

    font-size: 1.5rem;

    font-weight: 600;

    color: #1E3A8A;

    margin-bottom: 2rem;

}


.lifecycle-steps {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 3rem;

    position: relative;

}


.lifecycle-steps::before {

    content: '';

    position: absolute;

    top: 30px;

    left: 50px;

    right: 50px;

    height: 2px;

    background: linear-gradient(90deg, #2563EB, #070D5E);

    z-index: 0;

}


.step {

    flex: 1;

    text-align: center;

    position: relative;

    z-index: 1;

}


.step-number {

    width: 60px;

    height: 60px;

    background: #2563EB;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1.5rem;

    font-weight: 700;

    margin: 0 auto 1rem;

}


.step-content h4 {

    font-size: 1.1rem;

    font-weight: 600;

    color: #2563EB;

    margin-bottom: 0.5rem;

}


.step-content p {

    font-size: 0.9rem;

    color: #6B7280;

    font-family: "inter", sans-serif;

}


.tech-expertise {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

}


.expertise-item {

    background: #FFFFFF;

    padding: 2rem;

    border-radius: 15px;

    text-align: center;

    transition: all 0.3s ease;

}


.expertise-item:hover {

    background: #EAF2FF;

    transform: translateY(-3px);

}


.expertise-item i {

    font-size: 2.5rem;

    color: #2563EB;

    margin-bottom: 1rem;

}


.expertise-item h4 {

    font-size: 1.2rem;

    font-weight: 600;

    color: #2563EB;

    margin-bottom: 0.8rem;

}


.expertise-item p {

    font-size: 0.95rem;

    color: #6B7280;

    font-family: "inter", sans-serif;

}


.benefits-section h3 {

    font-size: 1.5rem;

    font-weight: 600;

    color: #1E3A8A;

    margin-bottom: 2rem;

}


.benefits-list {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}


.benefit-item {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

    padding: 1.5rem;

    background: #FFFFFF;

    border-radius: 15px;

    transition: all 0.3s ease;

}


.benefit-item:hover {

    background: #EAF2FF;

    transform: translateX(5px);

}


.benefit-item i {

    font-size: 2rem;

    color: #2563EB;

    margin-top: 0.2rem;

}


.benefit-item h4 {

    font-size: 1.2rem;

    font-weight: 600;

    color: #2563EB;

    margin-bottom: 0.5rem;

}


.benefit-item p {

    font-size: 0.95rem;

    color: #6B7280;

    font-family: "inter", sans-serif;

}


/* Digital Innovation Styles */

.innovation-areas h3 {

    font-size: 1.5rem;

    font-weight: 600;

    color: #1E3A8A;

    margin-bottom: 1rem;

}


.innovation-areas > p {

    font-size: 1.1rem;

    line-height: 1.7;

    color: #5A6473;

    font-family: "inter", sans-serif;

    margin-bottom: 2rem;

}


.innovation-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

    margin-bottom: 3rem;

}


.innovation-item {

    background: #FFFFFF;

    padding: 2rem;

    border-radius: 15px;

    text-align: center;

    transition: all 0.3s ease;

}


.innovation-item:hover {

    background: #EAF2FF;

    transform: translateY(-5px);

}


.innovation-item i {

    font-size: 2.5rem;

    color: #2563EB;

    margin-bottom: 1rem;

}


.innovation-item h4 {

    font-size: 1.2rem;

    font-weight: 600;

    color: #2563EB;

    margin-bottom: 0.8rem;

}


.innovation-item p {

    font-size: 0.95rem;

    color: #6B7280;

    font-family: "inter", sans-serif;

}


.benefits-cards {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

}


/* Cloud Services Styles */

.cloud-strategies h3 {

    font-size: 1.5rem;

    font-weight: 600;

    color: #1E3A8A;

    margin-bottom: 1rem;

}


.cloud-strategies > p {

    font-size: 1.1rem;

    line-height: 1.7;

    color: #5A6473;

    font-family: "inter", sans-serif;

    margin-bottom: 2rem;

}


.migration-types {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

    margin-bottom: 3rem;

}


.migration-type {

    background: #FFFFFF;

    padding: 2rem;

    border-radius: 15px;

    text-align: center;

    transition: all 0.3s ease;

}


.migration-type:hover {

    background: #EAF2FF;

    transform: translateY(-3px);

}


.migration-type i {

    font-size: 2.5rem;

    color: #2563EB;

    margin-bottom: 1rem;

}


.migration-type h4 {

    font-size: 1.2rem;

    font-weight: 600;

    color: #2563EB;

    margin-bottom: 0.8rem;

}


.migration-type p {

    font-size: 0.95rem;

    color: #6B7280;

    font-family: "inter", sans-serif;

}


.cloud-service-items {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

    margin-bottom: 3rem;

}


.cloud-service {

    background: #FFFFFF;

    padding: 2rem;

    border-radius: 15px;

    text-align: center;

    transition: all 0.3s ease;

}


.cloud-service:hover {

    background: #EAF2FF;

    transform: translateY(-3px);

}


.cloud-service i {

    font-size: 2.5rem;

    color: #2563EB;

    margin-bottom: 1rem;

}


.cloud-service h4 {

    font-size: 1.2rem;

    font-weight: 600;

    color: #2563EB;

    margin-bottom: 0.8rem;

}


.cloud-service p {

    font-size: 0.95rem;

    color: #6B7280;

    font-family: "inter", sans-serif;

}


.benefits-highlight {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 2rem;

}


.benefit-stat {

    background: linear-gradient(135deg, #F4F8FF 0%, #EAF2FF 100%);

    padding: 2rem;

    border-radius: 15px;

    text-align: center;

    transition: all 0.3s ease;

}


.benefit-stat:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2);

}


.benefit-stat h4 {

    font-size: 1.3rem;

    font-weight: 600;

    color: #2563EB;

    margin-bottom: 0.8rem;

}


.benefit-stat p {

    font-size: 0.95rem;

    color: #6B7280;

    font-family: "inter", sans-serif;

}


/* CTA Section */

.cta-section {

    background: linear-gradient(135deg, #2161a0 0%, #2563EB 100%);

    border: 2px solid #2563EB;

    border-radius: 30px;

    margin: 60px -20px;

    padding: 60px 20px;

    text-align: center;

    width: 80%;

    margin-left: 12%;

}


.cta-content h2 {

    font-size: 2.5rem;

    font-weight: 700;

    color: #FFFFFF;

    margin-bottom: 1.5rem;

}


.cta-content p {

    font-size: 1.2rem;

    color: rgba(255, 255, 255, 0.85);

    margin-bottom: 2rem;

    font-family: "inter", sans-serif;

    font-weight: 400;

}


.cta-content button {

    width: 200px;

    height: 50px;

    background-color: #FFFFFF;

    border: none;

    border-radius: 25px;

    color: #2563EB;

    font-size: 1.1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    margin: 0 0.5rem;

}


.cta-content button:hover {

    background-color: #F4F8FF;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);

}


.cta-content button a {

    color: inherit;

    text-decoration: none;

}


.secondary-btn {

    border: 2px solid #2563EB !important;

    color: #2563EB;

}


.secondary-btn:hover {

    color: #FFFFFF;

    text-decoration: none;

}



/* Footer Styles (Same as Homepage) */

footer{

    width: 100%;

    margin-top: 60px;

}

#footbox{

    width: 100vw;

    height: 300px;

    padding: 30px;

    background-color: rgb(82, 80, 80);

    margin-top: 20px;

    margin-left: -5vw;

}

#footbox img{

    width: 20px;

    height: auto;

    object-fit: contain;

}

#footabout{

    width: 85vw;

    height: auto;

    margin-top: 2rem;

    display: flex;

    justify-content: center;

}

#footnav{

    width: 45vw;

    height: auto;

    display: flex;

    justify-content: center;

    gap:20vw;

    margin-left: 20%;

}

#footnav1{

    display: flex;

    flex-direction: column;

    gap:9px;

}

#footnav2{

    display: flex;

    flex-direction: column;

    gap:9px;

}

#footnav a{

    color: #827E7E;

    text-decoration: none;

}

#footlogo{

    height: 5vh;

    width: 10vw;

    font-size: 22px;

    margin-top: -8vh;

    letter-spacing: -1px;

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

}

#footabout img {

  width: 72px;

  object-fit: contain;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));

}

#footabout_title{

    width: 19vw;

}



/* Responsive Design */

@media (max-width: 768px) {
    .nav-container {
        padding-left: 20px;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-content p {
        font-size: 1.1rem;
    }
    
    .hero-features {
        flex-direction: column;
        gap: 1rem;
    }
    
    .content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .lifecycle-steps {
        flex-direction: column;
        align-items: center;
    }
    
    .lifecycle-steps::before {
        width: 2px;
        height: 200px;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .step {
        margin-bottom: 2rem;
    }
    
    .service-content {
        padding: 30px;
    }
    
    .section-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .cta-content h2 {
        font-size: 2rem;
    }

    .services-dropdown .dropdown-menu {
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-top: 0.5rem;
        display: none;
        width: 100%;
        background: transparent;
    }

    .services-dropdown .dropdown-menu a {
        padding-left: 32px;
    }

    .services-dropdown.submenu-open .dropdown-menu {
        display: block;
    }

    .services-dropdown.submenu-open .services-link i {
        transform: rotate(180deg);
    }
}


@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .service-content {
        padding: 20px;
    }
    
    .section-icon {
        width: 60px;
        height: 60px;
    }
    
    .section-icon i {
        font-size: 1.5rem;
    }
    
    .section-title h2 {
        font-size: 1.8rem;
    }
    
    .benefits-grid,
    .tech-logos,
    .innovation-grid,
    .migration-types,
    .cloud-service-items {
        grid-template-columns: 1fr;
    }
    
    .cta-content h2 {
        font-size: 1.8rem;
    }
    
    .cta-content button {
        width: 150px;
        height: 45px;
        font-size: 1rem;
        margin: 0.5rem 0.2rem;
    }

    #footlogo {
        justify-content: center;
        margin-top: -5vh;

        position: relative;
        top: auto;
    }
    
    #footbox{
        height: 70vh;
    }
    #footbox h2{
        margin-left: -50px;
    }
    #footnav{
        margin-left:45vw ;
    }
    #footnav{
        display: flex;
        flex-direction: column;
    }
    #footbox img{
        margin-left:5vw;
    }
}


    @media (min-width: 768px) and (max-width: 1024px) {
        /* Navigation adjustments */
        .nav-container {
            width: 95%;
            padding-left: 20px;
            padding-right: 20px;
            margin-left: 2.5%;
        }
        
        .nav-links {
            margin-left: auto;
            gap: clamp(1rem, 2vw, 2rem);
            justify-content: flex-end;
        }
        
        .logo {
            margin-left: 3%;
            margin-right: auto;
        }
        
        /* Navigation adjustments for tablets/iPads */
        .nav-links {
            gap: clamp(1rem, 1.5vw, 2rem);
        }
        
        /* Footer responsive fixes for tablets */
        #footbox {
            width: 100%;
            margin-left: 0;
            height: auto;
            padding: 30px clamp(15px, 3vw, 30px);
        }
        
        #footabout {
            width: 95%;
            flex-direction: column;
            gap: 2rem;
            align-items: center;
        }
        
        #footabout img {
            width: 60px;
            margin-left: 0;
        }
        
        #footlogo {
            width: auto;
            margin-top: 0;
        }
        
        #footabout_title {
            width: 100%;
            max-width: 400px;
            text-align: center;
        }
        
        #footnav {
            width: 100%;
            margin-left: 0;
            gap: 10vw;
        }
        
        .nav-links li a {
            font-size: 0.85rem;
        }
        
        #contact-btn {
            width: 100px;
            font-size: 0.8rem;
        }
        
        .lang-btn-container {
            width: 100px;
        }
        
        .lang-btn-container button {
            font-size: 13px;
        }
    }