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

:root {
   --primary: #1a365d;
   --primary-light: #2c5282;
   --primary-dark: #0f2942;
   --accent: #c53030;
   --accent-light: #e53e3e;
   --white: #ffffff;
   --light-gray: #f7fafc;
   --gray: #718096;
   --dark-gray: #2d3748;
   --black: #1a202c;
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --border-radius: 12px;
   --border-radius-lg: 20px;
}

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

*::before,
*::after {
   box-sizing: border-box;
}

html {
   font-size: 62.5%;
   scroll-behavior: smooth;
   scroll-padding-top: 8rem;
   overflow-x: hidden;
}

body {
   font-family: 'Poppins', 'Segoe UI', sans-serif;
   font-size: 1.6rem;
   line-height: 1.7;
   color: var(--dark-gray);
   background: var(--white);
   overflow-x: hidden;
}

/* Custom Scrollbar */
html::-webkit-scrollbar {
   width: 10px;
}

html::-webkit-scrollbar-track {
   background: var(--light-gray);
}

html::-webkit-scrollbar-thumb {
   background: linear-gradient(180deg, var(--primary), var(--primary-dark));
   border-radius: 10px;
}

html::-webkit-scrollbar-thumb:hover {
   background: var(--primary-light);
}

/* Prevent image selection */
* > img {
   user-select: none;
   pointer-events: none;
}

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

ul {
   list-style: none;
}

/* ========== NAVBAR ========== */
.navbar {
   padding: 1rem 0;
   backdrop-filter: blur(20px);
   background: rgba(26, 54, 93, 0.95) !important;
   box-shadow: var(--shadow-lg);
   transition: var(--transition);
}

.navbar .container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 2rem;
}

.navbar-brand.logo {
   font-size: 1.6rem;
   font-weight: 600;
   color: var(--white) !important;
   line-height: 1.4;
   letter-spacing: 0.5px;
}

.navbar-brand.logo span {
   color: var(--accent) !important;
   font-weight: 700;
   font-size: 1.8rem;
}

.navbar-toggler {
   border: 2px solid rgba(255, 255, 255, 0.3) !important;
   padding: 0.8rem;
   border-radius: 8px;
   transition: var(--transition);
}

.navbar-toggler:hover {
   border-color: var(--white) !important;
   background: rgba(255, 255, 255, 0.1);
}

.navbar-toggler-icon {
   filter: brightness(1.2);
}

#mainMenu {
   margin-right: 0;
}

.navbar-nav {
   gap: 0.5rem;
}

.navbar-nav .nav-link {
   color: rgba(255, 255, 255, 0.9) !important;
   font-size: 1.4rem;
   font-weight: 500;
   padding: 1rem 1.5rem !important;
   border-radius: 8px;
   position: relative;
   transition: var(--transition);
}

.navbar-nav .nav-link::before {
   content: '';
   position: absolute;
   bottom: 0.5rem;
   left: 50%;
   transform: translateX(-50%) scaleX(0);
   width: 30px;
   height: 3px;
   background: var(--accent);
   border-radius: 2px;
   transition: var(--transition);
}

.navbar-nav .nav-link:hover {
   color: var(--white) !important;
   background: rgba(255, 255, 255, 0.1);
}

.navbar-nav .nav-link:hover::before {
   transform: translateX(-50%) scaleX(1);
}

.links li {
   font-size: 1.4rem;
}

/* ========== SECTIONS ========== */
section {
   padding: 8rem 5%;
}

.heading {
   text-align: center;
   margin-bottom: 5rem;
}

.heading span {
   font-size: 2.5rem;
   color: var(--primary);
   font-weight: 600;
   letter-spacing: 2px;
   display: block;
   margin-bottom: 1rem;
}

.heading h3 {
   font-size: 4rem;
   color: var(--primary);
   font-weight: 700;
   line-height: 1.2;
}

