@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poiret+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

    :root{
    /*--color-1: #0f1016;*/
    /*--color-1: #303841;*/
      --color-1: #4A4A49;
    /*--color-2: green;
      --color-3: greenyellow;*/
      --color-2: #005981;
      --color-3: #00131B;
      --color-4: #583D0D;
      --color-5: #FAB131;
      --color-6: #674811;
    	--text-color: #f0f0f0;
    	--accent-color: #006aff;
    	--primary: #1D1D1D;
      --secondary: #000000;
    }

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

    html, body{
      /*font-family: "Poppins", "Segoe UI", "Tahoma", sans-serif;*/
      font-family: "Open Sans", sans-serif;
    	scroll-behavior: smooth;
      margin: 0;
      padding: 0;
    }

    .container {
      display: grid;
      grid-template-areas:
        "header header header header header header"
        "menu1 menu1 menu1 menu1 menu1 menu1"
        "menu2 menu2 menu2 menu2 menu2 menu2"
        "content1 content1 content1 content1 content1 content1"
        "content2 content2 content2 content2 content2 content2"
        "footer footer footer footer footer footer";
      height: auto;
      grid-template-columns: 1fr;
      padding: 0;
      margin: 0;
      overflow: hidden;
    } 

    .container > div {
      background-color: #FFFFFF;
      padding: 0;
      margin: 0;
    }


    .header{
      grid-area: header;
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      padding: 5px 0;
      margin: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 16pt;
      background: rgba(0, 0, 0, 0) !important;
    }

    /*.container > div.menu1 {
      grid-area: menu1;
      min-height: 100vh;
      min-width: 100%;
    }*/

    .menu1 {
      grid-area: menu1;
      min-height: 100vh;
      min-width: 100vw;
    }

    /*.container > div.menu2 {
      grid-area: menu2;
      min-height: 100vh;
      min-width: 100%;
      display: grid;
      grid-template-rows: 1fr;
    }
*/
    .menu2{
      grid-area: menu2;
      overflow: hidden;
      /*display: flex;*/
      min-width: 100vw;
      min-height: 100vh;
      padding: 0;
      display: grid;
      grid-template-rows: 1fr;
    }

    /*.container > div.content1 {
      grid-area: content1;
      min-height: 100vh;
      min-width: 100%;
      display: grid;
      grid-template-rows: 1fr;
      display: relative;
    }*/

    .content1{
      grid-area: content1;
      overflow: hidden;
      /*display: flex;*/
      min-width: 100vw;
      min-height: 100vh;
      padding: 0;
      display: grid;
      grid-template-rows: 1fr;
      display: relative;
    }

    /*.container > div.content2 {
      grid-area: content2;
      min-height: 93vh;
      min-width: 100%;
      display: grid;
      grid-template-rows: 1fr;
      display: relative;
    }*/

    .content2{
      grid-area: content2;
      overflow: hidden;
      min-width: 100vw;
      height: 93vh;
      padding: 0;
      display: grid;
      grid-template-rows: 1fr;
      display: relative;
    }

    /*.container > div.footer {
      grid-area: footer;
      height: auto;
      padding: 10px 50px 20px 80px;
      margin: 0;
      background-image: linear-gradient(145deg, var(--secondary), var(--primary));
      z-index: 1;
    }*/

    .footer {
      grid-area: footer;
      height: auto;
      padding: 10px 50px 20px 80px;
      margin: 0;
      background-image: linear-gradient(145deg, var(--secondary), var(--primary));
      z-index: 1;
    }

    .zone {
      text-align: center;
      /*border-radius:4px;*/
      transition: all 0.3s linear;
    }

    .zone:hover {
      -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
      -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
      -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
      box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    }

    .about-zone {
      text-align: center;
      border-radius:4px;
      transition: all 0.3s linear;
      -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
      -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
      -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
      box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
    }

  /*     .container > div.header {
      grid-area: header;
      text-align: center;
      min-height: 100vh;
      padding: 5px 0;
      margin: 0;
      overflow: hidden;
    }*/

    
    nav{
      /*overflow: hidden;*/
      height: 100px;
      background: rgba(74, 74, 73, 0.8) !important;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      padding: 0 20px 0 0;
      margin: 0;
      z-index: 99; 
      box-sizing: content-box;
    }

    .links-container{
    	height: 100%;
    	width: 100%;
    	display: flex;
      position: relative;
    	flex-direction: row;
      text-align: left;
      transition: all 0.75S ease-out;
      padding: 0 20px;
      border-top: 6px solid #FAB131;
    }


    .header-scrolled{
      background-color: black;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
      width: 100%;
      border-top: none;
      z-index: 100;

      .dropbtn{
        padding: 13px 0;
      }

      .dropdown-content{
         background-color: black;
      }
    }


    nav .logo{
    	width: 200px;
    	height: 80px;
    	padding: 5px 0 5px 0;
      margin: 0 0 0 50px;
      transition: 0.75S ease-out;
    }

    nav .logo1{
        display: none;
    }

    nav a{
    	height: 100%;
    	padding: 0 20px;
    	align-items: center;
    	text-decoration: none;
    	color: var(--text-color);
    }

    nav svg{
    	fill: var(--text-color);
    }


    nav ul li{
      list-style: none;
      display: inline-block;
      margin: 0 0 0 20px;
      padding: 0;
    }


    nav ul li a:hover{
      opacity: 0.4;
      text-decoration: none;
    }

    nav .active{
    	margin-left: auto;
    	color: #FAB131;
      font-weight: bold;
    }

    nav .active:hover{
    	opacity: 1;
    }

    #sidebar-active{
    	display: none;
    }

    .open-sidebar-button, .close-sidebar-button{
    	/*padding: 0 20px;*/
    	display: none;
    }

    .dropbtn {
      background-color: inherit;
      color: #fff;
      border: none;
      outline: none;
      font-size: 16pt;
      margin: 0;
      padding: 34px 0;
     font-family: "Open Sans", sans-serif;
      cursor: pointer;
    }


    .dropbtn.active{
      opacity: 0.6;
      color: #fff;
    }

    .dropdown {
      position: relative;
      display: inline-block;
      height: 100%;
    	padding: 0;
    	align-items: center;
    	text-decoration: none;
    	color: var(--text-color);
    	font-size: 16pt;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: var(--color-1);
      min-width: 170px;
      left: 0;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
      padding: 0 0 5px 0;
        justify-content: left;
      align-items: left;
      text-align: left;
    }

    .dropdown-content a {
      color: #fff;
      padding: 10px 20px;
      text-decoration: none;
      display: block;
      font-size: 14px;
      border-top: 1px solid #666;
      align-items: flex-start;

    }

    .dropdown-content a:hover {
      opacity: 0.4;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .dropdown:hover .dropbtn {
      opacity: 0.6;
      color: #fff;
    }


    .aboutus-SlideContainer {
      display: grid;
      grid-template-columns: 1fr;
      position: relative;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      min-width: 100vw;
      cursor: default;
      padding: 0;
      margin: 0;
    }


    /*=============================     LATEST SLIDESHOW    ===================================================================================================*/

    .slider{
      width: 100%;
      height: 450px;
      position: absolute;
      overflow: hidden;
      right: 0;
      top: 0;
      /*background-image: linear-gradient(145deg, var(--color-2), var(--color-3));*/
      background: url(img/slide6.jpg) no-repeat;
      background-size: 100% 100%;
      filter: brightness(0.8);
      object-fit: contain;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .list{
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      display: flex;
      width: max-content;
      transition: 2s;
    }

    .item {
      width: 100vw;
      height: 100%;
      text-align: right;
      justify-content: right;
      align-items: right;
      padding: 0 200px 0 0;
      margin: 0;
      position: relative; 
    }

    .item[data-active]{
      opacity: 1;
    }

    .item img{
        margin-top: 80px;
        width: 450px;
        height: 350px;
        display: inline-block;
        object-fit: contain;
    }

    .item .uiux{
      margin-top: 55px;
      width: 550px;
      height: 400px;
    }

    .active {
      transition: transform 0.5s ease-out;
    }

    .item .desc-div{
      width: 500px;
      height: 150px;
      top: 30%;
      left: 30%;
      bottom: 0;
      position: absolute;
      text-align: left;
      padding: 5px 0;
      transition: 0.75s linear;
      flex-wrap: wrap;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.3) !important;
      border-radius: 4px;
      -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
      -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
      -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
      box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;

    }

    .item .desc-div:hover::after{
      transform: translateX(-50%);
      height: 70px;
    }


    .item .desc-div h1{
      color: greenyellow;
      font-size: 24px;
      padding-left: 30px;
    }

    .item .desc-div p{
      color: #fff;
      font-size: 16px;
      padding-left: 30px;
    }

    .buttons{
      position: absolute;
      top: 45%;
      left: 5%;
      width: 90%;
      display: flex;
      justify-content: space-between;
    }

    .buttons button{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #fff5;
      color: #fff;
      border:none;
      font-family: monospace;
      font-weight: bold;
    }

    .buttons button:hover{
      cursor: pointer;
      opacity: 0.8;
    }

    .dots{
      position: absolute;
       bottom: 0;
       color: #fff;
       left: 0;
       width: 100%;
       height: 70px;
       display: flex;
       justify-content: center; 
      align-items: center;

    }

    .dots li{
      list-style: none;
      width: 10px;
      height: 10px;
      background-color: #fff;
      margin: 20px;
      border-radius: 20px;
      transition: 1s ease-out;

    }

    .dots li.active{
      width: 30px;
    }

    .dots li:hover {
      cursor: pointer;
    }


      /*===================================    SLIDESHOW ENDS HERE   =====================================================================================*/


    /*======================================  Footer Information  ========================================================================================================================*/
    .footer{
      display: inline-grid;
      grid-template-columns: repeat(3, 1fr);
      height: 100%;
      border-top: 1px solid #fff;
    }

    .footer > div {
      text-align: left;
      text-indent: 2px;
      line-height: 2;
      color: #BABABA;
      padding: 0 0 0 50px;
    }

    .footer > div p{
       font: 100 0.8rem sans-serif;
    }

    .footer > div a{
     text-decoration: none;
      font-size: 12px;
      font-style: sans-serif;
      color: #BABABA;
    }

    .footer > div a:hover{
      opacity: 0.8;
    }

    .footer .footer-row1{
      height: 50px;
    }

    .footer .footer-row1 h1{
      text-decoration: none;
      color: #fff;
      font-size: 24px;
      font-family: "Open Sans", sans-serif;
      font-weight: normal;
    }

    .footer .footer-row2{
      border-bottom: 1px solid #666;
      justify-content: center;
      justify-items: center;
      align-items: center;
    }

    .footer .footer-row2 .footer-blog{
      width: 250px;
      height: 300px;
      border: 2px solid #333;
      border-radius: 10px;
      padding: 0;
      margin: 20px;
      background-color: #EBEEF1;
      text-align: left;
    }

    .footer .footer-row2 .footer-blog img{
      width: 98%;
      height: 150px;
      border-radius: 10px 10px 0 0;
      padding: 0;
      margin: 0;
    }

    .footer .footer-row2 .footer-blog h3{
      text-decoration: none;
      height: 100px;
      color: #000;
      font-size: 14px;
      margin: 0  10px;
      font-family: "Open Sans", sans-serif;
      font-weight: normal;
    }

    .footer .footer-row2 a{
      text-decoration: none;
      font-size: 14px;
      font-weight: bold;
      font-style: sans-serif;
      padding: 0;
      /*padding: 10px 25px;*/
      margin: 0 10px;
      width: 120px;
      height: 30px;
      color: #D79118;
      transition: background-color 0.3s ease;
      /*transition: 0.75s ease-out;*/
      cursor: pointer;
      display: inline-block;
      justify-content: space-between;
      justify-items: space-between;
      align-items: space-between;
    }

    .footer .footer-row2 .share{
      font-size: 12px;
      color: #333;
      width: 60px;
      margin-left: 30px;
    }

/*  .footer .footer-row2 a:hover{
      color: #B17610;
      opacity: 1;
    }*/


/*  .item4 button{
      background-image: linear-gradient(145deg, var(--pri), var(--sec));
      padding: 10px 25px; 
      margin-left: 20px;
      color: #fff;
      border-radius: 10px; 
      border: none;  
      cursor: pointer;
      font-size: 14px;
      width: 150px;
      height: 40px;
      transition: 0.75s ease-out;
      border: 1px solid #FAB131;
      border-bottom: 2px solid #FAB131;
    }*/

    .footer .footer-row2 a span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }

    .footer .footer-row2 a span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }

    .footer .footer-row2 a:hover span {
      padding-right: 25px;
    }

    .footer .footer-row2 a:hover span:after {
      opacity: 1;
      right: 0;
    }

    .footer .footer-row3{
      margin-bottom: 20px;
      padding: 0 20px;
    }

    .footer .footer-row3 h1{
      text-decoration: none;
      color: #fff;
      font-size: 24px;
      margin-bottom: 10px;
      font-family: "Open Sans", sans-serif;
      font-weight: normal;
    }

    /*.footer .footer-row3 a{
       text-decoration: none;
       font-size: 12px;
      font-style: sans-serif;
      padding: 5px;
      color: #BABABA;
    }*/

    .footer .footer-row3 p.q-links{
     /*padding: 5px;*/
     line-height: 25px;
    }

    .footer .footer-row4{
        font-size: 10px;
        padding-top: 20px;
    }

