* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Extra small devices (phones, portrait) */
@media (max-width: 479px) {
  /* Styles for very small phones */
   /* Styles for small phones and landscape phones */

  /* Base settings */
    .main-base{
        display: block;
        font-family:calibri light;
        margin: 0 auto;
        justify-content: space-between;
        width: 100%;
        padding: 0px;
        font-size: 1em;
        /* position: relative; */
    }
    .included-base{
      display: none;
    }
    .waffle button{
      border: none;
    }
    .waffle #waffle-open, #waffle-close{
      width: 40px;
      height: 55px;
      margin: 2% 2%;
      /* border-radius: 5%; */
      border: none;
    }
    .waffle #waffle-open{
      display: flex;
      border: none;
      background-color: transparent;
      /* border: 1px solid rgb(184, 183, 183); */
      width: fit-content;
      padding: 2%;
    }
    .waffle #waffle-open svg{
      width: 40px;
      height: 40px;
    }
    .waffle #waffle-open p{
      margin-top: 12%;
      margin-left: 6%;
      font-size: large;
    }
    .waffle #waffle-close{
      display: none;
      background-color: transparent;
      /* border: 1px solid rgb(184, 183, 183); */
      width: fit-content;
      padding: 2%;
    }
     .waffle #waffle-close svg{
      width: 40px;
      height: 40px;
    }
    .waffle #waffle-close p{
      margin-top: 12%;
      margin-left: 6%;
      font-size: large;
    }
    .div-logo{
      margin: -20% 70%;
      /* border: 1px solid black; */
      width: fit-content;
    }
    .div-logo img{
      width: 90px;
      height: 90px;
      /* border: 1px solid black; */
    }
    .main-logo{
      display: none;
      position: absolute;
      margin-top: -1%;
    }
    .main-logo img{
      /* border: 1px solid ghostwhite; */
      border-radius: 2%;
    }
    
    .main-menu{
      width: 90%;
      margin-top: 1%;
      margin-left: 2%;
      padding:1% 0px;
      border: 1px solid rgb(184, 183, 183); 
      /* background-color: #fefbea; */
      /* height: 59.7vh; */
      position: absolute;
      border-radius: 4px;
      /* background: linear-gradient(to bottom, #C19A6B, #cab399); */
      -moz-box-shadow: 0 0 3px #ccc;
      -webkit-box-shadow: 0 0 3px #ccc;
      box-shadow: 2 7 7px #ccc;
    }
    .main-menu ul{
      list-style-type: none;
      display: grid;
      grid-template-columns: auto auto auto auto;
      /*display: block;
      /* display:flex; */
      height: 8vh;
      margin: 3% -3%;
      padding: 0.5% 5%;
    }
    .main-menu ul li{
      height: 100%;
    }
    .main-menu ul a{
      text-decoration: none;
      color:#1b1a19;
      font-weight: 500;
    }
    .main-menu ul a.active {
      padding-bottom: 5%;
     border-bottom: 2px solid rgb(43, 43, 41); /* highlight color */
    }
/* end of base settings */

/* index media */
    .index-main{
      /* border: 1px solid rgb(184, 183, 183); */
      width: 100%;
    }
    .upper-div{
      background-image: url('../images/background.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      background-attachment: fixed; /* Keeps the image fixed during scroll */
      height:90vh;
    }
    .upper-div-content{
      margin:55% auto; 
      width:100%; 
      padding: 2%;
      line-height:2 
    }
    .upper-div-content #para{
      text-align: justify; 
      font-family:calibri light; 
      font-size:medium;
    }
    .index-links{
      display:flex; 
      justify-content:space-between; 
      font-family:calibri light; 
      margin-top:3%; 
      font-size:0.9em;
    }
    .poke a{
      color:black; 
      text-decoration:none; 
      font-style:italic;
    }

    .poke-tc{
      margin-left: 10%;
    }
    .poke-ce{
      margin-left: 7%;
    }
     .poke-ce a{
            color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .poke-tc a{
            color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .bottom-div{
      position:fixed; 
      /* border: 1px solid black; */
      bottom:0; 
      width:fit-content; 
      margin:-7 auto; 
      font-family:calibri light;
    }
    .exp-pk{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #f5f5dc;
      padding: 2%;
      margin: -35% 0%;
      width: 95%;
      border-radius:2%;
      font-size: small;
      display: none;
    }
    .div-response{
      justify-content: space-between;
      display:none ;
      /*flex-direction: column;
       align-items: right; */
      gap: 10px;
      font-family: Arial, sans-serif;
      color: #008000; /* green text */
      font-weight: bold;
    }
        
    .spinner-too{
      border: 1px solid black;
      width: 15px;
      height: 15px;
      margin-top: 2%;
      /* border: 4px solid #e0e0e0; */
      border-top: 4px solid #008000; /* green spinner */
      border-radius: 50%;
      animation: spin 1s linear infinite;
      display: none;
    }
    @keyframes spin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .exp-pk-div{
      display: flex;
      justify-content: space-between;
    }
    .exp-chat{
      display: flex;
      justify-content: space-between;
      margin:2% 1%;
      width: 100%;
    }
    .exp-chat-wel{
      border: 1px solid gainsboro;
      width: 50%;
      border-radius: 5px;
      line-height: normal;
      padding: 1%;
      background-color: #cacab5;
      text-align: justify;
    }
    #subj{
      display: none;
      margin-left: 1%;
    }
    #div-sub{
      display: none;
    }
    .search-button {
      border: none;
    }
    .search-button svg{
      background-color: transparent;
    }
    .close-chat{
      display: flex;
      justify-content: space-between;
      margin: 0 2%;
    }
    .close-chat button{
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .close-chat button:hover{
      border-bottom: 0.3px solid grey;
    }
    .the-chat{
       border: 0.3px solid grey;
      border-radius: 5px;
      display: none;
      width: fit-content;
      background-color: #cacab5;
    }
    .the-chat textarea{
     border: none;
     outline: none;
     padding: 1%;
     border-radius: 5px;
     background-color: transparent;
    }
    .the-chat button{
      border: none;
      border-radius: 5px;
    }
    .the-chat button svg{
      width: 20px;
      height: 15px;
      margin-top: -2px;
      border: none;
      background-color: transparent;
      margin-top: 7%;
    }
     .com-div{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #f5f5dc;
      padding: 2%;
      margin: -97% 0%;
      width: 97%;
      border-radius:2%;
      font-size: small;
      display: none;
    }
    .com-div #com-join{
      /* border: 1px solid black; */
      width: fit-content;
      margin:0 auto;
    }
    .jocom-div{
      display: flex;
    }
    .jocom-div button{
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .com-login{
      width: 30%;
      margin: 0 auto;
    }
    .com-login a{
      font-style: italic;
      color: black;
    }
    .manual-input{
      border: 1px solid rgb(177, 175, 175);
      border-radius:3px;
      padding: 3%;
    }
    .manual-input div button:hover{
      background-color: #ddddcd;
      border: 1px solid #979793;
    }
    .emails div button{
      display: flex;
      width: 100%;
      padding: 1.5%;
      margin: 1% 0;
      border: 1px solid rgb(177, 175, 175);
      border-radius:3px;
      cursor: pointer;
      text-align: center;
    }
    .emails div button:hover{
      background-color: #ddddcd;
      border: 1px solid #979793;
    }
    .emails div button div{
      /* border: 1px solid black; */
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      width: 17%;
    }
    .emails div button div p{
      /* margin-left: 1%; */
      margin-top: 2%;
    }
    .emails div button div p{
      /* margin-left: 1%; */
      margin-top: 2%;
    }
    .emails div button div #app{
      /* margin-left: 1%; */
      margin-top: 3%;
      padding-top: 2%;
    }
    .emails div button #app-div{
      width: 25%;
      height: 15%;
    }
    .emails div button img{
      width: 20px;
      height: 20px;
    }
    .emails div button #gugo{
      width: 30%;
    }
    .manual-input div{
      display: flex;
    }
    .manual-input div p{
      width: 20%;
    }
    .manual-input div input{
      width: 80%;
      height: 40%;
      border: 1px solid rgb(177, 175, 175);
      margin-top: 2%;
    }
    .manual-input button{
      width: 80%;
      border: 1px solid rgb(177, 175, 175);
      margin: 1% 0;
      border-radius: 3px;
      padding: 1%;
      cursor: pointer;
    }
    .tc-div{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #f5f5dc;
      padding: 0.3%;
      margin: -50% auto;
      width: 95%;
      border-radius:1%;
      font-size: small;
      display: none;
    }
    .tc-div #tips-close{
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .tip-share{
      margin: 10% auto;
      width: fit-content;
    }
    .tip-share a{
      color: black;
    }
    .tp-msg-div{
      display: flex;
      margin: 3% auto;
      width: fit-content;
      
    }
    .sh-tip{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #d6d6c2;
      padding: 0.3%;
      margin: -45% 15%;
      width: 65%;
      border-radius:1%;
      font-size: small;
      display: none;
    }
    .sh-tip div{
      width: 100%;
      border: 1px solid #fafaeb;
      padding: 2%;
      border-radius: 1%;
    }
    .sh-tip input{
      height: 100%;
      width: 100%;
      outline: none;
      padding: 1%;
    }
    .sh-tip textarea{
      height: 100%;
      width: 100%;
      margin-top: 2%;
      resize: vertical;
      outline: none;
      padding: 1%;
    }
    .sh-tip #post-btn{
      width: 100%;
      padding: 1%;
      cursor: pointer;
    }
    .yrt-close{
      position: absolute;
      width: 20%;
      margin: -10% 90%;
      background-color: transparent;
      border: none;
      cursor: pointer;
    }

    .bottom-div{
      position:fixed; 
      bottom:0; 
      width:100%; 
      margin:0 5%; 
      font-family:calibri light;
    }
/* end of index media */

/* about media */
.main-logo{
      display: none;
      position: absolute;
      margin-top: -1%;
    }
    .main-logo img{
      /* border: 1px solid ghostwhite; */
      border-radius: 2%;
    }
    .laptops, .big-screen{
      display: none;
    }
    .about-main-div{
      width:100%; 
      height:400px; 
      /* font-size: 1.38em; */
      margin-top: 51%; 
      border-radius:7px;
    }
    .about-main-div .abt-paras{
      display: flex;
      line-height:1.9; 
      font-size: 0.74em;
      /*  
      padding:1% 5%; 
      font-family:calibri light; */
    }
    .abt-paras p{
      width: 100%;
      padding: 0 2%;
      /* margin-left: 2%; */
      text-align: justify;
    }
    .abt-musseru{
      padding: 0 2%;
      margin-top:0%;
      font-size: 0.74em;
    }
    .vision-mission{
      margin-top: -2%;
      display:flex; 
      justify-content:space-between; 
      padding:2% 2%; 
      line-height:1.4;
      font-size: 0.74em;
    }
    .vision{
      width: 100%;
      padding:0 1%;
    }
    .vis-div{ 
      width:100%; 
      display:flex; 
      justify-content:space-between;
    }
    .vis-div #ok-close{
      display: none;
    }
    .vis-div a{
      text-decoration: none;
      color: black;
    }
    .long .p-long{
      text-align: justify;
    }
    .p-long, .mi-long{
      margin-top: 4%;
    }
    .read-more{
      display: none;
    }
    .more-read{
      font-style: italic;

    }
    .vision p{
      text-align: justify; 
      font-family:calibri light;
    }
    .mission{
      width: 100%;
      padding:0 2%;
    }
    .mis-div{
      width:100%;
      display:flex;
      justify-content: space-between;
    }
    .mis-div #mis-close{
      display: none;
    }
    .read-read-more{
      display: none;
    }
    .more-more-read{
      font-style: italic;
      
    }
    .mission p{
      text-align: justify; 
      font-family:calibri light;
    }
    .mid-line{
      margin:5% 0;
      border:0.07em solid #ccbd82ff;
    }
/* end of about media */

/* Software page */
  .main-logo{
      display: none;
      position: absolute;
      margin-top: -1%;
    }
    .main-logo img{
      /* border: 1px solid ghostwhite; */
      border-radius: 2%;
    }
    .software-main-div{
      padding:1%; 
      border:1px solid #ccbd82ff; 
      width:100%; 
      height:380px; 
      margin-left:0%; 
      margin-top:52%; 
      border-radius:10px;
      font-size: small;
    }
    .software-products{
      display:flex; 
      justify-content:space-between; 
      height:130px;
      font-size: small;
    }
    .order-product {
      display:flex; 
      justify-content:space-between; 
      padding:1% 1%;
      
    }

    .order-product button{
      width: 120px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
      font-size: 1em;
      /* border: 1px solid black; */
    }
    .order-product .rep-pro{
      width: 35%;
    }
    .order-product .or-faq{
      width: 28%;
    }
      .order-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 0%;
        margin-left: 5%;
      }
