html {
    scroll-behavior: smooth;
}
body{
    margin: 0 auto;
    -webkit-transition: 3s ease-in-out;
    -moz-transition: 3s ease-in-out;
    -o-transition: 3s ease-in-out;
    transition: 3s ease-in-out;
    overflow: auto;
}

#hamburgerIcon{
    height: 30px;
    width: 30px;
    cursor: pointer;
}

.hidden{
    display:none;
}

.container{
    width: 100%;
    
}
.header-container{
    background-color: var(--black);
    padding: 3rem 8rem;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 11;
    height: 7rem;
}

.navigations-mob{
    position: relative;
    display: none;
}

.navigation-list{
    color: var(--conifer);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 300;
    text-transform: uppercase;
    padding-right: 2rem;
    cursor: pointer;
    text-decoration: none;
}

.navigation-list:hover{
    color: white;
}

.navigation-list:last-child{
    padding-right:0;
}

.hamburger-items{
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 1;
    right: 0;
    
}

.hamburger-items .navigation-list{
    padding: 1rem 1.5rem;
    background-color: var(--black);
    text-align: center;
}

.hamburger-items .navigation-list:hover{
    background-color: var(--white);
}

.navigations{
    justify-self: flex-end;
    text-align: center;
}

.logo{
    justify-self: flex-start;
    display: flex;
    align-items: center;  
}

.company-logo{
    width: 100%;
    
}

.company-logo:hover{
    color: white;
    
}

.company-name{
    color: var(--conifer);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-l2);
}

.banner{
    background-color: var(--black);
    padding: 10rem 8rem;
    position: relative;
    box-sizing: border-box;
    height: 87vh;
}
.banner-text{
    color: var(--white);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xxl);
    font-weight: 200;
    width: 80%;
    /* line-height: 4rem; */
    padding-left: 10rem;
    padding-top: 5rem;
}

.banner-img-wrapper{
    width:30%;
    height: 80%;
    position: absolute;
    top:10%;
    right: 9rem;
    background: url('./assets/img/home-pic.svg') no-repeat;
    background-size: 100% 100%;
}

.technology{
    width: 100%;
    padding:5rem 12rem;
}

.tech-text{
    color: var(--black);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-l);
    font-weight: 200;
    width: 80%;
    letter-spacing: 0;
    line-height: 3.5rem; 
}

.tech-color{
    color: var(--conifer);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xl);
    font-weight: 200;
    width: 80%;
    letter-spacing: 0;
    line-height: 3.25rem;
}

.tech-button {
    border: 2px solid black;
    background-color: white;
    padding: 14px 28px;
    font-size: var(--font-size-s);
    cursor: pointer;
    border-color:var(--conifer);
    color: var(--black);
    display: block;
    margin-top: 4rem;
    
  }

.link , .maint-link , .strt-link {
    font-size: var(--font-size-s);
    font-weight: bold;
    display: block;
    color: var(--black);
    margin: 0.5rem 0rem;
    text-decoration: none;
    padding-top: 1rem;
}

.maint-link , .strt-link{
    padding-left: 2.3rem;
    display: none;
}

.enterprise-main:hover .maint-link {
    display: block;
}

.startup-main:hover .strt-link {
    display: block;
}

.arrow{
    color: var(--conifer);
}

