/* Media query for mobile screens */
  @media only screen and (max-width: 767px) {
    #main-header {
        margin-left: 50%; /* Center the header horizontally on mobile screens */
        margin-top: 10vh; 
        font-size: 19px;
        margin-right: -10%;
        
    }
}@media only screen and (max-width: 767px) {
  .emoji {
      width: 100%;/* Further reduce size for smaller screens */
      margin-top: 5px; /* Adjust spacing */
  }
}
  @keyframes shine {
    0% {
      background-position: 0;
    }
    60% {
      background-position: 100%;
    }
    100% {
      background-position: 100%;
    }
  }



  #hhh{
    background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
      background-size: cover;
      color: transparent;
      -moz-background-clip: text;
      -webkit-background-clip: text;
      text-transform: uppercase;
  }




 .heading-new{
  font-family: "Calisto MT", serif;
    font-size: 1rem;
  }
  @keyframes flyIn {
  0% {
      transform: translateY(-50px); /* Start off-screen */
      opacity: 0; /* Initially hidden */
  }
  100% {
      transform: translateY(0); /* Fly in */
      opacity: 1; /* Fully visible */
  }
}
#paragraph-middle {
margin-top: 5%;
margin-right: 10%;
margin-left: 20%;
font-family: "Calisto MT", serif;
animation: flyIn 1s forwards; 
letter-spacing: 0;
display: block;
font-size: 45px;
color: rgba(255,255,255,.25);
text-align: left;
text-shadow: 0 0 80px rgba(255,255,255,.5);
font-weight: bold;
background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: hue-rotate(90deg);   
-webkit-text-fill-color: transparent;
-webkit-animation: aitf 80s linear infinite;
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
}

/* Animate Background Image */

@-webkit-keyframes aitf {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}.bellow-paragraph-middle12{
      color: burlywood;
      font-size: 45px;
      margin-top: 15%;
     margin-left: 15%;
     margin-right: 10%;
     opacity: 0; /* Initially hide the paragraph */
    animation: flyIn 1s forwards; /* Apply animation */
  font-family: "Calisto MT", serif;
    }
    #paragraph-middle123{
      /* font-family: "Edwardian Script ITC"; */
          color: burlywood;
          font-size: 45px;
          margin-top: 15%;
         margin-left: 12%;
         background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
         background-size: cover;
         color: transparent;
         -moz-background-clip: text;
         -webkit-background-clip: text;
         text-transform: uppercase;
         font-family: "Auralyess Free Trial";
      }
   
  .paragraph-2middle{
      margin-top: 2%;
  } .container {
    cursor: pointer;
      position: relative;
      width: 200px;
      height: 200px;
     margin-left: 80%;
     margin-top: -12%;
  }.circle-outer {
    size: bold;
    margin-top: 25%;
    width: 5px;
    height: 5px;
  }.circle-inner {
  width: 65px; 
  height: 65px; 
  margin-top: 25%;
  }
  
  @media only screen and (max-width: 768px) {
    
    .leaf12 {
      width: 200px;
      top: -45px;
    } #logo {
      width: 100px;
      height: auto;
      top: 10px; 
      left: 3%;
  } #corner-image {
    width: 17%;
    height: auto;
    position: fixed;
    top: 4%;
    
    right: -5%;
} #paragraph-middle123{
margin-left: 7%;
}
#corner-image-text {
    position: fixed;
    top: 2.9%;
    right: 12%; /* Move text to the right edge of the image */
    transform: translateX(50%); /* Center the text horizontally */
    font-size: 15px;
}
  #contact-illustration { 
width: 15%;
height: 15%;
  max-width: 50%; /* Adjust the width as needed */
  margin-right: 20px; /* Add margin to create space between the image and the heading */
}
  
    #leaf1 {
      width: 200px;
      top: -60px;
      margin-left: 5%;
    }
  
    #top-header {
      flex-direction: column;
      align-items: center;
      margin-top: 10%;
    }
  
    #main-header {
      margin-left: 13%;
      margin-right: 13%;
      text-align: center;
      font-size: 18px;
      margin-top: 15%;
    }
  
    #paragraph {
      margin-left: 2%;
      margin-right: 2%;
    }
  
    #paragraph-middle {
      margin-left: 15%;
      font-size: 25px;
    }
    .know-us {
      margin-left: 5%;
      font-size: 30px;
    }
  
    #para {
      margin-left: 5%;
      font-size: 20px;
    }
  
    .paragraph-2middle {
      margin-top: 18%;
      margin-left: 5%;
      margin-right: 5%;
      font-size: 16px;
    }
  
    .container {
      margin-left: 60%;
      margin-top: -12%;
    }
    
  } 
  .circle-outer {
      position: absolute;
      top: -10%;
      left: -30%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 4px dashed burlywood;
      animation: rotateClockwise 20s linear infinite;
  }
  .circle-inner {
      width: 170px; 
      height: 170px; 
      position: absolute;
      top: -10%;
      left: -30%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 3px dashed burlywood;
      animation: rotateAntiClockwise 20s linear infinite;
  }

  
  @keyframes rotateClockwise {
      from {
          transform: translate(-50%, -50%) rotate(0deg);
      }
      to {
          transform: translate(-50%, -50%) rotate(360deg);
      }
  }

  @keyframes rotateAntiClockwise {
      from {
          transform: translate(-50%, -50%) rotate(0deg);
      }
      to {
          transform: translate(-50%, -50%) rotate(-360deg);
      }
  }



/* contact section media queries starts */
@media (max-width: 900px) {

}.top-footer{
  color: rgb(106, 235, 235);
  font-size: 25px;
  margin-left: 20%;
}.image_container img {
width: 100%;
height: auto;
}.text-lesttalk{
font-family: "Calisto MT", serif;
font-size: 35px;
color:burlywood ;
background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
background-size: cover;
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
text-transform: uppercase;
}
#bellow-part{
margin-left: 15%;
font-family: "Calisto MT", serif;
letter-spacing: 0;
display: block;
font-size: 35px;
color: rgba(255,255,255,.25); text-align: center;
/* margin: -15% 15%; */
text-shadow: 0 0 80px rgba(255,255,255,.5);

/* Clip Background Image */

font-weight: bold;
background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: hue-rotate(90deg); 

/* Animate Background Image */

-webkit-text-fill-color: transparent;
-webkit-animation: aitf 80s linear infinite;