/* end software page */

/* hardware product */
  .hardware-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:100%; 
    height:380px; 
    margin-top:51%; 
    border-radius:10px;
    font-size: small;
  }    
  .big-screen{
    display: none;
  }
  .hardware-content p{
    line-height:1.8; 
    text-align: justify; 
    padding:0 2%;
    font-size: small;
  }
  .hardware-product {
    display:flex; 
    justify-content:space-between; 
    padding:1% 0%;
    font-size: small;
  }
  .hardware-projects{
    margin-top:4%; 
    display:none; 
    justify-content:space-between
  }
  .hardware-projects p{
    text-align:center;
    font-size: small;
  }
  .hardware-search{
    display:flex; 
    background:none; 
    border-bottom:1px solid bisque; 
    border-radius:5px;
  }
  .hardware-table{
    display:none; 
    justify-content:space-between; 
    margin-top:4%;
  }
  .project-button{
    display: flex;
    width: 50%;
    margin: 1% auto;
    font-size: small;
    /* border: 1px solid black; */
    align-items: center;
    padding: 1%;
    justify-content: space-between;
  }
  .project-button a{
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
   .btn-extend #office-check{
    display: none;
    border: 1px solid black;
  }
  .project-button button{
    display: none;
    width: 100%;
    padding: 2%;
    font-size: large;
  }
  .hardware-product{
    width: 80%;
    position: relative;
      display: flex;
      background-color: transparent;
      /* border: 1px solid black; */
      cursor: pointer;
      margin-top: 0%;
      font-size: 0.8em;
      justify-content: space-between;
  }

  .min-services{
    display: flex;
  }
  .hidden{
    opacity: 0;
    pointer-events: none;
  }
  .first-buttons{
    position: absolute;
    transition: opacity 0.5s ease-in-out;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .first-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    font-size: 0.9em;
    /* border: 1px solid black; */
  }
  .first-buttons button svg{
        width: 15px;
        height: 15px;
        margin-top: -2%;
        margin-left: 5%;
  }
  .second-buttons{
    position: absolute;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .second-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    font-size: 0.9em;
  }
  .second-buttons button svg{
     width: 15px;
        height: 15px;
        margin-top: -2%;
        margin-left: 5%;
  }
  .hardware-services-button{
    margin-left: 1%;
    margin-top: 1%;
    padding-right: 0%;
    width: 138px;
  box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.2);
  }
  .hardware-services-button svg{
    margin-top: 2%;
    width: 18px;
    height: 18px;
  }
  .hardware-services-button button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
  }
  .hardware-services-button button p{
    margin-top: 3%;
    font-size: 0.85em;
  }
 .first-buttons .hd-enq{
    width: 155px;
  }
  .right-direction{
    display: none;
  }
/* end fo hardware product */

/* network products */
   .network-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:100%;  
    margin-top:51%; 
    border-radius:10px;
    font-size: small;
  }
  .big-screen{
    display: block;
  }
  .network-main-div p{
    line-height:1.3; 
    text-align: justify; 
    padding:0 2%;
    /* font-size: xx-large; */
  }
  .networking-svc{
    font-size: small;
    margin-left: 2%;
  }
  .network-main-div .net-para{
    display: flex;
    font-size: small;
    margin-top: 2%;
  }

  .min-services-net{
    display: flex;
    width: 100%;
  }
  .network-services-button{
    margin-left: -1%;
    margin-top: 1%;
    padding-right: 0%;
    width: 120px;
    box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.2);
  }
  .network-services-button button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 100%;
  }
  .network-services-button button p{
    font-size: 0.8em;
  }
  .network-services-button svg{
    width: 15px;
    height: 15px;
  }
  .third-buttons{
    position: absolute;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .third-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 85%;
    font-size: 0.9em;
    /* border: 1px solid black; */
    }
  .third-buttons button svg{
        width: 15px;
        height: 15px;
        margin-top: 1.5%;
        margin-left: 5%;
  }
  .fourth-buttons{
    position: absolute;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .fourth-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 85%;
    font-size: 0.9em;
  }
  .fourth-buttons button svg{
        width: 15px;
        height: 15px;
        margin-top: 1.5%;
        margin-left: 5%;
  }
  .network-product{
    width: 80%;
    position: relative;
    display: flex;
    background-color: transparent;
    cursor: pointer;
    margin-top: 0%;
    justify-content: space-between;
  }
  .third-buttons .network-service-request{
    width: 100%;
    word-wrap: break-word;
  }
  .third-buttons .nt-chk{
    width: 83%;
  }
/* end of network product */

/* services */
  .main-services-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:100%; 
    height:380px; 
    margin-left:0%; 
    margin-top:51%; 
    border-radius:10px;
  }
  .services-div button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: small;
    margin:3% 3%;
  }
/* end of services */

/* contact form */

   .contact-form{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:100%; 
    height:380px;  
    border-radius:10px;
    font-size:small;
    margin-top: 52%;
  }
  .social-media p{
    text-align:center; 
    font-size:small;
  }
  /* .div-logo{
    border: 1px solid black;
  } */
  .form-btn {
    width:50%; 
    margin:3% auto; 
    display:flex;
  }
  .form-btn button{
    cursor: pointer;
    width:100%; 
    border:none; 
    padding: 2% 0; 
    border:1px solid #d3c1adff; 
    border-radius:4px;
    background-color: #d6c6b5;
    font-size: small;
  }
  .form-btn :hover{
    background-color: #e9e1d9;
  }
  .individual-div{
    border:1px solid bisque; 
    border-radius:5px; 
    padding:2%; 
    width:90%; 
    margin: 0 auto;
  }
  .individual-div p{
    font-size: small;
  }
  .form-inputs{
    display:flex; 
    width:90%; 
    margin:5% auto;
    font-size: small;
  }
  .form-inputs input{
    margin-top: -2%;
  }
  .form-inputs button{
    font-size: small;
  }
  .company-div{
    border:1px solid bisque; 
    border-radius:5px; 
    padding:2%; 
    width:95%;
    height: 20%; 
    margin: 0 auto;
    margin-top: -1%;
  }
  .company-div p{
    font-size: small;
  }
  .company-div .form-inputs{
    width: 100%;
  }
/* end of contact form */

/* success div */
   .success-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:100%; 
    height:370px; 
    margin-top: 52.5%;
    border-radius:10px;
  }
  .success-div p{
    text-align: center;
    font-size: medium;
    margin-top: 3%;
  }
  .success-svg{
    /* border: 1px solid black; */
    width: fit-content;
    margin:7% auto;
  }
  .success-svg svg{
    width: 40px;
    height: 40px;
    border: 0.5px;
  }
  .success-message p{
    font-size: medium;
    width: 90%;
    margin: 0 auto;
  }
  .success-button{
    /* border: 1px solid black; */
    width: fit-content;
    margin: 5% auto;
  }
  .success-button button{
    width: 50px;
    height: 50px;
    padding: 1%;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    font-size: medium;
  }
/* end of success div */

/* start of community media */

.com-login-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:100%; 
    height:361px; 
    margin-top:54%; 
    border-radius:10px;
  }
  .com-login-com{
    border: 2px solid rgb(133, 132, 128);
    width: 20%;
    margin: 15% auto;
    padding: 2%;
    border-radius: 5%;
  }
  fieldset{
    width: 80%;
    padding: 2%;
    border-radius: 7px;
    margin: 10% auto;
  }
  legend{
    margin:2% 5%;
    padding: 2%;
    font-weight: 500;
  }
  .form-log-com div input{
    margin: 3% 0;
    width: 100%;
    padding: 2%;
    outline: none;
    border: none;
  }
   .form-log-com div button{
    margin: 3% 0;
    width: 100%;
    padding: 2%;
    cursor: pointer;
    background-color: #60ac60;
    border: none;
    border-radius: 2%;
  }
  .div-com{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:100%; 
    height:383px;  
    margin-top:51%; 
    border-radius:10px;
    display: flex;
  }
  .chat-menu{
    /* border: 1px solid black; */
    display: flex;
    flex-direction: column;
    margin: auto 0;
    width: 45%;
    height:95%;
    justify-content:space-between;
    font-size: small;
  }
  .chat-menu a{
    display: flex;
    color: black;    
    text-decoration: none;
    width: 90%;
  }
  .chat-menu a svg{
    margin-top: -4%;
    margin-right: 10%;
    width: 18px;
  }
  .chat-menu ul li a{
    text-decoration: none;
    color: black;
    margin: 3% 2%;
  }
  .chat-contents{
    /* border: 1px solid cornsilk; */
    width: 100%;
    display: block;
  }
  .middle-chat{
    /* border: 1px solid black; */
    height: 85%;
    width: 100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 55%;
  }
  .middle-chat a p{
    /* border: 1px solid black; */
    margin-top: 0%;
    margin-left: -8%;
  }
  .chat-contents-menu{
    display: none;
    justify-content: space-between;
    border: none;
    /* border-bottom: 1px solid grey; */
    margin-left: 3%;
  }
  .content-menu-content{
    margin: 1% 1%;
    width:30%;
    display: flex;
    justify-content: space-between;
    padding: 0.7% 0;
    border-bottom: 1px solid grey;
  }
  .content-menu-content a{
    text-decoration: none;
    height: 15px;
  }
  .content-menu-content a svg{
    height: 15px;
  }
  .content-username{
    margin: -70% 1%;
    padding: 0.7% 0;
    display: block;
  }
  .avatar{
  width: 45px;
  height: 45px;
  border-radius: 50%; /* fully rounded */
  border: 1px solid rgb(51, 51, 48);
  display: flex;
  align-items: center;
  background-color: #ccc8c8; /* light background */
  justify-content: center; /* center contents */
  overflow: hidden; /* clip child */
  }
  .my-avatar{  
  width: 60%;
  height: 60%;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center; /* svg centered */
  }
  .my-avatar svg{
    height: 40px;
    width: 40px;

  }
  .content-username p{
    margin: 0 1%;
  }
  .content-username #user-name{
    margin:3% 0%;
    width: fit-content;
  }
  .com-log-out button{
    background-color: transparent;
    border: none;
    display: flex;
    cursor: pointer;
  }
  .com-log-out button svg{
    height: 15px;
  }
  .home-content{
    background-color: cornsilk;
    border:1px solid rgb(250, 241, 204); 
    width:100%; 
    height:100%; 
    margin:0% auto; 
    border-radius:3px; 
    padding:1%;
    display: grid;
    grid-template-columns: auto auto;
  }
  .login-btn{
    display: flex;
    background-color: transparent;
  }
  .login-btn #btns{
      background-color: transparent;
      
  }
  .login-btn #btns div{
    display: flex;
  }
  .login-btn #btns p{
    margin-top: 2%;
    margin-left: 2%;
    font-size: smaller;
  }
  .login-btn #btns svg{
    width: 15px;
    height: 15px;
  }
  .login-btn #btns img{
    width: 17px;
    height: 17px;
  }
  .thumbs{
    border: 1px solid #FFFDD0;
    border-radius: 5px;
    background-color: #f9e4bc;
    padding: 1%;
    display: flex;
    height:120px;

    -moz-box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
    cursor: pointer;
  }

  .thumbs p{
    text-align: center;
    font-size: 0.9em;
  }
  .thumbs #tips-id{
    display: flex;
    /*margin: 15% auto;
     border: 1px solid black; */
  }
  .the-tips{
    padding: 7% 1%;
    width: 25%;
    height: 100%;
    background-color: #FFFDD0;
  }
  .tips-contents{
    background-color: #f5f5d4;
    width: 100%;
    height: 80%;
    padding-top: 3%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
 
  .tips-contents-1{
    background-color: #f5f5d4;
    width: 100%;
    height: 66%;
    padding-top: 3%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .tips-contents-1 button{
    display: block;
    margin: 3% auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.7em;
  }
  .tips-contents button{
    display: block;
    margin: 3% auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.7em;
  }
  .tips-contents button:hover{
    border-bottom: 1px solid black;

  }
  .the-tips a{
    margin-top: 10%;
    margin-left: 4%;
    color: green;
    display: flex;
    text-decoration: none;
    font-size: small;
  }
  .the-tips a:hover{
    text-decoration: underline;
  }
  .thumbs:hover{
    background-color: #FFFDD0;
  }
  
}

/* Small devices (phones, landscape) */
@media (min-width: 480px) and (max-width: 767px) {
  /* Styles for small phones and landscape phones */

  /* Base settings */
    .main-base{
        display: none;
        font-family:calibri light;
        margin: 0 auto;
        justify-content: space-between;
        /* width: 100%; */
        padding: 0px;
        border: 1px solid black;
        /* position: relative; */
    }
    .main-logo{
      display: none;
      position: absolute;
      margin-top: -1%;
    }
    .main-logo img{
      /* border: 1px solid ghostwhite; */
      border-radius: 2%;
    }
    .main-menu{
      width: 100%;
      padding: 0px;
      background-color: transparent;
      font-size: small;
      border:1px solid black
      /* background: linear-gradient(to bottom, #C19A6B, #cab399); */
      
    }
    .main-menu ul{
      list-style-type: none;
      display: flex;
      /* border: 1px solid black; */
      justify-content: space-between;
      padding: 0.5% 3%;
    }
    .main-menu ul a{
      text-decoration: none;
      color:#1b1a19;
      font-weight: 500;
    }
    .main-menu ul a.active {
      padding-bottom: 5%;
     border-bottom: 2px solid rgb(43, 43, 41); /* highlight color */
    }
/* end of base settings */

/* index media */
    .index-main{
      border: 1px solid rgb(184, 183, 183);
      width: 100%;
    }
    .upper-div{
      background-image: url('../images/background.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      background-attachment: fixed; /* Keeps the image fixed during scroll */
      height:99.8vh;
    }
    .upper-div-content{
      margin:20% auto; 
      width:30%; 
      line-height:2 
    }
    .upper-div-content #para{
      text-align: justify; 
      font-family:calibri light; 
      font-size:large;
    }
    .index-links{
      display:flex; 
      justify-content:space-between; 
      font-family:calibri light; 
      margin-top:3%; 
      font-size:0.9em;
    }
    .poke a{
      color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .bottom-div{
      position:fixed; 
      bottom:0; 
      width:100%; 
      margin:0 auto; 
      font-family:calibri light;
    }
/* end of index media */

/* about media */
    .about-main-div{
      width:50%; 
      height:630px; 
      margin-left:26%; 
      margin-top:10%; 
      border-radius:7px;
    }
    .about-main-div #para{
      line-height:2; 
      text-align: justify; 
      padding:1% 5%; 
      font-family:calibri light;
    }
    .vision-mission{
      display:flex; 
      justify-content:space-between; 
      padding:2% 5%; line-height:1.6;
    }
    .vision{
      padding:0 2%;
    }
    .vision p{
      text-align: justify; 
      font-family:calibri light;
    }
    .mission{
      padding:0 2%;
    }
    .mission p{
      text-align: justify; 
      font-family:calibri light;
    }
/* end of about media */

/* Software page */
    .software-main-div{
      padding:1%; 
      border:1px solid #ccbd82ff; 
      width:50%; 
      height:630px; 
      margin-left:26%; 
      margin-top:10%; 
      border-radius:10px;
    }
    .software-products{
      display:flex; 
      justify-content:space-between; 
      height:300px;
    }
    .order-product {
      display:flex; 
      justify-content:space-between; 
      padding:1% 3%;
    }

    .order-product button{
      width: 150px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
    }
      .order-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 1%;
        margin-left: 5%;
      }
/* end software page */

/* hardware product */
  .hardware-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:630px; 
    margin-left:26%; 
    margin-top:10%; 
    border-radius:10px;
  }    
  .hardware-content p{
    line-height:2; 
    text-align: justify; 
    padding:0 2%;
  }
  .hardware-product {
    display:flex; 
    justify-content:space-between; 
    padding:1% 2%;
  }
  .hardware-projects{
    margin-top:4%; 
    display:flex; 
    justify-content:space-between
  }
  .hardware-projects p{
    text-align:center;
  }
  .hardware-search{
    display:flex; 
    background:none; 
    border-bottom:1px solid bisque; 
    border-radius:5px;
  }
  .hardware-table{
    display:flex; 
    justify-content:space-between; 
    margin-top:4%;
  }
  .hardware-product button{
    width: 200px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
  }
  .hardware-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 1%;
        margin-left: 5%;
  }
