body{
    font-family: 'Montserrat', sans-serif;
}



html, body {
  overflow-x: hidden;
}





*{
    transition: 0.3s;
    
}
a{
    cursor: pointer;
}

.nav-bar{
            display: flex;
            justify-content: space-between;
            height: 90px;
            width: 100%;
        }
        #logo{
            height: 70px;
            width: 150px;
        }
        .nav-links{
            margin: auto 0;
        }
        .nav-links a{
            margin: 0 15px;
            color: #6E6E81;
            text-decoration: none;
            font-size: 16px;
            font-weight: 600;
        }
        .nav-links a:hover{
            text-decoration: underline;
            color: #0061C7;
        }
        #hbtn{
            color: #0061C7;
        }
        #hbtn1{
            color: #0061C7;
        }
        #cta1{
            color: aliceblue;
            background-color: #0061C7;
            border: 2px solid #0061C7;
            padding: 15px 20px;
            font-size: 20px;
            border-radius: 40px;
        }
        #cta1:hover{
            text-decoration: underline;
            color: #0061C7;
            background-color: transparent;
            transform: translateY(-5px);
        }
        #cta{
             color: aliceblue;
             background-color: #0061C7;
             border: 2px solid #0061C7;
             padding: 15px 25px;
             font-size: 20px;
             border-radius: 40px;
        }
        #cta:hover{
            text-decoration: underline;
            color: #0061C7;
            background-color: transparent;
            transform: translateY(-5px);
        }
        #menu-btn{
            cursor: pointer;
            display: none;
        }
        #menu{
            cursor: pointer;
            font-size: 30px;
            margin: auto ;
            margin-right: 30px;
            display: none;
        }
.home1{
    display: flex;
  height: auto;
  background-image: url("backimage.png");
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.homecontent1{
    display: block;
    padding: 3% 0;
    padding-top: 3%;

    margin-left: 5%;
    padding-bottom: 8%;
    width: 50%;
    animation: content1 1s ease-in-out forwards;


}
@keyframes content1{
    from{
        opacity: 0;
        transform:translateX(-30%) ;
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
   

}




.p1{
    display: flex;
    font-size: 14px;
  font-weight: 600;
  color: #F7FFFF;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: -25px;
  margin-top: 6%;
}
#line{
    width: 100px;
    height: 0.2px;
    padding: 1px 0;
    margin-top: 4%;
    margin-left: 1%;
    background-color: #FED9B7;
}
#hh1{
    font-family: 'Montserrat', sans-serif;
    color: #F7FFFF;
    line-height: 1.3;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: normal;
    font-size: 50px;
  font-weight: 800;
  margin-bottom: -25px;
}
#p2{
     color: #DBD7E4;
font-size: 16px;
  font-weight: 400;
  line-height: 1.5;    
  padding-bottom: 20px;
  margin-top: 35px;
  width: 90%;
}

#hbtn{
    font-size: 20px;
    background-color: #F7FFFF;
    color: #0061C7 ;
    padding: 16px 20px;
    border-radius: 40px;
    text-decoration: none;
    border: 2px solid #F7FFFF;
}
#hbtn:hover{
    background-color: transparent;
    color: #F7FFFF;
    text-decoration: underline;
}




















 .target{
    display: flex;
    flex-wrap: nowrap;
    background-color: antiquewhite;
    width: 100%;
    justify-content: space-between;
    margin: 3% 0;
    padding-bottom: 3%;
 }
 .adsuccess{
    width: 28%;
    border-radius: 30px;
    text-align: center;
    animation: adanimation 1s ease-in forwards;
    /* margin-left: 5%; */
}

@keyframes adanimation{
    from{
        opacity: 0;
        transform: translateX(-30%);
    }
    to{
        opacity: 1;
        transform: translateX(9%);
    }
}

.designsuccess{
    width: 28%;
    border-radius: 30px;
    text-align: center;
    /* margin-right: 5%; */
    animation: desanimation 1s ease-in forwards;
}
@keyframes desanimation{
    from{
        opacity: 0;
        transform: translateX(30%);
    }
    to{
        opacity: 1;
        transform: translateX(-9%);
    }
}


