@import url('https://fonts.googleapis.com/css2?family=Fredoka:wdth,wght@87.5,300..700&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "Inter", sans-serif;
}

@media screen and (min-width:570px) and (max-width:690px) {

    .carrer,
    .cases {
        display: none;
    }
}

@media screen  and (min-width:660px) and (max-width:1550px){
    .typing-container {
        font-size: 33px;
        font-weight: bold;
        color: white;
        border-right: 4px solid rgb(215, 62, 15);
        white-space: nowrap;
        overflow: hidden;
        width: 0;
        animation: typing 5s steps(30, end) forwards, blink 0.7s step-end infinite;
        animation: typing 5s steps(30, end) infinite alternate,
            blink 0.7s step-end infinite;
    
    }
    
}

@media screen  and (min-width:0px) and (max-width:660px){

    
    .after{
        display: none;
       
    }
    .gate{
        padding-top: 40px;
    }
   
}
@media screen  and (max-width:400px) 
{
    .log{
        width: 140px;
    }   
}
/* Typing effect */
@keyframes typing {
    0% {
        width: 0;
    }

    50% {
        width: 85%;
    }

    100% {
        width: 0;
    }
}

/* Blinking cursor */
@keyframes blink {
    50% {
        border-color: transparent;
    }
}

.ft {
    margin-top: 90px;
    margin-left: 30px;
    width: 100%;
}

.io {
    margin-top: 60px;
    font-size: 20px;
    text-align: justify;
    padding-left: 20px;
    padding-right: 20px;
    transition: transform 0.5s ease-in-out; 

}

.vt {
    margin-left: 20px;
    margin-top: 30px;
}

.git {
    width: 40px;
    height: 40px;
    background-color: white;
    justify-content: center;
    align-items: center;
    margin: 0;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
}

.gi {
    margin-top: 5px;
    width: 30px;
    height: 30px;
    color: rgb(215, 62, 15);
    transition: transform 0.5s ease-in-out; 

}

.gi:hover {
    color: black;
    transform: rotateY(360deg);

}

.insta {
    width: 40px;
    height: 40px;
    background-color: white;
    justify-content: center;
    align-items: center;
    margin: 0;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
}

.in {
    margin-top: 7px;
    width: 25px;
    height: 25px;
    color: rgb(215, 62, 15);
    
    transition: transform 0.5s ease-in-out; 
}

.in:hover {
    transform: rotateY(360deg);
    color: rgb(235, 105, 127);
}

.face {
    width: 40px;
    height: 40px;
    background-color: white;
    justify-content: center;
    align-items: center;
    margin: 0;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
}

.fa {
    margin-top: 7px;
    width: 27px;
    height: 27px;
    color: rgb(215, 62, 15);
    transition: transform 0.5s ease-in-out; 

}

.fa:hover {
    color: blue;
    transform: rotateY(360deg);
}

.lin {
    width: 40px;
    height: 40px;
    background-color: white;
    justify-content: center;
    align-items: center;
    margin: 0;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
}

.li {
    margin-top: 7px;
    width: 25px;
    height: 25px;
    color: rgb(215, 62, 15);
    transition: transform 0.5s ease-in-out; 
}

.li:hover {
    color: blue;
    transform: rotateY(360deg);

}

.po {
    margin-top: 50px;
    display: flex;
    gap: 20px;
    justify-content: left;
    padding-left: 20px;

}

.gv {

    background-image: linear-gradient(to right, rgb(0, 0, 79), rgb(0, 0, 79), rgb(0, 0, 79));
}

.op {
    position: relative;
    margin: 0;
    padding: 0;
}

.lp {
    position: absolute;
    background-image: linear-gradient(to right, rgb(0, 0, 79), rgba(0, 0, 79, 0.678), rgba(0, 0, 79, 0.432), rgba(0, 0, 79, 0.336));

    top: 0px;
    width: 100%;
    height: 100%;
}