/* end fo hardware product */

/* network products */
  .network-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:630px; 
    margin-left:26%; 
    margin-top:10%; 
    border-radius:10px;
  }
  .network-main-div p{
    line-height:2; 
    text-align: justify; 
    padding:0 2%;
  }
  .network-product{
    display:flex; 
    justify-content:space-between; 
    padding:1% 2%;
  }

  .network-product button{
     width: 200px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
  }
  .network-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 1%;
        margin-left: 5%;
  }
/* end of network product */

/* services */
  .main-services-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:630px; 
    margin-left:26%; 
    margin-top:10%; 
    border-radius:10px;
  }
  /* .services-div{

  } */
  .services-div button{
    background-color: transparent;
    border: none;
    cursor: pointer;
  }
/* end of services */

/* contact form */

  .contact-form{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:630px; 
    margin-left:26%; 
    margin-top:10%; 
    border-radius:10px;
  }
  .social-media p{
    text-align:center; 
    font-size:1.5em;
  }
  .form-btn {
    width:50%; 
    margin:5% auto; 
    display:flex;
  }
  .form-btn button{
    cursor: pointer;
    width:100%; 
    border:none; 
    padding: 2% 0; 
    border:1px solid #d3c1adff; 
    border-radius:4px;
    background-color: #d6c6b5;
  }
  .form-btn :hover{
    background-color: #e9e1d9;
  }
  .individual-div{
    border:1px solid bisque; 
    border-radius:5px; 
    padding:2%; 
    width:70%; 
    margin: 0 auto;
  }
  .form-inputs{
    display:flex; 
    width:70%; 
    margin:5% auto;
  }
  .company-div{
    border:1px solid bisque; 
    border-radius:5px; 
    padding:2%; 
    width:70%; 
    margin: 0 auto;
  }
/* end of contact form */

/* success div */
  .success-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:630px; 
    margin-left:26%; 
    margin-top:10%; 
    border-radius:10px;
  }
  .success-div p{
    text-align: center;
    font-size: x-large;
    margin-top: 3%;
  }
  .success-svg{
    /* border: 1px solid black; */
    width: fit-content;
    margin:7% auto;
  }
  .success-svg svg{
    width: 45px;
    height: 45px;
    border: 0.5px;
  }
  .success-message p{
    font-size: larger;
    width: 70%;
    margin: 0 auto;
  }
  .success-button{
    /* border: 1px solid black; */
    width: fit-content;
    margin: 5% auto;
  }
  .success-button button{
    width: 40px;
    height: 40px;
    padding: 1%;
    border-radius: 50%;
    cursor: pointer;
    border: none;
  }
/* end of success div */
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 991px) {
  /* Styles for tablets */
 /* Base settings */
    .main-base{
        display: none;
        font-family:calibri light;
        margin-top: 2%;
        justify-content: space-between;
         width: 100%;
        padding: 0px;
        font-size: xx-large;
    }
    .main-logo{
      display: none;
      /* position: absolute; */
      margin-top: -1%;
      border: 1px solid black;
    }
    .main-logo img{
      /* border: 1px solid ghostwhite; */
      border-radius: 2%;
    }
    .main-menu{
      width: 100%;
      padding: 0px;
      background-color: transparent;
      /* background: linear-gradient(to bottom, #C19A6B, #cab399); */
      
    }
    .main-menu ul{
      list-style-type: none;
      display: flex;
      /* border: 1px solid black; */
      justify-content: space-between;
      padding: 0.5% 3%;
    }
    .main-menu ul a{
      text-decoration: none;
      color:#1b1a19;
      font-weight: 500;
    }
    .main-menu ul a.active {
      padding-bottom: 5%;
     border-bottom: 2px solid rgb(43, 43, 41); /* highlight color */
    }
/* end of base settings */

/* index media */
    .div-logo{
      display: block;
      width: 400px;
      height: 400px;
      margin: 3% auto;
    }
    .div-logo img{
      width: 100%;
      height: 100%;
    }
    .index-main{
      border: 1px solid rgb(184, 183, 183);
      width: 100%;
    }
    .upper-div{
      background-image: url('../images/background.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      background-attachment: fixed; /* Keeps the image fixed during scroll */
      height:99.8vh;
    }
    .upper-div-content{
      /* border: 1px solid black; */
      margin:10% auto; 
      width:90%; 
      line-height:2 
    }
    .upper-div-content #para{
      text-align: justify; 
      font-family:calibri light; 
      font-size: xx-large;
    }
    .index-links{
      display:flex; 
      justify-content:space-between; 
      font-family:calibri light; 
      margin-top:3%;
      font-size: xx-large; 
      /* font-size:0.9em; */
    }
    .poke a{
      color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .bottom-div{
      position:fixed; 
      bottom:0; 
      width:100%; 
      margin:0 10%; 
      font-size: xx-large;
      font-family:calibri light;
    }
/* end of index media */

/* about media */
    .main-logo{
      display: none;
      position: absolute;
      margin-top: -1%;
    }
    .main-logo img{
      /* border: 1px solid ghostwhite; */
      border-radius: 2%;
    }
    .about-main-div{
      width:100%; 
      height:630px; 
      /* font-size: 1.38em; */
      margin-top: 5%; 
      border-radius:7px;
      border: 1px solid black;
    }
    .about-main-div .abt-paras{
      display: flex;
      line-height:2; 
      font-size: 1.5em;
      /*  
      padding:1% 5%; 
      font-family:calibri light; */
    }
    .abt-paras p{
      width: 100%;
      padding: 0 2%;
      /* margin-left: 2%; */
      text-align: justify;
    }
    .abt-musseru{
      font-size: 1.5em;
      padding: 0 2%;
      margin-top:2%;
    }
    .vision-mission{
      margin-top: 0%;
      display:flex; 
      justify-content:space-between; 
      padding:2% 2%; 
      line-height:1.6;
      font-size: 1.5em;
    }
    .vision{
      width: 100%;
      padding:0 2%;
    }
    .vis-div{ 
      width:100%; 
      display:flex; 
      justify-content:space-between;
    }
    .vis-div #ok-close{
      display: none;
    }
    .vis-div a{
      text-decoration: none;
      color: black;
    }
    .long .p-long{
      text-align: justify;
    }
    .read-more{
      display: none;
    }
    .more-read{
      font-style: italic;

    }
    .vision p{
      text-align: justify; 
      font-family:calibri light;
    }
    .mission{
      width: 100%;
      padding:0 2%;
    }
    .mis-div{
      width:100%;
      display:flex;
      justify-content: space-between;
    }
    .mis-div #mis-close{
      display: none;
    }
    .read-read-more{
      display: none;
    }
    .more-more-read{
      font-style: italic;
      
    }
    .mission p{
      text-align: justify; 
      font-family:calibri light;
    }
    .mid-line{
      margin:5% 0;
      border:0.07em solid #ccbd82ff;
    }
    /*  */
/* end of about media */

/* Software page */
    .main-logo{
      display: none;
      position: absolute;
      margin-top: -1%;
    }
    .main-logo img{
      /* border: 1px solid ghostwhite; */
      border-radius: 2%;
    }
    .software-main-div{
      padding:1%; 
      border:1px solid #ccbd82ff; 
      width:100%; 
      height:630px; 
      margin-left:0%; 
      margin-top:0%; 
      border-radius:10px;
      font-size: xx-large;
    }
    .software-products{
      display:flex; 
      justify-content:space-between; 
      height:300px;
      font-size: xx-large;
    }
    .order-product {
      display:flex; 
      justify-content:space-between; 
      padding:1% 1%;
      
    }

    .order-product button{
      width: 300px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
      font-size: 1em;
      /* border: 1px solid black; */
    }
    .order-product .rep-pro{
      width: 35%;
    }
    .order-product .or-faq{
      width: 28%;
    }
      .order-product button svg{
        width: 36px;
        height: 36px;
        margin-top: 0%;
        margin-left: 5%;
      }
/* end software page */

