/*
---------------------------------------
Media Queries for Responsiveness
---------------------------------------
*/
@media (max-width: 1200px) {
  .popular-categories .naccs .menu div {
    padding: 0px 10px;  /* Reduce padding on smaller screens */
  }

  .popular-categories .nacc .thumb .left-text {
    margin-left: 15px;  /* Reduce margin for left text on smaller screens */
  }
}

@media (max-width: 768px) {
  .form-content .form-items {
    min-width: auto;  /* Remove min-width to prevent overflow */
    padding: 20px;  /* Reduce padding for smaller screens */
  }
}

/*
Ensure elements do not overflow their containers
*/
.popular-categories .naccs .menu div,
.popular-categories ul.nacc li {
  overflow: hidden;  /* Hide any content that goes beyond the element's box */
}

.popular-categories .nacc .thumb img {
  max-width: 100%;  /* Ensure images do not overflow their container */
  height: auto;  /* Maintain aspect ratio */
}

.form-content input[type=text], .form-content input[type=password], .form-content input[type=email], .form-content select {
  max-width: 100%;  /* Prevent input from overflowing */
}

.btn-primary {
  min-width: 100px;  /* Ensure buttons have a reasonable minimum width */
}

/*
---------------------------------------
Popular Categories
---------------------------------------
*/

.popular-categories {
    margin-top: 120px;
  }
  
  .popular-categories .section-heading {
    text-align: center;
    margin-bottom: 80px;
  }
  
  .popular-categories .naccs {
    position: relative;
    background-color: #2b2d42;
    border-radius: 7px;
  }
  
  .popular-categories .icon {
    display: inline-block;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    text-align: center;
    line-height: 62px;
    color: #8d99af;
    background-color: #fff;
    margin-right: 15px;
  }
  
  .popular-categories .icon img {
    max-width: 27px;
  }
  
  .popular-categories .naccs .menu div.first-thumb {
    border-top-left-radius: 7px;
  }
  
  .popular-categories .naccs .menu div.last-thumb {
    margin-bottom: 0px;
    border-bottom-left-radius: 7px;
  }
  
  .popular-categories .naccs .menu div {
    color: #fff;
    font-size: 15px;
    background-color: #8d99af;
    margin-bottom: 1px;
    height: 126px;
    text-align: left;
    padding: 0px 5px;
    line-height: 126px;
    cursor: pointer;
    position: relative;
    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .popular-categories .naccs .menu div.active,
  .popular-categories .naccs .menu div.active .thumb {
    background-color: #2b2d42;
  }
  
  .popular-categories ul.nacc {
    position: relative;
    min-height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .popular-categories ul.nacc li {
    opacity: 0;
    transform: translateX(-50px);
    position: absolute;
    list-style: none;
    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  
  .popular-categories ul.nacc li.active {
    transition-delay: 0.3s;
    position: relative;
    z-index: 2;
    opacity: 1;
    transform: translateX(0px);
  }
  
  .popular-categories ul.nacc li {
    width: 100%;
  }
  
  .popular-categories .nacc .thumb .left-text {
    margin-left: 30px;
  }
  
  .popular-categories .nacc .thumb .left-text h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 35px;
    margin-bottom: 30px;
  }
  
  .popular-categories .nacc .thumb .left-text p {
    color: #fff;
    margin-bottom: 30px;
  }
  
  .popular-categories .nacc .thumb .right-image {
    padding: 60px;
    display: inline-flex;
  } 
  
  .popular-categories .nacc .thumb img {
    border-radius: 7px;
  }
  
  .popular-categories .nacc .thumb .left-text .main-white-button a{
    width: 100%;
    text-align: center;
  }
  
  
  /* 
  ---------------------------------------------
  contact
  --------------------------------------------- 
  */
  
  .form-1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .form1 {
    height: 100%;
    background-color: #152733;
    overflow: hidden;
  }
  
  
  .form-holder {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      min-height: 100vh;
  }
  
  .form-holder .form-content {
    position: relative;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 60px;
  }
  
  .form-content .form-items {
    border: 3px solid #fff;
    padding: 40px;
    display: inline-block;
    width: 100%;
    min-width: 540px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align: left;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  
  .form-content h3 {
    color: #fff;
    text-align: left;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 5px;
  }
  
  .form-content h3.form-title {
    margin-bottom: 30px;
  }
  
  .form-content p {
    color: #fff;
    text-align: left;
    font-size: 17px;
    font-weight: 300;
    line-height: 20px;
    margin-bottom: 30px;
  }
  
  
  .form-content label, .was-validated .form-check-input:invalid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label{
    color: #fff;
  }
  
  .form-content input[type=text], .form-content input[type=password], .form-content input[type=email], .form-content select {
    width: 100%;
    padding: 9px 20px;
    text-align: left;
    border: 0;
    outline: 0;
    border-radius: 6px;
    background-color: #fff;
    font-size: 15px;
    font-weight: 300;
    color: #8D8D8D;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin-top: 16px;
  }
  
  
  .btn-primary{
    background-color: #6C757D;
    outline: none;
    border: 0px;
     box-shadow: none;
  }
  
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active{
    background-color: #495056;
    outline: none !important;
    border: none !important;
     box-shadow: none;
  }
  
  .form-content textarea {
    position: static !important;
    width: 100%;
    padding: 8px 20px;
    border-radius: 6px;
    text-align: left;
    background-color: #fff;
    border: 0;
    font-size: 15px;
    font-weight: 300;
    color: #8D8D8D;
    outline: none;
    resize: none;
    height: 120px;
    -webkit-transition: none;
    transition: none;
    margin-bottom: 14px;
  }
  
  .form-content textarea:hover, .form-content textarea:focus {
    border: 0;
    background-color: #ebeff8;
    color: #8D8D8D;
  }
  
  .mv-up{
    margin-top: -9px !important;
    margin-bottom: 8px !important;
  }
  
  .invalid-feedback{
    color: #ff606e;
  }
  
  .valid-feedback{
   color: #2acc80;
  }

  /*ALERT*/

  .contact-form .help-block ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .text-danger {
    color: #ffffff !important;
  }
  
  a.text-danger:hover,
  a.text-danger:focus {
    color: #ffffff !important;
  }