/* ============================================================
   TABLE OF CONTENTS
   ============================================================

   01. RESET & GLOBAL VARIABLES
   02. BASE STYLES (body, headings, typography)
   03. GLOBAL TRANSITIONS & UTILITIES
   04. FORM ELEMENTS
   05. HEADER SECTION
       5.1. Logo Block
       5.2. Top Contact Links
   06. BANNER SECTION
       6.1. Banner Layout & Animation
       6.2. Top Contact Icons
       6.3. Banner Buttons
   07. SIDE NAVIGATION MENU
       7.1. Desktop Dropdown
       7.2. Mobile Navigation (Hamburger)
   08. CONTENT SECTIONS
       8.1. First Section / Box Layout
       8.2. Lists inside Boxes
       8.3. Box2 (Card Polish)
       8.4. Scrolling (Marquee) Lists
       8.5. Box3 (Icon Blocks)
   09. FOOTER SECTION
   10. STATISTICS CIRCLES (Study Section)
   11. ADMISSION NOTICE (Ticker)
   12. LOGIN CARD (Auth Form Styling)
   13. RESPONSIVE MEDIA QUERIES
        - Extra Large (≥1600px)
        - Large (≥1200px)
        - Medium (≥992px)
        - Tablet (≤1023px)
        - Mobile (≤767px, ≤600px, ≤576px)
   ============================================================ */

/* ============================================================
   RESET & GLOBAL VARIABLES
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

/* Root color variables */
:root {
  --blue: #092272;
  --dark-blue: #031654;
  --golden: #d4c083;
  --light-gray: #e8e8e8;
  --dark-gray: #222222;
  --black: #000;
  --white: #fff;
}

/* ============================================================
   BASE STYLES
   ============================================================ */