.ii {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (min-width:767px) and (max-width:1400px) {
    .lp {
        height: 580px;

    }

    .op {
        height: 580px;
    }

    .gv {
        height: 580px;
    }

    .po {
        margin-bottom: 20px;
    }
}

@media screen and (min-width:0px) and (max-width:767px) {
    .po {
        margin-bottom: 30px;
    }

    .op {
        height: 350px;
    }
}

.ll {
    box-shadow: 1px 0px 3px gray, 0px -1px 3px gray;
    position: relative;
    cursor: pointer;
}

.kk {
    color: black;
    /* font-weight: 400; */

}

.div {
    width: 70px;
    height: 70px;
    background-color: rgb(23, 181, 162);
    border-radius: 10% 10% 30% 80%;
    position: absolute;
    top: 30px;
    z-index: 1;
}

.div1 {
    background-color: rgb(255, 134, 0);
    width: 70px;
    height: 70px;

    border-radius: 10% 10% 30% 80%;
    position: absolute;
    top: 30px;
    z-index: 1;
}

.div2 {
    width: 70px;
    height: 70px;

    border-radius: 10% 10% 30% 80%;
    position: absolute;
    top: 30px;
    z-index: 1;
    background-color: rgb(141, 213, 232);
}

.div3 {
    background-color: rgb(248, 215, 80);
    width: 70px;
    height: 70px;

    border-radius: 10% 10% 30% 80%;
    position: absolute;
    top: 30px;
    z-index: 1;
}

.div4 {
    background-color: rgb(192, 184, 248);
    width: 70px;
    height: 70px;

    border-radius: 10% 10% 30% 80%;
    position: absolute;
    top: 30px;
    z-index: 1;
}

.div5 {
    background-color: rgb(235, 42, 66);
    width: 70px;
    height: 70px;

    border-radius: 10% 10% 30% 80%;
    position: absolute;
    top: 30px;
    z-index: 1;
}

.im {
    position: absolute;
    top: 33px;
    left: 30px;
    z-index: 2;

}

.im1 {
    position: absolute;
    top: 40px;
    left: 30px;
    z-index: 2;

}

.im2 {
    position: absolute;
    top: 40px;
    left: 30px;
    z-index: 2
}

.im3 {
    position: absolute;
    top: 34px;
    left: 25px;
    z-index: 2
}

.im4 {
    position: absolute;
    top: 34px;
    left: 25px;
    z-index: 2
}

.im5 {
    position: absolute;
    top: 34px;
    left: 25px;
    z-index: 2
}

.parr {
    position: absolute;
    right: 20px;
    top: 40px;
}

.parr1 {
    position: absolute;
    right: 60px;
    top: 40px;
}

.parr2 {
    position: absolute;
    right: 60px;
    top: 40px;
}

.parr3 {
    position: absolute;
    right: 77px;
    top: 40px;
}

.parr4 {
    position: absolute;
    right: 100px;
    top: 40px;
}

.parr5 {
    position: absolute;
    right: 74px;
    top: 40px;
}

.and {
    position: absolute;
    top: 60%;
    left: 28%;
    color: gray;
}

.and1 {
    position: absolute;
    top: 60%;
    left: 1%;
    color: gray;
}

.and2 {
    position: absolute;
    top: 60%;
    left: 1%;
    color: gray;
}

.and3 {
    position: absolute;
    top: 60%;
    left: 25%;
    color: gray;
}

.and4 {
    position: absolute;
    top: 60%;
    left: 23%;
    color: gray;
}

.and5 {
    position: absolute;
    top: 60%;
    left: 6%;
    color: gray;
}

.box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    column-gap: 30px;
    row-gap: 20px;
    padding-bottom: 40px;
}



.c1 {
    transition: background-position 0.8s;
    background-image: linear-gradient(to bottom right, rgb(23, 181, 162), rgb(23, 181, 162), rgb(23, 181, 162)50%, white 50%);
    background-size: 200% 200%;
    background-position: bottom right;
    background-color: white;
    border: none;
}

.c1:hover {
    background-position: top left;
    color: white;
}

.c1:hover div {
    color: white;
}




.c2 {
    transition: background-position 0.8s;
    background-image: linear-gradient(to bottom right, rgb(255, 134, 0), rgb(255, 134, 0), rgb(255, 134, 0)50%, white 50%);
    background-size: 200% 200%;
    background-position: bottom right;
    background-color: white;
    border: none;
}

