@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: 40px;
}

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

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

.websites-boxes h3{
  font-size: 18px;
  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);
    }

        /* Style for the page counter */
        .swiper-page-counter {
          text-align: center;
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 14px;
          color: #666;
          font-weight: 500;
      }
      .navbar-light .navbar-nav .nav-link {
         color: #222222;
         font-size:16px;
         font-weight:500;
      }
      .navbar-expand-lg .navbar-nav .nav-link {
          padding-right: 15px;
          padding-left: 15px;
      }
      .navbar-nav .nav-link {
    position: relative;
    padding: 0.5rem 1rem;
    color: #222222;
    transition: color 0.3s;
    }
    
    .navbar-nav .nav-link:hover {
    color: #222222!important;
    }
    
    .navbar-nav .nav-link.active {
    color: #222222;
    }
    
    .navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #222222!important;
    border-radius: 2px;
    }
    .btn-default{
      background-color: #222222;
      color: #fff !important;
      font-size: 14px;
      /*width: 128px;*/
      padding: 7px 20px;
      border-radius: 6px;
      font-weight:500;
    }
    .card-title h1{
      color: #222;
      font-size: 32px;
      font-weight: 800;
    }
    
    .card {
    border:0px;
    }
    
    .user-icon{
      margin-right: 20px;
      width: 24px;
      height: 24px;
    }
    body {
    font-family: 'Manrope', sans-serif;
    }
    a:link, a:visited {
      color:#398a7d;
    }
    .live-search-box{
    font-size:24px!important;
    border: 1px solid #9FA7AF;
    border-left:0px!important;
    border-radius: 6px;
    color:#646464;
    padding: .375rem .05rem;
    }
    .custom-select-style{
    font-size:24px!important;
    border: 1px solid #9FA7AF;
    border-radius: 6px;
    color:#646464;
    margin-left:15px;
    }
    .input-group{
      width:80%!important;
    }
    .input-group-text{
      background:transparent;
      border: 1px solid #9FA7AF;
      border-radius: 6px;
      padding: .375rem .90rem;
    }
    .form-control:focus{
      box-shadow:none;
      border-color:#9FA7AF;
      color:#646464;
    }
    /* Wrapper ensures correct positioning */
    .custom-select-wrapper {
    position: relative;
    }
    .input-group-text i{
      color:#646464;
      font-size:24px;
    }
    
    /* Remove default arrow */
    .custom-select-style {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    }
    
    /* Orange arrow (you can change the color here) */
    .custom-select-wrapper::after {
    content: "▾"; /* Downward triangle symbol */
    font-size: 14px;
    color: #ff7b00; /* 👈 Change this color */
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    }
    
    .card-cat-box .card{
      height: 200px;
      text-align: left;
    }
    .card-cat-box .card-body{
      background-color: #F7F5F9;
      border-radius: 20px;
    }
    .card-cat-box .card-title{
      color: #222222!important;
      font-size:20px!important;
      margin-top:35px;
    }
    .card-cat-box .small-title{
      background:none;
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 14px;
      color: #222222;
      padding: 2px 6px;
      border-radius: 3px;
      font-weight:normal;
    }
    .card-cat-box .card-text{
      font-size: 14px!important;
      color:#646464!important;
    }
    .card-cat-box {
      margin-right: 25px !important;
      width: 355px;
      margin-bottom: 25px;
      border-radius: 30px;
    }
    
    .page-item .page-link  {
      z-index: 1;
      color: #646464;
      background-color: transparent;
      border-color: #BBBBBB;
      border-radius: 30px;
      margin: 0px 5px;
      width: 36px;
      height: 36px;
      font-size: 14px;
      padding: 8px;
    }
    .page-item.active .page-link, .page-item .page-link:hover {
      border-color: #398a7d;
      background-color: #398a7d;
      color: #fff;
      font-size: 14px;
      width: 36px;
      height: 36px;
      border-radius: 30px;
      padding: 8px;
    }
    
    .page-item .page-link:focus, .btn:focus{
     box-shadow:none;
    }
    
    .page-item.disabled .page-link {
      color: #6c757d;
      pointer-events: none;
      cursor: auto;
      background-color: #fff;
      border-color: #BBBBBB;
      width: 36px;
      height: 36px;
      border-radius: 30px;
      padding: 8px;
    }
    
    .page-item:last-child .page-link, .page-item:first-child .page-link {
      width: 36px;
      height: 36px;
      border-radius: 30px;
    }
    
    .pagination {
    justify-content: center;
    }
    
    .footer-section h2{
      font-size:20px;
      color:#222222;
      font-weight:800;
    }
    .footer-section h3{
      font-size:18px;
      color:#222222;
      font-weight:700;
    }
    .footer-section p{
    font-size:13px;
    color:#646464;
    }
    .footer-section{
      color:#646464;
    }
    .social-icons{
      list-style:none;
      text-align:right;
    }
    .social-icons li{
      float: left;
    }
    .footer-links{
      list-style:none;
      padding-left:0px;
    }
    .footer-links li a{
      color:#646464;
      font-size:13px;
      font-weight:500;
    }
    
    .subscription-textfield{
      background: #F7F5F9;
      width: 315px;
      font-size: 13px;
      color: #646464;
      border-radius: 6px;
      display: inline;
    }
    .subscribe-btn{
      font-size: 13px;
      width: auto !important;
      padding: 7px 12px;
      margin-left: -10px;
    }  
    
    #feeling-lucky-btn {
      /*background-color: #222222;*/
      background-color:#398a7d;
      color: #fff;
      padding: 6px 14px;
      border-radius: 6px;
      border:1px solid #398a7d;
    }
    
    #reset-btn, #reset-btn:hover {
      color: #555;
      border-radius: 6px;
      padding: 6px 14px;
      background:none;
    }
    
    .form-group.mt-2.text-center {
      margin-top: 10px;
    }

    .about-us-section{
      background: #F7F5F9;
      padding: 20px;
      float: left;
      width: 100%;
      margin-top:20px;
    }

    .about-us-section-title{
      width: 440px;
      float: left;
      padding-top: 8px;
      margin-bottom:10px;
    }
    .about-us-section-image{
       float:right;
       margin-bottom:10px;
    }

    .about-us-section-title h5{
      font-weight:800;
      font-size:20px;
      color:#222222;
    }

    .about-us-section-text{
      float: left;
      width: 100%;
    }

    .about-us-section-text, li{
      font-size:14px;
      color:#646464;
      padding: 5px 0px;
    }

    li b{
      color:#222222;
    }

    .free-tool-section{
      text-align:center;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .free-tool-section-title{
      font-size:24px;
      color:#222222;
      font-weight:800;
    }

    .free-tool-section-text{
      font-size:14px;
      color:#646464;
    }
    .suggestion-container{
      float:left;
      width: 100%;
      margin: 20px 0px;
    }
    .suggestion-icon{
      float: left;
      margin-right: 20px;
      border-radius: 50%;
      background: #F7F5F9;
      padding: 10px;
    }

    .suggestion-icon img{
      width: 60px;
      height: 60px;
    }

    .suggestion-title{
      font-size: 18px;
      font-weight: 700;
      color:#222222;
    }

    .suggestion-text{
      font-size: 14px;
      color:#646464;
    }

    .get-started-section {
      background-image: url('/images/get-started-bg.png');
      padding: 55px 100px 55px;
      background-size: cover;
      background-position: center;
      height:auto;
      margin-bottom: 40px;
  }

  .get-started-section h3{
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
  }

  .get-started-section p{
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .get-started-section .btn{
    background-color: #398a7d;
    color:#fff!important;
  }

  .websites-boxes .card-body.edu, .websites-boxes .card-body.life {
    background: transparent!important;
  }

  .btn-primary, .btn-primary:hover, .btn-primary.disabled, .btn-primary:disabled{
    background: #398a7d;
    border: 1px solid #398a7d;
  }

  .websites-boxes .mb-3{
    font-size:32px;
    font-weight:800;
  }

  .custom-confirm-outline {
    border: 2px solid #f27474 !important; /* Outline color */
    box-shadow: none !important;          /* Remove default shadow */
  }
  
  .custom-confirm-outline:focus, .custom-confirm-outline:active {
    box-shadow: 0 0 0 3px #f27474 !important; /* Focus outline */
  }

  .swal2-styled.swal2-confirm:focus,
  .swal2-styled.swal2-cancel:focus,
  .swal2-input:focus,
  .swal2-textarea:focus {
      box-shadow: none !important;
      outline: none !important;
  }

  /* Make input-group full width on mobile */
.flex-mobile-full {
  flex: 1;
}

/* Default desktop: keep inline */
.custom-select-wrapper {
  width: 180px;
}

/* MOBILE: Stack vertically + full width */
@media (max-width: 767px) {
  .get-started-section {
  padding: 35px 20px;
  }
  
  .card-cat-box {
  max-width: 700px;
  margin: 0 auto!important; /* Centers the card */    
  }

  .flex-mobile-full {
      width: 100% !important;
  }

  .custom-select-wrapper {
      width: 100% !important;
      margin-top: 15px;
  }

  .custom-select-style {
      width: 100% !important;
      margin-left: 0px;
  }

  .about-us-section-title{
    width: 250px;
  }
}

.layout-btn {
  background: #398a7d!important;
  color: #fff !important;
  border: 2px solid #398a7d!important;
}

.filter-btn.active {
  background: #222222;
  color: white;
  border-color: #222222;
}

.app-download-info span {
  font-size: 16px;
  color: #646464;
}

.app-download-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.store-badge img {
  height: 45px;
  width: auto;
}

.mb-3{
margin-bottom: 0.5rem !important;
}

/* Mobile full-width badges */
@media (max-width: 576px) {
.store-badge img {
height: 40px;
}
}