/******************* Keep it flowing ***********************************************/
.hostel-container * {
      box-sizing: border-box;
    }

    .hostel-container {
      margin: 0 auto;
      padding: 2rem;
      font-family: Arial, sans-serif;
      background-color: #fff;
      display: flex;
      justify-content: center;
    }

    .hostel-grid {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 1000px;
      width: 100%;
    }

    .column {
      display: flex;
      flex-direction: column;
      gap: 20px;
      flex: 1;
      min-width: 220px;
    }

    .card {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      text-align: center;
      padding: 1rem;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .card img {
      width: 100%;
      border-radius: 8px;
    }

    .card h3 {
      margin: 1rem 0 0;
    font-size: var(--fs-32);
    font-family: LT Remark, sans-serif;
    line-height: 1;
    margin-bottom: 10px;
    }

    .overlay {
      position: absolute;
      bottom: -100%;
      left: 0;
      right: 0;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: bottom 0.4s ease;
      padding: 1rem;
    }

    .card:hover .overlay {
      bottom: 0;
    }

    .overlay button {
      margin-top: 10px;
      padding: 0.5rem 1rem;
      background: #ff7043;
      border: none;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }

    .sharavati { background-color: #ffeaea; }
    .brahmaputra { background-color: #ffeaea; }
    .tapti { background-color: #ffefc2; }
    .alakananda { background-color: #ffefc2; }
    .krishna { background-color: #ffeaea; }
    .narmada { background-color: #ffefc2; }

    .hostel-header {
      background-color: #a52727;
      color: white;
      padding: 1.5rem;
      border-radius: 10px;
      text-align: center;
      font-weight: bold;
      font-size: 1.2rem;
    }
	  .mobile-only {
		display:none;
	  }
	  div.mobile-only h2:after { border:0px; }

    @media (max-width: 768px) {
      .hostel-grid {
        flex-direction: column;
        align-items: center;
      }
	  .hostel-header {
		display: none;
	  }
	  .mobile-only {
		  display: block;
		}

      .column {
        width: 100%;
        max-width: 350px;
      }
    }
	/**********************Smart Classrooms - Keep it flow page*****************************************************************************************/
	  .keep-it-flowing-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }
    .keep-it-flowing-card {
      position: relative;
      /*width: 300px; */
	  width:auto;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .keep-it-flowing-card img {
      width: 100%;
      height: auto;
      display: block;
    }
    .keep-it-flowing-overlay {
      position: absolute;
      bottom: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
      color: white;
      width: 100%;
      padding: 20px;
	  text-align: center;
    }
    div.keep-it-flowing-overlay p {
      margin: 0 0 10px;
      font-size: 1rem;
	  padding-bottom: 0px;
    }
    .button {
      background-color: #f0ad4e;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      text-decoration: none;
      font-weight: bold;
      display: inline-block;
    }	
    @media (max-width: 650px) {
      .keep-it-flowing-card {
        width: 90%;
      }
    }
	/**********************Support Department - Keep* it flow page*****************************************************************************************/
	 @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .hero {
      position: relative;
      margin: 20px;
      padding: 40px 20px;
      color: white;
      text-align: center;
      border-radius: 20px;
      z-index: 1;
    }

    .hero::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      right: 0; bottom: 0;
      background: linear-gradient(
          rgba(0, 0, 0, 0.6), 
          rgba(0, 0, 0, 0.6)
        ),
        url('/theme/jog/images/keep-it-flow/support-your-dept.png') no-repeat center center/cover;
      z-index: -1;
      border-radius: 20px;
      pointer-events: none;
    }

    .hero > * {
      position: relative;
      z-index: 1;
    }

    .hero h1 {
      font-size: 2.2rem;
      margin-bottom: 10px;
    }

    .hero p {
      font-size: 1rem;
      max-width: 800px;
      margin: auto;
    }

    
/*******************************/    
.search-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30px;
      flex-wrap: nowrap;
      flex-direction: row;
      gap: 0;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .label {
      background-color: #d89b1e;
      color: black;
      padding: 11px 20px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      font-weight: bold;
      flex-shrink: 0;
    }

    .select-container {
      display: flex;
      align-items: center;
      position: relative;
      background: white;
      flex-grow: 1;
    }

    .search-input {
      padding: 11px;
      width: 100%;
      border: none;
      font-size: 1rem;
      outline: none;
    }

    .black-arrow {
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid black;
      margin-right: 10px;
      cursor: pointer;
      position: absolute;
      right: 10px;
    }

    .search-icon {
      width: 50px;
      height: 50px;
      background-color: #d89b1e;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
    }

    .search-icon::before {
      content: "";
      width: 16px;
      height: 16px;
      border: 3px solid black;
      border-radius: 50%;
      position: absolute;
      top: 12px;
      left: 12px;
    }

    .search-icon::after {
      content: "";
      width: 3px;
      height: 10px;
      background: black;
      position: absolute;
      top: 26px;
      left: 26px;
      transform: rotate(45deg);
    }

    .dropdown-list {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 10;
      background: #222;
      color: white;
      width: 100%;
      max-height: 200px;
      overflow-y: auto;
      border-radius: 0 0 10px 10px;
      display: none;
    }

    .dropdown-list div {
      padding: 10px;
      cursor: pointer;
	  text-align: left;
    }

    .dropdown-list div:hover {
      background-color: #333;
    }

    @media (max-width: 600px) {
      .search-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
      }

      .label {
        border-radius: 20px 20px 0 0;
        width: 100%;
        text-align: center;
		padding: 14px 0px;
      }

      .select-container {
        width: 100%;
        border-radius: 0;
      }

      .search-icon {
        width: 100%;
        border-radius: 0 0 20px 20px;
      }
    }
/*******************************/
	/********************* lIGHT BOX CSS*********************************************************************************************************************/
	 .lbox-card {
      background-color: #881c1c;
      color: white;
      padding: 20px;
      border-radius: 10px;
      max-width: 600px;
      margin: 20px auto;
      position: relative;
    }

    .lbox-card button {
      background-color: #ffcb05;
      color: black;
      border: none;
      padding: 10px 20px;
      font-size: 1rem;
      border-radius: 5px;
      cursor: pointer;
    }

    .lbox-card button:hover {
      background-color: #e0b100;
    }

/* Lightbox overlay (unchanged) */
.lightbox_del {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 999;
} 
.lightbox {
display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}


/* Outer content container (no scroll here) */
.lightbox-content-del {
  background: #e6c382;
  color: #000;
  padding: 20px;
  border-radius: 16px;
  width: 85vw;
  max-width: 1000px;
  height: 85vh;
  display: flex;
  gap: 20px;
  position: relative;
  overflow: hidden; /* Prevent outer scroll */
}
.lightbox-content {
  background-color: #e6c382;
  color: #000;
  border-radius: 12px;
  width: 90%;
  max-width: 960px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Inner scrollable area */
.lightbox-inner-del {
  display: flex;
  gap: 20px;
  height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}
.lightbox-inner {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  gap: 1rem;
  padding: 1.5rem;
  box-sizing: border-box;
}

/* Image section */
.lightbox-image-del {
  flex: 0 0 40%;
}
.lightbox-image {
  flex-shrink: 0;
  width: 40%;
}

.lightbox-image img-del {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.lightbox-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Text content section */
.lightbox-text-del {
  flex: 1;
  text-align: left;
  padding-right: 20px;
}
.lightbox-text {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 20px;
}
.lightbox-text ul {
  list-style-type: disc;      /* Default bullet style */
  margin-left: 1.5rem;        /* Indent the list */
  padding-left: 0;            /* Remove default padding */
  color: #000;                /* Text color */
  font-size: 16px;            /* Font size */
  line-height: 1.6;           /* Line height for readability */
}

.lightbox-text li {
  margin-bottom: 0;      /* Space between list items */
   list-style: disc;
   font-size: 16px; 
}
.lightbox-text h2 {
      font-size: 1.8em;
      margin-top: 0;
	  width: 99%;
	  text-align: left;
	  padding-bottom: 10px;
    }
	
.lightbox-text h2:after {
	border:0px
	}
	
/* Close button */
.close-btn-del {
  position: absolute;
  top: 10px;
  right: 15px;
  background:#8c191c;
  border: none;
  font-size: 1.2rem;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
   color:white;
}
.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #8c191c;
  color: #fff;
  border: none;
  padding: 0.25rem 0.75rem;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 4px;
}

/* Donate trigger button */
.donate-btn {
  background-color: #db9515;
  border: none;
  padding: 10px 25px;
  font-size: 1rem;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

.donate-btn:hover {
  background-color: #b67810;
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .lightbox-content {
    width: 90vw;
    height: 90vh;
  }

  .lightbox-inner {
    flex-direction: column;
  }

  .lightbox-text {
    text-align: center;
  }
}

.lightbox-inner::-webkit-scrollbar, .lightbox-text::-webkit-scrollbar {
  width: 10px;              /* Width of the scrollbar */
}

.lightbox-inner::-webkit-scrollbar-track, .lightbox-text::-webkit-scrollbar-track {
   /* background: #f4f4f4;     Scrollbar track (background) color */
   background: #f4f4f4; 
  border-radius: 8px;
}

.lightbox-inner::-webkit-scrollbar-thumb, .lightbox-text::-webkit-scrollbar-thumb {
  background-color: #c0a766;  /* Thumb color */
  border-radius: 8px;
  border: 2px solid #f4f4f4;  /* Optional: adds padding effect */
}



.descriptionList p {
		padding-bottom:10px;
		text-align:left;
	}
.descriptionList a,.descriptionList a:visited { 
	text-decoration:underline;
	color:#000000;
}
.descriptionList a:hover {
	text-decoration:none;
	color:#000000;
}



.description-list {
  text-align: left;
  margin-top: 15px;
}
.progress-container {
padding-top:10px;
padding-bottom:20px;
}

.donate-btn, donate-btn:visited {
color: var(--clr-general-white);
/*background-color: #cd8705;
border: 1px solid #f0ad4e;*/
background-color: #8c191c;
border: 1px solid #8c191c;


padding: 10px 25px;
border-radius: 4px;
transition: 0.3s all ease-in-out;
font-size: var(--fs-16);
font-weight: var(--fw-600);
letter-spacing: 0;
line-height: var(--fs-17);
font-family: Lato, sans-serif;
cursor: pointer;
display: inline-block;
text-align: center;
outline: none;
text-transform: initial;
width:200px;

}

    .donate-btn:hover {
          color: var(--clr-primary-100);
    background: var(--clr-general-white);
    border: 1px solid var(--clr-primary-100);
    }
	
	.donate-btn a:hover, a:active, a:focus {  color: var(--clr-general-white); }
	/**********************POP UP Light box- Keep* it flow page*****************************************************************************************/
	/* Lightbox Overlay */
    .popup-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      z-index: 1000;
      animation: fadeIn 0.4s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Popup Box */
    .popup-box {
      position: relative;
      background: #fdf3df;
      padding: 30px 20px;
      border-radius: 10px;
      text-align: center;
      border: 2px solid #d47c00;
      box-shadow: 0 5px 20px rgba(0,0,0,0.3);
      max-width: 480px;
      width: 90%;
      animation: fadeIn 0.4s ease-in-out;
    }

    .popup-box h2 {
      color: #801d1d;
      margin-bottom: 10px;
	  display: block;
    font-size: 1.5em;
    font-weight: bold;
	font-family: 'Lato';

    }

    .popup-box h3 {
      color: #801d1d;
      margin-bottom: 10px;
	  	  display: block;
    font-size: 1.17em;
    font-weight: bold;
	font-family: 'Lato';

    }

    .popup-box p {
      margin-bottom: 20px;
      color: #000;
	  font-family: 'Lato';
    }

    .popup-box button {
      /*background-color: #d47c00; */
	  	background-color: #8c191c;
    border: 1px solid #8c191c;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
    }

    .popup-box button:hover {
     /* background-color: #b76800; */
	           color: var(--clr-primary-100);
    background: var(--clr-general-white);
    border: 1px solid var(--clr-primary-100);
    }

    /* Close Button */
    .popupclose-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 22px;
      color: #801d1d;
      cursor: pointer;
      font-weight: bold;
    }

    .popupclose-btn:hover {
      color: #b30000;
    }
	
	.popup-box h2:after {
	border:0px;
	}
	
	div.nobord-text h2:after {
	border:0px;
	}
	div.text-white h2 {
	color:white;
	}
	.lato-font { font-family: 'Lato'; }
	/**********************Testimonials slider - Keep* it flow page*****************************************************************************************/
	.testimonial-wrapper {
      font-family: Georgia, serif;
      background-color: #f9f9f9;
      padding: 40px 20px;
      text-align: center;
    }

    .testimonial-wrapper h2 {
      margin-bottom: 20px;
    }

    .slider-container {
      position: relative;
      max-width: 750px;
      margin: auto;
      background: #f3ddb5;
      border-radius: 20px;
      padding: 30px 50px 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      touch-action: pan-y;
    }

    .testimonial-content {
      text-align: left;
      max-width: 75%;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .testimonial-content.show {
      opacity: 1;
    }
	
	.testimonial-wrapper h3 {
	    font-size: var(--fs-32);
    font-family: LT Remark, sans-serif;
    line-height: 1;
	}
	
    .testimonial-content p {
      font-size: 16px;
      margin: 0px;
	  font-family: Lato, sans-serif;
    }

    .author {
      margin-top: 10px;
      font-size: 13px;
      font-weight: bold;
    }

    .image-container img {
      width: 120px;
      height: 120px;
      object-fit: cover;
      border-radius: 50%;
      transition: opacity 0.5s ease-in-out;
    }

    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      color: #333;
      background: #fff3;
      border-radius: 50%;
      padding: 5px 10px;
      cursor: pointer;
      user-select: none;
    }

    .arrow:hover {
      background: #fff6;
    }

    .arrow.left {
      left: 15px;
    }

    .arrow.right {
      right: 15px;
    }

    .nav-buttons {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
    }

    .dot {
      height: 10px;
      width: 10px;
      margin: 0 4px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.3s;
      cursor: pointer;
    }

    .dot.active {
      background-color: #f5b91d;
    }
	
.quote-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.quote-icon {
  font-size: 50px;
  color: maroon;
  flex-shrink: 0;
}

.quote-text {
  font-size: 14px;
  /*margin: -20px 0 0 0;*/
  margin: 0;
  line-height: 1.4;
  padding-top: 20px; /* pushes icon down so text appears higher */
}

/***********************************Reach Out*******************************************************/
  .contact-section {
      background-color: #8B1C1C;
      color: white;
      text-align: center;
      padding: 40px 20px;
      border-radius: 8px;
    }

    .contact-section h2 {
      margin: 0;
      font-size: 24px;
	  color:#fff;
	  font-size: var(--fs-32);
    font-family: LT Remark, sans-serif;
    line-height: 1;
    }
	
	.contact-section h2:after {
	border-bottom: 0px;
	}
	
	.contact-info a {
  color: white;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline; /* Ensures no underline on hover */
}

    .contact-section p {
      margin: 5px 0 20px;
      font-weight: bold;
      font-size: 16px;
    }

    .contact-info {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
      font-size: 15px;
    }

    .contact-info span {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .contact-info i {
      color: #ccc;
    }

    @media (max-width: 500px) {
      .contact-info {
        flex-direction: column;
        gap: 10px;
      }
    }
/***********************Choose ur impact - why give IIT block******************************************************************/
    .impact-container {
      display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  max-width: 1200px;
  margin: 3rem auto; /* Adds top and bottom spacing */
  font-family: 'Lato';
    }
	
	.impact_right {
  background-color: #fff5f5;
  border: 2px solid #8B0000;
  border-radius: 8px;
  text-align: center; /* Center align all text */
}

.impact_right h3,
.impact_right p {
  margin-left: auto;
  margin-right: auto;
}

div.impact_right h3,
div.impact_right p {
    margin-bottom: 40px;
}

    .impact_left,
    .impact_right {
      flex: 1 1 300px;
      padding: 1.5rem;
      box-sizing: border-box;
    }

    .impact_left h2 {
      color: #8B0000;
      font-size: 1.8rem;
      margin-bottom: 1rem;
	  text-align: center;

    }
	
	.impact_left h2:after { border:0px; }
	
	div.impact_left h2:after { border:0px; }
	
	

    div.impact_left p {
      line-height: 1.6;
      color: #333;
	  text-align: left;
    }

    .impact_right {
      background-color: #fff5f5;
      border: 2px solid #8B0000;
      border-radius: 8px;
    }
	
	    .impact_right h2 {
      color: #8B0000;
      font-size: 1.8rem;
      margin-bottom: 1rem;
	  text-align: center;

    }
	
	.impact_left h2:after { border:0px; }
	

    .impact_right h3 {
      color: #8B0000;
      font-size: 1.5rem;
      margin-top: 0;
    }

    .impact_right p {
      color: #333;
      line-height: 1.6;
    }

    .donate-button {
      display: inline-block;
      background-color: #8B0000;
      color: #fff;
      padding: 0.75rem 1.5rem;
      text-align: center;
      border-radius: 6px;
      text-decoration: none;
      font-weight: bold;
      margin-top: 1rem;
    }

    @media (max-width: 768px) {
      .impact-container {
        flex-direction: column;
        align-items: stretch;
      }
    }
	/****************************Areas to Support*******************************************************/
	
    .card_container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 60px;
    }

    .support_card {
	  max-width: 540px; /* or width: 320px; for fixed size */
	  margin: 0 auto; /* centers the card inside the grid cell */
      background-color: #cc9112;
      color: white;
      padding: 20px;
      border-radius: 10px;
      position: relative;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .support_card.red {
      background-color: #8a1e1e;
    }

    .support_card p {
      font-size: 16px;
      line-height: 1.6;
    }
	div.support_card h2 {
	font-size: 1.8rem;
	line-height: 1.2;
    font-family: 'Lato';
    font-weight: var(--fw-400);
    color: #fff;
    margin-bottom: 15px;
    position: relative;
    text-transform: capitalize;
    }
	.support_card.red h2 {
	color: white;
	 font-size: 1.5em;
	}
	
	div.support_card p {
	text-align:left;
	}
	
.support_card strong {
    display: inline-block; /* or block if you want full-width */
    padding-bottom: 8px;
}

    .button {
      display: inline-block;
      margin-top: 15px;
      padding: 10px 20px;
      background: #4c0000;
      color: white;
      text-decoration: none;
      border-radius: 5px;
    }

    .support_card.red .button {
      background: #f5b60d;
      color: black;
    }

    .img-top-right {
      position: absolute;
      top: -20px;
      right: -20px;
      width: 340px;
      height: 120px;
    }

    .img-bottom-left {

      bottom: -20px;
      left: -20px;
      width: 340px;
      height: 120px;
	  float: left;
	   margin-right: 15px; /* Adds space between the image and the text */
    margin-bottom: 15px; /* Adds space below the image */
    }
	.img-float-top-right {
  float: right;
  width: 340px;
  height: 160px;
  margin-left: 15px;
  margin-bottom: 15px;
  margin-top: -60px;
  border: 6px solid white;
   box-shadow: 0 0 0 1px #f8f8f8;
  border-radius: 10px; /* or use a larger value like 12px for more curvature */
  margin-right: -50px;
  z-index: 2;
  position: relative;
}

.img-float-bottom-left {
  float: left;
  width: 340px;
  height: 160px;
  margin-right: 15px;
  margin-top: 15px;
  border: 6px solid white;
   box-shadow: 0 0 0 1px #f8f8f8;
  border-radius: 10px;
  margin-bottom: -60px;
  margin-left: -50px;
}

.support_card img {
    max-width: none;
	box-sizing:unset;

}
@media (max-width: 768px) {
  .card_container {
    grid-template-columns: 1fr;
  }

  .img-top-right,
  .img-bottom-left,
  .img-float-top-right,
  .img-float-bottom-left {
    display: none;
  }
}

/*****************************************************************************/
.orangebtn {
  color: black;
  background-color: #f5b60d;
  border: 1px solid var(--clr-primary-100);
  padding: 17px 40px;
  border-radius: 4px;
  transition: 0.3s all ease-in-out;
  font-size: var(--fs-16);
  font-weight: var(--fw-600);
  letter-spacing: 0;
  line-height: var(--fs-17);
  font-family: Lato, sans-serif;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  outline: none;
  text-transform: initial;
}
@media only screen and (max-width: 1023px) {
  .orangebtn {
    font-size: var(--fs-15);
  }
}
.orangebtn:hover {
  color: var(--clr-primary-100);
  background: var(--clr-general-white);
  border: 1px solid var(--clr-primary-100);
}
.orangebtn:active,
.orangebtn:focus {
  color: var(--clr-primary-100);
  background: var(--clr-general-white);
  border: 1px solid var(--clr-primary-100);
}
/*****************************************************************************/
.btn-Firebrick {
  color: var(--clr-general-white);
  background-color: #f0ad4e;
  border: 1px solid #f0ad4e;
  padding: 10px 25px;
  border-radius: 4px;
  transition: 0.3s all ease-in-out;
  font-size: var(--fs-16);
  font-weight: var(--fw-600);
  letter-spacing: 0;
  line-height: var(--fs-17);
  font-family: Lato, sans-serif;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  outline: none;
  text-transform: initial;
}
.btn-Firebrick:hover {
  color: var(--clr-primary-100);
  background: var(--clr-general-white);
  border: 1px solid var(--clr-primary-100);
}
.pb-5 {
padding-bottom: 1.25rem;
}

.header__top li {
    color: var(--clr-general-black);
}