/*--------------- 360 * 640-----------HOME-----------------*/
/*--------------- 360 * 640-----------HOME-----------------*/
/*--------------- 360 * 640-----------HOME-----------------*/

@media screen and (max-width: 360px) {

      .div3 {
      grid-area: repeat(6, 1fr) / repeat(1, 1fr);
      }
      .div3 .grid {
        display: none;
      }
  
  /*----- 360 * 640 -----*/

      .header {
        grid-area: 1 / 1 / 1 / span 1;
        height: 52px;
      }
      .header ul a {
        font-size: 1em;
      }
      .header img.logo {
        width: 20px;
        height: 32px;
      }
      .header .menu-icon .nav-icon {
        height: 3px;
        width: 30px;
      }
      .header .menu-icon .nav-icon:before {
        top: 10px;
      }
      .header .menu-icon .nav-icon:after {
        top: -10px;
      }

      /*--360 * 640--*/

      .diploma {
       display: flex;
      }
      .FrontEnd {
        grid-area: 2 / 1 / 2 / span 1;
        margin-bottom: 10%;
      }
      .UxUi {
        grid-area: 3 / 1 / 3 / span 1;
        margin-top: 20%;
        }
      .python {
        grid-area: 4 / 1 / 4 / span 1;
        margin-top: 10%;
      }
      .Game {
        grid-area: 5 / 1 / 5 / span 1;
        margin-top: 10%;
      }
      .react {
        grid-area: 6 / 1 / 6 / span 1;
        margin-top: 10%;
      }
    }

/*----- 430*932 -----*/
/*----- 430*932 -----*/
/*----- 430*932 -----*/

@media screen and (min-width: 361px) and (max-width: 430px) {

    .div3 {
      grid-area: repeat(6, 1fr) / repeat(1, 1fr);
      }
    .grid {
      display: none;
    }

  /*----- 430 * 932 -----*/

  .header {
    grid-area: 1 / 1 / 1 / span 1;
    height: 60px;
    }
    .header ul a {
      font-size: 1.25em;
    }
  .header img.logo {
    width: 25px;
    height: 40px;
    }
  .header .menu-icon .nav-icon {
    height: 4px;
    width: 35px;
    }
  .header .menu-icon .nav-icon:before {
    top: 15px;
    }
  .header .menu-icon .nav-icon:after {
    top: -15px;
  }

/*----- 430*932 -----*/

  .diploma {
    display: flex;
  }
  .UxUi {
    grid-area: 2 / 1 / 2 / span 1;
    margin-top: 10%;
    }
  .python {
    grid-area: 3 / 1 / 3 / span 1;
    margin-top: 10%;
    }
  .Game {
    grid-area: 4 / 1 / 4 / span 1;
    margin-top: 10%;
    }
  .react {
    grid-area: 5 / 1 / 5 / span 1;
    margin-top: 10%;
  }
  .FrontEnd {
    grid-area: 6 / 1 / 6 / span 1;
    margin-top: 10%;
    margin-bottom: 10%;
  }
}

/*----- 744*1133 -----*/
/*----- 744*1133 -----*/
/*----- 744*1133 -----*/

@media screen and (min-width: 431px) and (max-width: 744px) {

  .div3 {
    grid-area: repeat(6, 1fr) / repeat(1, 1fr);
    }
  .grid {
    display: none;
   }

 /*----- 744*1133 -----*/

 header {
  grid-area: 1 / 1 / 1 / span 1;
  height: 68px;
  }
.header ul a {
  font-size: 1.5em;
}
.header img.logo {
  width: 30px;
  height: 48px;
}
.header .menu-icon .nav-icon {
  height: 5px;
  width: 40px;
}
.header .menu-icon .nav-icon:before {
  top: 20px;
}
.header .menu-icon .nav-icon:after {
  top: -20px;
}

  /*----- 744*1133 -----*/

  .diploma {
    display: flex;
   }
  .UxUi {
    grid-area: 2 / 1 / 2 / span 1;
    margin-top: 10%;
    width: 50%;
    }
  .python {
    grid-area: 3 / 1 / 3 / span 1;
    margin-top: 10%;
    width: 50%;
  }
  .Game {
    grid-area: 4 / 1 / 4 / span 1;
    margin-top: 10%;
    width: 50%;
  }
  .react {
    grid-area: 5 / 1 / 5 / span 1;
    margin-top: 10%;
    width: 50%;
  }
  .FrontEnd {
    grid-area: 6 / 1 / 6 / span 1;
    margin-top: 10%;
    margin-bottom: 10%;
    width: 50%;
  }
}

