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

h1,
.titlepage h1 {
     font-size: clamp(1.5rem, 5vw, 2.5rem);
     line-height: 1.3;
}

p,
.titlepage span {
     font-size: clamp(1rem, 2.5vw, 1.125rem);
}

img {
     max-width: 100%;
     height: auto;
}

.form-control {
     box-shadow: none !important;
}

.btn {
     box-shadow: none !important;
}

ul {
     margin: 0;
     padding: 0;
}

h1 {
     font-family: 'Playfair Display', serif;
}

.navbar-nav {
     justify-content: space-around;
     width: 100%;
}

.logo {
     text-align: center;
}

.navbar-toggler {
     margin: auto;
}

.navbar div .navbar-nav li .nav-link:hover {
     color: #000000;
}

.navbar .navbar-nav li .nav-link::after {
     content: '';
     display: flex;
     position: relative;
     width: 100%;
     height: 0.13rem;
     bottom: -7px;
     left: 0;
     background-color: black;
     visibility: hidden;
     width: 0px;
     transition: 0.3s;
}

.navbar .navbar-nav li .nav-link:hover::after {
     visibility: visible;
     width: 100%;
}

.banner {
     background-size: cover;
     background-position: center;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     text-align: center;
     position: relative;
}
.banner2 {
     background-size: cover;
     background-position: center;
     min-height: 70vh;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     text-align: center;
     position: relative;
}


.banner h1 {
     font-size: 2.5rem;
     line-height: 1.2;
}

.banner p {
     font-size: 1.125rem;
     margin-top: 1rem;
}

.btn_yellow,
.btn_black {
     text-decoration: none;
     border: none;
     font-size: 1rem;
     padding: 10px 40px;
     font-weight: bold;
     transition: background-color 0.3s ease, color 0.3s ease;
     cursor: pointer;
}

/* Button Styles */
.btn_yellow {
     background-color: #ffb930;
     color: #000000;
}

.btn_yellow:hover {
     background-color: #000000;
     color: #ffb930;
}

.btn_black {
     background-color: #000000;
     color: #ffffff;
}

.btn_black:hover {
     background-color: #ffb930;
     color: #000000;
}

/* Responsive Styles */
@media (max-width: 768px) {
     .banner h1 {
          font-size: 2rem;
     }

     .banner p {
          font-size: 1rem;
     }

     .banner button {
          width: 100%;
          padding: 12px;
          font-size: 1rem;
     }

     .banner .d-flex {
          flex-direction: column;
          gap: 1rem;
     }
}

@media (max-width: 480px) {
     .banner h1 {
          font-size: 1.75rem;
     }

     .banner p {
          font-size: 0.95rem;
     }
}


section {
     background-color: #fff;
     margin-bottom: 120px;
}

section .titlepage {
     text-align: center;
}

.titlepage h6 {
     padding: 0px 0px 20px 0px;
     font-size: 16px;
     font-weight: bold;
     color: #ffb930;
     line-height: 50px;
     text-transform: uppercase;
     display: inline-block;
     position: relative;
}

.titlepage h1 {
     padding: 0px 0px 20px 0px;
     font-weight: 700;
     text-transform: uppercase;
}

.titlepage span {
     color: #141012;
     font-size: 17px;
     line-height: 32px;
     display: block;
}

.titlepage h6::before {
     right: 100%;
     margin-right: 15px;
}

.titlepage h6::after {
     left: 100%;
     margin-left: 15px;
}

.titlepage h6::before,
.titlepage h6::after {
     content: "";
     position: absolute;
     height: 5px;
     border-top: 1px solid #ffb930;
     top: 27px;
     width: 60px;
}

.social_icon {
     background-color: #0D1C2B14;
     color: black;
     padding: 5px 10px;
     border-radius: 5px;
     transition: background-color 0.3s ease, color 0.3s ease;
}

.social_icon:hover {
     background-color: #ffb930;
     color: black;
}

@media (max-width: 768px) {
     .row>.col-lg-6 {
          flex: 0 0 100%;
          max-width: 100%;
          margin-bottom: 2rem;
     }

     .titlepage h1 {
          font-size: 1.8rem;
     }

     .titlepage p {
          font-size: 1rem;
     }

     section {
          margin-bottom: 80px;
     }
}

@media (max-width: 576px) {
     .container {
          padding-left: 1rem;
          padding-right: 1rem;
     }
}

@media (max-width: 576px) {
     .d-flex.gap-5 {
          flex-direction: column !important;
          gap: 1rem !important;
          align-items: center;
     }

     .mt-5 {
          margin-top: 2rem !important;
     }

     .gap-5 {
          gap: 1.5rem;
     }
}
.banner-slide {
     width: 100%;
     height: 100vh;
     background-size: cover;
     background-position: center;
 }