*
    {
    list-style-type: none;
}
.li{
    text-decoration: none;
    text-transform: capitalize;
    font-size: clamp(20px, 2vw, 18px);
    cursor: pointer;
    color: black;
    text-decoration: none; 
    border-bottom: none;
}
.li:hover{
    color: rgb(6, 172, 6);
}
.dropdown-menu{
    width: 280px;
    letter-spacing: 1px;
     font-size: clamp(14px, 1.8vw, 15px);
     border-top: 4px solid rgb(98, 247, 98);
    line-height: 2;
}

.menu{
    color: black;
    text-decoration: none;
    text-transform: capitalize;
     padding-left: 10px;    
}
.menu:hover{
    color: white;
}
.dropdown-menu li:hover{
    background-color: rgb(47, 66, 100);
}

#anchors{
    color: black ;
    text-decoration: none;
}
#col1{
    align-content: end;
}
#col2{
    display: none;
}
@media  only screen and (max-width:800px){
    #col1{
        display: none;
    }
   #col2 {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;       
    }
    #col2 > div {
        flex: 1;                  
        text-align: center;    
    }
    #container{
        padding-top: 50px;
    }
     #container2{
        padding-top: 50px;
    }
    #copyright{
        padding-top: 50px;
    }
    .no{
      font-size: clamp(12px, 2vw, 20px);
    }
    #ved{
    height: 800px;
    }
    #marquee{
        display: none;
    }
    #circle{
        padding-top: 200px;
    }
    #contact{
      margin-top: 50px;
    }
    .color{
        margin-left: 35%;
    }
   
}

#contact{
     font-size: clamp(14px, 2vw, 18px);
    color:black;
    padding:15px;
    text-decoration: none;
    text-transform: capitalize;
    border: none;
    background-image:linear-gradient(135deg, rgb(206, 205, 205) , rgb(98, 247, 98) 100%);
    
}
#button{
    align-content: center;
}
#ved{
    position: relative;
    min-height: 600px;
    padding: 0;
}
#vedio{
    padding-top: 100px;
    position: absolute;
    object-fit: cover;
    height: 100%;
    width: 100%;
    padding-top: 80px;
    z-index: 1;
}
#index{
    position: absolute;
    opacity: 0;
    z-index: 2;
    top: 20%;
    padding-left: 100px;
    transition: opacity 2s ease;
}
#id1{
    font-size: clamp(28px, 5vw, 55px);
    text-transform: capitalize;
}
#id2{
    color:rgb(12, 112, 12);
   font-size: clamp(20px, 3vw, 35px);
    letter-spacing: 2px;
    font-weight: bold;
    text-transform: capitalize;
    border-bottom: 4px solid white;
    padding-bottom: 25px;
}
#id3{
     font-size: clamp(16px, 2vw, 20px);
    letter-spacing: 2px;
    word-spacing: 3px;
    font-weight: normal;
    text-transform: capitalize;
    padding-top:20px;
    padding-bottom: 20px;
}

.sidebtn{
    position: fixed;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
    top: 30%;
}
.side{
    height: 50px;
    width: 100px;
    display: block;
    background-color: rgb(25, 25, 100);
    transform: rotate(deg);
    color: white;
    font-weight: bold;
    padding: 5px;
    font-size: 14px;
    text-transform: capitalize;
    border: none; 
    margin-left: -65px;
    transition: all 1s;
    border: 1px solid white;
}
.side:hover{
    margin-left: 0;
}
#update{
    width:300px;
    border: none;
    color:rgb(25, 25, 100);
    font-size: 25px;
    text-transform: uppercase;
    font-weight: bold;
    background-image:linear-gradient(135deg, rgb(206, 205, 205) , rgb(98, 247, 98) 100%);
padding: 5px;
}
#mq{
    background-color: black;
    color: white;
    font-size: 20px;
}
#call{
    height: 40px;
    width:100px;