/*----- 1024 * 1366 -----*/
/*----- 1024 * 1366 -----*/
/*----- 1024 * 1366 -----*/

@media screen and (min-width: 745px) and (max-width: 1024px) {

      .div3 {
        grid-area: repeat(4, 1fr) / repeat(2, 1fr);
      }
      .header {
        display: none;
      }

      /*----- 1024 * 1366 -----*/

      .div3 .grid {
        grid-area: 1 / 1 / 1 / span 1;
      }
      .b2 img.log {
        width: 50px;
        height: 80px;
      }

      /*----- 1024 * 1366 -----*/

      .i ul li {
        font-size: 1.5em;
      }

      /*----- 1024 * 1366 -----*/

      .certified {
        display: grid;
        grid-template-columns: 50% 50%;
        margin-top: 10%;
      }
      .diploma {
        display: flex;
      }

      /*----- 1024 * 1366 -----*/

      .FrontEnd {
        grid-area: 4 / 2 / 4 / span 2;
        margin-left: 100%;
        margin-top: 10%;
      }
      .UxUi {
        grid-area: 2 / 1 / 2 / span 1;
        margin-left: 10%;
        }
      .python {
        grid-area: 2 / 2 / 2 / span 1;
        margin-left: -10%;
      }
      .Game {
        grid-area: 3 / 1 / 3 / span 1;
        margin-left: 10%;
        margin-top: 10%;
      }
      .react {
        grid-area: 3 / 2 / 3 / span 2;
        margin-left: -10%;
        margin-top: 10%;
      }
    }

 /*----- 1280 * 832 -----*/
 /*----- 1280 * 832 -----*/
 /*----- 1280 * 832 -----*/

@media screen and (min-width: 1025px) and (max-width: 1280px) {

  .div3 {
    grid-area: repeat(3, 1fr) / repeat(4, 1fr);
  }
  .header {
    display: none;
  }

  /*----- 1280 * 832 -----*/

  .div3 .grid {
    grid-area: 1 / 1 / 1 / span 4;
  }
  .b2 img.log {
    width: 50px;
    height: 80px;
  }
      
  /*----- 1280 * 832 -----*/

      .i ul li {
        font-size: 1.5em;
      }

   /*----- 1280 * 832 -----*/

   .certified {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    margin-top: 10%;
  }
  .diploma {
    display: flex;
    margin-top: 10%;
  }
  .UxUi {
    grid-area: 2 / 1 / 2 / span 1;
    }
  .python {
    grid-area: 2 / 2 / 2 / span 1;
  }
  .Game {
    grid-area: 2 / 3 / 2 / span 1;
  }
  .react {
    grid-area: 2 / 4 / 3 / span 1;
  }
  .FrontEnd {
    grid-area: 3 / 2 / 3 / span 2;
    margin-left: 300%;
  }
      }

/*----- 1440*1024 -----*/
/*----- 1440*1024 -----*/
/*----- 1440*1024 -----*/

@media screen and (min-width: 1281px) and (max-width: 1440px) {

      .div3 {
        grid-area: repeat(3, 1fr) / repeat(3, 1fr);
      }
      .header {
        display: none;
      }

  /*-----1440*1024-----*/

  .div3 .grid {
    grid-area: 1 / 1 / 1 / span 4;
  }
  .b2 img.log {
    width: 50px;
    height: 80px;
  }
  
  /*-----1440*1024-----*/

      .i ul li {
        font-size: 1.5em;
      }

  /*-----1440*1024-----*/

      .certified {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        margin-top: 10%;
      }
      .diploma {
        display: flex;
      }
      .UxUi {
        grid-area: 2 / 1 / 2 / span 1;
        margin-left: 30%;
        }
      .python {
        grid-area: 2 / 2 / 2 / span 1;
        margin-right: -10%;
      }
      .Game {
        grid-area: 3 / 1 / 3 / span 1;
        margin-left: -10%;
      }
      .react {
        grid-area: 3 / 2 / 3 / span 2;
        margin-right: 30%;
      }
      .FrontEnd {
        grid-area: 4 / 2 / 4 / span 2;
        margin-left: 300%;
        margin-top: 10%;
      }
    }