/*======================================  Footer Social Media Icons and Link ==========================================================================================================*/
    .footer-row4 .fa {
      text-align: center;
      text-decoration: none;
      font-size: 14px;
      margin: 0 2px;
        color: white;
      width: 30px;
      padding: 10px 0;
    }

    .footer-row4 .fa-facebook {
      background: #3B5998;
    }


    .footer-row4 .fa-twitter {
      background: #55ACEE;
    }

    .footer-row4 .fa-linkedin {
      background: #007bb5;
    }

    .footer-row4 .fa-instagram {
      background: #125688;
    }

    .footer-row4 .fa-upwork{
      background: #13A300;
    }

    .footer-row4 .fa-facebook:hover, .footer-row4 .fa-twitter:hover, .footer-row4 .fa-linkedin:hover, .footer-row4 .fa-instagram:hover, .footer-row4 .fa-upwork:hover{
     opacity: 0.4;
     text-decoration: none;
    }


    /*======================================  Scroll to the top button  ===================================================================================================================================*/
    #myBtn {
      display: none; /* Hidden by default */
      position: fixed; /* Fixed/sticky position */
      bottom: 10px; /* Place the button at the bottom of the page */
      right: 10px; /* Place the button 30px from the right */
      z-index: 99; /* Make sure it does not overlap */
      border: none; /* Remove borders */
      outline: none; /* Remove outline */
      background-color: #333333; /* Set a background color */
      color: white; /* Text color */
      cursor: pointer; /* Add a mouse pointer on hover */
      padding: 8px 15px; /* Some padding */
      border-radius: 5px; /* Rounded corners */
      font-size: 18px; /* Increase font size */
      opacity: 0.8;
    }

    #myBtn:hover {
      background-color: #FAB131; /* Add a dark-grey background on hover */
      color: #000;
    }


