@import url('https://fonts.googleapis.com/css?family=Lato:400,700&display=swap');

/*body {
  padding-top: 56px;
  font-family: 'Lato', sans-serif;

}*/

html, body {
  padding-top: 36px;
  height: 100%;
  margin: 0;
  font-family: 'Lato', sans-serif;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* unvisited link */
a:link {
  color: #df2642;
}

/* visited link */
a:visited {
  color: #df2642;
}

/* mouse over link */
a:hover {
  color: #fc5f6b;
  text-decoration: none;
}

/* selected link */
a:active {
  color: #fc5f6b;
}

footer{
  margin-top: 50px;
}

.search-area{
  margin-top: 50px;
}

.search-area input{
  font-size: 30px;
}

.title{
  font-size: 30px;
  color:#6c757d;
}

.sub-title{
  font-size: 18px;
  color:#6c757d;
  line-height: 20px;
}

.websites-boxes{
  margin-top: 50px;
}

.websites-boxes .card{
  min-height: 112px;
}

.websites-boxes .box-link{
  text-decoration: none;
}

.websites-boxes h3{
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
}

.websites-boxes .info-title{
  color: #5e5ec5;
}

.websites-boxes .life-title{
  color: #438e3f;
}

.websites-boxes .dev-title{
  color: #cc9618;
}

.websites-boxes .edu-title{
  color: #fd8181;
}

.websites-boxes .comm-title{
  color: #6ecada;
}

.websites-boxes .prod-title{
  color: #fcaf6a;
}

.websites-boxes .cre-title{
  color: #c76cd5;
}

.websites-boxes .gam-title{
  color: #6cc1fc;
}

.websites-boxes .col1-title{
  color: #fe44be;
}

.websites-boxes .col2-title{
  color: #59d0bb;
}

.websites-boxes .col3-title{
  color: #9ae756;
}

.websites-boxes .card-body .card-title{
  font-size: 17px;
  margin-bottom: 5px;
  font-weight: bold;
}

.websites-boxes .card-body .card-title{
  color: #000;
}

.websites-boxes .card-body.info{
  background: #f2f2fd;
}

.websites-boxes .card-body.life{
  background: #e7f7e6;
}

.websites-boxes .card-body.dev{
  background: #fffcd7;
}

.websites-boxes .card-body.edu{
  background: #fee7e7;
}

.websites-boxes .card-body.comm{
  background: #e6fafd;
}

.websites-boxes .card-body.prod{
  background: #feecdb;
}

.websites-boxes .card-body.cre{
  background: #fae9fc;
}

.websites-boxes .card-body.gam{
  background: #cbe9fe;
}

.websites-boxes .card-body.col1{
  background: #fddaeb;
}

.websites-boxes .card-body.col2{
  background: #edfdfa;
}

.websites-boxes .card-body.col3{
  background: #eefae2;
}

.websites-boxes .box-link:hover .card-body{
  transition: 0.2s all;
}

.websites-boxes .box-link:hover .card-body.info{
  background: #e4e4fd;
}

.websites-boxes .box-link:hover .card-body.life{
  background: #cff3cd;
}

.websites-boxes .box-link:hover .card-body.dev{
  background: #fef9b7;
}

.websites-boxes .box-link:hover .card-body.edu{
  background: #fcd0d0;
}

.websites-boxes .box-link:hover .card-body.comm{
  background: #cff8fe;
}

.websites-boxes .box-link:hover .card-body.prod{
  background: #fee1c6;
}

.websites-boxes .box-link:hover .card-body.cre{
  background: #f9cbfe;
}

.websites-boxes .box-link:hover .card-body.gam{
  background: #95d2fc;
}

.websites-boxes .box-link:hover .card-body.col1{
  background: #febcdc;
}

.websites-boxes .box-link:hover .card-body.col2{
  background: #befdf2;
}

.websites-boxes .box-link:hover .card-body.col3{
  background: #d6fdb3;
}

.websites-boxes .card-body .card-text{
  font-size: 14px;
  color: #000;
}

.sidebar{
  margin-top: 40px;
}

.block{
  border: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.block h4{
  font-size: 16px;
  padding: 8px 10px;
  margin: 0;
  color: #ffffff;
}

.main-content{
  margin-top: 40px;
}

.sidebar .block.info h4{
  background: #5e5ec5;
}

.sidebar .block.life h4{
  background: #438e3f;
}

.sidebar .block.dev h4{
  background: #cc9618;
}

.block.content h4{
  background: #333333;
  text-transform: uppercase;
}

.sidebar .block ul{
  margin: 0;
  padding: 0;
  width: 100%;
}

.sidebar .block ul li{
  list-style: none;
  width: 100%
}

.sidebar .block.info ul li a:hover, .sidebar .block.info ul li a.active{
  color: #5e5ec5;
}

.sidebar .block.life ul li a:hover, .sidebar .block.life ul li a.active{
  color: #438e3f;
}

.sidebar .block.dev ul li a:hover, .sidebar .block.dev ul li a.active{
  color: #cc9618;
}

.sidebar .block ul li a{
  padding: 5px 10px;
  border: 1px solid #f8f8f8;
  width: 100%;
  display: inline-block;
  color: #333333;
  text-decoration: none;
}

.main-area{
  padding: 20px 20px 10px 20px;
}

.letters-content{
padding: 0 15px;
margin-bottom: 10px;
}
.char-box{
border: 1px solid #f0f0f0;
text-align: center;
font-size: 30px;
height: 60px;
padding-top: 6px;
cursor: pointer;
transition: 0.3s all;
}
.char-box:hover{
background: #f0f0f0;
}
.char-box:last-child{
border-right: 1px solid #c8c8c8;
}

.nav-pills .nav-link{
color: #bbbbbb;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
background: #333333;
color: #fff;
border-radius: 0;
}

        .swiper-slide {
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: #FFFFFF;
            padding: 10px;
            border-radius: 10px;
        }

        .swiper-slide2 {
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: #FFFFFF;
            padding: 10px;
            border-radius: 10px;
        }

        .swiper-button-prev {
            left: -80px !important;
        }

        .swiper-button-next {
            right: -80px !important;
        }

        .swiper {
            width: calc(100% - 40px); /* Adjust width to prevent overflow */
            overflow: hidden; /* Hide extra slides */
        }

        .mySwiper {
            overflow-y: visible !important;
        }

        .grid-container {
            width: calc(100% - 40px);
            padding-left: 30px;
            flex-wrap: wrap;
            display: flex;
            justify-content: center; /* Center columns */
            gap: 25px; /* Space between columns */
        }

        .column {
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: 10px; /* Space between boxes */
        }

        .grid-column {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .grid-container2 {
          padding-left: 25px;
          padding-right: 25px;
          display: flex;
          flex-wrap: wrap;
          gap: 25px; /* Space between boxes */
          justify-content: space-between; /* Distributes space evenly */
          width: 100%; /* Ensures it takes full width */
        }

        .card-main-box2 {
            width: calc(33.333% - 20px); /* Ensures 3 equal columns */
            height: 130px; /* Fixed height for uniformity */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            border-radius: 5px;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .card-main-box2 {
                width: calc(50% - 20px); /* 2 columns on tablets */
            }
        }

        @media (max-width: 768px) {
            .card-main-box2 {
                width: 100%; /* 1 column on mobile */
            }
        }

        .menu {
            list-style: none; /* Remove default bullets */
            padding: 10px;
            margin: 0;
            background-color: white; /* White background */
            display: flex; /* Align items horizontally */
            justify-content: center; /* Center align */
            flex-wrap: wrap; /* Ensure wrapping on small screens */
            align-items: center; /* Center align */
        }

        .menu li {
            display: inline; /* Inline list items */
        }

        .menu li:not(:last-child)::after {
            content: " | "; /* Add separator between items */
            margin: 0 10px;
            color: black; /* Separator color */
        }

        .menu li a {
            text-decoration: none;
            color: black; /* Black text */
            padding: 5px 10px;
            font-size: 16px; /* Default font size */
            transition: color 0.3s ease;
            text-transform: uppercase;
        }

        .small-title {
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 12px;
            font-weight: bold;
            color: rgba(0, 0, 0, 0.6); /* Adjust color for visibility */
            background: rgba(255, 255, 255, 0.8); /* Optional: semi-transparent background */
            padding: 2px 6px;
            border-radius: 3px;
        }

        /* Responsive Font Size for Smaller Screens */
        @media (max-width: 768px) {
            .menu li a {
                font-size: 16px; /* Slightly smaller font */
            }
        }

        @media (max-width: 480px) {
            .menu {
                flex-direction: column; /* Stack menu items vertically */
                align-items: center; /* Center align */
            }

            .menu li:not(:last-child)::after {
                content: ""; /* Remove separators on small screens */
            }

            .menu li a {
                font-size: 14px; /* Even smaller font for very small screens */
                display: block; /* Ensure full-width clickable area */
                padding: 8px 0;
            }
        }

       @media (max-width: 1024px) {
            .column:nth-child(n+3) { 
                display: none; /* Hide 3rd column */
            }
            .column {
                flex: 0 1 calc(50% - 20px); /* Two equal columns */
            }
        }

        @media (max-width: 768px) {
            .column:nth-child(n+2) { 
                display: none; /* Hide 2nd column */
            }
            .column {
                flex: 0 1 100%; /* One full-width column */
            }

            .card-pop-box {
              width: 100%;
            }
        }
        

@media only screen and (max-width: 991px) {
    #first {
        order: 2;
    }
    #second {
        order: 1;
    }
    #third {
        order: 3;
    }
}