.c2:hover {
    background-position: top left;
    color: white;
}

.c2:hover div {
    color: white;
}


.c3 {
    transition: background-position 0.8s;
    background-image: linear-gradient(to bottom right, rgb(141, 213, 232), rgb(141, 213, 232), rgb(141, 213, 232)50%, white 50%);
    background-size: 200% 200%;
    background-position: bottom right;
    background-color: white;
    border: none;
}

.c3:hover {
    background-position: top left;
    color: white;
}

.c3:hover div {
    color: white;
}


.c4 {
    transition: background-position 0.8s;
    background-image: linear-gradient(to bottom right, rgb(248, 215, 80), rgb(248, 215, 80), rgb(248, 215, 80)50%, white 50%);
    background-size: 200% 200%;
    background-position: bottom right;
    background-color: white;
    border: none;
}

.c4:hover {
    background-position: top left;
    color: white;
}

.c4:hover div {
    color: white;
}




.c5 {
    transition: background-position 0.8s;
    background-image: linear-gradient(to bottom right, rgb(192, 184, 248), rgb(192, 184, 248), rgb(192, 184, 248)50%, white 50%);
    background-size: 200% 200%;
    background-position: bottom right;
    background-color: white;
    border: none;
}

.c5:hover {
    background-position: top left;
    color: white;
}

.c5:hover div {
    color: white;
}


.c6 {
    transition: background-position 0.8s;
    background-image: linear-gradient(to bottom right, rgb(235, 42, 66), rgb(235, 42, 66), rgb(235, 42, 66)50%, white 50%);
    background-size: 200% 200%;
    background-position: bottom right;
    background-color: white;
    border: none;
}

.c6:hover {
    background-position: top left;
    color: white;
}

.c6:hover div {
    color: white;
}
@media screen and (min-width:770px) and (max-width:990px){
    .vv{
        display: flex;
        justify-content: center;
        align-content: center;
    }

}
@media screen  and (min-width:0px) and (max-width:600px) {
    .i6{
        display: none;
    }
    .vv{
        display: flex;
        
        justify-content: center;
        align-content: center;
    }
    
}
@media screen and (min-width:200px) and (max-width:550px) {
   
    td{
        display: block;

        margin: auto;
        margin-top: -10px;
        margin-bottom: -30px;
        /* row-gap: 0px;
        column-gap: 0px; */
        margin-left: 30px;
    }
}
td{
    cursor: pointer;
}


.vg{
    background-color: rgb(215, 62, 15);
    color: white;
}
.vg:hover{
    background-color: rgb(215, 62, 15);
    color: white;
}
@media screen and (min-width:1000px) and (max-width:1500px) {
    .jv{
        margin-top: 100px;
    }
    .jc{
        margin-top: 120px;
    }
    .cr{
        font-size: 33px;
        font-weight: 400;
    }
    .gr{
        text-align: justify;
        line-height: 35px;
        
    }
}
.cr{
    cursor: pointer;
}
@media screen  and (min-width:500px) and (max-width:1000px){
    .cr{
        font-size: 38px;
    }
}
@media screen  and (min-width:0px) and (max-width:1000px){
    .jc{
        margin-top: 50px;
    }
    .cr,.gr{
        text-align: center;
    }
    .gr{
        line-height: 35px;
    }
    .vg{
        display: block;
        margin: auto;
    }
}

@media screen  and (min-width:500px) and (max-width:1400px)
{

    .br{
        font-weight: bold;
    }
}
@media screen  and (min-width:0px) and (max-width:500px){
    .cr{
        font-size: 30px;
    }
    .jc{
        text-align: justify;
    }
    .gr{
        line-height: 35px;
    }
    .br{
        font-weight: 600;
    }
    
}
.jp{
    margin-top: 140px;
}


.scroll-container {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

/* Scroll animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


.boxes {
    width: 170px;
    height: 150px;
    /*
    background-color: #4CAF50; */
    /* color: white; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 1.5em; */
    margin-right: 80px;
    margin-left: 80px;
    flex-shrink: 0;
    border-radius: 10px;
}
.io{
    filter: grayscale(100%); 
            /* transition: filter 0.3s ease;  */
}


