@font-face {
  font-family: "Constantia Bold";
  src: url("https://db.onlinewebfonts.com/t/b411b0999020c9c25b8151e359197150.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/b411b0999020c9c25b8151e359197150.woff") format("woff");
  font-weight: bold;
} 

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Rozha+One&display=swap');

html, body {
  overflow-x: hidden;
  /* width: 100%; */
}
/* Apply overflow hidden specifically for mobile screens */
@media (max-width: 768px) {
  html, body {
      overflow-x: hidden;
  }
}


@font-face {
  font-family: "CalgaryDemo";
  src: url("https://db.onlinewebfonts.com/t/70682faa3195b545da8ebd2edc81193c.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/70682faa3195b545da8ebd2edc81193c.woff") format("woff");
}

@font-face {
  font-family: "Auralyess Free Trial";
  src: url("https://db.onlinewebfonts.com/t/35fde3aa01e7f6efe7b2d4d66dea441c.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/35fde3aa01e7f6efe7b2d4d66dea441c.woff") format("woff");
}
html{
  scroll-behavior: smooth;
  overflow-x: hidden;
}
    body {
      padding: 0;
      margin: 0;
      /* background: linear-gradient(135deg, rgb(1, 5, 64) 0%, rgb(51, 7, 83) 50%); */
      /* background: #0b0e66; */
      background-size: cover; 
      background-repeat: no-repeat; 
      background-attachment: fixed;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }
    body {
    
      background: linear-gradient(135deg, rgb(1, 5, 64) 0%, rgb(51, 7, 83) 50%);
  }
  
  /* Background for smaller screens (e.g., mobile) */
  @media only screen and (max-width: 768px) {
    #submeean-heading li a{
      color: white;
      background-color: navy;
      border-radius: 25px;
    } #submeean-heading {
      color: white;
      display: grid;
      margin-left: -5%;
      margin-right: -5%;
      row-gap: 2px;
      text-align: right;
      grid-template-columns: repeat(1, 1fr);
    }

      body {
          background: linear-gradient(135deg, rgba(17, 20, 59, 1) 0%, rgba(66, 17, 102, 1) 50%, rgba(76, 18, 252, 1) 100%);
      }#show-on-lap{
        display: none;
      }#submeean-heading li a:hover{
        color: navy;
          /* color: navy; */
          background-color: aqua;
          border-radius: 25px;
        }#submeean-heading li a{
          color: white;
            /* color: navy; */
            background-color: navy;
            border-radius: 25px;
          }
  }

    

