/* =====================================================
  
   MAIN STYLESHEET
   PART 1
===================================================== */

/* =====================================================
   GOOGLE FONT
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/* =====================================================
   ROOT VARIABLES
===================================================== */

:root {

  --primary: #0D47A1;
  --secondary: #1565C0;
  --accent: #FFC107;

  --dark: #1A1A1A;
  --light: #F8F9FA;
  --white: #FFFFFF;

  --text: #555555;

  --shadow:
    0 10px 30px rgba(0, 0, 0, .10);

  --transition:
    all .4s ease;

}


/* =====================================================
   RESET
===================================================== */

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

html {
  scroll-behavior: smooth;
}

body {

  font-family: 'Poppins', sans-serif;

  font-size: 16px;

  line-height: 1.8;

  color: var(--text);

  overflow-x: hidden;

  background: #fff;

}


/* =====================================================
   COMMON
===================================================== */

section {
  position: relative;
}

a {
  text-decoration: none;
  transition: var(--transition);
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

.container {
  position: relative;
}

.section-title {

  margin-bottom: 60px;

}

.section-title span {

  color: var(--primary);

  font-weight: 600;

  letter-spacing: 1px;

  text-transform: uppercase;

}

.section-title h2 {

  font-size: 42px;

  font-weight: 700;

  color: var(--dark);

  margin-top: 10px;

}

.section-title p {

  max-width: 700px;

  margin: auto;

  margin-top: 15px;

}


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

.btn-primary {

  background: var(--primary);

  border: none;

  padding: 14px 35px;

  border-radius: 50px;

  font-weight: 600;

  transition: var(--transition);

}

.btn-primary:hover {

  background: var(--secondary);

  transform: translateY(-3px);

}

.btn-warning {

  background: var(--accent);

  border: none;

  padding: 14px 35px;

  border-radius: 50px;

  font-weight: 600;

  transition: var(--transition);

}

.btn-warning:hover {

  transform: translateY(-3px);

}


/* =====================================================
   TOP BAR
===================================================== */

.top-bar {

  background: #082B66;

  color: #fff;

  padding: 10px 0;

  font-size: 14px;

  font-weight: 500;

}

.top-bar i {

  color: var(--accent);

  margin-right: 5px;

}

.top-bar .text-end {

  color: #FFD54F;

}


/* =====================================================
   NAVBAR
===================================================== */

.main-nav {

  background: rgba(13, 71, 161, .95);

  backdrop-filter: blur(10px);

  box-shadow: var(--shadow);

  transition: var(--transition);

}

.navbar-brand {

  color: #fff !important;

  font-size: 28px;

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 12px;

}

.logo {

  width: 60px;

  height: 60px;

  object-fit: contain;

}

.navbar-nav .nav-link {

  color: #fff !important;

  font-weight: 500;

  margin-left: 15px;

  position: relative;

}

.navbar-nav .nav-link::after {

  content: '';

  position: absolute;

  width: 0;

  height: 2px;

  background: var(--accent);

  left: 0;

  bottom: -4px;

  transition: .3s;

}

.navbar-nav .nav-link:hover::after {

  width: 100%;

}

.navbar-nav .nav-link:hover {

  color: var(--accent) !important;

}

.navbar-toggler {

  border: none;

}

.navbar-toggler:focus {

  box-shadow: none;

}


/* =====================================================
   STICKY HEADER EFFECT
===================================================== */

.navbar.scrolled {

  background: #0D47A1 !important;

  padding-top: 10px;

  padding-bottom: 10px;

}


/* =====================================================
   HERO SLIDER
===================================================== */

#heroSlider {

  position: relative;

}

.hero-img {

  height: 100vh;

  object-fit: cover;

}

.carousel-item {

  position: relative;

}

.carousel-item::before {

  content: '';

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background:
    rgba(0, 0, 0, .55);

  z-index: 1;

}

.carousel-caption {

  z-index: 10;

  bottom: 50%;

  transform: translateY(50%);

}

.carousel-caption h1 {

  font-size: 70px;

  font-weight: 800;

  text-transform: uppercase;

  color: #fff;

  margin-bottom: 20px;

  text-shadow:
    0 5px 15px rgba(0, 0, 0, .4);

}

