/*###############################
# Icon Media and Web soution  #
###############################*/


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

    .menus {
        border: 1px solid #fff;
        z-index: +1px;
         height: 40% auto;
         transition: all 0.5s ease;
          }

        .menus nav {
        position: absolute;
        float: left;
        width: 35%;
        left: 0;
        top: 42px;
        background: var(--menu-bg);
        display: none;
        border-radius: 7px;
        box-shadow: 0 0 12px #848585;
         animation: flyIn 0.5s ease-in-out;
               }

        @keyframes flyIn {
        0% {
            transform: translateY(100px);
           scale: 0;

        }
        100% {
            transform: translateY(0);
           scale: 1;
        }

      }



    .menus nav ul {
        position: relative;
            }

    .menus nav ul li {
        position: relative;
        width: 100%;
        border-bottom: 1px solid #e9eaeb;
        background: linear-gradient(to right, #fefeff, #dee8f5);
        }

       .menus nav ul li a{
        color:rgb(2, 99, 226);
         }
    .menus nav ul li ul {
        position: relative;
        left: 0px;
        text-align: left;
            }

    .menus nav ul li ul li {
        position: relative;
    }


    .menus.active .toggleMenu::before {
        transform: rotate(45deg);
        box-shadow: 0 0 12px #0470eb;
        transition: all 0.4s;
        position: relative;
        margin-top: -5px;



    }

    .menus.active .toggleMenu::after {
        transform: rotate(315deg);
        transition: all 0.4s;
        margin-top: -5px;
         }


    .toggleMenu {
        width: 40px;
        height: 40px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 5px;
        top: 2px;
        cursor:none;
        padding-left: 0px;
        overflow: hidden;
        cursor: pointer;
    }

    .toggleMenu::before {
        content: '';
        position: absolute;
        height: 3px;
        background: #ffffff;
        width: 100%;
        transform: translateY(-14px);
        box-shadow: 0 12px #ffffff;
        transition: all 0.6s;
    }

    .toggleMenu::after {
        content: '';
        position: absolute;
        height: 3px;
        background: #f4f4f4;
        width: 100%;
        transform: translateY(9px);
        transition: all 0.6s;
    }

    .left_box {
        width: 100%;
    }




   }

@media screen and (max-width:770px){
.about{
  position: relative;
  bottom:40px;
}

.about_pic{
      position: relative;
      top:50px;
      transition: all 0.5s ease;
    }
}

   @media screen and (max-width:625px) {
   .header_section{
    display:block;
    height: 80px;

    }
    .social_media{
    display:flex;
    justify-content:flex-start;
    left: 10px;
     position:relative;
     justify-content: center;
    }
    .about_pic{
      position: relative;
      top:50px;
      transition: all 0.5s ease;
    }

    .contact_details{
      display: flex;
      justify-content: center;
      color:#0470eb;
      font-size: 16px;

    }
 .menus nav .header{
   color:red;

   }
  }



/* responsive list box  */
@media screen and (max-width:900px){
  .skill_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}
}


/* responsive  list box  */
@media screen and (max-width:600px){
  .skill_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
  gap: 20px;
  padding: 20px;
}
}




/* Mobile first: default (phones <600px) */
/* ================================
   BASE STYLES
================================ */

/* Ensure padding and box sizing */
* {
  box-sizing: border-box;
}

/* Container to center and limit width */
.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 15px;
}

/* Row setup */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

/* Columns base */
[class*="col-"] {
  padding: 10px;
  /* flex: 1 1 100%; */
}



/* Clearfix (if you ever use float) */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* ================================
   MEDIA QUERIES
================================ */

/* Tablets (≥600px) */
@media only screen and (min-width: 600px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

/* Small desktops (≥768px) */
@media only screen and (min-width: 768px) {
  .col-m-1 {width: 8.33%;}
  .col-m-2 {width: 16.66%;}
  .col-m-3 {width: 25%;}
  .col-m-4 {width: 33.33%;}
  .col-m-5 {width: 41.66%;}
  .col-m-6 {width: 50%;}
  .col-m-7 {width: 58.33%;}
  .col-m-8 {width: 66.66%;}
  .col-m-9 {width: 75%;}
  .col-m-10 {width: 83.33%;}
  .col-m-11 {width: 91.66%;}
  .col-m-12 {width: 100%;}
}

/* Large desktops (≥992px) */
@media only screen and (min-width: 992px) {
  .col-l-1 {width: 8.33%;}
  .col-l-2 {width: 16.66%;}
  .col-l-3 {width: 25%;}
  .col-l-4 {width: 33.33%;}
  .col-l-5 {width: 41.66%;}
  .col-l-6 {width: 50%;}
  .col-l-7 {width: 58.33%;}
  .col-l-8 {width: 66.66%;}
  .col-l-9 {width: 75%;}
  .col-l-10 {width: 83.33%;}
  .col-l-11 {width: 91.66%;}
  .col-l-12 {width: 100%;}
}

/* Extra large (≥1200px) */
@media only screen and (min-width: 1200px) {
  .col-xl-1 {width: 8.33%;}
  .col-xl-2 {width: 16.66%;}
  .col-xl-3 {width: 25%;}
  .col-xl-4 {width: 33.33%;}
  .col-xl-5 {width: 41.66%;}
  .col-xl-6 {width: 50%;}
  .col-xl-7 {width: 58.33%;}
  .col-xl-8 {width: 66.66%;}
  .col-xl-9 {width: 75%;}
  .col-xl-10 {width: 83.33%;}
  .col-xl-11 {width: 91.66%;}
  .col-xl-12 {width: 100%;}
}