#main-first-floating-text{
  font-size: 60px;
    font-weight: bolder;
    position: absolute;
    top: 46%;
    left: 50%;
    margin-right: -20%;
    transform: translate(-50%, -50%);
  color: white;
  line-height: 1.1;
    justify-content: center;
    align-items: center;
    font-family: 'Abril Fatface', serif;
    text-align: center;
}

    #mm {
        background-color: rgba(69, 89, 164, .5);
    }#emailContainer a{
      text-decoration: none;
      color: white;
    }

    #logo {
      width: 150px;
      height: auto;
      position: fixed;
      top: 1%; 
      left: 4%; 
      z-index: 2;
      cursor: pointer;
  }

    #leaf {
        width: 400px;
        height: auto;
        position: absolute;
        z-index: 1;
        animation: wind 10s infinite alternate ease-in-out;
        transform-origin: top center;
        transform: rotate(180deg) scaleY(-1);
        opacity: 0.5;
        
    }.leaf12{
      top: -65px;
    }

    #leaf1 {
        width: 400px;
        height: auto;
        margin-left: 5%;
        position: absolute;
        z-index: 1;
        animation: wind 20s infinite alternate ease-in-out;
        transform-origin: top center;
        transform: rotate(180deg) scaleY(-1);
        opacity: 0.5;
        top: -90px;
    }

    @keyframes wind {
        0% {
            transform: rotate(0deg) translateY(0);
        }
        100% {
            transform: rotate(10deg) translateY(-5px);
        }
    }

    #corner-image {
        width: 7%;
        height: auto;
        position: fixed;
        margin-top: 5%;
        right: 2%;
        z-index: 2; 
        animation: rotateClockwise 10s linear infinite; 
        cursor: pointer;
    }

    @keyframes rotateClockwise {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    #corner-image-text {
      position: fixed;
      margin-top: 5%;
        right: 4.7%;
        transform: translate(-50%, -50%);
        color: white;
        /* font-size: 65px; */
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        z-index: 3; 
        cursor: pointer;
    }

    #top-header {
        display: flex;
        align-items: center;
    }

    #main-header{
    /* margin-top: 10%; */
     /* margin-left: 20%; */
     /* margin: auto; */
     font-family: "Calisto MT", serif;
    animation: flyIn 1s forwards; 
    letter-spacing: 0;
    /* padding: .25em 0 .325em; */
    display: block;
    font-size: 30px;
     color: rgba(255,255,255,.25); text-align: center;
    /* margin: 5% 19%; */
    margin-top: 2%;
    margin-left: 31%;
    /* margin-right: -50%; */
    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%; }
}
  
  /* 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;
    }



    #text{
      /* font-family: "Elephant Italic V1"; */
      font-family: 'Abril Fatface', serif;
    }

    #floting-image {
        margin-left: 28%;
    }
    #paragraph {
      font-family: "Calisto MT", serif;
      text-align: center;
      padding: 0 50px;
      color: white;
      /* max-width: 800px; */
      line-height: 1.5;
      margin-top: 27%;
      margin-left: 15%;
      margin-right: 15%;
      font-size: 20px;
      /* margin-right: -100%; */
      opacity: 0; /* Initially hide the paragraph */
      animation: flyIn 1s forwards; /* Apply animation */
  }
   @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: 2%;
  margin-right: 10%;
  margin-left: 12%;
  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%; }
  }.know-us{
      font-family: "Auralyess Free Trial";
        margin-left: 12%;
        margin-bottom: 3%;
        color: white;
        font-size: 45px;
        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;
    }#para{
      font-family: "Calisto MT", serif;
        color: white;
        font-size: 27px;
        margin-right: 10%;
        margin-top: -2%;
       margin-left: 12%;
    }.paragraph-2middle{
      font-family: "Calisto MT", serif;
        color: white;
        font-size: 18px;
        margin-right: 40%;
       margin-left: 12%;
    }.paragraph-2middle-withtick{
      font-family: "Calisto MT", serif;
      color: white;
      font-size: 18px;
      margin-right: 10%;
      margin-left: 2%;
      /* margin-left: 8%; */
    }
    .paragraph-2middle{
        margin-top: 2%;
    } .container {
      font-family: "Constantia Bold";
      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%;
    }.container:hover{
      color: aqua;
    }
    
    @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: 6%;
      
      right: -5%;
  } 

  #corner-image-text {
      position: fixed;
      top: 4.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-top: 70%;
        line-height: 1.2;
        margin-left: -10%;
        margin-right: -10%;
      }
    
      #paragraph-middle {
        margin-left: 10%;
        font-size: 25px;
      }
    
      .know-us {
        margin-left: 5%;
        font-size: 30px;
      }
    
      #para {
        margin-left: 5%;
        margin-right: 8%;
        font-size: 20px;
      }
    
      .paragraph-2middle {
        font-family: "Calisto MT", serif;
        /* margin-top: 0; */
        margin-left: 10%;
        margin-right: 25%;
        font-size: 20px;
      }
    
      .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 {
  /* background: #e5ecfb; */
  margin-left: 6%;
  min-height: 60vh;
}
.contact .containerr {
  max-width: 1050px;
  width: 100%;
  border-radius: 1.5rem;
  margin: 1rem 1rem;
}
.contact .containerr .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 2rem;
}
.contact .content .image-box {
  max-width: 60%;
  margin-left: 4rem;
}
.contact .content .image-box img {
  width: 100%;
  height: 40rem;
  position: relative;
}
.contact .content form {
  width: 45%;
  margin-right: 3.5rem;
}
form .form-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.form-group .field {
  height: 50px;
  display: flex;
  position: relative;
  margin: 1rem;
  width: 100%;
  /* color: blue; */
}
form i {
  position: absolute;
  top: 50%;
  left: 18px;
  color: rgb(51, 51, 51);
  /* color: blue; */
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
}
form .field input,
form .message textarea {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 16px 0 48px;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  border-radius: 5px;
  border: 1px solid rgb(51, 51, 51);
}
.field input::placeholder,
.message textarea::placeholder {
  color: blue;
}input::placeholder{
  color: blue;
}
.field input:focus,
.message textarea:focus {
  margin-left: 1%;
  padding-left: 47px;
  border: 2px solid rgb(115, 3, 167);
}
.field input:focus ~ i,
.message textarea:focus ~ i {
  color: rgb(115, 3, 167);
}
form .message {
  position: relative;
  margin: 1rem;
  width: 100%;
}
form .message i {
  top: 25px;
  font-size: 20px;
  left: 15px;
}
form .message textarea {
  min-height: 130px;
  max-height: 230px;
  max-width: 100%;
  min-width: 100%;
  padding: 12px 20px 0 48px;
}
form .message textarea::-webkit-scrollbar {
  width: 0px;
}
form .button-area {
  display: flex;
  float: right;
  flex-direction: row-reverse;
}
.button-area button {
  color: #fff;
  border: none;
  outline: none;
  font-size: 1.8rem;
  cursor: pointer;
  border-radius: 5px;
  padding: 13px 25px;
  box-shadow: 0px 5px 10px rgba(48, 68, 247, 0.6);
  transition: 0.3s ease;
  font-family: "Nunito", sans-serif;
}
.button-area button:hover {
  background: #421cecf5;
}
.button-area span {
  font-size: 17px;
  padding: 1rem;
  display: none;
}
.button-area button i {
  position: relative;
  top: 6px;
  left: 2px;
  font-size: 1.5rem;
  transition: 0.3s;
  color: #fff;
}
.button-area button:hover i {
  left: 8px;
}
/* contact section media queries starts */
@media (max-width: 900px) {
  .contact {
    min-height: 70vh;
  }
  .contact .containerr {
    margin: 3rem 0 2rem 0;
  }
  .contact .containerr .content {
    padding: 18px 12px;
  }
  .contact .content .image-box {
    display: none;
  }
  .contact .content form {
    width: 100%;
    margin-right: 2rem;
  }
} .contact {
  /* background: #e5ecfb; */
  min-height: 60vh;
}
.contact .container {
  max-width: 1050px;
  width: 100%;
  background: #fff;
  border-radius: 1.5rem;
  margin: 2rem 5rem;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.contact .container .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 2rem;
}
.contact .content .image-box {
  max-width: 60%;
  margin-left: 4rem;
}
.contact .content .image-box img {
  width: 80%;
  height: 30rem;
  position: relative;
}
.contact .content form {
  width: 45%;
  margin-right: 3.5rem;
}
form .form-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.form-group .field {
  height: 50px;
  display: flex;
  position: relative;
  margin: 1rem;
  width: 100%;
}
form i {
  position: absolute;
  top: 50%;
  left: 18px;
  color: rgb(51, 51, 51);
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
}
form .field input,
form .message textarea {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 16px 0 48px;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  border-radius: 5px;
  border: 1px solid rgb(51, 51, 51);
  background: #e5ecfb;
}
.field input::placeholder,
.message textarea::placeholder {
  /* color: rgb(51, 51, 51); */
}
.field input:focus,
.message textarea:focus {
  padding-left: 30px;
  border: 2px solid rgb(115, 3, 167);
}
.field input:focus ~ i,
.message textarea:focus ~ i {
  color: rgb(115, 3, 167);
}
form .message {
  position: relative;
  margin: 1rem;
  width: 100%;
}
form .message i {
  top: 25px;
  font-size: 20px;
  left: 15px;
}
form .message textarea {
  min-height: 130px;
  max-height: 230px;
  max-width: 100%;
  min-width: 100%;
  padding: 12px 20px 0 48px;
}
form .message textarea::-webkit-scrollbar {
  width: 0px;
}
form .button-area {
  display: flex;
  float: right;
  flex-direction: row-reverse;
}
.button-area button {
  color: #fff;
  border: none;
  outline: none;
  font-size: 1.8rem;
  cursor: pointer;
  border-radius: 5px;
  padding: 13px 25px;
  background: #2506ad;
  box-shadow: 0px 5px 10px rgba(48, 68, 247, 0.6);
  transition: 0.3s ease;
  font-family: "Nunito", sans-serif;
}
.button-area button:hover {
  background: #421cecf5;
}
.button-area span {
  font-size: 17px;
  padding: 1rem;
  display: none;
}
.button-area button i {
  position: relative;
  top: 6px;
  left: 2px;
  font-size: 1.5rem;
  transition: 0.3s;
  color: #fff;
}
.button-area button:hover i {
  left: 8px;
}
/* contact section media queries starts */
@media (max-width: 900px) {
  .contact {
    min-height: 70vh;
  }
  .contact .container {
    margin: 3rem 0 2rem 0;
  }
  .contact .container .content {
    padding: 18px 12px;
  }
  .contact .content .image-box {
    display: none;
  }
  .contact .content form {
    width: 100%;
    margin-right: 2rem;
  }
}#bellow-footer{
  font-family: "Auralyess Free Trial";
    color: burlywood;
    font-size: 45px;
    margin-top: 20%;
    margin-left: 8%;
}.top-footer{
    color: rgb(106, 235, 235);
    font-size: 25px;
    margin-left: 20%;
}.image_container img {
  width: 100%;
  height: auto;
}.text-lesttalk{
  font-family: "Constantia Bold";
  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-top: 2%;
  margin-right: 12%;
  margin-left: 12%;
  font-family: "CalgaryDemo";
  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%; }
  }