/* ========== BUTTONS ========== */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   padding: 1.4rem 3rem;
   font-size: 1.6rem;
   font-weight: 600;
   border-radius: var(--border-radius);
   cursor: pointer;
   transition: var(--transition);
   border: none;
   outline: none;
   background: linear-gradient(135deg, var(--primary), var(--primary-light));
   color: var(--white);
   box-shadow: var(--shadow-md);
}

.btn:hover {
   background: linear-gradient(135deg, var(--primary-light), var(--primary));
   transform: translateY(-3px);
   box-shadow: var(--shadow-lg);
   color: var(--white);
}

/* ========== HOME SLIDER ========== */
.home {
   padding: 0;
   background: var(--black);
   position: relative;
}

.home .slide {
   min-height: 100vh;
   background-size: cover !important;
   background-position: center !important;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}

.home .slide::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(247, 250, 252, 0.85), rgba(220, 220, 220, 0.75));
   z-index: 1;
}

.home .slide .content {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   max-width: 700px;
   margin: 0 auto;
   padding: 2rem 2.5rem;
   background: linear-gradient(135deg, rgba(26,54,93,0.85) 0%, rgba(197,48,48,0.85) 100%);
   border-radius: 16px;
   box-shadow: 0 4px 24px rgba(0,0,0,0.10);
   font-size: 2.2rem;
   font-weight: 500;
   line-height: 1.5;
   color: #fff;
   backdrop-filter: blur(2px);
   display: none;
}

.home .swiper-slide-active .content {
   display: block;
   animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.home .slide .content span {
   font-size: 2rem;
   color: rgba(255, 255, 255, 0.9);
   display: block;
   margin-bottom: 1rem;
   font-weight: 400;
   letter-spacing: 2px;
}

.home .slide .content h3 {
   font-size: clamp(3rem, 6vw, 6rem);
   color: var(--white);
   text-transform: uppercase;
   font-weight: 700;
   text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   line-height: 1.2;
   margin-bottom: 2rem;
}

.home .slide .content p {
   font-size: clamp(1.8rem, 3vw, 2.4rem);
   color: rgba(255, 255, 255, 0.95);
   font-weight: 400;
   line-height: 1.6;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Swiper Navigation */
.swiper-button-next,
.swiper-button-prev {
   width: 5rem;
   height: 5rem;
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(10px);
   border-radius: 50%;
   color: var(--white);
   transition: var(--transition);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
   background: var(--accent);
   transform: scale(1.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
   font-size: 1.8rem;
   font-weight: bold;
}

.swiper-pagination-bullet {
   width: 12px;
   height: 12px;
   background: rgba(255, 255, 255, 0.5);
   opacity: 1;
}

.swiper-pagination-bullet-active {
   background: var(--accent);
   transform: scale(1.2);
}

/* ========== ABOUT SECTION ========== */
.about {
   display: flex;
   flex-wrap: wrap;
   gap: 4rem;
   align-items: flex-start;
   background: linear-gradient(180deg, var(--light-gray), var(--white));
   padding: 8rem 5%;
}

.about .image {
   flex: 1 1 35rem;
}

.about .image img {
   width: 100%;
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-xl);
   transition: var(--transition);
}

.about .image img:hover {
   transform: scale(1.02);
}

.about .text-center img {
   width: 120px;
   height: 120px;
   object-fit: cover;
   border-radius: 50%;
   border: 4px solid var(--primary);
   box-shadow: var(--shadow-lg);
   margin-bottom: 2rem;
}

.about h4 {
   font-size: 2.2rem;
   color: var(--primary);
   font-weight: 600;
   margin-bottom: 2rem;
}

.about p {
   font-size: 1.6rem;
   color: var(--gray);
   line-height: 1.9;
   text-align: justify;
   margin-bottom: 2rem;
}

.about .content {
   flex: 1 1 45rem;
}

.about .content .title {
   font-size: 3rem;
   color: var(--accent);
   font-weight: 700;
   margin-bottom: 2rem;
   position: relative;
   display: inline-block;
}

.about .content .title::after {
   content: '';
   position: absolute;
   bottom: -8px;
   left: 0;
   width: 60px;
   height: 4px;
   background: var(--primary);
   border-radius: 2px;
}

.about .content p {
   font-size: 1.6rem;
   color: var(--gray);
   line-height: 1.9;
}

.about .content ul {
   margin: 2rem 0;
}

.about .content ul li {
   font-size: 1.6rem;
   color: var(--gray);
   padding: 1rem 0;
   padding-left: 3rem;
   position: relative;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.about .content ul li::before {
   content: '✓';
   position: absolute;
   left: 0;
   color: var(--accent);
   font-weight: bold;
   font-size: 1.4rem;
}

/* Icons Container */
.about .content .icons-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
   gap: 2rem;
   margin-top: 4rem;
}

.about .content .icons-container .icons {
   background: var(--white);
   padding: 3rem;
   border-radius: var(--border-radius);
   box-shadow: var(--shadow-md);
   text-align: center;
   transition: var(--transition);
   border: 1px solid rgba(0, 0, 0, 0.05);
}

.about .content .icons-container .icons:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-lg);
}