/* Activate hardware acceleration for smoother animations */

-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;

}


/* Animate Background Image */

@-webkit-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}.Affordable{
margin-top: 20%;
margin-right: 12%;
}
#text-bellow-part{
font-family: "Calisto MT", serif;
font-size: 35px;
color: aqua;
margin-right: 15%;
margin-left: 20%;
}#text-bellow-part-first{
margin-top: 20%;
font-family: "Calisto MT", serif;
font-size: 35px;
color: aqua;
margin-right: 15%;
margin-left: 20%;
}
#bellow-part-footer{
font-family: "Calisto MT", serif;
font-size: 35px;
color: aqua;
margin-right: 1%;
margin-left: 14%;
margin-top: 2%;
}.trust{
font-family: "Calisto MT", serif;
font-size: 35px;
color: aqua;
/* margin-right: 1%; */
margin-left: 20%;
margin-top: 2%;
}
.typing-text-line2{
margin-top: -80%;
}
/* #main-header{
margin-bottom: 5%;
} */
.iknow-button {
font-family: "Calisto MT", serif;
  border: 2px solid transparent; /* Transparent border */
  padding: 10px 20px; /* Adjust padding as needed */
  background-color: transparent; /* Transparent background */
  color: white; /* Text color */
  font-size: 26px; /* Font size */
  font-weight: bold; /* Font weight */
  position: relative; /* Position relative for the line */
  overflow: hidden;
  border-left: 2px solid yellow;
  border-right: 2px solid yellow; 
  cursor: pointer;/* Hide overflowing line */
  margin-left: 35%;
  margin-top: 5%;
}

/* Style for the continuous line */
.iknow-button::before {
  content: ''; /* Empty content */
  position: absolute; /* Position absolute */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 2px solid yellow; /* Yellow border */
  border-bottom: 2px solid yellow;
  /* Yellow border */
  pointer-events: none; /* Ensure the line doesn't interfere with button clicks */
  z-index: -1; /* Move the line behind the button */
  animation: lineAnimation 3s linear infinite; /* Animation for continuous running */
}.text-iknow-button {
border: 2px solid transparent; /* Transparent border */
padding: 10px 20px; /* Adjust padding as needed */
background-color: navy; /* Transparent background */
color: aqua; /* Text color */
font-size: 26px; /* Font size */
font-weight: bold; /* Font weight */
position: relative; /* Position relative for the line */
overflow: hidden;
border-left: 2px solid yellow;
border-right: 2px solid yellow; 
cursor: pointer;/* Hide overflowing line */
margin-left: 2%;
margin-top: 5%;
}

/* Style for the continuous line */
.text-iknow-button::before {
content: ''; /* Empty content */
position: absolute; /* Position absolute */
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 2px solid yellow; /* Yellow border */
border-bottom: 2px solid yellow;
/* Yellow border */
pointer-events: none; /* Ensure the line doesn't interfere with button clicks */
z-index: -1; /* Move the line behind the button */
animation: lineAnimation 5s linear infinite; /* Animation for continuous running */
}


/* Animation for the continuous line */
@keyframes lineAnimation {
  0% {
      transform: scaleX(0);
      transform-origin: left;
  }
  50% {
      transform: scaleX(1);
      transform-origin: left;
  }
  50.1% {
      transform: scaleX(1);
      transform-origin: right;
  }
  100% {
      transform: scaleX(0);
      transform-origin: right;
  }
}#projectadded{
gap: 10px;
display: flex;
justify-content: space-around;
}
.containerer {
margin-top: -5%;
display: flex;
/*   border:1px solid red; */
height: 100%;
align-items: center;
}

svg {
  display: block;
  font: 6em 'LATEST PROJECTS';
  /* width: 1260px;
  height: 300px; */
  /* margin: 0 auto; */
  margin-top: -10%;
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: 6% 29%;
  stroke-width: 1px;
  stroke-dashoffset: 0%;
  animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
stroke: white;
animation-delay: -1;
}

.text-copy:nth-child(2){
stroke: white;
animation-delay: -2s;
}

.text-copy:nth-child(3){
stroke: white;
animation-delay: -3s;
}

.text-copy:nth-child(4){
stroke: white;
animation-delay: -4s;
}

.text-copy:nth-child(5){
stroke: white;
animation-delay: -5s;
}

@keyframes stroke-offset{
100% {stroke-dashoffset: -35%;}
}#lets-talk {
display: flex;
margin-top: 8%;
/* align-items: center; Center items vertically */
}.tickmark-container {
display: flex; /* Use flexbox */
align-items: center; /* Align items vertically */
}

.tickmark {
width: 20px; /* Adjust width of the tick mark image */
height: auto;
margin-left: 22%;
margin-top: -1%;
/* margin-right: 10px; Adjust spacing between the tick mark and text */
}


#contact-illustration {
width: 35%;
max-width: 50%; /* Adjust the width as needed */
margin-right: 20px; /* Add margin to create space between the image and the heading */
}#articel-section{
  display: flex;
  gap: 10%;
  cursor: pointer;
  justify-content: space-between;
  margin-left: 5%;
  margin-right: 18%;
  opacity: 0; /* Initially hide the paragraph */
  animation: flyIn 1s forwards; /* Apply animation */
}.card-body {
background-color: none; /* Transparent background color */
color: white; /* Text color */
}#arcticel-image{
cursor: pointer;
margin-left: 10%;
width: 350px;
}.secondimage{
width: 90%;
}.card-body {
background-color: none; /* Transparent background color */
color: white; /* Text color */
}#project-image{
width: 80%;
}
.card {
width: calc(33.33% - 20px); /* Adjust as needed */
margin-bottom: 20px;
}

@media only screen and (max-width: 768px) {
.card {
  width: calc(50% - 20px); /* Adjust as needed */
}
}

@media only screen and (max-width: 480px) and (max-width: 767px) {
.card {
  width: calc(100% - 20px); /* Adjust as needed */
}#bellow-part-footer{
font-size: 35px;
margin-right: 5%;
margin-left: 10%;
margin-top: 2%;
}.iknow-button {
padding: 5px 5px; /* Adjust padding as needed */
margin-left: 30%;
margin-right: 20%;
margin-top: 5%;
}.tickmark {
margin-left: 10%;
margin-top: -1%;
}

}@media only screen and (max-width: 768px) {
#bellow-part {
  margin-left: 22%; /* Adjust as needed */
  font-size: 25px; /* Adjust as needed */
}
}@media only screen and (max-width: 768px) {
.word-cloud {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Adjust as needed */
  font-size: 18px; /* Adjust as needed */
}
}