#text-bellow-part{
  font-family: "Constantia Bold";
  font-size: 45px;
  color: aqua;
  margin-right: 15%;
}.know-bellow-part{
  margin-left: -15%;
}
#bellow-part-footer{
  font-family: "CalgaryDemo";
  font-size: 35px;
  color: aqua;
  margin-right: 10%;
  margin-left: 9%;
  margin-top: 2%;
}.trust{
  font-family: "Constantia Bold";
  font-size: 35px;
  color: aqua;
  /* margin-right: 1%; */
  margin-left: 12%;
  margin-top: 2%;
}
#first-floating-text{
  margin-left:3%;
 }
 /* #main-header{
  margin-bottom: 5%;
 } */
 .iknow-button {
  font-family: "Constantia Bold";
    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%;
}#start-our-our-univers{
  cursor: pointer;
}.iknow-button:hover{
  color: aqua;
  /* animation:step-end; */
}#know-us-para-main-conatainer{
  margin-top: 20%;
}

/* 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 {
  font-family: "Constantia Bold";
  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%;
}.text-iknow-button:hover{
  background-color: transparent;
  cursor: pointer;
  color: white;
}

/* 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%;}
}
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.scroll-to-top a {
  position: fixed;
  top: -140%;
  right: 2rem;
  padding: 1rem 1.5rem;
  font-size: 2rem;
  background: #ffae00;
  color: rgb(13, 0, 44);
  border-radius: 5rem;
  transition: 1s linear;
  z-index: 1000;
}
#side-hover-img {
  z-index: 2;
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  transition: opacity 0.5s ease;
}
#side-phone-img {
  z-index: 2;
  position: fixed;
  bottom: 13%;
  right: 20px;
  cursor: pointer;
  transition: opacity 0.5s ease;
}
#side-email-img {
  z-index: 2;
  position: fixed;
  bottom: 22%;

  right: 27px;
  cursor: pointer;
  transition: opacity 0.5s ease;
}#side-email-img img{
  width: 38px;
}


#whatsapp {
  transition: opacity 0.5s ease;
}
#phone {
  transition: opacity 0.5s ease;
}#email{
  transition: opacity 0.5s ease;
}

.scroll-to-top1 {
  display: none;
  z-index: 2;
  position: fixed;
  bottom: 20px;
  right: -200px; /* Start off-screen to the right */
  opacity: 0;
  transition: all 0.5s ease;
}
.scroll-to-top2 {
  display: none;
  z-index: 2;
  color: black;
  position: fixed;
  bottom: 12%;
  right: -200px; /* Start off-screen to the right */
  opacity: 0;
  transition: all 0.5s ease;
}
.scroll-to-top3 {
  display: none;
  z-index: 2;
  color: black;
  position: fixed;
  bottom: 22%;
  right: -200px; /* Start off-screen to the right */
  opacity: 0;
  transition: all 0.5s ease;
}