button:focus {
  box-shadow: none !important;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

a {
  color: var(--blue);
}

a:hover {
  color: var(--dark-blue);
}

a,
a:hover {
  text-decoration: none;
}

p {
  color: #54729f;
}

img {
  max-width: 100%;
}

html,
body {
  height: 100%;
}

body {
  color: var(--black);
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  background: var(--light-gray);
}

/* Remove number input spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* Headings */
h1 {
  font-size: 24px;
}

h2 {
  font-weight: 300;
  font-size: 20px;
  padding-bottom: 5px;
}

label {
  margin-bottom: .2rem;
  font-weight: 500;
}

/* Modal backdrop */
.modal-backdrop.show {
  opacity: .5;
}

/* Common transition animation for interactive elements */
.sidelink ul li a,
.topnav ul li a,
.toplinks ul li a img,
.btns,
.navicon,
.bbtns a,
.lists ul li a,
.toplinks ul li a span,
.icon {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
}

/* Form control tweaks */
.form-control {
  font-size: 14px;
}

select.form-control {
  background: url(../img/dropdd.png) center right no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Button color */
.btnblue {
  background: var(--light-blue);
  color: var(--white);
}

/* Container width */
.container {
  width: 1200px;
  max-width: 100%;
}

/* ============================================================
   HEADER SECTION
   ============================================================ */

.headerbg {
  height: 105px;
  position: relative;
  z-index: 99;
}

.headersec {
  background: var(--theme-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

/* --- Logo --- */
.sitelogo {
  background: var(--white);
  padding: 5px 15px;
  clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
}

.sitelogo a {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
}

.sitelogo > a > span {
  padding: 0px 35px 0px 20px;
  line-height: 1.3;
  color: var(--blue);
}

.sitelogo a span span {
  display: block;
  font-size: 22px;
  color: var(--blue);
}

.sitelogo img {
  max-height: 95px;
}

/* ============================================================
   TOP CONTACT LINKS
   ============================================================ */

.toplinks ul {
  display: flex;
  flex-wrap: wrap;
}

.toplinks ul li {
  padding-right: 30px;
}

.toplinks ul li a {
  display: block;
  color: var(--white);
}

.toplinks ul li a small {
  display: block;
  color: #a3b7d0;
  font-size: 13px;
  font-weight: 400;
}

.toplinks ul li a span {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.1;
  text-decoration: none;
}

.toplinks ul li a:hover span {
  color: var(--golden);
}

.phone {
  padding-left: 30px;
}

.email {
  padding-left: 60px;
}

/* ============================================================
   BANNER SECTION
   ============================================================ */

.slinksec {
  display: flex;
  flex-wrap: wrap;
}

.bannersec {
  background: url(../osap-images/bannerbg1.jpg) center top no-repeat;
  background-size: cover;
  min-height: 400px;
  width: calc(100% - 260px);
  padding: 15px;
  padding-right: 15%;
}

/* Banner text container */
.btext {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

/* Banner animation */
@keyframes slideFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.btext h1 {
  font-size: 40px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--blue);
  margin: 0;
  animation: slideFadeInLeft 600ms ease-out both;
  will-change: transform, opacity;
}

.btext h1 span {
  display: block;
  font-weight: 900;
  animation: slideFadeInLeft 600ms ease-out 150ms both;
  will-change: transform, opacity;
}

/* Accessibility: disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btext h1,
  .btext h1 span {
    animation: none;
  }
}

/* ============================================================
   TOP CONTACT ICONS
   ============================================================ */

.top-contact {
  position: relative;
  padding-left: 36px;
  line-height: 1.2;
}

.top-contact i.bi {
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 20px;
  width: 24px;
  text-align: center;
  color: #ffd87a;
}

.toplinks small {
  color: #a3b7d0;
  font-size: 13px;
  font-weight: 400;
}

.toplinks span {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

.toplinks a:hover span {
  color: var(--golden);
}

/* ============================================================
   BANNER BUTTONS
   ============================================================ */

.bbtns {
  padding-top: 15px;
}

.bbtns a {
  display: inline-block;
  padding: 10px 30px;
  background: var(--golden);
  color: var(--blue);
  margin: 5px;
  border-radius: 30px;
  line-height: 30px;
  font-size: 18px;
}

.bbtns a strong {
  font-weight: 900;
}

.bbtns a img {
  margin-right: 5px;
}

.bbtns a:first-child {
  background: var(--white);
}

.bbtns a:hover {
  background: var(--blue);
  color: var(--white);
}

.bbtns a:hover img {
  filter: brightness(100);
}

/* ============================================================
   SIDE NAVIGATION MENU
   ============================================================ */

.topnav {
  width: 260px;
  background: var(--theme-color2);
  position: relative;
}

.topnav > ul {
  list-style: none;
  padding: 0;
  margin: 40px 0;
}

.topnav > ul > li {}

.topnav ul li a {
  display: block;
  font-size: 16px;
  font-weight: 500;
  padding: 15px 20px;
  color: var(--white);
  line-height: 20px;
  border-radius: 0px 10px 10px 0px;
  margin-right: 10px;
  position: relative;
}

/* Hover and active styles (Desktop) */
@media (min-width:1024px) {
  .topnav > ul > li:hover > a {
    background: #f7edcf;
    color: var(--dark-blue);
  }

  .topnav > ul > li:hover > a:before {
    left: -15px;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(247, 237, 207, 0);
    border-left-color: #f7edcf;
    border-width: 10px;
    margin-top: -10px;
  }

  .topnav > ul > li.active > a {
    background: var(--blue);
    color: var(--white);
  }

  .topnav > ul > li > ul {
    display: none;
    width: 260px;
    padding-right: 15px;
    position: absolute;
    min-height: 300px;
    right: 100%;
    top: 4%;
    border-radius: 10px;
  }

  .topnav > ul > li > ul:before {
    content: "";
    width: calc(100% - 15px);
    height: 100%;
    background: #f7edcf;
    display: block;
    position: absolute;
    left: 0;
    border-radius: 10px;
  }

  .topnav > ul > li:hover > ul {
    display: block;
  }

  .topnav ul li ul li {
    position: relative;
  }

  .topnav ul li ul li:first-child {
    margin-top: 10px;
  }

  .topnav ul li ul li:last-child {
    margin-bottom: 10px;
  }

  .topnav ul li ul li a {
    font-size: 14px;
    color: var(--dark-blue);
    position: relative;
    padding: 8px 15px 8px 35px;
    margin: 0;
    border-radius: 0;
  }

  .topnav ul li ul li a:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: block;
    position: absolute;
    left: 20px;
    top: 13px;
    background: var(--blue);
  }

  .topnav ul li ul li a:hover {
    background: var(--white);
  }
}

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */

.firstsec,
.sec2 {
  padding: 50px 0;
}

.firstsec {
  background: #fbf9f6;
}

.firstsec h2 {
  position: relative;
  margin: 0;
  color: #2d3a19;
}

.firstsec h2 strong {
  color: var(--dark-blue);
  font-weight: 900;
}

.firstsec h2:after {
  content: "";
  width: 80px;
  margin-left: 10px;
  height: 3px;
  background: var(--white);
  display: inline-block;
  vertical-align: middle;
}

/* Box section layout */
.boxsec {
  display: flex;
  flex-wrap: wrap;
}

.boxsec > div {
  width: 50%;
  padding: 0 15px;
}

/* Lists inside boxes */
.lists {
  background: var(--white);
  border-radius: 5px;
}



.lists ul li {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 60px;
}

.lists ul li:not(:first-child) {
  border-top: 1px solid var(--light-gray);
}

.lists ul li a {
  display: block;
  padding: 18px 30px 12px 60px;
  min-height: 60px;
  width: 100%;
  background: url(../osap-images/arrow_icon.png) 15px 15px no-repeat;
  line-height: 1.1;
}

.lists ul li a span {
  font-weight: 500;
  font-size: 15px;
}

.lists ul li a i {
  display: block;
  color: var(--golden);
}

.lists ul li a:hover {
  background-color: var(--theme-color2);
  color: var(--white);
}

/* ============================================================
   BOX2 AND MARQUEE SCROLL LIST
   ============================================================ */

/* Card style */
.box2 .lists {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Box2 heading */
.box2 h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 16px;
  background: var(--theme-color);
  color: #fff;
  border-radius: 10px;
  line-height: 1.2;
}

.box2 h2 strong {
  font-weight: 900;
  color: #fff;
}

.firstsec .boxsec {
    display: flex;
    gap: 20px;
}

.firstsec .boxsec .box2 {
    flex: 1;
    height: 350px !important;   
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    padding: 15px;
}

/* Scroll only the inner list */
.firstsec .boxsec .box2 .lists {
    flex: 1;
    overflow-y: auto;
    margin-top: 10px;
}


/* Scrolling marquee list container */
.scroll-list {
  position: relative;
  overflow: hidden;
  max-height: 260px;
}

/* Fade gradients top/bottom */
.scroll-list::before,
.scroll-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.scroll-list::after {
  top: auto;
  bottom: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

/* Animation for scrolling list */
.scroll-list .marquee-track {
  display: block;
  animation: vscroll 18s linear infinite;
}

.scroll-list:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes vscroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

/* ============================================================
   BOX3 ICON SECTION
   ============================================================ */

.box3 h3 {
  margin-top: 15px;
  font-size: 20px;
  font-weight: 400;
  color: var(--blue);
}

.box3 h3 strong {
  font-weight: 900;
}

.icon {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box3:hover .icon {
  background: var(--blue);
}

.box3:hover .icon img {
  filter: brightness(100);
}

.btncolor {
  background: var(--blue);
  color: var(--white);
}

/* ============================================================
   FOOTER SECTION
   ============================================================ */

footer,
.site-footer {
  background: var(--theme-color);
}

footer a,
.site-footer a {
  color: #c4d2f4;
  text-decoration: none;
}

footer a:hover,
.site-footer a:hover {
  color: #fff;
}

/* Footer logo block */
.flogo > a {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.flogo > a > span {
  padding: 0 15px;
  line-height: 1.3;
}

.flogo a span span {
  display: block;
  font-size: 18px;
}

.flogo img {
  max-height: 75px;
}

.footer-links a {
  padding: 0 8px;
}

.footer-links .sep {
  color: rgba(255, 255, 255, 0.5);
  padding: 0 4px;
}

.footer-copy {
  color: #fff;
}

/* ============================================================
   CIRCLE STATISTICS SECTION
   ============================================================ */

/* Brand color variables for stat circles */
:root {
  --stat-brand: #aa0909;
  --stat-text: #1f2937;
  --stat-number: #101828;
  --stat-bg: #f5e9eb;
  --stat-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.studybg {
  background: var(--stat-bg);
  padding: 50px 0;
}

/* Circle container layout */
.stats-circles {
  --ring-size: 160px;
  --ring-pad: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Single circle item */
.stats-circles li {
  flex: 1 1 220px;
  display: flex;
  justify-content: center;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transform: translateY(0);
  transition: transform .25s ease, filter .25s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  filter: saturate(1.03);
}

/* Outer ring */
.stat-ring {
  width: var(--ring-size);
  height: var(--ring-size);
  padding: var(--ring-pad);
  background: var(--theme-color2);
  border-radius: 50%;
  position: relative;
  box-shadow: var(--stat-shadow);
  animation: statPop .5s ease-out both;
  color: var(--stat-brand);
}

/* Inner circle */
.stat-inner {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Number display */
.stat-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 800 30px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--stat-number);
  letter-spacing: .2px;
  white-space: nowrap;
}

.stat-number .stat-suffix {
  display: inline-block;
  line-height: 1;
  margin-left: 2px;
  color: inherit;
}

/* Label below circle */
.stat-label {
  font: 600 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--stat-text);
  letter-spacing: .2px;
  padding-top: 2px;
}

/* Outer halo animation */
.stat-ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--theme-color);
  opacity: 0;
  z-index: -1;
  animation: ringPulse 2.4s ease-in-out infinite;
  filter: blur(14px);
}

/* Pop animation */
@keyframes statPop {
  from {
    transform: scale(.92);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Halo pulse animation */
@keyframes ringPulse {
  0%,
  100% {
    opacity: 0;
    transform: scale(.95);
  }

  50% {
    opacity: .22;
    transform: scale(1.03);
  }
}

/* ============================================================
   ADMISSION NOTICE (MARQUEE)
   ============================================================ */

.admission-notice .admission_heading,
.admission_heading {
  display: inline-block;
  margin: 0 0 10px 0;
  padding: 10px 16px;
  background: #aa0909;
  color: #fff;
  border-radius: 8px;
  font: 700 18px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .3px;
  box-shadow: 0 6px 18px rgba(170, 9, 9, .15);
}

.admission-notice .hori-marquee,
.hori-marquee {
  background: #fff;
  border: 1px solid #f0d7da;
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(170, 9, 9, .08);
  overflow: hidden;
}

.admission-notice .hori-marquee marquee,
.hori-marquee marquee {
  display: block;
  padding: 6px 2px;
  line-height: 1.25;
}

.admission-notice .gif_img1,
.gif_img1 {
  height: 16px;
  width: auto;
  vertical-align: middle;
  margin-right: 8px;
}

.admission-notice .hori-marquee a,
.hori-marquee a {
  color: #aa0909;
  text-decoration: none;
  font: 600 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0 8px;
  white-space: nowrap;
}

.admission-notice .hori-marquee a:hover,
.hori-marquee a:hover {
  color: #7d0606;
  /* text-decoration: underline; */
}

.admission-notice .hori-marquee a + span,
.hori-marquee a + span {
  margin: 0 8px;
}

/* ============================================================
   LOGIN CARD STYLING
   ============================================================ */

.card.card-primary.shadow-lg.border-0 {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
  backdrop-filter: saturate(120%);
}

/* --- Header --- */
.card.card-primary .card-header {
  background: var(--theme-color)!important;
  padding: 14px 16px;
  border: 0;
}

.card.card-primary .card-header .card-title {
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.card.card-primary .card-header .card-title i {
  font-size: 14px;
}

/* --- Body --- */
.card.card-primary .card-body {
  background: #fff;
  padding: 18px 18px 12px;
}

/* --- Form labels --- */
#loginform .form-label {
  font-weight: 600;
  color: #1f2a44;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#loginform .form-label i {
  color: #7489a6;
  font-size: 14px;
}

/* --- Input fields --- */
#loginform .form-control {
  border: 1px solid #d7dce3;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  background: #fbfbfc;
}

#loginform .form-control:focus {
  border-color: #6092a3;
  box-shadow: 0 0 0 3px rgba(96, 146, 163, .18);
  background: #fff;
  outline: none;
}

#loginform .form-control::placeholder {
  color: #9aa6b2;
}

/* --- Password input with toggle --- */
#loginform .input-group .form-control {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background: #fbfbfc;
}

#loginform .input-group-text {
  border: 1px solid #d7dce3;
  border-left: 0;
  background: #f2f5f8;
  color: #4c5a6b;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

#loginform .input-group-text:hover {
  background: #e8eef2;
  color: #2e3a48;
  border-color: #c9d1da;
}

#loginform #togglePassword i {
  pointer-events: none;
}

/* --- Captcha --- */
#loginform #login_captcha_id {
  border-radius: 6px;
  border: 1px solid #e4e8ee;
  padding: 4px;
  background: #fff;
  max-height: 56px;
  object-fit: contain;
}