.io:hover {
    filter: grayscale(0%); 
}

.scroll-content {
    display: flex;
    animation: scroll 20s linear infinite;
}


.scroll-content:hover {
    animation-play-state: paused;
    cursor: pointer;
}
.scroll-karkhana {
    display: flex;
    overflow: hidden;
    height: 450px; /* Updated height to 500px */
    width: 100%; /* Make width 100% to allow responsiveness */
    gap: 20px;
    box-sizing: border-box;
    justify-content: space-between; /* Ensure even space distribution */
}

.kolam {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%; /* Make columns fill the container height */
}

.video-container video {
    width: 100%; /* Make the video responsive */
    height: 100%; /* Make the video match the container's height */
    object-fit: cover; /* Ensures the video scales properly */
}


/* Styling for each vertical box */
.vartika {
    width: 280px; /* Updated box width */
    height: 180px; /* Updated box height */
    /* background-color: #4CAF50; */
    /* color: white; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 1.5em; */
    margin-bottom: 10px;
    flex-shrink: 0;
    border-radius: 10px; /* Ensure rounded corners */
    box-sizing: border-box;
    overflow: hidden;
    background-color: rgb(228,233,250);
    color: rgb(56,58,62);
}

/* Scroll animation - Upwards */
@keyframes scroll-uppar {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

/* Scroll animation - Downwards */
@keyframes scroll-niche {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Upwards animation for the first column */
.scroll-samagri-uppar {
    display: flex;
    flex-direction: column;
    animation: scroll-uppar 15s linear infinite;
} 

/* Downwards animation for the second column */
 .scroll-samagri-niche {
    display: flex;
    flex-direction: column;
    animation: scroll-niche 15s linear infinite;
} 

/* Pause animation on hover */
.scroll-samagri-uppar:hover,
.scroll-samagri-niche:hover {
    animation-play-state: paused;
    cursor: pointer;
}

.pt {
    margin-top: 150px;
}

.pw {
    font-size: 27px;
    /* margin-left: 40px; */
    text-align: center;
}

.kpk {
    margin-top: 230px;
    margin-left: 120px;
}

@media screen  and (min-width:0px) and (max-width:1260px) {
 .vgt{
    display: none;
 } 
 .g4{
    width: 100%;
    height: 300px;
    margin-left: 10px;
 }  

}
@media screen  and (min-width:500px) and (max-width:1260px) {
    .pw{
        font-size: 20px;
    }  
}
@media screen  and (min-width:200px) and (max-width:500px) {
    .pw{
        font-size: 15px;
    }  
}
@media screen and (min-width:1260px) and (max-width:1500px) {
    
    .g4{
       
        width: 440px;
        height: 440px;
        margin-left: 50px;
        
    }
    .iv{
        border-radius: 5%;
    }
    .pw{
        font-size: 23px;
    }
} 
 

.e1{
    background-color: rgb(228,233,250);
    color: rgb(56,58,62);
    font-size: 13px;
}
.e2{
    background-color: white;
    font-size: 13px;
    color: rgb(56,58,62);
}
.imi{
    width: 60px;
    height: 60px;
    background-color: white;
    border-radius: 50%;
    display: inline-block;
}
.imi1{
    width: 70px;
    height: 60px;
    background-color: white;
    border-radius: 50%;
    display: inline-block;
}
.imo{
display: block;
margin: auto;
}
.s1{
    position: relative;
    bottom: 36px;
    left: 8px;
    font-size: 15px;
}
.s2{
    position: relative;
    bottom: 35px;
    left: 73px;
}
.s3{
    position: relative;
    left: 73px;
    bottom: 38px;
}
.s4{
    position: relative;
    left: -2px;
    bottom: 39px;
    font-size: 15px;
}
@media  screen and (min-width:0px) and (max-width:560px) {
.por{
    margin-top: 50px;
    font-size: 35px;
}
}
@media  screen and (min-width:0px) and (max-width:990px) {
    .sam{
        text-align: center;
    }
     .vo{
        text-align: center;
    }
    .vp{
        margin-left: 30px;
    } 
    
}
@media  screen and (min-width:990px) and (max-width:1500px) {
    
    .sam{
        text-align: justify;
    }
}


@media screen and (min-width:990px) 
{
    .ring {
        position: relative;
        width: 400px; /* Outer diameter of the ring */
        height: 400px;
        border-radius: 50%;
        border: 10px solid gainsboro; /* Thickness of the ring */
        box-sizing: border-box; /* Include border in dimensions */
        margin: auto;
        margin-top: 30px;
        outline:  5px solid gray;
        outline-offset: 10px;
    } 
}

@media screen  and (max-width:990px){
    .ring {
        position: relative;
        width: 250px; 
        height: 250px;
        border-radius: 50%;
        border: 10px solid gainsboro;
        box-sizing: border-box; 
        margin: auto;
        margin-top: 30px;
        outline-offset: 10px;

        outline:  5px solid gray;
    } 
}

.ball {
    position: absolute;
    width: 50px;
    height: 50px;
   
    border-radius: 50%;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
    animation: move 10s linear infinite; 
}
.ba1{
    background-color: rgb(254,124,94);
}
.ba2{
    background-color: rgb(155,2,131);
}
.ba3{
    background-color: rgb(61,29,153);
}
.ba4{
    background-color: rgb(252,205,109);
}
.ba5{
    background-color: rgb(122,214,255);
}

@keyframes move {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translate(130px) rotate(0deg); /* Start position */
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) translate(130px) rotate(-360deg); /* End position */
    }
}