font-size: 15px;
color: black;
background-image:linear-gradient(135deg, rgb(206, 205, 205) , rgb(98, 247, 98) 100%);
border: none;
border-radius: 10px;
margin-top: 10px;
}
.text{
    font-size: clamp(20px, 4vw, 100px);
    text-transform: uppercase;
    font-weight: bolder;
    background-image: url(images/galaxy.jpeg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}
#c1{
     font-size: clamp(30px, 5vw, 50px);
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: left;
}
#c2{
    text-transform: capitalize;
     font-size: clamp(18px, 4vw, 25px);
    text-align: left;

}
#c3{
    text-transform: capitalize;
    color: rgb(80, 79, 79);
}
.box1{
    padding: 40px;
    width:100%;
    border-radius: 20px;
    box-shadow: 2px 15px 15px 10px rgb(175, 175, 175);
    transition: all 2s;
}
.box2{
    padding: 40px;
    width:100%;
    border-radius: 20px;
    box-shadow: 2px 10px 10px 5px rgb(175, 175, 175);
    transition: all 0.2s;
}
.box1:hover{
    background-color: rgb(139, 253, 124);
}
.box2:hover{
    background-color: rgb(139, 253, 124);
}
.head{
    font-size: 22px;
    font-weight: bold;
    padding-top: 5px;
}
.para{
    text-transform: capitalize;
    font-size: 15px;
}
#facts{
    min-height: 400px;
    background-image: url(images/facts.png);
    background-size: cover;
    background-attachment: fixed;
    margin-top: 80px;
}
#fhead{
     font-size: clamp(28px, 6vw, 60px);
    color: white;
    font-weight: lighter;
    text-transform: capitalize;
    text-align: center;
}
#fpara{
    color: white;
    text-transform: capitalize;
    text-align: center;
}
.count{
    color: white;
    font-size: clamp(28px, 5vw, 50px);
    font-weight: bold;
}
.cp{
    font-size: clamp(18px, 2vw, 25px);
    color: white;
    text-transform: capitalize;
    font-weight: lighter;
}
.choose1{
    font-size: clamp(28px, 6vw, 70px);
    text-transform: capitalize;
    text-align: center;
    font-weight: lighter;
}
.choose2{
    font-size: clamp(18px, 4vw, 30px);
    font-weight: normal;
    text-transform: capitalize;
    text-align: center;
}
.choose3{
    text-align: center;
    color: rgb(100, 100, 100);
    border-top: 4px solid rgb(219, 138, 72);
}
#card{
    padding: 10px;
    padding-top: 30px;
    padding-bottom: 20px;
    width:fit-content;
   background-color: rgb(137, 233, 240);
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: space-around;
   transition: all 0.5s;
}
#card:hover{
    background-color: white;
    box-shadow: 1px 1px 4px 2px grey;
}
.hd{
    text-transform: capitalize;
    font-weight: bold;
    font-size: clamp(18px, 2.2vw, 25px);
}
.pd{
    text-transform: capitalize;
}
.c1{
    margin-left: 40px;
}
.c2{
   margin-top: 100px;
   margin-left: 50px;
}
#vision{
    padding-left: 40px;
    padding-top: 50px;
    color: white;
    text-transform: capitalize;
}
#tech{
    text-transform: capitalize;
    font-weight: lighter;
    font-size: clamp(30px , 4vw ,  60px);
    text-align: center;
}