/*-----------1512*982-------------HOME-------------------*/
/*-----------1512*982-------------HOME-------------------*/
/*-----------1512*982-------------HOME-------------------*/

@media screen and (min-width: 1441px) and (max-width: 1512px) {

      .div3 {
        grid-area: repeat(3, 1fr) / repeat(3, 1fr);
      }
      .header {
        display: none;
      }

  /*-----1512*982-----*/
  
  .div3 .grid {
    grid-area: 1 / 1 / 1 / span 4;
  }
  .b2 img.log {
    width: 50px;
    height: 80px;
  }
  
  /*-----1512*982-----*/

  .i ul li {
    font-size: 1.5em;
  }

  /*-----1512*982-----*/

  .certified {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    margin-top: 10%;
  }
  .diploma {
    display: flex;
  }
  .UxUi {
    grid-area: 2 / 1 / 2 / span 1;
    margin-left: 30%;
    }
  .python {
    grid-area: 2 / 2 / 2 / span 1;
    margin-right: -10%;
  }
  .Game {
    grid-area: 3 / 1 / 3 / span 1;
    margin-left: -10%;
  }
  .react {
    grid-area: 3 / 2 / 3 / span 2;
    margin-right: 30%;
  }
  .FrontEnd {
    grid-area: 4 / 2 / 4 / span 2;
    margin-left: 300%;
    margin-top: 10%;
  }
}

/*-----1728*1117-----*/
/*-----1728*1117-----*/
/*-----1728*1117-----*/

@media screen and (min-width: 1513px) and (max-width: 1728px) {

  .div3 {
    grid-area: repeat(3, 1fr) / repeat(3, 1fr);
  }

  .header {
    display: none;
  }

  /*-----1728*1117-----*/

  .div3 .grid {
    grid-area: 1 / 1 / 1 / span 4;
  }
  .b2 img.log {
    width: 50px;
    height: 80px;
  }
  
  /*-----1728*1117-----*/

  .i ul li {
    font-size: 2em;
  }

  /*-----1728*1117-----*/

  .certified {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    margin-top: 10%;
  }
  .diploma {
    display: flex;
  }
  .UxUi {
    grid-area: 2 / 1 / 2 / span 1;
    margin-left: 30%;
    }
  .python {
    grid-area: 2 / 2 / 2 / span 1;
    margin-right: -10%;
  }
  .Game {
    grid-area: 3 / 1 / 3 / span 1;
    margin-left: -10%;
  }
  .react {
    grid-area: 3 / 2 / 3 / span 2;
    margin-right: 30%;
  }
  .FrontEnd {
    grid-area: 4 / 2 / 4 / span 2;
    margin-left: 300%;
    margin-top: 10%;
  }
    }

    /*-----1729 +++ *1117-----*/
    /*-----1729 +++ *1117-----*/
    /*-----1729 +++ *1117-----*/

    @media screen and (min-width: 1729px) {

      .div3 {
        grid-area: repeat(3, 1fr) / repeat(3, 1fr);
      }
    
      .header {
        display: none;
      }
    
      /*-----1728+++*1117-----*/
    
      .div3 .grid {
        grid-area: 1 / 1 / 1 / span 4;
      }
      .b2 img.log {
        width: 50px;
        height: 80px;
      }
      
      /*-----1728+++*1117-----*/
    
      .i ul li {
        font-size: 2em;
      }
    
      /*-----1728+++*1117-----*/
    
      .certified {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        margin-top: 10%;
      }
      .diploma {
        display: flex;
      }
      .UxUi {
        grid-area: 2 / 1 / 2 / span 1;
        margin-left: 30%;
        }
      .python {
        grid-area: 2 / 2 / 2 / span 1;
        margin-right: -10%;
      }
      .Game {
        grid-area: 3 / 1 / 3 / span 1;
        margin-left: -10%;
      }
      .react {
        grid-area: 3 / 2 / 3 / span 2;
        margin-right: 30%;
      }
      .FrontEnd {
        grid-area: 4 / 2 / 4 / span 2;
        margin-left: 300%;
        margin-top: 10%;
      }
}