@media only screen and (max-width: 480px) and (max-width: 767px) {
.word-cloud {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Adjust as needed */
  font-size: 16px; /* Adjust as needed */
  padding: 10px;
  right: 5%;
}
}@media only screen and (max-width: 768px) {
.text-lesttalk {
  font-size: 25px; /* Adjust font size for smaller screens */
}
}

@media only screen and (max-width: 480px) and (max-width: 767px) {
.text-lesttalk {
  font-size: 20px; /* Further reduce font size for smaller screens */
}#leaf {
  width: 200px;
  
}.circle-outer {
margin-top: 85%;
width: 170px;
height: 170px;
margin-right: 15%;
margin-left: 3%;
}.circle-inner {
width: 150px; 
height: 150px; 
margin-top: 85%;
margin-right: 15%;
margin-left: 3%;
} .container {

margin-left: 50%;
margin-top: -12%;
} #main-header {
/* /* margin-top: 15%; */
 /* margin-left: 35%;  */
}.text-iknow-button{
margin-right: 10%;
margin-left: 20%;
}.iknow-button {
height: auto;
width: 80%;
margin-left: 8%;
margin-right: 8%;
margin-top: 5%;
} .text-inside {
  position: absolute;
  text-align: center;
  margin-top: 57%;
  margin-left: 25%;
  /* margin-right: 30%; */
  font-size: 25px;

}#bellow-part-footer{
font-size: 25px;

margin-right: 2%;
margin-left: 8%;
margin-top: 2%;
}


}


.text-inside {
position: absolute;
text-align: center;
top: 20%;
/* left: 1%; */
margin-left: -35%;
margin-right: 40%;
transform: translate(-50%, -50%);
font-size: 12px;
color: white;
font-weight: bold;
font-size: 25px;
}.text-inside {
margin-left: 10%; 
right: 44%;
top: 15%;
grid-area: -40%;
}.services {
font-family: "Auralyess Free Trial";
font-size: 55px;
margin-top: 20%;
margin-left: 20%;
background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
background-size: cover;
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
text-transform: uppercase;
}.project-container { 
margin-top: -5%;
margin-left: 10%;
margin-right: 10%;
 display: flex;
}

#side-text-project {
 
 font-size: 15px;
 transform: rotate(-90deg);
 transform-origin: right top;
 color: burlywood;
 margin-right: -25%;
 margin-left: -18%;
 margin-top: 3%;
}

.project-image{
 width: 250px;
 margin-left: 51%;
}.projectdesc{
font-family: "Calisto MT", serif;
 color: aliceblue;
 margin-left: 51%;
 margin-top: 2%;
 margin-right: 10%;
 /* margin-right: 5%; */
}@media screen and (min-width: 1200px) {
#side-text-project {
  font-size: 15px; /* Revert to fixed font size for larger screens */
  margin-right: -25%;
  margin-left: -18%;
  margin-top: 8%;
}

.project-image {
  width: 250px; /* Revert to fixed image width for larger screens */
  margin-right: 10%;
}
}
.leaf{
left: -5%;
opacity: 0;
}.videocontainerr {
/* display: flex; */
position: relative;
display: inline-block;
margin-top: 15%;
cursor: pointer;
/* z-index: 2; */
}

#image {
width: 45%;
height: 45%;
position: relative;
z-index: 2;
margin-left: 20%;
margin-top: -55%;
}

.watermark {
align-items: center;
position: absolute;
/* bottom: 10px; */
margin-top: -5%; 
 margin-left: 63%; 
transform: translateX(-50%);
background-color: rgba(14, 9, 157, 0.8);
padding: 9px 200px;
border-radius: 5px;
z-index: 1;
}#name{
font-family: "Calisto MT", serif;
margin-left: -35%;
 margin-right: -150%;
/* margin-left: 40%; */ 
color: aqua;
font-size: 22px;
}#sec{
font-family: "Calisto MT", serif;
margin-right: -72%;
font-size: 20px;
margin-left: -90%;
align-items: center;
margin-top: 25%;
color: white;
}#star{
display: flex;
margin-left: 20%;
}.starpng{
width: 20%;
}#articel-section {
position: relative;
}

.number {
position: absolute;
top: 3%;
/* left: -59px; Adjusted left value */
color: burlywood;
font-size: 50px;
margin-left: 1%;
transition: transform 0.3s; /* Added transition for smooth scaling */
}

#arcticel-image:hover {
opacity: 1; 
cursor: pointer;
font-weight: bold; 
transform: scale(1.1); 
color: #fff;
}

#arcticel-image:hover + .number {
transform: scale(1.1); /* Apply the same scaling */
}
/* #arcticel-imagees:hover{
opacity: 1; 
cursor: pointer;
font-weight: bold; 
transform: scale(1.1); 
color: #fff;
} */
#whatsapp{
cursor: pointer;
z-index: 2;
}.mataingap{
margin-top: -2%;
margin-left: 20%;
margin-right: -20%;
color: aqua;
}.image-box{
align-items: center;
width: 490px;
height: 610px;
background-color: white;
border: 1px solid aqua;
}#gif-image{
margin-top: 1%;
height: 60%;
margin-left: 10%;
}#fakeimage-h3{
color: blue;
font-family: "Calisto MT", serif;
margin-top: 5%;
margin-left: 8%;
}#fakeimage-p{
font-family: "Calisto MT", serif;
margin-left: 15%;
text-align: center;
margin-right: 11%;
}.second-articel{
margin-left: 25%;
}.card-text{

font-family: "Calisto MT", serif;
margin-left: 10%;
margin-right: 8%;
}.last-articel-section{
margin-left: 30%;
margin-right: -10%;
}.ourwork{
margin-top: 20%;
}#logoproject{
margin-top: -2%;
width: 8%;
height: 8%;
}#logoforbellow{
display: flex;
margin-left: 35%;
/* margin-top: -5%; */
}#logoforbellow1{
display: flex;
margin-left: 25%;
/* margin-top: -5%; */
}.project-dec{
font-family: "Calisto MT", serif;
margin-top: -2%;
background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    /* text-transform: uppercase; */
}#by{
font-family: "Calisto MT", serif;
margin-left: 50%;
margin-top: -5%;
font-size: 20px;
background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    /* text-transform: uppercase; */
}#whatsappLink {
text-decoration: none;