#tech2{
    width: 350px;
    display: none;
}
@media  only screen and (max-width:800px){
    #tech1{
        display: none;
    }
    #tech2{
        display: block;
    }
}
#web{
   background-color: white;
   padding: 30px 20px 20px 20px;
   width: 110px;
   margin-left: 10px;
   text-align: center;
}
#web:hover{
    border: 1px solid blue;
}
#exp{
     font-size: clamp(22px, 5vw, 40px);
}
#carousel{
    min-height: 350px;
    width: 100%;
    background-image: linear-gradient(rgb(234, 229, 250)10% , rgb(94, 94, 233));
    padding-bottom: 10px;
}
.p1{
    text-align: center;
    color: white;
    font-size: 25px;
    font-weight: bold;
    text-transform: capitalize;
}
.p2{
    color: white;
    text-align: center;
    text-transform: capitalize;
}
#test{
    min-height: 550px;
    background-image: url(images/testomonal.jpg);
   background-size: cover;
}
.focus{
    text-transform: uppercase;
    font-size:clamp(50px , 5vw , 55px);
    text-align: end;
}
.f2{
    font-size: 20px;
    text-transform: capitalize;
    text-align: end;
}
#row{
    min-height: 200px; 
    background-color: rgb(224, 208, 113); 
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.cs{
    height:150px;
     font-size: clamp(18px, 2vw, 25px);
    font-weight: bold;
    text-transform: capitalize;

    align-content: center;
    
}
.cs1{
     height:150px;
     font-size: clamp(18px, 2vw, 25px);
    font-weight: bold;
    text-transform: capitalize;
    align-content:center;

}
.cs2{
     height:150px;
     font-size: clamp(18px, 2vw, 25px);
    font-weight: bold;
    text-transform: capitalize;
    align-content:center;
}
.work{
    color: rgb(211, 210, 210);
    font-size: clamp(28px, 4vw, 45px);
    text-align: center;
    text-transform: uppercase;
    font-style: italic;
}
.wp{
    color: rgb(170, 169, 169);
    text-align: center;
    font-size:18px;
}
.gold{
    color:rgb(255, 229, 83);
   font-size: clamp(22px, 4.5vw, 40px);
font-style: italic;
text-align: center;
text-transform: capitalize;
font-weight: 600;
}
.foot{
    font-size: clamp(22px, 4vw, 30px);
    color:white;
    text-transform: capitalize;
    padding-left: 25px;
}
.link{
    color:rgb(165, 164, 164);
     font-size: clamp(13px, 1.5vw, 17px);
list-style-type: none;
text-transform: capitalize;
padding-top: 5px;
}
.black{
    height: 350px;
    width: 80%;
    padding: 20px;
    border: 2px solid grey;
}
.grey{
    color: rgb(219, 219, 219);
}
.no{
    font-size: 20px;
    color: white;
    font-weight: bold;
}
/* about page */
#about{
    color: rgb(243, 240, 240);
    font-size: clamp(30px, 4vw, 35px);
    text-transform: capitalize;
    font-weight: bold;
    margin-left: 100px;
    padding-top: 30px;
}
#innovative{
     color:rgb(231, 229, 229) ;
     font-weight: normal;
     text-transform: capitalize;
     margin-left: 100px;
     letter-spacing: 1px;
}
#about2{
    color: rgb(5, 5, 122);
    font-size: clamp(18px, 3vw, 28px);
    font-weight: 500;
    text-transform: capitalize;

}
.parag{
    font-size: 17px;
    line-height: 1.5;
    color:rgb(61, 61, 61);
     text-align: justify;
}
/* services page */
.servicehd{
    font-size: clamp(18px, 2.5vw, 25px);
    font-weight: 900;
    color: black;
    text-transform: capitalize;
    font-family:'Segoe UI', Tahoma, Verdana, sans-serif;
}
.servicep{
    color: rgb(75, 75, 75);
}
.link{
    color: grey;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}
/* how we work */
#container{
    margin-top: 100px;
    min-height: 200px;
    object-fit: cover;
    background-image: url(images/howwork.jpg);
    background-size: cover;
}
#abbox{
    height: 350px;
    width: 100%;
    background-color:white; 
    border-radius: 8px;
}
#abicon{
    color: rgb(5, 124, 5);
    font-size: 60px;
    padding: 20px;
}
.abhd{
    font-size: 25px;
    text-transform: capitalize;
    padding-left: 20px;
}
.abpara{
    text-transform: capitalize;
    color: rgb(117, 117, 117);
  padding-left: 20px;
  padding-right: 20px;
}
/* vision & mission */
#container2{
    margin-top: 100px;
    min-height: 200px;
    object-fit: cover;
    background-image: url(images/vision.png);
    background-size: cover;
}
/* web development */
#container3{
     margin-top: 100px;
    min-height: 300px;
    object-fit: cover;
    background-image: url(images/webdevelopment.png);
    background-size: cover;
}
.web{
    min-height: 150px;
    background-color:rgb(38, 91, 172);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}