/*=============================================================================== SCREENS LARGER THAN TABLET FORMAT ================================================================*/
  @media screen and (min-width: 1024px) and (max-width: 1500px) {
        /* CSS rules specific to tablets */
 /* body {
      font-size: 16px;
    }*/

 /* .container {
      width: 90%;
      margin: 0 auto;
    }*/

 /* More tablet-specific styles */
    nav{
      /*overflow: hidden;*/
      height: 100px;
      padding: 0 20px 0 0;
      font-size: 16px;
    }

    .links-container{
      padding: 0 10px;
    }

    .header-scrolled{
      .dropbtn{
        padding: 10px 0;
      }
    }

    nav .logo{
      width: 200px;
      height: 80px;
      padding: 5px 0 5px 0;
      margin: 0 0 0 50px;
      transition: 0.75S ease-out;
    }

    nav .logo1{
      display: none;
    }

    nav a{
      padding: 0 10px;
    }

    nav ul li{
      margin: 0 0 0 20px;
    }

    .dropbtn {
      font-size: 16px;
      padding: 25px 0 40px 0;
    }

    .dropdown {
      padding: 8px 0;
    }

    .dropdown-content {
      min-width: 140px;
    }

    .dropdown-content a {
      padding: 7px 10px;
      font-size: 12px;
    }


    /*======================================  Slider Infromation for Screens Larger than Tablet Format =======================================================================================*/
    .item {
      width: 100vw;
      height: 100%;
      text-align: right;
      justify-content: right;
      align-items: right;
      padding: 0 50px 0 0;
      margin: 0;
      position: relative; 
    }

    .item .desc-div{
      width: 400px;
      height: 150px;
      top: 30%;
      left: 30%;
    }

    .item img{
      margin-top: 90px;
      width: 450px;
      height: 350px;
    }

    .item .uiux{
      width: 450px;
      height: 370px;
    }

    .item .desc-div h1{
      font-size: 20px;
    }

    .item .desc-div p{
      font-size: 14px;
    }

    /*======================================  Footer Infromation for Screens Larger than Tablet Format =======================================================================================*/
    .container > div.footer {
      padding: 10px 30px 20px 50px;
    }

    .footer > div {
      padding: 0 10px;
    }
  }

