@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;
  }
  
  @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");
  }@font-face {
    font-family: 'myFont';
    src: url('../buny1-webfont.woff2') format('woff2'),
         url('../buny1-webfont.woff') format('woff');
    font-display: swap;
  }
  
  html{
    scroll-behavior: smooth;
    overflow-x: hidden;
  }
      body {
        padding: 0;
        /* font-family: Arial, sans-serif; */
        /* background-image: url('../picture/background.png');
        background-size: cover; 
        background-repeat: no-repeat; 
        background-attachment: fixed; */
        /* background-color: #26186bcf; */
        /* font-family: "Constantia Bold"; */
        overflow-x: hidden;
        /* background: linear-gradient(135deg, rgba(17, 20, 59, 1) 0%, rgba(66, 17, 102, 1) 50%, rgba(76, 18, 252, 1) 100%); */
        background-size: cover; 
      background-repeat: no-repeat; 
      background-attachment: fixed;
        scroll-behavior: smooth;
      }
      /* Default background for larger screens (e.g., laptop) */
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) {
  body {
      background: linear-gradient(135deg, rgba(17, 20, 59, 1) 0%, rgba(66, 17, 102, 1) 50%, rgba(76, 18, 252, 1) 100%);
  }
}

  
      #text {
          font-size: 85px;
          font-weight: 1000;
          /* height: 10%; */
          /* margin-top: 20%; */
          position: relative;
          color: white;
          margin-left: -8%;
          /* margin-right: 35%; */
          text-align: center;
      }
  
      #mm {
          background-color: rgba(69, 89, 164, .5);
      }
  
      #logo {
        width: 150px;
        height: auto;
        position: fixed; /* Make the logo fixed */
        top: 10px; /* Adjust the top position as needed */
        left: 4%; /* Adjust the left position as needed */
        z-index: 2; /* Ensure logo is on top */
        cursor: pointer;
    }
  
      #leaf {
          width: 400px;
          height: auto;
          position: absolute;
          z-index: 1; /* Behind the logo */
          animation: wind 10s infinite alternate ease-in-out;
          transform-origin: top center;
          transform: rotate(180deg) scaleY(-1);
          margin-left: 10%;
          opacity: 0.5;
          
      }.leaf12{
        top: -65px;
      }
  
      #leaf1 {
        width: 400px;
        height: auto;
        margin-left: 5%;
        position: absolute;
        z-index: 1; /* Behind the logo */
        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; /* Ensure logo is on top */
          animation: rotateClockwise 10s linear infinite; /* Animation for rotation */
          cursor: pointer;
      }
  
      @keyframes rotateClockwise {
          from {
              transform: rotate(0deg);
          }
          to {
              transform: rotate(360deg);
          }
      }
  
      #corner-image-text {
        position: fixed;
        margin-top: 5%;
          right: 5%;
          transform: translate(-50%, -50%);
          color: white;
          /* font-size: 65px; */
          font-size: 18px;
          font-weight: bold;
          text-align: center;
          z-index: 3; /* Ensure text is above image */
          cursor: pointer;
      }
  
      #top-header {
          display: flex;
          align-items: center;
          /* margin-top: -10%; */
      }
  
      #main-header {
        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-size: 35px;
        margin: 10px 0;
        margin-left: 22%;
        margin-top: 8%;
        font-family: "CalgaryDemo";
        margin-bottom: 7%;
    }
    
    /* 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: myFont;
      }
  
      #floting-image {
        margin-top: 5%;
          margin-left: 38%;
      }#second-line-text{
        margin-left: -12%;
        /* margin-bottom: 15%; */
      }
      #paragraph {
        font-family: "Constantia Bold";
        text-align: center;
        padding: 0 50px;
        color: white;
        max-width: 800px;
        line-height: 1.5;
        margin-top: 4%;
        margin-left: 20%;
        margin-right: 14%;
        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{
      font-family: "Edwardian Script ITC";
          /* color: burlywood; */
          font-size: 25px;
          /* margin-top: 10%; */
         margin-left: 15%;
         margin-right: 18%;
         background-image: url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdmF0cTFxZ2NteTJ0c25zc2x4bzBsd3dzcnhvcmt6ZzVsM240cDQ1dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o72FblGCO2Ap94R3y/giphy.gif);
         background-size: 45px;
         color: transparent;
         -moz-background-clip: text;
         -webkit-background-clip: text;
        
         /* text-transform: uppercase; */
         opacity: 0; /* Initially hide the paragraph */
        animation: flyIn 1s forwards; /* Apply animation */
        font-family: "CalgaryDemo";
      } #paragraph-middle12{
        /* font-family: "Edwardian Script ITC"; */
            color: burlywood;
            font-size: 54.943px;
            margin-top: -2%;
           margin-left: 15%;
           opacity: 0; /* Initially hide the paragraph */
          animation: flyIn 1s forwards; /* Apply animation */
          font-family: "Constantia Bold";
        }.bellow-paragraph-middle12{
          color: burlywood;
          font-size: 45px;
          margin-top: 15%;
         margin-left: 10%;
         opacity: 0; /* Initially hide the paragraph */
        animation: flyIn 1s forwards; /* Apply animation */
        font-family: "Constantia Bold";
        }
        #paragraph-middle123{
          /* font-family: "Edwardian Script ITC"; */
              color: burlywood;
              font-size: 38px;
              margin-top: 15%;
             margin-left: 15%;
             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";
          }
        .know-us{
        font-family: "Auralyess Free Trial";
          margin-left: 20%;
          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{
          color: white;
          font-size: 27px;
          margin-top: -2%;
         margin-left: 20%;
      }.paragraph-2middle{
        font-family: "Constantia Bold";
          color: aqua;
          font-size: 18px;
          margin-right: 18%;
         margin-left: 20%;
      }#paragraph-2middle-h6{
        font-family: "Constantia Bold";
        color: aqua;
        font-size: 32px;
        /* margin-right: 40%; */
       margin-left: 20%;
      }.bhhhhhhh{
        font-family: "Constantia Bold";
        color: aqua;
        font-size: 32px;
        /* margin-right: 40%; */
       margin-left: 20%;
      }.first-overview-part-para{
        font-family: "Constantia Bold";
        color: burlywood;
        margin-right: -100%;
        /* font-size: 35px; */
        
      }.belloevideo-part{
        color: white;
        margin-top: 5%;
        /* margin-left: 20%; */
      }.overview{
        font-family: "Constantia Bold";
        margin-left: 20%;
      }.paragraph-2middle-withtick{
        color: white;
        font-size: 18px;
        margin-right: 25%;
        margin-left: 1%;
        /* margin-left: 8%; */
      }
      .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;
    }#floting-image{
    margin-left: 40%;
    margin-top: 15%;
  }#first-line-text{
    margin-left: 5%;
  }
      #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: 5%;
          font-size: 20px;
        }
      
        .know-us {
          margin-left: 5%;
          font-size: 30px;
        }
      
        #para {
          margin-left: 5%;
          font-size: 20px;
        }
      
        .belloevideo-part {
          margin-top: 18%;
          margin-left: -95%;
          margin-right: 5%;
          font-size: 16px;
        }#heading-portal-number{
          margin-left: -10%;
          font-size: 15px;
          margin-bottom: 20%;
          
        }.third-belloevideo-par{
          margin-top: 30%;
          margin-left: -30%;
        }#main-tickmark-container{
          margin-top: -5%;
        }
        #side-text-project{
          display: none;
        }
        .project-image-first{
          display: none;
        }#paragraph-2middle-h6{
          font-size: 20px;
          margin-top: 15%;
          margin-right: 15%;
        }
      
        .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) {
  
  }#bellow-footer{
    font-family: "Auralyess Free Trial";
      color: burlywood;
      font-size: 45px;
      margin-top: 23%;
      margin-left: 25%;
  }.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{
    font-family: "CalgaryDemo";
    font-size: 25px;
    color: white;
    margin-left: 15%;
    margin-right: 15%;
    /* 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;
  }#text-bellow-part{
    font-family: "Constantia Bold";
    font-size: 35px;
    color: aqua;
    margin-right: 15%;
    margin-left: 15%;
  }
  #bellow-part-footer{
    font-family: "CalgaryDemo";
    font-size: 35px;
    color: aqua;
    margin-right: 1%;
    margin-left: 14%;
    margin-top: 2%;
  }.trust{
    font-family: "Constantia Bold";
    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: "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%;
  }
  
  /* 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%;}
  } .footer {
    background-color: #22023b;
    color: #fff;
    padding: 50px 0;
    margin-top: 10%;
  }
  
  .footer-containerers {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #footer-logo{
    margin-left: -4%;
  }
  .logo-info,
  .quick-links,
  .address,
  .social-media,
  .cta-buttons {
    flex-basis: 25%;
    margin-bottom: 30px;
  }.quick-links{
    margin-left: -40%;
    margin-top: 17%;
  }.social-media{
    position: relative;
    left: 78%;
    /* top: -50%; */
    margin-top: -12%;
  }
  
  .quick-links ul {
    list-style: none;
    padding: 0;
    margin-top: 10%;
    margin-left: 20%;
  }.quick-links h3{
    margin-left: 18%;
    font-size: 25px;
  }
  
  .quick-links ul li {
    margin-bottom: 10px;
  }.quick-links ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    transition: color 0.3s ease;
  }.contact-info {
    margin-top: 30px;
}.quick-links ul li a:hover {
    color: #ff6600; /* Change color on hover */
  }
  
  .social-media ul {
    list-style: none;
    padding: 0;
    display: flex;
  }
  
  .social-media ul li {
    margin-right: 10px;
  }
  
  .cta-buttons button {
    background-color: rgb(179, 179, 45);
    color: black;
    border: none;
    padding: 20px 60px;
    cursor: pointer;
    margin-right: 5px;
    margin-left: 8%;
  }
  
  .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;
  }
  
  .scroll-to-top1 {
    z-index: 2;
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* cursor: pointer; */
  }
  .email{
    margin-right: 2%;
  }
  
  
  .copyright {
   
    height: 90px;
    background-color: #1c0fa6;
    color: white;
    margin-top: 20px;
  }#copyright-text {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    margin-right: 42%;
    margin-left: 35%;
    height: 100%; /* Ensure the container has a defined height */
  }
  #footer-logo{
  width: 30%;
  }.address{
    margin-top: -132%;
    margin-left: 100%;
    margin-right: -100%;
   }.cta-buttons{
    margin-left: 10%;
   }#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: 90%;
  }
  .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-footer{
      font-size: 30px;
      margin-left: 10%;
      margin-right: 5%;
    }#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: 15%; /* 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%;
  }.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: 15%;
    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 {
    writing-mode: vertical-rl; /* Set vertical writing mode */
    font-size: 18px;
    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%; */
    position: relative;
    top: 35%;
    left: 75%;
  }#side-text-project-second{
    writing-mode: vertical-rl; /* Set vertical writing mode */
    /* font-size: 18px; */
    color: whitesmoke;
    transform: rotate(180deg); /* Rotate the text 180 degrees */
    transform-origin: top left; /* Set the rotation origin to the top left corner */
    /* margin-b: 20%; */
    position: relative;
    /* top: -2%; */
    left: 75%;
  }
   .projectdesc{
    font-family: "Constantia Bold";
     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%;
    }
  
   
  }
  .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: "Constantia Bold";
    margin-left: -35%;
     margin-right: -150%;
    /* margin-left: 40%; */ 
    color: aqua;
    font-size: 22px;
  }#sec{
    font-family: "Constantia Bold";
    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: "Constantia Bold";
    margin-top: 5%;
   margin-left: 8%;
  }#fakeimage-p{
    font-family: "Constantia Bold";
    margin-left: 15%;
    text-align: center;
    margin-right: 11%;
  }.second-articel{
    margin-left: 25%;
  }.card-text{
    
    font-family: "Constantia Bold";
    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: "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: 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: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px; /* Add margin between sections */
  }
  .scroller-inner {
    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%; */
    } #text {
      font-size: 35px;
      font-weight: 800;
      margin-left: -35%;
  }.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%;
    }
    #side-text-project {
      margin: 0 auto;
      text-align: center;
      transform: none;
      margin-top: 5%;
      margin-bottom: 3%;
      margin-right: 0;
      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%;
    }#Established-img{
      width: 3%;
   height: auto;
   /* margin-left: -10%; */
  
    }.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 */
    }
  
    .number {
      display: none;
    }#text-bellow-part{
      font-size: 15px;
      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%);
    }
  }.list-group{
  margin-left: 18rem;
  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; /* Change color to white */
        font-weight: bolder;
        font-size: 2rem;
        margin-right: 10px;
    }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{
        text-align: right;
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Make text bolder */
  color: #deb007; /* Set color to dark golden */
  font-size: 25px;
  }.list-group-item{
  background-color: transparent;
  margin-top: 2%;
  border: none;
  }.offcanvas-title{
  color: white;
  }.list-group-item>a:hover{
  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;
  /* flex-direction: column; */
  /* align-items: center; */
  }
  @media (max-width: 768px) {
  .rotatingText {
    margin-left: -5%;
    margin-top: 140%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    
  }
  .list-group-item>a{
    font-size: 22px;
    margin-left: -5%;
  }.list-group{
    margin-left: -50%;
  }.rotatingText-adjective{
    font-size: 20px;
  }
  .offcanvas{
        width: 100%;
      }.list-group{
  margin-left: 5%;
  }.hrline-about{
  display: none;
  }
  }.requestfor-quote{
  margin-left: -47%;
  margin-right: -20%;
  }
   .talk-paert{
    font-family: "Constantia Bold";
    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%;
  }#bellow-footer{
    margin-left: 5%;
  }
  
  .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 {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    color: white;
    font-weight: bold;
  }
  
  @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: -10%; */
    font-size: 35px;
    color: aqua;
    margin-left: 15%;
    font-family: "Constantia Bold";
  }#w{
    margin-top: 5%;
    width: 8%;
    margin-left: 15%;
  }#main-Established{
    font-family: "Constantia Bold";
    display: flex;
    margin-top: 1%;
    /* gap: 20%; */
  
  }#Establisheded{
    margin-left: 15%;
    margin-right: 50%;
    color: white;
    font-size: 18px;
  }#Established-img{
   width: 35%;
   height: auto;
   margin-left: -40%;
  }#Establisheded-bellow{
    font-family: "Constantia Bold";
    margin-left: 15%;
    margin-right: 20%;
    color: white;
    font-size: 18px;
    margin-top: 2%;
  }
  .line-container-animation {
    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;
      }
      @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%;
      }.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: 60%; 
      margin-bottom: 10px; 
      margin-right: -60%;
    }
  
  
  
    .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: -70%; /* 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: 65%;
      /* 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: 110px;
      height: 110px;
      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: 90px;
      height: 90px;
      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: 12px;
      color: white;
      font-weight: bold;
    }
    
      }#right-left-para {
        margin-left: 20%;
        color: white;
        font-size: 25px;
        font-weight: bolder;
        font-family: "Constantia Bold";
      }
    
      .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: "Constantia Bold";
      }
      
      .second-left-right-para {
        margin-left: 5rem;
      }
      
      #right-left-para p {
        opacity: 0; 
        transform: translateX(-100%); 
      }
      
  
      @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: "Constantia Bold";
        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: 5%; /* Adjust left margin */
          margin-top: 5%; /* 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: "Constantia Bold";
          }.lower-gif-services-img1{
            /* margin-top: 5%; */
            margin-left: 28%;
          }.hospital-img{
            margin-left: -10%;
          }#arrowpath123{
            width: 20%;
  
          }#divarrow-img123{
            margin-left: -18%;
          }
      
        
      
        
      
        .lower-gif-services-para {
          font-size: 20px; /* Reduce font size for paragraph */
        }.bellow-paragraph-middle12{
          color: burlywood;
          font-size: 30px;
          margin-top: 10%;
         margin-left: 7%;
         margin-right: 5%;
         opacity: 0; /* Initially hide the paragraph */
        animation: flyIn 1s forwards; /* Apply animation */
        font-family: "Constantia Bold";
        }
      }.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: 80%;
             height: auto;
             margin-left: 5%;
            }
          
            /* Additional styles as needed for smaller screens */
          }.container-desin {
            display: flex;
            /* flex-direction: column; */
            align-items: center;
            gap: 40px;
            color: white;
            margin-left: 10px;
          }.head4{
            margin-right: 30%;
          }
          
          .item {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            position: relative;
          }
          
          .text {
            margin-left: 20px;
            margin-right: 20px;
          }
          
          .containerline {
            position: relative;
            width: 200px; /* Example width */
            height: 120px; /* Example height */
          }
          
          .lineli7 {
            margin-top: -46%;
            font-size: 25px;
            position: absolute;
            color: white;
           right:-470%;
           writing-mode: vertical-rl;
          
          }
          .container-desin{
            margin-top: 10%;
          }.heading {
            font-size: 94px; /* Adjust as needed */
  
        }.num2{
            margin-left: -100%;
            margin-right: -35%;
            /* margin-right: 5%; */
            font-size: 25px;
          }.num4{
            color: white;
            /* margin-top: -13%; */
            margin-right: -25%;
            margin-left: -80%;
            font-size: 25px;
          }.num3{
            margin-left: -80%;
            font-size: 25px;
            margin-right: -70%;
            /* margin-left: -10%; */
            /* margin-top: 0.1%; */
          }.nu1,.nu5,.nu7{
              font-size: 25px;
          }.head1{
          margin-top:-70% ;
          }.head2,.head4{
              margin-top: 55%;
          }.he7{
            margin-left: 86%;
            color: wheat;
            margin-top: -6%;
          }
          .nu1{
            /* margin-right: -120%; */
            margin-left: -140%;
          }.nu5{
            margin-left: -79%;
            margin-right: -20%;
          }.nu6{
            margin-left: -550%;
          }.he12{
            font-size: 15px;
            margin-top: -7%;
            margin-left: 15%;
          }.he5{
            margin-left: -40%;
          }.education{
            margin-left: -10%;
          }
          
          
          
          
          
          .container-desin123 {
            display: flex;
            margin-top: 50%;
            /* flex-direction: column; */
            align-items: center;
            gap: 40px;
            color: white;
            margin-left: 20px;
          }.head4123{
            /* margin-right: 30%; */
            margin-left: 60%;
            margin-top: -20%;
          }
          
          .item123 {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            position: relative;
          }
          
          .text123 {
            margin-left: 20px;
            margin-right: 20px;
          }
          
          
          .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: 35%;
            margin-right: -105%;
            margin-top: -23%;
            font-size: 25px;
          }.num3123{
            font-size: 25px;
            margin-left: -60%;
            margin-right: -95%;
            margin-top: -20%;
          }.nu1123,.nu5123{
              font-size: 25px;
          }.head1123{
          margin-top:-45% ;
          margin-left: 100%;
          }.head2123,.head4123{
              margin-top: -5%;
          }.he9{
            margin-top: -6%;
            margin-left: 30%;
            color: white;
          }.he1{
            margin-right: 0%;
            color: white;
            /* margin-right: 60%; */
          }.head2,.head4{
            margin-left: -35%;
          }.head3{
            margin-left: -35%;
          }.nu5123{
            margin-top: -40%;
            margin-left: 7%;
            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: 30%;
            color: white;
          }.num-new1{
            margin-top: -10%;
            margin-left: 5%;
            font-size: 25px;
          }.container-new{
            margin-top: 10%;
          }.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) {
          .he-new1{
            /* margin-right: -15%; */
            margin-left: 10rem;
            margin-top: 20%;
          }.he-new2{
            margin-left: 2rem;
          }.container-new{
                      display: flex;
                    }
          .he-new3{
            margin-left: -6rem;
          }.he-new4{
            margin-left: 2rem;
          }.he-new5{
            margin-left: -7rem;
          }.he-new6{
            margin-left: 2rem;
          }.he-new7{
            /* margin-top: -70%; */
            margin-left: -7rem;
          
          }.nu-new1{
            margin-top: -6rem;
            margin-left: 1.7rem;
          }.nu-new2{
            margin-top: -5rem;
            margin-left: 6rem;
          }.nu-new3{
            margin-top: -5rem;
           
          }.nu-new4{
            margin-top: -5rem;
            margin-left: 9rem;
          }.nu-new5{
            margin-top: -5rem;
            margin-left: 1rem;
          }
          .nu-new6{
            margin-top: -5rem;
            margin-left: 5rem;
          }.nu-new7{
            margin-top: -5rem;
            margin-left: 1rem;
          }.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%;
                }
            }.underline1{
                margin-left: -18%;
            }#top-header-project-line{
              margin-top: 10%;
                display: flex;
                gap: 20%;
                margin-left: 20%;
            }
  
   
  
            .services1 {
              display: none; /* Hide the services1 items by default */
            
            }.remove-item{
              display: block;
            }.Project1{
              display: none;
            }.img-top-detaling-img{
              width: 70%;
              margin-left: 16%;
              margin-top: 10%;
            }#img-para-heading-project{
              margin-top: 10%;
              display: flex;
              margin-left: 18%;
            }#heading-portal-number{
              color: aqua;
              font-family: "Constantia Bold";
              text-align: center;
            }.number-1{
              font-size: 45px;
              font-weight: bolder;
            }#main-tickmark-container{
              font-family: "Constantia Bold";
              margin-top: -14%;
              margin-left: 5%;
            }#last-main-top-img-para-zend-img{
              margin-left: 15%;
              margin-top: 5%;
              display: flex;
            }#zend-img{
              width: 220px;
            }#php-comapny-name{
              font-family: "Constantia Bold";
              margin-right: -100%;
              font-size: 20px;
              color: grey;
              font-weight: bold;
              position: relative;
              top: 15%;

            }.image-wrapper{
              display: flex;
              gap: 20%;
              margin-left: 15%;
              margin-top: 5%;
            }.otp-para{
              font-family: "Constantia Bold";
              color: white;
              margin-left: 8%;
              font-size: 25px;
              margin-right: -100%;
              margin-top: 3%;
            }
            
  
  
            @media screen and (max-width: 600px) {
              .services-Technology{
                margin-left: 4%;
                /* font-size: 30px; */
               }#last-main-top-img-para-zend-img{
                margin-left: -3%;
              }#php-comapny-name{
                font-family: "Constantia Bold";
                margin-right: -100%;
                font-size: 25px;
                color: grey;
                font-weight: bold;
                position: relative;
                top: 7%;
  
              }#Benefits-paragraph-2middle-h6{
                /* margin-top: 70%; */
              }.bhhhhhhh{
              margin-top: 150%;
              margin-left: -220%;
              }.otp-para{
                text-align: center;
                color: white;
                margin-left: -22%;
                font-size: 15px;
                margin-right: 7%;
                margin-top: 3%;
              }
              
            }@media screen and (max-width: 600px) {
              .social-media{
                position: relative;
                left: -8%;
                /* top: -50%; */
                margin-top: 5rem;
              }.cta-buttons {
                margin-right: 20%;
                margin-left: 10%;
                }.address{
                  margin-top: -16rem;
                  margin-left: 13rem;
                 } .quick-links{
                  margin-top: 5rem;
                }.quick-links ul {
                font-size: 12px;
                margin-left: 10rem;
              }.quick-links h3{
                margin-left: 9rem;
                font-size: 22px;
              }.contact-info{
                font-size: 10.5px;
                font-weight: bolder;
              }
              
                #lorem-text{
                  margin-right: -200%;
                }.cta-buttons button {
                  margin-top: 5rem;
                  padding: 13px 35px; /* Adjust padding for smaller screens */
                  margin-left: -20%;
                }.copyright{
                  margin-left: -85%;
                  margin-right: -100%;
                }
            } .project-image{
              width: 400px;
              /* margin-top: -23rem; */
              /* margin-bottom: 50%; */
            }.project-image:hover{
             transform: scale(1.5); 
             cursor: pointer;
             /* color: #00FFFF; */
            }.otp-para:hover{
              transform: scale(1.01); 
              cursor: pointer;
             color: #00FFFF;
            }.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;
            }.services1, .Project1 {
              display: none;
              padding-left: 30%;
              opacity: 0;
              transform: translateX(100%);
              transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            }
            
            .services1.show, .Project1.show {
              display: block;
              padding-left: 30%;
              opacity: 1;
              transform: translateX(0);
            }
            
            .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;
            }
            .servicesfourth{
              margin-top: 3%;
              border-radius: 20px;
              background-color: #3cd476;
            }.servicesfifth{
              margin-top: 3%;
              border-radius: 20px;
              background-color: #edc124;
            } @media (max-width: 480px) {
              #php-comapny-name{
                margin-left: -35%;
                font-size: 18px;
                margin-top: 18%;
              }.project-image {
                width: 100%;
                margin-left: -8%;
                margin-top: 10%;
              }.image-wrapper{
                display: block;
                
              }.otp-para{
                font-size: 25px;
                margin-left: -1%;
                margin-right: 15%;
              }.belloevideo-part-third{
                margin-left: -200%;
                margin-right: 85%;
               margin-top: 50%;
              }.services{
                font-size: 30px;
                margin-left: 12%;
                margin-bottom: 10%;
               }
            
            }