.websuccess{
    width: 28%;
    border-radius: 30px;
    animation: webanimation 1s ease-in forwards;
    text-align: center;
    
}
@keyframes webanimation{
    from {
        opacity: 0;
        transform: translateY(90%);
    }
    to {
        opacity: 1;
        transform: translateY(-0.5%);
    }
}
#percent{
    color: #0061CB;
    font-size: 55px;
    font-weight: 900;
}
#targeta1{
    font-weight: 600;
    font-size: 25px;
    margin: 3px 0;
}
#targeta2{
    color: #6E6E73;
    text-align: center;
    width: 89%;
    margin: 0 5%;
    margin-top: 5px;
}
#targetw1{
    font-weight: 600;
    font-size: 25px;
    margin: 3px 0;
}
#targetw2{
    color: #6E6E73;
    text-align: center;
    width: 89%;
    margin: 0 5%;
}
#targetd1{
    font-weight: 600;
    font-size: 25px;
    margin: 3px 0;
}
#targetd2{
    color: #6E6E73;
    text-align: center;
    width: 89%;
    margin: 0 5%;
}


























.About1{
    display: flex;
    width: 100%;
    padding: 5% 0%;
}
.imgabout1{
    width: 30%;
    margin: 0 2%;

}
#abpic1{
    width: 97%;
    height: 90%;
    border-radius: 30px;
    animation: abpicanimation 1s ease-in-out forwards;
}
@keyframes abpicanimation{
    from{
        opacity: 0;
        transform: translateX(-30%);
    }
    to{
        opacity: 1;
        transform: translateX(1.5%);
    }
}
.textabout1{
    width: 70%;
    margin: 1%;
    margin-left: 2%;
    animation: tba1 1s ease-in-out forwards;
}
@keyframes tba1{
    from {
        opacity: 0;
        transform: translateX(30%);
    }
    to{
        opacity: 1;
        transform: translateX(-2%);
    }
}
#abp1{
    color: #0061CB;
    font-family: sans-serif;
    font-weight: 600;
}
#abh1{
    font-family: sans-serif;
    font-weight: 800;
}
#abp2{
    font-family: sans-serif;
    font-size: 20px;
    color: #6E6E73;
}
span{
    font-weight: 600;
    color: #6E6E73;
}
.textabout2{
    width: 100%;
    display: flex;
    margin-left: 2%;
}
.ttab2{
    width: 60%;
}
.itab2{
    width: 40%;
}
#abpic{
    width: 98%;
    margin-top: 8%;
}
#tth1{
    color: #6E6E73;
    width: 98%;
}
#ttp1{
    color: #6E6E73;
    width: 98%;
}
#ttp2{
    color: #6E6E73;
    width: 98%;
    margin-bottom: 40px;
}
#abbtn{
    text-decoration: none;
    color: white;
    border-radius: 50px;
    background-color: #0061CB;
    padding: 18px 15px;
    font-weight: 550;
    margin-left: 5%;
    transition: 1s;
    cursor: pointer;
}
#abbtn:hover{
    color: #0061CB;
    background-color: aliceblue;
    text-decoration: underline;
}


























.services1{
    width: 100%;
    padding: 5% 0;
    background-color: #F9F9F9;
}

#sp1{
    color: #0061CB;
    width: 50%;
    text-align: center;
    font-size: 19px;
    margin: 0 25%;
}
#sh1{
    width: 50%;
    text-align: center;
    font-size: 45px;
    margin: 1% 25%;
}



.services2{
    display: flex;
    width: 100%;
    margin: 6% 0;
}
.sercategory1{
    width: 30%;
    border-radius: 30px;
    text-align: center;
    background-color: white;
    margin: 0 2%;
    transition: 5s;
    transition: 800ms;
    padding: 2% 0;
    animation: adanimation 1s ease-in forwards;
}

@keyframes adanimation{
    from{
        opacity: 0;
        transform: translateX(-30%);
    }
    to{
        opacity: 1;
        transform: translateX(9%);
    }
}




#services2p{
    font-weight: 700;
    font-size: 25px;
}