.show-scroll-to-top {
  right: 20px; /* Animate to final position */
  opacity: 1; /* Make it visible */
}
.show-scroll-to-top1 {
  right: 20px; /* Animate to final position */
  opacity: 1; /* Make it visible */
}
.show-scroll-to-top2 {
  right: 20px; /* Animate to final position */
  opacity: 1; /* Make it visible */
}


#whatsappContainer {
  display: flex;
  align-items: center;
  background-color: #25D366; /* WhatsApp green background */
  padding: 10px;
  border-radius: 30px;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 14px;
}#phoneContainer{
  /* text- */
  display: flex;
  align-items: center;
  background-color: white; /* WhatsApp green background */
  padding: 10px;
  border-radius: 30px;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 14px;
}#phoneContainer a{
  color: navy;
  font-weight: bold;
  text-decoration: none;
}
#emailContainer{
  /* text- */
  display: flex;
  align-items: center;
  background-color: red; /* WhatsApp green background */
  padding: 10px;
  border-radius: 30px;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 14px;
}
#phoneContainer img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
#emailContainer img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

#whatsappContainer img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
#phoneContainer span {
  white-space: nowrap;
}

#whatsappContainer span {
  white-space: nowrap;
}#emailcontainer span {
  white-space: nowrap;
}


 
#lets-talk {
  display: flex;
  margin-top: 20%;
  /* 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: 2%;
    cursor: pointer;
    justify-content: space-between;
    margin-left: 5%;
    margin-top: 5%;
    margin-right: 10%;
    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: 500px;
height: 350px;
}.card-body {
background-color: none; /* Transparent background color */
color: white; /* Text color */
}
.card {
  width: calc(33.33% - 20px); /* Adjust as needed */
  margin-bottom: 20px;
}#contact-illustration12{
  display: none;
}#contact-illustration{
  display: block;
}


@media only screen and (max-width: 768px) {
  .card {
    width: calc(50% - 20px); /* Adjust as needed */
  }#lets-talk{
    display: grid;
    grid-template-columns: repeat(1,1fr);
  }#contact-illustration{
    display: none;
  }#contact-illustration12{
  width: 100%;
  height: auto;
  margin-right: 20px;
  margin-bottom: 10%;
  display: block;
  }#are-you-ready{
    margin-top: 30%;
    margin-bottom: 20%;
  }
}

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

}@media only screen and (max-width: 768px) {
  #bellow-part {
    margin-left: 5%; /* 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 */
    margin-left: 10%;
  }
}

@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: 1%;
}.circle-inner {
width: 150px; 
height: 150px; 
margin-top: 85%;
/* margin-right: 15%; */
margin-left: 1%;
} .container {

 margin-left: 67%;
 margin-bottom: 15%;
 margin-top: -12%;
} #main-header {
  /* /* margin-top: 15%; */
   /* margin-left: 35%;  */
}.text-iknow-button{
  margin-right: 10%;
  margin-left: 30%;
}
.iknow-button {
  height: auto;
  font-size: 15px;
  width: 80%;
  margin-left: 8%;
  margin-right: 18%;
} .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: 5%;
  margin-top: 8%;
}


}


.text-inside {
  font-family: "Constantia Bold";
  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%;
}.text-inside:hover{
  color: aqua;
}
.services {
  font-family: "Auralyess Free Trial";
  font-size: 55px;
  margin-top: 20%;
  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;
}.project-container { 
  /* position: relative; */
  /* margin-top: 2%; */
  margin-left: 9rem;
  margin-right: 5%;
  gap: 9rem;
  /* margin-right: 30%; */
   display: flex;
 }.project-container:hover{
  cursor: pointer;
 }
 #cointainer-project-main-section{
  margin-left: 5%;
 }
 
 #side-text-project {
  writing-mode: vertical-rl; /* Set vertical writing mode */
  font-size: 23px;
  color: burlywood;
  transform: rotate(180deg); /* Rotate the text 180 degrees */
  transform-origin: top left; /* Set the rotation origin to the top left corner */
  /* margin-b: 20%; */
  margin-top: 12%;
}#main-container-clinet-name{
  font-family: "Constantia Bold";
  margin-left: 8%;
  gap: 43%;
  margin-top: 14rem;
  /* margin-bottom: -28rem; */
  display: flex;
}.line-client-name{
  
  position: relative;
  left: 20%;
}
 
 .project-image{
   width: 90%;
   margin-top: -100rem;
 }.project-image:hover{
  transform: scale(1.1); 
  cursor: pointer;
  color: #00FFFF;
 }.project2{
  margin-top: 2%;
 }
 .projectdesc{
  display: none;
  font-family: "Constantia Bold";
   color: aliceblue;
   font-size: 20px;
   text-align: center;
   margin-left: -30rem;
   margin-top: -38rem;
   margin-right: 18rem;
   /* margin-right: 5%; */
 }
 @media screen and (min-width: 1200px) {

}
 .leaf{
  left: -5%;
  opacity: 0.2;
 }.videocontainerr {
  /* display: flex; */
  position: relative;
  display: inline-block;
  margin-top: 15%;
  cursor: pointer;
  /* z-index: 2; */
}

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

