/* =========================================================

   THE OCEAN UNISEX SALON & MAKEUP STUDIO

   Complete Responsive Stylesheet

   Bootstrap 5 Compatible

========================================================= */



/* =========================

   1. ROOT VARIABLES

========================= */

:root {

    --primary: #b8860b;

    --primary-dark: #8f6500;

    --primary-light: #d4af37;

    --dark: #171717;

    --dark-2: #252525;

    --light: #faf9f6;

    --white: #ffffff;

    --muted: #6c757d;

    --border: #e9e5dc;

    --shadow: 0 12px 35px rgba(0, 0, 0, 0.08);

    --shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.14);

    --radius: 16px;

}



/* =========================

   2. GLOBAL

========================= */

html {

    scroll-behavior: smooth;

    scroll-padding-top: 85px;

}



body {

    margin: 0;

    padding: 0;

    font-family: "Inter", sans-serif;

    color: #292929;

    background: var(--white);

    line-height: 1.7;

    overflow-x: hidden;

}



* {

    box-sizing: border-box;

}



img {

    max-width: 100%;

    height: auto;

}



a {

    text-decoration: none;

    transition: all 0.3s ease;

}



p {

    color: #666;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: "Playfair Display", serif;

    color: var(--dark);

    line-height: 1.25;

}



section {

    overflow: hidden;

    position: relative;

}



.container {

    max-width: 1200px;

}



/* =========================

   3. TEXT SELECTION

========================= */

::selection {

    background: var(--primary);

    color: #fff;

}



/* =========================

   4. TOP HEADER

========================= */

.top-header {

    background: #151515;

    color: rgba(255, 255, 255, 0.85);

    padding: 9px 0;

    font-size: 13px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.top-header span {

    display: inline-flex;

    align-items: center;

    white-space: nowrap;

}



.top-header i {

    color: var(--primary-light);

    font-size: 14px;

}



.social-icons {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 14px;

}



.social-icons a {

    color: rgba(255, 255, 255, 0.8);

    font-size: 16px;

}



.social-icons a:hover {

    color: var(--primary-light);

    transform: translateY(-2px);

}



/* =========================

   5. NAVBAR

========================= */

#mainNav {

    min-height: 78px;

    z-index: 9999;

    transition: all 0.3s ease;

}

.bg-white {

    --bs-bg-opacity: 1;

    background-color: rgb(0 0 0) !important;

}



.navbar-brand {

    color: var(--dark) !important;

    font-family: "Playfair Display", serif;

    font-size: 28px !important;

    letter-spacing: 0.5px;

    position: relative;

}



.navbar-brand::after {

    content: "";

    position: absolute;

    width: 32px;

    height: 2px;

    /* background: var(--primary); */

    left: 0;

    bottom: -3px;

}



.navbar-nav {

    gap: 4px;

}



.navbar-nav .nav-link {

    color: #ffffff;

    font-size: 14px;

    font-weight: 500;

    padding: 28px 10px !important;

    position: relative;

}



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

    content: "";

    position: absolute;

    left: 10px;

    right: 10px;

    bottom: 18px;

    height: 2px;

    background: var(--primary);

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.3s ease;

}



.navbar-nav .nav-link:hover,

.navbar-nav .nav-link.active {

    color: var(--primary-dark);

}



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

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

    transform: scaleX(1);

}



.navbar-toggler {

    border: 0;

    padding: 8px;

    box-shadow: none !important;

}



.navbar-toggler:focus {

    box-shadow: none;

}



.navbar-toggler-icon {

    width: 28px;

    height: 28px;

}



/* =========================

   6. BUTTONS

========================= */

.btn {

    border-radius: 50px;

    padding: 11px 23px;

    font-weight: 600;

    font-size: 14px;

    transition: all 0.3s ease;

}



.btn-primary {

    background: var(--primary);

    border-color: var(--primary);

    color: #fff;

}



.btn-primary:hover,

