/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : May 24, 2016, 6:50:07 PM
    Author     : aasishj
*/
hr {
    border-top: 1px solid orange;
}

.logo1 {
    color: white !important;
    /* margin-top: 15px !important;
    margin-left: 30px !important;*/
}

.mySlides {
    display: none;
}

.logo-header-name {
    color: #ffff;
    font-size: 27px;
    margin-top: 50px !important;
}

#owl-demo .item {
    margin: 3px;
}

#owl-demo .item img {
    display: block;
    width: 100%;
    height: auto;
}

/**************************** ALL PAGES NAVIGATION STARTS **********************/
.logo>img {
    height: 61px !important;
    width: 128px !important;
}

.all_nav_background {
    background: linear-gradient(135deg, #203b4d 0%, #2a5267 100%) !important;
}

#bs-example-navbar-collapse-1 {
    margin-top: 24px;
}

@media (min-width: 768px) {
    #menu_header_space {
        margin-left: 78px;
    }
}

.navbar-toggle {
    float: right;
}

.navbar {
    margin-bottom: 0px;
}

.navbar-brand {
    padding-top: 0px !important;
}

@media (min-width: 768px) {
    .navbar-nav {
        float: right;
        margin: 0;
    }
}

.navbar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
    margin: 0px;
}

.navbar-brand {
    padding: 0px;
    padding-left: 0px !important;

}

.navbar-default .navbar-nav>li>a:hover {
    color: #e7e7e7;
}

#footer_text {
    width: 177px !important;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
    color: #777;
}

.navbar-default {
    border-radius: 0;
    border-color: #1f3949;
}

.navbar-default .navbar-nav>li>a {
    color: #fff;
}

.input-sm.select {
    margin-top: 10px;
    background-color: #2a4757;
    border: 1px solid black;
    color: #fff;
}

/**************************** ALL PAGES NAVIGATION ENDS **********************/

/**************************** ALL PAGES SIDEBAR STARTS **********************/
.side_columnLeft {
    float: left;
    width: 100%;
    margin-top: 10px;
}

.side_circle {
    width: 50px;
    margin-left: 70px;
    height: 50px;
    border-radius: 50px;
    border: 1px solid #000;
    float: left;
    background-image: url('../images/profilepic.png');
}

.side_label {
    margin-top: 15px;
    width: 100%;
    text-align: center;
}

.side_menu_span {
    font-size: 16px;
    margin-right: 1.3em;
}

@media (min-width: 768px) {
    nav.navbar.navbar-inverse.sidebar {
        position: absolute;
    }

    #change_profile {
        width: 80%;
    }

    #follow_us_text {
        margin-bottom: 20px;
    }

    #contact_us_text {
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    #change_profile {
        width: 60%;
    }
}

.navbar-brand {
    height: inherit;
}

/* .btn.btn-success styles removed - empty ruleset */

#side-tabs a.support {
    background: #00adef;
    left: 0px;
    top: 100px;
    height: 108px;
    width: 45px;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: 9999;
    display: block;

}

/**************************** ALL PAGES SIDEBAR ENDS**********************/

/**************************** MY PROPERTY BUILDING STARTS**********************/
#my_property_building #map {
    width: 100%;
    height: 200px;
}

#my_property_building #table {
    width: 100%;
}

#my_property_building #space_location {
    margin-bottom: 0px;
}

#my_property_building #basic_info {
    margin-top: 40px
}

#my_property_building #basic_info_block {
    line-height: 20px;
}

#my_property_building #space_desc {
    font-size: 14px;
    text-align: justify;
}

/**************************** MY PROPERTY BUILDING ENDS**********************/

/********************** My Property start *******************************/





/********************** My Property end *******************************/


/**************************** SHORTLISTED BUILDING STARTS**********************/
#shortlisted_building #map {
    width: 100%;
    height: 200px;
}

#shortlisted_building #table {
    width: 100%;
}

#shortlisted_building #space_location {
    margin-bottom: 0px;
}

#shortlisted_building #basic_info {
    margin-top: 40px
}

#shortlisted_building #basic_info_block {
    line-height: 20px;
}

#shortlisted_building #space_desc {
    font-size: 14px;
    text-align: justify;
}

.shortlisted_building_slider {
    float: left;
    padding-right: 0px;
}

.shortlisted_building_slider_card {
    padding-right: 0px;
}

/**************************** SHORTLISTED BUILDING ENDS**********************/

/**************************** SHORTLISTED STARTS**********************/
.shortlisted_image {
    width: 100%;
}

.shortlisted_building {
    margin-top: 0px;
}

.shortlisted_ul_style {
    list-style: none;
    padding: 0px;
    margin-left: 15px;
    line-height: 35px;
}

#shortlisted #building_details_font {
    font-family: Myriad Pro !important;
}

/**************************** SHORTLISTED ENDS**********************/

/********************** Property Response starts *******************************/
.property_response_contact {
    font-size: 10px;
}

/********************** Property Response ends *******************************/

/* SPACE INFORMATION STARTS HERE*/
#space_information .radio.radio-inline.col-md-3.col-xs-12 {
    margin: 0px;
}

#space_information input[type="text"] {
    border-bottom: none;
    border: 1px solid #c9c9c9;
}

#space_information input[type="password"] {
    border-bottom: none;
    border: 1px solid #c9c9c9;
}

#space_information label {
    text-align: left !important;
}


#space_information {
    background: #fff;
}

.space_info_style {
    width: 10px;
    margin-top: -4px;
}

.space_info_row_style {
    margin-top: 20px;
    margin-bottom: 20px;
}

#space_information #map {
    width: 100%;
    height: 200px;
}

.space_info_submit_style {
    margin-left: 10px;
}

#live_support {
    transform: rotate(-90deg);
    position: fixed;
    left: -62px;
    top: 250px;
    z-index: 9999;
}

.rotate {
    /* Standard */
    transform: rotate(-90deg);
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.space_info_display {
    display: none;
}

/* SPACE INFORMATION ENDS HERE*/

/********************Detailed Blog Page start here**************************/
#blog_sm_nav {
    background-color: #1f3949;
    border-color: #1f3949;
    border-radius: 5px;
}

#blog_nav_text {
    color: #fff;
    text-align: left;
    padding-left: 40px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.bolg-container {
    /*background: url(../images/musicbg.png) center center no-repeat !important;*/

    width: 98%;
    /*margin-left: 20px;*/
}

.blog-container-fluid {
    width: 100%;
}

#blog_load_btn {
    min-height: 50px;
    color: #fff;
    border-radius: 0px;
    background-color: #9a9898;
}

#blog_post_btn {
    color: #fff;
    border-radius: 0px;
    background-color: #9a9898;
    width: 98px;
    min-height: 48px;
}

#blog_textarea {
    border-radius: 0px;
    background-color: #f1f1f1;
    margin-top: 30px;
    margin-left: 15px;
}

#blog_comment_image {
    margin-top: 30px;
    margin-left: -15px;
}

.carousel-image {
    width: 100%;
    margin-top: 10px;
}

/* Modern scrolling text animation */
.scrolling-text {
    overflow: hidden;
    white-space: nowrap;
    font-size: 20px;
    color: #a4854b;
    padding: 10px;
    background: transparent;
}

.scroll-content {
    display: inline-block;
    animation: scroll-left 15s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Loading spinner for images */
.image-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #a4854b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.carousel-image {
    width: 100%;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.carousel-image.loaded {
    opacity: 1;
}

#blog p {
    text-align: justify;
}

.font_space {
    margin-right: 25px;
}

#blog .breadcrumb {
    background-color: #f1f1f1;
}

#blog .breadcrumbDiv>ol>li a {
    color: #777;
}

#blog .breadcrumb1>a:before {

    color: #CCCCCC;
    content: "<< ";
    padding: 5px0;
}

#blog .breadcrumb2>a:before {
    color: #CCCCCC;
    content: "  ";
    padding: 0 5px;
}

#blog .breadcrumb2>a:after {
    color: #CCCCCC;
    content: ">> ";
    padding: 0 5px;
}

#blog .breadcrumb2 {
    padding-left: 0px;
}

#blog .breadcrumb_home>a:after {

    color: #CCCCCC;
    content: "> ";
    padding: 5px0;
}

#blog .breadcrumb_blog>a:after {
    color: #CCCCCC;
    content: ">  ";
    padding: 0 5px;
}

#blog .breadcrumb>li+li:before {
    padding: 0 5px;
    color: #f1f1f1;
    content: "";
}

#breadcrumbLeft {
    margin-bottom: 5px;
    float: left;
}

#breadcrumbRight {
    margin-bottom: 5px;
    float: right;
}