color: white; 
/* Remove underline from the anchor tag */
}

#whatsappContainer {
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
display: inline-block; 
background-color: #22c15e;

width: 200px;
border-radius: 10px;/* Make the container inline-block to keep the image and text on the same line */
}

#whatsapp {
vertical-align: middle; /* Align the image vertically to the middle of the line */
}#ph{
text-transform: unset;
font-family: 'Courier New', Courier, monospace;
}.secondimage{
width: 450px;
height: 220px;
}.thirdimage{
height: 220px;
}#rightarrow{
width: 15%;
/* margin-left: 1%; */
margin-top: 7%;
/* top: -20%; */
}#leftarrow{
width: 15%;
margin-left:85%;
margin-top: -50%;

}.starbutton{
margin-top: 17%;
}.knowour{
margin-top: 10%;
}

.scroller-container {
width: 80%;
margin-left: 10%;
overflow: hidden;
position: relative;
margin-bottom: 20px; /* Add margin between sections */
}
.scroller-inner {
margin-top: 2%;
white-space: nowrap;
display: flex;
gap: 5%;
animation: none; /* Disable CSS animation */
}
.scroller-inner img {
flex-shrink: 0;
width: 100px; /* Adjust image width */
height: auto; /* Let images maintain their aspect ratio */
cursor: pointer; /* Change cursor to pointer on hover */
}

/* Media queries for responsive layout */
@media (max-width: 768px) {
.scroller-inner img {
    width: 80px; /* Adjust image width for smaller screens */
}
}
@media (max-width: 480px) {
.scroller-inner img {
    width: 60px; /* Further adjust image width for mobile screens */
}
}

.containemmmmmr {
display: flex;
align-items: center;
}

.left {
flex: 1;
}

.right {
flex: 1;
position: relative;
}

.emojis {
width: 100%;
position: absolute;
bottom: 0;
left: 10%;
top: 60%;
transform: translateX(-50%);
}
@keyframes fly {
0% {
  transform: translateY(400%);
  opacity: 0;
}
100% {
  transform: translateY(-100%);
  opacity: 1;
}
}

.heart {
background-image: url('./picture/comment.png');
}
.smile {
background-image: url('./picture');
}
.like {
margin-left: 32%;
background-image: url('./picture/like.png');
}

.comment {
margin-left: 52%;
background-image: url('./picture/hear.png');
}.right{
display: flex;
}
@media (max-width: 480px) {
.word-cloud {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Adjust as needed */
  padding: 10px; /* Adjust padding for smaller screens */
  max-width: 480px; /* Set max-width to match screen width */
  margin: 0 auto; /* Center the word cloud */
}#main-header {
  /* margin-left: 70%;
  font-size: 14px;
  text-align: center; */
  /* margin-right: 10%; */
} .mataingap{
margin-top: 12%;
margin-left: 5%;
margin-right: 5%;
}.rotatingText{
/* display: none; */
}
}@media only screen and (max-width: 768px){
.project-container {
  flex-direction: column;
  margin-left: 5%;
  margin-right: 5%;
}#second-line-text{
  /* margin-left: 1%; */
}
#side-text-project {
  margin: 0 auto;
  text-align: center;
  transform: none;
  margin-top: 5%;
  margin-bottom: 3%;
  margin-right: 0;
  margin-left: 0;
}

.project-image {
  width: 100%;
  margin-left: 0;
}

.projectdesc {
  margin-left: 0;
  margin-top: 3%;
  text-align: center;
}
}@media only screen and (max-width: 480px) and (max-width: 767px) {
#articel-section {
  flex-direction: column;
  align-items: center;
  margin-left: 5%;
  margin-right: 5%;
}.line-container-animation{
  display: none;
}


.card-body {
  text-align: center; /* Center text */
}.card-text{
  margin-top: 5%;
  margin-bottom: 15%;
}

#arcticel-image {
  margin-left: 0;
  margin-top: 5%;
  width: 100%; /* Make images occupy full width */
}

.secondimage {
  width: 100%; /* Make second image occupy full width */
}#lets-us-tell{
  margin-left: 8%;
}

.number {
  display: none;
}#text-bellow-part{
  margin-left: 10%;
  margin-top: 10%;
  font-size: 18px;
  margin-right: 5%;
}#text-bellow-part-first{
  margin-left: 10%;
  margin-top: 25%;
  font-size: 18px;
  margin-right: 5%;
}#whatsappContainer {
  width: 200px;
  margin-left: -35%;
}
}@media only screen and (max-width: 480px) and (max-width: 767px) {
.videocontainerr {
  /* display: flex; */
  position: relative;
  display: inline-block;
  margin-top: 30%;
  cursor: pointer;
}

#image {
  width: 65%;
  height: 65%;
  position: relative;
  z-index: 1;
 margin-left: 20%;
 margin-top: -35%;
}

.watermark {
  position: absolute;
  margin-top: 55%; 
  background-color: transparent;
   margin-left: 40%; 
  padding: 2px 140px;
  border-radius: 5px;
  z-index: 1;
}#name{
  margin-left: -40%;
  
  font-size: 15px;
  margin-top: -10%;
}#sec{
  display: none;
  /* margin-right: -202%;
  font-size: 15px;
  margin-left: -100%;
  margin-top: 30%; */
}#star{
  /* margin-top: 20%; */
  margin-left: 30%;
  display: none;
}.starpng{
  /* margin-top: 20%; */
  width: 30%;
}#rightarrow{
 display: none;
  /* margin-left: 1%; */
  /* margin-top: 35%; */
  /* top: -20%; */
}#leftarrow{
  display: none;

}.starbutton{
  margin-top: 28%;
}body {
  overflow-x: hidden;
}.right{
  display: none;
}
} @media only screen and (min-width: 1024px) {
/* Apply ScrollReveal for laptop screen sizes */
.scroll-reveal {
  visibility: hidden;
}
}#hrline{
color: #f5d669;
width: 5px;
height: 500px;
/* left: 210rem; */
}.hrline-about{
margin-left: 30%;
} #emojicocontainer {
position: relative;
/* height: 100%; */
/* margin-bottom: 500px; */
z-index: 2;

}

