*{ margin: 0; padding: 0; box-sizing: border-box; }

::-webkit-scrollbar{ display: none; }

html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; position: relative; }

body a{ text-decoration: none; color: #004A99; }

/*============================S===========================*/
#page-loader{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #ffffff;
  z-index:9999999;
  transition:opacity 450ms ease,visibility 450ms ease;
  will-change:opacity;
}
.loader-card{
  padding:18px 22px;
}
.loader-letters{
  display:flex;
  gap:8px;
  margin-top:6px
}
.loader-letters span{
  display:inline-block;
  font-weight:420;
  font-size:20px;padding:6px 8px;
  border-radius:6px;
  color: #004a99;
  background: #f2f2f2;
  transform-origin:center center;
  animation:pop 1.2s ease-in-out infinite;
}
.loader-letters span:nth-child(1){animation-delay:0s}
.loader-letters span:nth-child(2){animation-delay:0.08s}
.loader-letters span:nth-child(3){animation-delay:0.16s}
.loader-letters span:nth-child(4){animation-delay:0.24s}
@keyframes pop{
  0%{transform:translateY(0) scale(1)}
  30%{transform:translateY(-6px) scale(1.06)}
  60%{transform:translateY(-2px) scale(1.02)}
  100%{transform:translateY(0) scale(1)}
}
#page-loader.loaded{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
/*============================E===========================*/

/*============================S============================*/
.menue-btns-ul{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 18px;
}
.menue-btns-ul li{
  color: #004a99;
  font-size: 15px;
  transition: all ease .3s;
}
.menue-btns-ul li a{
  padding: 5px 2px;
}
.menue-dropdown {
  position: relative;
}
.menue-dropdown-content {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #fff;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  min-width: 140px;
  border-radius: 5px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  z-index: 9;
}
.menue-dropdown.active .menue-dropdown-content {
  max-height: 500px;
  opacity: 1;
}
/*---------------------------------------------------------*/
#__pHeader {
  transition: all .3s ease;
}
.p-scrolled {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #ffffff;
  transition: all .3s ease;
  z-index: 99;
}
/*============================E===========================*/


/*============================S============================*/
.menu-sm-bg {
  top: 0; left: 0;
  position: fixed;
  height: 100vh;
  width: 100vw;
  background-color: #000000a3;
  z-index: 9999;
  display: none;
}
.menu-sm {
  width: 240px;
  height: 100%;
  background-color: #ffffff;
  transform: translateX(-100%);
  transition: all 0.3s ease;
}
/*============================E===========================*/


/*============================S============================*/
.slider-container {
  width: 100%;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
}
.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  flex: 0 0 100%;
  max-height: 280px;
}

.slide img {
  width: 100%;
  height: 100%;
  display: block;
}

.dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.dot {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active {
  background-color: #ffffff;
}
/*============================E===========================*/


/*============================S============================*/
.form-statusbar-content-sm{
  max-height: 320px;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity: 1;
  margin-top: 10px;
}

.form-statusbar-content-sm.closed {
  max-height: 0;
  opacity: 0;
  margin-top: 0px;
}
/*============================E===========================*/


/*============================S============================*/
.get-tutor-form-step {
   display: none;
 }
.get-tutor-form-step.active {
   display: block;
}
/*============================E===========================*/


/*============================S============================*/
.tutors-cards-con {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  justify-content: start;
  max-width: 2000px;
  margin: auto;
}
.app-cards-con {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  justify-content: start;
  max-width: 2000px;
  margin: auto;
}
.serviceable-areas-con {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px 40px;
  justify-content: start;
  max-width: 2000px;
  margin: auto;
}
/*============================E===========================*/


/*============================S============================*/
.exp-tutors-scroll-con {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exp-tutors-cards-wrapper {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 20px;
  scrollbar-width: none;
}
.exp-tutors-cards-wrapper::-webkit-scrollbar {
  display: none;
}
.exp-tutor-card {
  width: 270px;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.exp-tutor-card:hover {
  transform: translateY(-5px);
}
.exp-tutor-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #f5b800;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  padding: 10px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.3s;
  z-index: 10;
}
.exp-tutor-scroll-btn:hover {
  opacity: 1;
}
.exp-tutor-scroll-btn.left {
  left: 5px;
}
.exp-tutor-scroll-btn.right {
  right: 5px;
}
/*============================E===========================*/


/*============================S============================*/
.form-group2{
  position: relative;
}
.input-field2 {
  width: 100%;
  border: 1.5px solid #e2e2e2;
  border-radius: 5px;
  padding: 12px;
  font-size: 16px;
  background: transparent;
  outline: none;
}
.input-field2.search-field2 {
  border-radius: 7px 0px 0px 7px;
}
.input-field2-label {
  position: absolute;
  top: 14px;
  left: 12px;
  font-size: 15px;
  color: #999;
  pointer-events: none;
  transition: 0.3s ease all;
  background: #fff;
  padding: 0 4px;
}
.input-field2:focus + .input-field2-label,
.input-field2:not(:placeholder-shown) + .input-field2-label {
  top: -8px;
  left: 10px;
  font-size: 12px;
  color: #5397e0;
}
/*============================E===========================*/


/*============================S============================*/
.input-field1, .search-field1{
  position: relative;
  width: 100%;
  padding: 8px 10px;
  outline: none;
  border: 1px solid #e7e7e7;
  font-size: 14px;
  border-radius: 3px;
  transition: all .3s ease;
  background-color: transparent;
}
.search-field1 {
  border-radius : 6px 0px 0px 6px;
  height: 40px;
  flex: 1;
}
.input-textarea1{
  width: 100%;
  outline: none;
  border: 1px solid #e7e7e7;
  padding: 8px 10px;
  border-radius: 3px;
  font-size: 14px;
  transition: all .3s ease;
  background-color: transparent;
}
.input-field1:hover, .input-textarea1:hover{
  border: 1px solid #2b71bd;
  box-shadow: 0 0 2px #2b71bd; 
}
/*============================E===========================*/


/*============================S============================*/
.input-file::file-selector-button{
  position: absolute;
  top: 0;
  right: -5px;
  height: 100%;
  background-color: #3999ff;
  font-size: 14px;
  font-weight: 420;
  color: #fff;
  outline: none;
  border: none;
  padding: 0px 10px;
}

 .uploaded-photo-preview {
   border: 2px dashed #ccc;
   width: 100px;
   height: 120px;
 }
 
 .uploaded-signature-preview {
   border: 2px dashed #ccc;
   width: 200px;
   height: 60px;
 }
 .uploaded-aadhar-preview {
   border: 2px dashed #ccc;
   width: 100%;
   height: 150px;
 }
/*============================E===========================*/


/*============================S============================*/
.select-dropdown-menu {
  display: none;
  position: absolute;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  margin-top: 2px;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 10;
}
.select-dropdown-list {
  max-height: 300px;
  overflow: scroll;
} 
.select-dropdown-menu.show {
  display: block;
}
.select-dropdown-item {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.select-dropdown-item:hover {
  background: #f5f5f5;
}
/*============================E===========================*/


/*============================S============================*/
.tab-btn-con {
  display: flex;
  justify-content: start;
  gap: 10px;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 6px 20px;
  background-color: #d2f3ee;
  border-radius: 6px;
  color: #000000;
  font-size: 14px;
  font-weight: 420;
  text-align: center;
  transition: all 0.3s ease;
}
.tab-btn:hover {
  background-color: #19937f;
  color: #ffffff;
}

.tab-active-btn {
  background-color: #19937f;
  color: #ffffff;
}
/*============================E===========================*/


/*============================S============================*/
.table1{
  border-collapse: collapse;
  border: 1px solid #ddd;
}
.table1 th, .table1 td {
  border: 1px solid #ddd;
  padding: 6px;
  text-align: left;
}
.table1 th {
  background-color: #19b6ac;
  color: #ffffff;
}
.border-none, .border-none th, .border-none td {
    border: none;
}
.table2 {
  border-collapse: collapse;
}
.table2 th, .table2 td {
  border: 1px solid #888;
  padding: 6px;
}
.table2 th {
  background: #f2f2f2;
  font-weight: bold;
  text-align: left;
}
.table2-section-header {
  background: #eaeaea;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  border: 1px solid #888;
}
/*============================E===========================*/


/*============================S===========================*/
.faq-container {
  width: 100%;
}
.faq-item {
  overflow: hidden;
  margin-bottom: .5rem;
}
.faq-question {
  width: 100%;
  padding: 1rem;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  background: #fffbec;
  border: 1px solid #fff0b8;
  border-radius: 5px;
  font-weight: 420;
  outline: none;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: .6rem;
  opacity: 0;
  font-size: 1rem;
  font-weight: 300;
  color: #334155;
  transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
}
.faq-item.active .faq-answer {
  opacity: 1;
}
.faq-item .icon {
  transition: transform 0.3s ease;
}
.faq-item.active .icon {
  transform: rotate(180deg);
}
/*============================E===========================*/


/*============================S==BTNS======================*/
.menu-btn{
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 22px;
}
.btn1 {
  outline: none;
  border: none;
  border-radius: 4px;
  font-weight: 420;
  transition: all .3s ease;
  cursor: pointer;
}
.search-btn1 {
    border-radius: 0px 7px 7px 0px;
    height: 40px;
    width: 100px;
}
.btn1-blue { color: #ffffff; background-color: #004A99; }
.btn1-red { color: #ffffff; background-color: #dc3545;}
.btn1-orange { color: #000000; background-color: #fd7e14; }
.btn1-green { color: #ffffff; background-color: #198754; }
.btn1-yellow { color: #000000; background-color: #F5B800; }
.btn1-black { color: #ffffff; background-color: #000000; }
.btn1-gray { color: #ffffff; background-color: #adb5bd; }
.btn1-blue:hover { background-color: #0063cc; }
.btn1-red:hover { background-color: #bb2d3b; }
.btn1-orange:hover { background-color: #e36b0a; }
.btn1-green:hover { background-color: #157347; }
.btn1-yellow:hover { background-color: #e0a800; }
.btn1-black:hover { background-color: #1a1a1a; }
.btn1-gray:hover {  background-color: #ced4da; }
.btn2{
  padding: 4px 10px;
  outline: none;
  border: none;
  border-radius: 4px;
  border: 1px solid #004A99;
  color: #004A99;
  font-size: 13px;
  font-weight: 420;
  background-color: transparent;
  transition: all .3s ease;
}
.btn2-blue { color: #004A99; border: 1px solid #004A99; }
.btn2-red { color: #dc3545; border: 1px solid #dc3545; }
.btn2-orange { color: #fd7e14; border: 1px solid #fd7e14; }
.btn2-green { color: #198754; border: 1px solid #198754; }
.btn2-yellow { color: #F5B800; border: 1px solid #F5B800; }
.btn2-black { color: #000000; border: 1px solid #000000; }
.btn2-gray { color: #adb5bd; border: 1px solid #adb5bd; }
.btn-2:hover{ border: 1px solid #00000000; background-color: #19937f; color: #ffffff; }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.875rem; }
.btn-md { padding: 0.6rem 1.2rem; font-size: 1rem; }
.btn-lg { padding: 0.8rem 1.6rem; font-size: 1.125rem;}
/*============================E===========================*/


/*============================S============================*/
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }

.top-0 { top : 0px; }
.top-1 { top : 5px; }
.top-2 { top : 10px; }
.top-3 { top : 15px; }
.top-4 { top : 20px; }
.top-12 { top : 60px; }

.bottom-0 { bottom : 0px; }
.bottom-1 { bottom : 5px; }
.bottom-2 { bottom : 10px; }
.bottom-3 { bottom : 15px; }
.bottom-4 { bottom : 20px; }

.left-0 { left : 0px; }
.left-1 { left : 5px; }
.left-2 { left : 10px; }
.left-3 { left : 15px; }
.left-4 { left : 20px; }

.right-0 { right : 0px; }
.right-1 { right : 5px; }
.right-2 { right : 10px; }
.right-3 { right : 15px; }
.right-4 { right : 20px; }
/*============================E===========================*/


/*============================S============================*/
.m-0 { margin: 0px; }
.m-1 { margin: 5px; }
.m-2 { margin: 10px; }
.m-3 { margin: 15px; }
.m-4 { margin: 20px; }
.m-5 { margin: 25px; }
.m-6 { margin: 30px; }

.mx-0 { margin: 0px 0px; }
.mx-1 { margin: 0px 5px; }
.mx-2 { margin: 0px 10px; }
.mx-3 { margin: 0px 15px; }
.mx-4 { margin: 0px 20px; }
.mx-5 { margin: 0px 25px; }
.mx-6 { margin: 0px 30px; }

.my-0 { margin: 0px 0px; }
.my-1 { margin: 5px 0px; }
.my-2 { margin: 10px 0px; }
.my-3 { margin: 15px 0px; }
.my-4 { margin: 20px 0px; }
.my-5 { margin: 25px 0px; }
.my-6 { margin: 30px 0px; }

.mt-0 { margin-top: 0px;}
.mt-1 { margin-top: 5px;}
.mt-2 { margin-top: 10px;}
.mt-3 { margin-top: 15px;}
.mt-4 { margin-top: 20px;}
.mt-5 { margin-top: 25px;}
.mt-6 { margin-top: 30px;}
.mt-7 { margin-top: 35px;}
.mt-8 { margin-top: 40px;}
.mt-9 { margin-top: 45px;}
.mt-10 { margin-top: 50px;}

.ml-0 { margin-left: 0px;}
.ml-1 { margin-left: 5px;}
.ml-2 { margin-left: 10px;}
.ml-3 { margin-left: 15px;}
.ml-4 { margin-left: 20px;}
.ml-5 { margin-left: 25px;}
.ml-6 { margin-left: 30px;}

.mb-0 { margin-bottom: 0px;}
.mb-1 { margin-bottom: 5px;}
.mb-2 { margin-bottom: 10px;}
.mb-3 { margin-bottom: 15px;}
.mb-4 { margin-bottom: 20px;}
.mb-5 { margin-bottom: 25px;}
.mb-6 { margin-bottom: 30px;}
.mb-7 { margin-bottom: 35px;}
.mb-8 { margin-bottom: 40px;}

.mr-0 { margin-right: 0px;}
.mr-1 { margin-right: 5px;}
.mr-2 { margin-right: 10px;}
.mr-3 { margin-right: 15px;}
.mr-4 { margin-right: 20px;}
.mr-5 { margin-right: 25px;}
.mr-6 { margin-right: 30px;}

.my-auto-0 { margin: 0px auto;}
.my-auto-1 { margin: 10px auto;}
.my-auto-2 { margin: 20px auto;}
.my-auto-3 { margin: 30px auto;}
.my-auto-4 { margin: 40px auto;}
.my-auto-5 { margin: 50px auto;}
.my-auto-6 { margin: 60px auto;}

.p-0 { padding: 0px;}
.p-1 { padding: 5px;}
.p-2 { padding: 10px;}
.p-3 { padding: 15px;}
.p-4 { padding: 20px;}
.p-5 { padding: 25px;}
.p-6 { padding: 30px;}

.px-0 { padding-inline: 0px;}
.px-1 { padding-inline: 5px;}
.px-2 { padding-inline: 10px;}
.px-3 { padding-inline: 15px;}
.px-4 { padding-inline: 20px;}
.px-5 { padding-inline: 25px;}
.px-6 { padding-inline: 30px;}

.py-0 { padding-block: 0px;}
.py-1 { padding-block: 5px;}
.py-2 { padding-block: 10px;}
.py-3 { padding-block: 15px;}
.py-4 { padding-block: 20px;}
.py-5 { padding-block: 25px;}
.py-6 { padding-block: 30px;}

.pb-0 { padding-bottom: 0px;}
.pb-1 { padding-bottom: 5px;}
.pb-2 { padding-bottom: 10px;}
.pb-3 { padding-bottom: 15px;}
.pb-4 { padding-bottom: 20px;}
.pb-5 { padding-bottom: 25px;}
.pb-6 { padding-bottom: 30px;}

.pt-0 { padding-top: 0px;}
.pt-1 { padding-top: 5px;}
.pt-2 { padding-top: 10px;}
.pt-3 { padding-top: 15px;}
.pt-4 { padding-top: 20px;}
.pt-5 { padding-top: 25px;}
.pt-6 { padding-top: 30px;}

.pr-0 { padding-right: 0px;}
.pr-1 { padding-right: 5px;}
.pr-2 { padding-right: 10px;}
.pr-3 { padding-right: 15px;}
.pr-4 { padding-right: 20px;}
.pr-5 { padding-right: 25px;}
.pr-6 { padding-right: 30px;}

.pl-0 { padding-left: 0px;}
.pl-1 { padding-left: 5px;}
.pl-2 { padding-left: 10px;}
.pl-3 { padding-left: 15px;}
.pl-4 { padding-left: 20px;}
.pl-5 { padding-left: 25px;}
.pl-6 { padding-left: 30px;}
/*============================E============================*/


/*============================S============================*/
.w-10 { width: 100%; }
.w-9 { width: 90%; }
.w-8 { width: 80%; }
.w-7 { width: 70%; }
.w-6 { width: 60%; }
.w-5 { width: 50%; }
.w-4 { width: 40%; }
.w-3 { width: 30%; }
.w-2 { width: 20%; }
.w-1 { width: 10%; }
.w-0 { width: 0%; }

.h-22 { height: 32px; }
.h-10 { height: 100%; }
.h-9 { height: 90%; }
.h-8 { height: 80%; }
.h-7 { height: 70%; }
.h-6 { height: 60%; }
.h-5 { height: 50%; }
.h-4 { height: 40%; }
.h-3 { height: 30%; }
.h-2 { height: 20%; }
.h-1 { height: 10%; }
.h-0 { height: 0%; }
/*============================E============================*/


/*============================S============================*/
.shadow-sm { box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.shadow-md { box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 16px 0px; }
.shadow-lg { box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 32px 0px; }
.inner-shadow-01-sm { box-shadow: rgba(165,165,165,0.35) 0px -40px 36px -28px inset; }
.inner-shadow-02-sm { box-shadow: rgba(165,165,165,0.35) 0px 40px 36px -28px inset; }
/*============================E============================*/


/*============================S============================*/
.border-1 { border: 1px solid #f0f0f0; }
.border-2 { border: 1px solid #d9d9d9; }

.bt-2px-01 { border-top: 2px solid #F5B800;}
.bt-1px-01 { border-top: 1px solid #c3c3c3;}

.bl-2px-01 { border-left: 2px solid #F5B800;}
.bl-1px-01 { border-left: 1px solid #c3c3c3;}

.bb-1px-01 { border-bottom: 1px solid #F5B800;}
.bb-1px-02 { border-bottom: 1px solid #c3c3c3;}

.menu-btn-active { border-bottom: 2px solid #d49f00; }
/*============================S============================*/


/*============================S============================*/
.round-0 { border-radius: 0px;}
.round-1 { border-radius: 2px;}
.round-2 { border-radius: 4px;}
.round-3 { border-radius: 6px;}
.round-4 { border-radius: 8px;}
.round-5 { border-radius: 10px;}
.round-10 { border-radius: 20px;}
.round-15 { border-radius: 30px;}
.round-20 { border-radius: 40px;}
.round-50 { border-radius: 50px;}
/*============================E============================*/


/*============================S============================*/
.d-flex { display: flex; }
.d-grid-080 { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); justify-content: center; }
.d-grid-100 { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); justify-content: center; }
.d-grid-150 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); justify-content: center; }
.d-grid-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); justify-content: center; }
.d-grid-250 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); justify-content: center; }
.d-grid-300 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); justify-content: center; }
.d-grid-350 { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); justify-content: center; }
.d-grid-400 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); justify-content: center; }
.d-grid-450 { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); justify-content: center; }
/*============================E============================*/


/*============================S============================*/
.flex-1 { flex: 1; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-orw-reverse {flex-direction: row-reverse;}
.alic { align-items: center; }
.alie { align-items: end; }
.alis { align-items: start; }

.jstc { justify-content: center; }
.jstl { justify-content: left; }
.jstb { justify-content: space-between; }
.jsta { justify-content: space-around; }
.jste { justify-content: end; }
/*============================E============================*/


/*============================S============================*/
.g-1 { gap : 5px; }
.g-2 { gap : 10px; }
.g-3 { gap : 15px; }
.g-4 { gap : 20px; }
.g-5 { gap : 25px; }
.g-6 { gap : 30px; }
.g-7 { gap : 35px; }
.g-8 { gap : 40px; }

.rg-1 { row-gap : 5px; }
.rg-2 { row-gap : 10px; }
.rg-3 { row-gap : 15px; }
.rg-4 { row-gap : 20px; }
.rg-5 { row-gap : 25px; }
.rg-6 { row-gap : 30px; }
.rg-7 { row-gap : 35px; }
.rg-8 { row-gap : 40px; }

.cg-1 { column-gap : 5px; }
.cg-2 { column-gap : 10px; }
.cg-3 { column-gap : 15px; }
.cg-4 { column-gap : 20px; }
.cg-5 { column-gap : 25px; }
.cg-6 { column-gap : 30px; }
.cg-7 { column-gap : 35px; }
.cg-8 { column-gap : 40px; }
.cg-9 { column-gap : 45px; }
.cg-10 { column-gap : 50px; }
/*============================E============================*/


/*============================S============================*/
.float-right { float: right; }
.float-left { float: left; }

.overflow-scroll { overflow: scroll; }
.overflow-hidden { overflow: hidden; }

.list-none { list-style: none; }
.cursor-pointer { cursor: pointer; }

.d-none { display: none; }
.d-block { display: block; }
/*============================E============================*/


/*============================S============================*/
.text-top { text-align: top; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-italic { font-style: italic; }
.text-bold { font-weight: bold; }
.text-bold-420 { font-weight: 420; }
.text-bold-300 { font-weight: 300; }

.text-5 { font-size: 10px; }
.text-6 { font-size: 12px; }
.text-7 { font-size: 14px; }
.text-8 { font-size: 16px; }
.text-9 { font-size: 18px; }
.text-10 { font-size: 20px; }
.text-11 { font-size: 22px; }
.text-12 { font-size: 24px; }
.text-13 { font-size: 26px; }
.text-14 { font-size: 28px; }
.text-15 { font-size: 30px; }

.text-1rem { font-size: 0.75rem; }
.text-2rem { font-size: 0.875rem; }
.text-3rem { font-size: 1rem; }
.text-4rem { font-size: 1.125rem; }
.text-5rem { font-size: 1.25rem; }
.text-6rem { font-size: 1.5rem; }
.text-7rem { font-size: 2rem; }
.text-8rem { font-size: 3rem; }
.text-9rem { font-size: 4rem; }

.text-blue { color: #0d6efd; }
.text-dark-blue { color: #004A99; }
.text-indigo { color: #6610f2; }
.text-purple { color: #6f42c1; }
.text-pink { color: #d63384; }
.text-red { color: #dc3545; }
.text-orange { color: #fd7e14; }
.text-yellow { color: #F5B800; }
.text-green { color: #198754; }
.text-teal { color: #20c997; }
.text-cyan { color: #0dcaf0; }
.text-gray { color: #adb5bd; }
.text-black { color: #000000; }
.text-light-black { color: #3a3a3a; }
.text-white { color: #ffffff; }
.text-light { color: #334155; }

.text-h1{ font-size: 1.7rem; font-weight: 420; color: #0f172a; }
.text-h2{ font-size: 1.25rem; font-weight: 420; color: #0f172a; }
.text-h3{ font-size: 1rem; font-weight: 420; color: #0f172a; }
.text-para-light{font-size: 1rem; font-weight: 300; color: #334155; }
/*============================E============================*/


/*============================S============================*/
.bg-blue { background-color: #0d6efd; }
.bg-light-blue { background-color: #ebf3ff; }
.bg-indigo { background-color: #6610f2; }
.bg-purple { background-color: #6f42c1; }
.bg-pink { background-color: #d63384; }
.bg-light-pink { background-color: #ffe7f3; }
.bg-red { background-color: #dc3545; }
.bg-orange { background-color: #fd7e14; }
.bg-light-orange { background-color: #fff6f0; }
.bg-yellow { background-color: #F5B800; }
.bg-light-yellow { background-color: #fff7de; }
.bg-green { background-color: #198754; }
.bg-teal { background-color: #20c997; }
.bg-cyan { background-color: #0dcaf0; }
.bg-gray { background-color: #adb5bd; }
.bg-black { background-color: #000000; }
.bg-white { background-color: #ffffff; }
.bg-light { background-color: #f2f2f2; }

.alert-red { background-color: #ffe8ea; border:1px solid #ffbac0da; padding: 5px; color: #dc3545; border-radius: 4px;}
.alert-green { background-color: #e7fff4; border:1px solid #75ffbf; padding: 5px; color: #198754; border-radius: 4px;}
/*============================E============================*/

/*============================S============================*/
.settings-dropdown {
  position: relative;
  display: inline-block;
}

.settings-button {
  font-size: 20px;
  background-color: #00000000;
  border: none;
  outline: none;
  border-radius: 5px;
  color: #747474;
  cursor: pointer;
}
.dropdown-con {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  position: absolute;
  right: 0;
  background-color: #fff;
  min-width: 200px;
  box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
  border-radius: 10px;
  z-index: 1;
  margin-top: 6px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.35s ease;
  pointer-events: none;
}
.dropdown-content.show {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown-content button {
  width: 100%;
  background: none;
  border: none;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.25s ease;
}
.dropdown-content button:hover {
  background-color: #f0f0f0;
}
/*============================E============================*/


/*============================S============================*/
.modal {
  pointer-events: none;
  opacity: 0;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  padding: 0px 10px;
}
.modal-content {
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  width: 500px;
  max-height: 80%;
  overflow-y: scroll;
  position: relative;
  transform: translateY(-30px);
  opacity: 0;
  transition: all 0.3s ease;
}
.modal.show {
  opacity: 1;
  pointer-events: auto;
}
.modal.show .modal-content {
  transform: translateY(0);
  opacity: 1;
}
.close-btn {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: red;
}
/*============================E============================*/


/*============================S============================*/
 .role-alert-bg {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0;
  opacity: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: start;
  align-items: end;
  padding: 0px 5px;
}
.role-alert {
  background: #fff;
  border-radius: 10px 10px 0 0;
  width: 100%;
  padding: 10px;
  max-height: 80%;
  overflow-y: scroll;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.5s ease;
}
.role-alert-bg.show {
  opacity: 1;
  pointer-events: auto;
}
.role-alert-bg.show .role-alert {
  transform: translateY(0);
  opacity: 1;
}
/*============================E============================*/


/*============================S============================*/
.iframe-alert-bg {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0;
  opacity: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 5px;
}
.iframe-alert {
  background: #fff;
  border-radius: 10px;
  width: 95%;
  height: 80%;
  overflow-y: scroll;
  transform: translateY(10%);
  opacity: 0;
  transition: all 0.3s ease;
  overflow: hidden;
}
.iframe-alert iframe {
  width: 100%;
  height: 101%;
  border: none;
  outline: none;
  border-radius: 0;
  display: none;
}
.iframe-alert-bg.show {
  opacity: 1;
  pointer-events: auto;
}
.iframe-alert-bg.show .iframe-alert {
  transform: translateY(0);
  opacity: 1;
}
.iframe-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top: 4px solid #004A99;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 10;
}
@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/*============================E============================*/


/*============================S============================*/
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-in-out;
  will-change: transform, opacity;
}
.reveal.show {
  opacity: 1;
  transform: translateY(0);
}
/*============================E============================*/


/*============================S============================*/
.whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wa-btn {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 20% 20%, #25d366 0%, #2ee083 40%, #25d366 100%);
  display: grid;
  place-items: center;
  color: white;
  box-shadow:
    0 12px 20px rgba(37, 211, 102, .28),
    0 4px 12px rgba(24, 36, 30, .15);
  overflow: visible;
  transform: translateZ(0);
  cursor: pointer;
}
.wa-btn i { font-size: 28px; }
.wa-btn::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid rgba(37, 211, 102, .25);
  transform: scale(.9);
  opacity: 0;
  animation: wa-halo 2.4s ease-out infinite;
}
.wa-btn::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 3px rgba(255,255,255,.2), 0 0 18px rgba(255,255,255,.55);
  top: 50%; left: 50%;
  transform-origin: -34px -34px;
  animation: wa-orbit 3.6s linear infinite;
  opacity: .85;
}
.whatsapp-fab { animation: wa-float 4.5s ease-in-out infinite; }
.whatsapp-fab:hover .wa-btn,
.whatsapp-fab:focus-visible .wa-btn {
  box-shadow: 0 14px 30px rgba(37, 211, 102, .35), 0 6px 18px rgba(24, 36, 30, .18);
  transform: translateY(-1px);
}
.whatsapp-fab:active .wa-btn { transform: translateY(1px) scale(.98); }
.whatsapp-fab:focus-visible .wa-btn { outline: 4px solid rgba(37, 211, 102, .35); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab, .wa-btn::before, .wa-btn::after { animation: none !important; }
}
@keyframes wa-halo {
  0%   { transform: scale(.6); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}
@keyframes wa-orbit {
  0%   { transform: rotate(0deg) translate(-50%, -50%); }
  100% { transform: rotate(360deg) translate(-50%, -50%); }
}
@keyframes wa-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/*============================E============================*/


/*============================S============================*/
@media screen and (max-width: 950px){
  .menue-btns-ul, .login-btn-lg-box {
    display: none;
  }
  .menu-btn-sm-box {
     display: block;
  }
  .search-con {
      width: 100%;
  }
  .form-statusbar-lg{
    display: none;
  }
  
  .form-statusbar-sm {
      display: block;
  }
}

@media screen and (max-width: 700px){
  .feedback-grid-con{
    flex-direction: column;
  }
  .feedback-grid {
     width: 100%;
  }
  .about-us-img {
      display: none;
  }
}

@media screen and (max-width: 600px){
  .login-signup-con {
      flex-direction: column;
      height: fit-content;
  }
  .login-signup-left-con {
      width: 100%;
  }
  .login-signup-left-con  img {
      width: 150px;
      height: 150px;
      border-radius: 100px;
  }
  
  .login-signup-right-con {
      width: 100%;
  }
}
/*============================E============================*/


/*Last Updated on 6-Dec-2025 by Mr Abdullah*/