.about .content .icons-container .icons img {
   height: 6rem;
   margin-bottom: 1.5rem;
}

.about .content .icons-container .icons h3 {
   font-size: 1.5rem;
   color: var(--gray);
   font-weight: 400;
   line-height: 1.6;
   font-style: italic;
}

.about .content .icons-container .icons span {
   display: block;
   margin-top: 1rem;
   font-size: 1.4rem;
   color: var(--primary);
   font-weight: 600;
   font-style: normal;
}

/* Signature image */
.about img.rounded.float-right {
   width: 150px;
   margin-top: 2rem;
   filter: contrast(1.2);
}

/* ========== AB SECTION (Juridique) ========== */
.ab {
   padding: 4rem 5%;
   background: var(--white);
}

.ab h3 {
   font-size: 3rem;
   color: var(--primary);
   font-weight: 700;
   text-align: center;
   margin-bottom: 3rem;
}

.ab p {
   font-size: 1.6rem;
   color: var(--gray);
   line-height: 1.9;
   text-align: justify;
   max-width: 1000px;
   margin: 0 auto;
}

/* ========== PY-5 SECTIONS (Médiation & Arbitrage) ========== */
.py-5 {
   padding: 8rem 0;
}

.py-5 .container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 2rem;
}

.py-5 .row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 4rem;
}

.py-5 .col-md {
   flex: 1;
   min-width: 300px;
}

.py-5 img {
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-xl);
   transition: var(--transition);
}

.py-5 img:hover {
   transform: scale(1.02);
}

.py-5 h2 {
   font-size: 3rem;
   color: var(--primary);
   font-weight: 700;
   margin-bottom: 2rem;
   position: relative;
   padding-bottom: 1.5rem;
   text-align: center;
}

.py-5 h2::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 80px;
   height: 4px;
   background: linear-gradient(90deg, var(--accent), var(--primary));
   border-radius: 2px;
}

.py-5 p {
   font-size: 1.6rem;
   color: var(--gray);
   line-height: 1.9;
   text-align: justify;
}

#learn-bootstrap {
   background: var(--white);
}

#where-toGo {
   background: linear-gradient(135deg, var(--light-gray), rgba(26, 54, 93, 0.05));
}

/* ========== FOOD PREVIEW ========== */
.food {
   background: var(--light-gray);
}

.food .slide {
   text-align: center;
   padding: 4rem 2rem;
   border-radius: var(--border-radius);
   transform: scale(0.9);
   opacity: 0.5;
   margin-bottom: 4rem;
   cursor: pointer;
   transition: var(--transition);
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
   bottom: 0;
}

.food .swiper-slide-active {
   transform: scale(1);
   opacity: 1;
   background: var(--white);
   box-shadow: var(--shadow-lg);
   border: 1px solid rgba(0, 0, 0, 0.05);
}

.food .slide img {
   height: 25rem;
   margin-bottom: 1rem;
}

