.toggle-btn{margin-right: 15px; display: none;width: 28px;height: 22px;position: relative;}
.toggle-btn::after{content: "";position: absolute;right: 0;top: 0;height: 2px;background-color: #fff;border-radius: 2px;transition: all 0.3s;width: 100%;}
.toggle-btn span::before{content: "";position: absolute;right: 0;bottom: 0; height: 2px;background-color: #fff;border-radius: 2px;transition: all 0.3s;width: 100%;}
.toggle-btn::before{content: "";position: absolute;right: 0;top: 50%;transform: translateY(-50%); height: 2px;background-color: #fff;border-radius: 2px;transition: all 0.3s;width: 100%;}
.inner{display:none;}

@media (max-width: 767px) {
    .logo { width: 150px !important; }
    .bottom-menu , .col-md-2.d-flex.justify-content-end.align-items-center.gap-3{display: none !important;}
    .toggle-btn {display: block !important;  position: absolute;
        right: 0;}

        .navon.bottom-menu {display: block !important; position: absolute !important; top: 15% !important; right: 0; z-index: 99; padding: 20px !important; background: #fff !important;}
        .navon.bottom-menu li {padding: 4px 0 !important;}
        .navon.bottom-menu li a {color: #000;}
        .submenu {position: static !important;}
}



.py-1{
  padding-top: clamp(1px, 1vw, 4px) !important;
  padding-bottom: clamp(1px, 1vw, 4px) !important;
}

.py-2{
  padding-top: clamp(3px, 1.5vw, 8px) !important;
  padding-bottom: clamp(3px, 1.5vw, 8px) !important;
}

.py-3{
  padding-top: clamp(6px, 2vw, 16px) !important;
  padding-bottom: clamp(6px, 2vw, 16px) !important;
}

.py-4{
  padding-top: clamp(10px, 3vw, 24px) !important;
  padding-bottom: clamp(10px, 3vw, 24px) !important;
}

.py-5{
  padding-top: clamp(30px, 4vw, 48px) !important;
  padding-bottom: clamp(30px, 4vw, 48px) !important;
}




.my-1{
  margin-top: clamp(1px, 1vw, 4px) !important;
  margin-bottom: clamp(1px, 1vw, 4px) !important;
}

.my-2{
  margin-top: clamp(3px, 1.5vw, 8px) !important;
  margin-bottom: clamp(3px, 1.5vw, 8px) !important;
}

.my-3{
  margin-top: clamp(6px, 2vw, 16px) !important;
  margin-bottom: clamp(6px, 2vw, 16px) !important;
}

.my-4{
  margin-top: clamp(10px, 3vw, 24px) !important;
  margin-bottom: clamp(10px, 3vw, 24px) !important;
}

.my-5{
  margin-top: clamp(16px, 4vw, 48px) !important;
  margin-bottom: clamp(16px, 4vw, 48px) !important;
}


.r-h1 {
  font-size: clamp(30px, 6vw, 48px) !important;
}

.r-h2 {
  font-size: clamp(25px, 5vw, 36px) !important;
}

.r-h3 {
  font-size: clamp(22px, 4vw, 30px) !important;
}

.r-h4 {
  font-size: clamp(20px, 3.5vw, 24px) !important;
}

.r-h5 {
  font-size: clamp(18px, 3vw, 20px) !important;
}

.r-h6 {
  font-size: clamp(14px, 2.5vw, 16px) !important;
}


@media (max-width: 767px) {
    .mobile-header .header {padding-left: 0 !important; padding-right: 0 !important;}
    .GLOMACS-learning {padding: 0px 0 30px;}
        .faq-section .left-sticky , .faq-section .col-lg-8.mt-5 {
        padding: 0 15px !important; }

        .GLOMACS-learning h4 {font-size: 20px !important;}



}