.emoji {
position: absolute;
font-size: 50px;
margin-top: 20px;
animation: emojiUp linear infinite;
}

@keyframes emojiUp {
0% {
    transform: translateY(10%);
}
100% {
  transform: translateY(-1000%);
}
}



















.rotatingText-content { 
position: relative;
width: 100%;
} .rotatingText { 
align-items: center;
margin-left: 50%;
margin-right: -150%;
display: flex;
height: 100vh;
text-align: center;
margin-top: -50%;
}

.rotatingText-description { 
color: white;
font-family: 'Georgia', serif;
font-style: italic;
font-size: 14px;
margin-right: -150%;
margin: 0;
@media (min-width: 768px) { 
font-size: 18px;
}
}.about-us-for-about{
margin-left: -5%;
}.about-us-for-contact{
margin-left: -15%;
}.home-for-about{
  margin-left: 8%;
}

.rotatingText-adjective { 
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 40px;
left: 0;
margin-bottom: 0;
margin-top: 30px;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
text-transform: uppercase;
top: 0;
}
@media (max-width: 768px) {
.rotatingText {
margin-left: -5%;
margin-top: 140%;
display: grid;
grid-template-columns: repeat(1, 1fr);

}
.hrline-about{
display: none;
}
}
.talk-paert{
font-family: "Calisto MT", serif;
color: white;
margin-left: 25%;
/* width: 20px; */
font-size: 35px;

}#last-top-footer{
text-align: center;
margin-top: 4%;
margin-left: -3%;
display:flex;
}#about-email{
    width: 20%;
    margin-left: 115%;
  }#about-gif{
    width: 100%;
    height: auto;
    margin-left: 10%;
    margin-top: -20%;
  }.gifgg{
    display: none;
  }
  #about-whatsapp{
    width: 37%;
    margin-top: 2%;
    margin-left: 250%;
  }.contact-about-section-whatsapp{
    margin-left: 190%;
    color: white;
    font-weight: bold;
    text-align: center;
   font-size: 15px;
   margin-right: -250%;
  }.contact-about-section{
    margin-left: 80%;
    color: white;
    font-weight: bold;
    text-align: center;
   font-size: 15px;
   margin-right: -50%;
  }
  .container-about {
cursor: pointer;
position: relative;
width: 100px;
height: 100px;
margin-right: 5%;
margin-left: 30%;
margin-top: 1%;
}.talk-paert{
margin-left: 10%;
}

.circle-outer-about {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px dashed burlywood;
animation: rotateClockwise 20s linear infinite;
}

.circle-inner-about {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 170px;
height: 170px;
border-radius: 50%;
border: 3px dashed burlywood;
animation: rotateAntiClockwise 20s linear infinite;
}



.text-inside-about {
font-family: "Calisto MT", serif;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
color: white;
font-weight: bold;
}.text-inside-about:hover{
color: aqua;
}

@keyframes rotateClockwise {
from {
  transform: translate(-50%, -50%) rotate(0deg);
}
to {
  transform: translate(-50%, -50%) rotate(360deg);
}
}

@keyframes rotateAntiClockwise {
from {
  transform: translate(-50%, -50%) rotate(0deg);
}
to {
  transform: translate(-50%, -50%) rotate(-360deg);
}
}

@keyframes rotateLines {
from {
  transform: translate(-50%, -50%) rotate(0deg);
}
to {
  transform: translate(-50%, -50%) rotate(360deg);
}
}.know-us{
margin-top: 15%;
}#bellow-part{
margin-top: 2%;
}#home-services-para{
margin-top: 5%;
font-size: 35px;
color: aqua;
margin-left: 15%;
font-family: "Calisto MT", serif;
}#w{
margin-top: 5%;
width: 8%;
margin-left: 14%;
}#main-Established{
font-family: "Calisto MT", serif;
display: flex;
margin-top: 1%;
/* gap: 20%; */

}#Establisheded{
margin-left: 20%;
margin-right: 50%;
color: white;
font-size: 18px;
}#Established-img{
width: 42%;
height: auto;
margin-left: -40%;
}#Establisheded-bellow{
font-family: "Calisto MT", serif;
margin-left: 20%;
margin-right: 20%;
color: white;
font-size: 18px;
margin-top: 2%;
}
.line-container-animation {
display: none;
margin-bottom: -45%;
margin-left: 79%;
    margin-top: 20%;
    position: relative;
    width: 100%;
    height: 500px; /* Adjust the height to match your image */
    overflow: hidden; /* Hides any overflow content beyond the container */
  }

  /* Styling for the image */
  #line-image-animation {
    margin-top: 6%;
    position: absolute; /* Positioned absolutely within its container */
    top: 20%;
    left: 0;
    width: 18%;
    transform: rotate(20deg);
    height: auto;
    animation: drawLine 2s linear infinite; /* Animation for drawing the line */
    animation-direction: alternate;
  }#w-para-img{
    margin-top: 5%;
  }
  @media only screen and (max-width: 767px)  {
    #home-services-para{
    margin-top: 10%;
    font-size: 30px;
    margin-left: 10%;
  }#w-para-img{
    margin-left: -10%;
    margin-top: 15%;
  }
  .line-container-animation{
      display: none;
    }/* CSS for mobile screens */
#last-top-footer {
  margin-left: 5%; 
  display: flex;
  /* flex-direction: column;  */
  align-items: center; 
  margin-top: -40%;
}
#about-email {
  width: 30%; 
  margin-left: 35%; 
  margin-bottom: 10px; 
}

#about-whatsapp {
  width: 60%; 
  margin-left: 120%; 
  margin-bottom: 10px; 
  margin-right: -130%;
}
.contact-about-section {
  margin-left: 0; /* Remove left margin */
  margin-right: 0; /* Remove right margin */
  text-align: center; /* Center text horizontally */
  font-size: 16px; /* Adjust font size for readability */
}.contact-about-section-whatsapp{
  margin-left: 8%; /* Remove left margin */
  margin-right: -100%; /* Remove right margin */
  text-align: center; /* Center text horizontally */
  font-size: 16px; /* Adjust font size for readability */
}.gifgg{
  display: block;
  width: 100%;
  height: auto;
  /* margin-top: -8%; */
  /* margin-bottom: -20%; */
 /* margin-right: 50%; */
}