.food .slide h3 {
   font-size: 2.5rem;
   padding: 1rem 0;
   color: var(--dark-gray);
}

.food .slide .price {
   font-size: 2.5rem;
   color: var(--accent);
}

.food-preview-container {
   background: rgba(0, 0, 0, 0.8);
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 1100;
   display: none;
   align-items: center;
   justify-content: center;
}

.food-preview-container .food-preview {
   text-align: center;
   background: var(--white);
   padding: 3rem 2rem;
   border-radius: var(--border-radius);
   display: none;
   width: 35rem;
}

.food-preview-container .food-preview.active {
   display: inline-block;
   animation: fadeInUp 0.4s ease-out;
}

.food-preview-container .food-preview img {
   height: 25rem;
   margin-bottom: 1rem;
}

.food-preview-container .food-preview h3 {
   padding: 1rem 0;
   font-size: 2.5rem;
   color: var(--dark-gray);
}

.food-preview-container .food-preview .stars {
   margin-top: 0.5rem;
}

.food-preview-container .food-preview .stars i {
   font-size: 1.7rem;
   color: var(--accent);
}

.food-preview-container .food-preview p {
   font-size: 1.6rem;
   color: var(--gray);
   padding: 1rem 0;
   line-height: 2;
}

.food-preview-container .food-preview .price {
   font-size: 2.5rem;
   color: var(--dark-gray);
   margin-bottom: 0.5rem;
}

#close-preview {
   position: absolute;
   top: 1.5rem;
   right: 2.5rem;
   font-size: 6rem;
   cursor: pointer;
   color: var(--white);
   transition: var(--transition);
}

#close-preview:hover {
   transform: rotate(90deg);
}

/* ========== GALLERY ========== */
.gallery .gallery-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap: 2rem;
}

.gallery .gallery-container .box {
   height: 40rem;
   position: relative;
   overflow: hidden;
   border-radius: var(--border-radius);
}

.gallery .gallery-container .box img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   transition: var(--transition);
}

.gallery .gallery-container .box:hover img {
   transform: scale(1.1);
}

.gallery .gallery-container .box .icon {
   display: none;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10;
   height: 100%;
   width: 100%;
   background: rgba(26, 54, 93, 0.8);
}

.gallery .gallery-container .box .icon i {
   font-size: 6rem;
   color: var(--white);
}

.gallery .gallery-container .box:hover .icon {
   display: flex;
}

/* ========== MENU ========== */
.menu {
   background: var(--light-gray);
}

.menu .slide .title {
   padding: 1rem;
   font-size: 3rem;
   color: var(--white);
   background: linear-gradient(135deg, var(--primary), var(--accent));
   margin-bottom: 3rem;
   text-align: center;
   border-radius: var(--border-radius);
}

.menu .slide .box-container {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
   padding-bottom: 4rem;
}

.menu .slide .box-container .box {
   flex: 1 1 41rem;
   background: var(--white);
   padding: 2rem;
   box-shadow: var(--shadow-md);
   border-radius: var(--border-radius);
   display: flex;
   align-items: center;
   gap: 1rem;
   justify-content: space-between;
   transition: var(--transition);
}

.menu .slide .box-container .box:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-lg);
}

.menu .slide .box-container .box h3 {
   font-size: 2.5rem;
   color: var(--dark-gray);
   padding-bottom: 0.5rem;
}

.menu .slide .box-container .box p {
   font-size: 1.6rem;
   color: var(--gray);
   line-height: 2;
}

.menu .slide .box-container .box .price {
   font-size: 2.5rem;
   color: var(--accent);
}

/* ========== ORDER/CONTACT SECTION ========== */
.order {
   background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   padding: 8rem 5%;
}

.order .heading span {
   color: rgba(255, 255, 255, 0.9);
   font-size: 2.5rem;
}

.order .heading h3 {
   color: var(--white);
}

.order form {
   background: var(--white);
   padding: 4rem;
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-xl);
   max-width: 1200px;
   margin: 0 auto;
}