.watermark {
  align-items: center;
  position: absolute;
  /* bottom: 10px; */
  margin-top: -5%; 
   margin-left: 70%; 
  transform: translateX(-50%);
  background-color: rgba(14, 9, 157, 0.8);
  padding: 9px 170px;
  border-radius: 5px;
  z-index: 1;
}#name{
  font-family: "Constantia Bold";
  margin-left: -35%;
   margin-right: -190%;
  /* margin-left: 40%; */ 
  color: aqua;
  font-size: 22px;
}#sec{
  font-family: "Constantia Bold";
  margin-right: -150%;
  font-size: 20px;
  margin-left: -100%;
  align-items: center;
  margin-top: 25%;
  color: white;
}#star{
  display: flex;
  margin-left: -35%;
}.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{
  font-size: 20px;
  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: "Constantia Bold";
  margin-top: 20%;
 margin-left: 8%;
}#fakeimage-p{
  font-family: "Constantia Bold";
  margin-left: 12%;
  text-align: center;
  margin-right: 11%;
}.second-articel{
  margin-left: 25%;
}.card-text{
  font-size: 20px;
  margin-top: -1%;
  font-family: "Calisto MT", serif;
  margin-left: 20%;
  /* margin-right: -15%; */
  text-align: center;
}.card-text:hover{
  color: #00FFFF;
}.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: "Constantia Bold";
 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: "Constantia Bold";
  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 */
}footer{
  font-family: "Constantia Bold";

}#ph{
  text-transform: unset;
  font-family: 'Courier New', Courier, monospace;
}.secondimage{
  width: 450px;
  height: 220px;
}.thirdimage{
  height: 220px;
}#rightarrow{
  width: 15%;
  margin-left: -8%;
  margin-top: 7%;
  /* top: -20%; */
  cursor: pointer;
  opacity: 0.7; /* Initial opacity */
  transition: opacity 0.3s ease; /* Smooth opacity transition */

  /* 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 */
  }
}

/* Change opacity on hover to indicate interactivity */
#rightarrow:hover {
  opacity: 1;
}#leftarrow:hover {
  opacity: 1;
}
#leftarrow{
  width: 15%;
  margin-left:85%;
  margin-top: -50%;
  cursor: pointer;
  opacity: 0.7; /* Initial opacity */
  transition: opacity 0.3s ease; /* Smooth opacity transition */

  /* Add a pulsating animation */
  animation: pulse 1.5s infinite;
  
}.starbutton{
  margin-top: 1%;
  cursor: pointer;
}.knowour{
  margin-top: 10%;
}

.tickerwrapper {
  /* the outer div */
  font-family: "Constantia Bold";
  font-size: 16pt;
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
  position: relative;
  top: 30px;
  left: 50%; /* Start from the middle */
  transform: translateX(-50%); /* Center horizontally */
  width: 80%; /* Adjust the width as needed */
  height: 30px;
  overflow: hidden;
  color: white;
  cursor: pointer;
}

ul.list {
  position: relative;
  display: inline-block;
  list-style: none;
  padding:0;
  margin:0;
}

ul.list.cloned {
  position: absolute;
  top: 0px;
  left: 0px;
}

ul.list li {
  float: right;
  padding-left:90px;
}ul.list li:hover{
      color: #00FFFF;
    }
.custom-ticker-wrapper {
      font-family: "Constantia Bold";
      font-size: 16pt;
      -webkit-box-sizing: padding-box;
      box-sizing: padding-box;
      position: relative;
      top: 20px;
      left: 50%; /* Start from the middle */
      transform: translateX(-50%); /* Center horizontally */
      width: 80%; /* Adjust the width as needed */
      height: 30px;
      overflow: hidden;
      color: white;
      cursor: pointer;
      margin-top: 5%;
    }

    .custom-list {
      display: inline-block;
      white-space: nowrap;
      padding: 0;
      margin: 0;
      position: absolute;
      left: 0; /* Start from the left */
    }

    .custom-list-item {
      display: inline-block;
      padding-left: 90px;
    }.custom-list-item:hover{
      color: #00FFFF;
    }







    .tickerwrapper-verynew {
      font-family: "Constantia Bold";
      font-size: 16pt;
      -webkit-box-sizing: padding-box;
      box-sizing: padding-box;
      position: relative;
      top: 20px;
      left: 50%; /* Start from the middle */
      transform: translateX(-50%); /* Center horizontally */
      width: 80%; /* Adjust the width as needed */
      height: 30px;
      overflow: hidden;
      color: white;
      cursor: pointer;
      margin-top: 5%;
    }

    .listnew {
      display: inline-block;
      white-space: nowrap;
      padding: 0;
      margin: 0;
      position: absolute;
      left: 0; /* Start from the left */
    }

    .listitem-new {
      display: inline-block;
      padding-left: 90px;
    }.listitem-new:hover{
      color: #00FFFF;
    }




.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%);
}

/* .emoji {
  display: inline-block;
  width: 40px;
  height: 60px;
  margin: 0 30px;
  background-size: contain;
  background-repeat: no-repeat;
  animation: fly 8s linear infinite;
} */

@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) {
  .knowour{
    margin-top: 30%;
  }.navbar-only-scrol{
    display: none;
  }
  .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 */
  }.services{
    margin-top: 45%;
    margin-left: 10%;
  }.custom-ticker-wrapper{
    margin-bottom: 20%;
  }.tickerwrapper{
    margin-bottom: 15%;
  }.tickerwrapper-verynew{
margin-top: -5%;
  }.iknow-button {
    height: auto;
    width: 80%;
    margin-left: 10%;
  }.know-us {
    margin-left: 10%;
    font-size: 30px;
  }#para{
    margin-top: 5%;
    margin-left: 10%;
  }.projectdesc {
    margin-left: 5%;
    text-align: center;
    margin-top: -16.5em;
    margin-bottom: 15%;
    margin-right: 1rem;
  }.project-image {
    /* position: absolute; */
    width: 100%;
    margin-top: -100%;
  margin-bottom: 60%;
  }.ab {
    font-size: 25px;
    font-family: "Constantia Bold";
    margin-left: -5%;
    text-align: center;

  color: burlywood;
      display: block; /* Show the project container on mobile screens */
  }.trust{
    margin-left: 10%;
    margin-top: 5%;
  }.tickmark-container{
    margin-left: -5%;
  } #image {
    width: 95%;
    height: 95%;
    position: relative;
    z-index: 1;
   margin-left: 2.5%;
   margin-top: -25%;
  }.watermark{
    margin-top: 55%;
  }
  #main-header {
    /* margin-left: 70%; */
    font-size: 25px;
    margin-bottom: 12%;
    /* text-align: center; */
    /* margin-right: 10%; */
  } 
  #floting-image{
    /* position: absolute; */
  margin-left: 5%;
  align-items: center;
  text-align: center;