.enterprise-container{
    padding: 5rem 8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.enterprise-img{
    background-color: var(--te-papa-green);
    width: 100%;
    height:20rem;
    
}
.enterprise-headingwrapper{
    background-color: var(--te-papa-green);
    position: absolute;
    width: 80%;
    z-index: 1;
    top: 20rem;
    padding-bottom: 20px;
}

.link-enterprise{
    font-size: var(--font-size-s);
    font-weight: bold;
    display: block;
    color: var(--black);
    margin: 0.5rem 0rem;
    text-decoration: none;
    padding-left: 1rem;
}

.enterprise-heading{
    text-shadow: 0px 3px 6px #00000029;
    color: var(--white);
    font-family: var(--font-family-open_sans);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 800;
    text-align: center;
}


.enterprise-text{
    color: var(--black);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 200;
    padding: 1rem;
}

.enterprise-wrapper{
    height: 20rem;
    overflow-y: auto;
    margin-left: 20%;
    margin-top: 30px;
    z-index: 5;
}


.enterprise{
    width: 32%;
    box-shadow: 7px 7px 7px #00000029;
    position: relative;
}
.know-us{
    background-color: var(--black);
    padding: 5rem 8rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 87vh;
}

.know-us-text-wrapper{
    width: 65%;
    padding: 2%;
    text-align: justify;
    
}
.know-us-text{
    color: var(--white);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xxl);
    font-weight: 100;
    letter-spacing: 0;
    line-height: 3rem;
    text-align: justify;
    
}

.know-us-heading{
    letter-spacing: 0;
    text-align: center;
    text-shadow: 7px 7px 7px #00000029;
    white-space: nowrap;
    color: var(--white);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xxxxl);
    font-style: normal;
    font-weight: 400;
    position: relative;
    text-align: center;
}

.know-us-img-wrapper{
    width: 50%;
  
}

.know-us-img{
    width: 100%;
}

.java-container{
    width: 100%;
    padding: 5rem 8rem;
}

.java-text{
    color: var(--black);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xl);
    font-weight: 200;
    width: 100%;
    letter-spacing: 0;
    line-height: 3.25rem;
    padding: 0 7rem;
    
}

.java-backend-heading{
    text-align: center;
    white-space: nowrap;
    color: var(--black);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 300;
    margin-top: 5rem;
}

.backend-img-container, .database-img-container {
    display: flex;
    justify-content: space-around;
    margin-top: 3rem;
}

.database-img{
    margin-bottom: 2rem;
}

.frontend-img-container, .cloud-img-container{
    display: flex;
    justify-content: space-around;
    margin-top: 3rem;
}

.java-frontend cloud{
    width: 60%;
}

.only-img-container{
    width: 100%;
    background-color: var(--dingley);

}
.only-img{
    width: 100%;
}

.only-text{
    color: var(--black);
    font-family: var(--font-family-poppins);
    font-size: var(  --font-size-l);
    font-style: normal;
    font-weight: 200;
    padding: 4rem 20rem;
    
}

.service-heading{
    text-align: center;
    font-size: 4rem;
    font-style: normal;
    margin-top: 5rem;
    color: var(--conifer);
    font-family: var(--font-family-open_sans);
    font-size: var(--font-size-xl);
    font-weight: 800;
    margin-bottom: 2rem;
}

.service-content{
    background-color: var(--conifer);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 2rem 8rem;
}
.services-box{
    width: 50%;
    padding-bottom: 2rem;
}

.web-dev{
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
}

.app-dev{
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    padding-left: 1rem;
}

.devops-dev{
    border-right: 2px solid var(--white);
    border-top: 2px solid var(--white);
    padding-top: 1rem;
}

.ux-dev{
    border-left: 2px solid var(--white);
    border-top: 2px solid var(--white);
    padding-left: 1rem;
    padding-top: 1rem;
}

.heading{
    color: var(--white);
    font-family: var(--font-family-open_sans);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 800;
}

.texting{
    color: var(--white);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 200;
    margin-top: 1rem;
}

.refractor{
    
    background-color: #F1F1F1;
    height: 87vh;
}

.refractor-img{
    width: 58%;
    display: inline-block;
    vertical-align: top;
}

.refractor-img-inside{
    width: 100%;
}

.code-refractor , .Software-Stack{
    padding: 2rem 0;
    width: 90%;
}
.audit{
    display: inline-block;
    width: 40%;
}

.code-refractor-heading , .Software-Stack-heading{
    color: var(--black);
    font-family: var(--font-family-open_sans);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 800;
    margin-bottom: 1rem;
}