.order form .box-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 3rem;
}

.order form .box-container .box .inputBox {
   margin-bottom: 2rem;
}

.order form .box-container .box .inputBox span {
   display: block;
   font-size: 1.4rem;
   font-weight: 600;
   color: var(--dark-gray);
   margin-bottom: 0.8rem;
}

.order form .box-container .box .inputBox input,
.order form .box-container .box .inputBox textarea {
   width: 100%;
   padding: 1.4rem 1.8rem;
   font-size: 1.5rem;
   color: var(--dark-gray);
   background: var(--light-gray);
   border: 2px solid transparent;
   border-radius: var(--border-radius);
   transition: var(--transition);
   font-family: inherit;
}

.order form .box-container .box .inputBox input:focus,
.order form .box-container .box .inputBox textarea:focus {
   border-color: var(--primary);
   background: var(--white);
   box-shadow: 0 0 0 4px rgba(26, 54, 93, 0.1);
   outline: none;
}

.order form .box-container .box .inputBox input::placeholder,
.order form .box-container .box .inputBox textarea::placeholder {
   color: var(--gray);
}

.order form .box-container .box .inputBox textarea {
   min-height: 15rem;
   resize: vertical;
}

.order form .box-container .box .inputBox iframe {
   width: 100%;
   height: 25rem;
   border-radius: var(--border-radius);
   border: 2px solid var(--light-gray);
}

.order form .box-container .box .inputBox .map {
   height: 20rem;
   width: 100%;
   margin: 1rem 0;
}

.order form .btn {
   display: block;
   width: 100%;
   max-width: 400px;
   margin: 3rem auto 0;
   background: linear-gradient(135deg, var(--primary), var(--accent));
}

.order form .btn:hover {
   background: linear-gradient(135deg, var(--accent), var(--primary));
}

/* ========== DOCUMENTS SECTION ========== */
.doc {
   padding: 8rem 5%;
   text-align: center;
   background: var(--light-gray);
}

.doc h3 {
   font-size: 3.5rem;
   color: var(--accent);
   font-weight: 700;
   margin-bottom: 4rem;
   position: relative;
   display: inline-block;
}

.doc h3::after {
   content: '';
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   width: 100px;
   height: 4px;
   background: var(--primary);
   border-radius: 2px;
}

.doc ul {
   max-width: 800px;
   margin: 0 auto;
}

.doc li {
   padding: 2rem;
   margin-bottom: 1.5rem;
   background: var(--white);
   border-radius: var(--border-radius);
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
}

.doc li:hover {
   transform: translateX(10px);
   box-shadow: var(--shadow-md);
}

.doc li a {
   font-size: 1.8rem;
   color: var(--primary);
   font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
}

.doc li a::before {
   content: '📄';
   font-size: 2rem;
}

.doc li a:hover {
   color: var(--accent);
}

/* ========== BLOGS ========== */
.blogs {
   background: var(--light-gray);
}

.blogs .slide .image {
   height: 25rem;
   overflow: hidden;
   position: relative;
   border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.blogs .slide .image img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   transition: var(--transition);
}

.blogs .slide .image span {
   position: absolute;
   bottom: -10rem;
   left: 50%;
   transform: translateX(-50%);
   padding: 0.5rem 1.5rem;
   font-size: 2rem;
   color: var(--white);
   background: var(--dark-gray);
   z-index: 10;
   border-radius: var(--border-radius);
   transition: var(--transition);
}

.blogs .slide:hover .image span {
   bottom: 1rem;
}

.blogs .slide:hover .image img {
   transform: scale(1.1);
}

.blogs .slide .content {
   padding: 2rem;
   background: var(--white);
   box-shadow: var(--shadow-md);
   border-radius: 0 0 var(--border-radius) var(--border-radius);
   margin-bottom: 4rem;
}

.blogs .slide .content .icon {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 2rem;
}

.blogs .slide .content .icon a {
   font-size: 1.5rem;
   color: var(--gray);
}