/* hardware product */
  .hardware-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:100%; 
    height:630px; 
    margin-top:5%; 
    border-radius:10px;
    font-size: 1.2em;
  }    
  .big-screen{
    display: none;
  }
  .hardware-content p{
    line-height:2; 
    text-align: justify; 
    padding:0 2%;
    font-size: 1.5em;
  }
  .hardware-product {
    display:flex; 
    justify-content:space-between; 
    padding:1% 0%;
    font-size: 1.3em;
  }
  .hardware-projects{
    margin-top:4%; 
    display:none; 
    justify-content:space-between
  }
  .hardware-projects p{
    text-align:center;
  }
  .hardware-search{
    display:flex; 
    background:none; 
    border-bottom:1px solid bisque; 
    border-radius:5px;
  }
  .hardware-table{
    display:none; 
    justify-content:space-between; 
    margin-top:4%;
  }
  .project-button{
    display: flex;
    width: 50%;
    margin: 4% auto;
    font-size: xx-large;
    /* border: 1px solid black; */
    align-items: center;
    padding: 1%;
    justify-content: space-between;
  }.project-button a{
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
   .btn-extend #office-check{
    display: none;
    border: 1px solid black;
  }
  .project-button button{
    display: none;
    width: 100%;
    padding: 2%;
    font-size: large;
  }
  .hardware-product{
    width: 80%;
    position: relative;
      display: flex;
      background-color: transparent;
      /* border: 1px solid black; */
      cursor: pointer;
      margin-top: 0%;
      font-size: 0.8em;
      justify-content: space-between;
  }

  .min-services{
    display: flex;
  }
  .hidden{
    opacity: 0;
    pointer-events: none;
  }
  .first-buttons{
    position: absolute;
    transition: opacity 0.5s ease-in-out;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .first-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    font-size: 1.3em;
    /* border: 1px solid black; */
  }
  .first-buttons button svg{
        width: 30px;
        height: 30px;
        margin-top: -0.9%;
        margin-left: 5%;
  }
  .second-buttons{
    position: absolute;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .second-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    font-size: 1.3em;
  }
  .second-buttons button svg{
     width: 30px;
        height: 30px;
        margin-top: -0.9%;
        margin-left: 5%;
  }
  .hardware-services-button{
    margin-left: 1%;
    margin-top: 1%;
    padding-right: -7%;
    width: 300px;
  box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.2);
  }
  .hardware-services-button svg{
    width: 40px;
    height: 40px;
  }
  .hardware-services-button button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
  }
  .hardware-services-button button p{
    margin-top: 3%;
    font-size: 1.8em;
  }
  .right-direction{
    display: none;
  }
/* end of hardware product */

/* network products */
  .network-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:100%; 
    height:630px; 
    margin-left:0%; 
    margin-top:5%; 
    border-radius:10px;
  }
  .big-screen{
    display: block;
  }
  .network-main-div p{
    line-height:1.7; 
    text-align: justify; 
    padding:0 2%;
    /* font-size: xx-large; */
  }
  .networking-svc{
    font-size: 1.6em;
    margin-left: 2%;
  }
  .network-main-div .net-para{
    display: flex;
    font-size: 1.6em;
  }
  .min-services-net{
    display: flex;
  }
  .network-services-button{
    margin-left: 1%;
    margin-top: 1%;
    padding-right: -7%;
    width: 300px;
  box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.2);
  }
  .network-services-button button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 100%;
  }
  .network-services-button button p{
    font-size: 1.8em;
  }
  .network-services-button svg{
    width: 40px;
    height: 40px;
  }
  .third-buttons{
    position: absolute;
    transition: opacity 0.5s ease-in-out;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .third-buttons p{
    font-size: 1.8em;
  }
  .third-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    /*font-size: 0.8em;
     border: 1px solid black; */
  }
  .third-buttons button svg{
        width: 30px;
        height: 30px;
        margin-top: 1.5%;
        margin-left: 5%;
  }
  .fourth-buttons{
    position: absolute;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .fourth-buttons p{
    font-size: 1.8em;
  }
  .fourth-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    /*font-size: 1em;
     border: 1px solid black; */
  }
  .fourth-buttons button svg{
        width: 30px;
        height: 30px;
        margin-top: 1.5%;
        margin-left: 5%;
  }
  .network-product{
    width: 80%;
    position: relative;
    display: flex;
    background-color: transparent;
      /* border: 1px solid black; */
    cursor: pointer;
    margin-top: 0%;
    justify-content: space-between;
  }
  .third-buttons .network-service-request{
    width: 100%;
  }
/* end of network product */

/* services */
  .main-services-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:100%; 
    height:630px; 
    margin-left:0%; 
    margin-top:0%; 
    border-radius:10px;
  }
  .services-div button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.7em;
    margin:3% 3%;
  }
/* end of services */

/* contact form */

  .contact-form{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:100%; 
    height:630px;  
    border-radius:10px;
    font-size:1.5em;
    margin-top: 2%;
  }
  .social-media p{
    text-align:center; 
    font-size:1.5em;
  }
  /* .div-logo{
    border: 1px solid black;
  } */
  .form-btn {
    width:50%; 
    margin:5% auto; 
    display:flex;
  }
  .form-btn button{
    cursor: pointer;
    width:100%; 
    border:none; 
    padding: 2% 0; 
    border:1px solid #d3c1adff; 
    border-radius:4px;
    background-color: #d6c6b5;
    font-size: 1.3em;
  }
  .form-btn :hover{
    background-color: #e9e1d9;
  }
  .individual-div{
    border:1px solid bisque; 
    border-radius:5px; 
    padding:2%; 
    width:90%; 
    margin: 0 auto;
  }
  .individual-div p{
    font-size: larger;
  }
  .form-inputs{
    display:flex; 
    width:90%; 
    margin:5% auto;
    font-size: larger;
  }
  .form-inputs button{
    font-size: 0.85em;
  }
  .company-div{
    border:1px solid bisque; 
    border-radius:5px; 
    padding:2%; 
    width:90%; 
    margin: 0 auto;
    margin-top: -1%;
  }
  .company-div p{
    font-size: larger;
  }
  .company-div .form-inputs{
    width: 100%;
  }
/* end of contact form */

/* success div */
  .success-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:100%; 
    height:630px; 
    border-radius:10px;
  }
  .success-div p{
    text-align: center;
    font-size: 3em;
    margin-top: 3%;
  }
  .success-svg{
    /* border: 1px solid black; */
    width: fit-content;
    margin:7% auto;
  }
  .success-svg svg{
    width: 80px;
    height: 80px;
    border: 0.5px;
  }
  .success-message p{
    font-size: xx-large;
    width: 70%;
    margin: 0 auto;
  }
  .success-button{
    /* border: 1px solid black; */
    width: fit-content;
    margin: 5% auto;
  }
  .success-button button{
    width: 70px;
    height: 70px;
    padding: 1%;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    font-size: xx-large;
  }
/* end of success div */
}

/* Large devices (small laptops) */
@media (min-width: 992px) and (max-width: 1199px) {
   /*and larger screens */
      .div-logo{
      display: none;
    }

  /* Base settings */
    .main-base{
      display: none;
      font-family:calibri light;
      margin: 0 auto;
      justify-content: space-between;
      width: 100%;
      padding: 0px;
      font-size: larger;
      /* position: relative; */
    }
    .main-logo{
      display: none;
      position: absolute;
      margin-top: -1%;
    }
    .main-logo img{
      border: 1px solid ghostwhite;
      border-radius: 2%;
    }
    .main-menu{
      width: 100%;
      padding: 0px;
      background-color: transparent;
      /* background: linear-gradient(to bottom, #C19A6B, #cab399); */
      
    }
    .main-menu ul{
      list-style-type: none;
      display: flex;
      /* border: 1px solid black; */
      justify-content: space-between;
      padding: 0.5% 3%;
    }
    .main-menu ul a{
      text-decoration: none;
      color:#1b1a19;
      font-weight: 500;
    }
    .main-menu ul a.active {
      padding-bottom: 5%;
     border-bottom: 2px solid rgb(43, 43, 41); /* highlight color */
    }
/* end of base settings */

/* index media */
    .index-main{
      border: 1px solid rgb(184, 183, 183);
      width: 100%;
    }
    .upper-div{
      background-image: url('../images/background.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      background-attachment: fixed; /* Keeps the image fixed during scroll */
      height:99.8vh;
    }
    .upper-div-content{
      margin:15% auto; 
      width:40%; 
      line-height:2 
    }
    .upper-div-content #para{
      text-align: justify; 
      font-family:calibri light; 
      font-size:large;
      width: 100%;
    }
    .index-links{
      display:flex; 
      justify-content:space-between; 
      font-family:calibri light; 
      margin-top:5%; 
      font-size:0.9em;
    }
    .poke a{
      color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .poke-tc{
      margin-left: 17%;
    }
     .poke-ce a{
            color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .poke-tc a{
            color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .bottom-div{
      position:fixed; 
      border: 1px solid black;
      bottom:0; 
      width:fit-content; 
      margin:-7 auto; 
      font-family:calibri light;
    }
    .exp-pk{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #f5f5dc;
      padding: 0.8%;
      margin: -15% 6%;
      width: 30%;
      border-radius:2%;
      font-size: small;
      display: none;
    }
    .div-response{
      justify-content: space-between;
      display:none ;
      /*flex-direction: column;
       align-items: right; */
      gap: 10px;
      font-family: Arial, sans-serif;
      color: #008000; /* green text */
      font-weight: bold;
    }
        
    .spinner-too{
      border: 1px solid black;
      width: 15px;
      height: 15px;
      margin-top: 2%;
      /* border: 4px solid #e0e0e0; */
      border-top: 4px solid #008000; /* green spinner */
      border-radius: 50%;
      animation: spin 1s linear infinite;
      display: none;
    }
    @keyframes spin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .exp-pk-div{
      display: flex;
      justify-content: space-between;
    }
    .exp-chat{
      display: flex;
      justify-content: space-between;
      margin:2% 1%;
      width: 100%;
    }
    .exp-chat-wel{
      border: 1px solid gainsboro;
      width: 50%;
      border-radius: 5px;
      line-height: normal;
      padding: 1%;
      background-color: #cacab5;
      text-align: justify;
    }
    #subj{
      display: none;
      margin-left: 1%;
    }
    #div-sub{
      display: none;
    }
    .search-button {
      border: none;
    }
    .search-button svg{
      background-color: transparent;
    }
    .close-chat{
      display: flex;
      justify-content: space-between;
      margin: 0 2%;
    }
    .close-chat button{
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .close-chat button:hover{
      border-bottom: 0.3px solid grey;
    }
    .the-chat{
       border: 0.3px solid grey;
      border-radius: 5px;
      display: none;
      width: fit-content;
      background-color: #cacab5;
    }
    .the-chat textarea{
     border: none;
     outline: none;
     padding: 1%;
     border-radius: 5px;
     background-color: transparent;
    }
    .the-chat button{
      border: none;
      border-radius: 5px;
    }
    .the-chat button svg{
      width: 20px;
      height: 15px;
      margin-top: -2px;
      border: none;
      background-color: transparent;
      margin-top: 7%;
    }
     .com-div{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #f5f5dc;
      padding: 0.3%;
      margin: -25% 6%;
      width: 30%;
      border-radius:2%;
      font-size: small;
      display: none;
    }
    .com-div #com-join{
      /* border: 1px solid black; */
      width: fit-content;
      margin:0 auto;
    }
    .jocom-div{
      display: flex;
    }
    .jocom-div button{
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .com-login{
      width: 30%;
      margin: 0 auto;
    }
    .com-login a{
      font-style: italic;
      color: black;
    }
    .manual-input{
      border: 1px solid rgb(177, 175, 175);
      border-radius:3px;
      padding: 3%;
    }
    .manual-input div button:hover{
      background-color: #ddddcd;
      border: 1px solid #979793;
    }
    .emails div button{
      display: flex;
      width: 100%;
      padding: 1.5%;
      margin: 1% 0;
      border: 1px solid rgb(177, 175, 175);
      border-radius:3px;
      cursor: pointer;
      text-align: center;
    }
    .emails div button:hover{
      background-color: #ddddcd;
      border: 1px solid #979793;
    }
    .emails div button div{
      /* border: 1px solid black; */
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      width: 17%;
    }
    .emails div button div p{
      /* margin-left: 1%; */
      margin-top: 2%;
    }
    .emails div button div p{
      /* margin-left: 1%; */
      margin-top: 2%;
    }
    .emails div button div #app{
      /* margin-left: 1%; */
      margin-top: 3%;
      padding-top: 2%;
    }
    .emails div button #app-div{
      width: 25%;
    }
    .emails div button #gugo{
      width: 30%;
    }
    .manual-input div{
      display: flex;
    }
    .manual-input div p{
      width: 20%;
    }
    .manual-input div input{
      width: 95%;
      height: 40%;
      border: 1px solid rgb(177, 175, 175);
      margin-top: 2%;
    }
    .manual-input button{
      width: 95%;
      border: 1px solid rgb(177, 175, 175);
      margin: 1% 0;
      border-radius: 3px;
      padding: 1%;
      cursor: pointer;
    }
    .tc-div{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #f5f5dc;
      padding: 0.3%;
      margin: -20% auto;
      width: 40%;
      border-radius:1%;
      font-size: small;
      display: none;
    }
    .tc-div #tips-close{
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .tip-share{
      margin: 10% auto;
      width: fit-content;
    }
    .tip-share a{
      color: black;
    }
    .tp-msg-div{
      display: flex;
      margin: 3% auto;
      width: fit-content;
      
    }
    .sh-tip{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #d6d6c2;
      padding: 0.3%;
      margin: -18% 10%;
      width: 20%;
      border-radius:1%;
      font-size: small;
      display: none;
    }
    .sh-tip div{
      width: 100%;
      border: 1px solid #fafaeb;
      padding: 2%;
      border-radius: 1%;
    }
    .sh-tip input{
      height: 100%;
      width: 100%;
      outline: none;
      padding: 1%;
    }
    .sh-tip textarea{
      height: 100%;
      width: 100%;
      margin-top: 2%;
      resize: vertical;
      outline: none;
      padding: 1%;
    }
    .sh-tip #post-btn{
      width: 100%;
      padding: 1%;
      cursor: pointer;
    }
    .yrt-close{
      position: absolute;
      width: 20%;
      margin: -10% 90%;
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
/* end of index media */

/* about media */
    .about-main-div{
      border:1px solid #ccbd82ff; 
      width:51%; 
      height:470px; 
      margin-left:25.5%; 
      margin-top:7%; 
      border-radius:7px;
      display: block;
      padding: 1%;
    }
    #para{
      width: 50%;
    }
    .about-main-div .abt-paras{
      line-height:1.2; 
      text-align: justify; 
      padding: 0.4%; 
      font-family:calibri light;
    }
    .big-screen{
      display: none;
    }
    .more-read, .more-more-read, #ok-close, #mis-close{
      display: none;
    }
    .abt-musseru{
      margin-top: -2%;
      margin-bottom: 1%;
    }
    .laptops{
      display: none;
    }
    .vision-mission{
      width: 100%;
      display:flex; 
      justify-content:space-between; 
      /* padding:2% 5%;  */
      line-height:1.2;
      margin-top: 2%;
    }
    .vision{
      padding:0 1%;
      margin-bottom: 3%;;
      text-align: justify; 
    }
    .vision p{
      text-align: justify; 
      font-family:calibri light;
    }
    .mission{
      padding:0 1%;
      margin-bottom: 3%;;
      text-align: justify;
    }
    .mission p{
      text-align: justify; 
      font-family:calibri light;
    }
    .mid-line{
      margin:4% 0;
      border:0.07em solid #ccbd82ff;
    }