/*=============================================================================== TABLET FORMAT ================================================================*/
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .container {
      max-width: auto;
      grid-template-columns: 1fr;
      /*grid-template-rows: 5% 36% auto auto;*/
      padding: 0;
    }

    .container > div {
      background-color: #FFFFFF;
    }

    .header {
      padding: 0;
    }

    .menu1 {
      margin: 0;
      padding: 0;
      height: auto;
    }

    .content1 {
      height: auto;
      margin: 10px 0;
    }

    .footer {
      padding: 0 50px 30px 20px;
    }

    .links-container {
      flex-direction: column;
      text-align: left;
      position: fixed;
      top: 0;
      right: -100%;
      z-index: 10;
      width: 300px;
      background-color: var(--color-1);
      box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
      transition: all 0.75s ease-out;
      border-top: 6px solid #FAB131;
    }

    nav{
      max-height: 40px;
      background: rgba(74, 74, 73, 1) !important;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 0 0 10px 20px;
      line-height: 2;
      position: fixed;
      border-top: 6px solid #FAB131;
    }

    nav a{
      box-sizing: border-box;
      height: auto;
      width: 0;
      padding: 0 60px 0 0;
      align-items: flex-start;
      justify-content: flex-start;
      cursor: pointer;
    }

    nav .logo1{
      display: block;
      width: 120px;
      height: 50px;
      margin: 0 auto 0 0;
      padding: 5px 0;
      transition: 0.75S ease-out;
    }

    nav .logo{
      display: none;
    }

    nav ul li .fa{
      display: none;
    }

    .dropbtn {
      justify-content: flex-start;
      padding: 0 60px 0 20px;
    }

    .dropdown {
      display: inline;
    }

    .dropdown-content {
      position: relative;
      min-width: 220px;
      padding: 0;
      margin: 0;
      background-color: black;
      /*background: rgba(70, 70, 70, 1) !important;*/
    }

    .dropdown-content a{
      width: 100%;
    }

    .dropdown-content a:hover {
      opacity: 0.4;
    }

    .dropdown:hover .dropdown-content {
      display: inline;
      float: left;
    }

    .header-scrolled{
       .dropbtn{
        padding: 0 60px 0 20px;
        margin: 0;
      }
    }

    .open-sidebar-button, .close-sidebar-button{
      padding: 5px 0;
      display: block;
      cursor: pointer;
    }

    .open-sidebar-button{
      margin: 0 0 0 auto;
      margin-right: 50px;
    }

    #sidebar-active:checked ~ .links-container{
      right: 0;
    }

    #sidebar-active:checked ~ #overlay{
      height: 100%;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9;
    }

   .slider{
      height: 470px;
      /*background-size: 100% 60vh;*/
      background-size: 100% 100%;
      top: 0;
    } 

    .item {
      text-align: center;
      justify-content: center;
      align-items: center;
      padding: 0; 
    }

    .item img{
      margin-top: 50px;
      width: 380px;
      height: 320px;
      object-position: center;
    }

    .item .uiux{
      width: 420px;
      height: 340px;
    }

    .item .desc-div{
      width: 100%;
      height: 115px;
      top: 355px;
      left: 50%;
      padding: 0;
    }

    .item .desc-div h1, .item .desc-div p{
      padding-left: 20px;
    }

    .item .desc-div p{
      padding-bottom: 30px;
    }

    /* .menu .grid-wrapper{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      margin: 20px 20px 0 20px;
      float: left;
    }
    .menu .box{
        background-color: #444;
        padding: 130px;
        margin: 20px 30px;
        cursor: pointer;
    }

    .menu a.portfolio_btn{
      background-image: linear-gradient(145deg, var(--secondary1), var(--primary1));
      border: 2px solid #FAB131;
      border-radius: 25px;
      padding: 10px 20px;
      margin: 10px 0 5px 0;
      float: left;
      color: #666363;
      text-decoration: none;
      font-size: 16px;
      font-weight: bold;
    }

    .menu .portfolio_btn:hover {
      color: rgba(0, 0, 0, 0.4);
      cursor: pointer;
    }*/


    /*======================================  Footer Infromation for Tablet Format ========================================================================================================================*/
    /*.footer {
      padding: 10px 30px 20px 80px;
    }*/

    .footer {
      /*grid-template-columns: 1fr 1fr;*/
      grid-template-columns: repeat(2, 1fr);
      height: 100%;
      padding: 10px 30px 20px 80px;
    }

    .footer .hide2{
      display: none;
    }

    .footer .hide3{
      display: none;
    }

    .footer > div {
      padding: 10px 0;
      margin: 0;
    }

    .footer > div a{
     text-decoration: none;
     font-size: 12px;
    }


    .footer .footer-row1 {
      margin-bottom: 10px;
    }

    .footer .footer-row2{
      margin-bottom: 0;
    }

    .footer .rule1{
      border-bottom: 1px solid #666;
    }

    .footer .footer-row1 h1{
      font-size: 24px;
    }

    .footer .footer-row3 h1{
      font-size: 24px;
    }

    .footer .footer-row3 a{
       font-size: 12px;
    }

    .footer .footer-row3 p{
       font-size: 14px;
    }
  }