.container-about {
  right: 50%;
  /* margin-right: 150%; Remove left margin */
  margin-top: 120%; /* Adjust top margin for spacing */
  margin-bottom: 10%;
}.circle-outer-about {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 4px dashed burlywood;
  animation: rotateClockwise 20s linear infinite;
}

.circle-inner-about {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px dashed burlywood;
  animation: rotateAntiClockwise 20s linear infinite;
}



.text-inside-about {
  text-align: center;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: white;
  font-weight: bold;
}

  }#right-left-para {
    margin-left: 35%;
    margin-right: 10%;
    color: white;
    font-size: 40px;
    font-weight: bolder;
  font-family: "Calisto MT", serif;
  }

  .second-left-right-para {
    margin-left: 5rem;
  }

  /* Initial state of paragraphs */
  #right-left-para {
    margin-top: 5%;
    margin-left: 20%;
    color: white;
    font-size: 25px;
    font-weight: bolder;
  font-family: "Calisto MT", serif;
  }
  
  .second-left-right-para {
    margin-left: 5rem;
  }
  
  #right-left-para p {
    opacity: 0; 
    transform: translateX(-100%); 
  }#new-right-left-para p{
    opacity: 0; 
    transform: translateX(-100%); 
  }#second-right-left-para p{
    opacity: 0; 
    transform: translateX(-100%); 
  }#third-right-left-para p{
    opacity: 0; 
    transform: translateX(-100%); 
  }#fourth-right-left-para p{
    opacity: 0; 
    transform: translateX(-100%); 
  }.four{
    margin-left: -2%;
  }
  

  @keyframes slideIn {
    from {
      transform: translateX(-100%); 
      opacity: 0;
    }
    to {
      transform: translateX(0); 
      opacity: 1;
    }
  }
  
  
  #lower-gif-services{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-left: 25%;
    margin-top: 7%;
    margin-left: 10%;
    
  }.lower-gif-services-para{
    color: white;
  font-family: "Calisto MT", serif;
    font-weight: bolder;
    font-size: 25px;
  }.lower-gif-services-img{
    margin-top: 5%;
    margin-left: 28%;
  }.services-img{
    margin-left: -10%;
  }#lower-gif-services img {
    animation: blink 2s infinite; /* Use the 'blink' animation, repeat indefinitely */
  }.tour-travel{
    margin-left: -16%;
  }.Manufacturing{
    margin-left: -19%;
  }
  @keyframes blink {
    0%, 100% { opacity: 1; } /* Start and end with full opacity */
    50% { opacity: 0; } /* Blinking effect: fade out at 50% of the animation */
  }@media only screen and (max-width: 768px) {
    #lower-gif-services {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* Two columns for smaller screens */
      margin-left: 2%; /* Adjust left margin */
      margin-top: 25%; /* Adjust top margin */
    }.line-container-animation12 {
      display: none;
    }.line-container-animation123 {
      display: none;
    }
    #paragraph-middle12{
      /* font-family: "Edwardian Script ITC"; */
          color: burlywood;
          font-size: 35.943px;
          margin-top: -3%;
          margin-bottom: 15%;
         margin-left: 15%;
         opacity: 0; /* Initially hide the paragraph */
        animation: flyIn 1s forwards; /* Apply animation */
      font-family: "Calisto MT", serif;
      }.lower-gif-services-img1{
        /* margin-top: 5%; */
        margin-left: 28%;
      }.services-img{
        margin-left: -20%;
      }.hospital-img{
        margin-left: -10%;
      }#arrowpath123{
        width: 20%;

      }#divarrow-img123{
        width: 170%;
        margin-left: -35%;
        margin-top: -50%;
      }.bellow-paragraph-middle12{
        margin-top: 45%;
      }
  
    
  
    
  
    .lower-gif-services-para {
      font-size: 20px; /* Reduce font size for paragraph */
    }.bellow-paragraph-middle12{
      color: burlywood;
      font-size: 30px;
     margin-left: 15%;
     margin-right: 5%;
     opacity: 0; /* Initially hide the paragraph */
    animation: flyIn 1s forwards; /* Apply animation */
  font-family: "Calisto MT", serif;
    }
  }#arrowpath123{
    width: 8%;
  }.line-container-animation12 {
    margin-bottom: -35%;
    margin-left: 45%;
        margin-top: -6%;
        position: relative;
        width: 100%;
        height: 500px; /* Adjust the height to match your image */
        overflow: hidden; /* Hides any overflow content beyond the container */
      }
  
      /* Styling for the image */
      #line-image-animation12 {
        margin-top: 4%;
        position: absolute; /* Positioned absolutely within its container */
        top: 9%;
        left: 0;
        width: 45%;
        height: auto;
        animation: drawLine 10s linear infinite; /* Animation for drawing the line */
        animation-direction: alternate;
      }.line-container-animation123 {
        margin-bottom: -35%;
        margin-left: 70%;
            margin-top: -6%;
            position: relative;
            width: 100%;
            height: 500px; /* Adjust the height to match your image */
            overflow: hidden; /* Hides any overflow content beyond the container */
          }
      
          /* Styling for the image */
          #line-image-animation123 {
            margin-top: 6%;
            position: absolute; /* Positioned absolutely within its container */
            top: 5%;
            left: 0;
            width: 40%;
            height: auto;
            animation: drawLine 10s linear infinite; /* Animation for drawing the line */
            animation-direction: alternate;
          }
      @keyframes drawLine {
        0% {
          clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); /* Start with top edge clipped */
        }
        50% {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Halfway through, reveal the full line */
        }
        100% {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* End with full line revealed */
        }
      }@media (max-width: 768px) {
        #right-left-para {
          margin-left: 10px;  /* Adjust margin for smaller screens */
          font-size: 16px;  /* Adjust font size for smaller screens */
        }
        
        /* Override styles for specific paragraphs or elements */
        #right-left-para p {
          margin-bottom: 15px;  /* Adjust spacing between paragraphs */
        }
      
        .second-left-right-para {
          margin-left: 0;  /* Remove additional margin for specific paragraphs */
        }.line-container-animation{
          display: none;
        }#main-Established{
          display: grid;
          grid-template-columns: repeat(1,1fr);
        }#Establisheded{
          margin-left: 15%;
          margin-right: 20%;
          color: white;
          font-size: 18px;
        }#Established-img{
         width: 95%;
         margin-left: 2%;
       /* left: -50%; */
        
        }
      
        /* Additional styles as needed for smaller screens */
      }.container-desin {
        display: flex;
        /* flex-direction: column; */
        align-items: center;
        gap: 1%;
        color: white;
        margin-left: 4%;
      }.head4{
        margin-right: 30%;
      }
      
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 3%;
        position: relative;
      }
      
      .text {
        margin-left: 2%;
        margin-right: 2%;
      }
      
      .containerline {
        position: relative;
        width: 200px; /* Example width */
        height: 150px; /* Example height */
      }
      
      .lineli7 {
        margin-left: 67.5rem;
        top: -40%;
        font-size: 25px;
        position: relative;
        color: white;
       /* right:-470%; */
       writing-mode: vertical-rl;
      
      }
      .container-desin{
        margin-top: 10%;
      }.heading {
        font-size: 94px; /* Adjust as needed */

    }.num2{
        margin-left: -90%;
        margin-right: -25%;
        /* margin-right: 5%; */
        font-size: 25px;
      }.num4{
        color: white;
        /* margin-top: -13%; */
        margin-right: -25%;
        margin-left: -85%;
        font-size: 25px;
      }.num3{
        margin-left: -75%;
        font-size: 25px;
        margin-right: -60%;
        /* margin-left: -10%; */
        /* margin-top: 0.1%; */
      }.nu1,.nu5,.nu7{
          font-size: 25px;
      }.head1{
      margin-top:-40% ;
      }.head2,.head4{
          margin-top: 55%;
      }.he7{
        margin-left: 66.5rem;
        color: white;
        margin-top: -6%;
      }.he3{
        margin-top: -15%;
      }
      .nu1{
        /* margin-right: -120%; */
        margin-left: -120%;
      }.nu5{
        margin-left: -70%;
        /* margin-right: -60%; */
      }.nu6{
        /* margin-left: -790%; */
        position: relative;
        right: 9rem;
      }.he12{
        font-size: 15px;
        margin-top: -7%;
        margin-left: 15%;
      }.he5{
        margin-left: -55%;
        margin-top: -15%;
      }.education{
        margin-left: -10%;
      }.he2{
        margin-top: 35%;
      }.he4{
        margin-top: 35%;
      }
      
      
      
      
      
      .container-desin123 {
        display: flex;
        /* margin-top: 95%; */
        /* flex-direction: column; */
        align-items: center;
        gap: 4%;
        color: white;
        margin-left: 20px;
      }.head4123{
        /* margin-right: 30%; */
        margin-left: 60%;
        margin-top: -20%;
      }
      
      .item123 {
        display: flex;
        align-items: center;
        margin-bottom: 3%;
        position: relative;
      }
      
      
      
      .container-desin123{
        margin-top: 1%;
        margin-left: 20%;
      }.num2123{
        margin-left: -20%;
        /* margin-right: 5%; */
        font-size: 25px;
      }.num4123{
        color: white;
        /* margin-top: -13%; */
        margin-left: 15%;
        margin-right: -105%;
        margin-top: -23%;
        font-size: 25px;
      }.num3123{
        font-size: 25px;
        margin-left: -62%;
        margin-right: -95%;
        margin-top: -20%;
      }.nu1123,.nu5123{
          font-size: 25px;
      }.head1123{
      margin-top:-32% ;
      margin-left: 84%;
      }.head2123,.head4123{
          margin-top: -5%;
      }.he9{
        margin-top: -6%;
        margin-left: 20rem;
        color: white;
      }.he1{
        margin-right: 0%;
        color: white;
        /* margin-right: 60%; */
      }.head2,.head4{
        margin-left: -35%;
      }.head3{
        margin-left: -35%;
      }.nu5123{
        margin-top: -4rem;
        margin-left: -3rem;
        margin-right: -100%;
      }
      .container-new {
        display: none;
        flex-direction: column;
        align-items: center;
        color: white;
      }.head-new4{
        margin-right: 30%;
      }
      .item-new {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        position: relative;
      }
      
      .text-new {
        margin-left: 20px;
        margin-right: 20px;
      }
      
      .line-new {
        width: 2px;
        background-color: yellow;
        height: 100%;
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
      }
      
      .line-new:first-child {
        top: 50%;
      }
      
      .line-new:last-child {
        bottom: 50%;
      }
      
      .line-new:first-child:last-child {
        height: 50%;
      }.decs-new1{
        color: white;
        margin-left: 5%;
        /* margin-right: 20%; */
      }.head-new1{
        margin-left: 45%;
        color: white;
      }.num-new1{
        margin-top: -10%;
        margin-left: 5%;
        font-size: 25px;
      }.container-new{
        margin-top: 5%;
      }.decs-new2{
        color: white;
        margin-right: 5%;
        margin-left: 20%;
      }.head-new2{
        color: white;
      margin-right: 35%;
      }.num-new2{
        margin-top: -15%;
        margin-right: 5%;
        font-size: 25px;
      }.num-new4{
        color: white;
        margin-top: -13%;
        margin-right: 3%;
        font-size: 25px;
      }.num-new3{
        margin-left: 3%;
        font-size: 25px;
        /* margin-top: 0.1%; */
      } @media only screen and (max-width: 768px) {
        #about-email{
          margin-left: -30%;
        }.contact-about-section-responsive{
          margin-left: -50%;
        }.contact-about-section-whatsapp{
          margin-left: -10%;
        }#about-whatsapp{
          margin-left: -22%;
        }
      .he-new1{
        /* margin-right: -15%; */
        margin-left: 10rem;
        margin-top: 20%;
      }.he-new2{
        margin-left: -1rem;
      }.container-new{
        margin-top: 30%;
                  display: flex;
                }
      .he-new3{
        margin-left: -6rem;
      }.he-new4{
        margin-left: -1rem;
      }.he-new5{
        margin-left: -7rem;
      }.he-new6{
        margin-left: -1rem;
      }.he-new8{
        margin-left: -1rem;
      }
      .he-new7{
        margin-left: -11.5rem;
      }.he-new9{
        margin-left: -7rem;
      
      }
      .nu-new1{
        margin-top: -8rem;
        margin-left: 2rem;
      }.nu-new2{
        margin-top: -9rem;
        margin-left: 9.5rem;
      }.nu-new3{
        margin-top: -7rem;
       
      }.nu-new4{
        margin-top: -5rem;
        margin-left: 9.5rem;
      }.nu-new5{
        margin-top: -7rem;
        margin-left: 1rem;
      }
      .nu-new6{
        margin-top: -7rem;
        margin-left: 8rem;
      }.nu-new7{
        margin-top: -7rem;
        margin-left: -0.5rem;
        margin-right: -1rem;
      }.nu-new8{
        margin-top: -7rem;
        margin-left: 9.5rem;
      }
      .nu-new9{
        margin-top: -5rem;
        margin-left: 2rem;
      }
      .he-new1{
        margin-left: -100%;
      }.nu-new1{
        margin-left: 35%;
        /* margin-top: 1%; */
      }.nu-new3{
        margin-right:-20%;
      }#chart-flow-servies,.he9{
        display: none;
      }
      
      
        } #arrowpath123{
          margin-left: 46%;
          margin-top: 6%;
          transition: opacity 0.3s ease; /* Smooth opacity transition */