/* end of about media */

/* Software page */
    .software-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
    }
    .software-products{
      display:flex; 
      justify-content:space-between; 
      height:190px;
    }
    .order-product {
      display:flex; 
      justify-content:space-between; 
      padding:1% 3%;
    }

    .order-product button{
      width: 150px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
    }
      .order-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 1%;
        margin-left: 5%;
      }
/* end software page */

/* hardware product */
  .hardware-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
  }    
  .hardware-content p{
    line-height:1.5; 
    text-align: justify; 
    padding:0 2%;
  }
  .first-buttons{
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
  }
  .first-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
  }
  .first-buttons button svg{
        width: 30px;
        height: 30px;
        margin-top: -0.9%;
        margin-left: 5%;
  }
  .second-buttons{
    display: flex;
    width: 80%;
    padding-right: -7%;
    justify-content: space-between;
    margin-top: 0.4%;
  }
  .second-buttons .off-chk{
    width: 50%;
  }
  .second-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    /* font-size: 1.3em; */
  }
  .second-buttons button svg{
     width: 30px;
        height: 30px;
        margin-top: -0.9%;
        margin-left: 5%;
  }
  .first-buttons .hd-enq{
    width: 55%;
  }
  .first-buttons .hardware-service-request{
    /* border: 1px solid black; */
    width: 70%;
  }
  .hardware-product {
    /* border: 1px solid black; */
    display:flex; 
    justify-content:space-between; 
    padding:0 1%; 
    /*padding-left: 3%;*/
  }
  .hardware-services-button{
    display: none;
  }
  .project-button{
    display: none;
  }
  .hardware-product #office-check{
    margin-left: 3%;
  }
  .hardware-projects{
    margin-top:4%; 
    display:flex; 
    justify-content:space-between
  }
  .hardware-projects p{
    text-align:center;
  }
  .hardware-search{
    display:flex; 
    background:none; 
    border-bottom:1px solid bisque; 
    border-radius:5px;
  }
  .hardware-table{
    display:flex; 
    justify-content:space-between; 
    margin-top:4%;
  }
  .hardware-product button{
    width: 200px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
  }
  .hardware-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 1%;
        margin-left: 5%;
  }
/* end fo hardware product */
  .network-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
  }
  .network-main-div p{
    line-height:1.5; 
    text-align: justify; 
    padding:0 2%;
  }
  .network-services-button{
    display: none;
  }
  .third-buttons{
    width: 60%;
    display: flex;
    /* justify-content: space-between; */
  }
  .third-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    /*font-size: 1em;
     border: 1px solid black; */
  }
  .third-buttons button svg{
        width: 30px;
        height: 30px;
        margin-top: 1.5%;
        margin-left: 5%;
  }
  .fourth-buttons{
    display: flex;
    width: 48%;
    margin-top: 0.4%;
    /* justify-content: space-between; */
  }
  .fourth-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    /*font-size: 1em;
     border: 1px solid black; */
  }
  .fourth-buttons button svg{
        width: 30px;
        height: 30px;
        margin-top: 1.5%;
        margin-left: 5%;
  }
  .third-buttons .network-service-request{
    /* border: 1px solid black; */
    width: 100%;
  }
  .network-product{
    display:flex; 
    justify-content:space-between; 
  }
.network-product .nt-chk{
  /* border: 1px solid black; */
  width: 80%;
}
.network-product .nt-tools{
  /* border: 1px solid black; */
  width: 75%;
}
  .network-product button{
     width: 200px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
  }
  .network-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 1%;
        margin-left: 5%;
  }
/* end of network product */
/* services */
  .main-services-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
  }
  .services-div{
    display: flex;
  }
  .services-div button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-right: 2%;
  }
/* end of services */

/* contact form */

  .contact-form{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
  }
  .social-media p{
    text-align:center; 
    font-size:1.5em;
  }
  .form-btn {
    width:50%; 
    margin:4% auto; 
    display:flex;
  }
  .form-btn button{
    cursor: pointer;
    width:100%; 
    border:none; 
    padding: 2% 0; 
    border:1px solid #d3c1adff; 
    border-radius:4px;
    background-color: #d6c6b5;
  }
  .form-btn :hover{
    background-color: #e9e1d9;
  }
  .individual-div{
    border:1px solid bisque; 
    border-radius:5px; 
    padding:1%; 
    width:90%; 
    margin: -3% auto;
  }
  .individual-div p{
    margin-top: 1%;
    margin-bottom:-3%;
  }
  .form-inputs{
    display:flex; 
    width:70%; 
    margin:5% auto;
  }
  .company-div{
    border:1px solid bisque; 
    border-radius:5px; 
    /* padding:1%;  */
    width:90%; 
    margin: -3% auto;
  }
  .company-div input{
    margin:0% auto;
  }
  .company-div p{
    margin-top: 1%;
    margin-bottom:-3%;
  }
/* end of contact form */

/* community login */
  .com-login-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    /* border: 1px solid black; */
    width:50%; 
    height:461px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
  }
  .com-login-com{
    border: 2px solid rgb(133, 132, 128);
    width: 20%;
    margin: 15% auto;
    padding: 2%;
    border-radius: 5%;
  }
  fieldset{
    width: 50%;
    padding: 2%;
    border-radius: 7px;
    margin: 10% auto;
  }
  legend{
    margin:2% 5%;
    padding: 2%;
    font-weight: 500;
  }
  .form-log-com div input{
    margin: 3% 0;
    width: 100%;
    padding: 2%;
    outline: none;
    border: none;
  }
   .form-log-com div button{
    margin: 3% 0;
    width: 100%;
    padding: 2%;
    cursor: pointer;
    background-color: #60ac60;
    border: none;
    border-radius: 2%;
  }
  .div-com{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
    display: flex;
  }
  .chat-menu{
    /* border: 1px solid black; */
    display: flex;
    flex-direction: column;
    margin: auto 0;
    width: 25%;
    height:95%;
    justify-content:space-between;
    font-size: small;
  }
  .chat-menu a{
    display: flex;
    color: black;    
    text-decoration: none;
    width: 90%;
  }
  .chat-menu a svg{
    margin-top: -4%;
    margin-right: 10%;
    width: 18px;
  }
  .chat-menu ul li a{
    text-decoration: none;
    color: black;
    margin: 3% 2%;
  }
  .chat-contents{
    /* border: 1px solid cornsilk; */
    width: 100%;
  }
  .middle-chat{
    /* border: 1px solid black; */
    height: 60%;
    width: 100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 3% 2%;
  }
  .chat-contents-menu{
    display: flex;
    justify-content: space-between;
    border: none;
    /* border-bottom: 1px solid grey; */
    margin-left: 3%;
  }
  .content-menu-content{
    margin: 1% 1%;
    width:30%;
    display: flex;
    justify-content: space-between;
    padding: 0.7% 0;
    border-bottom: 1px solid grey;
  }
  .content-menu-content a{
    text-decoration: none;
    height: 15px;
  }
  .content-menu-content a svg{
    height: 15px;
  }
  .content-username{
    margin: 1% 1%;
    padding: 0.7% 0;
    display: block;
  }
  .avatar{
  width: 60px;
  height: 60px;
  border-radius: 50%; /* fully rounded */
  border: 1px solid rgb(238, 241, 191);
  display: flex;
  align-items: center;
  background-color: #f3f3f3; /* light background */
  justify-content: center; /* center contents */
  overflow: hidden; /* clip child */
  }
  .my-avatar{  
  width: 60%;
  height: 60%;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center; /* svg centered */
  }
  .my-avatar svg{
    height: 40px;
    width: 40px;

  }
  .content-username p{
    margin: 0 1%;
  }
  .content-username #user-name{
    margin:3% 10%;
    width: fit-content;
  }
  .com-log-out button{
    background-color: transparent;
    border: none;
    display: flex;
    cursor: pointer;
  }
  .com-log-out button svg{
    height: 15px;
  }
  .home-content{
    background-color: cornsilk;
    border:1px solid rgb(250, 241, 204); 
    width:100%; 
    height:90%; 
    margin:2% auto; 
    border-radius:3px; 
    padding:1%;
    display: grid;
    grid-template-columns: auto auto;
  }
  .login-btn{
    display: flex;
    background-color: transparent;
  }
  .login-btn #btns{
      background-color: transparent;
      
  }
  .login-btn #btns div{
    display: flex;
  }
  .login-btn #btns p{
    margin-top: 2%;
    margin-left: 2%;
    font-size: smaller;
  }
  .login-btn #btns svg{
    width: 15px;
    height: 15px;
  }
  .login-btn #btns img{
    width: 17px;
    height: 17px;
  }
  .thumbs{
    border: 1px solid #FFFDD0;
    border-radius: 5px;
    background-color: #f9e4bc;
    padding: 1%;
    display: flex;
    height:120px;

    -moz-box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
    cursor: pointer;
  }
  .thumbs p{
    text-align: center;
    font-size: 0.9em;
  }
  .thumbs #tips-id{
    display: flex;
    /*margin: 15% auto;
     border: 1px solid black; */
  }
  .the-tips{
    padding: 7% 1%;
    width: 25%;
    height: 100%;
    background-color: #FFFDD0;
  }
  .tips-contents{
    background-color: #f5f5d4;
    width: 100%;
    height: 70%;
    padding-top: 3%;
  }
  .tips-contents button{
    display: block;
    margin: 3% auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.7em;
  }
  .tips-contents button:hover{
    border-bottom: 1px solid black;

  }
  .the-tips a{
    margin-top: 10%;
    margin-left: 4%;
    color: green;
    display: flex;
    text-decoration: none;
    font-size: small;
  }
  .the-tips a:hover{
    text-decoration: underline;
  }
  .thumbs:hover{
    background-color: #FFFDD0;
  }
/* end of community login */

/* success div */
  .success-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
  }
  .success-div p{
    text-align: center;
    font-size: x-large;
    margin-top: 3%;
  }
  .success-svg{
    /* border: 1px solid black; */
    width: fit-content;
    margin:7% auto;
  }
  .success-svg svg{
    width: 45px;
    height: 45px;
    border: 0.5px;
  }
  .success-message p{
    font-size: larger;
    width: 70%;
    margin: 0 auto;
  }
  .success-button{
    /* border: 1px solid black; */
    width: fit-content;
    margin: 5% auto;
  }
  .success-button button{
    width: 40px;
    height: 40px;
    padding: 1%;
    border-radius: 50%;
    cursor: pointer;
    border: none;
  }
/* end of success div */
}