/* left:  -12%; */
  /* top: 25%; */
  margin-top: -2%;
}#text{

  font-size: 28px;
}#text-new{
margin-top: 0;
  font-size: 28px;
}



.mataingap{
  margin-top: 12%;
  margin-left: 5%;
  margin-right: 5%;
}
}@media only screen and (max-width: 480px) and (max-width: 767px) {
  .project-container {
    margin-top: 100%;
    flex-direction: column;
    margin-left: 5%;
    margin-right: 5%;
    /* gap: 200%; */
    /* margin-top: -100%; */
  }.descproject-2{
    /* margin-bottom: -20%; */
    /* padding-top: -60%; */
  }
  .second-ad{
    margin-top: -30%;
    margin-bottom: -35%;
  }

  
  .project2{
    margin-top: 100%;
  }.project1{
    margin-top: 100%;
  }

  
}@media only screen and (max-width: 480px) and (max-width: 767px) {
  #articel-section {
    flex-direction: column;
    align-items: center;
    margin-left: 2%;
    /* margin-right: 2%; */
  }

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

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

  .secondimage {
    width: 100%; /* Make second image occupy full width */
  }

  .number {
    display: none;
  }#text-bellow-part{
    font-size: 25px;
    margin-left: 10%;
    margin-right: 10%;
  }#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;
  }.contact-about-section-responsive{
    margin-left: -100%;
  }
 
  .watermark {
    position: absolute;
    margin-top: 90%; 
    background-color: blue;
     margin-left: 50%; 
    padding: 2px 145px;
    border-radius: 5px;
    z-index: 1;
  }.starbutton{
    margin-top: 50%;
  }
  #name{
    margin-left: -100%;
    margin-right:-100%;
    font-size: 18px;
    margin-top: 15%;
  }#sec{
    /* display: none; */
    margin-right: -202%;
    font-size: 15px;
    margin-left: -150%;
    /* 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;

  }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%);
  }
}.list-group{
  margin-top: -3%;
  text-align: right;
margin-left: 35rem;
font-family: "Constantia Bold";
}











.btn-primary {
        background-color: transparent; /* Set background color to transparent */
        border: none; /* Remove border */
        padding: 0; /* Remove padding */
    }
    .btn-primary:hover {
        background-color: transparent;
    }
    /* Adjust close button style */
    .btn-close {
        color: white; /* Set color to black */
        font-weight: bolder;
        font-size: 2rem; /* Adjust font size */
        margin-right: 10px; /* Add some margin to separate from offcanvas title */
    }div.offcanvas-header .btn-close {
      color: white; /* Change color to white */
      background-color: yellow;
      font-weight: bolder;
      font-size: 2rem;
      margin-right: 10px;
  }
    .offcanvas{
      background-color: #0b0e66;
      width: 80%;
    }.list-group-item>a{
      transition: transform 0.6s, color 0.6s;
      text-align: right;
text-decoration: none;
font-weight: bold;
color: white;
font-size: 25px;
}.list-group-item{
background-color: transparent;
margin-top: -1%;
border: none;
}.offcanvas-title{
color: white;
}












.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;
}.offcanvas-body{
display: flex;
}
@media (max-width: 768px) {
  .offcanvas-body{
    margin-top: -7%;
    }
.rotatingText {
  margin-left: -5%;
  margin-top: 140%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  
}#digitatal-for-menu-new{
  padding-bottom: 10%;
}
.offcanvas{
  background-color: white;
  width: 100%;
}.list-group-item{
  margin-top: -7%;
}
.list-group-item>a {
  color: navy;
  font-size: 22px;
  margin-left: -5%;
  margin-top: -10%;
}

.list-group {
  margin-left: 0;
}.rotatingText-adjective{
  font-size: 20px;
}
.offcanvas{
      width: 100%;
    }.list-group{
margin-left: 5%;
}.hrline-about{
display: none;
}
}.requestfor-quote{
margin-left: -57%;
/* margin-right: -20%; */
}
@media only screen and (max-width: 767px)  {
 .line-container-animation{
    display: none;
  }#main-container-clinet-name{
    margin-top: 2rem;
    margin-bottom: -1rem;
    /* display: block; */
  }.clientname1{
    margin-left: 5rem;
    /* top: 18rem; */
  }.clientname3{
    margin-left: 5rem;
    /* margin-top: 25rem; */
  }.clientname1{
    margin-top: 55rem;
  }.clientname2{
    /* margin-bottom: 100%; */
    margin-left: 5rem;
    margin-top: 1rem;
  }form{
    margin-left: -5%;
  }
}
#main-container-client-name {
  display: block; /* Show the main container by default */
}

.ab {
  display: none; /* Hide the project container by default */
}
@media (max-width: 768px) {
  #main-container-clinet-name {
      display: none; /* Hide the main container on mobile screens */
  }.ab {
    display: block; /* Hide the project container by default */
  }

  
}
.spiral {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  overflow: hidden;
  transform: translate(-50%, -50%);
  z-index: 9999;
  animation: spiral 2s linear forwards;
}

.spiral div {
  position: absolute;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: spiralMotion 4s linear infinite;
}