.carousel-caption p {

  font-size: 22px;

  color: #fff;

  margin-bottom: 30px;

}

.carousel-caption .btn {

  margin: 5px;

}


/* =====================================================
   SLIDER CONTROLS
===================================================== */

.carousel-control-prev,
.carousel-control-next {

  width: 60px;
  height: 60px;

  background:
    rgba(255, 255, 255, .15);

  border-radius: 50%;

  top: 50%;

  transform: translateY(-50%);

}

.carousel-control-prev {

  left: 30px;

}

.carousel-control-next {

  right: 30px;

}


/* =====================================================
   HERO ANIMATION
===================================================== */

.carousel-caption h1 {

  animation:
    slideDown 1s ease;

}

.carousel-caption p {

  animation:
    slideUp 1s ease;

}

@keyframes slideDown {

  from {

    opacity: 0;

    transform:
      translateY(-50px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}

@keyframes slideUp {

  from {

    opacity: 0;

    transform:
      translateY(50px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


/* =====================================================
   HERO SHAPE DIVIDER
===================================================== */

.hero-wave {

  position: absolute;

  bottom: -1px;

  left: 0;

  width: 100%;

  z-index: 50;

}

.hero-wave svg {

  display: block;

  width: 100%;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1200px) {

  .carousel-caption h1 {

    font-size: 55px;

  }

}

@media(max-width:992px) {

  .carousel-caption h1 {

    font-size: 45px;

  }

  .carousel-caption p {

    font-size: 18px;

  }

}

@media(max-width:768px) {

  .hero-img {

    height: 80vh;

  }

  .carousel-caption h1 {

    font-size: 32px;

  }

  .carousel-caption p {

    font-size: 16px;

  }

  .section-title h2 {

    font-size: 32px;

  }

  .navbar-brand {

    font-size: 22px;

  }

  .logo {

    width: 50px;

    height: 50px;

  }

}

@media(max-width:576px) {

  .top-bar {

    text-align: center;

  }

  .top-bar .text-end {

    text-align: center !important;

    margin-top: 5px;

  }

  .carousel-caption {

    width: 90%;

    left: 5%;

    right: 5%;

  }

}

/* =====================================================
PART 2
ABOUT SCHOOL SECTION
===================================================== */

.about-section {
  padding: 100px 0;
  background: #ffffff;
}

.about-section .about-image {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.about-section .about-image img {
  width: 100%;
  height: auto;
  transition: all .6s ease;
}

.about-section .about-image:hover img {
  transform: scale(1.05);
}

.about-section .about-content {
  padding-left: 30px;
}

.about-section .about-content .subtitle {
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.about-section .about-content h2 {
  font-size: 42px;
  font-weight: 700;
  color: var(--dark);
  margin: 15px 0 25px;
}

.about-section .about-content p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 20px;
}

.about-features {
  margin-top: 30px;
}

.about-features li {
  margin-bottom: 12px;
  font-weight: 500;
}

.about-features li i {
  color: var(--primary);
  margin-right: 10px;
}

/* =====================================================
  COUNTER SECTION
  ===================================================== */

.counter-section {

  background:
    linear-gradient(rgba(13, 71, 161, .95),
      rgba(13, 71, 161, .95)),
    url('../images/counter-bg.jpg');

  background-size: cover;
  background-position: center;

  padding: 90px 0;

  color: #fff;

  position: relative;

}

.counter-section .counter-box {


  text-align: center;

  padding: 30px 20px;

  border-radius: 15px;

  transition: all .4s ease;


}

.counter-section .counter-box:hover {


  transform: translateY(-10px);

  background:
    rgba(255, 255, 255, .08);


}

.counter-section .counter {


  font-size: 60px;

  font-weight: 800;

  color: var(--accent);

  line-height: 1;


}

.counter-section h4 {


  font-size: 18px;

  margin-top: 15px;

  font-weight: 600;

  color: #fff;


}

.counter-section .icon {


  font-size: 40px;

  margin-bottom: 15px;

  color: #fff;


}

/* =====================================================
  CHAIRMAN MESSAGE
  ===================================================== */

.chairman-section {


  padding: 100px 0;

  background: #f8f9fa;


}

.chairman-section .chairman-image {


  position: relative;

  overflow: hidden;

  border-radius: 20px;

  box-shadow: var(--shadow);


}

.chairman-section .chairman-image img {


  width: 100%;

  transition: .5s;


}

.chairman-section .chairman-image:hover img {


  transform: scale(1.05);


}

.chairman-section .chairman-content {


  padding-left: 40px;


}

.chairman-section .chairman-content span {


  color: var(--primary);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 2px;


}

.chairman-section .chairman-content h2 {


  font-size: 42px;

  font-weight: 700;

  margin: 15px 0 25px;

  color: var(--dark);


}

.chairman-section .chairman-content p {


  line-height: 1.9;

  margin-bottom: 18px;


}

.chairman-signature {


  margin-top: 25px;

  font-weight: 700;

  color: var(--primary);


}

/* =====================================================
  WHY CHOOSE US
  ===================================================== */

.why-us {


  padding: 100px 0;

  background: #ffffff;


}

.feature-card {


  background: #fff;

  padding: 40px 30px;

  border-radius: 20px;

  text-align: center;

  box-shadow:
    0 10px 35px rgba(0, 0, 0, .08);

  transition: all .4s ease;

  height: 100%;

  position: relative;

  overflow: hidden;


}

.feature-card::before {


  content: '';

  position: absolute;

  width: 100%;

  height: 5px;

  background: var(--primary);

  top: 0;
  left: 0;

  transform: scaleX(0);

  transition: .4s;


}

.feature-card:hover::before {


  transform: scaleX(1);


}

.feature-card:hover {


  transform: translateY(-12px);

  box-shadow:
    0 20px 45px rgba(0, 0, 0, .15);


}

.feature-card i {


  width: 90px;

  height: 90px;

  line-height: 90px;

  font-size: 38px;

  border-radius: 50%;

  background:
    rgba(13, 71, 161, .08);

  color: var(--primary);

  margin-bottom: 25px;

  transition: .4s;


}

.feature-card:hover i {


  background: var(--primary);

  color: #fff;

  transform: rotateY(180deg);


}

.feature-card h4 {


  font-size: 22px;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 15px;


}

.feature-card p {


  margin-bottom: 0;

  line-height: 1.8;


}

/* =====================================================
  SECTION DECORATION
  ===================================================== */

.pattern-bg {


  position: absolute;

  opacity: .05;

  z-index: -1;


}

/* =====================================================
  RESPONSIVE
  ===================================================== */

@media(max-width:992px) {


  .about-section .about-content,
  .chairman-section .chairman-content {

    padding-left: 0;
    margin-top: 40px;
  }

  .about-section .about-content h2,
  .chairman-section .chairman-content h2 {

    font-size: 34px;
  }

  .counter-section .counter {

    font-size: 48px;
  }


}

@media(max-width:768px) {


  .about-section,
  .chairman-section,
  .why-us {

    padding: 70px 0;
  }

  .about-section .about-content h2,
  .chairman-section .chairman-content h2 {

    font-size: 30px;
  }

  .feature-card {

    padding: 30px 20px;
  }

  .counter-section .counter {

    font-size: 42px;
  }

  .counter-box {

    margin-bottom: 25px;
  }


}

@media(max-width:576px) {


  .about-section .about-content h2,
  .chairman-section .chairman-content h2 {

    font-size: 26px;
  }

  .feature-card i {

    width: 75px;
    height: 75px;
    line-height: 75px;
    font-size: 30px;
  }

  .counter-section .counter {

    font-size: 36px;
  }


}

/* =====================================================
PART 3
NOTICE BOARD + NEWS SECTION
===================================================== */

.news-section {
  padding: 100px 0;
  background: #f8fafc;
}

.notice-board,
.latest-news {


  background: #fff;

  border-radius: 20px;

  overflow: hidden;

  box-shadow:
    0 10px 35px rgba(0, 0, 0, .08);

  height: 100%;


}

.notice-board h3,
.latest-news h3 {


  background: var(--primary);

  color: #fff;

  margin: 0;

  padding: 18px 25px;

  font-size: 22px;

  font-weight: 600;


}

.notice-board ul {


  padding: 20px 25px;
  margin: 0;


}

.notice-board ul li {


  padding: 15px 0;

  border-bottom: 1px solid #e9ecef;

  font-weight: 500;

  position: relative;

  padding-left: 30px;


}

.notice-board ul li:last-child {
  border-bottom: none;
}

.notice-board ul li::before {


  content: '📌';

  position: absolute;

  left: 0;
  top: 15px;


}

.latest-news marquee {


  padding: 20px 25px;

  font-size: 15px;

  color: var(--text);


}

.latest-news p {


  padding-bottom: 15px;

  margin-bottom: 15px;

  border-bottom: 1px dashed #ddd;


}

/* =====================================================
  EVENTS SECTION
  ===================================================== */

.events-section {
  padding: 100px 0;
  background: #ffffff;
}

.event-card {


  background: #fff;

  border-radius: 20px;

  overflow: hidden;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, .08);

  transition: all .4s ease;

  height: 100%;


}

.event-card:hover {


  transform: translateY(-12px);

  box-shadow:
    0 20px 45px rgba(0, 0, 0, .15);


}

.event-card img {


  width: 100%;

  height: 260px;

  object-fit: cover;

  transition: .6s;


}

.event-card:hover img {


  transform: scale(1.08);


}

.event-content {


  padding: 25px;


}

.event-content span {


  display: inline-block;

  background:
    rgba(13, 71, 161, .1);

  color: var(--primary);

  padding: 6px 14px;

  border-radius: 30px;

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 15px;


}

.event-content h4 {


  font-size: 24px;

  color: var(--dark);

  margin-bottom: 12px;

  font-weight: 700;


}

.event-content p {


  margin-bottom: 0;


}

/* =====================================================
  GALLERY PREVIEW
  ===================================================== */

.gallery-preview {


  padding: 100px 0;

  background: #f8fafc;


}

.gallery-img {


  width: 100%;

  height: 280px;

  object-fit: cover;

  border-radius: 15px;

  cursor: pointer;

  transition: .5s;


}

.gallery-img:hover {


  transform: scale(1.05);

  box-shadow:
    0 15px 35px rgba(0, 0, 0, .15);


}

.gallery-preview .btn {


  margin-top: 20px;


}

/* =====================================================
  TESTIMONIAL SECTION
  ===================================================== */

.testimonial-section {


  padding: 100px 0;

  background: #fff;


}

.testimonial-box {


  max-width: 850px;

  margin: auto;

  text-align: center;

  padding: 50px;

  border-radius: 25px;

  background: #fff;

  box-shadow:
    0 15px 45px rgba(0, 0, 0, .08);


}

.testimonial-box p {


  font-size: 20px;

  line-height: 1.9;

  color: #555;

  margin: 25px 0;


}

.testimonial-box h5 {


  color: var(--primary);

  font-weight: 700;

  margin-top: 15px;


}

.testimonial-box::before {


  content: '★★★★★';

  display: block;

  color: #FFC107;

  font-size: 26px;

  letter-spacing: 3px;


}

.testimonial-section .carousel-indicators {


  bottom: -60px;


}

.testimonial-section .carousel-indicators button {


  width: 12px;

  height: 12px;

  border-radius: 50%;


}

/* =====================================================
  CALL TO ACTION SECTION
  ===================================================== */

.cta-section {


  background:
    linear-gradient(rgba(13, 71, 161, .95),
      rgba(13, 71, 161, .95)),
    url('../images/cta-bg.jpg');

  background-size: cover;

  background-position: center;

  padding: 90px 0;

  color: #fff;

  text-align: center;


}

.cta-section h2 {


  font-size: 46px;

  font-weight: 700;

  margin-bottom: 20px;


}

.cta-section p {


  font-size: 18px;

  max-width: 700px;

  margin: auto;

  margin-bottom: 35px;


}

.cta-section .btn {


  min-width: 220px;


}

/* =====================================================
  SECTION TITLE IMPROVEMENT
  ===================================================== */

.news-section .section-title,
.events-section .section-title,
.gallery-preview .section-title,
.testimonial-section .section-title {


  margin-bottom: 60px;


}

/* =====================================================
  HOVER EFFECT UTILITIES
  ===================================================== */

.zoom-hover {


  overflow: hidden;

  border-radius: 15px;


}

.zoom-hover img {


  transition: .5s;


}

.zoom-hover:hover img {


  transform: scale(1.1);


}

/* =====================================================
  RESPONSIVE DESIGN
  ===================================================== */

@media(max-width:992px) {


  .event-card img {

    height: 220px;
  }

  .cta-section h2 {

    font-size: 38px;
  }

  .testimonial-box {

    padding: 40px;
  }


}

@media(max-width:768px) {


  .news-section,
  .events-section,
  .gallery-preview,
  .testimonial-section {

    padding: 70px 0;
  }

  .cta-section {

    padding: 70px 20px;
  }

  .cta-section h2 {

    font-size: 32px;
  }

  .gallery-img {

    height: 220px;
  }

  .testimonial-box {

    padding: 30px;
  }

  .testimonial-box p {

    font-size: 17px;
  }


}

@media(max-width:576px) {


  .notice-board h3,
  .latest-news h3 {

    font-size: 18px;
  }

  .event-content {

    padding: 20px;
  }

  .event-content h4 {

    font-size: 20px;
  }

  .cta-section h2 {

    font-size: 26px;
  }

  .cta-section p {

    font-size: 16px;
  }

  .gallery-img {

    height: 200px;
  }

  .testimonial-box {

    padding: 25px 20px;
  }

  .testimonial-box p {

    font-size: 16px;
  }


}

/* =====================================================
PART 4
PREMIUM FOOTER
===================================================== */

.footer {


  background: #081F4D;

  color: #fff;

  padding: 80px 0 20px;

  position: relative;


}

.footer::before {


  content: '';

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background: var(--accent);


}

.footer h4,
.footer h5 {


  color: #fff;

  font-weight: 700;

  margin-bottom: 25px;


}

.footer p {


  color: rgba(255, 255, 255, .75);

  line-height: 1.9;


}

.footer ul {


  padding: 0;
  margin: 0;


}

.footer ul li {


  margin-bottom: 12px;


}

.footer ul li a {


  color: rgba(255, 255, 255, .75);

  transition: all .3s ease;


}

.footer ul li a:hover {


  color: var(--accent);

  padding-left: 8px;


}

.footer hr {


  border-color:
    rgba(255, 255, 255, .12);

  margin: 35px 0 20px;


}

.footer .copyright {


  text-align: center;

  color: rgba(255, 255, 255, .75);

  font-size: 14px;


}

/* =====================================================
  FOOTER SOCIAL ICONS
  ===================================================== */

.footer-social {


  display: flex;

  gap: 12px;

  margin-top: 25px;


}

.footer-social a {


  width: 42px;
  height: 42px;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #fff;

  background:
    rgba(255, 255, 255, .08);

  transition: .4s;


}

.footer-social a:hover {


  background: var(--accent);

  color: #000;

  transform: translateY(-5px);


}

/* =====================================================
  CONTACT INFO BLOCK
  ===================================================== */

.footer-contact li {


  display: flex;

  align-items: flex-start;

  gap: 12px;

  margin-bottom: 15px;

  color: rgba(255, 255, 255, .75);


}

.footer-contact li i {


  color: var(--accent);

  margin-top: 5px;


}

/* =====================================================
  WHATSAPP FLOATING BUTTON
  ===================================================== */

.whatsapp-btn {


  position: fixed;

  width: 65px;
  height: 65px;

  right: 25px;
  bottom: 25px;

  background: #25D366;

  color: #fff;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 32px;

  z-index: 9999;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, .25);

  transition: .4s;


}

.whatsapp-btn:hover {


  color: #fff;

  transform: scale(1.1);


}

/* =====================================================
  WHATSAPP PULSE ANIMATION
  ===================================================== */

.whatsapp-btn::before {


  content: '';

  position: absolute;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  background: #25D366;

  z-index: -1;

  animation: pulse 2s infinite;


}

@keyframes pulse {


  0% {
    transform: scale(1);
    opacity: .8;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }


}

/* =====================================================
  SCROLL TO TOP BUTTON
  ===================================================== */

#scrollTopBtn {


  position: fixed;

  right: 25px;
  bottom: 105px;

  width: 55px;
  height: 55px;

  border: none;

  border-radius: 50%;

  background: var(--primary);

  color: #fff;

  font-size: 20px;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;

  z-index: 9998;

  transition: .4s;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, .25);


}

#scrollTopBtn.active {


  opacity: 1;

  visibility: visible;


}

#scrollTopBtn:hover {


  background: var(--accent);

  color: #000;

  transform: translateY(-5px);


}