.Software-Stack-text , .code-refractor-text{
     color: var(--black);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 200;
    line-height: 2.25rem;
}

.maintenance-container{
    display: flex;
    justify-content: space-between;
    padding: 5rem 5rem;
}

.maintenance-main , .enterprise-main ,.startup-main{
    background-color: var(--white);
    margin: 1rem;
    width: 30%;
    
}
.maintenance-main:hover{
    background-color: var(--conifer);
    
}
.enterprise-main:hover{
    background-color: var(--conifer);
    
}

.startup-main:hover{
    background-color: var(--conifer);
    
}

.maintenance-body, .enterprise-body , .startup-body{   
    color: var(--black);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 200;
    padding: 2rem;
    text-align: justify;
    }

.maintenance-head, .enterprise-head , .startup-head{
    color: var(--black);
    font-family: var(--font-family-open_sans);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 800;
    padding-left: 2rem;
    padding-top: 2rem;
}    

.long-img{
    width: 100%;
     object-fit: none;
}

.only-img-text{
    color: var(--black);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 200;
    padding: 5rem 15rem;
    
}

.roadmap{
    display: flex;
    padding: 5rem 6rem;
    justify-content: space-between;
    background-color: #F1F1F1;
}

.product-roadmap-head , .product-dev-head{
    color: #104639;
    font-family: var(--font-family-open_sans);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 800;
    margin-bottom: 3rem ;

}

.product-roadmap-body , .product-dev-body{
    text-align: left;
    letter-spacing: 0px;
    color: #104639;
    opacity: 1;
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 300;
}


.product-dev , .product-roadmap{
    width: 50%;
    margin:1rem;
}

.product-dev-img , .product-roadmap-img{
    width: 100%;
}

.what-we-do-head{
    color: var(--conifer);
    font-family: var(--font-family-open_sans);
    font-size: var(--font-size-xxxl);
    font-weight: 800;
    text-align: center;
    margin-top: 3rem;
}

.what-we-do-points-container{
 display: flex;
 justify-content: space-between;
}

.what-we-do-no{

    height: 50px;
    width: 50px;
    display: inline-block;
    text-align: center;
    padding-top: 1rem;
    border-radius: 50%;
    box-shadow: 2px 2px 8px #636060;
    font-size: var(--font-size-s);
    font-weight: 700;
}

.what-we-do:hover .what-we-do-no{
    background-color: var(--conifer);
    color: var(--white);
}

.what-we-do-text{
    color: var(--prussian-blue);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 700;
    margin-left:2rem;
}

.what-we-do:hover .what-we-do-text{
    font-size: calc(var(--font-size-l) + 5px);
}

.what-we-do-points-container-left, .what-we-do-points-container-right{
    width: 50%;
}

.what-we-do-points-container{
    padding: 5rem 8rem;
    margin-bottom: 8rem;;
}

.what-we-do{
    margin-bottom: 3rem;
}


.modernization-container{
    display: flex;
    padding: 0 8rem;
    position: relative;
    justify-content: flex-end;
    background-color: #F1F1F1;
    margin-bottom: 8rem;;
}
.modernization-left {
    background-image: url("./assets/img/modernisation.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: var(--dingley);
    height:30rem;
    position: absolute;
    top: -4rem;
    left: 5rem;
    padding: 2.5rem;
    padding-top: 7rem;/*  new */
    min-width: 40rem; /*  new */
}

.modernization-right{
    width: 50%;
    background-color: white;
}

.modernization-left-head{
    color: var(--white);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xxxxl);
    font-style: normal;
    font-weight: 700;
}

.modernization-left-body{
    color: var(--white);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 700;
    margin: 0;
    padding: 0;
    list-style: none;
}

.modernization-right-head{
    text-align: left;
    font-family: var(--font-family-poppins);
    letter-spacing: 0px;
    color: #000000;
    padding: 0rem 2rem;
    font-size: var(--font-size-l);
    font-weight: 700;
}