@keyframes spiral {
  0% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

@keyframes spiralMotion {
  0% {
      top: 0%;
      left: 0%;
      opacity: 1;
  }
  100% {
      top: 100%;
      left: 100%;
      opacity: 0;
  }
}

/* Additional CSS for the loading animation */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  z-index: 9999;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border: 15px solid;
  border-top: 16px solid #FFC500;
  border-right: 16px solid white;
  border-bottom: 16px solid #FFC500;
  border-left: 16px solid white;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}.spiral div img {
  position: fixed;
  width: 80px; /* Set the width of the logo image */
  height: 80px; /* Set the height of the logo image */
  object-fit: contain; /* Ensure the image fits inside the container */
  border-radius: 50%; /* Apply a circular border radius */
}
.services1 {
 
  display: none; /* Hide the services1 items by default */

}.remove-item{
  display: block;
}.Project1{
  display: none;
}



.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;
}
.servicesfourth{
  margin-top: 3%;
  border-radius: 20px;
  background-color: #3cd476;
}.projectfirst{
  /* margin-top: 3%; */
  border-radius: 20px;
  background-color: darkcyan;
}
.projectsecond{
  margin-top: 3%;
  border-radius: 20px;
  background-color: coral;
}.services1, .Project1 {
  overflow-x: hidden;
  padding-left: 1%;
  display: none;
  text-decoration: none;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.services1.show, .Project1.show {
  display: block;
  opacity: 1;
  transform: translateX(0);
  overflow-x: hidden;
}

.services1:nth-child(2), .Project1:nth-child(2) {
  transition-delay: 0.1s;
}

.services1:nth-child(3), .Project1:nth-child(3) {
  transition-delay: 0.2s;
}

.services1:nth-child(4), .Project1:nth-child(4) {
  transition-delay: 0.3s;
}
.paragraph-2middle-font-page{
  margin-right: -30%;
}

.typing-text span:nth-child(1) { transform: rotate(-10deg); }
.typing-text span:nth-child(2) { transform: rotate(-5deg); }
.typing-text span:nth-child(3) { transform: rotate(0deg); }
.typing-text span:nth-child(4) { transform: rotate(5deg); }
.typing-text span:nth-child(5) { transform: rotate(10deg); }

.typing-text-line2 span:nth-child(1) { transform: rotate(-10deg); }
.typing-text-line2 span:nth-child(2) { transform: rotate(-5deg); }
.typing-text-line2 span:nth-child(3) { transform: rotate(0deg); }
.typing-text-line2 span:nth-child(4) { transform: rotate(5deg); }
.typing-text-line2 span:nth-child(5) { transform: rotate(10deg); }
.highlight {
  color: goldenrod;
  transform: scaleY(1);
  transform-origin: bottom;
}.servicesfifth{
  margin-top: 3%;
  border-radius: 20px;
  background-color: #edc124;
}@media (max-width: 480px) {
  #main-first-floating-text{
    /* text-align: center; */
/* margin-left: 8%; */
  }#first-floating-text{
    /* margin-left: 8%; */
    /* margin-top: -8%; */
  }
}.project3{
  margin-right: -100%;
  margin-top: 80%;
}.project1{
  margin-top: -6%;
}#main-second-name-client{
  margin-top: 25%;
  margin-right: -100%;
}@media (max-width: 480px) {
  .projectdesc{
    display: block;
  }#know-us-para-main-conatainer{
    margin-top: 45%;
  }
  .descproject-2{
    margin-top: -21rem;
    margin-bottom: 3%;
  }#exploreall-project{
    /* margin-top: 1%; */
  }#iknow-button-container{
    margin-top: -10%;
  }#start-our-our-univers{
    margin-top: -10%;
  }
}#container-project-desc-for-desk{
  display: flex;
  gap: 20%;
margin-top: -39rem;
  text-align: center;
  margin-left: 15%;
  margin-right: 10%;
  font-family: "Constantia Bold";
   color: aliceblue;
   font-size: 20px;
 }.project-desc-for-desk-2{
  margin-top: 25%;
  margin-left: 5rem;
  margin-right: -2rem;
  /* margin-right: 5%;
  margin-left: 5%; */
 }.project-desc-for-desk-1:hover{
  color: aqua;
cursor: pointer;
 }.project-desc-for-desk-2:hover{
  color: aqua;
cursor: pointer;
 }@media only screen and (max-width: 767px) {
  #container-project-desc-for-desk {
      display: none;
  }
}

@media only screen and (min-width: 768px) {
  #container-project-desc-for-desk {
      display: flex;
  }
}#second-destailes{
  margin-top: 5%;
  margin-left: -3%;
}
 #first-destailes{
margin-left: -3%;
 }/* Default: Hide the image-box */
 #main-container-image-box {
  display: none;
}

/* Media query for mobile devices */
@media (max-width: 767px) {
  #main-container-image-box {
    margin-top: 10%;
    align-items: center;
      display: block;
      margin-left: -10%;
        }#fakeimage-h3{
          /* align-items: center;
          justify-content: center; */
          margin-left: 12%;
        }#fakeimage-p{
          /* text-align: center; */
          margin-left: 15%;
          margin-right: 30%;
        }#gif-image{
         margin-left: 8%;
        }
}
.custom-alert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  z-index: 1000;
  animation: fadeInOut 0.5s ease-in-out;
}

.custom-alert-success {
  background-color: #4CAF50;
  color: #ffffff;
}