#text{
     font-size: clamp(28px, 5vw, 50px);
    color: white;
    font-weight: bold;
    text-transform: capitalize;
}
#offer{
     font-size: clamp(28px, 5vw, 50px);
    color: orange;
    font-weight: bold;
    text-transform: capitalize;
}
#rectangle{
    height: 300px;
    background-color: rgb(253, 230, 197);
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#webdes{
    text-transform: capitalize;
    color: rgb(50, 50, 163);
    font-size: 30px;
}
#sp{
    font-size: 12px;
}
#customweb{
     padding: 10px;
    padding-top: 30px;
    padding-bottom: 20px;
    width:fit-content;
   background-color: rgb(172, 241, 163);
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: space-around;
}
.c1{
   text-transform: capitalize;
   color: blue;
   font-weight: lighter;
    font-size: 25px;
}
.c2{
      font-size: clamp(12px, 1.6vw, 25px);
     text-transform: capitalize;
}
#s1{
    min-height: 250px;
    border-radius: 5px;
    box-shadow: 1px 1px 2px 3px rgb(206, 203, 203);
    padding: 1%;
}
.p{
    text-transform: capitalize;
    text-align: center;
}
#f1{
    font-size:clamp(30px , 5vw , 60px );
    color: white;
    font-weight: lighter;
    text-align: center;
    text-transform: capitalize;
    padding-top: 30px;
    line-height: 1.1;
}
#f2{
    color: white;
    font-weight: lighter;
    text-align: center;
    text-transform: capitalize;
}
/* MLM page*/
#mlmcard{
    height: 450px;
}
#b1{
    height: 50%;
    background-color: rgb(250, 227, 211);
    text-transform: capitalize;
    padding: 20px;
}
/* career page */
#job{
     font-size: clamp(18px, 2.2vw, 25px);
    text-transform: capitalize;
    font-weight: 600;
    color: rgb(48, 47, 47);
}
#career{
    padding: 20px;
    border: 1px solid rgb(223, 221, 221);
    width: 300px;
}
/* blogpage */
.blogh{
    font-size: clamp(20px, 3.5vw, 30px);
    font-weight: bold;
}
.blogp{
    font-size: 18px;
    color: rgb(136, 136, 175);
}
.folder{
    text-decoration: none;
    font-size: 14px;
    color: rgb(46, 45, 45);
    text-transform: capitalize;
}
.soft{
    text-align: center;
     font-size: clamp(15px, 5vw, 35px);
    font-weight: normal;
    text-transform: capitalize;
    color: rgb(19, 19, 68);
    line-height: 1.1;
}
.softp{
    text-align: center;
    font-weight: normal;
    text-transform: capitalize;
    color: rgb(19, 19, 68);
    line-height: 1.1;
}
#card1{
   padding: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    width:fit-content;
   background-color: white;
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: space-around;
   text-align: left;
   box-shadow: 0 4px 8px rgba(0 ,0 ,0 , 0.2);
}
.innate{
   font-size: clamp(24px, 5vw, 40px);
    text-align: center;
    color: rgb(2, 2, 61);
    font-weight: 500;
}
.app{
    color: rgb(104, 103, 103);
    text-transform: capitalize;
    text-align: center;
    font-size: 18px;
}
#div{
    padding: 7%;
    border: 1px solid rgb(231, 229, 229);
}
.mobile{
     font-size: clamp(18px, 2.2vw, 25px);
    text-align: left;
    color: rgb(2, 2, 61);
    line-height: 1.1;
}
.mobile2{
    text-align: left;
    color: rgb(2, 2, 61);
}
#coloumns{
    background-color:rgb(231, 231, 146);
}
#coloumns:hover{
    background-color: rgb(235, 235, 188);
}
.us{
    font-size: clamp(28px, 5vw, 50px);
    color: red;
}
.us2{
    color: rgb(6, 124, 170);
    font-size: clamp(16px, 2vw, 22px);
}
#money{
    font-size: clamp(28px, 5vw, 55px);
    color: white;
}
#orangecard{
    height: 300px;
    padding: 10px;
    border: 1px dashed white;
    text-align: center;
    align-content: center;
    transition: 0.3s;
}
#orangecard:hover{
    background: white;
      border: 1px dashed #ccc;
      transform: translateY(-8px);
      box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
      color: black;
      text-align: center;

}
.tech{
     padding: 5px;
        color: white;
        text-transform: capitalize;
        line-height: 1.1;
}
.color{
    display: none;
}
#orangecard:hover .white {
      display: none;
    }

#orangecard:hover .color{
      /* margin-left: 90px; */
      display: block;
    }

#orangecard:hover .tech {
      color: black;
    }
#orangecard:hover #money {
      color: black;
    }