.blogs .slide .content .icon a i {
   padding-right: 0.7rem;
   color: var(--accent);
}

.blogs .slide .content .icon a:hover {
   color: var(--accent);
}

.blogs .slide .content .title {
   font-size: 2.5rem;
   color: var(--dark-gray);
}

.blogs .slide .content .title:hover {
   text-decoration: underline;
}

.blogs .slide .content p {
   padding: 1rem 0;
   line-height: 2;
   font-size: 1.6rem;
   color: var(--gray);
}

/* ========== CARDS ========== */
.card {
   border: none;
   border-radius: var(--border-radius);
   overflow: hidden;
   box-shadow: var(--shadow-md);
   transition: var(--transition);
   margin: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
}

.card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-lg);
}

.card-img-top {
   width: 100%;
   height: auto;
   object-fit: cover;
}

.card-group {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;
   padding: 2rem 5%;
   justify-content: center;
}

.card-group .card {
   flex: 1 1 300px;
   max-width: 400px;
}

.card-body p {
   font-size: 1.6rem;
}

/* ========== FOOTER ========== */
.footer {
   background: var(--black);
   padding: 6rem 5% 3rem;
   text-align: center;
}

.footer .icons-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
   gap: 3rem;
   margin-bottom: 4rem;
}

.footer .icons-container .icons {
   padding: 3rem;
   background: rgba(255, 255, 255, 0.03);
   border-radius: var(--border-radius);
   transition: var(--transition);
}

.footer .icons-container .icons:hover {
   background: rgba(255, 255, 255, 0.08);
   transform: translateY(-5px);
}

.footer .icons-container .icons i {
   width: 7rem;
   height: 7rem;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--primary), var(--accent));
   color: var(--white);
   font-size: 2.4rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.5rem;
   box-shadow: var(--shadow-lg);
}

.footer .icons-container .icons h3 {
   font-size: 2rem;
   color: var(--white);
   font-weight: 600;
   margin-bottom: 1rem;
}

.footer .icons-container .icons a h3 {
   color: var(--white);
   transition: var(--transition);
}

.footer .icons-container .icons a:hover h3 {
   color: var(--accent);
}

.footer .icons-container .icons p {
   font-size: 1.5rem;
   color: rgba(255, 255, 255, 0.7);
   line-height: 1.8;
}

.footer .share {
   margin: 3rem 0;
   display: flex;
   justify-content: center;
   gap: 1.5rem;
}

.footer .share a {
   width: 5rem;
   height: 5rem;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   color: var(--white);
   font-size: 2rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: var(--transition);
}

.footer .share a:hover {
   background: var(--accent);
   transform: translateY(-5px) scale(1.1);
}