cursor: pointer;
/* Add a pulsating animation */
animation: pulse 1.5s infinite;

        }
        @keyframes pulse {
          0% {
            transform: scale(1); /* Normal size */
          }
          50% {
            transform: scale(1.1); /* Slightly larger */
          }
          100% {
            transform: scale(1); /* Back to normal size */
          }
        }.underline,
        .underline1 {
            text-decoration: none;
        }
        
        /* Media query for mobile devices (up to 767px) */
        @media (max-width: 767px) {
            .underline {
                font-size: 18px; /* Set font size to 18px for mobile */
                color: white;
                margin-left: -35%;
            }
            .underline1 {
                font-size: 20px; /* Set font size to 18px for mobile */
                color: white;
                margin-left: -23%;
            }
        }
        
        /* Media query for laptops and larger screens (768px and above) */
        @media (min-width: 768px) {
           
            .underline {
              margin-top: -3%;
                color: white;
                font-size: 33px; /* Set font size to 33px for laptops */
            }
            .underline1 {
                color: white;
                margin-top: -3%;
                margin-left: 9%;
                font-size: 33px; /* Set font size to 33px for laptops */
                margin-bottom: 10%;
            }
        }.line-right-left {
          /* font-size: 18px; */
          position: relative; /* Set the position to relative */
          top: -10px; /* Adjust this value to move the span up or down */
        }


        
       
        #main-dive-for-layout {
       font-family: "Calisto MT", serif;
        text-align: center;
        color: #00d7df;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-weight: bolder;
        margin-bottom: -20%;
    }

    .container-mini {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        max-width: 1200px;
    }

    .step-mini {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px;
        position: relative;
    }

    .circle-mini {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid #00d7df;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        background-color: #000080;
        /* 808080  */
        color: #00d7df;
        z-index: 2;
    }

    .line-mini {
        height: 2px;
        background-color: #00d7df;
        position: absolute;
        top: 25px;
        width: 350px;
        z-index: 0;
    }

    .line-mini.dashed-mini {
        border-top: 2px dashed #00d7df;
        background: none;
    }

    .line-mini.right {
        right: calc(100% + 20px);
    }

    .row-mini {
        display: flex;
        gap: 10.5%;
        flex-direction: row;
        align-items: center;
    }

    .row-mini .step-mini {
        margin-right: 60px;
    }

    .second-row-mini {
        margin: 8% 30%;
    }

    .vertical-connector {
        position: absolute;
        height: 192px;
        border: 2px dashed #00d7df;
        top: 50px;
        left: 50%;
    }

    #top-row-mini-content {
        display: flex;
        align-items: center;
        margin-left: 10%;
        color: #00d7df;
        gap: 12%;
        margin-top: -4%;
    }

    #top-row-mini-content p {
        margin: 0;
        padding: 5px;
        font-size: 22px;
        /* font-weight: bolder; */
    }

    #top-row-mini-content p:nth-child(odd) {
        margin-top: -37%;
    }

    #top-row-mini-content p:nth-child(4) {
        margin-left: 5%;
        margin-top: -3%;
    }

    #top-row-mini-content p:nth-child(2) {
        margin-top: 2%;
        margin-left: -2%;
    }

    #top-row-mini-content-second {
        display: flex;
        align-items: center;
        margin-left: 46%;
        color: #00d7df;
        gap: 10%;
        margin-top: -20%;
    }

    #top-row-mini-content-second p {
        margin: 0;
        padding: 5px;
        font-size: 22px;
    }

    #top-row-mini-content-second p:nth-child(1) {
        margin-top: -40%;
        margin-left: -5%;
    }

    #top-row-mini-content-second p:nth-child(2) {
        margin-left: 2%;
        margin-top: 12%;
    }

    #top-row-mini-content-second p:nth-child(3) {
        margin-top: -17%;
        margin-left: 37%;
    }

    #tesai {
        /* position: relative; */
        /* right: 66%; */
        /* top: 11.5%; */
        margin-left: -250%;
        margin-top: 15%;
        font-size: 22px;
    }
    .servicesfirst{
      background-color: rgb(191, 134, 191);
      border-radius: 20px;
      color: white;
    }.servicessecond{
      margin-top: 3%;
      border-radius: 20px;
      background-color: turquoise;
    }.servicesthird{
      margin-top: 3%;
      border-radius: 20px;
      background-color: cadetblue;
    }.projectfirst{
      /* margin-top: 3%; */
      border-radius: 20px;
      background-color: darkcyan;
    }
    .projectsecond{
      margin-top: 3%;
      border-radius: 20px;
      background-color: coral;
    }#leftToRight{
      /* width: 40%; */
      /* margin-left: 20%;scroller-inner */
    }.servicesfifth{
      margin-top: 3%;
      border-radius: 20px;
      background-color: #edc124;
    }@media (max-width: 480px) {
      #main-dive-for-layout{
        display: none;
      }.services{
        font-size: 30px;
        margin-left: 12%;
        margin-bottom: 10%;
        margin-top: 45%;
       }#Established-img{

    /* margin-left: 10%; */
    margin-top: 8%;
      }#Establisheded-bellow{
        margin-top: 10%;
      }#paragraph-middle123{
        font-size: 30px;
        margin-left: 10%;
        margin-top: 45%;
          }#lower-gif-services{
            margin-bottom: 50%;
          }
    }