#app{
   text-align: center;
    font-size: clamp(22px, 4vw, 35px);
   color: rgb(27, 27, 97);
}
.track{
    font-size: clamp(16px, 2vw, 22px);
    color: rgb(92, 92, 110);
    font-weight: bold;
    text-transform: capitalize;
}
.ec{
    font-size: clamp(18px, 2.2vw, 25px);
    text-align: left;
    color: rgb(2, 2, 61);
}
#v{
    visibility: hidden;
}
.seo-box {
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      padding-left: 0;
      box-shadow: 0 4px 10px rgba(0 , 0, 0, 0.1);
      margin-bottom: 20px;
      transition: transform 0.3s ease-in-out;
      display: flex;
      align-items: stretch;   
      min-height: 250px;     
    }
      .seo-box:hover {
    transform: translateY(-5px);
    }
    .seo-title {
      font-size: clamp(22px, 4vw, 40px);
      font-weight: normal;
      color: rgb(6, 6, 73);
      margin-bottom: 10px;
    }
    /* Left gradient line */
  .seo-line{
    width: 60px;
    background-color: #cc0000;
    border-radius: 5px;
  }

    .gradient-green {
      background: linear-gradient(to bottom, #00ff80, #00cc44, #008000);
    }
    .gradient-red {
      background: linear-gradient(to bottom, #ff6666, #ff3333, #cc0000);
    }
    .gradient-orange {
      background: linear-gradient(to bottom, #ffcc66, #ff9933, #ff6600);
    }
    .gradient-blue {
      background: linear-gradient(to bottom, #66ccff, #3399ff, #0066cc);
    }

#smo{
    background-image: url(images/smo-services.png);
    background-attachment: fixed;
}
.smb{
    height: 110px;
    border: 2px solid rgb(9, 9, 97);
    border-radius: 5px;
    display: flex;
}
.smp{
    font-size: 18px;
    text-transform: capitalize;
    padding-top:20px;
    color: blue;
    font-weight: 600;
}
.left{
    color:white;
     font-size: clamp(28px, 6vw, 50px);
    text-align: center;
    font-weight: bold;
    padding-top: 80px;
    line-height: 1.1;
}
.down{
    color: white;
     font-size: clamp(14px, 2.5vw, 22px);
    text-align: center;
}
#micro{
    font-size: clamp(22px, 4vw, 40px);
    font-weight:bold;
    color:rgb(5, 5, 54);
    line-height: 1.1;
}
#microbox{
    height: 250px;
    padding: 5%;
    box-shadow: 0px 6px 20px rgba(0 , 0, 0, 0.25);
    text-align: center;
    border-radius: 15px;
    border-bottom: 1px solid rgb(5 , 124 , 5);
}
#nidhibox{
    width:fit-content;
   background-color: white;
   display: flex;
   align-items: center;
   justify-content: space-around;
   border-left: 5px solid rgb(18, 238, 18);
}
#RE{
    border: 1px solid white;
    height: 200px;
    padding: 2%;
}
#library{
    background-color: rgb(227, 225, 231);
    border-radius: 40px;
    margin-bottom: 20px;
    padding-bottom: 50px;
}
#libbox{
    background-color: white;
    border-radius: 25px;
    padding-top: 30px;
    padding-bottom: 10px;
    text-align: center;
    margin-top: 40px;
}
#setting{
     padding: 10px;
   min-height: 250px;
    width:fit-content;
   background-color: white;
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: space-around;
   box-shadow: 0px 6px 20px rgba(0 , 0, 0, 0.25);
   margin-top: 40px;
}
#setting2{
     padding: 15px;
   min-height: 150px;
    width:fit-content;
   background-color: white;
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: space-around;
   box-shadow: 0px 6px 20px rgba(0 , 0, 0, 0.25);
   margin-top: 40px;
}


.display{
     padding: 1%;
    display: none;
}
.ques{
    padding:10px;
    display: flex;
    justify-content: space-between;
    font-size: 25px;
    background-color: rgb(236, 236, 236);
    margin-top: 15px;
    cursor: pointer;
}
.minus{
    display: none;
}
.contact{
    border-bottom: 2px dotted blue;
}
#bluecircle{
    border: 3px solid rgb(3, 152, 238);
    border-radius: 50%;
    padding: 2%;
    margin-left: 5px;
}
#input{
    height: 40px;
    width: 100%;
    border: none;
    background-color: white;
}
#input:focus{
    border: none;
}