.btn-primary:focus {

    background: var(--primary-dark);

    border-color: var(--primary-dark);

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(184, 134, 11, 0.25);

}



.btn-outline-primary {

    color: var(--primary-dark);

    border-color: var(--primary);

}



.btn-outline-primary:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: #fff;

}



.btn-success {

    background: #198754;

    border-color: #198754;

}



.btn-success:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(25, 135, 84, 0.2);

}



.btn-call-nav {

    padding: 10px 20px;

    font-size: 13px;

    letter-spacing: 0.4px;

}



/* =========================

   7. HERO CAROUSEL

========================= */

#hero {

    position: relative;

    overflow: hidden;

}



#hero .carousel-item {

    height: 650px;

    min-height: 600px;

    background-size: cover;

    background-position: center;

    position: relative;

}



.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(

            90deg,

            rgba(0, 0, 0, 0.78) 0%,

            rgba(0, 0, 0, 0.58) 45%,

            rgba(0, 0, 0, 0.25) 100%

        );

}



.hero-content {

    position: relative;

    z-index: 2;

    max-width: 760px;

    padding-top: 20px;

}



.hero-content h1 {

    color: #fff;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.1;

    margin-bottom: 0;

    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

}



.hero-content p {

    color: rgba(255, 255, 255, 0.9);

    max-width: 700px;

    font-size: 18px;

    line-height: 1.8;

}



.hero-content .btn {

    padding: 13px 30px;

}



.carousel-indicators {

    z-index: 5;

}



.carousel-indicators button {

    width: 35px;

    height: 4px;

    border: 0;

    border-radius: 5px;

    margin: 0 4px;

}



.carousel-control-prev,

.carousel-control-next {

    width: 7%;

    z-index: 5;

}



.carousel-control-prev-icon,

.carousel-control-next-icon {

    width: 42px;

    height: 42px;

    background-size: 55%;

    border-radius: 50%;

    background-color: rgba(0, 0, 0, 0.35);

    padding: 10px;

}



/* =========================

   8. SECTION COMMON

========================= */

.py-5 {

    padding-top: 90px !important;

    padding-bottom: 90px !important;

}



.badge {

    padding: 8px 15px;

    border-radius: 50px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}



.bg-soft-primary {

    background: rgba(184, 134, 11, 0.10) !important;

}



.text-primary {

    color: var(--primary) !important;

}



.section-title {

    margin-bottom: 20px;

}



.display-5 {

    font-size: clamp(34px, 4vw, 50px);

}



/* =========================

   9. ABOUT SECTION

========================= */

#about {

    background: #fff;

}



#about img,

#whychoose img {

    width: 100%;

    height: 520px;

    object-fit: cover;

}



#about .display-5 {

    margin-top: 8px;

}



#about p {

    font-size: 16px;

}



.feature-list {

    margin-bottom: 0;

}



.feature-list li {

    margin-bottom: 10px;

    color: #4c4c4c;

    font-size: 15px;

}



.feature-list i {

    font-size: 15px;

}



/* =========================

   10. SERVICES

========================= */

#services {

    background: #000000 !important;

}



#services .text-center > p {

    max-width: 680px;

    margin-left: auto;

    margin-right: auto;

}



.service-card {

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    background: #fff;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.04);

    transition: all 0.4s ease;

}



.service-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-hover);

    border-color: rgba(184, 134, 11, 0.35);

}



.service-card .card-img-top {

    height: 240px;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.service-card:hover .card-img-top {

    transform: scale(1.06);

}



.service-card .card-body {

    padding: 25px;

}



.service-card .card-title {

    font-size: 22px;

    margin-bottom: 8px;

}



.service-card .card-text {

    font-size: 14px;

    min-height: 48px;

    margin-bottom: 18px;

}



.service-card .btn {

    padding: 8px 14px;

    font-size: 12px;

}



/* =========================

   11. WHY CHOOSE US

========================= */

#whychoose {

    background: #fff;

}



#whychoose img {

    height: 500px;

}