#blog_trending_now_left {
    width: 49%;
}

#blog_trending_now_right {
    width: 49%;
    margin-left: 12px;
}

.blog_line_space {
    margin-top: 10px;
}

.blog_line_space_comment {
    margin-top: 50px;
}

#image_title1 {
    padding-left: 0px;
}

#image_title2 {
    padding-left: 7px;
}

#blog_footer {
    margin-top: 25px;
}

.blog_btn_subscribe {
    margin-top: 10px;
    background-color: #1f3949;
    color: #fff;
}

.blog_subscribe_img {
    width: 100%;
}

.blog_input_text {
    padding: 10px !important;
    border: none;
    transition: border 0.3s;
    border: 1px solid #ccc !important;
}

.blog_input_text:focus {
    padding: 10px !important;
    border: none;
    transition: border 0.3s;
    border: 1px solid #ccc !important;
}

.blog_input_email {
    padding: 10px !important;
    border: none;
    transition: border 0.3s;
    border: 1px solid #ccc !important;
    width: inherit !important;
}

.blog_input_email:focus {
    padding: 10px !important;
    border: none;
    transition: border 0.3s;
    border: 1px solid #ccc !important;
    width: inherit !important;
}

.blog_input_search {
    padding: 10px;
    border: none;
    transition: border 0.3s;
    border: 0px solid #ccc;
    padding-left: 0px;
    width: 90%;
    float: right;
    box-shadow: none;
}

.blog_input_search:focus {
    padding: 10px;
    border: none;
    transition: border 0.3s;
    border: 0px solid #ccc;
    padding-left: 0px;
    width: 90%;
    float: right;
}

#blog .glyphicon.glyphicon-search {
    top: 7px;
}

.blog_tab {
    background-color: #fff;

    /*padding-top: 10px;
    padding-bottom: 10px;*/
}

.text {
    margin-left: 30px;
}

/*.blog_tab_space{
    padding-left: 180px;
}*/
#blog .nav-tabs li {
    width: calc(100%/5);
    /*padding-top:10px;
    padding-bottom:10px;*/
}

#blog .nav-tabs li:active,
.nav-tabs li:focus {
    width: calc(100%/5);
    /*padding-top:10px;
    padding-bottom:10px;*/
}

#blog #header1-tab {
    text-align: center;
}

#blog #header2-tab {
    text-align: center;
}

#blog #header3-tab {
    text-align: center;
}

#blog #header4-tab {
    text-align: center;
}

#blog #header5-tab {
    text-align: center;
}

#blog .nav-tabs>li>a:hover {
    background-color: transparent;
    border-color: transparent;

}

#blog .nav>li>a:focus,
.nav>li>a:hover {
    background-color: transparent;
    border-color: transparent;

}

/********************Detailed Blog Page End here**************************/

/******************* BLOG STARTS **********************************/

.blog_main_container {
    width: 98%;
    margin-left: 20px;
}

.blog-main-container-fluid {
    width: 100%;
}

.blog_main.bigImage img {
    width: 100%;
    margin: 5px;
    height: 389px;
}

.blog_main.smallImage img {
    width: 100%;
    margin: 5px;
}

.blog_main.bigImage {
    padding: 5px;
}

.blog_main.smallImage {
    padding: 5px;
}

.blog_main .bottom_padding {
    padding: 0px;
}

.blog_main.nav-tabs {
    border-bottom: transparent;
}

#blog_main #bs-example-navbar-collapse-1 {
    margin-top: 24px;
}

/******************* BLOG ENDS **********************************/

/* ACTIVA SPACES CSS STARTS*/

#activa_space #myTab {
    background: #f1f1f1;
}

#activa_space .nav-tabs>li {
    background: #fff;
}

#activa_space .breadcrumb>li+li:before {

    color: #CCCCCC;
    content: "> ";
    padding: 0 5px;
}

#activa_space ol>li {
    display: inline;
    padding-left: 25px;
}

#activa_space .breadcrumb {
    background-color: #f1f1f1;
}

#activa_space .bs-example-tabs .nav-tabs {
    margin-bottom: 0px;
}


#activa_space #links {
    max-height: 460px;

}

#activa_space #image_dimen {
    height: 500px;
    padding-left: 0px;
}

#activa_space .breadcrumDiv {
    background-color: #f1f1f1;
    width: 100%;
    float: left;
}

#activa_space .icon_space {
    margin-right: 5px;
    font-size: 20px;
}

.card_space {
    margin-bottom: 20px;
}

.container-fluid {
    width: 100%;
}

#activa_space .description {
    padding-left: 0px;
    text-align: left;
}

#activa_space #myTab li.active a b {
    border-bottom: 2px solid;
    padding-bottom: 11px;
    padding-left: 10px;
    padding-right: 10px;
}

#activa_space b.text.description {
    padding-left: 10px;
}

#activa_space b.text {
    padding-right: 10px;
}

#activa_space b.text.tab2 {
    padding-left: 10px;
    padding-right: 10px;
}

/*#myTab li{
    padding-left: 10px;
}*/
#activa_space .nav>li>a {
    padding-left: 0px;
    padding-right: 0px;
}

#activa_space .nav>li {
    padding-left: 0px;
}

#activa_space .amenities {
    text-align: center;
}

#activa_space .location {
    text-align: right;
}

#activa_space .nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    border-bottom: none;
}

@media (min-width: 768px) {
    #activa_space .container {
        width: 98%;
        margin-left: 20px;
    }
}

@media (min-width: 768px) {
    #activa_space .nav-tabs>li>a {
        margin-left: 0px;
        width: 100%;
    }
}

#activa_space .activaspaces-thumbnail-wrap {
    padding: 0px;
    padding-right: 20px;
    max-height: 420px;
}

#activa_space #links>a {
    display: block;
    margin-bottom: 10px;
}

#activa_space #links>a>img {
    max-width: 100%;
}

#activa_space .modal-dialog {
    z-index: 9999;
}

#activa_space #imagepreview {
    width: 100%;
    height: 264px;
}

#activa_space .imageresource {
    width: 100%;
    height: 120px;
    margin: 10px;
}

#activa_space .modal-header .close {
    margin: 5px;
    opacity: 1;
    color: #fff;
    width: 20px;
    height: 20px;
}

#activa_space .modal-header {
    padding: 0px;
    float: right;
    border-bottom: transparent;
    margin-right: -12px;
    margin-top: -12px;
    background: #000;
    border-radius: 15px;
}

#activa_space .modal-dialog {
    margin: 10% auto;
    z-index: 9999;
}

#activa_space .scroll-thumbs-nav {
    cursor: pointer;
}

#activa_space .btn.btn-md {
    width: 100%;
    margin: 10px;
}

#activa_space .nav_background {
    background-color: #1f3949;
}

.header_bottom_left {
    margin-bottom: 5px;
    float: left;

}

.header_bottom_right {
    margin-bottom: 5px;
    float: right;
}

.card_padding {
    float: left;
    padding: 15px;
}

.hidden_style {
    float: left;
    padding-right: 0px;

}

.overflow_hidden {
    overflow: hidden;
}

.image_width {
    width: 100%;

}

.font_style1 {
    font-size: 14px;
    text-align: justify;
}

.map_style {
    width: 100%;
    height: 324px;
}

.years_style {
    margin-left: 30px;
}

.trend_style {
    margin-left: 30px;
}

.button_style {
    margin-right: 5px;
}

.col_style {
    margin-left: -15px;
}

.img_style {
    width: 100%;
}

.title_style {
    margin-top: 0px;
}

.ul_style {
    list-style: none;
    padding: 0px;
    margin-left: 15px;

}

.div_style {
    margin-left: 15px;
    padding-right: 1px;

}

.img_style1 {
    width: 100%;
}

.title_style1 {
    margin-top: 0px;
}

.font_style2 {
    background-color: #e29106;
    border-color: #e29106;
}

.row_style {
    margin-top: 10px;
    margin-bottom: 10px;
}

.footer_style1 {
    margin: 5px;
}

/* ACTIVA SPACES CSS  ENDS*/


/********************** COMMON STYLE STARTS *******************************/
@font-face {
    font-family: MerriweatherSans;
    src: url("MerriweatherSans-Regular.ttf") format("truetype"), url('MerriweatherSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    overflow-x: hidden;
    font-family: MerriweatherSans !important;
    height: 100% !important;
}

body {
    font-family: MerriweatherSans !important;
    background-size: cover !important;
}

* {
    margin: 0;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    border: none;
    border-bottom-color: #000;
    border-bottom: 3px solid #000;
}

@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);