#services3p{
    font-weight: 500;
    font-size: 15px;
}
#learn{
    text-decoration: underline;
    color: #0061CB;
    border-radius: 50px;
    padding: 2%;
    margin-bottom: 10px;
    font-weight: 550;
    margin-left: 5%;
    transition: 1s;
    cursor: pointer;
}
.sercategory1:hover{
    background-image: url(adimg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



.sercategory2{
    width: 30%;
    border-radius: 30px;
    transition: 51s;
    transition: 800ms;
    text-align: center;
    background-color: white;
    margin: 0 2%;
    padding: 2% 0;
    animation: webanimation 1s ease-in forwards;
}
@keyframes webanimation{
    from {
        opacity: 0;
        transform: translateY(90%);
    }
    to {
        opacity: 1;
        transform: translateY(-0.5%);
    }
}
.sercategory2:hover{
    background-image: url(developmentimg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
}

.sercategory3{
    width: 30%;
    border-radius: 30px;
    text-align: center;
    background-color: whitesmoke;
    margin: 0 2%;
    animation: desanimation 1s ease-in forwards;
    transition: 5s;
    transition: 800ms;
    padding: 2% 0;
}
@keyframes desanimation{
    from{
        opacity: 0;
        transform: translateX(30%);
    }
    to{
        opacity: 1;
        transform: translateX(-9%);
    }
}
.sercategory3:hover{
    background-image: url(designimg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#ser-btn{
    text-decoration: underline;
    color: white;
    border-radius: 50px;
    background-color: #0061CB;
    padding: 18px 15px;
    font-weight: 550;
    transition: 1s;
    margin: 10px 0;
    cursor: pointer;
}
#ser-btn:hover{
    color: #0061CB;
    background-color: aliceblue;
    text-decoration: none;
}
.choose{
    display: flex;
    width: 100%;
    background-color: #0061C7;
}
.tchoose{
    width: 50%;
    margin: 4% 2%;
    animation: abpicanimation 1s ease-in-out forwards;
}
.ichoose{
    width: 50%;
    height: fit-content;
    animation: tba1 1s ease-in-out forwards;
}
#iteam{
    width: 98%;
    margin: 2% 1%;
    height: 600px;
}

#pchoose1{
    color: #D4E4F6;
    font-size: 18px;
    font-weight: 500;
}
#pchoose2{
    color: #D4E4F6;
    font-size: 15px;
}
#hchoose1{
    color: white;
    font-size: 45px;
    font-weight: 700;
}
.teamdiv1{
    display: flex;
    width: 100%;
    gap: 2%;
}

.teamdiv2{
    display: flex;
    width: 100%;
    gap: 2%;
}
#team1{
    background-color: #F9F9F9;
    width: 50%;
    padding: 10px 5px;
    border-radius: 20px;
}
#team1h{
    font-size: 18px;
    font-weight: 600;
    color: #0061C7;
    margin: 4% 2%;
}
#team1p{
    font-size: 15px;
    margin: 4% 4%;
    color: #6E9ACC;
}
#team2{
    width: 50%;
    border-radius: 20px;
    color: #F9F9F9;
    padding: 6px 5px;
    margin: 2% 0;
    
}
#team2:hover{
    background-color: #6E6E73;
}
#team2h{
    font-size: 18px;
    font-weight: 600;
    
    margin: 4% 2%;
}
#team2p{
    font-size: 15px;
    margin: 4% 4%;
    
} 











.exskill{
    display: flex;
    width: 100%;
}
.excontent{
    width: 50%;
    margin: 2%;
    animation: abpicanimation 1s ease-in-out forwards;
}
.eximgs{
    display: flex;
    width: 50%;
}
.eximg{
    width: 50%;
    animation: webanimation 1s ease-in forwards;
}
#eximg{
    height: 55%;
    border-radius: 30px;
    margin: 4% 2%;
    width: 92%;
}
.eximg2{
    width: 30%;
    margin-top: 2%;
    animation: tba1 1s ease-in-out forwards;
}
#eximg1{
    height: 22%;
    margin: 3% 1%;
    width: 98%;
    border-radius: 20px;
    
}
#eximg2{
    height: 40%;
    margin: 3% 1%;
    width: 98%;
    border-radius: 20px;
}

#exp1{
    font-size: 18px;
    font-weight: 600;
    color: #0061C7;
}
#exh1{
    font-size: 45px;
    font-weight: 700;
    line-height: 1.1;
}
#exp2{
    color: #6E6E73;
    font-size: 18px;
}
#exlist{
    color: #6E6E73;
    font-size: 20px;
}