.custom-alert-error {
  background-color: #f44336;
  color: #ffffff;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}


.custom-ticker-wrappermp, .custom-ticker-wrapper-rtl {
  font-family: "Constantia Bold";
  font-size: 16pt;
  box-sizing: border-box;
  /* background-color: red; */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 85px; /* Increased height to fit images */
  overflow: hidden;
  cursor: pointer;
  margin-top: 5%;
}.custom-ticker-wrappermp{
  background-color: rgb(133, 12, 246);
}.custom-ticker-wrapper-rtl{
  background-color: rgb(78, 0, 123);
  
}

/* First panel (left to right) */
.custom-list-mp, .custom-list-mp-rtl {
  display: inline-block;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  position: absolute;
}

.custom-list-mp-item, .custom-list-mp-item-rtl {
  display: inline-block;
  padding-left: 50px;
}

.custom-list-mp-item img, .custom-list-mp-item-rtl img {
  width: 60px; /* Adjust image size */
  height: auto;
  padding-top: 20%;
  /* border-radius: 50%; */
  transition: transform 0.3s ease; /* For hover effect */
}

.custom-list-mp-item img:hover, .custom-list-mp-item-rtl img:hover {
  transform: scale(1.1); /* Hover effect */
}

@media (min-width: 1024px) and (max-width: 1440px) {
  .list-group-item.home-for-about:hover::before {
    color: #e74c3c; /* Red for HOME */
  }
  
  .list-group-item.about-us-for-about:hover::before {
    color: #3498db; /* Blue for ABOUT US */
  }
  
  .list-group-item.services-main-button:hover::before {
    color: #2ecc71; /* Green for SERVICES */
  }
  
  .list-group-item.Project-main-button:hover::before {
    color: #f39c12; /* Orange for PROJECT */
  }
  
  .list-group-item.articel-mm-main-button:hover::before {
    color: #e622c9; /* Purple for ARTICLES */
  }
  
  .list-group-item.new-requestfor-quote:hover::before {
    color: #1abc9c; /* Orange for REQUEST FOR QUOTE */
  }
  
  .requestfor-quote:nth-child(7):hover::before {
    color: #1abc9c; /* Teal for STAR OF OUR UNIVERSE */
  }
  
  .list-group-item.about-us-for-contact:hover::before {
    color: red; /* Violet for CONTACT US */
  }
  
  .list-group-item span {
    display: inline-block;
    transition: transform 0.6s ease;
    transform-origin: top;
  }
  
  .list-group-item:hover span {
    transform: rotateX(90deg);
  }
  
  .list-group-item::before {
    content: attr(data-text);
    cursor: pointer;
    font-size: 25px;
    position: absolute;
    color: #e74c3c; /* New color for flip effect */
    transform: rotateX(-90deg);
    transition: transform 0.6s ease;
  }
  
  .list-group-item:hover::before {
    transform: rotateX(0);
  }
  

  .navbar-only-scrol {
      position: fixed;
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-left: 10%;
    margin-top: 20px;
    margin-right: 10%;
    height:12%;
    z-index: 19;
    opacity: 0.9;
   width: 80%;
    background-color: rgb(3, 3, 252);
    border-radius: 50px;
  
    /* margin: 20px auto; */
  }
  
  .logo-container-scrool {
    flex-basis: 10%;
  }
  
  .logo-scrool {
      cursor: pointer;
    width: 50px;
    margin-left: 10%;
    height: 50px;
    border-radius: 50%;
    /* background-color: black; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
  }
  
  .nav-links-scrool {
      justify-content: center;
      align-items: center;
    display: flex;
    gap: 2rem;
    list-style-type: none;
  }
  
  .nav-links-scrool p {
      font-family: "Constantia Bold";
    color: white;
    padding-top: 2%;
    margin-left: -12%;
    font-weight: bolder;
    font-size: 1.7rem;
    transition: color 0.3s ease;
  }
  
  .nav-links-scrool p a:hover {
    color: white;
  }
  
  .cta-button-scrool{
    /* background-color: black; */
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 1rem;
  }
  
  .cta-button-scroolspan {
    margin-left: 10px;
    transition: margin-left 0.3s ease;
  }
  
  #img-new-scrool{
    width: 160%;
  
  } #corner-image-scrool {
    
          width: 4.5%;
          height: auto;
          position: fixed;
          margin-top: 0;
          right: 9%;
          z-index: 2; 
          animation: rotateClockwise 10s linear infinite; 
          cursor: pointer;
      }
      #corner-image-text-scrool {
        position: fixed;
        margin-top: 0;
          right: 11%;
          transform: translate(-50%, -50%);
          color: white;
          /* font-size: 65px; */
          font-size: 11px;
          font-weight: bold;
          text-align: center;
          z-index: 3; 
          cursor: pointer;
      }
  #new-navbar-butoon{
      border: none;
      background-color: white;
      color: navy;
      border-radius: 44px;
      padding: 10px 25px;
      font-size: 18px;
      font-weight: bold;
  }#new-navbar-butoon:hover{
      color: white;
      background-color: aqua;
  }
  }
  #newbellow-new-text-animation {
    background: linear-gradient(90deg, #ff007f, #00f5d4, #ff007f); /* Gradient background */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 5s ease-in-out infinite; /* Gradient animation */
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* Glowing effect */
  }
  
  @keyframes gradientMove {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  #submeean-heading{
  row-gap: 10px;
  /* column-gap: 35%; */
  /* gap: 30% */
  text-align: center;
  /* color: navy; */
  display: grid;
  margin-left: -125%;
  margin-right: -2%;
  /* text-decoration: none; */
  grid-template-columns: repeat(3,1fr);
}#submeean-heading li a{
  text-decoration: none;
  padding:0 20px;
  color: navy;
  background-color: white;
  border-radius: 25px;
}#submeean-heading li a:hover{
color: navy;
  /* color: navy; */
  background-color: aqua;
  border-radius: 25px;
}