#loginform .row.align-items-center .img-fluid {
  max-height: 56px;
}

#loginform #logincaptcha {
  letter-spacing: .3px;
}

/* --- Submit button --- */
#loginform .btn.btn-danger {
  background: var(--theme-color);
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease;
}

#loginform .btn.btn-danger:hover {
  background: var(--theme-color2);
  box-shadow: 0 8px 18px rgba(151, 144, 144, 0.25);
}

#loginform .btn.btn-danger:active {
  transform: translateY(1px);
}

/* --- Footer links --- */
.card.card-primary .card-body .text-center.small a {
  text-decoration: none;
  color: #c53333;
}

.card.card-primary .card-body .text-center.small a:hover {
  text-decoration: underline;
}

.card.card-primary .card-body .text-center.small strong {
  color: #7a8797;
}

#loginform .mb-3 {
  margin-bottom: 14px !important;
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES
   ============================================================ */

@media (max-width: 1599px) {
  .bannersec {
    padding-right: 10%;
  }
}

@media (max-width: 1199px) {
  .headerbg {
    height: 80px;
  }

  .sitelogo img {
    max-height: 70px;
  }

  .sitelogo > a > span {
    padding: 0px 20px 0px 5px;
    font-size: 14px;
  }

  .sitelogo a span span,
  .toplinks ul li a span {
    font-size: 18px;
  }

  .email {
    padding-left: 55px;
  }

  .toplinks ul li {
    padding-right: 20px;
  }

  .btext h1 {
    font-size: 32px;
  }
}