.modernization-right-body{
    text-align: left;
    font-family: var(--font-family-poppins);
    letter-spacing: 0px;
    color: #000000;
    font-size: var(--font-size-m);;
    line-height: 38px;
    padding: 0rem 2rem;
    font-style: normal;
    font-weight: 100;
}

.plus{
    padding: 5rem 8rem;
    margin-top: 3rem;
}

.plus-head{
    color: var(--conifer);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xxl);
    font-weight: 700;
    display: block;
    text-align: center;    
    margin-bottom: 1rem;
}
.plus-body{
    display: flex;
    flex-wrap: wrap;
    padding: 2rem;
}

.included-services{
    padding: 2rem;
    width: 50%;
}

.plus-cloud{
    border-right: 2px solid var(--conifer);
    border-bottom: 2px solid var(--conifer);
    padding-bottom: 2rem;
}

.plus-rewrite{
    border-left: 2px solid var(--conifer);
    border-bottom: 2px solid var(--conifer);
    padding-bottom: 2rem;
}

.plus-modern{
    border-right: 2px solid var(--conifer);
    border-top: 2px solid var(--conifer);
    padding-bottom: 5rem;
}

.plus-digital{
    border-left: 2px solid var(--conifer);
    border-top: 2px solid var(--conifer);
    padding-bottom: 5rem;
}

.plus-cloud-head, .plus-rewrite-head, .plus-modern-head, .plus-digital-head{
    color: var(--black);
    font-family: var(--font-family-open_sans);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 800;   
    margin-bottom: 2rem;
}

.plus-cloud-body, .plus-rewrite-body, .plus-modern-body, .plus-digital-body{
    color: var(--black);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 200;
}

.footer-container{
    background-color: var(--black);
    padding: 5rem 8rem;
}

.footer-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-top-project{
    color: var(--white);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 300;
    width: 50%;
    padding: 2rem;
}

.footer-top-hello{
    color: var(--white);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
    width: 50%;
    padding: 2rem;
}
.footer-top-mail{
    color: var(--conifer);
    font-family: var(--font-family-poppins);
    font-size: var(--font-size-l);
    font-weight: 400;
    margin: 1rem 0rem;

}
.footer-bottom{
    text-align: center;
    margin-top: 5rem;
}
.footer-icons{
    text-align: center;
    width: 50%;
    margin:  auto;
    border-bottom: 2px solid var(--conifer);
    padding: 2rem 1rem;
}
.sm-icon{
    margin-right: 1.5rem;
}

.footer-location{
    color: var(--conifer);
    width: 90%;
    margin: 2rem auto;
    font-size: var(--font-size-xs);
    
}