.footer .credit {
   padding-top: 3rem;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer .credit p {
   font-size: 1.4rem;
   color: rgba(255, 255, 255, 0.6);
}

/* ========== TABLES (Events) ========== */
.table-events {
   padding: 6rem 5%;
   background: var(--white);
}

.table-events .table {
   background: var(--white);
   border-radius: var(--border-radius);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   font-size: 1.4rem;
}

.table-events .table thead {
   background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.table-events .table thead th {
   color: var(--white);
   font-weight: 600;
   padding: 1.8rem;
   border: none;
   font-size: 1.5rem;
}

.table-events .table tbody tr {
   transition: var(--transition);
}

.table-events .table tbody tr:hover {
   background: rgba(26, 54, 93, 0.05);
}

.table-events .table tbody th,
.table-events .table tbody td {
   padding: 1.5rem;
   vertical-align: middle;
   border-color: rgba(0, 0, 0, 0.05);
   color: var(--dark-gray);
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 1200px) {
   html {
      font-size: 58%;
   }
   
   section {
      padding: 6rem 4%;
   }
   
   .collapse {
      font-size: 1.4rem;
      flex-direction: row-reverse;
   }
}

@media (max-width: 991px) {
   html {
      font-size: 55%;
   }
   
   .navbar-brand.logo {
      font-size: 1.4rem;
   }
   
   .navbar-brand.logo span {
      font-size: 1.6rem;
   }
   
   .about {
      flex-direction: column;
   }
   
   .py-5 .row {
      flex-direction: column;
   }
   
   #where-toGo .row {
      flex-direction: column-reverse;
   }
   
   .home .slide .content h3 {
      font-size: 15vw;
   }
}

@media (max-width: 768px) {
   html {
      font-size: 52%;
   }
   
   section {
      padding: 5rem 3%;
   }
   
   #menu-btn {
      display: inline-block;
   }
   
   .navbar .container {
      padding: 0 1.5rem;
   }
   
   #mainMenu {
      font-size: 1.5rem;
   }
   
   .fa-times {
      transform: rotate(180deg);
   }
   
   .navbar-nav {
      padding: 2rem 0;
      gap: 0;
   }
   
   .navbar-nav .nav-link {
      padding: 1.2rem 1.5rem !important;
      border-radius: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
   
   .header .navbar {
      position: absolute;
      top: 99%;
      left: 0;
      right: 0;
      background-color: var(--white);
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }
   
   .home .slide .content h3 {
      font-size: 3.5rem;
   }
   
   .heading h3 {
      font-size: 3rem;
   }
   
   .py-5 h2 {
      font-size: 2.4rem;
      text-align: center;
   }
   
   .order form {
      padding: 2.5rem;
   }
   
   .order form .box-container {
      grid-template-columns: 1fr;
   }
   
   .footer .icons-container {
      grid-template-columns: 1fr;
   }
   
   .card-group {
      flex-direction: column;
   }
   
   .card-group .card {
      max-width: 100%;
   }
   
   .table-events {
      overflow-x: auto;
   }
   
   .table-events .table {
      min-width: 700px;
   }
   
   .swiper-button-next,
   .swiper-button-prev {
      top: initial;
      bottom: 1rem;
      display: none;
   }
   
   .menu .slide .box-container .box {
      flex-flow: column;
      text-align: center;
   }
}

@media (max-width: 480px) {
   html {
      font-size: 50%;
   }
   
   .navbar-brand.logo {
      font-size: 1.2rem;
   }
   
   .navbar-brand.logo span {
      font-size: 1.4rem;
   }
   
   .home .slide .content p {
      font-size: 1.6rem;
   }
   
   .home .slide .content h3 {
      font-size: 2.8rem;
   }
   
   .about .text-center img {
      width: 80px;
      height: 80px;
   }
   
   .about h4 {
      font-size: 1.8rem;
   }
   
   .py-5 img {
      margin-bottom: 2rem;
   }
   
   .order form .box-container .box .inputBox iframe {
      display: none;
   }
   
   .doc h3 {
      font-size: 2.5rem;
   }
   
   .doc li a {
      font-size: 1.5rem;
   }
}

@media (max-width: 390px) {
   .logo {
      font-size: 1rem;
   }
   
   .logo span {
      font-size: 1.2rem;
   }
   
   .home .slide .content p {
      font-size: 1.4rem;
   }
   
   iframe {
      display: none;
   }
}

@media (max-width: 360px) {
   .navbar-brand.logo {
      font-size: 1rem;
   }
   
   .navbar-brand.logo span {
      font-size: 1.2rem;
   }
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

@keyframes slideInLeft {
   from {
      opacity: 0;
      transform: translateX(-50px);
   }
   to {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes slideInRight {
   from {
      opacity: 0;
      transform: translateX(50px);
   }
   to {
      opacity: 1;
      transform: translateX(0);
   }
}

/* Smooth scroll behavior for all browsers */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
   
   html {
      scroll-behavior: auto;
   }
}

/* Print styles */
@media print {
   .navbar,
   .swiper-button-next,
   .swiper-button-prev,
   .footer .share {
      display: none !important;
   }
   
   body {
      font-size: 12pt;
   }
   
   section {
      padding: 2rem;
   }
}