/* Extra large devices (desktops) */
@media (min-width: 1025px) and (max-width: 1366px) {
  /* Styles for desktops and larger screens */
      .div-logo{
      display: none;
    }

  /* Base settings */
    .waffle{
      display: none;
    }
    .main-base{
      /* display: none; */
      /* display: flex; */
      font-family:calibri light;
      margin: 0 auto;
      justify-content: space-between;
      width: 100%;
      padding: 0px;
      font-size: larger;
      /* position: relative; */
    }
    .main-logo{
      display: none;
      position: absolute;
      margin-top: -1%;
    }
    .main-logo img{
      /* border: 1px solid ghostwhite; */
      border-radius: 2%;
    }
    .main-menu{
      width: 100%;
      padding: 0px;
      background-color: transparent;
      /* background: linear-gradient(to bottom, #C19A6B, #cab399); */
      
    }
    .main-menu ul{
      list-style-type: none;
      display: flex;
      /* border: 1px solid black; */
      justify-content: space-between;
      padding: 0.5% 3%;
    }
    .main-menu ul a{
      text-decoration: none;
      color:#1b1a19;
      font-weight: 500;
    }
    .main-menu ul a.active {
      padding-bottom: 5%;
     border-bottom: 2px solid rgb(43, 43, 41); /* highlight color */
    }
/* end of base settings */

/* index media */
    .index-main{
      border: 1px solid rgb(184, 183, 183);
      width: 100%;
    }
    .upper-div{
      background-image: url('../images/background.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      background-attachment: fixed; /* Keeps the image fixed during scroll */
      height:99.8vh;
    }
    .upper-div-content{
      margin:15% auto; 
      width:40%; 
      line-height:2 
    }
    .upper-div-content #para{
      text-align: justify; 
      font-family:calibri light; 
      font-size:large;
      width: 100%;
    }
    .index-links{
      display:flex; 
      justify-content:space-between; 
      font-family:calibri light; 
      margin-top:5%; 
      font-size:0.9em;
    }
    .poke a{
      color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .poke-tc{
      margin-left: 17%;
    }
     .poke-ce a{
            color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .poke-tc a{
            color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .bottom-div{
      position:fixed; 
      /* border: 1px solid black; */
      bottom:0; 
      width:fit-content; 
      margin:-7 auto; 
      font-family:calibri light;
    }
    .exp-pk{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #f5f5dc;
      padding: 0.8%;
      margin: -15% 6%;
      width: 30%;
      border-radius:2%;
      font-size: small;
      display: none;
    }
    .div-response{
      justify-content: space-between;
      display:none ;
      /*flex-direction: column;
       align-items: right; */
      gap: 10px;
      font-family: Arial, sans-serif;
      color: #008000; /* green text */
      font-weight: bold;
    }
        
    .spinner-too{
      border: 1px solid black;
      width: 15px;
      height: 15px;
      margin-top: 2%;
      /* border: 4px solid #e0e0e0; */
      border-top: 4px solid #008000; /* green spinner */
      border-radius: 50%;
      animation: spin 1s linear infinite;
      display: none;
    }
    @keyframes spin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .exp-pk-div{
      display: flex;
      justify-content: space-between;
    }
    .exp-chat{
      display: flex;
      justify-content: space-between;
      margin:2% 1%;
      width: 100%;
    }
    .exp-chat-wel{
      border: 1px solid gainsboro;
      width: 50%;
      border-radius: 5px;
      line-height: normal;
      padding: 1%;
      background-color: #cacab5;
      text-align: justify;
    }
    #subj{
      display: none;
      margin-left: 1%;
    }
    #div-sub{
      display: none;
    }
    .search-button {
      border: none;
    }
    .search-button svg{
      background-color: transparent;
    }
    .close-chat{
      display: flex;
      justify-content: space-between;
      margin: 0 2%;
    }
    .close-chat button{
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .close-chat button:hover{
      border-bottom: 0.3px solid grey;
    }
    .the-chat{
       border: 0.3px solid grey;
      border-radius: 5px;
      display: none;
      width: fit-content;
      background-color: #cacab5;
    }
    .the-chat textarea{
     border: none;
     outline: none;
     padding: 1%;
     border-radius: 5px;
     background-color: transparent;
    }
    .the-chat button{
      border: none;
      border-radius: 5px;
    }
    .the-chat button svg{
      width: 20px;
      height: 15px;
      margin-top: -2px;
      border: none;
      background-color: transparent;
      margin-top: 7%;
    }
     .com-div{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #f5f5dc;
      padding: 0.3%;
      margin: -25% 6%;
      width: 30%;
      border-radius:2%;
      font-size: small;
      display: none;
    }
    .com-div #com-join{
      /* border: 1px solid black; */
      width: fit-content;
      margin:0 auto;
    }
    .jocom-div{
      display: flex;
    }
    .jocom-div button{
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .com-login{
      width: 30%;
      margin: 0 auto;
    }
    .com-login a{
      font-style: italic;
      color: black;
    }
    .manual-input{
      border: 1px solid rgb(177, 175, 175);
      border-radius:3px;
      padding: 3%;
    }
    .manual-input div button:hover{
      background-color: #ddddcd;
      border: 1px solid #979793;
    }
    .emails div button{
      display: flex;
      width: 100%;
      padding: 1.5%;
      margin: 1% 0;
      border: 1px solid rgb(177, 175, 175);
      border-radius:3px;
      cursor: pointer;
      text-align: center;
    }
    .emails div button:hover{
      background-color: #ddddcd;
      border: 1px solid #979793;
    }
    .emails div button div{
      /* border: 1px solid black; */
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      width: 17%;
    }
    .emails div button div p{
      /* margin-left: 1%; */
      margin-top: 2%;
    }
    .emails div button div p{
      /* margin-left: 1%; */
      margin-top: 2%;
    }
    .emails div button div #app{
      /* margin-left: 1%; */
      margin-top: 3%;
      padding-top: 2%;
    }
    .emails div button #app-div{
      width: 25%;
    }
    .emails div button #gugo{
      width: 30%;
    }
    .manual-input div{
      display: flex;
    }
    .manual-input div p{
      width: 20%;
    }
    .manual-input div input{
      width: 95%;
      height: 40%;
      border: 1px solid rgb(177, 175, 175);
      margin-top: 2%;
    }
    .manual-input button{
      width: 95%;
      border: 1px solid rgb(177, 175, 175);
      margin: 1% 0;
      border-radius: 3px;
      padding: 1%;
      cursor: pointer;
    }
    .tc-div{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #f5f5dc;
      padding: 0.3%;
      margin: -20% auto;
      width: 40%;
      border-radius:1%;
      font-size: small;
      display: none;
    }
    .tc-div #tips-close{
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .tip-share{
      margin: 10% auto;
      width: fit-content;
    }
    .tip-share a{
      color: black;
    }
    .tp-msg-div{
      display: flex;
      margin: 3% auto;
      width: fit-content;
      
    }
    .sh-tip{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #d6d6c2;
      padding: 0.3%;
      margin: -18% 10%;
      width: 20%;
      border-radius:1%;
      font-size: small;
      display: none;
    }
    .sh-tip div{
      width: 100%;
      border: 1px solid #fafaeb;
      padding: 2%;
      border-radius: 1%;
    }
    .sh-tip input{
      height: 100%;
      width: 100%;
      outline: none;
      padding: 1%;
    }
    .sh-tip textarea{
      height: 100%;
      width: 100%;
      margin-top: 2%;
      resize: vertical;
      outline: none;
      padding: 1%;
    }
    .sh-tip #post-btn{
      width: 100%;
      padding: 1%;
      cursor: pointer;
    }
    .yrt-close{
      position: absolute;
      width: 20%;
      margin: -10% 90%;
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
/* end of index media */

/* about media */
    .about-main-div{
      border:1px solid #ccbd82ff; 
      width:51%; 
      height:470px; 
      margin-left:25.5%; 
      margin-top:7%; 
      border-radius:7px;
      display: block;
      padding: 1%;
    }
    #para{
      width: 50%;
    }
    .about-main-div .abt-paras{
      line-height:1.2; 
      text-align: justify; 
      padding: 0.4%; 
      font-family:calibri light;
    }
    .big-screen{
      display: none;
    }
    .more-read, .more-more-read, #ok-close, #mis-close{
      display: none;
    }
    .abt-musseru{
      margin-top: -2%;
      margin-bottom: 1%;
    }
    .laptops{
      display: none;
    }
    .vision-mission{
      width: 100%;
      display:flex; 
      justify-content:space-between; 
      /* padding:2% 5%;  */
      line-height:1.2;
      margin-top: 2%;
    }
    .vision{
      padding:0 1%;
      margin-bottom: 3%;;
      text-align: justify; 
    }
    .vision p{
      text-align: justify; 
      font-family:calibri light;
    }
    .mission{
      padding:0 1%;
      margin-bottom: 3%;;
      text-align: justify;
    }
    .mission p{
      text-align: justify; 
      font-family:calibri light;
    }
    .mid-line{
      margin:4% 0;
      border:0.07em solid #ccbd82ff;
    }
/* end of about media */

/* Software page */
    .software-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
    }
    .software-products{
      display:flex; 
      justify-content:space-between; 
      height:190px;
    }
    .order-product {
      display:flex; 
      justify-content:space-between; 
      padding:1% 3%;
    }

    .order-product button{
      width: 150px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
    }
      .order-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 1%;
        margin-left: 5%;
      }
/* end software page */

/* hardware product */
  .hardware-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
  }    
  .hardware-content p{
    line-height:1.5; 
    text-align: justify; 
    padding:0 2%;
  }
  .first-buttons{
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
  }
  .first-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
  }
  .first-buttons button svg{
        width: 30px;
        height: 30px;
        margin-top: -0.9%;
        margin-left: 5%;
  }
  .second-buttons{
    display: flex;
    width: 80%;
    padding-right: -7%;
    justify-content: space-between;
    margin-top: 0.4%;
  }
  .second-buttons .off-chk{
    width: 50%;
  }
  .second-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    /* font-size: 1.3em; */
  }
  .second-buttons button svg{
     width: 30px;
        height: 30px;
        margin-top: -0.9%;
        margin-left: 5%;
  }
  .first-buttons .hd-enq{
    width: 55%;
  }
  .first-buttons .hardware-service-request{
    /* border: 1px solid black; */
    width: 70%;
  }
  .hardware-product {
    /* border: 1px solid black; */
    display:flex; 
    justify-content:space-between; 
    padding:0 1%; 
    /*padding-left: 3%;*/
  }
  .hardware-services-button{
    display: none;
  }
  .project-button{
    display: none;
  }
  .hardware-product #office-check{
    margin-left: 3%;
  }
  .hardware-projects{
    margin-top:4%; 
    display:flex; 
    justify-content:space-between
  }
  .hardware-projects p{
    text-align:center;
  }
  .hardware-search{
    display:flex; 
    background:none; 
    border-bottom:1px solid bisque; 
    border-radius:5px;
  }
  .hardware-table{
    display:flex; 
    justify-content:space-between; 
    margin-top:4%;
  }
  .hardware-product button{
    width: 200px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
  }
  .hardware-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 1%;
        margin-left: 5%;
  }
/* end fo hardware product */
  .network-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
  }
  .network-main-div p{
    line-height:1.5; 
    text-align: justify; 
    padding:0 2%;
  }
  .network-services-button{
    display: none;
  }
  .third-buttons{
    width: 60%;
    display: flex;
    /* justify-content: space-between; */
  }
  .third-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    /*font-size: 1em;
     border: 1px solid black; */
  }
  .third-buttons button svg{
        width: 30px;
        height: 30px;
        margin-top: 1.5%;
        margin-left: 5%;
  }
  .fourth-buttons{
    display: flex;
    width: 48%;
    margin-top: 0.4%;
    /* justify-content: space-between; */
  }
  .fourth-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    /*font-size: 1em;
     border: 1px solid black; */
  }
  .fourth-buttons button svg{
        width: 30px;
        height: 30px;
        margin-top: 1.5%;
        margin-left: 5%;
  }
  .third-buttons .network-service-request{
    /* border: 1px solid black; */
    width: 100%;
  }
  .network-product{
    display:flex; 
    justify-content:space-between; 
  }
.network-product .nt-chk{
  /* border: 1px solid black; */
  width: 80%;
}
.network-product .nt-tools{
  /* border: 1px solid black; */
  width: 75%;
}
  .network-product button{
     width: 200px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
  }
  .network-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 1%;
        margin-left: 5%;
  }
/* end of network product */
/* services */
  .main-services-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
  }
  .services-div{
    display: flex;
  }
  .services-div button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-right: 2%;
  }
/* end of services */

/* contact form */

  .contact-form{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
  }
  .social-media p{
    text-align:center; 
    font-size:1.5em;
  }
  .form-btn {
    width:50%; 
    margin:4% auto; 
    display:flex;
  }
  .form-btn button{
    cursor: pointer;
    width:100%; 
    border:none; 
    padding: 2% 0; 
    border:1px solid #d3c1adff; 
    border-radius:4px;
    background-color: #d6c6b5;
  }
  .form-btn :hover{
    background-color: #e9e1d9;
  }
  .individual-div{
    border:1px solid bisque; 
    border-radius:5px; 
    padding:1%; 
    width:90%; 
    margin: -3% auto;
  }
  .individual-div p{
    margin-top: 1%;
    margin-bottom:-3%;
  }
  .form-inputs{
    display:flex; 
    width:70%; 
    margin:5% auto;
  }
  .company-div{
    border:1px solid bisque; 
    border-radius:5px; 
    /* padding:1%;  */
    width:90%; 
    margin: -3% auto;
  }
  .company-div input{
    margin:0% auto;
  }
  .company-div p{
    margin-top: 1%;
    margin-bottom:-3%;
  }