@media only screen and (max-width: 768px) {
    .header-container{
        padding: 45px 100px;
    }
    .banner{
        padding: 5rem;
        height: 50vh;
    }
    .banner-text{
        padding-left: 0rem;
        font-size: var(--font-size-xl);
        line-height: 2.5rem;
    }
    .banner-img-wrapper{
        width: 65%;
        top: 0;
        bottom: 0;
        height: auto;
        background-size: 100% 120%;
    }
    .technology{
        padding: 5rem 5rem;
    }
    .tech-text{
        font-size: var(--font-size-m);
        line-height: 3rem;

    }
    .tech-color{
        font-size: var(--font-size-xl);
    }
    .navigations-mob{
        display: block;
    }
    .navigations{
        display: none;
    }
   
    .enterprise-container{
        padding: 2rem 0rem;
        display: flex;
        flex-direction: column;
    }
    .enterprise{
        width: 100%;
        margin-top: 2rem;
        min-height: auto;
        position: relative;
    }
    .enterprise-img{
        width: 100%;
        max-height: 10rem;
        opacity:0.8;
    }
    .enterprise-headingwrapper{
        position: absolute;
        top: 4rem;
        left:0;
        right:0; 
        padding-bottom: 10px;
    padding-top: 10px;
    width: 100%;
    }
    .enterprise-wrapper{
        margin-left: 12%;
        margin-right: 9%;
    }
    .enterprise-text {
        font-size: var(--font-size-m);
        font-family: var(--font-family-poppins);
        font-weight: 200;
    }
    .enterprise-heading{
        font-size: var(--font-size-m);
    }
    .link-enterprise{
        font-size: var(--font-size-m);
        font-family: var(--font-family-poppins);
        font-weight: 300;
    }
    .know-us{
        padding: 0rem 0rem;
        position: relative;
        text-align: center;
        display: block;
        height: 65vh;
    }
    .know-us-img-wrapper{
        width: 100%;
    }
    .know-us-text-wrapper{
        /* top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10rem 5rem;
    }

    .know-us-text{
        font-size: var(--font-size-xl);
        font-weight: 200;
        /* position: absolute; */
    }
    .java-container{
        padding: 2rem 5rem;
        font-size: var(--font-size-m);
    }
    .java-text{
        font-size: var(--font-size-l);
        padding: 0;
    }
    .cloud-img-container {
        display:flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .only-text{
        padding: 2rem 5rem;
        font-size: var( --font-size-m);
    }  
    .service-heading{
        margin: 2rem 0rem;
    }
    .service-content{
        padding: 2rem 5rem;
        display: flex;
        flex-direction: column;
    }
    .services-box{
        width: 100%;
        border-top: none;
        border-bottom:none ;
        border-right: none;
        border-left: 2px solid var(--white);
        padding-left: 1rem;
        margin-bottom: 2rem;
    }
    .web-dev{
        border: none;
    }
    .texting{
        font-size: var(--font-size-m);

    }
    .refractor{
        padding: 0rem 0rem;
        text-align: left;
        position: relative;
        height: 60vh;
    }
    .refractor-img{
        position: relative;
        width: 100%;
    }
    .audit{
        padding: 0rem 5rem;
        display: flex;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 3.75rem;
        bottom: 20px;
    }
    .code-refractor, .Software-Stack {
        padding: 0 0 2rem;
        
    }

    .code-refractor-text , .Software-Stack-text {
        font-size: var(--font-size-m);
        
    }
    .maintenance-container{
        flex-direction: column;
        padding: 2rem 5rem;
    }
    .maintenance-main, .enterprise-main, .startup-main{
        width: 100%;
        text-align: center;
    }
    .maintenance-head, .enterprise-head, .startup-head{
        font-size: var(--font-size-xl);
    }
    .maintenance-body, .enterprise-body, .startup-body{
        font-size: var(--font-size-m);
    }
    .only-img-text{
        padding: 2rem 5rem;
        font-size: var(--font-size-m);
    }
    .roadmap{
        padding: 2rem 5rem;
        flex-direction: column;
    }
    .product-roadmap, .product-dev{
        width: 100%;
        position: relative;

    }

    .product-roadmap-img, .product-dev-img{
        opacity: 50%;
    }
    .product-roadmap-head, .product-dev-head{
        font-size: var(--font-size-xl);
        position: absolute;
        top: 5rem;
        padding: 3rem;
    
    }
    .product-roadmap-body, .product-dev-body{
        font-size: var(--font-size-m);
        position: absolute;
        top: 10rem;
        padding: 3rem;
    }
    .what-we-do-container{
        padding: 2rem 5rem;
    }
    .what-we-do-head{
        font-size: var(--font-size-l);
    }
    .what-we-do-points-container{
        padding: 2rem 5rem;
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
    }
    .what-we-do-points-container-left, .what-we-do-points-container-right{
        width: 100%;
    }
    .what-we-do-text{
        font-size: var(--font-size-m);
    }
    .modernization-container{
        padding: 2rem 5rem;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }
    .modernization-right{
        width: 100%;
        background-color: #F1F1F1;
        margin-top: 24rem;
        padding: 2rem 0;
        width: 100%;

    }
    .modernization-left{
        width: 100%;
        left: 0;
        text-align: center;
        /* padding: 3rem; */
        padding-top: 6rem;
    }
    .modernization-left-body{
        font-size: var(--font-size-xl);
    }
    .modernization-right-head{
        font-size: var(--font-size-l);
        font-weight: 400;
    }
    .modernization-right-body{
        font-weight: 300;
        padding-top: 1rem;
        
    }
    .plus{
        margin-top: 0;
        padding: 2rem 5rem;
    }
    .plus-head{
        font-size: var(--font-size-xl);
    }
    .plus-body{
        
        display: flex;
        flex-direction: column;
    }
    .included-services{
        width: 100%;
        border-top: none;
        border-bottom:none ;
        border-right: none;
        border-left: 2px solid var(--white);
        padding: 0;
        margin-bottom: 2rem;
        margin-top: 1rem;
    }
    .plus-cloud-head, .plus-digital-head, .plus-modern-head, .plus-rewrite-head{
        font-size: var(--font-size-xl);
    }
    .plus-cloud-body, .plus-digital-body, .plus-modern-body, .plus-rewrite-body{
        font-size: var(--font-size-m);
    }
    .footer-container{
        padding: 2rem 5rem;
    }
    .footer-top-project{
        font-size: var(--font-size-l);
    }
    .footer-top-hello-normal{
        font-size: var(--font-size-xs);
    }
    .footer-top-mail{
        font-size: var(--font-size-s);
    }

}

@media only screen and (max-width: 480px) {
    .header-container{
        padding: 20px 35px;
        
    }
    .company-logo{
        width: 75%;
    }
    .banner{
        padding: 2rem;
        width: 100%;
        height: 50vh;
    }
    .banner-text{
        width: 100%;
        font-size: var(--font-size-m);
        line-height: 2.5rem;
        padding-left: 0rem;
    }
    .banner-text-diff{
        font-size: var(--font-size-s);
        display: block;
        line-height: 2.5rem;
    }

    .navigations-mob{
        display: block;
    }
    .navigations{
        display: none;
    }
    .navigation-list {
        font-size: var(--font-size-xs);
    }
    .hamburger-items .navigation-list:hover  {
        background-color: var(--black);
    }

    .technology{
        padding: 2rem;
    }

    .tech-text, .tech-color{
        font-size: var(--font-size-s);
        line-height: 2.2rem;
    }

    .enterprise{
        padding: 2rem; 
    }
    .enterprise-wrapper{
        line-height: 2.2rem;
        height: auto;
    }

    .enterprise-text{
        font-size: var(--font-size-);
    }
    .link-enterprise{
        font-size: var(--font-size-s);
    }
    .know-us{
        height: auto;
    }
    .know-us-img-wrapper{
        opacity: 0.7;
    }

    .know-us-text-wrapper{
        /* padding: 0; */
        padding: 2rem;
    }

    .know-us-heading{
        font-size: var(--font-size-m);
        color: #B2CF44;
    }
    .know-us-text{
        font-size: var(--font-size-s);
        line-height: 2.2rem;
    }

    .java-container{
        padding: 2rem;
        background: #F1F1F1;
    }

    .java-text{
        font-size: var(--font-size-s);
        line-height: 2.2rem;
    }
    .java-backend-heading{
        font-size: var(--font-size-m);
    }

    .frontend-img-container , .database-img-container{
        flex-wrap: wrap;
        margin-top: 0;
    }
    .frontend-img, .database-img{
        width: 30%;
        margin: 1.5rem;
    }

    .only-text{
        padding: 2rem;
        font-size: var(--font-size-s);
        line-height: 2.2rem;
    }

    .service-heading{
        font-size: var(--font-size-m);
    }
    .service-content{
        padding: 2rem;
    }
    .services-box{
        padding-bottom: 0;
    }

    .heading {
        font-size: var(--font-size-s);
        text-align: center;
    }

    .texting{
        font-size: var(--font-size-s);
    }
    .code-refractor-heading , .Software-Stack-heading{
    margin-top: 3rem;
    }

    .code-refractor-text , .Software-Stack-text{
        font-size: var(--font-size-s) !important;
    }

    .maintenance-container{
        padding: 2rem;
    }

    .maintenance-body , .enterprise-body, .startup-body{
        line-height: 2.2rem;
    }

    .long-img{
        height: 15rem;
    }

    .only-img-text{
        padding:2rem ;
        line-height: 2.2rem;
    }
    .roadmap{
        padding:2rem ;
    }

    .what-we-do-head{
        font-size: var(--font-size-m);
    }

    .what-we-do-container{
        padding: 0;
    }

    .what-we-do-points-container{
         padding: 2rem; 
    }
    .what-we-do-text{
        font-size: var(--font-size-s);
    }
    .enterprise-head, .startup-head, .maintenance-head{
        padding-left: 0;
        font-size: var(--font-size-m);
        padding-top: 0;
        text-align: start;
    }
     .enterprise-heading{
        font-size: var(--font-size-s);
    } 
    .enterprise-headingwrapper{
       width: max-content;
    margin: 0 auto;
    padding: 10px;
    top: 5.5rem;
    }
    .enterprise-wrapper{
        margin-left: 0;
    }

    .long-img{
        object-fit: scale-down;
    }

    .only-img-text{
        font-size: var(--font-size-s);
        padding-top: 0;
    }
    
    .enterprise-main, .startup-main, .maintenance-main{
        margin: 2rem auto ;
    }

    .enterprise-body, .startup-body, .maintenance-body{
        font-size: var(--font-size-s);
        text-align: start;
        padding-left: 0rem;
    }
    .audit{
        padding-left: 2rem ; 
        padding-right: 0;
        left: 0;
        right: 0;
        top: 10px;
    }
    .refractor-img{
        height: 38rem;
    }
    .refractor{
        height: 75vh;
    }

     .code-refractor{
        padding: 0;
    }

    .Software-Stack-heading , .code-refractor-heading{
        font-size: var(--font-size-m);
    }

    .code-refractor-text , .Software-Stack-text{
        font-size: var(--font-size-m);
    }

    .product-roadmap-head, .product-dev-head{
        font-size: var(--font-size-s);
        padding: 0;
    }

    .product-dev-body, .product-roadmap-body{
        font-size: 1.2rem;
        padding: 0;
    }
    .product-roadmap, .product-dev{
        margin: 0;
        top: -2rem;
    }

    .what-we-do-head{
        font-size: var(--font-size-s);
    }

    .product-dev-img, .product-roadmap-img{
        height: 20rem;
    }
    .modernization-container{
        padding: 2rem;
    }
    .modernization-left{
        height: auto;
        min-width: 100%; 
    }
    .modernization-left-head{
        font-size: var(--font-size-l);
    }
    .modernization-list-items{
        font-size: var(--font-size-s);
    }
    .modernization-left-body{
        margin-top: 2rem;

    }
    .modernization-right{
        padding: 0;
        margin-top: 16rem;
    }
    .modernization-right-head{
        font-size: var(--font-size-s);
        padding: 0;
        margin-top: 2rem;
    }
    .modernization-right-body{
        font-size: var(--font-size-s);
        padding: 0;
        margin-top: 2rem;
        line-height: 2.2rem;
    }

    .plus{
        padding: 2rem;
    }
    .plus-head{
        font-size: var(--font-size-m);
        padding-top: 3rem;
    }
    .plus-body{
        padding: 0;
    }
    .plus-cloud-head, .plus-digital-head, .plus-modern-head, .plus-rewrite-head{
        font-size: var(--font-size-s);
    }

    .plus-cloud-body, .plus-digital-body, .plus-modern-body, .plus-rewrite-body{
        font-size: var(--font-size-s);
        line-height: 2.2rem;
    }
    .frontend-img, .database-img {
        width: 15%;
        margin: 1.5rem;
    }

    .backend-img{
        width: 20%;
    } 

    .footer-container{
        padding: 2rem;
    }
    .footer-top-project{
        padding: 0;
        font-size: 1rem;
    }

    .footer-top-hello{
        padding: 0;
    }

    .footer-top-hello-normal{
       
        font-size: 1rem;
    }

    .footer-top-mail{
        padding: 0;
        font-size: 14px;
    }

    .footer-icons{
        padding: 0rem;
        display: flex;
        justify-content: space-between;
        width: 12rem;
        height: 2rem;

    }
    .footer-location{
        margin: 0;
        margin-top: 1rem;
        font-size: 0.5rem;
    }
   
    

}


@media only screen and (min-width: 769px) {
    .services-box{
        border: none;
        width: 32%;
        padding-left: 2rem
    }
    .app-dev, .devops-dev, .ux-dev{
        border-left: 2px solid var(--white);
    }
    .web-dev{
        width: 80%;
        padding-right: 40%;
    }
}

/* Clients page styles */
.clients-banner {
    background: linear-gradient(135deg, var(--black) 0%, #2a2a2a 100%);
    padding: 6rem 8rem;
    text-align: center;
    color: white;
}

.clients-banner-text {
    font-family: var(--font-family-poppins);
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--conifer);
}

.clients-banner-subtitle {
    font-family: var(--font-family-poppins);
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

.clients-container {
    padding: 4rem 8rem;
    background-color: #f8f9fa;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.client-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e9ecef;
}

.client-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.client-icon {
    width: 120px;
    height: 80px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.client-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100px;
    max-height: 60px;
}

.client-title {
    font-family: var(--font-family-poppins);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.client-subtitle {
    font-family: var(--font-family-poppins);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--conifer);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.client-description {
    font-family: var(--font-family-poppins);
    font-size: 0.95rem;
    font-weight: 300;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.clients-cta {
    background: linear-gradient(135deg, var(--conifer) 0%, #4a9c2a 100%);
    padding: 4rem 8rem;
    text-align: center;
    color: white;
}

.cta-content h2 {
    font-family: var(--font-family-poppins);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-content p {
    font-family: var(--font-family-poppins);
    font-size: 1.1rem;
    font-weight: 300;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-button {
    display: inline-block;
    background: white;
    color: var(--conifer);
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-family-poppins);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid white;
}

.cta-button:hover {
    background: transparent;
    color: white;
    border-color: white;
}

/* Navigation highlight for clients page */
.navigation-list.clients {
    color: var(--conifer);
    font-weight: 500;
}

/* Mobile responsive styles for clients page */
@media only screen and (max-width: 768px) {
    .clients-banner {
        padding: 4rem 2rem;
    }
    
    .clients-banner-text {
        font-size: 2.5rem;
    }
    
    .clients-banner-subtitle {
        font-size: 1rem;
    }
    
    .clients-container {
        padding: 2rem 1rem;
    }
    
    .clients-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .client-card {
        padding: 1.5rem;
    }
    
    .clients-cta {
        padding: 3rem 2rem;
    }
    
    .cta-content h2 {
        font-size: 2rem;
    }
}

@media only screen and (max-width: 480px) {
    .clients-banner {
        padding: 3rem 1rem;
    }
    
    .clients-banner-text {
        font-size: 2rem;
    }
    
    .clients-container {
        padding: 1.5rem 0.5rem;
    }
    
    .client-card {
        padding: 1rem;
    }
    
    .client-title {
        font-size: 1.1rem;
    }
    
    .client-description {
        font-size: 0.9rem;
    }
    
    .clients-cta {
        padding: 2rem 1rem;
    }
    
    .cta-content h2 {
        font-size: 1.5rem;
    }
    
    .cta-content p {
        font-size: 1rem;
    }
}