#whychoose p {

    font-size: 16px;

}



#whychoose .col-6 {

    font-size: 14px;

    color: #555;

    line-height: 1.5;

}



#whychoose .col-6 i {

    font-size: 14px;

}



/* =========================

   12. PROCESS

========================= */

#process {

    background: #000 !important;

}



.process-steps {

    position: relative;

}

.process-box{

    border: 2px solid #fff;

    border-radius: 8px;

}



.step-circle {

    width: 82px;

    height: 82px;

    border-radius: 50%;

    background: #fff;

    border: 2px solid var(--primary);

    color: var(--primary-dark);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    font-family: "Playfair Display", serif;

    font-size: 25px;

    font-weight: 700;

    box-shadow: 0 8px 25px rgba(184, 134, 11, 0.12);

    transition: all 0.3s ease;

}



.process-steps .col-md-3:hover .step-circle {

    background: var(--primary);

    color: #fff;

    transform: translateY(-7px) rotate(5deg);

}



.process-steps h5 {

    font-size: 20px;

}



.process-steps p {

    font-size: 14px;

    padding: 0 10px;

}



/* =========================

   13. GALLERY

========================= */

#gallery {

    background: #fff;

}



.gallery-item {

    display: block;

    overflow: hidden;

    border-radius: 12px;

    position: relative;

}



.gallery-item::after {

    content: "\F52A";

    font-family: "bootstrap-icons";

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 28px;

    background: rgba(0, 0, 0, 0.45);

    opacity: 0;

    transition: all 0.3s ease;

}



.gallery-item img {

    width: 100%;

    height: 230px;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;

}



.gallery-item:hover img {

    transform: scale(1.08);

}



.gallery-item:hover::after {

    opacity: 1;

}



/* =========================

   14. TESTIMONIALS

========================= */

#testimonials {

    background: #000000 !important;

}



#testimonials .card {

    border: 1px solid var(--border);

    border-radius: 16px;

    background: #fff;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);

    transition: all 0.3s ease;

}



#testimonials .card:hover {

    transform: translateY(-6px);

    box-shadow: var(--shadow);

}



#testimonials .card-body {

    padding: 28px;

}



#testimonials h6 {

    font-family: "Inter", sans-serif;

    font-weight: 600;

}



#testimonials .text-warning {

    font-size: 13px;

    letter-spacing: 2px;

}



#testimonials .card-text {

    font-size: 15px;

    font-style: italic;

    line-height: 1.8;

}



.avatar {

    flex: 0 0 40px;

}



/* =========================

   15. CONTACT

========================= */

#contact {

    background: #fff;

}



#contact .display-6 {

    font-size: clamp(32px, 4vw, 48px);

}



#contact .mt-3,

#contact .mt-4 {

    color: #555;

}



#contact strong {

    color: var(--dark);

}



#contact iframe {

    width: 100%;

    min-height: 260px;

    border: 0;

    border-radius: 14px !important;

    box-shadow: var(--shadow);

}



#contactForm {

    border: 1px solid var(--border);

}



#contactForm h4 {

    font-size: 28px;

    margin-bottom: 25px;

}



.form-control,

.form-select {

    min-height: 50px;

    border: 1px solid #ddd;

    border-radius: 10px;

    padding: 12px 15px;

    font-size: 14px;

    transition: all 0.3s ease;

}



textarea.form-control {

    min-height: 100px;

    resize: vertical;

}



.form-control:focus,

.form-select:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 0.2rem rgba(184, 134, 11, 0.12);

}



#contactForm .btn {

    min-height: 50px;

}



/* =========================

   16. FAQ

========================= */

#faq {

    background: #000000 !important;

}



.accordion {

    max-width: 900px;

    margin: auto;

}



.accordion-item {

    border: 1px solid #e7e2d8 !important;

    margin-bottom: 12px;

    border-radius: 10px !important;

    overflow: hidden;

    background: #fff;

}