@media (max-width: 991px) {
  h2 {
    font-size: 24px;
  }

  .firstsec h2:after {
    display: none;
  }
}

.navicon {
  display: none;
}

@media (max-width: 1023px) {
  .navicon {
    display: block;
    cursor: pointer;
    position: absolute;
    top: 23px;
    right: 15px;
    z-index: 999;
    width: 30px;
    height: 30px;
  }

  .navicon span {
    width: 18px;
    height: 2px;
    background: var(--white);
    position: relative;
    display: block;
    margin-top: 15px;
  }

  .navicon span:before,
  .navicon span:after {
    content: "";
    width: 25px;
    height: 2px;
    background: var(--white);
    display: block;
    position: absolute;
    left: 0;
  }

  .navicon span:after {
    width: 18px;
  }

  .navicon span:before {
    top: -6px;
  }

  .navicon span:after {
    bottom: -7px;
  }

  .navicon.active {
    position: fixed;
  }

  .navicon.active span {
    background: none;
  }

  .navicon.active span:before {
    top: 0;
    transform: rotate(-48deg);
    background: var(--white);
  }

  .navicon.active span:after {
    top: 0;
    transform: rotate(45deg);
    bottom: 6px;
    background: var(--white);
  }

  .active span:before,
  .navicon span:after {
    width: 18px;
  }

  .topnav {
    margin: 0;
    height: calc(100% - 80px);
    position: fixed;
    top: 80px;
    right: 0;
    z-index: 999;
    overflow-x: hidden;
    overflow: auto;
    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  }

  .topnav.showmenu {
    transform: translate(0%, 0);
  }

  .topnav ul li {
    position: relative;
  }

  .topnav ul li ul {
    padding-left: 15px;
    display: none;
  }

  .topnav ul li ul li {
    position: relative;
    margin-top: 0;
  }

  .topnav ul li ul li a {
    font-size: 14px;
    color: var(--white);
    font-weight: 300;
    position: relative;
    padding: 8px 15px 8px 35px;
    margin: 0;
    border-radius: 0;
  }

  .topnav ul li ul li a:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: block;
    position: absolute;
    left: 20px;
    top: 13px;
    background: var(--white);
  }

  .ddclick {
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 42px;
    cursor: pointer;
    color: #fff;
  }

  .ddclick:before {
    content: "+";
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 42px;
    font-size: 24px;
  }

  .ddclick.active:before {
    content: "-";
  }

  .sub-menu {
    list-style: none;
  }

  .sub-menu li a {
    padding: 5px;
  }

  .toplinks {
    margin-right: 25px;
  }

  .toplinks ul li a {
    padding: 0;
    background-size: contain;
    width: 30px;
    height: 25px;
  }

  .toplinks ul li a small,
  .toplinks ul li a span {
    font-size: 0;
  }

  .bannersec {
    min-height: 300px;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .bannersec {
    min-height: 210px;
    padding-right: 5%;
  }

  .bbtns {
    padding-top: 0;
  }

  .bbtns a {
    padding: 5px 25px;
    font-size: 16px;
  }

  .bbtns a img {
    margin-right: 4px;
    margin-top: -4px;
    max-height: 14px;
  }

  .btext h1 {
    font-size: 25px;
  }

  .firstsec,
  .sec2 {
    padding: 30px 0;
  }

  footer {
    text-align: center;
  }

  .box3 {
    margin-bottom: 15px;
  }

  .boxsec > div {
    width: 100%;
    margin-bottom: 30px;
  }

  .flogo > a {
    flex-wrap: wrap;
  }

  .flogo img {
    margin: 0 auto;
  }

  .flogo > a > span {
    width: 100%;
  }
}