/* =====================================================
  PAGE BANNER
  ===================================================== */

.page-banner {


  height: 450px;

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: center;
  justify-content: center;

  position: relative;


}

.page-banner::before {


  content: '';

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background:
    rgba(0, 0, 0, .55);


}

.page-banner-content {


  position: relative;

  z-index: 2;

  text-align: center;

  color: #fff;


}

.page-banner-content h1 {


  font-size: 58px;

  font-weight: 800;

  text-transform: uppercase;


}

.page-banner-content p {


  font-size: 18px;

  margin-top: 10px;


}

/* =====================================================
  GENERAL CARD STYLE
  ===================================================== */

.custom-card {


  background: #fff;

  border-radius: 20px;

  overflow: hidden;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, .08);

  transition: .4s;


}

.custom-card:hover {


  transform: translateY(-10px);

  box-shadow:
    0 20px 40px rgba(0, 0, 0, .15);


}

/* =====================================================
  TABLE STYLING
  (DISCLOSURE PAGE)
  ===================================================== */

.custom-table {


  width: 100%;

  border-collapse: collapse;

  margin-bottom: 30px;


}

.custom-table thead {


  background: var(--primary);

  color: #fff;


}

.custom-table th,
.custom-table td {


  padding: 15px;

  border: 1px solid #dee2e6;


}

