@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          text-decoration: none;
          font-family: 'Poppins', sans-serif; 
      }
      
      .wrapper {
          background: white;
          position: fixed;
          width: 100%;
          border-bottom: rgb(173, 247, 26) solid;
          border-width: 10px;      
        }

      
      .wrapper nav {
          position: relative;
          display: flex;
          max-width: calc(100% - 200px);
          margin: 0 auto;
          height: 120px;
          align-items: center;
          justify-content: space-between;

      }
      
      nav .content {
          display: flex;
          align-items: center;
      }
      
      nav .content .links {
          margin-left: 80px;
          display: flex;
      }
      
      .content .logo img {
          width: 350px;
          height: 100px;
          margin-left: 75px;
          margin-top: 10px;
          padding: 10px;
      }
      
      .content .links li {
          list-style: none;
          line-height: 70px;
      }
      
      .content .links li a,
      .content .links li label {
          color: #fff;
          font-size: 18px;
          font-weight: 500;
          padding: 9px 17px;
          border-radius: 5px;
          transition: all 0.3s ease;
      }
      
      .content .links li label {
          display: none;
      }
      
      .content .links li a:hover,
      .content .links li label:hover {
          background: #323c4e;
      }
      
      .wrapper .search-icon,
      .wrapper .menu-icon {
          color: #fff;
          font-size: 18px;
          cursor: pointer;
          line-height: 70px;
          width: 70px;
          text-align: center;
      }
      
      .wrapper .menu-icon {
          display: none;
      }
      
      .wrapper #show-search:checked~.search-icon i::before {
          content: "\f00d";
      }
      
      .wrapper .search-box {
          position: absolute;
          height: 100%;
          max-width: calc(100% - 50px);
          width: 100%;
          opacity: 0;
          pointer-events: none;
          transition: all 0.3s ease;
      }
      
      .wrapper #show-search:checked~.search-box {
          opacity: 1;
          pointer-events: auto;
      }
      
      .search-box input {
          width: 100%;
          height: 100%;
          border: none;
          outline: none;
          font-size: 17px;
          color: #fff;
          background: #171c24;
          padding: 0 100px 0 15px;
      }
      
      .search-box input::placeholder {
          color: #f2f2f2;
      }
      
      .search-box .go-icon {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          line-height: 60px;
          width: 70px;
          background: #171c24;
          border: none;
          outline: none;
          color: #fff;
          font-size: 20px;
          cursor: pointer;
      }
      
      .wrapper input[type="checkbox"] {
          display: none;
      }
      /******************************************************* Dropdown Menu code start */
      
      .content .links ul {
          position: absolute;
          background: #171c24;
          top: 80px;
          z-index: -1;
          opacity: 0;
          visibility: hidden;
      }
      
      .content .links li:hover>ul {
          top: 70px;
          opacity: 1;
          visibility: visible;
          transition: all 0.3s ease;
      }
      
      .content .links ul li a {
          display: block;
          width: 100%;
          line-height: 30px;
          border-radius: 0px!important;
      }
      
      .content .links ul ul {
          position: absolute;
          top: 0;
          right: calc(-100% + 8px);
      }
      
      .content .links ul li {
          position: relative;
      }
      
      .content .links ul li:hover ul {
          top: 0;
      }
        /*******************************************************Boxes**************************************************************/
    #boxes {

        width: 100%;
        background-color: white;
        padding-top: 100px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        align-items: center;
        justify-content: center;
        padding-top: 150px;
        padding-bottom: 30px;
    
    }
    
    #container {
        width: 25%;
        height: 230px;
        background-color: rgb(220, 217, 217); 
        margin: 15px;
    }



      /******************************************* Responsive code start *****************************************************/
      
      @media screen and (max-width: 1250px) {
          .wrapper nav {
              max-width: 100%;
              padding: 0 20px;
          }
          nav .content .links {
              margin-left: 30px;
          }
          .content .links li a {
              padding: 8px 13px;
          }
          .wrapper .search-box {
              max-width: calc(100% - 100px);
          }
          .wrapper .search-box input {
              padding: 0 100px 0 15px;
          }
          #container {
              width: 25%;
          }
         .Developer.Developer_2 ul li{
            margin-left: 60px;
         }
      }
      
      @media screen and (max-width: 900px) {
          .wrapper .menu-icon {
              display: block;
          }
          .wrapper #show-menu:checked~.menu-icon i::before {
              content: "\f00d";
          }
          nav .content .links {
              display: block;
              position: fixed;
              background: black;
              height: 100%;
              width: 100%;
              top: 70px;
              left: -100%;
              margin-left: 0;
              max-width: 350px;
              overflow-y: auto;
              padding-bottom: 100px;
              transition: all 0.3s ease;
          }
          nav #show-menu:checked~.content .links {
              left: 0%;
          }
          .content .links li {
              margin: 15px 20px;
          }
          .content .links li a,
          .content .links li label {
              line-height: 40px;
              font-size: 20px;
              display: block;
              padding: 8px 18px;
              cursor: pointer;
          }
          .content .links li a.desktop-link {
              display: none;
          }
          /* dropdown responsive code start */
          .content .links ul,
          .content .links ul ul {
              position: static;
              opacity: 1;
              visibility: visible;
              background: none;
              max-height: 0px;
              overflow: hidden;
          }
          .content .links #show-features:checked~ul,
          .content .links #show-services:checked~ul,
          .content .links #show-items:checked~ul {
              max-height: 100vh;
          }
          .content .links ul li {
              margin: 7px 20px;
          }
          .content .links ul li a {
              font-size: 18px;
              line-height: 30px;
              border-radius: 5px!important;
          }
          #container {
              width: 45%;
          }
               
      }
      
      @media screen and (max-width: 480px) {
          .wrapper nav {
              padding: 0 10px;
          }
          .content .logo a {
              font-size: 27px;
          }
          .wrapper .search-box {
              max-width: calc(100% - 70px);
          }
          .wrapper .search-box .go-icon {
              width: 30px;
              right: 0;
          }
          .wrapper .search-box input {
              padding-right: 30px;
          }
          #container {
              width: 95%;
          }   
         .content .logo img {
             width: 290px;
             height: 90px;
             margin-left: 11px;
             margin-top: 12px;
             padding: 10px;
         }
          
      }
      /**************************************************footer***********************************************/
      
      */ footer {
          position: fixed;
          bottom: 0px;
          width: 100%;
      }
      
      .main-content {
          display: flex;
          background-color: whitesmoke;
          border-top: rgb(173, 247, 26) solid;
          border-width: 4px;
      }
      
      .main-content .box {
          flex-basis: 50%;
          padding: 10px 20px;
          color: black;
      }
      
      .box h2 {
          font-size: 1.125rem;
          font-weight: 600;
          text-transform: uppercase;
      }
      
      .box .content {
          margin: 20px 0 0 0;
          position: relative;
      }
      
      .box .content:before {
          position: absolute;
          content: '';
          top: -10px;
          height: 2px;
          width: 100%;
          background: black;
      }
      
      .box .content:after {
          position: absolute;
          content: '';
          height: 2px;
          width: 15%;
          background: rgb(173, 247, 26);
          top: -10px;
      }
      
      .left .content p {
          text-align: justify;
      }
      
      .left .content .social {
          margin: 20px 0 0 0;
          text-align: center;
          align-content: center;
      }
      
      .left .content .social a {
          padding: 0 2px;
          color:  rgb(173, 247, 26);
          align-content: center;
      }
      
      .left .content .social a i {
          text-align: center;
          align-content: center;
          margin-right: 10px;
      }
      
      .left .content .social a span:hover {
          background: black;
      }
      
      .center .content .fas {
          font-size: 1.4375rem;
          background:  rgb(173, 247, 26);
          height: 45px;
          width: 45px;
          line-height: 45px;
          text-align: center;
          border-radius: 50%;
          transition: 0.3s;
          cursor: pointer;
      }
      
      .center .content .fas:hover {
          background: rgb(173, 247, 26);
      }
      
      .center .content .text {
          font-size: 1.0625rem;
          font-weight: 500;
          padding-left: 10px;
          color: black;
      }
      
      .center .content .phone {
          margin: 15px 0;
          color: rgb(173, 247, 26);
      }
      
      .right form .text {
          font-size: 1.0625rem;
          margin-bottom: 2px;
          color: black;
      }
      
      .right form .msg {
          margin-top: 10px;
      }
      
      .right form input,
      .right form textarea {
          width: 100%;
          font-size: 1.0625rem;
          background: rgb(220, 217, 217);
          padding-left: 10px;
          border: 1px solid black;
      }
      
      .right form input:focus,
      .right form textarea:focus {
          outline-color: rgb(173, 247, 26);
      }
      
      .right form input {
          height: 35px;
      }
      
      .right form .btn {
          margin-top: 10px;
      }
      
      .right form .btn button {
          height: 40px;
          width: 100%;
          border: none;
          outline: none;
          background: rgb(173, 247, 26);
          font-size: 1.0625rem;
          font-weight: 500;
          cursor: pointer;
          transition: .3s;
      }
      
      .right form .btn button:hover {
          background: rgb(173, 247, 26);
      }
      
      .bottom center {
          padding: 5px;
          font-size: 0.9375rem;
          background: black;
      }
      
      .bottom center span {
          color: whitesmoke;
      }
      
      .bottom center a {
          color: rgb(173, 247, 26); 
          text-decoration: none;
      }
      
      .bottom center a:hover {
          text-decoration: underline;
      }
      
      @media screen and (max-width: 900px) {
          footer {
              position: relative;
              bottom: 0px;
          }
          .main-content {
              flex-wrap: wrap;
              flex-direction: column;
          }
          .main-content .box {
              margin: 5px 0;
          }
      }