@media only screen and (max-width: 767px) {

    .home_main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 44px;
}
.home_banner2 {
    /* height: 300px; */
    width: 362px;
    object-fit: cover;
    margin-top: 30px;
    box-shadow: 10px 10px 20px rgba(122, 122, 122, 0.5);
    border-radius: 10px;
}
.mission {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 66px;
}
.vision_img {
    height: auto;
    width: 100%;
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(122, 122, 122, 0.5);
}
.service_grid {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 20px;
}
.responsiv_img{
    height: auto;
    width: 100%;
}
.body1 {
    background-color: #4690C5;
    color: #fff;
    font-family: "Poppins", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    margin-top: 80px;
    flex-direction: column;
}
/* web design */
.web_responsive{
margin-top: 60px;
}
.web-design-img img {
    
    border-radius: 10px;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    object-fit: fill;
}
.container3 {
    display: flex;
    /* min-height: 100vh; */
    flex-direction: column;
}
/* web devlopment */
.web-development-img img {
    box-shadow: 4px 2px 5px 3px rgba(142, 142, 142, 0.5);
    border-radius: 10px;
    width: 100%;
    height: auto;
    margin-bottom: 54px;
    object-fit: cover;
}
/* cyber security */
.soft-development-img img {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
/* game devlopment */
.game-development-img img {
    /* box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); */
    border-radius: 10px;
    width: 100%;
    height: 550px;
    object-fit: cover;
    margin-top: 20px;
}
/* ui/ux */
.graphic-img img {
    border-radius: 10px;
    width: 100%;
    height: auto;
}
/* contact */
.left-side-details {
    display: flex;
    justify-content: space-evenly;
    line-height: 50px;
    margin-top: 35px;
}
}

@media only screen and (min-width: 768px) and (max-width:992px) {
    .home_main {
    display: flex;
    gap: 20px;
    flex-direction: column;
}
.home_txt2 {
    font-size: 14px;
    font-weight: 400;
    color: #131212b5;
    margin-top: 20px;
    max-width: 100%;
}
.home_main_txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 40px;
}
.mission {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 66px;
}
.vision_img {
    height: auto;
    width: 100%;
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(122, 122, 122, 0.5);
}
.home_banner2 {
    /* height: 300px; */
    width: 100%;
    object-fit: cover;
    margin-top: 30px;
    box-shadow: 10px 10px 20px rgba(122, 122, 122, 0.5);
    border-radius: 10px;
}

/* navbar */
.nav-links.active {
    display: flex;
    width: 94%;
}
.nav-links a.active::after {
    width: 20%;
    opacity: 1;
}
  .nav-links a::after {
    content: '';
    position: absolute;
    width: 0%;
    /* height: 2px; */
    left: 2%;
    transform: translateX(-50%);
    bottom: -4px;
    transition: width 0.3s ease, opacity 0.3s ease;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
    border-width: 1px;
    border-style: solid;
}

.nav-links a:hover::after {
    width: 30%;
    /* Underline starts from the center */
    opacity: 1;
}

.nav-links a:hover {
    /* color: blue; */
    background: -webkit-linear-gradient( #3DCBD6, #4690C5, #92C186);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Active Link Styling */
.nav-links a.active {
    /* color: blue; */
    background: -webkit-linear-gradient( #3DCBD6, #4690C5, #92C186);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* about */
.abt-img img {
    box-shadow: 10px 10px 20px rgb(0 0 0 / 12%);
    border-radius: 10px;
    width: 100%;
    height: auto;
    margin-top: 60px;
}
.abt-content p {
    text-align: justify;
    font-size: 14px;
    font-weight: 400;
    color: #131212b5;
    max-width: 100%;
}
/* services */
.box {
    background: linear-gradient(135deg, #46464b, #212125);
    border-radius: 1rem;
    /* padding: 1rem; */
    text-align: center;
    color: #fff;
    transition: all 1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 278px;
    flex-direction: column;
    overflow: hidden;
}
/* web design */
.web-design-img img {
    /* box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); */
    border-radius: 10px;
    width: 100%;
    height: auto;
    margin-bottom: 120px;
    object-fit: fill;
    margin-top: 30px;
}
/* web devlopment */
.web-development-img img {
    box-shadow: 4px 2px 5px 3px rgba(142, 142, 142, 0.5);
    border-radius: 10px;
    width: 100%;
    height: 460px;
    margin-bottom: 54px;
    object-fit: cover;
}
.app_width{
    width: 100% !important;
    height: auto;
}
.app_center{
    display: flex;
    align-items: center;
}
/* cyber */
.soft-development-img img {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    width: 100%;
    height: 612px;
    /* margin-bottom: 120px; */
    margin-top: 100px;
    object-fit: cover;
}
/* game devlopment */
.game-development-img img {
    /* box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); */
    border-radius: 10px;
    width: 100%;
    height: 500px;
    object-fit: cover;
    margin-top: 20px;
}
/* ui/ux */
.graphic-img img {
    border-radius: 10px;
    width: 100%;
    height: auto;
}
/* contact */
.left-side-details {
    display: flex;
    justify-content: space-evenly;
    line-height: 50px;
    margin-top: 40px;
}
}


@media only screen and (min-width: 993px) and (max-width:1280px) {
.home_banner2 {
    /* height: 300px; */
    width: 462px;
    object-fit: cover;
    margin-top: 30px;
    box-shadow: 10px 10px 20px rgba(122, 122, 122, 0.5);
    border-radius: 10px;
    margin-top: 65px;
}
/* web design */
.web-design-img img {
    /* box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); */
    border-radius: 10px;
    width: 100%;
    height: auto;
    margin-bottom: 120px;
    object-fit: fill;
}
/* web devlopment */
.web-development-img img {
    box-shadow: 4px 2px 5px 3px rgba(142, 142, 142, 0.5);
    border-radius: 10px;
    width: 100%;
    height: 460px;
    margin-bottom: 54px;
    object-fit: cover;
}
 /* cyber */
 .soft-development-img img {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    width: 100%;
    height: auto;
    /* margin-bottom: 120px; */
    margin-top: 82px;
}
/* game devlopment */
.game-development-img img {
    /* box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); */
    border-radius: 10px;
    width: 100%;
    height: 557px;
    object-fit: cover;
    margin-top: 82px;
}
}

@media only screen and (min-width: 1281px) and (max-width:1400px) {}

@media only screen and (min-width: 943px)  {
.nav-links.active {
    display: flex;
    width: 94%;
}
.nav-links a.active::after {
    width: 60% !important;
    opacity: 1;
}
  .nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    /* height: 2px; */
    left: 20%;
    transform: translateX(-50%);
    bottom: -4px;
    transition: width 0.3s ease, opacity 0.3s ease;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
    border-width: 1px;
    border-style: solid;
}

.nav-links a:hover::after {
    width: 60% !important;
    /* Underline starts from the center */
    opacity: 1;
}

.nav-links a:hover {
    /* color: blue; */
    background: -webkit-linear-gradient( #3DCBD6, #4690C5, #92C186);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nav-links a.active {
    /* color: blue; */
    background: -webkit-linear-gradient( #3DCBD6, #4690C5, #92C186);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
}