/* end of contact form */

/* community login */
  .com-login-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    /* border: 1px solid black; */
    width:50%; 
    height:461px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
  }
  .com-login-com{
    border: 2px solid rgb(133, 132, 128);
    width: 20%;
    margin: 15% auto;
    padding: 2%;
    border-radius: 5%;
  }
  fieldset{
    width: 50%;
    padding: 2%;
    border-radius: 7px;
    margin: 10% auto;
  }
  legend{
    margin:2% 5%;
    padding: 2%;
    font-weight: 500;
  }
  .form-log-com div input{
    margin: 3% 0;
    width: 100%;
    padding: 2%;
    outline: none;
    border: none;
  }
   .form-log-com div button{
    margin: 3% 0;
    width: 100%;
    padding: 2%;
    cursor: pointer;
    background-color: #60ac60;
    border: none;
    border-radius: 2%;
  }
  .div-com{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
    display: flex;
  }
  .chat-menu{
    /* border: 1px solid black; */
    display: flex;
    flex-direction: column;
    margin: auto 0;
    width: 25%;
    height:95%;
    justify-content:space-between;
    font-size: small;
  }
  .chat-menu a{
    display: flex;
    color: black;    
    text-decoration: none;
    width: 90%;
  }
  .chat-menu a svg{
    margin-top: -4%;
    margin-right: 10%;
    width: 18px;
  }
  .chat-menu ul li a{
    text-decoration: none;
    color: black;
    margin: 3% 2%;
  }
  .chat-contents{
    /* border: 1px solid cornsilk; */
    width: 100%;
  }
  .middle-chat{
    /* border: 1px solid black; */
    height: 60%;
    width: 100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 3% 2%;
  }
  .chat-contents-menu{
    display: flex;
    justify-content: space-between;
    border: none;
    /* border-bottom: 1px solid grey; */
    margin-left: 3%;
  }
  .content-menu-content{
    margin: 1% 1%;
    width:30%;
    display: flex;
    justify-content: space-between;
    padding: 0.7% 0;
    border-bottom: 1px solid grey;
  }
  .content-menu-content a{
    text-decoration: none;
    height: 15px;
  }
  .content-menu-content a svg{
    height: 15px;
  }
  .content-username{
    margin: 1% 1%;
    padding: 0.7% 0;
    display: block;
  }
  .avatar{
  width: 60px;
  height: 60px;
  border-radius: 50%; /* fully rounded */
  border: 1px solid rgb(238, 241, 191);
  display: flex;
  align-items: center;
  background-color: #f3f3f3; /* light background */
  justify-content: center; /* center contents */
  overflow: hidden; /* clip child */
  }
  .my-avatar{  
  width: 60%;
  height: 60%;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center; /* svg centered */
  }
  .my-avatar svg{
    height: 40px;
    width: 40px;

  }
  .content-username p{
    margin: 0 1%;
  }
  .content-username #user-name{
    margin:3% 10%;
    width: fit-content;
  }
  .com-log-out button{
    background-color: transparent;
    border: none;
    display: flex;
    cursor: pointer;
  }
  .com-log-out button svg{
    height: 15px;
  }
  .home-content{
    background-color: cornsilk;
    border:1px solid rgb(250, 241, 204); 
    width:100%; 
    height:90%; 
    margin:2% auto; 
    border-radius:3px; 
    padding:1%;
    display: grid;
    grid-template-columns: auto auto;
  }
  .login-btn{
    display: flex;
    background-color: transparent;
  }
  .login-btn #btns{
      background-color: transparent;
      
  }
  .login-btn #btns div{
    display: flex;
  }
  .login-btn #btns p{
    margin-top: 2%;
    margin-left: 2%;
    font-size: smaller;
  }
  .login-btn #btns svg{
    width: 15px;
    height: 15px;
  }
  .login-btn #btns img{
    width: 17px;
    height: 17px;
  }
  .thumbs{
    border: 1px solid #FFFDD0;
    border-radius: 5px;
    background-color: #f9e4bc;
    padding: 1%;
    display: flex;
    height:120px;

    -moz-box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
    cursor: pointer;
  }
  .thumbs p{
    text-align: center;
    font-size: 0.9em;
  }
  .thumbs #tips-id{
    display: flex;
    /*margin: 15% auto;
     border: 1px solid black; */
  }
  .the-tips{
    padding: 7% 1%;
    width: 25%;
    height: 100%;
    background-color: #FFFDD0;
  }
  .tips-contents{
    background-color: #f5f5d4;
    width: 100%;
    height: 70%;
    padding-top: 3%;
  }
  .tips-contents button{
    display: block;
    margin: 3% auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.7em;
  }
  .tips-contents button:hover{
    border-bottom: 1px solid black;

  }
  .the-tips a{
    margin-top: 10%;
    margin-left: 4%;
    color: green;
    display: flex;
    text-decoration: none;
    font-size: small;
  }
  .the-tips a:hover{
    text-decoration: underline;
  }
  .thumbs:hover{
    background-color: #FFFDD0;
  }
/* end of community login */

/* success div */
  .success-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:465px; 
    margin-left:26%; 
    margin-top:7%; 
    border-radius:10px;
  }
  .success-div p{
    text-align: center;
    font-size: x-large;
    margin-top: 3%;
  }
  .success-svg{
    /* border: 1px solid black; */
    width: fit-content;
    margin:7% auto;
  }
  .success-svg svg{
    width: 45px;
    height: 45px;
    border: 0.5px;
  }
  .success-message p{
    font-size: larger;
    width: 70%;
    margin: 0 auto;
  }
  .success-button{
    /* border: 1px solid black; */
    width: fit-content;
    margin: 5% auto;
  }
  .success-button button{
    width: 40px;
    height: 40px;
    padding: 1%;
    border-radius: 50%;
    cursor: pointer;
    border: none;
  }
/* end of success div */
}

/* Some laptops*/
@media (min-width: 1600px) {
  .waffle{
      display: none;
    }  
  .div-logo{
      display: none;
    }
  /* Base settings */
    .main-base{
        /* display: none; */
        font-family:calibri light;
        margin: 0 auto;
        justify-content: space-between;
        width: 100%;
        padding: 0px;
        font-size: larger;
        /* position: relative; */
    }
    .main-logo{
      display: none;
      position: absolute;
      margin-top: -1%;
    }
    .main-logo img{
      /* border: 1px solid ghostwhite; */
      border-radius: 2%;
    }
    .main-menu{
      width: 100%;
      padding: 0px;
      background-color: transparent;
      /* background: linear-gradient(to bottom, #C19A6B, #cab399); */
      
    }
    .main-menu ul{
      list-style-type: none;
      display: flex;
      /* border: 1px solid black; */
      justify-content: space-between;
      padding: 0.5% 3%;
    }
    .main-menu ul a{
      text-decoration: none;
      color:#1b1a19;
      font-weight: 500;
    }
    .main-menu ul a.active {
      padding-bottom: 5%;
     border-bottom: 2px solid rgb(43, 43, 41); /* highlight color */
    }
/* end of base settings */

/* index media */
    .index-main{
      border: 1px solid rgb(184, 183, 183);
      width: 100%;
    }
    .upper-div{
      background-image: url('../images/background.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      background-attachment: fixed; /* Keeps the image fixed during scroll */
      height:99.8vh;
    }
    .upper-div-content{
      margin:20% auto; 
      width:30%; 
      line-height:2 
    }
    .upper-div-content #para{
      text-align: justify; 
      font-family:calibri light; 
      font-size:large;
    }
    .index-links{
      display:flex; 
      justify-content:space-between; 
      font-family:calibri light; 
      margin-top:3%; 
      font-size:0.9em;
    }
    .poke a{
      color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .poke-ce{
      margin-left: -10%;
    }
    .poke-ce a{
            color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .poke-tc a{
            color:black; 
      text-decoration:none; 
      font-style:italic;
    }
    .bottom-div{
      position:fixed; 
      bottom:0; 
      width:100%; 
      margin:0 auto; 
      font-family:calibri light;
    }
    .exp-pk{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #f5f5dc;
      padding: 0.3%;
      margin: -15% 6%;
      width: 20%;
      border-radius:2%;
      font-size: small;
      display: none;
    }
    .div-response{
      justify-content: space-between;
      display:none ;
      /*flex-direction: column;
       align-items: right; */
      gap: 10px;
      font-family: Arial, sans-serif;
      color: #008000; /* green text */
      font-weight: bold;
    }
    
    .spinner-too{
      border: 1px solid black;
      width: 15px;
      height: 15px;
      margin-top: 2%;
      /* border: 4px solid #e0e0e0; */
      border-top: 4px solid #008000; /* green spinner */
      border-radius: 50%;
      animation: spin 1s linear infinite;
      display: none;
    }
    @keyframes spin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .exp-pk-div{
      display: flex;
      justify-content: space-between;
    }
    .exp-chat{
      display: flex;
      justify-content: space-between;
      margin:2% 1%;
      width: 100%;
    }
    .exp-chat-wel{
      border: 1px solid gainsboro;
      width: 50%;
      border-radius: 5px;
      line-height: normal;
      padding: 1%;
      background-color: #cacab5;
      text-align: justify;
    }
    #subj{
      display: none;
      margin-left: 1%;
    }
    #div-sub{
      display: none;
    }
    .search-button {
      border: none;
    }
    .search-button svg{
      background-color: transparent;
    }
    .close-chat{
      display: flex;
      justify-content: space-between;
      margin: 0 2%;
    }
    .close-chat button{
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .close-chat button:hover{
      border-bottom: 0.3px solid grey;
    }
    .the-chat{
       border: 0.3px solid grey;
      border-radius: 5px;
      display: none;
      width: fit-content;
      background-color: #cacab5;
    }
    .the-chat textarea{
     border: none;
     outline: none;
     padding: 1%;
     border-radius: 5px;
     background-color: transparent;
    }
    .the-chat button{
      border: none;
      border-radius: 5px;
    }
    .the-chat button svg{
      width: 20px;
      height: 15px;
      margin-top: -2px;
      border: none;
      background-color: transparent;
      margin-top: 7%;
    }
     .com-div{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #f5f5dc;
      padding: 0.3%;
      margin: -15% 6%;
      width: 20%;
      border-radius:2%;
      font-size: small;
      display: none;
    }
    .com-div #com-join{
      /* border: 1px solid black; */
      width: fit-content;
      margin:0 auto;
    }
    .jocom-div{
      display: flex;
    }
    .jocom-div button{
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .com-login{
      width: 30%;
      margin: 0 auto;
    }
    .com-login a{
      font-style: italic;
      color: black;
    }
    .manual-input{
      border: 1px solid rgb(177, 175, 175);
      border-radius:3px;
      padding: 3%;
    }
    .manual-input div button:hover{
      background-color: #ddddcd;
      border: 1px solid #979793;
    }
    .emails div button{
      display: flex;
      width: 100%;
      padding: 1.5%;
      margin: 1% 0;
      border: 1px solid rgb(177, 175, 175);
      border-radius:3px;
      cursor: pointer;
      text-align: center;
    }
    .emails div button:hover{
      background-color: #ddddcd;
      border: 1px solid #979793;
    }
    .emails div button div{
      /* border: 1px solid black; */
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      width: 17%;
    }
    .emails div button div p{
      /* margin-left: 1%; */
      margin-top: 2%;
    }
    .emails div button div p{
      /* margin-left: 1%; */
      margin-top: 2%;
    }
    .emails div button div #app{
      /* margin-left: 1%; */
      margin-top: 3%;
      padding-top: 2%;
    }
    .emails div button #app-div{
      width: 25%;
    }
    .emails div button #gugo{
      width: 30%;
    }
    .manual-input div{
      display: flex;
    }
    .manual-input div p{
      width: 20%;
    }
    .manual-input div input{
      width: 95%;
      height: 40%;
      border: 1px solid rgb(177, 175, 175);
      margin-top: 2%;
    }
    .manual-input button{
      width: 95%;
      border: 1px solid rgb(177, 175, 175);
      margin: 1% 0;
      border-radius: 3px;
      padding: 1%;
      cursor: pointer;
    }
    .tc-div{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #f5f5dc;
      padding: 0.3%;
      margin: -15% -5%;
      width: 40%;
      border-radius:1%;
      font-size: small;
      display: none;
    }
    .tc-div #tips-close{
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    .tip-share{
      margin: 10% auto;
      width: fit-content;
    }
    .tip-share a{
      color: black;
    }
    .tp-msg-div{
      display: flex;
      margin: 3% auto;
      width: fit-content;
      
    }
    .sh-tip{
      position: absolute;
      border: 1px solid #fafaeb;
      background-color: #d6d6c2;
      padding: 0.3%;
      margin: -13% 10%;
      width: 12%;
      border-radius:1%;
      font-size: small;
      display: none;
    }
    .sh-tip div{
      width: 100%;
      border: 1px solid #fafaeb;
      padding: 2%;
      border-radius: 1%;
    }
    .sh-tip input{
      height: 100%;
      width: 100%;
      outline: none;
      padding: 1%;
    }
    .sh-tip textarea{
      height: 100%;
      width: 100%;
      margin-top: 2%;
      outline: none;
      padding: 1%;
    }
    .sh-tip #post-btn{
      width: 100%;
      padding: 1%;
      cursor: pointer;
    }
    .yrt-close{
      position: absolute;
      width: 20%;
      margin: -10% 90%;
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
/* end of index media */

/* about media */
    .about-main-div{
      width:50%; 
      height:630px; 
      margin-left:26%; 
      margin-top:10%; 
      border-radius:7px;
      border:1px solid #ccbd82ff;
      padding: 1%;
      text-align: justify;
      line-height: 1.8;
    }
    .about-main-div #para{
      line-height:2; 
      text-align: justify; 
      padding:1% 5%; 
      font-family:calibri light;
    }
    .vision-mission{
      display:flex; 
      justify-content:space-between; 
      padding:2% 0%; line-height:1.6;
    }
    .vision{
      padding:0 2%;
    }
    .vis-div{
      display: flex;
      justify-content: space-between;
    }
    .more-read{
      display: none;
    }
    #ok-close{
      display: none;
    }
    .vision p{
      text-align: justify; 
      font-family:calibri light;
    }
    .mission{
      padding:0 2%;
    }
    .mis-div{
      display: flex;
      justify-content: space-between;
    }
    .more-more-read{
      display: none;
    }
    #mis-close{
      display: none;
    }
    .mission p{
      text-align: justify; 
      font-family:calibri light;
    }
