@import url("https://fonts.googleapis.com/css2?family=Metrophobic&family=Quicksand&display=swap");
      @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
      :root {
        --main-first-color: #ffc13e;
        --main-second-color: #14212a;
        --main-third-color: black;
        --main-heading-family: "Metrophobic", sans-serif;
        --main-pragraf-family: "Metrophobic", sans-serif;
      }
      * {
        margin: 0%;
        padding: 0%;
        box-sizing: border-box;
        transition: all 0.3s ease;
        user-select: none;
      
      }
      a {
        text-decoration: none;
      }
      h1 {
        font-size: 5rem;
      }
      h2 {
        font-size: 2.6rem;
        font-family: var(--main-heading-family);
      }
      h3 {
        font-size: 1.2rem;
        font-family: var(--main-heading-family);
      }
      h4 {
        font-size: 1.3rem;
        font-family: var(--main-heading-family);
      }
      h5 {
        font-size: 1rem;
          line-height: 25px;
      }
      h6 {
        font-size: 0.9rem;
      }
         h8 {
       font-family: var(--main-heading-family);
      }
      p {
        font-size: 1rem;
          line-height: 25px;
      }
      img {
        max-width: 100%;
        fill: green;
      }

      .btn {
        position: relative;
        padding: 1rem 2rem;
        font-size: 1rem;
        font-weight: 600;

        background: none;
        border: 2px solid var(--main-first-color);
        border-radius: 8px;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.3s ease;
      }

      .liquid {
        background: linear-gradient(var(--main-first-color) 0 0) no-repeat
          calc(200% - var(--p, 0%)) 100% / 200% var(--p, 0.2em);
        transition: 0.3s var(--t, 0s),
          background-position 0.3s calc(0.3s - var(--t, 0s));
      }

      .liquid:hover {
        --p: 100%;
        --t: 0.3s;
        color: #fff;
      }

      html {
        scroll-behavior: smooth;
        font-size: 16px;
        width: 100%;
        max-width: 2500px;
        margin: 0px auto;
      }
      header {
        position: sticky;
        top: 0px;
        left: 0px;
        width: 100%;
        background-color: white;
        height: 70px;
        width: 100%;
        z-index: 1000;
      }
      header nav {
        display: flex;
        justify-content: space-between;

        align-items: center;
        height: 100%;
        padding: 0% 2%;
      }
      header nav div {
        text-align: center;

        font-family: var(--main-heading-family);
      }
      table {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.364);
        font-family: var(--main-heading-family);
        width: 90%;
        margin: 20px auto;
        border-collapse: collapse;
      }
      .servie-package {
        padding: 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        justify-items: center;
      }
      .servie-package .package-box {
        font-family: var(--main-heading-family);
        border: 1px solid var(--main-second-color);
display: grid;
align-content: space-between;
        border-radius: 10px;
        width: 100%;
        max-width: 350px;
        padding: 20px;
        line-height: 35px;
        margin: 20px 0px;
        background-color: white;
      }
      .servie-package .package-box:hover {
        border: 1px solid var(--main-second-color);
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.471);
      }

      table tr {
        cursor: pointer;
        outline: 1px solid black;
      }

      table tr td {
        outline: 1px solid black;
        padding: 5px 15px;
      }
      table tr td button {
        width: 100%;
      }
      table tr th {
        background-color: var(--main-second-color);
        color: white;
        padding: 15px;
        text-align: start;
      }

      header nav a {
        text-decoration: none;
        color: black;
        font-size: 1.1rem;
        margin: 0% 1%;
        font-family: var(--main-heading-family);
      }
      #NavLinkDiv {
        height: 100%;

        display: flex;
        align-items: center;
      }

      #NavLinkDiv a {
        cursor: pointer;
        display: block;
        height: 100%;
        margin: 0px 10px;

        position: relative;
        display: flex;
        align-items: center;
        color: #000000;
        text-transform: uppercase;

        transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
      }

      /* Style 5: :before and :after element's width increased from 0 to 100% */
      /* Before element from right side and agter element from left side */

      #NavLinkDiv a:after,
      #NavLinkDiv a:before {
        content: "";
        position: absolute;
        width: 0%;
        display: block;
        height: 1px;
        transition: all 0.3s ease;
        margin-top: 2px;
        transition: all 300ms ease-in;
      }

      #NavLinkDiv a:after {
        bottom: 25%;
        left: 0;
      }

      #NavLinkDiv a:before {
        top: 25%;
        right: 0;
      }

      #NavLinkDiv a:hover::after {
        width: 100%;
        height: 2px;
        bottom: 25%;
        background-color: var(--main-first-color);
      }
      #NavLinkDiv a:hover::before {
        width: 100%;
        height: 2px;
        top: 25%;
        background-color: var(--main-first-color);
      }
   
      #homediv {
        display: grid;
        grid-template-columns: 40% 1fr;
        align-items: center;
        justify-items: center;

        min-height: 90vh;
        max-height: 900px;
        background-color: #edf0f5;
      }
      #homedivcontant {
        padding: 25px;
        overflow: hidden;
        animation: homecontantanime 2s ease;
      }
      @keyframes homecontantanime {
        from {
          opacity: 0;
          transform: translateY(200px);
        }
        to {
          opacity: 1;
          transform: translateY(0px);
        }
      }
      #homedivcontant section {
        height: 100%;
      }
      #homedivcontant section * {
        margin: 10px 0px;
      }
      #homedivcontant h5 {
        font-family: var(--main-heading-family);
        border-left: 4px solid var(--main-first-color);
        padding: 0px 4px;
      }
      #homedivcontant h1 {
        font-family: var(--main-heading-family);
      }
      #homedivcontant p {
        font-family: var(--main-heading-family);
        line-height: 25px;
      }
      #homedivImage {
        width: 100%;
        height: 100%;
      
        overflow: hidden;

        object-fit: cover;
        display: grid;
        align-items: center;
      }
      #homedivImage img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .social-links-div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 230px;
        margin-top: 20px;
      }
      .social-links-div a {
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.217);
        padding: 8px;
        border-radius: 50%;
        width: 43px;
        height: 43px;
        background-color: white;
        border-radius: 50%;
      }
      .social-links-div a:hover {
        background-color: var(--main-first-color);
      }
      button {
        display: inline-flex;
        align-items: center;
        justify-content: space-evenly;
        text-align: center;
        padding: 3% 4%;
        font-family: var(--main-heading-family);
        font-size: 1rem;
        border: none;
        height: auto;
        min-width: 90px;
        border-radius: 4px;
        background-color: var(--main-first-color);
        font-weight: bold;
        cursor: pointer;
        margin: 8px 0px;
      }
      button:active {
        transform: scale(0.9);
      }

      #GrowthDiv {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        width: 90%;
        margin: 0% auto;
        justify-items: center;
      }
      #GrowthDiv div {
        display: grid;
        margin: 10px auto;
        align-items: center;
        grid-template-columns: 50% 50%;

        font-family: var(--main-heading-family);
        width: 90%;
        padding: 10px 3%;
        border-radius: 10px;
        cursor: pointer;
        border: 1px solid #0000002f;
      }
      #GrowthDiv div img {
        width: 60%;
      }
      #Aboutdiv {
        display: grid;
        grid-template-columns: 50% 50%;
        padding: 3% 0%;
        width: 90%;
        margin: 0px auto;
      }
      #Aboutdiv h5 {
        font-family: var(--main-heading-family);
        border-left: 4px solid var(--main-first-color);
        padding: 2%;
      }
      #Aboutdiv h3 {
        font-family: var(--main-heading-family);

        padding: 2% 0%;
      }
      #Aboutdiv p {
        font-family: var(--main-pragraf-family);

        padding: 2% 0%;
      }
      #Aboutdiv ul li {
        font-family: var(--main-heading-family);
        padding: 1.4% 0%;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
      }
      #Aboutdiv ul li img {
        width: 2rem;
      }
      #Aboutdiv img {
        width: 95%;
        border-radius: 10px;
      }
      #WorkProcess {
        background-color: var(--main-second-color);
        padding: 3% 0%;
        text-align: center;
      }
      #WorkProcess h2 {
        color: white;
        font-family: var(--main-heading-family);
      }
      #WorkProcess h8 {
        color: var(--main-first-color);
        font-family: var(--main-heading-family);
      }
      #WorkProcess #WorkedDiv {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        justify-items: center;
        padding: 1% 0%;
        width: 90%;
        margin: 0% auto;
      }
      #WorkProcess #WorkedDiv div {
        width: 90%;
        text-align: left;
        margin: 6% 0%;
      }
      #WorkProcess #WorkedDiv div h4 {
        color: white;
        font-family: var(--main-heading-family);
        padding: 3% 0%;
      }
      #WorkProcess #WorkedDiv div p {
        color: white;
        font-family: var(--main-heading-family);
        padding: 2% 0%;
      }
      #WorkProcess #WorkedDiv div img {
        width: 100%;
        border-radius: 5px;
      }
      #WorkedSecondiv {
        transform: translateY(30px);
      }
      #WorkedSecondiv img {
        aspect-ratio: 10/8;
      }

      #OurServices {
        text-align: center;
        padding: 3% 0%;
      }
      #OurServices section {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        width: 90%;
        margin: 0% auto;
        justify-items: center;
      }
      #OurServices section div {
        width: 95%;
        aspect-ratio: 4/3;

        padding: 3%;
        display: grid;
        justify-items: center;
        align-items: center;
        margin: 2% 0%;
        border: 1px solid #00000036;
        border-radius: 10px;
      }
      #OurServices section div:hover {
        border-top: 5px solid var(--main-first-color);
        border-bottom: 5px solid var(--main-first-color);
      }
      #OurServices section div h4 {
        font-weight: bolder;
        font-family: var(--main-heading-family);
      }
      #OurServices section div p {
        font-family: var(--main-pragraf-family);
      }
      #OurServices section div i {
        width: 15%;
        border: 3px double var(--main-first-color);
        color: var(--main-first-color);
        aspect-ratio: 3/3;
        border-radius: 50%;
        display: grid;
        align-items: center;
        justify-items: center;
      }
      #OurServices section div button {
        width: 80%;
      }
      #OurServices section div a {
        width: 100%;
      }

      .autoShow{
        width: 30px;
animation: text-appear both;
animation-timeline: view();
animation-range: entry 10% cover 100vh;
}
      #project-div {
      
        text-align: center;
        padding: 0% 5%;
        margin-bottom: 4%;
      }
      #project-div h5 {
        font-family: var(--main-heading-family);
      }
      #project-div section {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        padding: 3% 0%;
        justify-items: center;
      }
      #project-div section div {
        position: sticky;
        top: 130px;
        text-align: center;
        border: 1px solid rgba(0, 0, 0, 0.267);
        width: 93%;
        padding: 2% 3%;
        margin: 3% 0%;
        border-radius: 10px;
