/*
Table of Contents:
1. Custom Divider
2. Aspect Banner
   - General
   - Image Styling
3. Banner Titles
4. Background Image Styling
5. Banner Background
   - General
   - Image Styling
6. Showcase Section
7. Carousel
   - General Styling
   - Captions
   - Animations
8. Banner Shape
9. Icon Section
   - Icon Color
10. Text Center Styling
11. Card Styling
12. Media Queries
   - Banner Background Adjustment for Smaller Screens
*/

/* 1. Custom Divider */
.custom-divider {
  width: 120px;
  background-color: #146394;
  margin-top: -5px !important;
  height: 2px;
}

/* 2. Aspect Banner */
/* General */
.aspect-banner {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  background-color: #f0f0f0; /* Fallback color */
}

/* Image Styling */
.aspect-banner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3. Banner Titles */
.sp-banner-title {
  font-size: 40px;
}

/* 4. Background Image Styling */
.bg-image {
  background: black;
  opacity: 0.7;
}

/* 5. Banner Background */
/* General */
.banner-bg {
  height: 452px !important;
  background-size: contain;
  background: black;
}

/* Image Styling */
.banner-bg img {
  background-size: contain;
  height: auto !important;
  background-position: bottom;
  max-height: 522px !important;
}

/* 6. Showcase Section */
.showcase {
  position: relative;
  background-size: contain;
}

/* 7. Carousel */
/* General Styling */
.carousel-caption {
  top: 150px;
  text-align: left !important;
  left: 10% !important;
  width: 70%;
}

.carousel-caption .slim {
  font-size: 52px;
  font-weight: lighter;
  line-height: 55px !important;
  text-align: left !important;
}

.carousel-caption h4 {
  top: 230px;
  text-align: left !important;
  left: 10% !important;
  width: 50%;
  margin-top: 20px;
  font-size: 20px;
  line-height: 30px;
}

.carousel-caption p {
  width: 70%;
  font-size: 20px;
  font-weight: 900 !important;
  line-height: 1.9;
  text-align: left !important;
}

.carousel-caption a {
  text-transform: none;
  text-decoration: none;
  background: #fff;
  padding: 10px 30px;
  color: #000;
  margin-top: 15px;
  text-align: left !important;
}

/* Animations */
.carousel-inner .carousel-item > img {
  animation: thing 20s;
}

@keyframes thing {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

/* 8. Banner Shape */
.banner_shape {
  position: absolute;
  right: 353px;
  top: 22px;
  width: 150px;
  height: 110px !important;
}

/* 9. Icon Section */
.icons_below {
  background-color: #f3f3f3;
  margin-top: -50px;
  z-index: 99;
  border-radius: 6px;
  padding: 15px;
}

.la_icon_blue {
  color: #25a0f3 !important;
}

/* 10. Text Center Styling */
.text-center h5 {
  color: #09629e !important;
}

/* 11. Card Styling */
.la_card {
  border-right: solid 1px #000;
}

/* 12. Media Queries */
/* Banner Background Adjustment for Smaller Screens */
@media screen and (max-width: 640px) {
  .banner-bg {
    height: 222px !important;
    background-size: auto;
    background: black;
  }

  .banner-bg img {
    background-size: auto;
    height: auto !important;
    max-height: 222px !important;
  }
}