div.social-wrap button {
    padding-right: 45px;
    height: 35px;
    background: none;
    border: none;
    display: block;
    background-size: 35px 35px;
    background-position: right center;
    background-repeat: no-repeat;
    border-radius: 4px;
    color: white;
    font-family: "Merriweather Sans", sans-serif;
    font-size: 14px;
    margin-bottom: 15px;
    width: 205px;
    border-bottom: 2px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    box-shadow: 0 4px 2px -2px gray;
    text-shadow: rgba(0, 0, 0, .5) -1px -1px 0;
}

button#facebook {
    border-color: #2d5073;
    background-color: #3b5998;
    background-image: url(../images/facebook-icon.png);
}

button#googleplus {
    border-color: #ff0000;
    background-color: #ff0000;
    text-shadow: #333 -1px -1px 0;
    background-image: url(../images/google-plus-512.png);
}

@media (min-width: 768px) {
    .container_left {
        width: 87%;
        margin-left: 200px;
        padding-left: 0px;
    }
}

@media (max-width: 768px) {
    .container_left {
        width: 100%;
        margin-left: 0px;
    }
}

@media (min-width: 768px) {
    .page_header {
        margin-left: 100px;
    }
}

.rowLeft {
    float: left;
    width: 60%;
}

.rowRight {
    float: right;
}

.all_card_left {
    float: left;
}

.gray_label {
    color: #959595;
}

.gray_date {
    color: #959595;
    margin: 20px;
    font-size: 18px;
}

.image_space {
    padding-left: 0px;
}

.margin_date {
    margin-top: 12px;
}

.map_footer {
    margin-top: -40px;
    background-color: #000;
    position: absolute;
    height: 40px;
    text-align: center;
    font-size: 25px;
    color: #fff;
    opacity: 0.5;
    width: 97%;
}

#footer_links {
    color: #fff;
}

#footer_links a {
    color: #fff;
}

#footer_links a:hover {
    color: #fff;
    text-decoration: underline;
}

#contact_us_text a {
    color: #fff;
}

#contact_us_text a:hover {
    color: #fff;
    text-decoration: underline;
}

#footer_row {
    margin-top: 10px;
    margin-bottom: 10px;
}

#footer_text {
    margin: 5px;
}

#footer_button {
    margin: 5px;
}

#heading {
    padding-right: 0px;
    padding-left: 0px;
    margin-bottom: 20px;
}

.card {
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
    background: #fff;
    padding: 10px;
    height: auto;
    position: relative;
    display: block;
    margin-bottom: .75rem;
    overflow: hidden;
}

.cardspace_one {
    background: #e5e5e5;
}

.shortlisted_building_btn_contact {
    width: 49.5%;
    border-radius: 0px;
}

.shortlisted_building_btn_email {
    width: 49%;
    margin-left: 1%;
    border-radius: 0px;
}

/*********************/
input[type="text"] {
    padding: 10px;
    border: none;
    border-bottom: solid 1px #000;
    transition: border 0.3s;
    padding-left: 10px;
}

input[type="text"]:focus,
input[type="text"].focus {
    border-bottom: solid 2px #000;
    outline: 0;
    padding-left: 10px;
}

input[type="password"] {
    padding: 10px;
    border: none;
    border-bottom: solid 1px #000;
    transition: border 0.3s;
    width: 300px;
    padding-left: 0px;
}

input[type="password"]:focus,
input[type="password"].focus {
    border-bottom: solid 2px #000;
    outline: 0;
    width: 300px;
    padding-left: 0px;
}

input[type="email"] {
    padding: 10px;
    border: none;
    border-bottom: solid 1px #000;
    transition: border 0.3s;
    width: 300px;
}

input[type="email"]:focus,
input[type="email"].focus {
    border-bottom: solid 2px #000;
    outline: 0;
    width: 300px;
}

input[type="date"] {
    width: 180px;
    margin-left: -50px;
}

input[type="date"]:focus,
input[type="date"].focus {
    width: 180px;
    margin-left: -50px;
}

footer {
    color: #fff;
}

.footer_font {
    font-size: 12px;
}

#footer_style {
    background: #1f3948 !important;
    z-index: 9999;
    border-radius: 0px;
    border-color: #1f3948 !important;
}

.anchor_style {
    color: #000;
    text-decoration: none;
}

.wrapper .footer_fix {
    min-height: 100% !important;
}

/* Bootstrap 5 Compatibility - Maintain Original Design */

/* Restore Bootstrap 3 navbar behavior with proper sizing */
.navbar-default {
    background-color: #1f3948 !important;
    border-color: #1f3949 !important;
    border-radius: 0;
    min-height: 70px;
    padding: 8px 0;
}

.navbar-brand {
    padding: 8px 15px !important;
    height: auto;
    display: flex;
    align-items: center;
    color: white !important;
    text-decoration: none;
}

.navbar-brand:hover {
    color: white !important;
    text-decoration: none;
}

.navbar-brand img {
    height: 45px !important;
    width: auto !important;
    margin-right: 12px;
}

.navbar-nav {
    margin: 0;
}

.navbar-nav .nav-link {
    color: #fff !important;
    padding: 20px 15px !important;
    margin: 0 8px;
    font-size: 14px;
    font-weight: 500;
}

.navbar-toggle {
    border: none;
    background: transparent;
}

.navbar-collapse {
    border-top: none;
}

/* Fix Bootstrap 5 grid system for original layout */
.col-md-9, .col-md-3, .col-md-12 {
    padding-left: 15px;
    padding-right: 15px;
}

/* Restore original button styles */
.btn-primary2 {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-primary2:hover {
    background-color: #286090;
    border-color: #204d74;
}

/* Fix alert styles for Bootstrap 5 */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

/* Restore original card styles */
.card {
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
    background: #fff;
    padding: 10px;
    height: auto;
    position: relative;
    display: block;
    margin-bottom: .75rem;
    overflow: hidden;
    border: none;
    border-radius: 0;
}

/* Fix responsive utilities for Bootstrap 5 */
.hidden-xs { display: block !important; }
.visible-xs { display: none !important; }
.visible-md, .visible-lg, .visible-sm { display: block !important; }

@media (max-width: 576px) {
    .hidden-xs { display: none !important; }
    .visible-xs { display: block !important; }
    .visible-md, .visible-lg, .visible-sm { display: none !important; }
}

/* Bootstrap 5 Navbar Fixes */
.navbar-toggler {
    border: none;
    background: transparent;
    padding: 4px 8px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-nav .nav-link {
    color: #fff !important;
    padding: 20px 20px 17px 21px;
    margin: 0 16px 0 13px;
}

.navbar-nav .nav-link:hover {
    color: #e7e7e7 !important;
}

/* Remove body padding - navbar should not be fixed */
body {
    padding-top: 0px;
    font-family: MerriweatherSans !important;
    background-size: cover !important;
}

/* Restore original container layout */
.bolg-container {
    width: 98%;
    margin-left: 20px;
}

.container {
    max-width: none;
    width: 100%;
    margin-left: 0px;
}

/* Fix Bootstrap 5 grid to work like Bootstrap 3 */
.row {
    margin-left: -15px;
    margin-right: -15px;
}

.col-md-9, .col-md-3, .col-md-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
}

.col-md-9 {
    width: 75%;
}

.col-md-3 {
    width: 25%;
}

.col-md-12 {
    width: 100%;
}

/* Add clearfix for proper float clearing */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.clearfix {
    zoom: 1;
}

/* Ensure proper float clearing */
.row::after {
    content: "";
    display: table;
    clear: both;
}

/* Fix navbar active state */
.navbar-nav .nav-link.active {
    color: #e7e7e7 !important;
    font-weight: bold;
}

/* Fix container margins */
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

/* Fix breadcrumb styling */
.breadcrumb {
    background-color: #f1f1f1;
    border-radius: 0;
    margin-bottom: 5px;
    padding: 8px 15px;
}

/* Academy name styling - properly aligned */
.academy-name {
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.5px;
    margin-left: 12px;
    display: inline-block;
    vertical-align: middle;
    line-height: 45px;
    position: absolute;
    left: 39px;
}

/* Compact Gallery Design with Better Spacing */
.video {
    padding: 20px 0;
}

.studentvideo {
    margin-bottom: 25px;
    padding: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: fit-content;
}

.studentvideo:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.studentvideo iframe {
    border-radius: 16px 16px 0 0;
    width: 100%;
    height: 220px;
}

.studentvideo h3 {
    padding: 18px 20px 20px;
    margin: 0;
    font-size: 15px;
    color: #2c3e50;
    line-height: 1.3;
    font-weight: 600;
    background: #fff;
    min-height: 80px;
    display: flex;
    align-items: center;
}

/* YouTube Thumbnail Styling - Enhanced */
.youtube-thumbnail {
    cursor: pointer;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    position: relative;
    height: 220px;
    background: #f8f9fa;
}

.thumbnail-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.youtube-thumbnail:hover .thumbnail-img {
    transform: scale(1.08);
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.youtube-thumbnail:hover .play-overlay {
    opacity: 1;
    background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.8));
}