.accordion-button {

    font-family: "Inter", sans-serif;

    font-size: 15px;

    font-weight: 600;

    padding: 20px 22px;

    color: #333;

    background: #fff;

    box-shadow: none !important;

}



.accordion-button:not(.collapsed) {

    color: var(--primary-dark);

    background: rgba(184, 134, 11, 0.05);

}



.accordion-button::after {

    background-size: 14px;

}



.accordion-body {

    color: #666;

    font-size: 14px;

    line-height: 1.8;

    padding: 5px 22px 22px;

}



.accordion-body a {

    color: var(--primary-dark);

    font-weight: 600;

}



.accordion-body a:hover {

    color: var(--primary);

}



/* =========================

   17. CTA BANNER

========================= */

.cta-banner {

    min-height: 400px;

    display: flex;

    align-items: center;

    position: relative;

}



.cta-banner h2 {

    color: #fff;

    font-size: clamp(36px, 5vw, 58px);

}



.cta-banner p {

    color: rgba(255, 255, 255, 0.9);

    max-width: 750px;

    margin: 15px auto 30px;

}



.cta-banner .btn {

    min-width: 160px;

}



/* =========================

   18. FOOTER

========================= */

footer {

    background: #151515 !important;

}

.fbg-dark {

    --bs-bg-opacity: 1;

    background-color: rgb(0 0 0) !important;

}



footer h5,

footer h6 {

    color: #fff;

}



footer h5 {

    font-size: 24px;

    margin-bottom: 18px;

}



footer h6 {

    font-family: "Inter", sans-serif;

    font-size: 15px;

    font-weight: 600;

    margin-bottom: 18px;

}



footer p,

footer li {

    color: rgba(255, 255, 255, 0.62);

    font-size: 13px;

    line-height: 1.9;

}



footer ul {

    margin: 0;

    padding: 0;

}



footer li {

    margin-bottom: 4px;

}



footer a:hover {

    color: var(--primary-light) !important;

}



footer hr {

    opacity: 0.15;

    margin-top: 35px;

}



footer .social-icons {

    justify-content: flex-start;

}



/* =========================

   19. FLOATING BUTTONS

========================= */

.floating-buttons {

    position: fixed;

    right: 20px;

    bottom: 25px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    z-index: 99999;

}



.float-btn {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 20px;

    position: relative;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);

    transition: all 0.3s ease;

}



.float-btn:hover {

    color: #fff;

    transform: scale(1.1);

}



.call-btn {

    background: var(--primary);

}



.whatsapp-btn {

    background: #25d366;

}



.tooltip-text {

    position: absolute;

    right: 65px;

    top: 50%;

    transform: translateY(-50%);

    background: #222;

    color: #fff;

    font-size: 12px;

    padding: 6px 10px;

    border-radius: 5px;

    white-space: nowrap;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.float-btn:hover .tooltip-text {

    opacity: 1;

    visibility: visible;

}



/* =========================

   20. SCROLL REVEAL

========================= */

.reveal {

    animation: revealUp 0.8s ease both;

}



@keyframes revealUp {

    from {

        opacity: 0;

        transform: translateY(25px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* =========================

   21. HOVER IMAGE EFFECT

========================= */

.rounded-4 {

    border-radius: 18px !important;

}



/* =========================

   22. RESPONSIVE - TABLET

========================= */

@media (max-width: 1199.98px) {



    .container {

        max-width: 95%;

    }



    .navbar-nav .nav-link {

        padding-left: 7px !important;

        padding-right: 7px !important;

        font-size: 13px;

    }



    .btn-call-nav {

        padding-left: 14px;

        padding-right: 14px;

    }



    #hero .carousel-item {

        height: 600px;

        min-height: 560px;

    }



    .hero-content {

        max-width: 680px;

    }



    .service-card .card-img-top {

        height: 220px;

    }

}



/* =========================

   23. RESPONSIVE - MOBILE NAV

========================= */

@media (max-width: 991.98px) {



    html {

        scroll-padding-top: 70px;

    }



    #mainNav {

        min-height: 70px;

    }



    .navbar-brand {

        font-size: 24px !important;

    }



    .navbar-collapse {

        background: #000000;

        padding: 15px 0 20px;

        border-top: 1px solid #eee;

        margin-top: 8px;

    }



    .navbar-nav {

        gap: 0;

    }



    .navbar-nav .nav-link {

        padding: 12px 10px !important;

        border-bottom: 1px solid #f0f0f0;

    }



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

        display: none;

    }



    .btn-call-nav {

        display: block;

        width: 100%;

        text-align: center;

        margin: 15px 0 0 !important;

    }



    #hero .carousel-item {

        height: 590px;

        min-height: 540px;

    }



    .hero-content {

        padding: 0 20px;

        text-align: center;

        margin: auto;

    }



    .hero-content h1 {

        font-size: 45px;

    }



    .hero-content p {

        font-size: 16px;

        line-height: 1.7;

    }



    .carousel-control-prev,

    .carousel-control-next {

        width: 10%;

    }



    #about img,

    #whychoose img {

        height: 450px;

    }



    .py-5 {

        padding-top: 70px !important;

        padding-bottom: 70px !important;

    }

}