/*============================================   MOBILE PHONE RESOLUTION   ====================================================================================================================*/
/*@media only screen and (max-width: 600px){	*/
  @media  screen and (max-width: 768px){

    .container {
      max-width: auto;
      grid-template-columns: 1fr;
      /*grid-template-rows: 5% 36% auto auto;*/
      padding: 0;
    }

    .container > div {
      background-color: #FFFFFF;
      padding: 0;
      margin: 0;
    }

    .container > div.footer{
      padding: 20px 50px 50px 20px;
    }

    .header {
      grid-area: 1 / span 6;
      padding: 0;
    }

    .menu1 {
      grid-area: 2 / span 6;
      margin: 0;
      padding: 0;
      height: auto;
    }

    .menu2 {grid-area: 3 / span 6;}

    .content1 {
      grid-area: 4 / span 6;
      height: auto;
        margin: 10px 0;
    }

    .content2 {grid-area: 5 / span 6;}

    .footer {
      grid-area: 6 / span 6;
      display: inline-grid;
      grid-template-columns: 1fr;
      height: 100%;
      padding: 0 50px 30px 20px;
    }

    /*.container > div.footer {
      padding: 0 50px 30px 20px;
    }*/

    .links-container {
    		flex-direction: column;
        text-align: left;
    		position: fixed;
    		top: 0;
    		right: -100%;
    		z-index: 10;
    		width: 300px;
    		background-color: var(--color-1);
    		box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
    		transition: all 0.75s ease-out;
        border-top: 6px solid #FAB131;
    	}

      nav{
      	max-height: 40px;
        background: rgba(74, 74, 73, 1) !important;
      	justify-content: flex-start;
      	align-items: flex-start;
      	padding: 0 0 10px 20px;
      	line-height: 2;
        position: fixed;
        border-top: 6px solid #FAB131;
      }

      nav a{
        box-sizing: border-box;
        height: auto;
        width: 0;
        padding: 0 60px 0 0;
        align-items: flex-start;
        justify-content: flex-start;
        cursor: pointer;
      }

    	nav .logo1{
        display: block;
  		  width: 120px;
  		  height: 50px;
  	    margin: 0;
  	    padding: 5px 0;
        transition: 0.75S ease-out;
    	}

      nav .logo{
        display: none;
      }

      nav ul li .fa{
        display: none;
      }

    .dropbtn {
      justify-content: flex-start;
        padding: 0 60px 0 20px;
    }

    .dropdown {
      display: inline;
    }

    .dropdown-content {
      position: relative;
      min-width: 220px;
     padding: 0;
      margin: 0;
      background-color: black;
      /*background: rgba(70, 70, 70, 1) !important;*/
    }

    .dropdown-content a{
      width: 100%;
    }

    .dropdown-content a:hover {
      opacity: 0.4;
    }

    .dropdown:hover .dropdown-content {
      display: inline;
      float: left;
    }


    .header-scrolled{
       .dropbtn{
        padding: 0 60px 0 20px;
        margin: 0;
      }
    }

    	.open-sidebar-button, .close-sidebar-button{
    		padding: 5px 0;
    	  	display: block;
    	  	cursor: pointer;
    	}

      .open-sidebar-button{
        margin: 0 0 0 auto;
        margin-right: 50px;
      }

    	#sidebar-active:checked ~ .links-container{
    		right: 0;
    	}

    	#sidebar-active:checked ~ #overlay{
    		height: 100%;
    		width: 100%;
    		position: fixed;
    		top: 0;
    		left: 0;
    		z-index: 9;
    	}

     .slider{
        height: 470px;
        background-size: 100% 100%;
        top: 0;
      } 

      .item {
      text-align: center;
      justify-content: center;
      align-items: center;
      padding: 0; 
    }

    .item img{
      margin-top: 50px;
      width: 380px;
      height: 320px;
      object-position: center;
    }

    .item .uiux{
      width: 420px;
      height: 340px;
    }

    .item .desc-div{
      width: 100%;
      height: 115px;
      top: 355px;
      left: 50%;
      padding: 10px;
    }


    .item .desc-div h1{
      font-size: 20px;
    }

    .item .desc-div p{
       font-size: 13px;
    }

    .item .desc-div h1, .item .desc-div p{
      padding-left: 0;
    }

    /* .menu .grid-wrapper{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      margin: 20px 20px 0 20px;
      float: left;
    }
    .menu .box{
        background-color: #444;
        padding: 130px;
        margin: 20px 30px;
        cursor: pointer;
    }

    .menu a.portfolio_btn{
      background-image: linear-gradient(145deg, var(--secondary1), var(--primary1));
      border: 2px solid #FAB131;
      border-radius: 25px;
      padding: 10px 20px;
      margin: 10px 0 5px 0;
      float: left;
      color: #666363;
      text-decoration: none;
      font-size: 16px;
      font-weight: bold;
    }

    .menu .portfolio_btn:hover {
      color: rgba(0, 0, 0, 0.4);
      cursor: pointer;
    }*/

    .footer .hide1{
      display: none;
    }

    .footer .hide2{
      display: none;
    }

    .footer .hide3{
      display: none;
    }

    .footer > div {
      padding: 0;
      margin: 0;
    }

    .footer > div a{
     font-size: 12px;
    }

    .footer .footer-row1 {
      margin-bottom: 10px;
    }

    .footer .footer-row2{
      margin-bottom: 0;
      border-bottom: none;
      
    }

    .footer .footer-row2 .footer-blog{
      margin: 20px 50px;
    }

    .footer .rule1{
      border-bottom: 1px solid #666;
    }

    .footer .footer-row4{
      padding: 0;
      margin: 20px 0 0 50px;
    }
     .footer-row4 .fa {
      font-size: 11px; 
      float: right;
    }

    .push .fa, .dropdown .fa{
      float: none;
      padding: 0;
      margin: 0;
    }
}

#preloader{
  background: #fff url(images/loader4.gif) no-repeat center center;
  background-size: 50%;
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 100;
}