.play-overlay i {
    font-size: 56px;
    margin-bottom: 12px;
    color: #ff0000;
    text-shadow: 0 4px 8px rgba(0,0,0,0.4);
    filter: drop-shadow(0 2px 4px rgba(255,0,0,0.3));
}

.play-overlay span {
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Modern Gallery Design - YouTube Style */
.modern-gallery {
    padding: 40px 20px;
    background: #fafafa;
    border-radius: 20px;
    margin: 20px 0;
}

.gallery-header {
    text-align: center;
    margin-bottom: 50px;
}

.gallery-title {
    color: #2c3e50;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

.gallery-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #ff0000, #cc0000);
    border-radius: 2px;
}

.gallery-subtitle {
    color: #666;
    font-size: 18px;
    font-style: italic;
    margin-top: 20px;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.video-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.video-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.video-thumbnail {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.video-card:hover .video-thumbnail img {
    transform: scale(1.1);
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(255, 0, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.video-card:hover .play-button {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
    background: #ff0000;
}

.video-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.video-info {
    padding: 20px;
}

.video-title {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
    line-height: 1.3;
}

.video-artist {
    color: #666;
    font-size: 14px;
    margin-bottom: 12px;
    font-weight: 500;
}

.video-stats {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #888;
}

.video-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.video-stats i {
    font-size: 11px;
}

/* Global Font and Color System */
:root {
    --primary-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --secondary-font: 'Arial', sans-serif;
    --primary-color: #1f3948;
    --secondary-color: #2c5282;
    --accent-color: #fbbf24;
    --text-dark: #2d3748;
    --text-light: #718096;
    --text-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-gradient: linear-gradient(135deg, #1f3948 0%, #2c5282 100%);
}

/* Apply global fonts to all elements */
body {
    font-family: var(--primary-font) !important;
    color: var(--text-dark) !important;
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--primary-font) !important;
    font-weight: 600;
    color: var(--text-dark) !important;
    margin-bottom: 1rem;
}

p, span, div, input, textarea, button {
    font-family: var(--primary-font) !important;
}

/* Better form styling */
.form-control {
    font-family: var(--primary-font) !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.3s ease !important;
}

.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(31, 57, 72, 0.25) !important;
}

.form-floating label {
    font-family: var(--primary-font) !important;
}

.btn {
    font-family: var(--primary-font) !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

/* Global Animations and Hover Effects */

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Simple Navigation hover effects - COLOR ONLY */
.navbar-nav .nav-link {
    transition: color 0.2s ease !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

.navbar-nav .nav-link:hover {
    color: #e51c24 !important;
    text-decoration: underline !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-item:active .nav-link,
.navbar-nav .nav-item.active .nav-link {
    color: #e51c24 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* Remove logo animations */
.navbar-brand {
    transition: none !important;
}

.navbar-brand:hover {
    transform: none !important;
}

.navbar-brand img {
    transition: none !important;
}

.navbar-brand:hover img {
    filter: none !important;
}

/* Remove homepage card animations */
.card {
    transition: none !important;
}

.card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

/* Remove button animations */
.btn:hover {
    transform: none !important;
    box-shadow: none !important;
}

.btn:active {
    transform: none !important;
}

/* Social media link hover effects */
.social-links a {
    transition: all 0.3s ease !important;
    display: inline-block;
}

.social-links a:hover {
    transform: translateY(-4px) scale(1.2) !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* Form input hover effects */
.form-control {
    transition: all 0.3s ease !important;
}

.form-control:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.1rem rgba(31, 57, 72, 0.1) !important;
}

/* Fade in animation for page elements */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: none !important;
    opacity: 1 !important;
}

/* Remove all card animations */
.card {
    opacity: 1 !important;
    animation: none !important;
}

.card:nth-child(1) { animation-delay: 0s !important; }
.card:nth-child(2) { animation-delay: 0s !important; }
.card:nth-child(3) { animation-delay: 0s !important; }
.card:nth-child(4) { animation-delay: 0s !important; }

/* Remove image animations */
img {
    transition: none !important;
}

img:hover {
    transform: none;
    filter: none;
}

/* Link hover effects */
a {
    transition: all 0.2s ease !important;
}

a:hover {
    color: var(--primary-color) !important;
    text-decoration: underline !important;
}

/* Remove header animations */
h2, h3 {
    opacity: 1;
    animation: none;
}

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

.pulse-hover:hover {
    animation: pulse 1s infinite;
}

/* Footer hover effects removed */

/* Loading animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Gallery specific animations */
.video {
    transition: all 0.3s ease !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.video:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
}

.video img {
    transition: all 0.3s ease !important;
}

.video:hover img {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.video-stats {
    transition: all 0.3s ease !important;
}

.video:hover .video-stats {
    transform: translateY(-5px);
    opacity: 0.9;
}

/* Homepage gallery carousel smooth hover effects */
.carousel-image {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    cursor: pointer;
}

.carousel-image:hover {
    transform: scale(1.02) !important;
    filter: brightness(1.05) contrast(1.02) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.image-container {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.image-container:hover {
    transform: translateY(-3px) !important;
}

/* Contact info specific animations */
.contact-info-item {
    transition: all 0.3s ease !important;
    padding: 15px;
    border-radius: 8px;
}

.contact-info-item:hover {
    background-color: var(--bg-light);
    transform: translateX(10px);
}

/* Remove breadcrumb animation */
.breadcrumb {
    opacity: 1 !important;
    animation: none !important;
}

/* Loading skeleton animation */
@keyframes skeleton {
    0% {
        background-color: rgba(0, 0, 0, 0.05);
    }
    50% {
        background-color: rgba(0, 0, 0, 0.1);
    }
    100% {
        background-color: rgba(0, 0, 0, 0.05);
    }
}

.skeleton {
    animation: skeleton 1.5s infinite;
}

/* Mobile Responsiveness Fixes */
* {
    transition: none !important;
    box-sizing: border-box !important;
}

html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

.container, .container-fluid {
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    /* Fix all containers */
    .bolg-container {
        padding: 0 10px !important;
        max-width: 100% !important;
    }
    
    /* Fix all cards */
    .card {
        margin: 0.5rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .card_space {
        margin: 0.5rem 0 !important;
        width: 100% !important;
    }
    
    /* Fix all columns */
    .col-md-12, .col-md-3, .col-md-8, .col-md-9, .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px !important;
        margin-bottom: 1rem !important;
    }
    
    /* Fix all images */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Fix mobile navigation */
    .navbar-nav {
        background: var(--primary-color) !important;
        padding: 1rem !important;
        border-radius: 8px !important;
        margin-top: 1rem !important;
    }
    
    .navbar-nav .nav-link {
        color: #ffffff !important;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        color: #e51c24 !important;
        background-color: rgba(225, 28, 36, 0.1) !important;
    }
    
    /* Fix mobile hero sections */
    .hero-section {
        padding: 40px 0 !important;
    }
    
    .display-4 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }
    
    .display-5 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    
    .lead {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
    
    /* Fix mobile gallery - stack cards vertically */
    .video-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
        float: none !important;
        clear: both !important;
    }
    
    .video-grid {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    .video-grid .video-card {
        display: block !important;
        width: 100% !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Fix video thumbnails */
    .video-thumbnail {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .video-thumbnail img {
        width: 100% !important;
        height: auto !important;
        max-height: 200px !important;
        object-fit: cover !important;
    }
    
    /* Fix video info */
    .video-info {
        width: 100% !important;
        padding: 1rem !important;
    }
    
    .video-title {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }
    
    .video-artist {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
    
    /* Fix mobile carousel */
    .carousel-image {
        width: 100% !important;
        height: auto !important;
        max-height: 250px !important;
        object-fit: cover !important;
    }
    
    .image-container {
        width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Fix mobile forms */
    .form-control {
        font-size: 16px !important; /* Prevents zoom on iOS */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix mobile footer */
    footer {
        padding: 1rem 0 !important;
    }
    
    /* Fix mobile instrument cards */
    .d-flex.flex-wrap.justify-content-center {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .mx-2 {
        margin: 0.5rem 0 !important;
        width: 100% !important;
        max-width: 300px !important;
    }
    
    /* Fix old layout elements */
    .aboutlessons, .aboutlessons1, .features {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
        padding: 0 10px !important;
    }
    
    /* Fix classes section specifically */
    .aboutlessons, .aboutlessons1 {
        background: #f8f9fa !important;
        border-radius: 8px !important;
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .aboutlessons li, .aboutlessons1 li, .features li {
        margin-bottom: 0.75rem !important;
        text-align: left !important;
        display: flex !important;
        align-items: center !important;
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    .aboutlessons li:last-child, .aboutlessons1 li:last-child {
        border-bottom: none !important;
    }
    
    .aboutlessons li img, .aboutlessons1 li img {
        margin-right: 12px !important;
        flex-shrink: 0 !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    .aboutlessons li span, .aboutlessons1 li span {
        flex: 1 !important;
        font-size: 0.95rem !important;
        line-height: 1.4 !important;
        color: var(--text-dark) !important;
    }
    
    /* Fix the section heading */
    .aboutlessons + p, .aboutlessons1 + p {
        text-align: center !important;
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        color: var(--primary-color) !important;
        margin: 2rem 0 1rem 0 !important;
        padding: 0 10px !important;
    }
    
    /* Fix center alignment on mobile */
    center {
        text-align: left !important;
        padding: 0 10px !important;
    }
    
    center h1 {
        font-size: 1.8rem !important;
        text-align: center !important;
    }
    
    /* Fix separators */
    .separator {
        width: 100% !important;
        max-width: 200px !important;
    }
    
    /* Fix breadcrumb */
    .breadcrumbDiv {
        padding: 0.5rem 0 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Fix card blocks */
    .card-block {
        padding: 1rem !important;
        width: 100% !important;
    }
    
    /* Fix text alignment */
    p[align="justify"] {
        text-align: left !important;
        padding: 0 5px !important;
    }
    
    /* Fix feature lists */
    .features li {
        display: flex !important;
        align-items: flex-start !important;
        margin-bottom: 1rem !important;
        text-align: left !important;
    }
    
    .features li img {
        margin-right: 10px !important;
        flex-shrink: 0 !important;
    }
    
    .features li span {
        flex: 1 !important;
    }
}

/* Small mobile fixes */
@media (max-width: 480px) {
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .display-4 {
        font-size: 1.5rem !important;
    }
    
    .display-5 {
        font-size: 1.3rem !important;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .lead {
        font-size: 0.95rem !important;
    }
    
    .card-block {
        padding: 0.75rem !important;
    }
    
    /* Fix images on very small screens */
    img[width="150"] {
        width: 100px !important;
        height: auto !important;
    }
    
    img[width="200"] {
        width: 150px !important;
        height: auto !important;
    }
    
    /* Fix icon sizes */
    img[width="20"], img[width="25"] {
        width: 16px !important;
        height: auto !important;
    }
}

/* Homepage specific - no hover effects */
.card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
    background-color: inherit !important;
}

img:hover {
    transform: none !important;
    filter: none !important;
    opacity: inherit !important;
}

.btn:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: inherit !important;
    color: inherit !important;
}

a:hover {
    color: inherit !important;
    text-decoration: none !important;
    transform: none !important;
}

/* Keep only navigation hover effects */
.navbar-nav .nav-link {
    transition: color 0.2s ease, background-color 0.2s ease !important;
}

/* Footer Fix - Use original working styles */
#footer_style {
    background: var(--primary-color) !important;
    z-index: 9999;
    border-radius: 0px;
    border-color: var(--primary-color) !important;
}

.footer_font {
    color: #ecf0f1;
    font-size: 14px;
}

.social-links {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.social-links li {
    display: inline-block;
    margin: 0 15px;
}

.social-links a {
    color: #ecf0f1;
    font-size: 20px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #3498db;
}

/* Responsive Gallery Grid */
@media (min-width: 768px) {
    .studentvideo {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .studentvideo {
        margin-bottom: 20px;
    }
    
    .video h2 {
        font-size: 24px;
        margin-bottom: 25px;
    }
    
    .studentvideo h3 {
        font-size: 14px;
        padding: 15px 18px;
        min-height: 70px;
    }
}

/* .wrapper styles removed - empty ruleset */

#menu_header_space>a:hover {
    color: red;
}

#menu_header_space>a {
    color: white;
}

hr {
    width: 100%;
}

.hr_style {
    width: 90%;
    margin-left: 10px;
    border-color: #959595;
    margin: 0px;
}

@media (max-width: 768px) {
    .clear {
        clear: both;
        margin: 0px;
    }

    .clear_space {
        clear: both;
        margin: 0px;
    }
}

@media (min-width: 768px) {
    .clear {
        clear: both;
        margin: 50px;
    }

    .clear_space {
        clear: both;
        margin: 20px;
    }
}

#building_details_font {
    font-family: Myriad Pro !important;
}

.glyphicon.glyphicon-chevron-up,
.glyphicon.glyphicon-chevron-down {
    font-size: 25px;
    text-align: center;
    color: #959595;
}

.columnLeft {
    float: left;
    width: 50%;
    margin-top: 10px;
}

.columnRight {
    float: left;
    margin-top: 10px;
}

.rowLeft {
    float: left;
    width: 60%;
}

.rowRight {
    float: right;
}

li.glyphicon {
    margin-right: 20px;
    color: #07b3f4;
    margin-bottom: 10px;
}

li.glyphicon span {
    color: #000;
    margin-left: 12px;
}

li {
    padding-left: 0px;
}

li:before {

    display: inline-block;
    margin-left: -2.3em;
    width: 1.3em;
}



.header,
.wrapper,
body {
    width: 100%
}

.menu ul li a,
.welleft h1 {
    font-family: SourceSansPro-Regular;
    text-align: center
}

.certificate,
.homecerti,
.menu ul li,
.welleft {
    float: left
}

#amazon_scroller2 a,
.certificate_content a,
.coin-slider a,
.copyright p a,
.menu ul li a,
.menus li a,
.readmore,
div.pagination a,
div.pagination span.disabled {
    text-decoration: none
}

* {
    margin: 0;
    padding: 0
}

img {
    border: none
}

@font-face {
    font-family: SourceSansPro-Regular;
    src: url(../fonts/SourceSansPro-Regular.eot?#iefix) format('embedded-opentype'), url(../fonts/SourceSansPro-Regular.woff) format('woff'), url(../fonts/SourceSansPro-Regular.ttf) format('truetype'), url(../fonts/SourceSansPro-Regular.svg#SourceSansPro-Regular) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: SourceSansPro-Bold;
    src: url(../fonts/SourceSansPro-Bold.eot?#iefix) format('embedded-opentype'), url(../fonts/SourceSansPro-Bold.woff) format('woff'), url(../fonts/SourceSansPro-Bold.ttf) format('truetype'), url(../fonts/SourceSansPro-Bold.svg#SourceSansPro-Bold) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Play-Bold;
    src: url(../fonts/Play-Bold.eot?#iefix) format('embedded-opentype'), url(../fonts/Play-Bold.woff) format('woff'), url(../fonts/Play-Bold.ttf) format('truetype'), url(../fonts/Play-Bold.svg#Play-Bold) format('svg');
    font-weight: 400;
    font-style: normal
}

body {
    /* background: url(../images/musicbg.png) center center; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover !important;
    ;
    display: table;
    clear: both
}

.header,
.innerheader {
    height: 60px;
    background-color: #b18f12
}

.innerheader {
    width: 1000px;
    margin: 0 auto
}

.menu {
    width: 850px;
    height: 60px;
    margin: 0 auto
}

.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.menu ul li a {
    font-size: 18px;
    color: #282828;
    display: block;
    padding: 20px 20px 17px 21px;
    margin: 0 16px 0 13px
}

.menu ul li a.active,
.menu ul li a:hover {
    color: #f1c517;
    background: #020202;
    height: 23px
}

.welleft h1,
.welleft p {
    font-weight: 400;
    color: #050505
}

.welcome {
    width: 100%;
    height: 580px
}

.innerwelcome {
    width: 1000px;
    margin: 0 auto;
    height: 580px
}

.welleft {
    width: 445px;
    background: #f1c517;
    margin-top: 4px;
    height: 585px
}

.logo {
    /*width:366px;*/
    margin: 0 auto
}

.logo img {
    margin-top: 0px
}

.border {
    width: 265px;
    margin: 4px auto 0;
    height: 23px;
    background-repeat: no-repeat;
    background-image: url(../images/welborder.png)
}

.welleft h1 {
    font-size: 30px;
    margin-top: 6px;
    margin-bottom: 5px
}

.readmore,
.welleft p {
    font-size: 16px;
    font-family: SourceSansPro-Regular
}

.welleft p {
    text-align: justify;
    line-height: 32px;
    line-height: 31px;
    width: 382px;
    margin: 0 auto;
    height: 240px
}

.empty,
.lessons {
    clear: both;
    width: 100%
}

.homeclassic h2,
.readmore {
    color: #f1c517;
    text-align: center
}

.readmore {
    background: #020307;
    padding: 9px
}

.certificate_content h2,
.homeclassic h2 {
    font-family: SourceSansPro-Bold
}

.empty {
    height: 25px
}

.lessons {
    height: 300px
}

.innerlessons {
    width: 990px;
    margin: 0 auto;
    height: 300px
}

.homeclassic {
    float: left;
    width: 295px;
    height: 250px
}

.homeclassic h2 {
    font-size: 17px;
    margin-top: 10px
}

.border1 {
    width: 300px;
    margin: 0 auto;
    height: 46px;
    background-repeat: no-repeat;
    background-image: url(../images/border.png);
    clear: both;
    background-position: center
}

.homecertificates {
    width: 100%;
    height: 260px
}

.inner_homecertificates {
    width: 1000px;
    margin: 0 auto;
    height: 260px
}

.homecerti {
    background: #f1c517;
    width: 490px;
    height: 255px
}

.certificate {
    width: 195px;
    margin-top: 17px;
    margin-left: 15px
}

.certificate_content {
    width: 280px;
    float: right;
    margin-top: 16px
}

.certificate_content h2 {
    font-size: 22px;
    color: #020307;
    margin-left: 6px
}

.certificate_content p {
    color: #020307;
    font-size: 14px;
    text-align: justify;
    line-height: 28px;
    font-family: SourceSansPro-Regular;
    width: 252px;
    margin-left: 8px;
    margin-top: 9px
}

.certificate_content a {
    font-size: 14px;
    font-family: SourceSansPro-Bold;
    color: #020307;
    float: right;
    margin-right: 26px
}

.empty1 {
    float: right;
    width: 256px;
    height: 60px
}

.homevideo {
    float: right;
    width: 498px;
    height: 256px
}

.clearer,
.footer {
    width: 100%
}

.clearer {
    clear: both;
    height: 30px
}

.footer,
.innerfooter {
    height: 50px;
    background: #c09c13
}

.innerfooter {
    width: 1000px;
    margin: 0 auto
}

.copyright {
    float: left;
    width: 650px
}

.copyright p {
    font-family: Play-Bold;
    font-size: 15px;
    margin-top: 18px;
    color: #020307
}

.copyright p a {
    color: #020307
}

.copyright p a:hover {
    color: #fff
}

.social {
    float: right;
    width: 53px;
    margin-top: 14px
}

#games,
.slider {
    width: 496 !important
}

.slider {
    float: right;
    margin-top: 4px;
    height: 531px !important;
    border: 27px solid #f8e8a7 !important
}

.coin-slider {
    overflow: hidden;
    zoom: 1;
    position: relative
}

.coin-slider a {
    outline: 0;
    border: none
}

.cs-active {
    background-color: #B8C4CF;
    color: #FFF
}

#games {
    height: 540 !important
}

#games img {
    display: block !important
}

#cs-buttons-games,
#cs-next-games,
#cs-prev-games {
    display: none !important
}

.content,
.innercontent {
    min-height: 250px;
    display: table
}

.content {
    width: 100%
}

.innercontent {
    width: 1000px;
    margin: 10px auto 0;
    background: #f1c517
}

.innercontent h1 {
    font-size: 32px;
    font-family: SourceSansPro-Regular;
    color: #050505;
    text-align: center;
    font-weight: 400;
    margin-top: 14px
}

.innercontent p {
    color: #020307;
    font-size: 16px;
    text-align: justify;
    font-family: SourceSansPro-Regular;
    line-height: 35px;
    width: 950px;
    margin: 0 auto 14px;
    clear: both
}

.aboutlessons,
.aboutlessons1 {
    margin-bottom: 15px;
}

.aboutlessons li span,
.aboutlessons1 li span {
    font-family: SourceSansPro-Regular;
    color: #020307;
    font-size: 16px;
    text-align: justify;
    line-height: 38px
}

.aboutlessons {
    margin-left: 13px;
    float: left
}

.aboutlessons li {
    list-style: none;
    margin-left: 10px
}

.aboutlessons li span {
    margin-left: 5px
}

.aboutlessons li img {
    top: 3px;
    position: relative
}

.aboutlessons1 {
    margin-left: 13px;
}

.aboutlessons1 li {
    list-style: none;
    margin-left: 10px
}

.aboutlessons1 li span {
    margin-left: 5px
}

.aboutlessons1 li img {
    top: 8px;
    position: relative
}

.features {
    margin-left: 13px;
    margin-bottom: 15px
}

.features li {
    list-style: none;
    margin-left: 10px
}

.features li span {
    color: #020307;
    font-size: 16px;
    text-align: justify;
    font-family: SourceSansPro-Regular;
    line-height: 41px;
    margin-left: 10px
}

.features li img {
    top: 1px;
    position: relative
}

#main {
    width: 824px !important;
    margin: 0 auto
}

#images {
    display: none
}

.panel {
    margin: 0 0 12px
}

ul.exposureThumbs {
    background: #fff;
    border: 7px solid #fff;
    border-right: none;
    padding: 0;
    margin: 0;
    list-style-type: none;
    height: 79px
}

ul.exposureThumbs li {
    background: #111;
    margin: 0 14px 0 0;
    padding: 0;
    text-align: center;
    display: none;
    float: left
}

ul.exposureThumbs li img {
    cursor: pointer
}

ul.exposureThumbs li.last {
    margin: 0
}

.exposureTarget {
    width: 800px;
    height: 600px;
    background-color: #111;
    background-image: url(res/loader.gif);
    background-repeat: no-repeat;
    background-position: center center;
    float: left;
    padding: 0;
    margin: 0;
    border: 8px solid #fff;
    position: relative;
    overflow: hidden
}

.exposureWrapper {
    position: absolute;
    top: 0;
    left: 0
}

.exposureWrapper img {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0
}

.exposureLoaded {
    background-image: none;
    height: 500px !important
}

.exposureData {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2000px;
    height: 45px;
    padding: 7px;
    background: rgba(2, 2, 2, .7);
    color: #fff;
    font-family: SourceSansPro-Regular;
    font-size: 20px;
    display: none
}

ul.exposureThumbs li {
    width: 150px;
    height: 79px
}

.exposureControls a,
.exposureControls span,
.exposureSlideshowControls a {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    padding: 8px;
    background-color: #999;
    display: block;
    float: left;
    margin-top: 15px
}

.certi li,
textarea {
    font-family: SourceSansPro-Regular
}

.exposureSlideshowControls a {
    float: right
}

.exposureControls a,
.exposureSlideshowControls a {
    color: #333;
    text-decoration: none;
    outline: 0
}

.exposureControls a:active,
.exposureControls a:hover,
.exposureSlideshowControls a:active,
.exposureSlideshowControls a:hover {
    background-color: #ddd;
    color: #444
}

.exposurePaging .active {
    color: #111;
    background-color: #fff
}

.clear {
    clear: both
}

p.info {
    margin: 40px auto;
    text-align: center;
    width: 600px
}

p.info a {
    color: #006fc0
}

p.info a:active,
p.info a:hover {
    color: #0084e7
}

#images img {
    width: 150px !important;
    height: 79px !important
}

.certi {
    margin-bottom: 23px;
    margin-left: 4%
}

.certi li {
    color: #020307;
    font-size: 16px;
    text-align: justify;
    line-height: 36px;
    width: 950px;
    margin: 0 auto
}

.address,
.map {
    margin-left: 17px
}

.address {
    float: left;
    width: 400px
}

.enquiryright {
    float: right !important;
    width: 250px
}

.submitBtn {
    width: 100px;
    height: 40px;
    background: #000;
    border-radius: 10px;
    border: none;
    color: #fff;
    margin-top: 20px
}

.txt,
textarea {
    margin-right: 10px;
    border: 1px solid #ccc
}

textarea {
    height: 100px;
    padding: 5px;
    width: 475px
}

.txt {
    width: 229px;
    padding-left: 5px;
    height: 35px;
    margin-bottom: 11px
}

.contactBg {
    width: 496px
}

.error {
    color: red
}

.innercontent h2,
.video h2 {
    color: #020307;
    text-transform: uppercase
}

.map {
    clear: both;
    margin-bottom: 10px
}

.map iframe {
    border: none
}

.innercontent h2 {
    font-size: 22px;
    font-family: SourceSansPro-Bold;
    margin-top: 15px;
    margin-bottom: 10px
}

.visimg {
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transition: background-color 1s, box-shadow 1s, transform .5s;
    -moz-transition: background-color 1s, -moz-box-shadow 1s, -moz-transform .5s;
    -webkit-transition: background-color 1s, -webkit-box-shadow 1s, -webkit-transform .5s;
    -o-transition: background-color 1s, -o-box-shadow 1s, -o-transform .5s
}

.visimg:hover {
    z-index: 10 !important;
    cursor: pointer !important;
    transform: scale(.9) !important;
    -moz-transform: scale(.9) !important;
    -webkit-transform: scale(.9) !important
}

.tilt {
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease
}

.tilt:hover {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
    cursor: pointer
}

.visimg1 {
    transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transition: background-color 1s, box-shadow 1s, transform .5s;
    -moz-transition: background-color 1s, -moz-box-shadow 1s, -moz-transform .5s;
    -webkit-transition: background-color 1s, -webkit-box-shadow 1s, -webkit-transform .5s;
    -o-transition: background-color 1s, -o-box-shadow 1s, -o-transform .5s
}

.visimg1:hover {
    z-index: 10 !important;
    cursor: pointer !important;
    transform: scale(1.5) !important;
    -moz-transform: scale(1.5) !important;
    -webkit-transform: scale(1.5) !important
}

.bottomclear {
    height: 50px;
    width: 1000px;
    margin: 0 auto;
    clear: both
}

.studentvideo iframe {
    margin-top: 10px;
    border: 3px solid #C49981;
    margin-bottom: 10px
}

.studentvideo {
    margin-bottom: 20px;
    height: 310px
}

.studentvideo h3 {
    text-align: center;
    font-size: 16px;
    font-family: SourceSansPro-Regular;
    margin-left: 10px
}

.video h2 {
    font-size: 23px;
    font-family: SourceSansPro-Bold;
    margin-top: 15px;
    margin-bottom: 2px;
    margin-left: 20px;
    clear: both
}

.amazon_scroller {
    padding: 0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -khtml-border-radius: 10px;
    width: 1000px !important;
    margin: 0 auto
}

.amazon_scroller .amazon_scroller_nav {
    position: absolute
}

.amazon_scroller .amazon_scroller_nav li {
    cursor: pointer;
    position: absolute
}

.amazon_scroller .amazon_scroller_mask {
    position: absolute;
    overflow: hidden
}

.amazon_scroller ul {
    float: left;
    padding: 0;
    margin: 0
}

.amazon_scroller ul li {
    padding: 0 2px 0 0;
    list-style: none;
    float: left;
    text-align: justify;
    display: inline;
    margin-left: 6px;
    margin-right: 6px
}

#amazon_scroller2 {
    padding: 0 !important;
    width: 1000px !important;
    clear: both
}

.amazon_scroller_mask {
    width: 978px !important
}

#exposure,
.exposureWrapper img {
    width: 824px !important
}

.exposureWrapper img {
    height: 500px !important
}

.backendbg {
    background: 0 0 !important
}

.menus,
.menus ul {
    background: #f1c517
}

.menus {
    height: 42px;
    width: 1000px;
    border-radius: 5px;
    padding: 0;
    bottom: 13px;
    clear: both
}

.menus li {
    position: relative;
    float: left;
    display: block;
    height: 40px
}

.menus li a {
    display: block;
    padding: 0 13px;
    margin: 6px 0;
    line-height: 28px;
    border-right: 1px solid #FFF;
    font-size: 15px;
    color: #000;
    font-family: "Myriad Pro";
    font-weight: 600
}

.menus li a:hover,
.menus li:hover>a {
    color: #fff
}

.menus li:first-child a {
    border-left: none
}

.menus li:last-child a {
    border-right: none
}

.menus ul {
    position: absolute;
    top: 40px;
    left: 0;
    opacity: 0;
    border-radius: 0 0 5px 5px
}

.backsave,
.menus ul li:last-child a {
    border: none
}

.menus li:hover>ul {
    opacity: 1;
    z-index: 10
}

.menus ul li {
    height: 0;
    overflow: hidden;
    padding: 0
}

.menus li:hover>ul li {
    height: 36px;
    padding: 0;
    overflow: visible;
    z-index: 10
}

.menus ul li a {
    width: 160px;
    padding: 0;
    margin: 0 0 0 11px;
    border: none
}

.menuswrapper {
    width: 1000px;
    margin: 13px auto 0;
    height: 40px
}

.leftwrapper a {
    color: #4A1080
}

.backsave {
    font-weight: 600;
    font-size: 14px;
    width: 107px;
    height: 33px;
    background: #F1C517;
    border-radius: 5px;
    cursor: pointer
}

.style1edit {
    color: #fff
}

.backenpage {
    width: 215px;
    height: 30px
}

.backenpage1 {
    width: 212px;
    height: 29px
}

.loginbg {
    min-height: 350px;
    display: table;
    margin: 0 auto
}

.welcomeback {
    margin-top: 115px
}

.imagetable td {
    font-family: Arial, Helvetica, sans-serif;
    padding: 8px;
    border-style: solid;
    border-width: 1px;
    border-color: #999;
    font-size: 15px;
    color: #fff;
    font-weight: 400
}

.tabel-header {
    background-color: #395269;
    height: 35px;
    font-size: 16px;
    font-family: Bahamas;
    color: #deb887
}

.table {
    width: 1000px;
    margin: 0 auto;
    height: 30px;
    background-color: #000;
    padding-left: 20px
}

.backen-content1 {
    width: 200px
}

.backen-content2 {
    width: 250px
}

div.pagination span.current {
    padding: 2px 5px;
    margin: 2px;
    border: 1px solid #000;
    font-weight: 700;
    background-color: #1C1819;
    color: #FFF;
    position: relative;
    bottom: 2px
}

div.pagination a,
div.pagination span.disabled {
    margin: 2px;
    border: 1px solid #999;
    color: #999;
    position: relative;
    bottom: 2px
}

div.pagination a {
    padding: 2px 5px 0
}

div.pagination span.disabled {
    padding: 2px 5px
}

.bodywrapper {
    min-height: 290px;
    display: table;
    width: 1000px;
    margin: 0 auto
}

.style1edit1 {
    margin-left: 20px
}

.backendesc {
    width: 200px
}

/********************** COMMON STYLE ENDS *******************************/

.mySlides {
    width: 100%;
    height: 550px;
    /* Fixed height */
    object-fit: cover;
    /* Ensures images fit properly */
    transition: opacity 1s ease-in-out;
    /* Smooth transition to prevent flickering */
}

.headline {
    color: black;
    font-size: 16px;
    padding-left: 10px;
}

.art-image {
    padding-left: 10px;
}

.contact {
    background: #f9f8f8;
    overflow: hidden;
    background-size: cover;
}

.contact h3 {
    font-weight: 600;
}

.contact .separator {
    background: #ff5252;
    width: 95px;
    height: 3px;
    float: left;
    margin: 10px 0 30px 0;
}

/*.contact .form-control {
	border-radius:0px;
	padding:25px 15px;
}*/

.contact .submit {
    background: #ff5252;
    color: #fff;
    display: inline-block;
    padding: 5px 20px;
    margin-bottom: 3px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.contact-map iframe {
    border: none;
}


.image-devi {
    max-width: 100%;
    height: 300px;
    max-width: 100%;
    height: 300px;
    border-radius: 0 0 30px 0;
}

.connect-with-us {
    font-size: 20px;
    line-height: 1.2;
    color: #eae8e1;
    padding: 15px 0 20px;
}

.social-links a {
    margin: 0 10px;
    color: #eae8e1;
}

.social-links a:hover {
    color: #fff;
}

.social-links a svg {
    height: 15px;
}

.justify-content-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}

.d-flex {
    display: flex;
}

ul,
li {
    list-style: none;
}

.logo-container {
    position: relative;
    display: inline-block;
}

/* Removed conflicting academy-name rule that was positioning it off-screen */

.image-readmore-container {
    display: flex;
    align-items: center;
    /* Vertically center the items */
    justify-content: center;
    /* Horizontally center the items */
    gap: 10px;
    /* Space between the image and the link */
}

.breadcrumb>.active {
    color: #a4854b
}

.mySlides {
    width: 100%;
    max-width: 100%;
    height: 550px;
}



@media (max-width: 768px) {
    .mySlides {
        width: 100%;
        /* Ensure the images take up full width on smaller screens */
        height: auto;
        /* Maintain aspect ratio */
    }
}

/* ==================== MODERN PROFESSIONAL FOOTER ==================== */

.modern-footer {
    background: linear-gradient(135deg, #2a5267 0%, #3a6b7a 100%);
    color: #ffffff;
    font-family: var(--primary-font);
    margin-top: 50px;
    position: relative;
    overflow: hidden;
}

.modern-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #e29106 0%, #fbbf24 50%, #e29106 100%);
}

.footer-top {
    padding: 60px 0 40px;
    position: relative;
    z-index: 1;
}

.footer-bottom {
    background: linear-gradient(135deg, #203b4d 0%, #2a5267 100%);
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-widget {
    margin-bottom: 30px;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.footer-logo-img {
    height: 25px;
    width: auto;
    margin-right: 8px;
}

.footer-brand {
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    white-space: nowrap;
    line-height: 1.2;
    position: absolute;
    left: 25px;
    top: 65px;
}

.footer-description {
    color: #f0f0f0;
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 400;
}

.footer-contact p {
    color: #f0f0f0;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
}

.footer-contact i {
    width: 20px;
    color: #e29106;
    margin-right: 10px;
}

.footer-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 10px;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #e29106;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #f0f0f0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
}

.footer-links i {
    font-size: 10px;
    margin-right: 8px;
    color: #e29106;
}

.footer-social-text {
    color: #f0f0f0;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 400;
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.social-icon.facebook:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.social-icon.instagram:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.social-icon.youtube:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.social-icon.whatsapp:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.footer-newsletter {
    margin-top: 20px;
}

.newsletter-text {
    color: #f0f0f0;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 400;
}

.newsletter-form {
    display: flex;
    gap: 8px;
}

.newsletter-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    color: #ffffff;
    font-size: 14px;
    outline: none;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.newsletter-input:focus {
    border-color: #e29106;
    background: rgba(255, 255, 255, 0.2);
}

.newsletter-btn {
    width: 42px;
    height: 42px;
    border: none;
    background: #e29106;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.newsletter-btn:hover {
    background: #e29106;
}

.copyright-text {
    color: #f0f0f0;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
}

.footer-bottom-links {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}

.footer-bottom-links a {
    color: #f0f0f0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #e29106;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(226, 145, 6, 0.3);
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    text-decoration: none;
}

.whatsapp-float:hover {
    background: #128C7E;
    color: #fff;
    text-decoration: none;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: #e29106;
}

/* ==================== RESPONSIVE DESIGN ==================== */

@media (max-width: 1199px) {
    .footer-top {
        padding: 55px 0 35px;
    }
    
    .footer-logo-img {
        height: 50px!important;
        width: auto!important;
    }
    
    .footer-brand {
        font-size: 11px;
    }
}

@media (max-width: 991px) {
    .footer-top {
        padding: 50px 0 30px;
    }
    
    /* Make sections side-by-side on tablets */
    .footer-widget {
        margin-bottom: 25px;
    }
    
    .footer-widget:nth-child(1),
    .footer-widget:nth-child(2) {
        width: 50%;
        float: left;
        padding-right: 15px;
    }
    
    .footer-widget:nth-child(3),
    .footer-widget:nth-child(4) {
        width: 50%;
        float: left;
        padding-left: 15px;
    }
    
    .footer-logo {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        margin-bottom: 15px;
    }
    
    .footer-logo-img {
        margin-bottom: 6px;
        margin-right: 0;
        height: 12px;
    }
    
    .footer-brand {
        font-size: 10px;
        text-align: left;
        white-space: nowrap;
    }
    
    .footer-description {
        font-size: 14px;
        margin-bottom: 15px;
    }
    
    .footer-contact p {
        font-size: 13px;
        margin-bottom: 8px;
    }
    
    .footer-title {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    .footer-links a {
        font-size: 13px;
    }
    
    .footer-social-text {
        font-size: 13px;
    }
    
    .newsletter-text {
        font-size: 13px;
    }
    
    .newsletter-input {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .social-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }
    
    .newsletter-btn {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .footer-top {
        padding: 40px 0 25px;
    }
    
    /* Reset to single column on mobile */
    .footer-widget {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: 25px;
        text-align: center;
    }
    
    .footer-logo {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .footer-logo-img {
        margin-bottom: 10px;
        margin-right: 0;
        height: 50px !important;
        width: auto !important;
    }
    
    .footer-brand {
        font-size: 12px;
        text-align: center;
        white-space: nowrap;
        position: static;
        left: auto;
        top: auto;
    }
    
    .footer-description {
        font-size: 13px;
        text-align: center;
        margin-bottom: 15px;
    }
    
    .footer-contact {
        text-align: center;
    }
    
    .footer-contact p {
        font-size: 13px;
        justify-content: center;
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }
    
    .footer-title {
        font-size: 15px;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-links {
        text-align: center;
    }
    
    .footer-links a {
        font-size: 13px;
        justify-content: center;
    }
    
    .footer-social-text {
        font-size: 13px;
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .social-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .footer-newsletter {
        text-align: center;
    }
    
    .newsletter-text {
        font-size: 13px;
        text-align: center;
    }
    
    .newsletter-form {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    
    .newsletter-input {
        width: 100%;
        max-width: 280px;
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .newsletter-btn {
        width: 100%;
        max-width: 280px;
        height: 40px;
        border-radius: 25px;
        font-size: 13px;
    }
    
    .footer-bottom {
        padding: 15px 0;
    }
    
    .footer-bottom-links {
        justify-content: center;
        margin-top: 10px;
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .copyright-text {
        text-align: center;
        font-size: 13px;
    }
    
    .footer-bottom-links a {
        font-size: 12px;
    }
    
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .footer-top {
        padding: 35px 0 20px;
    }
    
    .footer-widget {
        margin-bottom: 20px;
    }
    
    .footer-logo {
        margin-bottom: 12px;
    }
    
    .footer-logo-img {
        height: 8px;
        margin-right: 4px;
    }
    
    .footer-brand {
        font-size: 8px;
        white-space: nowrap;
    }
    
    .footer-description {
        font-size: 12px;
        margin-bottom: 12px;
    }
    
    .footer-contact p {
        font-size: 12px;
        margin-bottom: 6px;
    }
    
    .footer-title {
        font-size: 14px;
        margin-bottom: 12px;
    }
    
    .footer-links a {
        font-size: 12px;
    }
    
    .footer-social-text {
        font-size: 12px;
        margin-bottom: 12px;
    }
    
    .social-icon {
        width: 34px;
        height: 34px;
        font-size: 13px;
        gap: 10px;
    }
    
    .newsletter-text {
        font-size: 12px;
        margin-bottom: 10px;
    }
    
    .newsletter-input {
        max-width: 250px;
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .newsletter-btn {
        max-width: 250px;
        height: 36px;
        font-size: 12px;
    }
    
    .footer-bottom {
        padding: 12px 0;
    }
    
    .copyright-text {
        font-size: 12px;
    }
    
    .footer-bottom-links {
        gap: 12px;
    }
    
    .footer-bottom-links a {
        font-size: 11px;
    }
    
    .back-to-top {
        bottom: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .footer-top {
        padding: 30px 0 15px;
    }
    
    .footer-widget {
        margin-bottom: 15px;
    }
    
    .social-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
        gap: 8px;
    }
    
    .newsletter-input {
        max-width: 220px;
        font-size: 11px;
    }
    
    .newsletter-btn {
        max-width: 220px;
        height: 34px;
        font-size: 11px;
    }
}

/* ==================== FOOTER ANIMATIONS ==================== */

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

.footer-widget {
    animation: fadeInUp 0.6s ease-out;
}

.footer-widget:nth-child(1) { animation-delay: 0.1s; }
.footer-widget:nth-child(2) { animation-delay: 0.2s; }
.footer-widget:nth-child(3) { animation-delay: 0.3s; }
.footer-widget:nth-child(4) { animation-delay: 0.4s; }

/* ==================== NOTIFICATION TOAST SYSTEM ==================== */

.notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    max-width: 400px;
    background: var(--primary-color);
    color: var(--text-white);
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    font-family: var(--primary-font);
}

.notification-toast.show {
    transform: translateX(0);
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-toast i {
    font-size: 18px;
    flex-shrink: 0;
}

.notification-toast.notification-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.notification-toast.notification-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.notification-toast.notification-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.notification-toast span {
    font-size: 14px;
    line-height: 1.4;
}

/* Responsive notifications */
@media (max-width: 768px) {
    .notification-toast {
        top: 10px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
    
    .notification-content {
        gap: 10px;
    }
    
    .notification-toast i {
        font-size: 16px;
    }
    
    .notification-toast span {
        font-size: 13px;
    }
}