@media (max-width: 600px) {
  h2 {
    font-size: 20px;
  }

  .box3 h3 {
    font-size: 18px;
  }

  .headerbg {
    height: 60px;
  }

  .topnav {
    top: 60px;
    height: calc(100% - 60px);
  }

  .navicon {
    top: 13px;
  }

  .sitelogo {
    max-width: 225px;
  }

  .sitelogo > a > span {
    font-size: 0;
  }

  .sitelogo a span span {
    font-size: 14px;
  }

  .sitelogo img {
    max-height: 50px;
  }

  .bbtns a {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .card.card-primary .card-body {
    padding: 16px 14px 10px;
  }

  #loginform .form-control {
    font-size: 15px;
    padding: 11px 12px;
  }

  #loginform .btn.btn-danger {
    padding: 11px 14px;
  }

  #loginform #login_captcha_id,
  #loginform .row.align-items-center .img-fluid {
    max-height: 52px;
  }
}

@media (min-width: 1200px) {
    .h4, h4 {
        font-size: 16px;
    }
}

/* Hide website name + tagline on small screens */
@media (max-width: 768px) {
  .site-text {
    display: none !important;
  }
}

@media (max-width: 1023px) {
    .toplinks {
        margin-right: 60px;
    }
}

/* 🌐 Mobile view adjustments */
@media (max-width: 768px) {
  .sitelogo {
   clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);         
   
  }

}