background-color: white;
        cursor: pointer;
      }

      #project-div section div h4 {
        font-weight: bold;
        font-family: var(--main-heading-family);
      }
      #project-div section div p {
        font-family: var(--main-pragraf-family);
      }
      #project-div section div img {
        width: 100%;
        aspect-ratio: 16/9;
        border: 1px solid rgba(0, 0, 0, 0.295);
        border-radius: 5px;
      }
      .project-select-div {
        display: flex;
        justify-content: center;
        position: sticky;
        top: 30px;
      }
      .project-select-div .select-button {
        font-family: var(--main-heading-family);
        margin: 20px;
        padding: 20px;

        cursor: pointer;
      }
      .project-select-div .select-button.active {
        border-bottom: 4px solid #ed8f02;
      }


      #CounterDiv {
        background-color: var(--main-second-color);
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        padding: 2% 4%;
      }
      #CounterDiv div {
        color: white;
        display: grid;
        align-items: center;
justify-items: center;
text-align: center;
        font-family: var(--main-heading-family);
        padding: 2% 0%;
      }
      #CounterDiv div img {
        width: 100%;
        max-width: 70px;
      }

      footer {
        background-color: var(--main-second-color);
        padding: 4%;
      }
      #FooterTopdiv section {
        background-color: white;
        padding: 8px 3%;
        display: grid;
        grid-template-columns: 60% 40%;
        align-items: center;
        justify-items: center;
        border-radius: 10px;
        box-shadow: 1px -3px 3px rgba(0, 0, 0, 0.233);
        transform: translateY(-120px);
      }
      #FooterTopdiv section span h3 {
        font-family: var(--main-heading-family);
        font-weight: bolder;
        padding: 2% 0%;
      }
      #FooterTopdiv section span p {
        font-family: var(--main-pragraf-family);

        padding: 2% 0%;
      }
      #FooterTopdiv section img {
        width: 100%;
        max-width: 270px;
      }
      footer #FooterMiddleDiv {
        display: grid;
        grid-template-columns: 30% 40% 30%;
        justify-items: center;
        width: 94%;
        margin: 0% auto;
        color: white;
        font-family: var(--main-heading-family);
      }
      footer #FooterMiddleDiv span {
        margin: 3% 0%;
      }
      footer .FooterMiddlespan1 a i {
        font-size: 1.5rem;
        color: white;
        background-color: rgb(77, 77, 77);
        padding: 2% 2.5%;
        aspect-ratio: 3/3;
        border-radius: 50%;
      }

      footer .footerlinkes {
        width: 90%;
        display: grid;
        grid-template-columns: 50% 50%;
        justify-items: center;
      }
      footer .footerlinkes div a {
        display: block;
        text-decoration: none;
        color: white;
        font-family: var(--main-heading-family);
        margin: 3% 0%;
      }
      footer .FooterMiddlespan3 {
        width: 100%;
      }
      footer .FooterMiddlespan3 table {
        width: 100%;
      }
      footer .FooterMiddlespan3 input {
        width: 100%;
        height: 40px;
        border-radius: 5px;
        padding: 4% 10px;
        border: none;
        margin: 1% 0%;
        font-size: 1rem;
      }
      footer .FooterMiddlespan3 input[type="button"] {
        cursor: pointer;
        color: rgb(0, 0, 0);
        font-weight: 700;
        letter-spacing: 0.5px;
        background-color: var(--main-first-color);
      }
      footer #FooterDownDiv {
        width: 100%;
        display: grid;
        grid-template-columns: 50% 50%;
      }
      footer #FooterDown_termsDiv {
        text-align: end;
      }
      footer #FooterDownDiv div a {
        color: white;
        text-decoration: none;
        font-family: var(--main-heading-family);
        font-size: 1rem;
        margin: 1% 0%;
      }
      @media (max-width: 4000px) {
        html {
          scroll-behavior: smooth;
          font-size: 30px;
        }
      }
      @media (max-width: 3000px) {
        html {
          font-size: 25px;
        }
      }
      @media (max-width: 2000px) {
        html {
          font-size: 16px;
        }
      }
      @media (max-width: 1500px) {
        html {
          font-size: 15px;
        }
      }
      @media (max-width: 1200px) {
        html {
          font-size: 12px;
        }
             #homediv {
      min-height:100%;
   
      }
      }
      @media (max-width: 1000px) {
        html {
          font-size: 11px;
        }
      }
      @media (max-width: 600px) {
        html {
          font-size: 13px;
        }
      }

      @media (max-width: 300px) {
        html {
          font-size: 12px;
        }
      }

      @media (max-width: 800px) {
        .servie-package {
          display: grid;
          grid-template-columns: 100%;
        }
        #Aboutdiv img {
          width: 100%;
          margin-bottom: 10px;
        }
        #FooterTopdiv section span {
          display: grid;
          justify-items: center;
          padding: 4% 5%;
        }
        #FooterTopdiv section span a {
          padding: 3% 0%;
          width: 60%;
        }
        #FooterTopdiv section span a button {
          width: 100%;
        }
        #FooterTopdiv section {
          display: grid;
          grid-template-columns: 100%;
        }


  
        header {
          display: none;
        }
        #homediv {
          display: grid;
          grid-template-columns: 100%;

          min-height: 100vh;
          padding: 0%;
        }
        #homedivcontant {
          display: grid;

          justify-items: center;
          padding: 20px;
          text-align: center;
        }
        #GrowthDiv {
          display: grid;
          grid-template-columns: 50% 50%;
        }
        #GrowthDiv div {
          display: block;
          text-align: center;
        }
        #Aboutdiv {
          display: grid;
          grid-template-columns: 100%;
        }
        #WorkProcess #WorkedDiv {
          display: grid;
          grid-template-columns: 100%;

          width: 95%;
        }
        #WorkedSecondiv {
          transform: translateY(0px);
        }
        #WorkedSecondiv img {
          aspect-ratio: 3/2;
        }
        #OurServices section {
          display: grid;
          grid-template-columns: 100%;
          width: 100%;
          margin: 0% auto;
        }
        #project-div section {
          grid-template-columns: 100%;
        }
        #project-div {
          margin-bottom: 15%;
        }
        #CounterDiv {
          background-color: var(--main-second-color);
          display: grid;
          grid-template-columns:1fr 1fr;
          padding: 2% 4%;
        }

        #homedivImage {
          grid-column-start: 1;
          grid-column-end: 2;
          grid-row-start: 1;
          grid-row-end: 2;
        }
        footer #FooterMiddleDiv {
          display: grid;
          grid-template-columns: 100%;
          justify-items: left;
          width: 94%;
          margin: 0% auto;
          color: white;
          font-family: var(--main-heading-family);
        }
        footer .footerlinkes {
          width: 100%;

          justify-items: left;
        }
        footer #FooterDownDiv {
          display: grid;

          grid-template-columns: 100%;
        }
        footer #FooterDownDiv div {
          text-align: center;
        }
      }