@media screen and (min-width: 360px) and (min-height: 640px) {
    .skills-imgs {
      width:  40% !important;
    }

 
  }
  @media screen and (min-width: 360px) and (min-height: 780px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 360px) and (min-height: 800px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 375px ) and (min-height: 812px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 390px ) and (min-height: 844px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 393px ) and (min-height: 873px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 414px ) and (min-height: 896px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 412px ) and (min-height: 915px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 810px ) and (min-height: 1080px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 1280px ) and (min-height: 720px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 1366px ) and (min-height: 768px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 1440px ) and (min-height: 900px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 1536px ) and (min-height: 864px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 1600px ) and (min-height: 900px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 1920px ) and (min-height: 1080px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  @media screen and (min-width: 2560px ) and (min-height: 1440px) {
    .skills-imgs {
        width:  40% !important;
    }
  }
  
  @media screen and (min-width: 2560px ) and (min-height: 1440px) {
    .skills-imgs {
        width:  40% !important;
    }
  }

  .libutton {
  display: inline;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  text-align: center;
  outline: none;
  text-decoration: none !important;
  color: #ffffff !important;
  width: 200px;
  height: 32px;
  border-radius: 16px;
  background-color: #0A66C2;
  font-family: "SF Pro Text", Helvetica, sans-serif;
}

.sliderIcon-prev::before {
  content: '\2039'; /* Unicode character for right arrow (›) */
  color: var(--primary-color); /* Change this to your desired color for the next arrow */
  font-size: 50px;
  font-weight: bold;
}

.sliderIcon-next::before {
 content: '\203A'; /* Unicode character for right arrow (›) */
 color: var(--primary-color); /* Change this to your desired color for the next arrow */
 font-size: 50px;
 font-weight: bold;

}

.carousel-container {
  max-width: 800px; /* Adjust the maximum width as needed */
  margin: 0 auto; /* Center the container */
}

/* Custom styles for controlling iframe size and centering */
.iframe-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.iframe-container iframe {
  max-width: 100%;
  max-height: 100%;
}

.rounded-self{
border-radius: 10px;
border-width: 3px;
border-style: groove;
border-color: var(--primary-color);
}

img iframe div{
  max-width: 100%; /* Make sure images don't exceed their container width */
  height: auto;    /* Maintain aspect ratio */
}

#aboutImage{
  max-height: 200px;
}

.about-me{
  min-height: 250px !important;
  min-width: 250px !important;
}

ul.c-li-icon li {
  margin-left: 70px; 
  padding-bottom: 10px;
}

p{
  font-size: 1.2em;
}

ul.c-li-icon p::before {
  content: "◆"; /* Custom bullet */
  position: absolute; /* Position it to the left of the text */
  left: 0; /* Align left */
  color: var(--primary-color);
  margin-left: 50px;
}

mark {
  background-color: var(--primary-color);
  border-radius: 10px;
  margin-left: 10px;
}


div.skill h5{
  margin-top:8px;
}