/* end of about media */

/* Software page */
    .software-main-div{
      padding:1%; 
      border:1px solid #ccbd82ff; 
      width:50%; 
      height:630px; 
      margin-left:26%; 
      margin-top:10%; 
      border-radius:10px;
    }
    .software-products{
      display:flex; 
      justify-content:space-between; 
      height:300px;
    }
    .order-product {
      display:flex; 
      justify-content:space-between; 
      padding:1% 3%;
    }

    .order-product button{
      width: 150px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
    }
      .order-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 1%;
        margin-left: 5%;
      }
/* end software page */

/* hardware product */
  .hardware-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:630px; 
    margin-left:26%; 
    margin-top:10%; 
    border-radius:10px;
  }    
  .hardware-content p{
    line-height:2; 
    text-align: justify; 
    padding:0 2%;
  }
  .hardware-product {
    display:flex; 
    justify-content:space-between; 
    padding:1% 2%;
  }
  .hardware-services-button{
    display: none;
  }
  .first-buttons{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .first-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
  }
  .first-buttons button svg{
        width: 30px;
        height: 30px;
        margin-top: -0.9%;
        margin-left: 5%;
  }
  .second-buttons{
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .second-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    /* font-size: 1.3em; */
  }
  .second-buttons button svg{
     width: 30px;
        height: 30px;
        margin-top: -0.9%;
        margin-left: 5%;
  }
  .first-buttons .hardware-service-request{
    /* border: 1px solid black; */
    width: 50%;
  }
  .project-button{
    display: none;
  }
  .hardware-projects{
    margin-top:4%; 
    display:flex; 
    justify-content:space-between
  }
  .hardware-projects p{
    text-align:center;
  }
  .hardware-search{
    display:flex; 
    background:none; 
    border-bottom:1px solid bisque; 
    border-radius:5px;
  }
  .hardware-table{
    display:flex; 
    justify-content:space-between; 
    margin-top:4%;
  }
  .hardware-product button{
    width: 200px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
  }
  .hardware-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 1%;
        margin-left: 5%;
  }
/* end fo hardware product */

/* network products */
  .network-main-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:630px; 
    margin-left:26%; 
    margin-top:10%; 
    border-radius:10px;
  }
  .network-main-div p{
    line-height:2; 
    text-align: justify; 
    padding:0 2%;
  }
  .network-services-button{
    display: none;
  }
  .third-buttons{
    width: 50%;
    display: flex;
    justify-content: space-between;
  }
  .third-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    /*font-size: 1em;
     border: 1px solid black; */
  }
  .third-buttons button svg{
        width: 30px;
        height: 30px;
        margin-top: 1.5%;
        margin-left: 5%;
  }
  .fourth-buttons{
    display: flex;
    width: 50%;
    justify-content: space-between;
  }
  .fourth-buttons button{
    padding: 2%;
    display: flex;
    background-color: transparent;
    border: none;
    width: 80%;
    /*font-size: 1em;
     border: 1px solid black; */
  }
  .fourth-buttons button svg{
        width: 30px;
        height: 30px;
        margin-top: 1.5%;
        margin-left: 5%;
  }
  .third-buttons .network-service-request{
    /* border: 1px solid black; */
    width: 50%;
  }
  .network-product{
    display:flex; 
    justify-content:space-between; 
    padding:1% 2%;
  }

  .network-product button{
     width: 200px;
      display: flex;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-top: 2%;
  }
  .network-product button svg{
        width: 15px;
        height: 15px;
        margin-top: 3%;
        margin-left: 5%;
  }
/* end of network product */

/* services */
  .main-services-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:630px; 
    margin-left:26%; 
    margin-top:10%; 
    border-radius:10px;
  }
  /* .services-div{

  } */
  .services-div button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.8em;
    margin:1% 3%;
  }
/* end of services */

/* contact form */

  .contact-form{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:630px; 
    margin-left:26%; 
    margin-top:10%; 
    border-radius:10px;
  }
  .social-media p{
    text-align:center; 
    font-size:1.5em;
  }
  .form-btn {
    width:50%; 
    margin:5% auto; 
    display:flex;
  }
  .form-btn button{
    cursor: pointer;
    width:100%; 
    border:none; 
    padding: 2% 0; 
    border:1px solid #d3c1adff; 
    border-radius:4px;
    background-color: #d6c6b5;
  }
  .form-btn :hover{
    background-color: #e9e1d9;
  }
  .individual-div{
    border:1px solid bisque; 
    border-radius:5px; 
    padding:2%; 
    width:70%; 
    margin: 0 auto;
  }
  .form-inputs{
    display:flex; 
    width:70%; 
    margin:5% auto;
  }
  .company-div{
    border:1px solid bisque; 
    border-radius:5px; 
    padding:2%; 
    width:70%; 
    margin: 0 auto;
  }
/* end of contact form */

/* community login */
  .com-login-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:630px; 
    margin-left:26%; 
    margin-top:10%; 
    border-radius:10px;
  }
  .com-login-com{
    border: 2px solid rgb(133, 132, 128);
    width: 20%;
    margin: 15% auto;
    padding: 2%;
    border-radius: 5%;
  }
  fieldset{
    width: 40%;
    padding: 2%;
    border-radius: 7px;
    margin: 13% auto;
  }
  legend{
    margin:2% 5%;
    padding: 2%;
    font-weight: 500;
  }
  .form-log-com div input{
    margin: 3% 0;
    width: 100%;
    padding: 2%;
    outline: none;
    border: none;
  }
   .form-log-com div button{
    margin: 3% 0;
    width: 100%;
    padding: 2%;
    cursor: pointer;
    background-color: #60ac60;
    border: none;
    border-radius: 2%;
  }
  .div-com{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:650px; 
    margin-left:26%; 
    margin-top:9%; 
    border-radius:10px;
    display: flex;
  }
  .chat-menu{
    /* border: 1px solid black; */
    display: flex;
    flex-direction: column;
    margin: auto 0;
    width: 16%;
    height:90%;
    justify-content:space-between;
    font-size: small;
  }
  .chat-menu a{
    display: flex;
    color: black;    
    text-decoration: none;
    width: 90%;
  }
  .chat-menu a svg{
    margin-top: -4%;
    margin-right: 10%;
    width: 18px;
  }
  .chat-menu ul li a{
    text-decoration: none;
    color: black;
    margin: 3% 2%;
  }
  .chat-contents{
    /* border: 1px solid cornsilk; */
    width: 100%;
  }
  .middle-chat{
    /* border: 1px solid black; */
    height: 60%;
    width: 100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 3% 2%;
  }
  .chat-contents-menu{
    display: flex;
    justify-content: space-between;
    border: none;
    /* border-bottom: 1px solid grey; */
    margin-left: 3%;
  }
  .content-menu-content{
    margin: 1% 1%;
    width:30%;
    display: flex;
    justify-content: space-between;
    padding: 0.7% 0;
    border-bottom: 1px solid grey;
  }
  .content-menu-content a{
    text-decoration: none;
    height: 15px;
  }
  .content-menu-content a svg{
    height: 15px;
  }
  .content-username{
    margin: 1% 1%;
    padding: 0.7% 0;
    display: block;
  }
  .avatar{
  width: 80px;
  height: 80px;
  border-radius: 50%; /* fully rounded */
  border: 1px solid rgb(238, 241, 191);
  display: flex;
  align-items: center;
  background-color: #f3f3f3; /* light background */
  justify-content: center; /* center contents */
  overflow: hidden; /* clip child */
  }
  .my-avatar{  
  width: 60%;
  height: 60%;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center; /* svg centered */
  }
  .my-avatar svg{
    height: 40px;
    width: 40px;

  }
  .content-username p{
    margin: 0 1%;
  }
  .content-username #user-name{
    margin:3% 10%;
    width: fit-content;
  }
  .com-log-out button{
    background-color: transparent;
    border: none;
    display: flex;
    cursor: pointer;
  }
  .com-log-out button svg{
    height: 15px;
  }
  .home-content{
    background-color: cornsilk;
    border:1px solid rgb(250, 241, 204); 
    width:100%; 
    height:54%; 
    margin:18% auto; 
    border-radius:3px; 
    padding:1%;
    display: grid;
    grid-template-columns: auto auto auto;
  }
  .login-btn{
    display: flex;
    background-color: transparent;
  }
  .login-btn #btns{
      background-color: transparent;
      
  }
  .login-btn #btns div{
    display: flex;
  }
  .login-btn #btns p{
    margin-top: 2%;
    margin-left: 2%;
    font-size: smaller;
  }
  .login-btn #btns svg{
    width: 15px;
    height: 15px;
  }
  .login-btn #btns img{
    width: 17px;
    height: 17px;
  }
  /* .home-content div{
    
  } */
  .thumbs{
    border: 1px solid #FFFDD0;
    border-radius: 5px;
    background-color: #f9e4bc;
    padding: 1%;
    display: flex;
    height: 150px;

    -moz-box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
    cursor: pointer;
  }
  .thumbs p{
    text-align: center;
  }
  .thumbs #tips-id{
    display: flex;
    /*margin: 15% auto;
     border: 1px solid black; */
  }
  .the-tips{
    padding: 7% 1%;
    width: 25%;
    height: 100%;
    background-color: #FFFDD0;
  }
  .tips-contents{
    background-color: #f5f5d4;
    width: 100%;
    height: 77%;
    padding-top: 3%;
  }
  .tips-contents button{
    display: block;
    margin: 5% auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.7em;
  }
  .tips-contents button:hover{
    border-bottom: 1px solid black;

  }
  .the-tips a{
    margin-top: 10%;
    margin-left: 4%;
    color: green;
    display: flex;
    text-decoration: none;
    font-size: small;
  }
  .the-tips a:hover{
    text-decoration: underline;
  }
  .thumbs:hover{
    background-color: #FFFDD0;
  }
/* end of community login */

/* success div */
  .success-div{
    padding:1%; 
    border:1px solid #ccbd82ff; 
    width:50%; 
    height:630px; 
    margin-left:26%; 
    margin-top:10%; 
    border-radius:10px;
  }
  .success-div p{
    text-align: center;
    font-size: x-large;
    margin-top: 3%;
  }
  .success-svg{
    /* border: 1px solid black; */
    width: fit-content;
    margin:7% auto;
  }
  .success-svg svg{
    width: 45px;
    height: 45px;
    border: 0.5px;
  }
  .success-message p{
    font-size: larger;
    width: 70%;
    margin: 0 auto;
  }
  .success-button{
    /* border: 1px solid black; */
    width: fit-content;
    margin: 5% auto;
  }
  .success-button button{
    width: 40px;
    height: 40px;
    padding: 1%;
    border-radius: 50%;
    cursor: pointer;
    border: none;
  }
/* end of success div */

}