/* fonts */
@import "./fonts.css";

/* ============================================
   TROPICAL LAND ZOO - MODERN DESIGN SYSTEM
   Colors: #03A696 (Tropical Teal) | #BF2431 (Wild Red) 
          #F2A20C (Sunny Orange) | #F2F2F2 (Soft Gray)
   ============================================ */

/* Base Styles */
html, body{ 
    direction: rtl; 
    text-align: right; 
    font-family: 'JFFlat-Regular', 'Tajawal', sans-serif; 
    color: #2c3e50; 
    background: linear-gradient(135deg, #e8f5f3 0%, #f0f9f7 50%, #fef4e6 100%); 
    min-height: 100%; 
    line-height: 1.6; 
    scroll-behavior: smooth;
    overflow-x: hidden;
    position: relative;
}

body::before{
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(3, 166, 150, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(242, 162, 12, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(191, 36, 49, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

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

a{
    color: #03A696; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

a:hover{
    text-decoration: none; 
    color: #BF2431;
    transform: translateY(-1px);
}

/* Enhanced Section Titles */
h3.section-title{
    padding: 2rem 0; 
    margin-bottom: 2rem; 
    text-align: center;
    position: relative;
}

h3.section-title small{
    display: block; 
    font-size: 1.1rem; 
    font-weight: 500; 
    line-height: 1.8; 
    color: #F2A20C;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: fadeInDown 0.8s ease;
}

h3.section-title span{
    display: block; 
    font-weight: 900; 
    font-size: 3.2rem; 
    line-height: 1.2; 
    color: #03A696;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.12);
    animation: fadeInUp 0.8s ease;
    position: relative;
    letter-spacing: -1px;
}

h3.section-title span::after{
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #F2A20C 0%, #03A696 100%);
    margin: 1rem auto 0;
    border-radius: 2px;
}

.container-sm{max-width: 600px;}

.underline{
    text-decoration-color: #03A696; 
    text-decoration-line: underline; 
    text-decoration-thickness: 4px; 
    text-underline-offset: 8px;
    margin-bottom: 15px;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Float Animation for Interactive Elements */
@keyframes float {
    0%, 100% {transform: translateY(0px);}
    50% {transform: translateY(-10px);}
}

.animations{
    animation: float 3s ease-in-out infinite;
}

/* Pulse Animation */
@keyframes pulse {
    0%, 100% {transform: scale(1);}
    50% {transform: scale(1.05);}
}

/* Modern Scrollbar - Zoo Theme */
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #03A696 0%, #BF2431 50%, #F2A20C 100%); 
    border-radius: 10px;
    box-shadow: 
        inset 0 0 6px rgba(0,0,0,0.2),
        0 0 10px rgba(3, 166, 150, 0.3);
}
::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #f1f1f1 0%, #e8f5f3 100%);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(180deg, #F2A20C 0%, #BF2431 50%, #03A696 100%);
    box-shadow: 
        inset 0 0 6px rgba(0,0,0,0.3),
        0 0 15px rgba(242, 162, 12, 0.5);
}
::selection { 
    background: linear-gradient(135deg, #F2A20C 0%, #BF2431 100%);
    color: #fff;
}

/* Form Elements - Modern Zoo Design */
button, input, optgroup, select, textarea {
    border-radius: 15px !important;
    font-family: 'JFFlat-Regular', sans-serif;
}

input[type=radio] {
    display: none !important;
    border: 0; 
    background: #F2F2F2; 
    border-radius: 50%;
    height: 14px;
    width: 14px;
    appearance: none; 
    -webkit-appearance: none; 
    cursor: pointer;
}
input[type=radio]:checked {
    box-shadow: inset 0 0 10px 20px #03A696;
}

input[type=checkbox] {
    border: 2px solid #ddd; 
    background: #fff; 
    border-radius: 6px;
    height: 20px;
    width: 20px;
    appearance: none; 
    -webkit-appearance: none; 
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
input[type=checkbox]:checked {
    background: #03A696;
    border-color: #03A696;
    box-shadow: 0 3px 8px rgba(3, 166, 150, 0.3);
}
input[type=checkbox]:checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 14px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Quantity Input Styling */
input{
    border: 2px solid #e0e0e0;
    box-sizing: border-box;
    margin: 0;
    outline: none;
    padding: 12px 15px;
    transition: all 0.3s ease;
}
input:focus {
    border-color: #03A696;
    box-shadow: 0 0 0 3px rgba(3, 166, 150, 0.1);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none;
}

.input-group .button-minus,
.input-group .button-plus{
    font-weight: 700;
    height: 44px;
    padding: 0;
    width: 44px;
    position: relative;
    background: linear-gradient(135deg, #03A696 0%, #027d73 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.input-group .button-minus:hover,
.input-group .button-plus:hover{
    background: linear-gradient(135deg, #F2A20C 0%, #d89000 100%);
    color: #fff;
    box-shadow: 
        0 20px 45px rgba(242, 162, 12, 0.45),
        0 10px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: #F2A20C;
}
.input-group .quantity-field{
    position: relative;
    height: 44px;
    left: -6px;
    text-align: center;
    width: 70px;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 5px;
    resize: vertical;
    border: 2px solid #03A696;
}
.button-plus{left: -13px;}

/* File Upload Styling */
input[type=file]{
    background: #fff;
    border: 2px dashed #03A696;
    font-size: 11px;
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}
input[type=file]:hover{
    cursor: pointer;
    border-color: #BF2431;
    background: #f8f9fa;
}
input[type=file]::before{
    float: right;
    content: "تحميل أو تغيير الملف : ";
    color: #03A696;
    font-weight: 600;
}
input[type=file]::file-selector-button{
    display: none;
}

/* Modern Button System */
.btn{
    border-radius: 30px; 
    border: none; 
    font-size: 1.05rem;
    font-weight: 600;
    border-width: 3px;
    box-shadow: 
        0 8px 25px rgba(3, 166, 150, 0.3),
        0 3px 10px rgba(3, 166, 150, 0.15),
        inset 0 -3px 0 rgba(0, 0, 0, 0.1);
    padding: 0.7rem 2.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}


.btn-info{
    color: #fff !important;
    background: linear-gradient(135deg, #03A696 0%, #02958a 40%, #027d73 100%);
    border-color: #03A696;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.8rem 2.2rem;
    letter-spacing: 0.2px;
}
.btn-info:hover{
    background: linear-gradient(135deg, #F2A20C 0%, #d89000 100%);
    color: #fff;
    box-shadow: 
        0 20px 45px rgba(242, 162, 12, 0.45),
        0 10px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: #F2A20C;
}

.btn-info:active{
    transform: translateY(-2px) scale(1.02);
}

.btn-primary{
    background: linear-gradient(135deg, #BF2431 0%, #a82232 40%, #a01f2a 100%);
    border-color: #BF2431;
    color: #fff;
}
.btn-primary:hover{
    background: linear-gradient(135deg, #a01f2a 0%, #851a23 100%);
    border-color: #BF2431;
    color: #fff;
    box-shadow: 
        0 12px 35px rgba(191, 36, 49, 0.5),
        0 5px 15px rgba(191, 36, 49, 0.3),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2),
        0 0 25px rgba(191, 36, 49, 0.3);
    transform: translateY(-3px);
}

.btn-outline-primary{
    color: #F2A20C !important; 
    background: linear-gradient(135deg, #fff 0%, #fffbf5 100%);
    border: 3px solid #F2A20C;
    box-shadow: 
        0 6px 20px rgba(242, 162, 12, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.btn-outline-primary:hover{
    color: #fff !important;
    background: linear-gradient(135deg, #F2A20C 0%, #e89d0b 40%, #d98f0a 100%);
    box-shadow: 
        0 12px 35px rgba(242, 162, 12, 0.5),
        0 5px 15px rgba(242, 162, 12, 0.3),
        inset 0 -3px 0 rgba(0, 0, 0, 0.15),
        0 0 25px rgba(242, 162, 12, 0.3);
    border-color: #F2A20C !important;
    transform: translateY(-3px);
}

.btn-outline-info{
    color: #03A696 !important; 
    background: linear-gradient(135deg, #fff 0%, #f5fcfb 100%);
    border: 2px solid #03A696;
    box-shadow: 
        0 6px 20px rgba(3, 166, 150, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.btn-outline-info:hover{
    color: #fff !important;
    background: linear-gradient(135deg, #03A696 0%, #02958a 40%, #027d73 100%);
    box-shadow: 
        0 12px 35px rgba(3, 166, 150, 0.5),
        0 5px 15px rgba(3, 166, 150, 0.3),
        inset 0 -3px 0 rgba(0, 0, 0, 0.15),
        0 0 25px rgba(3, 166, 150, 0.3);
    border-color: #03A696 !important;
}
.custom-control{padding-left: 0; padding-right: 1.5rem; margin-bottom: 3rem;}
.custom-control-label::after{left: inherit; right: -1.5rem;}
.custom-control-label::before{left: inherit; right: -1.5rem;}
.form-control{
    margin-bottom: 2rem;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}
.form-control:focus{
    border-color: #03A696;
    box-shadow: 0 0 0 3px rgba(3, 166, 150, 0.1);
}

/* Modern Navigation Bar */
.navbar {
    padding: 1rem 0.5rem;
    transition: all 0.3s ease;
}
.navbar .logo {
    width: 4%;
    transition: all 0.3s ease;
}
.navbar .logo img{
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
}
.navbar .navbar-nav .nav-link {
    color: #03A696; 
    font-size: 1.1rem; 
    position: relative; 
    font-weight: 600;
    padding: 0.5rem 1rem;
    margin: 0 0.2rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.navbar .navbar-nav .nav-link:hover {
    color: #F2A20C;
    text-decoration: none;
    transform: translateY(-2px);
}
.navbar .navbar-nav .nav-link:hover::after {
    width: 80%;
}

/* Enhanced Header */
#header{
    margin: 0.5rem;
    border: none;
    display: flex; 
    justify-content: space-between; 
    padding: 0.3rem 0; 
    position: fixed; 
    top: 0; 
    z-index: 999; 
    width: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#header .container{
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    padding-right: 15px; 
    padding-left: 15px;
}
#header.scrolled .container{
    background: rgba(255, 255, 255, 0.98); 
    border-radius: 50px; 
    box-shadow: 
        0 15px 45px rgba(3, 166, 150, 0.15),
        0 5px 20px rgba(3, 166, 150, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 0 30px rgba(3, 166, 150, 0.08);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(3, 166, 150, 0.1);
}
#header a{
    display: inline-block; 
    margin-left: 0.3rem; 
    margin-right: 0.3rem; 
    font-family: JFFlat-Regular; 
    color: #03A696;
    font-weight: 600;
    transition: all 0.3s ease;
}
#header a:hover{
    color: #BF2431;
}
.header-transparent{
    background-color: transparent;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999;
}
#header ul{
    list-style: none; 
    padding: 0; 
    display: flex; 
    align-items: center;
    justify-content: center;
}
#header li{
    display: inline;
    display: flex;
    align-items: center;
}
.navbar-toggler{
    border: 2px solid #03A696;
    border-radius: 12px;
    padding: 0.5rem 0.8rem;
}
.navbar-toggler i{
    color: #03A696;
    font-size: 1.2rem;
}

/* Navbar Buttons - Smaller Size */
.navbar-buttons .btn{
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    white-space: nowrap;
    margin-left: 0.4rem;
}
.navbar-buttons .btn i{
    font-size: 0.75rem;
}

/* Mobile Buy Ticket Button */
.mobile-buy-ticket{
    display: none !important;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
    margin-left: auto;
    margin-right: 0.5rem;
}
.mobile-buy-ticket i{
    font-size: 0.75rem;
}

/* Modern Banner/Carousel Section */
#banners .carousel-inner{
    height: 100%;
    width: 100%;
    background-position: center center;
    background-size: cover;
    text-align: center;
    border-radius: 0 0 40px 40px;
    overflow: hidden;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.15),
        0 10px 25px rgba(3, 166, 150, 0.1),
        inset 0 -5px 20px rgba(0, 0, 0, 0.05);
}
#banners .carousel-item{ 
    padding: 25%; 
    text-align: center;
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    color: #fff;
    max-width: 100%;
    height: auto;
    position: relative;
}
#banners .carousel-item::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, rgba(3, 166, 150, 0.4) 0%, rgba(242, 162, 12, 0.3) 50%, rgba(191, 36, 49, 0.4) 100%),
        radial-gradient(circle at 30% 40%, rgba(3, 166, 150, 0.2) 0%, transparent 60%);
    z-index: 1;
}
#banners .carousel-item .wrapper{
    margin-right: 40%;
    position: relative;
    z-index: 2;
}
#banners .carousel-item .wrapper h2{
    font-size: 3.5rem; 
    font-weight: 800; 
    color: #fff;
    text-shadow: 
        4px 4px 15px rgba(0,0,0,0.4),
        2px 2px 8px rgba(3, 166, 150, 0.3),
        0 0 30px rgba(242, 162, 12, 0.2);
    animation: fadeInUp 1s ease;
}

/* Tickets Section - Enhanced */
section.tickets{
    padding: 4rem 0; 
    margin-top: 4%; 
    background: 
        linear-gradient(135deg, #e8f5f3 0%, rgba(3, 166, 150, 0.08) 50%, rgba(242, 162, 12, 0.05) 100%),
        radial-gradient(circle at 80% 20%, rgba(242, 162, 12, 0.1) 0%, transparent 50%);
}
section.tickets .wrapper{
    text-align: center;
    color: #fff;
    border-radius: 2.5rem; 
    position: relative;
    box-shadow: 
        0 25px 60px rgba(3, 166, 150, 0.3),
        0 15px 35px rgba(3, 166, 150, 0.2),
        inset 0 -5px 15px rgba(0, 0, 0, 0.1),
        0 0 40px rgba(3, 166, 150, 0.15);
    background: linear-gradient(135deg, #03A696 0%, #02958a 40%, #027d73 100%);
    background-image: url('/images/bg-ticket.png');
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: all 0.4s ease;
    border: 2px solid rgba(255, 255, 255, 0.1);
}
section.tickets .wrapper::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(242, 162, 12, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(191, 36, 49, 0.15) 0%, transparent 50%);
    z-index: 0;
}
section.tickets .wrapper > *{
    position: relative;
    z-index: 1;
}
section.tickets .wrapper:hover{
    transform: translateY(-8px);
    box-shadow: 
        0 30px 70px rgba(3, 166, 150, 0.4),
        0 20px 40px rgba(3, 166, 150, 0.25),
        inset 0 -5px 20px rgba(0, 0, 0, 0.15),
        0 0 50px rgba(3, 166, 150, 0.2);
}
section.tickets h4{
    font-size: 1.8rem; 
    font-weight: 700; 
    margin-top: 8%;
    color: #fff;
    text-shadow: 
        3px 3px 12px rgba(0,0,0,0.3),
        0 0 20px rgba(242, 162, 12, 0.3);
}
section.tickets .step{padding-right: 3rem;}
section.tickets .number{
    background: linear-gradient(135deg, #F2A20C 0%, #e89d0b 40%, #d98f0a 100%); 
    color: #fff; 
    display: inline-block;
    width: 75px; 
    height: 75px; 
    border-radius: 50%; 
    text-align: center;
    z-index: 10;
    box-shadow: 
        0 12px 30px rgba(242, 162, 12, 0.5),
        0 6px 15px rgba(242, 162, 12, 0.3),
        inset 0 -3px 0 rgba(0, 0, 0, 0.2),
        0 0 25px rgba(242, 162, 12, 0.3);
    transition: all 0.3s ease;
    border: 3px solid rgba(255, 255, 255, 0.3);
}
section.tickets .number:hover{
    transform: scale(1.15) rotate(10deg);
    box-shadow: 
        0 15px 40px rgba(242, 162, 12, 0.6),
        0 8px 20px rgba(242, 162, 12, 0.4),
        inset 0 -4px 0 rgba(0, 0, 0, 0.3),
        0 0 35px rgba(242, 162, 12, 0.5);
}
section.tickets .number i{
    font-size: 2.3rem;
    margin-top: 1.3rem;
    text-align: center;
}
section.tickets .star{padding: 2.5rem;}
section.tickets .star h6{
    color: #fff;
    margin-top: 15px;
    text-align: right;
    font-weight: 600;
    font-size: 1.1rem;
}
section.tickets .star .progress{
    background: rgba(255, 255, 255, 0.15);
    margin-top: 25px;
    height: 12px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
section.tickets .star .progress-bar{
    background: linear-gradient(90deg, #BF2431 0%, #F2A20C 50%, #BF2431 100%);
    box-shadow: 
        0 2px 10px rgba(242, 162, 12, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}
section.tickets .star .progress-bar::after{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}
@keyframes shimmer {
    to {left: 100%;}
}
section.tickets .star .rating{
    unicode-bidi: bidi-override;
    color: #F2A20C;
    font-size: 2rem;
    text-align: right;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
}
section.tickets .star .rating > span{
    display: inline-block;
    position: relative;
    width: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
section.tickets .star .rating > span:hover{
    transform: scale(1.2);
}
section.tickets .star .rating > span:before,
.rating > span:hover ~ span:before{
    content: "\2605";
    position: absolute;
}

/* About Section - Modern Design */
section.about{
    padding: 5rem 0; 
    background: linear-gradient(135deg, 
        #e8f8f5 0%, 
        #fef5e7 50%, 
        #fdecea 100%);
    position: relative;
}
section.about::before{
    content: '🦖';
    position: absolute;
    top: 15%;
    right: 5%;
    font-size: 8.5rem;
    opacity: 0.1;
    pointer-events: none;
    transform: rotate(35deg);
    animation: float 4s ease-in-out infinite;
}
section.about::after{
    content: '🍃';
    position: absolute;
    bottom: 10%;
    left: 4%;
    font-size: 9rem;
    opacity: 0.08;
    pointer-events: none;
    transform: rotate(-40deg);
    animation: float 5s ease-in-out infinite;
    z-index: 0;
}
section.about .container{
    position: relative;
    z-index: 1;
}
section.about h3{
    color: #03A696;
}
section.about p{
    color: #2c3e50;
    font-size: 1.25rem;
    text-align: center;
    line-height: 1.9;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
section.about .map{
    height: 35rem;
    position: relative;
    border-radius: 2.5rem;
    overflow: hidden;
    box-shadow: 
        0 15px 35px rgba(3, 166, 150, 0.3),
        0 5px 15px rgba(191, 36, 49, 0.2),
        inset 0 -3px 8px rgba(0, 0, 0, 0.1),
        0 0 35px rgba(242, 162, 12, 0.15);
    transition: all 0.4s ease;
}
section.about .map:hover{
    transform: scale(1.02);
    box-shadow: 
        0 20px 50px rgba(3, 166, 150, 0.4),
        0 8px 20px rgba(191, 36, 49, 0.25),
        inset 0 -3px 10px rgba(0, 0, 0, 0.15),
        0 0 50px rgba(242, 162, 12, 0.2);
}
section.about .map iframe{
    height: 100%;
    width: 100%;
    border-radius: 2.5rem;
    border: none;
}

/* Info Tile Style - Modern Clean Design */
.info-tile{
    background: #ffffff;
    border-radius: 20px;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    box-shadow: 
        0 5px 20px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.04);
    border: 2px solid #f5f5f5;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.info-tile:hover::before{
    left: 100%;
}
.info-tile:hover{
    transform: translateY(-8px);
    box-shadow: 
        0 15px 35px rgba(3, 166, 150, 0.12),
        0 5px 15px rgba(0, 0, 0, 0.08);
    border-color: rgba(3, 166, 150, 0.2);
}
.tile-icon-bg{
    width: 90px;
    height: 90px;
    border-radius: 18px;
    background: linear-gradient(135deg, #03A696 0%, #02988b 50%, #027d73 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow: 
        0 10px 25px rgba(3, 166, 150, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}
.tile-icon-bg::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.info-tile:hover .tile-icon-bg{
    transform: scale(1.08);
    box-shadow: 
        0 15px 35px rgba(3, 166, 150, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.info-tile:hover .tile-icon-bg::after{
    opacity: 1;
}
.tile-icon-bg i{
    color: #ffffff;
    font-size: 2.5rem;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.tile-content{
    flex: 1;
    text-align: right;
}
.tile-label{
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #03A696;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.8rem;
    opacity: 0.8;
}
.tile-value{
    font-size: 1.05rem;
    line-height: 1.7;
    color: #1a252f;
    margin: 0;
}

/* Responsive for Info Tile */
@media (max-width: 991px){
    .info-tile{
        padding: 2rem;
        gap: 1.5rem;
    }
    .tile-icon-bg{
        width: 80px;
        height: 80px;
    }
    .tile-icon-bg i{
        font-size: 2.2rem;
    }
    .tile-value{
        font-size: 1.15rem;
    }
}
@media (max-width: 767px){
    .info-tile{
        padding: 1.8rem;
        flex-direction: column;
        text-align: center;
    }
    .tile-icon-bg{
        width: 75px;
        height: 75px;
    }
    .tile-icon-bg i{
        font-size: 2rem;
    }
    .tile-content{
        text-align: center;
    }
    .tile-label{
        font-size: 0.85rem;
        margin-bottom: 0.6rem;
    }
    .tile-value{
        font-size: 1.1rem;
    }
}

/* Featured Animals Gallery Section */
section.featured-animals{
    padding: 5rem 0;
    background: linear-gradient(180deg, #F2F2F2 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}
section.featured-animals::before{
    content: '🦜';
    position: absolute;
    top: 10%;
    right: 8%;
    font-size: 7rem;
    opacity: 0.15;
    pointer-events: none;
    transform: rotate(-25deg);
    animation: float 4s ease-in-out infinite;
}
section.featured-animals::after{
    content: '🌿';
    position: absolute;
    bottom: 15%;
    left: 6%;
    font-size: 6.5rem;
    opacity: 0.12;
    pointer-events: none;
    transform: rotate(15deg);
    animation: float 5s ease-in-out infinite;
    z-index: 0;
}
section.featured-animals .section-title{
    margin-bottom: 3.5rem;
}
section.featured-animals .animals-grid{
    position: relative;
    z-index: 1;
}

/* Animal Image Styling */
.animal-image{
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #03A696 0%, #F2A20C 100%);
    border-radius: 25px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.08),
        0 3px 10px rgba(3, 166, 150, 0.1);
}
.animal-image:hover{
    transform: translateY(-12px) scale(1.02);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.15),
        0 10px 25px rgba(3, 166, 150, 0.25),
        0 0 40px rgba(242, 162, 12, 0.2);
}
.animal-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(0.95);
}
.animal-image:hover img{
    transform: scale(1.15);
    filter: brightness(1.05);
}
.animal-image::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.animal-title{
    text-align: center;
    font-size: 1.4rem;
    color: #1a252f;
    line-height: 1.4;
    margin-bottom: 1rem;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.animal-desc{
    text-align: center;
    font-size: 1.4rem;
    color: #1a252f;
    line-height: 1.4;
    margin-bottom: 1rem;
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* Responsive Design */
@media (max-width: 991px) {
    section.featured-animals{
        padding: 4rem 0;
    }
    .animal-image{
        height: 240px;
    }
}

@media (max-width: 767px) {
    section.featured-animals{
        padding: 3rem 0;
    }
    .animal-card{
        margin-bottom: 1.5rem;
    }
    .animal-image{
        height: 220px;
    }
    .animal-content{
        padding: 1.5rem 1.2rem;
    }
}

/* Pricing & Packages Section */
section.pricing{
    padding: 5rem 0;
    background: 
        linear-gradient(135deg, 
            #d5f4e6 0%, 
            #fff8e1 35%, 
            #fce4ec 70%, 
            #e1f5fe 100%);
    position: relative;
    overflow: hidden;
}
section.pricing::before{
    content: '🦩';
    position: absolute;
    top: 15%;
    right: 5%;
    font-size: 8.5rem;
    opacity: 0.1;
    pointer-events: none;
    transform: rotate(35deg);
    animation: float 4s ease-in-out infinite;
}
section.pricing::after{
    content: '🌴';
    position: absolute;
    bottom: 10%;
    left: 4%;
    font-size: 9rem;
    opacity: 0.08;
    pointer-events: none;
    transform: rotate(-40deg);
    animation: float 5s ease-in-out infinite;
    z-index: 0;
}
@keyframes pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}
section.pricing .container{
    position: relative;
    z-index: 1;
}
section.pricing .section-title{
    margin-bottom: 4rem;
}

/* Pricing Card */
.pricing-card{
    background: #ffffff;
    border-radius: 30px;
    padding: 2.5rem 2rem;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.08),
        0 5px 15px rgba(3, 166, 150, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.9);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pricing-card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    padding: 3px;
    background: linear-gradient(135deg, 
        rgba(3, 166, 150, 0.4) 0%, 
        rgba(242, 162, 12, 0.3) 50%, 
        rgba(191, 36, 49, 0.3) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.pricing-card:hover{
    transform: translateY(-15px) scale(1.03);
    box-shadow: 
        0 30px 70px rgba(0, 0, 0, 0.15),
        0 15px 35px rgba(3, 166, 150, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 1),
        0 0 50px rgba(242, 162, 12, 0.2);
}
.pricing-card:hover::before{
    opacity: 1;
}

/* Kids Pricing Card Variant */
.pricing-card.kids{
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.08),
        0 5px 15px rgba(242, 162, 12, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.9);
}
.pricing-card.kids:hover{
    box-shadow: 
        0 30px 70px rgba(0, 0, 0, 0.15),
        0 15px 35px rgba(242, 162, 12, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 1),
        0 0 50px rgba(3, 166, 150, 0.2);
}

/* Pricing Badge */
.pricing-badge{
    position: relative;
    margin-top: 1.5rem;
    background: linear-gradient(135deg, #03A696 0%, #02887a 100%);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 
        0 6px 20px rgba(3, 166, 150, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: badgeFloat 3s ease-in-out infinite;
}
.pricing-badge i{
    font-size: 0.9rem;
}
.pricing-badge.kids-badge{
    background: linear-gradient(135deg, #F2A20C 0%, #e09408 100%);
    box-shadow: 
        0 6px 20px rgba(242, 162, 12, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Pricing Icon */
.pricing-icon{
    width: 90px;
    height: 90px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #03A696 0%, #02887a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 10px 30px rgba(3, 166, 150, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.1),
        inset 0 -5px 15px rgba(0, 0, 0, 0.2),
        inset 0 3px 10px rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
}
.pricing-icon i{
    font-size: 2.8rem;
    color: #ffffff;
    transition: all 0.4s ease;
}
.pricing-card:hover .pricing-icon{
    transform: scale(1.1) rotate(5deg);
    box-shadow: 
        0 15px 40px rgba(3, 166, 150, 0.4),
        0 5px 15px rgba(0, 0, 0, 0.15),
        inset 0 -5px 15px rgba(0, 0, 0, 0.25),
        inset 0 3px 10px rgba(255, 255, 255, 0.3);
}
.pricing-card.kids .pricing-icon{
    background: linear-gradient(135deg, #F2A20C 0%, #e09408 100%);
    box-shadow: 
        0 10px 30px rgba(242, 162, 12, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.1),
        inset 0 -5px 15px rgba(0, 0, 0, 0.2),
        inset 0 3px 10px rgba(255, 255, 255, 0.2);
}
.pricing-card.kids:hover .pricing-icon{
    box-shadow: 
        0 15px 40px rgba(242, 162, 12, 0.4),
        0 5px 15px rgba(0, 0, 0, 0.15),
        inset 0 -5px 15px rgba(0, 0, 0, 0.25),
        inset 0 3px 10px rgba(255, 255, 255, 0.3);
}

/* Pricing Title & Description */
.pricing-title{
    font-size: 1.8rem;
    font-weight: 700;
    color: #2C3E50;
    text-align: center;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #03A696 0%, #BF2431 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pricing-card.kids .pricing-title{
    background: linear-gradient(135deg, #F2A20C 0%, #03A696 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pricing-desc{
    font-size: 1.05rem;
    color: #546e7a;
    text-align: center;
    margin-bottom: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
}

/* Pricing Amount */
.pricing-amount{
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #F2F2F2 0%, #ffffff 100%);
    border-radius: 20px;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.05),
        inset 0 2px 5px rgba(3, 166, 150, 0.1);
    position: relative;
    overflow: hidden;
}
.pricing-card:hover .pricing-amount::before{
    left: 100%;
}
.pricing-amount .currency{
    font-size: 1.2rem;
    color: #757575;
    margin-left: 5px;
    vertical-align: top;
}
.pricing-amount .price{
    font-size: 3.5rem;
    font-weight: 800;
    color: #7F8C8D;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(3, 166, 150, 0.2);
}
.pricing-card.kids .pricing-amount .price{
    color: #7F8C8D;
    text-shadow: 2px 2px 4px rgba(242, 162, 12, 0.2);
}
.pricing-amount .period{
    font-size: 1rem;
    color: #7F8C8D;
    margin-right: 5px;
}

/* Pricing Features */
.pricing-features{
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    flex-grow: 1;
}
.pricing-features li{
    padding: 0.9rem 0;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}
.pricing-features li:last-child{
    border-bottom: none;
}
.pricing-features li i{
    color: #03A696;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.pricing-card.kids .pricing-features li i{
    color: #F2A20C;
}
.pricing-features li span{
    font-size: 0.95rem;
    color: #2C3E50;
    line-height: 1.5;
}
.pricing-features li:hover{
    padding-right: 10px;
    background: linear-gradient(90deg, 
        rgba(3, 166, 150, 0.05) 0%, 
        transparent 100%);
}

/* Pricing Button */
.btn-pricing{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 35px;
    background: linear-gradient(135deg, #03A696 0%, #02887a 100%);
    color: #ffffff;
    border: none;
    border-radius: 28px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 25px rgba(3, 166, 150, 0.35),
        0 3px 10px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}
.btn-pricing::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}
.btn-pricing:hover{
    transform: translateY(-4px);
    box-shadow: 
        0 15px 40px rgba(3, 166, 150, 0.45),
        0 5px 15px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 30px rgba(242, 162, 12, 0.3);
    background: linear-gradient(135deg, #04b8a8 0%, #03A696 100%);
    color: #ffffff;
    text-decoration: none;
}
.btn-pricing:hover::before{
    width: 400px;
    height: 400px;
}
.btn-pricing i{
    transition: transform 0.3s ease;
}
.btn-pricing:hover i{
    transform: translateX(-5px);
}
.pricing-card.kids .btn-pricing{
    background: linear-gradient(135deg, #F2A20C 0%, #e09408 100%);
    box-shadow: 
        0 8px 25px rgba(242, 162, 12, 0.35),
        0 3px 10px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.pricing-card.kids .btn-pricing:hover{
    background: linear-gradient(135deg, #ffb520 0%, #F2A20C 100%);
    box-shadow: 
        0 15px 40px rgba(242, 162, 12, 0.45),
        0 5px 15px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 30px rgba(3, 166, 150, 0.3);
}

/* Pricing Note */
.pricing-note{
    text-align: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, 
        rgba(3, 166, 150, 0.08) 0%, 
        rgba(242, 162, 12, 0.06) 100%);
    border-radius: 20px;
    border-right: 4px solid #03A696;
    color: #2C3E50;
    font-size: 1rem;
    line-height: 1.6;
    box-shadow: 
        0 5px 20px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.pricing-note i{
    color: #03A696;
    font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 991px) {
    section.pricing{
        padding: 4rem 0;
    }
    .pricing-card{
        margin-bottom: 2rem;
    }
    .pricing-icon{
        width: 80px;
        height: 80px;
    }
    .pricing-icon i{
        font-size: 2.4rem;
    }
    .pricing-amount .price{
        font-size: 3rem;
    }
}

@media (max-width: 767px) {
    section.pricing{
        padding: 3rem 0;
    }
    .pricing-card{
        padding: 2rem 1.5rem;
    }
    .pricing-title{
        font-size: 1.5rem;
    }
    .pricing-badge{
        margin-top: 1.2rem;
        padding: 8px 16px;
        font-size: 0.8rem;
        justify-content: center;
        text-align: center;
    }
    .pricing-amount{
        padding: 1.2rem;
    }
    .pricing-amount .price{
        font-size: 2.5rem;
    }
    .pricing-features li{
        font-size: 0.9rem;
    }
    .btn-pricing{
        padding: 12px 28px;
        font-size: 1rem;
    }
    .pricing-note{
        padding: 1.2rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* Testimonials Section */
section.testimonials{
    padding: 5rem 0;
    background: 
        linear-gradient(180deg, #F2F2F2 0%, #ffffff 50%, #F2F2F2 100%);
    position: relative;
    overflow: hidden;
}
section.testimonials::before{
    content: '🦋';
    position: absolute;
    top: 15%;
    right: 5%;
    font-size: 8.5rem;
    opacity: 0.1;
    pointer-events: none;
    transform: rotate(35deg);
    animation: float 4s ease-in-out infinite;
}
section.testimonials::after{
    content: '🌺';
    position: absolute;
    bottom: 10%;
    left: 4%;
    font-size: 9rem;
    opacity: 0.08;
    pointer-events: none;
    transform: rotate(-40deg);
    animation: float 5s ease-in-out infinite;
    z-index: 0;
}
section.testimonials .section-title{
    margin-bottom: 4rem;
}

/* Testimonials Carousel */
.testimonials-carousel{
    position: relative;
    z-index: 1;
    padding: 2rem 0;
}

/* Testimonial Card */
.testimonial-card{
    background: #ffffff;
    border-radius: 30px;
    padding: 3rem 2.5rem;
    position: relative;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.1),
        0 8px 20px rgba(3, 166, 150, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    padding: 3px;
    background: linear-gradient(135deg, 
        rgba(3, 166, 150, 0.5) 0%, 
        rgba(242, 162, 12, 0.4) 50%, 
        rgba(191, 36, 49, 0.4) 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0.6;
    animation: borderPulse 3s ease-in-out infinite;
}

@keyframes borderPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Stars Rating */
.testimonial-card .stars{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 1.8rem;
}
.testimonial-card .stars i{
    color: #F2A20C;
    font-size: 1.4rem;
    text-shadow: 
        0 2px 4px rgba(242, 162, 12, 0.3),
        0 0 10px rgba(242, 162, 12, 0.2);
    animation: starTwinkle 2s ease-in-out infinite;
    animation-delay: calc(var(--star-index) * 0.2s);
}
.testimonial-card .stars i:nth-child(1){ --star-index: 0; }
.testimonial-card .stars i:nth-child(2){ --star-index: 1; }
.testimonial-card .stars i:nth-child(3){ --star-index: 2; }
.testimonial-card .stars i:nth-child(4){ --star-index: 3; }
.testimonial-card .stars i:nth-child(5){ --star-index: 4; }

@keyframes starTwinkle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Testimonial Text */
.testimonial-text{
    font-size: 1.25rem;
    line-height: 2;
    color: #1a252f;
    text-align: center;
    margin-bottom: 2rem;
    font-style: italic;
    position: relative;
    z-index: 1;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Quote Icon */
.quote-icon{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(3, 166, 150, 0.08) 0%, rgba(242, 162, 12, 0.05) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}
.quote-icon i{
    font-size: 2rem;
    color: #03A696;
    opacity: 0.4;
}

/* Testimonial Author */
.testimonial-author{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}
.author-avatar{
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #03A696 0%, #02887a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 8px 25px rgba(3, 166, 150, 0.35),
        0 3px 10px rgba(0, 0, 0, 0.1),
        inset 0 -3px 8px rgba(0, 0, 0, 0.2),
        inset 0 2px 5px rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}
.author-avatar i{
    font-size: 2rem;
    color: #ffffff;
}
.author-info{
    text-align: right;
}
.author-name{
    font-size: 1.3rem;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 0.3rem;
    background: linear-gradient(135deg, #03A696 0%, #BF2431 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.author-location{
    font-size: 0.95rem;
    color: #7F8C8D;
    display: flex;
    align-items: center;
    gap: 5px;
}
.author-location::before{
    content: '📍';
    font-size: 0.9rem;
}

/* Carousel Controls */
.testimonial-control-icon{
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #03A696 0%, #02887a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 8px 25px rgba(3, 166, 150, 0.35),
        0 3px 10px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-control-icon i{
    font-size: 1.3rem;
    color: #ffffff;
}
.carousel-control-prev,
.carousel-control-next{
    width: auto;
    opacity: 1;
}
.carousel-control-prev:hover .testimonial-control-icon,
.carousel-control-next:hover .testimonial-control-icon{
    transform: scale(1.15);
    box-shadow: 
        0 12px 35px rgba(3, 166, 150, 0.45),
        0 5px 15px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 30px rgba(242, 162, 12, 0.3);
    background: linear-gradient(135deg, #04b8a8 0%, #03A696 100%);
}

/* Carousel Indicators */
section.testimonials .carousel-indicators{
    bottom: -3rem;
    margin-bottom: 0;
}
section.testimonials .carousel-indicators li{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(3, 166, 150, 0.3);
    border: none;
    margin: 0 6px;
    transition: all 0.4s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
section.testimonials .carousel-indicators li.active{
    width: 35px;
    border-radius: 10px;
    background: linear-gradient(135deg, #03A696 0%, #F2A20C 100%);
    box-shadow: 
        0 4px 15px rgba(3, 166, 150, 0.4),
        0 0 20px rgba(242, 162, 12, 0.3);
}

/* Testimonial Stats */
.testimonial-stats{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    padding: 2rem 0;
}
.stat-item{
    text-align: center;
    transition: all 0.4s ease;
}
.stat-icon{
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #03A696 0%, #02887a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 10px 30px rgba(3, 166, 150, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.1),
        inset 0 -5px 15px rgba(0, 0, 0, 0.2),
        inset 0 3px 10px rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
}
.stat-icon i{
    font-size: 2.2rem;
    color: #ffffff;
    transition: all 0.4s ease;
}
.stat-item:hover .stat-icon{
    transform: scale(1.15) rotate(5deg);
    box-shadow: 
        0 15px 40px rgba(3, 166, 150, 0.4),
        0 5px 15px rgba(0, 0, 0, 0.15),
        inset 0 -5px 15px rgba(0, 0, 0, 0.25),
        inset 0 3px 10px rgba(255, 255, 255, 0.3),
        0 0 30px rgba(242, 162, 12, 0.3);
}
.stat-item:hover .stat-icon i{
    transform: scale(1.1);
}
.stat-number{
    font-size: 2.2rem;
    font-weight: 800;
    color: #03A696;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(3, 166, 150, 0.2);
}
.stat-label{
    font-size: 1rem;
    color: #7F8C8D;
    font-weight: 500;
}
.stat-item:nth-child(2) .stat-icon{
    background: linear-gradient(135deg, #F2A20C 0%, #e09408 100%);
    box-shadow: 
        0 10px 30px rgba(242, 162, 12, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.1),
        inset 0 -5px 15px rgba(0, 0, 0, 0.2),
        inset 0 3px 10px rgba(255, 255, 255, 0.2);
}
.stat-item:nth-child(2) .stat-number{
    color: #F2A20C;
    text-shadow: 2px 2px 4px rgba(242, 162, 12, 0.2);
}
.stat-item:nth-child(3) .stat-icon{
    background: linear-gradient(135deg, #BF2431 0%, #a01f29 100%);
    box-shadow: 
        0 10px 30px rgba(191, 36, 49, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.1),
        inset 0 -5px 15px rgba(0, 0, 0, 0.2),
        inset 0 3px 10px rgba(255, 255, 255, 0.2);
}
.stat-item:nth-child(3) .stat-number{
    color: #BF2431;
    text-shadow: 2px 2px 4px rgba(191, 36, 49, 0.2);
}

/* Responsive Design */
@media (max-width: 991px) {
    section.testimonials{
        padding: 4rem 0;
    }
    .testimonial-card{
        padding: 2.5rem 2rem;
    }
    .testimonial-text{
        font-size: 1.05rem;
    }
    .testimonial-stats{
        gap: 2rem;
    }
    .stat-icon{
        width: 70px;
        height: 70px;
    }
    .stat-icon i{
        font-size: 2rem;
    }
    .stat-number{
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    section.testimonials{
        padding: 3rem 0;
    }
    .testimonial-card{
        padding: 2rem 1.5rem;
    }
    .testimonial-card .stars{
        gap: 6px;
        margin-bottom: 1.5rem;
    }
    .testimonial-card .stars i{
        font-size: 1.2rem;
    }
    .testimonial-text{
        font-size: 0.95rem;
        line-height: 1.7;
    }
    .quote-icon{
        width: 60px;
        height: 60px;
        top: 15px;
        right: 15px;
    }
    .quote-icon i{
        font-size: 1.5rem;
    }
    .author-avatar{
        width: 60px;
        height: 60px;
    }
    .author-avatar i{
        font-size: 1.7rem;
    }
    .author-name{
        font-size: 1.1rem;
    }
    .author-location{
        font-size: 0.85rem;
    }
    .testimonial-control-icon{
        width: 45px;
        height: 45px;
    }
    .testimonial-control-icon i{
        font-size: 1.1rem;
    }
    .testimonial-stats{
        gap: 1.5rem;
    }
    .stat-icon{
        width: 60px;
        height: 60px;
    }
    .stat-icon i{
        font-size: 1.7rem;
    }
    .stat-number{
        font-size: 1.7rem;
    }
    .stat-label{
        font-size: 0.9rem;
    }
}

/* Modern Footer Design */
/* ===============================================
   FOOTER SECTION
   =============================================== */
#footer{
    padding: 5rem 0 2rem;
    background: 
        linear-gradient(135deg, #03A696 0%, #02958a 40%, #027d73 100%),
        radial-gradient(circle at 80% 20%, rgba(242, 162, 12, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(191, 36, 49, 0.1) 0%, transparent 50%);
    color: #fff; 
    font-size: 16px;
    position: relative;
    box-shadow: 
        0 -15px 40px rgba(3, 166, 150, 0.2),
        inset 0 3px 15px rgba(0, 0, 0, 0.1);
}
#footer::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 50px,
            rgba(255, 255, 255, 0.03) 50px,
            rgba(255, 255, 255, 0.03) 51px
        );
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}
#footer > *{
    position: relative;
    z-index: 1;
}

/* Footer About & Logo */
.footer-about{
    text-align: right;
    padding: auto;
}
.footer-logo{
    max-width: 180px;
    height: auto;
    transition: transform 0.5s ease;
}
.footer-logo:hover{
    transform: scale(1.05) rotate(5deg);
}
.footer-about-text{
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin: 1.5rem 0;
    text-align: justify;
}

/* Footer Social Media (in Privacy Section) */
.footer-social{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.footer-social .social-link{
    background: linear-gradient(135deg, rgba(3, 166, 150, 0.15) 0%, rgba(3, 166, 150, 0.1) 100%);
    backdrop-filter: blur(5px);
    width: 35px;
    height: 35px;
    font-size: 0.95rem;
    color: #03A696;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(3, 166, 150, 0.3);
}
.footer-social .social-link:hover{
    background: linear-gradient(135deg, #03A696 0%, #028a7c 100%);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(3, 166, 150, 0.3);
    border-color: #03A696;
}

/* Footer Sections */
.footer-section{
    text-align: right;
    padding: 0 1rem;
}
.footer-title{
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.footer-title i{
    color: #ffffff;
    font-size: 1.3rem;
}
.footer-text{
    font-size: 0.95rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
}

/* Footer Links */
.footer-links{
    text-align: right;
    padding: 0;
    margin: 0;
}
.footer-links li{
    margin: 0.8rem 0;
}
.footer-links a{
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    padding: 0.3rem 0;
}
.footer-links a:hover{
    color: #F2A20C;
    transform: translateX(5px);
}
.footer-links a i{
    transition: transform 0.3s ease;
}
.footer-links a:hover i{
    transform: scale(1.2);
}

/* Footer Divider */
.footer-divider{
    border-top: 2px solid rgba(255, 255, 255, 0.15);
    margin: 2.5rem 0 2rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Footer Legal Links */
.footer-legal{
    margin: 0;
}
.footer-legal .list-inline-item{
    font-size: 0.9rem;
    padding: 0 0.8rem;
    margin: 0.3rem 0;
    position: relative;
}
.footer-legal .list-inline-item:not(:last-child)::before{
    content: '|';
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.3);
}
.footer-legal a{
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}
.footer-legal a::after{
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    height: 2px;
    background: #F2A20C;
    transition: width 0.3s ease;
}
.footer-legal a:hover{
    color: #F2A20C;
}
.footer-legal a:hover::after{
    width: 100%;
}

/* Copyright */
#footer .copyright{
    font-size: 0.95rem;
    text-align: center;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

/* Sticky Buy Ticket Button */
.sticky-buy-btn{
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.sticky-buy-btn .btn{
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: 
        0 10px 30px rgba(3, 166, 150, 0.5),
        0 5px 15px rgba(0, 0, 0, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse-ring{
    0%{
        box-shadow: 0 8px 20px rgba(242, 162, 12, 0.3), 0 0 0 0 rgba(242, 162, 12, 0.4);
    }
    50%{
        box-shadow: 0 8px 20px rgba(242, 162, 12, 0.3), 0 0 0 10px rgba(242, 162, 12, 0);
    }
    100%{
        box-shadow: 0 8px 20px rgba(242, 162, 12, 0.3), 0 0 0 0 rgba(242, 162, 12, 0);
    }
}

/* Responsive Design */
@media (max-width: 991px) {
    #footer{
        padding: 4rem 0 2rem;
    }
    .footer-about{
        text-align: center;
        margin-bottom: 2rem;
    }
    .footer-logo{
        max-width: 160px;
    }
    .footer-social{
        justify-content: center;
    }
    .footer-section{
        text-align: center;
        margin-bottom: 2rem;
    }
    .footer-title{
        justify-content: center;
    }
    .footer-links{
        text-align: center;
    }
    .footer-links a:hover{
        transform: translateY(-3px);
    }
    .sticky-buy-btn{
        bottom: 85px;
        right: 20px;
    }
    .sticky-buy-btn .btn{
        padding: 0.75rem 1.3rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 767px) {
    #footer{
        padding: 3rem 0 1.5rem;
        font-size: 15px;
    }
    .footer-logo{
        max-width: 140px;
    }
    .footer-about-text{
        font-size: 0.9rem;
        line-height: 1.6;
        margin: 1rem 0;
    }
    .footer-social .social-link{
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
    .footer-title{
        font-size: 1.1rem;
        margin: 0 0 1rem 0;
        padding-bottom: 0.6rem;
    }
    .footer-title i{
        font-size: 1.2rem;
    }
    .footer-text{
        font-size: 0.9rem;
        line-height: 1.7;
    }
    .footer-links a{
        font-size: 0.9rem;
    }
    .footer-divider{
        margin: 2rem 0 1.5rem;
    }
    .footer-legal .list-inline-item{
        display: block;
        padding: 0;
        margin: 0.8rem 0;
    }
    .footer-legal .list-inline-item:not(:last-child)::before{
        display: none;
    }
    #footer .copyright{
        font-size: 0.85rem;
        margin-top: 1rem;
    }
    .sticky-buy-btn{
        display: none;
    }
}

/* Modern Checkout Page */
.checkout-page main{ 
    margin-top: 9rem;
    margin-bottom: 8rem;
}
.checkout-page main .wrapper{
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 251, 0.96) 100%),
        radial-gradient(circle at 80% 20%, rgba(3, 166, 150, 0.05) 0%, transparent 50%); 
    border-radius: 30px; 
    border-image: linear-gradient(135deg, #03A696 0%, #F2A20C 50%, #BF2431 100%) 1;
    border-radius: 30px;
    color: #2c3e50; 
    max-width: 900px; 
    margin: auto; 
    overflow: hidden; 
    box-shadow: 
        0 30px 70px rgba(3, 166, 150, 0.25),
        0 20px 40px rgba(3, 166, 150, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 0 50px rgba(3, 166, 150, 0.1);
}
.checkout-page main .wrapper::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 28px;
    padding: 3px;
}
.checkout-page main .wrapper img{
    border-radius: 30px 30px 0 0;
    max-height: 400px;
    object-fit: cover;
    width: 100%;
}
.checkout-page main .wrapper .price{
    font-size: 2rem; 
    color: #fff !important; 
    padding: 1.5rem 2rem;
    font-weight: 800;
    background: 
        linear-gradient(135deg, #03A696 0%, #02958a 40%, #027d73 100%),
        radial-gradient(circle at 70% 30%, rgba(242, 162, 12, 0.2) 0%, transparent 50%);
    display: inline-block;
    border-radius: 0;
    margin: 0;
    text-shadow: 
        3px 3px 10px rgba(0,0,0,0.3),
        0 0 20px rgba(3, 166, 150, 0.3);
    box-shadow: 
        inset 0 -4px 0 rgba(0, 0, 0, 0.15),
        0 4px 15px rgba(3, 166, 150, 0.3);
}
.checkout-page main .wrapper .price i{
    margin-left: 0.5rem;
    font-size: 1.8rem;
}
.checkout-page main .wrapper .price small{
    display: block;
    font-size: 1rem;
    opacity: 0.9;
    margin-top: 0.3rem;
}
.checkout-page main .wrapper .price del{
    color: #F2A20C;
    font-size: 1.3rem;
}
.checkout-page main .wrapper .description{
    letter-spacing: 0.03rem; 
    line-height: 1.8; 
    font-weight: 400;
    font-size: 1.15rem; 
    color: #2c3e50;
    padding: 2rem;
}
.checkout-page main p{
    padding: 3rem; 
    text-align: justify; 
    line-height: 1.7; 
    font-size: 18px;
}
.checkout-page main .payment-methods{
    margin: 2.5rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
    border: 2px solid #e8f5f3;
    box-shadow: 0 5px 20px rgba(3, 166, 150, 0.08);
}
.checkout-page main .payment-methods h6{
    color: #03A696;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.checkout-page main .payment-methods h5{
    color: #03A696;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-align: right;
}
.checkout-page main .payment-methods h5 i,
.checkout-page main .payment-methods h6 i{
    color: #03A696;
    margin-left: 0.5rem;
}

/* Checkout Form Sections */
.checkout-form .form-section{
    background: #fff;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #e8f5f3;
}
.checkout-form .section-heading{
    color: #03A696;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e8f5f3;
}
.checkout-form .section-heading i{
    color: #03A696;
    margin-left: 0.5rem;
}
.checkout-form label{
    color: #2c3e50;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    display: block;
}
.checkout-form .form-select{
    border: 1px solid #e8f5f3;
    background-color: #fff;
    margin: 0;
    outline: none;
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    transition: all 0.3s ease;
}
.checkout-form .form-select:focus{
    border-color: #03A696;
    box-shadow: 0 0 0 3px rgba(3, 166, 150, 0.1);
}
.checkout-form .total-price-box{
    background: linear-gradient(135deg, #e8f5f3 0%, #ffffff 100%);
    padding: 1.25rem;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #03A696;
    box-shadow: 0 4px 15px rgba(3, 166, 150, 0.15);
}
.checkout-form .total-price-box strong{
    color: #2c3e50;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.5rem;
}
.checkout-form .total-price-box .total-amount{
    color: #03A696;
    font-size: 1.8rem;
    font-weight: 900;
}
.checkout-form .submit-btn{
    background: linear-gradient(135deg, #03A696 0%, #028a7c 100%);
    border: none;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 12px;
    margin-top: 1.5rem;
    box-shadow: 0 8px 20px rgba(3, 166, 150, 0.3);
    transition: all 0.3s ease;
}
.checkout-form .submit-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(3, 166, 150, 0.4);
    background: linear-gradient(135deg, #028a7c 0%, #03A696 100%);
}
.checkout-page main .payment-icons{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
}
.checkout-page main .payment-icons .radio{
    display: none;
}
.checkout-page main .payment-icons label{
    margin: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}
.checkout-page main .payment-icons img{
    border-radius: 12px;
    border: 3px solid #e8f5f3;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    background: #fff;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    object-fit: contain;
    width: 70px;
    height: 50px;
    max-width: 70px;
    max-height: 50px;
}
.checkout-page main .payment-icons img:hover{
    border-color: #03A696;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(3, 166, 150, 0.2);
}
.checkout-page main .payment-icons .radio:checked + label img{
    border: 3px solid #03A696;
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(3, 166, 150, 0.35);
    background: linear-gradient(135deg, #e8f5f3 0%, #ffffff 100%);
}
.content-card{
    width: auto;
    height: auto;
    min-height: 70px;
    background: #fff; 
    border-radius: 20px;
    border: 2px solid #e0e0e0;
    padding: 1.5rem;
    transition: all 0.3s ease;
}
.content-card:hover{
    border-color: #03A696;
    box-shadow: 0 8px 25px rgba(3, 166, 150, 0.15);
    transform: translateY(-2px);
}

/* Modern Rating System */
.rating{
    width: 350px;
    margin: 0 auto;
    font-size: 3rem;
    overflow: hidden;
    text-align: center;
    padding: 1rem 0;
}
.rating input{
    float: right;
    opacity: 0;
    position: absolute;
}
.rating label{
    float: center;
    color: #e0e0e0;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.1));
}
.rating label:hover ~ label,
.rating input:focus ~ label,
.rating input:checked ~ label,
.rating label:hover{
    color: #F2A20C;
    cursor: pointer;
    transform: scale(1.1);
}
.rating2{direction: rtl;}
.rating2 a{float: none;}

/* Article Page */
.article-page main{ 
    margin-bottom: 10rem;
}
.article-page main .wrapper{
    background-color: #fff;
    box-shadow: 0 25px 60px rgba(3, 166, 150, 0.15); 
    border-radius: 25px; 
    padding: 3.5rem; 
    margin-top: -90px;
    border: 2px solid #f1f1f1;
}
.article-page main .wrapper img{
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.article-page main .wrapper .article{
    padding: 2.5rem; 
    text-align: justify; 
    line-height: 1.8; 
    font-size: 1.15rem; 
    color: #2c3e50;
}

/* Modern Modal */
.modal .modal-dialog .modal-content {
    border-radius: 25px; 
    box-shadow: 0 30px 70px rgba(3, 166, 150, 0.2); 
    border: none;
    overflow: hidden;
}
.modal .modal-dialog .modal-content .modal-header{
    justify-content: center; 
    color: #fff; 
    background: linear-gradient(135deg, #03A696 0%, #027d73 100%);
    border: none;
    padding: 2rem;
}
.modal .modal-dialog .modal-content .modal-header .modal-title{
    font-weight: 700;
    font-size: 1.5rem;
}
.modal .modal-dialog .modal-content .modal-body{
    padding: 2.5rem;
    font-size: 1.05rem;
    line-height: 1.7;
}
.modal .modal-dialog .modal-content .modal-footer{
    justify-content: center;
    border: none;
    padding: 1.5rem 2rem 2rem;
    background: #f8f9fa;
}

/* google translate */
#google_translate_element{border:none;position:relative}
.goog-te-gadget{text-transform:uppercase}
.goog-te-gadget-simple .goog-te-menu-value span{display:none}
.goog-te-gadget-simple{display:inline!important;background-color:#fff0!important;border:none!important;padding:0!important;border-radius:4px!important;font-size:1rem!important;line-height:0!important;display:inline-block;cursor:pointer;zoom:1;}
.goog-te-menu2{max-width:100%}
.goog-te-menu-value{color:rgba(0,0,0,.5)!important}
.goog-te-menu-value:before{font-family:'Material Icons';content:"";display:inline-block;margin-right:16px;font-size:18px;vertical-align:-14px}
.goog-te-menu-value span:nth-child(5){display:none}
.goog-te-menu-value span:nth-child(3){border:none;font-family:'Material Icons'}
.goog-te-menu-value span:nth-child(3):after{font-family:'Material Icons';content:"";font-size:1.5rem;vertical-align:-6px;position:absolute;display:inline-block;left:-3px;top:0}
.goog-te-gadget-icon{background-image:url(https://placehold.it/32);background-position:0 0;height:32px;width:32px;margin-right:8px;display:none}
.goog-te-banner-frame.skiptranslate{display:none!important}

/* ============================================
   RESPONSIVE DESIGN - MODERN ZOO THEME
   ============================================ */

/* Large Devices, Wide Screens (1440px and below) */
@media screen and (max-width: 1440px){
    #departments .carousel-item h2{
        font-size: 2.2rem;
        margin: -200px -380px 0 0;
    }
    #departments .carousel-item .title{
        right: 30rem;
        font-size: 1rem;
    }
}

/* Desktop & Tablets (1024px and below) */
@media screen and (max-width: 1024px) {
    #departments .carousel-item h2{
        font-size: 2rem;
        margin: -180px -300px 0 0;
    }
    #departments .carousel-item .title{
        right: 20rem;
    }
}

/* Medium Devices, Tablets (991px and below) */
@media screen and (max-width: 991px){
    .navbar .logo {width: 80px;}
    .navbar .navbar-nav .nav-link{font-size: 1rem;}
    
    #header a {font-size: 0.9rem;}
    
    h3.section-title span{font-size: 2.5rem;}
    h3.section-title small{font-size: 1rem;}
    
    #banners .carousel-item{padding: 30%;}
    #banners .carousel-item .wrapper h2{font-size: 2.5rem;}
    
    #departments .carousel-item h2{
        font-size: 1.8rem;
        margin: -150px -200px 0 0;
        padding: 1rem 1.5rem;
    }
    #departments .carousel-item .title{
        right: 10rem;
        font-size: 0.95rem;
        padding: 1rem;
    }
    
    section.about .map{height: 28rem;}
}

/* Small Devices, Tablets (768px and below) */
@media screen and (max-width: 768px){
    /* Navigation */
    .navbar .logo {width: 60px;}
    .navbar{padding: 0.8rem 0.3rem;}
    
    /* Mobile Buy Ticket Button */
    .mobile-buy-ticket{
        display: inline-block !important;
    }
    .navbar-nav .nav-item .btn-info{
        display: none !important;
    }
    
    /* Header */
    #header{
        padding-left: 15px; 
        border-radius: 25px; 
        top: initial; 
        bottom: 0;
        margin: 0.5rem;
    }
    #header .container { 
        background: rgba(255, 255, 255, 0.98); 
        border-radius: 40px; 
        box-shadow: 0px 10px 40px rgba(3, 166, 150, 0.25);
        backdrop-filter: blur(10px);
    }
    #header ul{align-items: flex-start;}
    
    /* Inputs & Form Elements on Mobile */
    input, select, textarea{
        padding: 10px 12px;
        font-size: 0.95rem;
    }
    label{
        font-size: 0.9rem;
    }
    .form-select{
        padding: 10px 12px;
        font-size: 0.95rem;
    }
    
    /* Form Section - Keep input-group in 1 line on mobile */
    .form-section .row .col-md-6{
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    .form-section .input-group{
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 6px;
    }
    .form-section .input-group input,
    .form-section .input-group select{
        flex: 1;
        min-width: 0;
        padding: 8px 10px;
        font-size: 0.9rem;
    }
    .form-section .input-group .button-minus,
    .form-section .input-group .button-plus{
        padding: 8px 12px;
        font-size: 0.9rem;
        min-width: 40px;
    }
    .form-section .input-group .quantity_adult,
    .form-section .input-group .quantity_child{
        text-align: center;
        padding: 8px 10px;
    }
    
    /* Hide emoji decorations on mobile */
    section.featured-animals::before,
    section.featured-animals::after,
    section.pricing::before,
    section.pricing::after,
    section.testimonials::before,
    section.testimonials::after,
    section.about::before,
    section.about::after   
    {
        display: none;
    }
    
    /* Buttons */
    .btn{
        vertical-align: text-top;
        font-size: 0.95rem;
        padding: 0.6rem 1.8rem;
    }
    
    /* Section Titles */
    h3.section-title {
        padding: 1.5rem;
    }
    h3.section-title small {
        font-size: 0.95rem;
        letter-spacing: 1px;
    }
    h3.section-title span{
        font-size: 2rem;
    }
    
    /* Banners */
    #banners .carousel-inner{border-radius: 0 0 30px 30px;}
    #banners .carousel-item{padding: 40%;}
    #banners .carousel-item .wrapper{margin-right: 10%;}
    #banners .carousel-item .wrapper h2{font-size: 2rem;}
    
    /* Tickets */
    section.tickets{padding: 3rem 0;}
    section.tickets .number{
        width: 65px;
        height: 65px;
        margin-bottom: 1rem;
    }
    section.tickets .number i{font-size: 2rem; margin-top: 1.1rem;}
    section.tickets h4{margin-bottom: 2rem; font-size: 1.5rem;}
    section.tickets .step{padding-right: 1rem;}
    
    /* Departments */
    section.departments {padding: 4rem 0;}
    section.departments p{font-size: 1.1rem;}
    section.departments article{max-width: 100%; margin: auto; margin-bottom: 3rem;}
    #departments .carousel-item{padding: 50%;}
    #departments .carousel-item h2{
        font-size: 1.5rem;
        top: 20px !important;
        margin: -100px -100px 0 0;
        padding: 1rem 1.5rem;
    }
    #departments .carousel-item .title{
        margin: 1rem;
        line-height: 1.4;
        font-size: 0.85rem;
        top: 1rem;
        right: 1rem;
        padding: 1rem;
    }
    
    /* Checkout */
    .checkout-page main{margin-top: 7rem; margin-bottom: 5rem;}
    .checkout-page main .wrapper .price{font-size: 1.5rem; padding: 1.2rem 1.5rem;}
    .checkout-page main .wrapper .description{font-size: 1rem; padding: 1.5rem;}
    .checkout-page main p{padding: 2rem;}
    
    /* About */
    section.about{padding: 3rem 0;}
    section.about .map{height: 20rem;}
    section.about p{font-size: 1.1rem;}
    
    /* Article */
    .article-page main .wrapper .article{
        padding: 1.5rem; 
        text-align: right; 
        font-size: 1rem;
    }
}

/* Extra Small Devices, Phones (480px and below) */
@media screen and (max-width: 480px){
    /* Typography */
    h3.section-title span{font-size: 1.8rem;}
    h3.section-title small{font-size: 0.85rem;}
    
    /* Navigation */
    .navbar .logo {width: 50px;}
    
    /* Banners */
    #banners .carousel-item{padding: 50%;}
    #banners .carousel-item .wrapper{margin-right: 5%;}
    #banners .carousel-item .wrapper h2{font-size: 1.5rem;}
    
    /* Buttons */
    .btn{
        font-size: 0.9rem;
        padding: 0.5rem 1.5rem;
    }
    
    /* Departments */
    #departments .carousel-item h2{
        font-size: 1.2rem;
        margin: -80px -50px 0 0;
        padding: 0.8rem 1rem;
    }
    #departments .carousel-item .title{
        font-size: 0.75rem;
        padding: 0.8rem;
        right: 0.5rem;
        top: 0.5rem;
    }
    
    /* Checkout */
    .checkout-page main{margin-top: 6rem; margin-bottom: 4rem;}
    .checkout-page main .wrapper{border-radius: 20px;}
    .checkout-page main .wrapper .price{font-size: 1.3rem;}
    .checkout-page main p{padding: 1.5rem;}
    .checkout-page main .payment-methods{padding: 0 1rem;}
    
    /* About */
    section.about .map{height: 15rem;}
    
    /* Footer */
    #footer img{display: none !important;}
    #footer, #footer .social{text-align: center;}
    #footer .social a{
        width: 45px;
        height: 45px;
        line-height: 2.8;
        font-size: 1rem;
    }
    #footer .icon{
        width: 55px;
        height: 55px;
        line-height: 2;
        font-size: 1.4rem;
    }
    
    /* Tickets */
    section.tickets .number{
        width: 55px;
        height: 55px;
    }
    section.tickets .number i{
        font-size: 1.7rem;
        margin-top: 0.9rem;
    }
    section.tickets h4{font-size: 1.3rem;}
    
    /* Forms */
    .input-group .button-minus,
    .input-group .button-plus{
        height: 40px;
        width: 40px;
    }
    .input-group .quantity-field{
        height: 40px;
        width: 60px;
    }
}