/* Different animation delays for each ball */
.ball:nth-child(1) { animation-delay: 0s; }
.ball:nth-child(2) { animation-delay: 2s; }
.ball:nth-child(3) { animation-delay: 4s; }
.ball:nth-child(4) { animation-delay: 6s; }
.ball:nth-child(5) { animation-delay: 8s; }
.rel{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    column-gap: 5px;
    row-gap: 5px;
}
.iop{
    background-color: rgb(0, 0, 79);
    padding: 0;
    margin: 0;
}
.cid{
    background-color: white;
    border-radius: 50%;
    filter: grayscale(100%);
}

.cid:hover{
    filter: grayscale(0%);
    cursor: pointer;
}
.type{
    margin-left: 33px;
    margin-top: 25px;
}
.ty{
    margin-left: 15px;
    margin-top: 20px;
}
.pp{
    color: white;
}
.heught{
    line-height: 30px;
}
ul {

    list-style-image: url('Images/li2.png');
  }
li{
    margin-top: 5px;
}

  
  @media screen  and (min-width:1250px){
    .iop{

height: 500px;    }
    
  }
  .gpt{
    color:white;
    
  }
  .ball{
    padding-right: 20px;
  }

/* 
  footer */
  .o0{
    font-size: 35px;
  }
  dt{
    font-size: 20px;
  }
  .lo{
    display: flex;
    margin-top: 20px;
    column-gap: 20px;
    justify-content: center;
    align-content: center;
  }
  
  .upi{
    margin: 0px;
    padding: 0px;
  }
  dd{
    cursor: pointer;
  }
  dt{
    cursor: pointer;
  }
 .lki{
    font-size: 10px;
 }

 @media screen and (min-width:770px) and (max-width:990px) {
    .animation{
       display: block;
       margin: auto;
       width: 80%;
    }
 }
 @media screen and (min-width:200px) and (max-width:770px) {
.animation{
    margin-left: 20px;
}
 }


 /* Line Animation */
 .services {
    position: relative;
  }
  
  .services::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 20%; /* Initial width */
    height: 2px;
    background-color: #d73e0f;
    transition: width 0.3s ease-in-out;
  }
  
  .services:hover::after {
    width: 100%;
  }
  .kk{
    cursor: pointer;
  }
  .vediowali {
    position: relative;
    z-index: 1;
}

.ii {
    position: relative;
    z-index: 0;
}

.div9, .div20 {
    position: absolute;
    height: 100%;
    width: 100px;
    z-index: 10;
}

.div9 {
    top: 0;
    left: 0;
    background-color: white;
}

.div20 {
    top: 0;
    right: 0;
    background-color: white;
}
@media screen and (max-width:770px) 
{
    .iiv{
        display: none;
    }
    
}