.about-row-bcg-item{
   background-color: blueviolet;
}

@media (max-width: 580px) {
    .hero-container{
        margin-left: 10%;
        width:90%;
        box-sizing: border-box;
        /* background-color: #000; */
    }
     #skills2 .container,
    #services2 .container,
    #about2 .container,
    #projects2 .container{
      max-width: 100%;
      /* background-color: blueviolet; */
    }
  
    .row-about{
      margin-left: 2px;
      /* background-color: blue; */
    }
  
    .download-CV{
        margin:0px;
        padding:0px;
    }
    .about-row{
        display:flex;
        flex-direction: column;
        /* background-color: rgb(9, 139, 139); */
        flex-wrap: nowrap;   
    }
    #about .section-header{
        margin: 0px !important;
    }
    .spad{
        padding-top:40px !important;
    }
    .footer-row{
        display:grid !important;
        grid-template-columns: 1fr;
        column-gap: 10px;
        /* background-color: black; */
        /* justify-items: center; */
        /* align-items: center; */
      
      }
      .footer-item{
        /* background-color: aqua; */
      }
      .my-logo{
        font-size: 24px !important;
        color:#ffffff !important;
      }
      .footer-item{
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column;
        align-items:flex-start;
        justify-content: left;

      }
      .links-list, .services-list, .FAQ-list{
        display: flex !important;
        flex-direction: column;
       
      }
      .services-row3{
        display: grid !important;
        grid-template-columns: 1fr;
        grid-gap:2px;
        
      }
      .section-header p {
        max-width: 90%;
        box-sizing: border-box;
        font-size: 16px;
        text-align: center;
        color: rgb(153, 153, 153);
    }
    .skill-section-wrapper{
        display: grid !important;
        grid-template-columns: 1fr;
        grid-gap: 10px !important;
      }
      .skills-item-2,
      .services-item-2{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap:20px;
        margin-bottom: 10px;
        /* background-color: chartreuse; */
      }
      .skills-item-2 h4,
      .services-item-2 h4{
        margin: 0px !important;
         /* align-self: baseline; */
          /* background-color: aqua; */
      }
      /* .skills-item-2 .services__item__icon,
      .services-item-2 .services__item__icon{
          background-color: white;
      } */
}

/* Tablet (481px to 768px) */
@media (min-width: 581px) and (max-width: 768px) {
    .hero-container{
        margin-left: 10%;
        width:90%;
        box-sizing: border-box;
        /* background-color: #000; */
    }
    #skills2 .container,
    #services2 .container,
    #about2 .container,
    #projects2 .container{
      max-width: 100%;
      /* background-color: blueviolet; */
    }
   
    #about .section-header,
    #about2{
        margin: 0px !important;
    }
  
    .download-CV{
        margin:0px;
        padding:0px;
    }
    .about-row{
        display:flex;
        flex-direction: row;
        /* background-color: rgb(9, 139, 139); */
        /* flex-wrap: nowrap;    */
    }
    .spad{
        padding-top:40px !important;
    }
   
    .footer-row{
        display:grid !important;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
       
      
      }
      .footer-item{
        /* background-color: aqua; */
      }
      .my-logo{
        font-size: 24px !important;
        color:#ffffff !important;
      }
      .footer-item{
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column;
        align-items:center;
        justify-content:flex-start;
        /* background-color: brown; */

      }
      .links-list, .services-list, .FAQ-list{
        display: flex !important;
        flex-direction: column;
        /* background-color: brown; */
       
      }
      .services-row3{
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-gap:2px;
        /* background-color: black; */
        
      }
      .section-header p {
        max-width: 90%;
        box-sizing: border-box;
        font-size: 16px;
        text-align: center;
        color: rgb(153, 153, 153);
    }
    .skill-section-wrapper{
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px !important;
        /* background-color: black; */
        width:100%;
        min-width: 90%;
      }
    
      .skill-item{
        /* background-color: brown; */
      }
      .skills-item-2{
        /* background-color: black; */
      }
      .skills-item-2,
      .services-item-2{
        display: flex;
        flex-direction: row;
        justify-content:flex-start;
        align-items: center;
        gap:20px;
        margin-bottom: 10px;
        /* background-color: chartreuse; */
      }
      .skills-item-2 h4,
      .services-item-2 h4{
        margin: 0px !important;
        /* background-color: aqua; */
      }
     
}

/* Desktop (769px and up) */
@media only screen and (min-width: 769px) and (max-width:1200px) {
    #about2 .container,
    #skills2 .container,
    #services2 .container,
    #projects2 .container,
    #contact2 .container,
    .footer .container{
        max-width: 90%;

    }
    .footer-row{
        display:grid !important;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));;
        justify-items: center;
        align-items: flex-start;
        grid-gap: 10px;
    }
    
    .footer-item{
        max-width: 100% !important;
        /* width:250px; */
        display: flex !important;
        flex-direction: column;
        align-items:flex-start;
        justify-content:center;
        /* background-color: chartreuse; */
    }
    .footer-item-links{
        align-self: center;
        /* margin-right: -20px; */
    }
    .FAQ{
       /* align-self: flex-end; */   
    }
    .FAQ-list{
       
        /* background-color: bisque; */
    }

  
   
 
}

@media only screen and (min-width: 581px) and (max-width:990px) {
  .item1,
  .item2,
  .item3{
      display: none !important;
  }
      


}