/* =========================

   24. RESPONSIVE - MOBILE

========================= */

@media (max-width: 767.98px) {



    body {

        font-size: 14px;

    }



    .container {

        max-width: 92%;

    }



    .py-5 {

        padding-top: 55px !important;

        padding-bottom: 55px !important;

    }



    .display-5 {

        font-size: 34px;

    }



    .display-6 {

        font-size: 32px;

    }



    /* Hero */

    #hero .carousel-item {

        height: 560px;

        min-height: 530px;

        background-position: center;

    }



    .hero-overlay {

        background:

            linear-gradient(

                90deg,

                rgba(0, 0, 0, 0.78),

                rgba(0, 0, 0, 0.58)

            );

    }



    .hero-content {

        padding: 0 10px;

    }



    .hero-content h1 {

        font-size: 38px;

        line-height: 1.15;

    }



    .hero-content p {

        font-size: 15px;

        margin: 20px 0 !important;

    }



    .hero-content .btn {

        font-size: 13px;

        padding: 11px 22px;

    }



    .carousel-control-prev,

    .carousel-control-next {

        width: 8%;

    }



    .carousel-control-prev-icon,

    .carousel-control-next-icon {

        width: 30px;

        height: 30px;

    }



    /* About */

    #about img,

    #whychoose img {

        height: 330px;

        margin-bottom: 5px;

    }



    #about .display-5,

    #whychoose .display-5 {

        margin-top: 15px;

    }



    #about p,

    #whychoose p {

        font-size: 14px;

    }



    /* Services */

    .service-card .card-img-top {

        height: 220px;

    }



    .service-card .card-body {

        padding: 20px;

    }



    .service-card .card-title {

        font-size: 20px;

    }



    .service-card .card-text {

        min-height: auto;

        font-size: 13px;

    }



    /* Why choose */

    #whychoose .row.mt-4 {

        margin-top: 20px !important;

    }



    #whychoose .col-6 {

        font-size: 13px;

        margin-bottom: 8px;

    }



    /* Process */

    .process-steps .col-md-3 {

        margin-bottom: 30px;

    }



    .step-circle {

        width: 72px;

        height: 72px;

        font-size: 22px;

    }



    .process-steps h5 {

        font-size: 19px;

    }



    /* Gallery */

    .gallery-item img {

        height: 180px;

    }

/* Gallery Image */

.gallery-item {

    display: block;

    overflow: hidden;

    border-radius: 12px;

    cursor: pointer;

}



.gallery-item img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.gallery-item:hover img {

    transform: scale(1.06);

}





/* Popup Background */

.gallery-modal {

    display: none;

    position: fixed;

    z-index: 99999;

    inset: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.92);



    align-items: center;

    justify-content: center;



    padding: 30px;

}





/* Popup Image */

.gallery-modal-img {

    max-width: 90%;

    max-height: 90vh;

    object-fit: contain;

    border-radius: 8px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

}





/* Close Button */

.gallery-close {

    position: absolute;

    top: 20px;

    right: 30px;



    width: 45px;

    height: 45px;



    border: none;

    border-radius: 50%;



    background: #fff;

    color: #111;



    font-size: 32px;

    line-height: 40px;



    cursor: pointer;

    z-index: 100000;



    transition: 0.3s;

}



.gallery-close:hover {

    background: #000;

    color: #fff;

}





/* Mobile */

@media (max-width: 576px) {



    .gallery-item img {

        height: 180px;

    }



    .gallery-modal {

        padding: 15px;

    }



    .gallery-modal-img {

        max-width: 96%;

        max-height: 85vh;

    }



    .gallery-close {

        top: 10px;

        right: 15px;

        width: 40px;

        height: 40px;

        font-size: 28px;

    }

}





    /* Testimonials */

    #testimonials .card-body {

        padding: 22px;

    }



    /* Contact */

    #contact .display-6 {

        font-size: 33px;

    }



    #contact iframe {

        min-height: 240px;

    }



    #contactForm {

        padding: 22px !important;

    }



    /* CTA */

    .cta-banner {

        min-height: 430px;

        padding: 70px 15px !important;

    }



    .cta-banner h2 {

        font-size: 37px;

    }



    .cta-banner p {

        font-size: 14px;

    }



    .cta-banner .btn {

        display: block;

        width: 100%;

        margin: 8px 0 !important;

    }



    /* Footer */

    footer {

        text-align: center;

    }



    footer .social-icons {

        justify-content: center;

    }



    footer h5 {

        font-size: 22px;

    }



    /* Floating */

    .floating-buttons {

        right: 14px;

        bottom: 15px;

        gap: 9px;

    }



    .float-btn {

        width: 48px;

        height: 48px;

        font-size: 18px;

    }



    .tooltip-text {

        display: none;

    }

}



/* =========================

   25. SMALL MOBILE

========================= */

@media (max-width: 575.98px) {



    .container {

        max-width: 94%;

    }



    .navbar-brand {

        font-size: 22px !important;

    }



    #hero .carousel-item {

        height: 540px;

        min-height: 500px;

    }



    .hero-content h1 {

        font-size: 34px;

    }



    .hero-content p {

        font-size: 14px;

    }



    .hero-content .btn {

        padding: 10px 18px;

    }



    .display-5 {

        font-size: 30px;

    }



    .badge {

        font-size: 10px;

    }



    .service-card .card-img-top {

        height: 210px;

    }



    .gallery-item img {

        height: 150px;

    }



    .accordion-button {

        padding: 16px;

        font-size: 14px;

    }



    .accordion-body {

        padding: 0 16px 18px;

        font-size: 13px;

    }



    #contact .d-flex.gap-3 {

        gap: 8px !important;

    }



    #contact .d-flex.gap-3 .btn {

        width: 100%;

    }



    footer .col-md-3 {

        margin-bottom: 15px;

    }

}



/* =========================

   26. EXTRA SMALL DEVICES

========================= */

@media (max-width: 380px) {



    .navbar-brand {

        font-size: 20px !important;

    }



    .hero-content h1 {

        font-size: 30px;

    }



    .hero-content p {

        font-size: 13px;

    }



    .display-5 {

        font-size: 28px;

    }



    .service-card .card-img-top {

        height: 190px;

    }



    .gallery-item img {

        height: 135px;

    }

}



/* =========================

   27. ACCESSIBILITY

========================= */

a:focus-visible,

button:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible {

    outline: 3px solid rgba(184, 134, 11, 0.35);

    outline-offset: 3px;

}



/* =========================

   28. REDUCE MOTION

========================= */

@media (prefers-reduced-motion: reduce) {



    html {

        scroll-behavior: auto;

    }



    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}