@media only screen and (min-width: 992px) {
    #first {
        order: 3;
    }
    #second {
        order: 2;
    }
    #third {
        order: 1;
    }
}

.tooltip-btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
}

.tooltip-btn .tooltip-text {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap; /* Ensures the tooltip is only as wide as the text */

    /* Positioning */
    position: absolute;
    bottom: 125%; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip Arrow */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Places it at the bottom of the tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip-btn:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

    .expand-btn, .expand-btn-personal, .expand-btn-pop, .expand-btn-cat {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background-color: #FFFFFF;
        color: darkslategrey;
        border: none;
        width: 30px;
        height: 30px;
        font-size: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        cursor: pointer;
        transition: transform 0.2s ease-in-out;
    }
    .expand-btn, .expand-btn-personal, .expand-btn-pop, .expand-btn-cat:hover {
        transform: scale(1.2);
    }

    .expanded-content, .expanded-content-personal, .expanded-content-pop, .expanded-content-cat { 
      margin-top: 10px; 
      margin-left:-20px; 
      z-index: 100; 
      position: absolute; 
      width:100%; 
      background-color: #FFFFFF; 
      border: 1px solid #ccc; 
      padding: 10px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    }

    .category-label {
          position: absolute;
          bottom: 25px;
          right: 10px;
          font-size: 10px;
          color: #666;
          background-color: #f9f9f9;
          padding: 2px 4px;
          pointer-events: none;
    }

    @media (max-width: 600px) {
          .hide-on-mobile {
            display: none !important;
          }
        }

    .expanded-content {
          position: absolute;
          top: 100%;
          left: 20px;
          width: 100%;
          background: white;
          border: 1px solid #ccc;
          z-index: 100;
          padding: 10px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }