/*--------------------------------------------------------------------------------------
Theme Name: PHOTOGRAPHY PORTFOLIO
Version: 1.0
----------------------------------------------------------------------------------------
   1. BASE CSS
    2. TOP AREA
        2.1 MAINMENU AREA
        2.2 WELCOME TEXT AREA
    3. ABOUT AREA
    4. SERVICE AREA
    5. WORK AREA
    6. PORTFOLIO AREA
    7. TEAM AREA
    8. TESTMONIAL AREA
    9. PRICEING AREA
    10. SUBSCRIBER AREA
    11. CONTACT AREA
    12. FOOTER AREA
    13. SCROLL TO TOP
    14. OFFER POPUP 
----------------------------------------------------------------------------------------*/


/*--------------------
   1. BASE CSS
----------------------*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,600|Raleway:400,500,600,700');

.alignleft {
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.aligncenter {
    display: block;
    margin: 0 auto 15px;
}

a {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

a:focus,
a:hover {
    outline: 0 solid;
    text-decoration: none;
}

button:focus,
input:focus {
    outline: 0 !important;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

html,
body {
    height: 100%
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    font-weight: 400;
    color: #363636;
}

a:hover {
    text-decoration: none
}

.navbar-toggle {
    border: 2px solid #ff2300;
    border-radius: 0;
}

.navbar-toggle .icon-bar {
    background: #ff2300 none repeat scroll 0 0;
}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

.area-title {
    margin-bottom: 60px;
}

.area-title h2 {
    color: #2c2828;
    display: inline-block;
    font-size: 36px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 40px;
    padding: 0 20px;
    position: relative;
    text-transform: uppercase;
}

.area-title h2::before {
    content: "[";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 10px;
}

.area-title h2::after {
    content: "]";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
}

.area-title h2 span {
    color: #ff2300;
    font-weight: 700;
}

.area-title p {
    margin-bottom: 0;
}

.section-padding {
    padding: 100px 0;
}

.padding-top {
    padding-top: 100px;
}

.padding-bottom {
    padding-bottom: 100px;
}

.red-bg {
    background: #ff2300;
    color: #fff;
}

.red-bg .area-title h2 {
    color: #fff;
}


/*--------------------------
    2. TOP AREA
---------------------------*/

.top-area {
    height: 100%;
    position: relative;
    width: 100%;
}

/*---------------------------------
    2.1 MAINMENU AREA
-----------------------------------*/

.header-top-area {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #ad0101e3;
}

.mainmenu-area {
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 9999 !important;
}

.mainmenu-area-bg {
    background: #ffffff none repeat scroll 0 0;
    bottom: 0;
    height: 5px;
    position: absolute;
    width: 100%;
}

.navbar-header {
    margin-top: 10px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.navbar-brand {
    float: left;
    height: 55px;
    padding: 10px 15px;
    font-size: 18px;
    line-height: 20px;
}

.navbar {
    border-bottom: 0 none;
    border-top: 0 none;
    margin-bottom: 0;
}

.navbar-brand>img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.is-sticky .navbar-brand>img {
    max-width: 80%;
}

ul#nav {
    float: right;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

ul#nav li a {
    background: rgba(171, 102, 102, 0) none repeat scroll 0 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 30px 10px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    position: relative;
}

ul#nav li a::after {
    background: #ff2300 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 0;
}

ul#nav li.active a::after,
ul#nav li:hover a::after {
    width: 100%;
}

.is-sticky ul#nav li a {
    padding: 20px 15px;
    color: #ffffff;
}

ul#nav li a:hover,
ul#nav li.active a,
.is-sticky ul#nav li.active a {
    background: #ffffff none repeat scroll 0 0;
    color: #363636;
}

.is-sticky .navbar-header {
    margin-top: -3px;
}

.is-sticky .mainmenu-area {
    background: #000;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    z-index: 99999;
}


/*-----------------------------------
    2.2 WELCOME TEXT AREA
-------------------------------------*/

.tp-bullet.selected,
.tp-bullet:hover {
    background: #ff2300;
}

.tp-bullets {
    border: 1px solid #ff2300;
    border-radius: 50px;
    display: block;
    height: 180px !important;
    padding: 10px;
    position: absolute;
    right: 30px !important;
    text-align: center !important;
    top: auto;
    width: 40px !important;
    z-index: 1000;
}

.tp-bullet {
    background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
    cursor: pointer;
    display: block !important;
    height: 30px;
    left: 0;
    margin-left: 7px;
    margin-top: 20px;
    position: static;
    top: auto !important;
    width: 4px;
}

.welcome-text-area {
    width: 100%;
    color: #ffffff;
}

.welcome-text h2 {
    font-size: 56px;
    font-weight: 400;
}

.welcome-text h1 {
    font-size: 80px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #ff2300;
}

.welcome-text h3 {
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
    color: #ffffff;
}

.welcome-text p {
    color: #ffffff;
    font-weight: 400;
    display: inline-block;
}

.welcome-text h3::after {
    background: #ff2300 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    width: 150px;
}

.home-button {
    margin-top: 60px;
}

.home-button a {
    background: #ff2300 none repeat scroll 0 0;
    border-radius: 50px;
    color: #363636;
    font-size: 14px;
    letter-spacing: 2px !important;
    margin-right: 20px;
    padding: 15px 30px;
    text-transform: uppercase;
    -webkit-transition: 0.3s !important;
    transition: 0.3s !important;
    font-weight: 400;
}

.home-button a:hover {
    background: #ffffff;
    color: #363636;
}

.welcome-img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 60%;
    overflow: hidden;
}

.welcome-mockup-img {
    bottom: 0;
    max-width: 80%;
    position: absolute;
    right: 5%;
}


/*-----------------------------
    3. ABOUT AREA
-------------------------------*/

.about-area .area-title {
    margin-bottom: 0;
}

.about-left-image {
    padding: 25px;
    position: relative;
    text-align: center;
}

.about-left-image::before,
.about-left-image::after {
    border-left: 2px solid #9e0102;
    border-top: 2px solid #9e0102;
    content: "";
    height: 270px;
    left: 0;
    position: absolute;
    top: 0;
    width: 270px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.about-left-image::after {
    border-bottom: 5px solid #9c0202;
    border-left: inherit;
    border-right: 5px solid #9a0102;
    border-top: inherit;
    bottom: 0;
    left: auto;
    right: 0;
    top: auto;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.about-left-image img {
    width: 100%;
}

.about-left-image:hover::after,
.about-left-image:hover::before {
    border-color: #ff2300;
}

.about-content h3 {
    font-family: open sans;
    margin-bottom: 50px;
}

.about-content p {
    margin-bottom: 20px;
}

.title-and-social-bookmark h4 {
    border-bottom: 2px solid;
    display: inline-block;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.title-and-social-bookmark {
    margin-top: 50px;
}

.social-bookmark {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.social-bookmark li {
    display: inline;
}

.social-bookmark li a {
    background: #363636 none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    height: 35px;
    margin-right: 10px;
    padding-top: 6px;
    text-align: center;
    width: 35px;
}

.social-bookmark li a:hover {
    background: #ff2300 none repeat scroll 0 0;
}

/* About Us Section */
.about-section {
    font-family: 'Arial', sans-serif;
    color: #333;
}

/* Intro Text */
.intro-text {
    font-size: 20px;
    font-weight: 500;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Highlighted Text */
.highlight {
    color: #C0392B;
    /* Use same red for highlights */
    font-weight: bold;
}

/* Increase font size for "The Soulmate" */
.large-highlight {
    font-size: 24px;
    /* Increase font size for this part */
    color: #C0392B;
    font-weight: bold;
}

/* Paragraphs */
.about-section p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #666;
}

/* Increase font size for pre-weddings, bridal portraits, couple shoots, and more */
.medium-highlight {
    font-size: 20px;
    /* Increase font size for these specific words */
    color: #C0392B;
    font-weight: bold;
}

/* Closing Line */
.closing-line {
    font-size: 22px;
    font-style: italic;
    color: #2C3E50;
    /* Dark Blue */
}

/* Add subtle animation */
.about-section {
    animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*---------------------------------
    4. SERVICE AREA
----------------------------------*/
#service {
    position: relative;
}

.service-image {
    margin-bottom: 20px;
    overflow: hidden;
    padding: 0px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.service-image::before {
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    content: "";
    height: 200px;
    left: 0;
    position: absolute;
    top: 0;
    width: 200px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.service-image::after {
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    bottom: 0;
    content: "";
    height: 200px;
    position: absolute;
    right: 0;
    width: 200px;
    z-index: 9;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.single-service:hover .service-image::before,
.single-service:hover .service-image::after {
    border-color: #ff2300;
    cursor: pointer;
}

.service-image img {
    width: 100%;
}

.service-details h3 {
    font-size: 24px;
    margin-bottom: 20px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    font-weight: 400;
    color: #f7bb4c;
    cursor: pointer;
}

.service-details p {
    color: #fff;
    cursor: pointer;
}

.single-service:hover .service-details h3 {
    color: #ff2300;
}

a.read-more {
    color: #ff2300;
    display: inline-block;
    letter-spacing: 1px;
    margin-top: 10px;
}

a.read-more:hover {
    color: #363636;
}


/*------------------------------
    5. WORK AREA
--------------------------------*/

.work-area {
    color: #fff;
    position: relative;
    line-height: 30px;
}

.work-area .area-title {
    margin-bottom: 0;
}

.work-area-bg {
    background: url("img/work/work_area_bg.jpg") no-repeat scroll center center / cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.service-details {
    padding: 0px 15px 20px;
}

.single-service {
    background: #ab000040;
}

.work-area-bg::after {
    background: #340000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
}

.service-area .area-title p {
    color: #fff;
}

.service-area .area-title h2 {
    color: #fff;
}

.work-area .area-title h2 {
    color: #fff;
    margin-top: 40px;
}


/* .row.work-catagories {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
} */

a.work-details {
    background: #ff2300 none repeat scroll 0 0;
    border-radius: 50px;
    color: #363636;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 50px;
    padding: 10px 40px;
    text-transform: uppercase;
}

a.work-details:hover {
    background: #fff none repeat scroll 0 0;
    color: #363636;
}

.work-menu {
    border-radius: 50%;
    box-shadow: 0 0 15px #ff2300;
    margin: 0 auto;
    overflow: hidden;
    padding: 13px;
    text-align: center;
    width: 80%;
}

ul.work-flow-navigation {
    border-radius: 50%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

li.col-md-6.col-xs-6 {
    padding: 0;
}

ul.work-flow-navigation li {
    display: inline-block;
    width: 50%;
}

ul.work-flow-navigation li img {
    background: transparent none repeat scroll 0 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

ul.work-flow-navigation li.active img {
    background: #ff2300 none repeat scroll 0 0;
    left: 0;
    padding: 5px;
    position: relative;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    z-index: 9;
}

ul.work-flow-navigation li a::after {
    background: #ff2300 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: 9;
}

ul.work-flow-navigation li.active a::after {
    opacity: 0.5;
}


/*------------------------------
    STAT COUNTER
-------------------------------*/

.counter-img {
    height: 120vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: url('img/portfolio/wedding/weeding\ \(32\).webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay {
    height: 140vh;
    /* Adjust the height as needed */
    width: 100%;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0000004d
}

.stats-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    /* padding: 100px 30px; */
    text-align: center;
}

.stat-box {
    margin: 70px;
    max-width: 300px;
}

.stat-box h2 {
    font-family: 'Segoe UI', sans-serif;
    font-size: 100px;
    margin: 0;
    color: transparent;
    -webkit-text-stroke: 2px #ffffff;
    /* outline with dark brown stroke */
    font-weight: 900;
}

.stat-box p {
    font-size: 20px;
    font-weight: bold;
    color: transparent;
    /* -webkit-text-stroke: 1px #ffffff; */
    color: #ffffff;
    /* letter-spacing: 1px; */
    line-height: 1.4;
}

.counter {
    display: inline-block;
}


/*------------------------------
    6. PORTFOLIO AREA
--------------------------------*/


.portfolio-menu {
    margin-bottom: 60px;
}

.portfolio-menu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.portfolio-menu ul li {
    background: #363636 none repeat scroll 0 0;
    color: #ff2300;
    cursor: pointer;
    display: inline-block;
    letter-spacing: 1px;
    padding: 7px 15px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.portfolio-menu ul li.active,
.portfolio-menu ul li:hover {
    background: #cd1c00 none repeat scroll 0 0;
    color: #ffffff;
}

.gallery-container {
    column-count: 3;
    column-gap: 1rem;
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.gallery-container a {
    display: inline-block;
    width: 100%;
    margin-bottom: 1rem;
    /* border-radius: 14px; */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, filter 0.3s ease;
    break-inside: avoid;
    /* prevent image breaking across columns */
}

.gallery-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* border-radius: 14px; */
}

#dynamicGallery a {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease, transform 0.4s ease;
}

#dynamicGallery a.visible {
    opacity: 1;
    transform: scale(1);
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.75rem 1.5rem;
    border: 2px solid #cd1c00;
    border-radius: 9999px;
    font-size: 3rem;
    font-weight: 500;
    background-color: white;
    color: #cd1c00;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 8px rgba(255, 165, 0, 0.3);
    width: 100%;
    max-width: 250px;
}

.load-more-btn:hover {
    background: linear-gradient(to right, #ff2300, #560000);
    color: white;
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.6);
}

.arrow-icon {
    width: 20px;
    height: 20px;
    margin-left: 0.5rem;
    transition: transform 0.3s ease-in-out;
}

.load-more-btn:hover .arrow-icon {
    transform: translateX(6px);
}


@media (max-width: 1024px) {
    .gallery-container {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .gallery-container {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .gallery-container {
        column-count: 2;
    }
}

/* Fancy frame border */
.portfolio-item {
    position: relative;
    border: 12px solid #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 0 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, #8f8f8e, #000000, #919191);

    transition: transform 0.4s ease, filter 0.4s ease;
}

/* Image behavior */
.portfolio-item img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease, filter 0.5s ease;
    display: block;
}

/* Caption overlay */
.portfolio-item .image-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    font-family: 'Cormorant Garamond', serif;
    color: #fff;
    font-size: 1.9rem;
    font-weight: bold;
    opacity: 0;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 2;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Hover effects */
.portfolio-item:hover img {
    filter: grayscale(100%);
    transform: scale(0.95);
}

.portfolio-item:hover .image-caption {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}


/*------------------------------
    7. TEAM AREA
-------------------------------*/
.single-team {
    background: #560000;
    text-align: center;
    box-shadow: 0 0 6px 0px #e5e5e5;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}

.single-team:hover .member-name-and-image {
    background: #ff2300 none repeat scroll 0 0;
}

.member-name-and-image {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 50%;
    margin-bottom: 30px;
    position: relative;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.member-img {
    border-radius: 50%;
}

.member-img img {
    border-radius: 50%;
    padding: 5px;
    width: 100%;
}

.member-details {
    margin-bottom: 15px;
}

.member-social-bookmark {
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.member-social-bookmark ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.member-social-bookmark ul li {
    display: inline;
}

.member-social-bookmark ul li a {
    background: #fdfdfd none repeat scroll 0 0;
    border-radius: 50%;
    color: #3d54c7;
    display: inline-block;
    font-size: 16px;
    height: 35px;
    margin-right: 9px;
    padding-top: 6px;
    text-align: center;
    width: 35px;
}

.member-social-bookmark ul li a:hover {
    background: #ff2300 none repeat scroll 0 0;
    color: #fff;
}

.member-details>h3 {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #fff;
}

.member-details .member-title {
    color: #ff2300;
}

.member-details .member-title {
    margin-bottom: 20px;
}


body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: #fdfdfd;
    color: #222;
}

.founder-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 4rem 2rem;
    max-width: 1300px;
    margin: 0 auto;
    gap: 2rem;
}

.founder-text {
    flex: 1 1 500px;
    animation: fadeInLeft 1s ease forwards;
}

.founder-text h2:hover {
    color: #ff2300;
    cursor: pointer;
}

.founder-text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 4.6rem;
    color: #c69064;
    margin-bottom: 1rem;
}

.founder-text p {
    font-size: 2.4rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.founder-signature {
    font-family: 'Brush Script MT', cursive;
    font-size: 2.9rem;
    color: #c6a664;
    padding-left: 60%;
}

.founder-image-wrapper {
    flex: 1 1 400px;
    position: relative;
    animation: fadeInRight 1s ease forwards;
}

.founder-image {
    width: 100%;
    max-width: 400px;
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease;
}

.founder-image:hover {
    transform: scale(1.05);
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .founder-section {
        flex-direction: column;
        text-align: center;
    }

    .founder-image {
        clip-path: none;
        border-radius: 12px;
    }
}


/*------------------------------
    8. TESTMONIAL AREA
-------------------------------*/

.testmonial-area {
    color: #fff;
    position: relative;
}

.testmonial-area-bg {
    background: rgba(0, 0, 0, 0) url("img/testmonial/testmonial_area_bg.jpg") no-repeat scroll center center / cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.testmonial-area-bg::after {
    background: #4a0000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
}

.testmonial-area .area-title h2 {
    color: #ffffff;
}

.testmonial-author-img {
    padding: 25px;
    position: relative;
}

.testmonial-author-img::before {
    border-left: 2px solid;
    border-top: 2px solid;
    content: "";
    height: 150px;
    left: 0;
    position: absolute;
    top: 0;
    width: 150px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.testmonial-author-img::after {
    border-bottom: 2px solid;
    border-right: 2px solid;
    bottom: 0;
    content: "";
    height: 150px;
    position: absolute;
    right: 0;
    width: 150px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.testmonial-slider:hover .testmonial-author-img::before,
.testmonial-slider:hover .testmonial-author-img::after {
    border-color: #ff2300;
}

.testmonial-author-img img {
    width: 100%;
}

.testmonial-author-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 348px;
}

.name-and-title {
    color: #ff2300;
    margin-bottom: 20px;
}

.name-and-title h3 {
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.name-and-title p a {
    color: #ff2300;
}

.ratting {
    color: #ff2300;
    font-size: 20px;
    letter-spacing: 4px;
    margin-top: 25px;
}

.testmonial-slider .owl-nav>div {
    display: inline-block;
    font-size: 40px;
    height: 50px;
    margin: -25px 5px 0;
    padding-top: 3px;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 50px;
}

.testmonial-slider .owl-nav>div.owl-next {
    right: 0;
}

.testmonial-slider .owl-nav>div.owl-prev {
    left: 0;
}

.testmonial-slider .owl-nav>div:hover {
    color: #ff2300;
}


/*------------------------------
    9. PRICEING AREA
-------------------------------*/

.single-price {
    background: #ebebeb none repeat scroll 0 0;
    padding-top: 60px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    position: relative;
}

.single-price::after {
    border-right: 150px solid #363636;
    border-top: 50px solid transparent;
    bottom: 0;
    content: "";
    height: 0;
    position: absolute;
    right: 0;
    -webkit-transition: border-color 0.3s ease 0s;
    transition: border-color 0.3s ease 0s;
    width: 0;
}

.price-top-title {
    background: #ffffff none repeat scroll 0 0;
    color: #fff;
    min-height: 110px;
    padding: 20px 0;
    position: relative;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price-title {
    background: #363636 none repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #ff2300;
    height: 150px;
    left: 50%;
    margin-left: -75px;
    padding-top: 49px;
    position: absolute;
    top: -23px;
    width: 150px;
}

.price-details {
    padding: 50px 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    text-align: left;
}

.price-details ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.price-details ul li {
    padding: 7px 0;
}

.price-button {
    border-radius: 0 0 20px 20px;
    padding-bottom: 70px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.price-button a {
    background: #363636 none repeat scroll 0 0;
    border-radius: 50px;
    color: #fff;
    letter-spacing: 1px;
    padding: 15px 40px;
    font-weight: 600;
}

.single-price.active .price-top-title,
.single-price:hover .price-top-title {
    background: #d1d1d1 none repeat scroll 0 0;
}

.single-price.active,
.single-price:hover {
    background: #ebebeb;
    color: #000000;
}

.single-price.active:after,
.single-price:hover:after {
    border-right: 150px solid #ff2300;
    border-top: 50px solid transparent;
}

.single-price.active .price-button a,
.single-price:hover .price-button a {
    background: #ff2300 none repeat scroll 0 0;
    color: #ffffff;
}

.price-button a:hover {
    background: #ffffff !important;
    color: #363636;
}


/*------------------------------
    10. SUBSCRIBER AREA
--------------------------------*/

.subscriber-area {
    color: #fff;
    position: relative;
}

.subscriber-area-bg {
    background: rgba(0, 0, 0, 0) url("img/subscriber_area_bg.jpg") no-repeat scroll center center / cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.subscriber-area-bg::after {
    background: #ff2300 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.9;
    position: absolute;
    top: 0;
    width: 100%;
}

.subscriber-area .area-title h2 {
    color: #363636;
}

.subscriber-area .area-title h2 span {
    color: #ffffff;
}

.subscriber-form form {
    background: #fff none repeat scroll 0 0;
    border-radius: 50px;
    color: #363636;
    height: 50px;
    position: relative;
    width: 100%;
    text-align: center;
}

.subscriber-form input {
    border: 0 none;
    border-radius: 50px 0 0 50px;
    color: #363636;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 70%;
}

.subscriber-form button {
    background: #363636 none repeat scroll 0 0;
    border: 0 none;
    border-left: 1px solid;
    border-radius: 0 50px 50px 0;
    height: 100%;
    letter-spacing: 2px;
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
    text-transform: uppercase;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    font-weight: 600;
    color: #ffffff;
}

.subscriber-form button:hover {
    background: #fff none repeat scroll 0 0;
    color: #363636;
}

.subscriber-form label.error {
    display: inline-block;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 50px;
    max-width: 100%;
}

.subscriber-form label.valid {
    display: inline-block;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 14px;
    max-width: 100%;
}


/*------------------------------
    11. CONTACT AREA
-------------------------------*/

.contact-area {
    position: relative;
    color: #ffffff;
}

.contact-area .area-title h2 {
    color: #ffffff;
}

.contact-area-bg {
    background: rgba(0, 0, 0, 0) url("img/footer_bg.jpg") no-repeat scroll center center / cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.contact-area-bg::after {
    background: #3e0000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
}

.contact-area a {
    color: #ff2300;
}

.contact-area a:hover {
    color: #ffffff;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 30px;
    width: 200px;
}

.contact-social-bookmark {
    margin-top: 40px;
}

.contact-social-bookmark ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.contact-social-bookmark ul li {
    display: inline;
}

.contact-social-bookmark ul li a {
    background: #ff0000 none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    height: 45px;
    margin-right: 7px;
    text-align: center;
    width: 45px;
    line-height: 45px;
    font-size: 20px;
}

.contact-social-bookmark ul li a:hover {
    background: #ff2300 none repeat scroll 0 0;
    color: #fff;
}

.google-map-area {
    border-radius: 50%;
    overflow: hidden !important;
}

.contact-form input,
.contact-form textarea {
    background: transparent none repeat scroll 0 0;
    border: 1px dashed #ff2300;
    border-radius: 0;
    color: #ff2300;
    max-height: 110px;
    min-height: 40px;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #ff2300;
    box-shadow: 0 0 0;
}

.contact-form button {
    background: #ff2300 none repeat scroll 0 0;
    border: 0 none;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 15px 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    color: #ffffff;
}

.contact-area .alert-success {
    background-color: #ff2300;
    border-color: #ff2300;
    color: #363636;
}

.contact-form button:hover {
    background: #ffffff;
    color: #363636;
}


/*------------------------------
    12. FOOTER AREA
-------------------------------*/

.footer-area {
    background: #5e0000 none repeat scroll 0 0;
    color: #ffffff;
    letter-spacing: 1px;
    padding: 20px 0;
}

.footer-area p {
    margin-bottom: 0;
}

.footer-area a {
    color: #ff2300;
}


/*------------------------------
    13. SCROLL TO TOP
-------------------------------*/

.social-fixed {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* space between buttons */
    z-index: 9999;
}

.social-fixed a {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

/* Specific colors */
.social-fixed a.facebook { background: #1877F2; }
.social-fixed a.facebook:hover { background: #0e5ec2; }

.social-fixed a.youtube { background: #FF0000; }
.social-fixed a.youtube:hover { background: #cc0000; }

.social-fixed a.instagram { 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-fixed a.instagram:hover { 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #e14a3b 45%, #b61b88 60%, #1f4ed1 90%);
}

.social-fixed a.whatsapp { background: #25D366; }
.social-fixed a.whatsapp:hover { background: #128C7E; }

.social-fixed a:hover {
    transform: scale(1.1);
}

.navbar-brand {
    float: left;
    height: 55px;
    padding: 0px 15px 10px;
    font-size: 18px;
    line-height: 20px;
}

.navbar-brand img {
    width: 175px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 32.8%);
    grid-auto-rows: minmax(100px, auto);
    grid-column-gap: 0.3%;
    grid-row-gap: 0.2%;
    justify-items: stretch;
    padding-bottom: 1%;
    border-radius: 10px;
}

/*------------------------------
    14. OFFER POPUP 
-------------------------------*/
.popup-overlay {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent background */
    backdrop-filter: blur(5px);
    /* Blur effect */
    z-index: 9998;
    /* Positioned below the popup */
}

/* Show overlay when popup is active */
.popup-overlay.active {
    display: block;
    /* Show overlay */
}

/* Offer Popup */
.popup-container {
    display: none;
    /* Initially hidden */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    max-width: 600px;
    background-color: rgba(0, 0, 0, 0.85);
    /* Darker background for the popup */
    z-index: 9999;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    /* Add a shadow for depth */
    transition: opacity 0.3s ease-in-out;
}

/* Visible popup state */
.popup-container.active {
    display: block;
    /* Show popup */
    opacity: 1;
    /* Set opacity to fully visible */
}

/* Popup Content */
.popup-content {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    overflow: hidden;
    /* Ensures no content overflows */
}

/* Close Button */
.close-popup-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.7);
    /* Darker, transparent background for button */
    border-radius: 50%;
    padding: 5px 10px;
    transition: background-color 0.3s ease-in-out;
}

.close-popup-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #000000;
}

/* Offer Image Styling */
.offer-img {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 80px;
    /* Smaller, more subtle image size */
    z-index: 1;
}

.popup-image-offer {
    border-radius: 15px 15px 0 0;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

/* Book Now Button */
.book-now-btn {
    background-color: #ad0101;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 15px;
    display: inline-block;
    transition: background-color 0.3s ease-in-out;
}

.book-now-btn:hover {
    background-color: #ff6f00;
    color: #fff;
}

/* Popup Animations */
.popup-container {
    opacity: 0;
    /* Initially transparent */
    transition: opacity 0.4s ease, transform 0.3s ease;
}

.popup-container.active {
    opacity: 1;
    /* Fully visible when active */
    transform: translate(-50%, -50%) scale(1.05);
    /* Scale up for effect */
}




/*--*********************************--*/
/* Responsive Design for goolge reviews */
/*--*********************************--*/

.reviews-section {
    text-align: center;
    padding: 50px 20px;
    background: #fff;
    position: relative;
    min-height: 350px;
    overflow: hidden;
}

.subtitle {
    font-size: 14px;
    color: #777;
    margin-bottom: 5px;
}

.reviews-section h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.reviews-container {
    position: relative;
    width: 100%;
    height: 250px;
}

/* Notification card */
.reviews-section {
    text-align: center;
    padding: 50px 20px;
    background: #fff;
    position: relative;
    min-height: 400px;
    overflow: hidden;
}

.subtitle {
    font-size: 14px;
    color: #777;
    margin-bottom: 5px;
}

.reviews-section h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

.reviews-container {
    position: relative;
    width: 100%;
    height: 300px;
}

/* Notification card */
.review-toast {
    position: absolute;
    min-width: 250px;
    max-width: 280px;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(20px);
    animation: slideIn 0.6s ease forwards;
    font-family: sans-serif;
}

.review-toast img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.review-toast-content {
    text-align: left;
}

.review-toast p {
    font-size: 13px;
    margin: 0;
    color: #333;
    line-height: 1.3;
}

.review-toast span {
    font-size: 11px;
    color: #555;
}

/* Pastel color variations */
.pink {
    background: #ffe6f0;
}

.yellow {
    background: #fff4e0;
}

.green {
    background: #e8f9f0;
}

.purple {
    background: #f3e8ff;
}

.blue {
    background: #e6f2ff;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* CHAT BOT  */
.chat-container {
    width: 420px;
    max-width: 100%;
    height: 650px;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    position: relative;
    /* Needed for fixed header positioning */
}

/* Chat Header - Fixed */
.chat-header {
    background-color: #d23f44;
    color: #ffffff;
    padding: 20px 25px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 6px rgba(210, 63, 68, 0.5);
    user-select: text;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    /* Fix to top inside chat container */
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

/* Close Button */
.chat-close-btn {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.botui-container {
    padding-top: 70px;
}

/* Chat Messages Area - Below Header */


/* Floating Chatbot Button */
.chatbot-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s ease;
}

.chatbot-btn:hover {
    background-color: #d23f44;
    transform: scale(1.1);
}

/* Glow Animation */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0px #25d366;
    }

    50% {
        box-shadow: 0 0 15px #25d366;
    }

    100% {
        box-shadow: 0 0 0px #25d366;
    }
}

.chatbot-btn.attention {
    animation: pulseGlow 1s infinite;
}

/* Slide-in Chat Container */
#chat-container {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 350px;
    height: 500px;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transform: translateY(120%);
    opacity: 0;
    transition: all 0.4s ease-in-out;
    z-index: 9998;
}

#chat-container.show {
    transform: translateY(0%);
    opacity: 1;
}

/* CHAT BOT END */