.custom-table tbody tr:nth-child(even) {


  background: #f8f9fa;


}

.custom-table tbody tr:hover {


  background: #eef4ff;


}

/* =====================================================
  FORM STYLING
  ===================================================== */

.form-control {


  height: 55px;

  border-radius: 12px;

  border: 1px solid #ddd;

  padding-left: 15px;


}

textarea.form-control {


  height: auto;


}

.form-control:focus {


  border-color: var(--primary);

  box-shadow: none;


}

/* =====================================================
  LOADING ANIMATION
  ===================================================== */

.preloader {


  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: #fff;

  z-index: 99999;

  display: flex;

  align-items: center;
  justify-content: center;


}

.loader {


  width: 60px;
  height: 60px;

  border: 5px solid #eee;

  border-top: 5px solid var(--primary);

  border-radius: 50%;

  animation: spin 1s linear infinite;


}

@keyframes spin {


  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }


}

/* =====================================================
  UTILITY CLASSES
  ===================================================== */

.bg-primary-custom {
  background: var(--primary);
}

.bg-light-custom {
  background: #f8fafc;
}

.text-primary-custom {
  color: var(--primary);
}

.rounded-20 {
  border-radius: 20px;
}

.shadow-custom {
  box-shadow: var(--shadow);
}

.py-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

/* =====================================================
  IMAGE OVERLAY HELPER
  ===================================================== */

.image-overlay {


  position: relative;


}

.image-overlay::before {


  content: '';

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background:
    rgba(0, 0, 0, .35);


}

/* =====================================================
  RESPONSIVE DESIGN
  ===================================================== */

@media(max-width:992px) {


  .footer {

    text-align: center;
  }

  .footer-social {

    justify-content: center;
  }

  .footer-contact li {

    justify-content: center;
  }

  .page-banner-content h1 {

    font-size: 44px;
  }


}

@media(max-width:768px) {


  .footer {

    padding: 60px 0 20px;
  }

  .page-banner {

    height: 350px;
  }

  .page-banner-content h1 {

    font-size: 36px;
  }

  .whatsapp-btn {

    width: 58px;
    height: 58px;

    font-size: 28px;
  }

  #scrollTopBtn {

    width: 50px;
    height: 50px;
  }


}

@media(max-width:576px) {


  .page-banner-content h1 {

    font-size: 28px;
  }

  .page-banner-content p {

    font-size: 15px;
  }

  .footer h4,
  .footer h5 {

    margin-top: 25px;
  }

  .whatsapp-btn {

    right: 15px;
    bottom: 15px;
  }

  #scrollTopBtn {

    right: 15px;
    bottom: 85px;
  }


}