.process{
    width: 100%;
    display: flex;
    background-color: #D4E4F6;
    padding: 10px 0;
    padding-bottom: 10px;
}
.imgprocess{
    width: 50%;
}
#imgprocess{
    width: 96%;
    margin: 1% 2%;
    border-radius: 40px;
    animation: abpicanimation 1s ease-in-out forwards;
}
@keyframes abpicanimation{
    from{
        opacity: 0;
        transform: translateX(-30%);
    }
    to{
        opacity: 1;
        transform: translateX(1.5%);
    }
}
.processdetail{
    width: 42%;
    margin: 2% 4%;
    animation: tba1 1s ease-in-out forwards;
}
@keyframes tba1{
    from {
        opacity: 0;
        transform: translateX(30%);
    }
    to{
        opacity: 1;
        transform: translateX(-2%);
    }
}
.mission{
    background-image: url(backimage2.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 5% 0;
    background-position: top center;
    height:auto;
    width: 100%;
}
.mission1{
    display: block;
    padding: 3% 03%;
    animation: content1 1s ease-in-out forwards;
    padding-top: 3%;
    padding-bottom: 30px;
    width: 55%;
}
@keyframes content1{
    from{
        opacity: 0;
        transform:translateX(-30%) ;
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
   

}
.foot-bar{
    display: flex;
    width: 100%;
    background-color: #0061CB;
    padding-top: 2%;
}
.ourservices{
    display: block;
    width: 18%;
    margin: 1% 3%;
}
.link-nav{
    display: block;
    width: 18%;
    margin: 1% 3%;  
}
.link-nav a{
    display: block;
    text-decoration: none;
    cursor: pointer;
    color: #D4E4F6;
    margin: 4%;
    font-size: 20px;
}
.Social{
    display: block;
    width: 18%;
    margin: 1% 3%;
}
.Social a{
    display: block;
    text-decoration: none;
    cursor: pointer;
    color: #D4E4F6;
    margin: 4%;
    font-size: 20px;
}
#ser-a:hover{
    text-decoration: underline;
    color: #FED9B7;
}
#ser-p{
    display: block;
    text-decoration: none;
    color: #D4E4F6;
    margin: 4%;
    font-size: 20px;
}
#ser-a{
    display: block;
    text-decoration: none;
    color: #D4E4F6;
    margin: 4%;
    font-size: 20px;
}
.Contact-info{
    display: block;
    width: 18%;
    margin: 1% 3%;
}
#footh1{
    color: #F7FFFF;
    white-space: nowrap;
}
#con-p1{
    color: #D4E4F6;
    font-size: 20px;

}
#list1{
    margin-bottom: 30px;
}



























.abcontent{
    width: 100%;
    display: flex;
    background-image: url(ab1.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 40vh;
}
.ab1{
    width: 100%;
    text-align: center;
    padding-top: 4%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#ab1{
    width: 99%;
    font-size: 50px;
    font-weight: 900;
}









.About2{
    width: 100%;
    display: flex;
    background-color: aliceblue;
    padding: 10px 0;
}
.tabout2{
    width: 47%;
    margin-left: 2%;
}
.imgabout11{
    width: 50%;

}
#abpic11{
    width: 96%;
    margin: 3% 2%;
    border-radius: 50px;
}
.textabout22{
    display: flex;
    width: 98%;
}
#abpic12{
    height: 60%;
    width: 90%;
    border-radius: 50px;
}
#abp3{
    font-size: 20px;
    font-weight: 700;
    color: #0061C7;

}
#tth1{
    font-size: 25px;
}


































.servicepage{
    width: 100%;
    display: flex;
    background-image: url(service.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 40vh;
}
#serviceh1{
    width: 99%;
    font-size: 50px;
    font-weight: 900;
}
.serviceh1{
     width: 100%;
    text-align: center;
    padding-top: 4%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}















.contactpage{
    width: 100%;
    display: flex;
    background-image: url(process.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 40vh;
    margin-bottom: 20px;
}
#contacth1{
    width: 99%;
    font-size: 50px;
    font-weight: 900;
}
.contacth1{
     width: 100%;
    text-align: center;
    padding-top: 4%;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}












































.contact-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.contact-box {
  background-color: #0061CB;
  color: #fff;
  padding: 20px 30px;
  border-radius: 20px;
  text-align: center;
  min-width: 250px;
  flex: 1 1 250px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.contact-box.email {
  background-color: #c7d7e5;
  color: #333;
}

.contact-box h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  text-decoration: underline;
}

.contact-box p {
  margin: 5px 0;
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-container {
    flex-direction: column;
    align-items: center;
  }
}