/* Start Variables */
:root{
    --primary-color: #F7600E;
    --secondary-color: #F1DEDB;
    --lang-color: #3F537F;
    --lang-list: #C0C9EE;
    --background-color: #FFE3BB;
    --location-color: #BE7700;
    --main-transition: 0.3s ease-in-out;

    --paragraph-color: #FFA673;
}
/* End Variables */

/* Start Global Rules */
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html{ 
    scroll-behavior: smooth;
    scrollbar-color: var(--primary-color) var(--secondary-color);
}

body{
    font-family: "Roboto", 'Merriweather', serif;
    padding: 0;
    margin: 0;
}

a{ text-decoration: none; }

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

.container{
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto;
}

/* Small Screens */
@media (min-width: 768px) {
	.container {
		width: 750px;
	}
}

/* Medium Screens */
@media (min-width: 992px) {
	.container {
		width: 970px;
	}
}

/* Large Screens */
@media (min-width: 1200px) {
	.container {
		width: 1170px;
	}
}

.spikes::before{
    content: "";
    position: absolute;
    right: 0;
    width: 100%;
    height: 20px;
    z-index: 1;
    background-image: linear-gradient(135deg, #FFF 25%, transparent 25%),
        linear-gradient(225deg, #FFF 25%, transparent 25%);
    background-size: 20px 20px;
}
/* End Global Rules */

/* Start Main Div For Languages */
.main{ 
    /* background-color: #b7b9bb;   */
    background-color: #4E6390;
    /* background-color: #C0C9EE69; */
    /* background-color: var(--lang-list) */
}

.main .container .main-currency .currency-list li a i,
.main .container .main-currency .lang-list li a,
header .container .nav-bar ul > li .realestate-list li{ transition: var(--main-transition); }

.main .container .main-currency .currency-list li a i:hover{ color: #444; }

/* .main .container .main-currency .lang-list li a:hover{ opacity: 0.5; } */
.main .container .main-currency #flag-menu a{  opacity: .8 }

.main .container .main-currency #flag-menu a:hover,
.main .container .main-currency #flag-menu a.active { opacity: 1 }

.main .container .main-currency .lang-list li a img{
    width: 20px;
    height: 20px;
}
/* End Main Div For Languages */

/* Start Header */
header{ 
    /* background-color: #e4e7ec;  #121E39CC */
    background-color: #121E39;
    /* background-color: var(--lang-color); */
    position: relative;
    overflow: visible;
    z-index: 1000; 
}

header .container .logo{
    width: 110px;
    height: 85px;
    overflow: hidden;
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Mobile Navigation Toggle Button */
.menu-toggle {
    display: none;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 2000;
    flex-direction: column;
    gap: 5px;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #FFF;
    margin: 50;
    transition: 0.3s;
}

/* Hamburger Animation */
.menu-toggle.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }

.menu-toggle.active span:nth-child(2) { opacity: 0; }

.menu-toggle.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }

header .container .nav-bar ul > li > a{
    color: #FFF;   
    overflow: hidden;
    transition: var(--main-transition);
    pointer-events: auto !important; /* Ensure links are clickable/hoverable */
    cursor: pointer;
}

header .container .nav-bar ul > li > .list::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: -100%;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
    transition: var(--main-transition);
}

/* Hover styles for navigation links */
header .container .nav-bar ul > li > .list:hover,
header .container .nav-bar ul > li > .list.active { color: var(--primary-color) !important; }

header .container .nav-bar ul > li > .list:hover::before,
header .container .nav-bar ul > li > .list.active::before { left: 0; }

header .container .nav-bar ul > li .realestate-list{
    opacity: 0;
    background-color: #F7600EDE;
    border-radius: 8px;
    min-width: 120px;
    -webkit-box-shadow: 0 10px 15px 0 #3953524a;
    -moz-box-shadow: 0 10px 15px 0 #3953524a;
    -o-box-shadow: 0 10px 15px 0 #3953524a;
    box-shadow: 0 10px 15px 0 #3953524a;
    z-index: 1;
    overflow: hidden;
    transition: opacity .5s ease-in-out;
}

header .container .nav-bar ul > li .realestate-list li{
    position: relative;
    padding: 5px 10px 10px 10px;
    transition: var(--main-transition);
}

header .container .nav-bar ul > li .realestate-list li:not(:last-child){ border-bottom: 1px solid #ffe7d3a4; }

header .container .nav-bar ul > li .realestate-list li::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: #ffe7d3;
    z-index: -1;
    transition: var(--main-transition);
}

header .container .nav-bar ul > li .realestate-list li:hover::before{ width: 100%; }

header .container .nav-bar ul > li .realestate-list li a{ color: #000;}

header .container .nav-bar ul > li:hover .realestate-list{ opacity: 1; }

/* Prevent hover state from sticking on touch devices */
/* @media (hover: hover) and (pointer: fine) {
    /* Only apply hover styles on devices with precise pointers (not touch) */
    header .container .nav-bar ul > li > .list:hover,
    header .container .nav-bar ul > li > .list:hover::before { transition: var(--main-transition) }
/* } */

/* Ensure active state works on all devices */
/* header .container .nav-bar ul > li > .list.active { color: var(--primary-color) !important; }

header .container .nav-bar ul > li > .list.active::before {  left: 0 !important; }  */


/* ========================================
   TABLET & MOBILE (max-width: 767px) & (max-width: 991px)
   ======================================== */
@media (max-width: 767px) {
    .main .container .main-currency .lang-list li a img {
        width: 16px;
        height: 16px;
    }

    header .container .nav-bar ul > li > a { font-size: 14px;  }
}

@media (max-width: 991px) {
    .main{ padding: 5px 0 !important; }

    /* Main Language Bar */
    .main .container {
        gap: 12px;
        padding: 10px 15px !important;
    }

    .main .container .call {  order: 1;  }
    
    .main .container .main-currency {
        order: 2;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }
    
    /* Hide separator on mobile */
    .main .container .main-currency .separator { display: none;  }
    
    /* Currency & Language Wrappers */
    .currency-wrapper,
    .language-wrapper { position: relative; }
    
    /* Mobile Toggle Buttons */
    .mobile-dropdown-toggle {
        display: flex !important;
        align-items: center;
        gap: 5px;
        padding: 5px 10px;
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 20px;
        color: white;
        font-size: 13px;
        cursor: pointer;
        transition: all var(--main-transition);
    }
    
    .mobile-dropdown-toggle:hover { background: rgba(255, 255, 255, 0.3);  }
    
    .mobile-dropdown-toggle.active { background: rgba(255, 255, 255, 0.25);  }
    
    .mobile-dropdown-toggle i:last-child {
        font-size: 10px;
        transition: transform var(--main-transition);
    }
    
    .mobile-dropdown-toggle.active i:last-child { transform: rotate(180deg);   }
    
    /* Hide horizontal lists on mobile by default */
    .currency-wrapper .currency-list,
    .language-wrapper .lang-list {
        display: none !important;
        position: absolute;
        background: white;
        border-radius: 12px;
        padding: 3px 0;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        width: 100%;
        z-index: 1000;
        top: 100%;
        left: 0;
        margin-top: 5px;
        flex-direction: column !important;
    }
    
    
    /* Show dropdown when active */
    .currency-wrapper .currency-list.show,
    .language-wrapper .lang-list.show { display: flex !important;  }
    
    /* Dropdown Items */
    .currency-wrapper .currency-list li,
    .language-wrapper .lang-list li {
        padding: 0 !important;
        width: 100%;
    }
    
    .currency-wrapper .currency-list li a,
    .language-wrapper .lang-list li a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        padding: 8px 10px;
        color: #333 !important;
        font-size: 13px;
        width: 100%;
    }
    
    .currency-wrapper .currency-list li a i {
        font-size: 16px;
        color: #333 !important;
    }
    
    .language-wrapper .lang-list li a img {
        width: 20px;
        height: 20px;
    }

    /* Header Navigation */
    header .container .logo {
        width: 75px;
        height: 60px;
    }
    
    .menu-toggle { 
        display: flex;
        flex-direction: column;
    }
    
    header .container .nav-bar {
        display: block !important;
        position: fixed !important;
        top: 91px;
        right: -100%;
        width: 280px;
        height: 100vh;
        background-color: #121E39;
        padding: 80px 20px 20px;
        transition: right 0.5s ease-in-out;
        z-index: 1999;
        overflow-y: auto;
        visibility: visible;
    }

    header .container .nav-bar.active { right: 0 !important;  }
    
    header .container .nav-bar ul {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    header .container .nav-bar ul > li {
        width: 100%;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    header .container .nav-bar ul > li > a {
        display: block;
        padding: 15px 10px;
        width: 100%;
    }

    /* Dropdown Menu */
    header .container .nav-bar ul > li .realestate-list {
        position: static !important;
        opacity: 1 !important;
        background-color: #F7600EDE;
        margin-top: 0;
        display: none;
        transition: var(--main-transition);
    }
    
    header .container .nav-bar ul > li:hover .realestate-list,
    header .container .nav-bar ul > li .realestate-list.show { display: block; }

    /* Landing Section */
    .landing {  height: calc(100vh - 122px) !important;   }
    
    .landing .glide h2 { display: none; }
}

/* ========================================
   SMALL MOBILE (max-width: 480px) - Overrides
   ======================================== */
@media (max-width: 480px) {
    .main .currency-wrapper span,
    .main .language-wrapper span{  display: none }

    .main .currency-wrapper ul,
    .main .language-wrapper ul{ z-index: 2000; }

    .language-wrapper .lang-list {
        width: fit-content;
        left: auto;
        right: 0;
    }

    header .container .nav-bar{ 
        top: 115px;  
        width: 200px;
    }
}
/* End Header */

/* Start Landing */
.landing{ height: calc(100vh - 130px); }

.landing .glide h2{
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 45px;
    color: #000;
    font-weight: 900;
    padding: 10px 15px;
    background-image: linear-gradient(180deg, #F7600EA8, var(--secondary-color));
    border-radius: 10px;
}

.landing .glide .glide__arrows button{ padding: 5px 10px; }

.landing .glide .glide__arrows button:hover{ background-color: #F6F6F64F; }
/* End Landing */

/* Start Search Box */
.search-box .container .box{
    border: 1px solid #EEE;
    background-color: #e4e7ec;  
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-box-shadow: 0 0 10px #DDD;
    -moz-box-shadow: 0 0 10px #DDD;
    -o-box-shadow: 0 0 10px #DDD;box-shadow: 0 0 10px #DDD;
}

.search-box .container .box form .main-feilds > div,
.search-box .container .box form .advanced .hide > div{
    min-width: 180px;
    height: 35px;
    display: flex;
}

.search-box .container .box form .main-feilds .col-keywords input,
.search-box .container .box form .advanced .hide input{
    width: 180px;
    height: 35px;
    background-color: var(--lang-list);
    border: none;
    outline: none;
    font-size: 17px;
}

.search-box .container .box form .main-feilds .col-keywords input::placeholder,
.search-box .container .box form .advanced .hide input::placeholder{ color: #999; }

.search-box .container .box form .main-feilds > div select,
.search-box .container .box form .advanced .hide > div select{
    width: 100%;
    height: 100%;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    padding-left: 15px;
    padding-right: 15px;
    background: var(--lang-list);
    font-size: 17px;
}

.search-box .container .box form .main-feilds > div select:hover,
.search-box .container .box form .advanced .hide select:hover{ border-bottom: 1px solid var(--lang-color); }

.search-box .container .box form .main-feilds > div .icon-down,
.search-box .container .box form .advanced .hide > div .icon-down{
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lang-color);
    font-size: 19px;
    color: #F2F2F2E3;
    pointer-events: none;
}

.search-box .container .box .main-feilds button:hover{ background-color: #000000c2; }

.search-box .container .box form .advanced button{
    background-color: transparent;
    border: none;
}

.search-box .container .box form .advanced .hide input{ background-color: #99999954; }

/**** Responsive: Stack Elements Vertically on Smaller Screens ****/
@media (max-width: 991px) {
    .search-box .container .box form{ justify-content: center !important; }

    .search-box .container .box form .main-feilds { 
        flex-direction: column;
        align-items: normal;
    }

    .search-box .container .box form .main-feilds,
    .search-box .container .box form .advanced .hide{ width: 100%; }    

    .search-box .container .box form .main-feilds > div {
        width: 100% !important;
        height: 30px !important;
        margin-bottom: 10px;
    }
    
    .search-box .container .box form .main-feilds > div:first-of-type{ margin-bottom: 15px; }

    .search-box .container .box form .main-feilds > div:first-of-type input{ width: 100% !important; }

    .search-box .container .box form .main-feilds > div select,
    .search-box .container .box form .advanced .hide > div select{ font-size: 16px !important; }

    .search-box .container .box form .main-feilds button { width: 100%; }

    .search-box .container .box form .advanced .hide{ gap: 15px; }

    .search-box .container .box form .advanced .hide > div { width: 100%; }
}
/* End Search Box */


/**** Style Search Results Page ****/
/* Start Landing Search */
.landing-search{
    min-height: 35vh;
    background-image: url(../images/services/img4.webp);
    background-size: cover;
}
/* End Landing Search */

/* Start Search Box Results */
.search-results .container .box{ top: 0px; }

@media (max-width: 991px) {
    .search-results{ margin-bottom: 100px !important; }
    
    .search-results .container .box {
        position: relative;
        top: 0 !important;
        left: 50%;
        transform: translateX(-50%) !important;
        width: 450px;
    }
    
    .search-results .container .box form .advanced{ width: 100%; }
}

@media (max-width: 767px) {
    .search-results .container .box{ width: 230px; }
}
/* End Search Box Results */

/* Start Discover By Area */
.discover .container .area .item{
    width: 300px;
    height: 200px;
    overflow: hidden;
    border: none;
    border-radius: 100px;
    transition: var(--main-transition);
}

.discover .container .area .item .overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #F1DEDBB5;
    text-align: center;
    color: var(--primary-color);
    display: none;
    transition: var(--main-transition);
}

.discover .container .area .item:hover .overlay{ display: block; }

.discover .container .area .item .overlay h2{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
    .discover .container .area .item .overlay{ display: block; }
}

@media (max-width: 991px) { 
    .discover{ margin-top: 280px !important; }

    .discover h1,
    .hot-offers h2,
    .projects h2,
    .alanya-projects h2,
    .antalya-projects h2,
    .istanbul-projects h2,
    .landing-about h2,
    .landing-services h2,
    .landing-blog h2,
    .landing-article h2,
    .landing-team h2,
    .landing-contact h2,
    .comparison h2,
    .landing-faq h2,
    .landing-search h2{ font-size: 42px !important; }

    .faq h2{ font-size: 35px !important; }
}

@media (max-width: 767px) { 
    .discover h1{ font-size: 33px !important; }

    .hot-offers h2,
    .projects h2,
    .alanya-projects h2,
    .antalya-projects h2,
    .istanbul-projects h2{ font-size: 33px !important; }

    .faq h2{ font-size: 27px !important; }

    .faq .container .view-all{ font-size: 17px !important; }
}
/* End Discover By Area */

/* Start Hot Offers */
.hot-offers .container .contents .glide{
    background-color: #F1DEDB5C;
    margin: auto;
    border: 1px solid var(--secondary-color);
}

.hot-offers .container .contents .glide .glide__arrows button{
    padding: 3px 8px;
    border-radius: 50%;
}

.hot-offers .container .contents .glide .glide__arrows button:hover{ background-color: #F1DEDB5C; }
/* End Hot Offers */

/* Start Latest Properties */
.projects .container .contents,
.hot-offers .container .contents{ 
    grid-template-columns: repeat(auto-fill, minmax(250px, auto)); 
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.projects .container .contents .box,
.hot-offers .container .contents .box{
    display: flex;
    flex-direction: column;
    height: 100% !important;
    min-height: 450px;
    background-color: #EEE;
    overflow: hidden;
    border: 1px solid #F6F6F6;
    border-radius: 20px 20px 10px 10px;
    transition: var(--main-transition);
    z-index: 1; /* Ensure pseudo-elements appear above content */
}

.projects .container .contents .box::after,
.hot-offers .container .contents .box::after{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 5px;
    background-image: linear-gradient(100deg, #ed1e79, #662d8c);
    transition: var(--main-transition);
    z-index: 2; /* Ensure ::after appears above content */
}

.projects .container .contents .box::before,
.hot-offers .container .contents .box::before{
    content: "";
    position: absolute;
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 5px;
    background-image: linear-gradient(100deg, #ed1e79, #662d8c);
    transition: var(--main-transition);
    z-index: 2; /* Ensure ::before appears above content */
}

.projects .container .contents .box:hover::after,
.hot-offers .container .contents .box:hover::after{ left: 0;}

.projects .container .contents .box:hover::before,
.hot-offers .container .contents .box:hover::before{ right: 0;}

.projects .container .contents .box:hover,
.hot-offers .container .contents .box:hover{
    -webkit-box-shadow: 5px 5px 15px #F2F2F2;
    -moz-box-shadow: 5px 5px 15px #F2F2F2;
    -o-box-shadow: 5px 5px 15px #F2F2F2;
    box-shadow: 5px 5px 15px #F2F2F2;
}

.projects .container .contents .box .type,
.hot-offers .container .contents .box .type{
    top: 0;
    left: 0;
    background: #005246;
    color: #FFF;
    padding: 5px 20px;
    border-radius: 20px 0px 20px 0;
    font-weight: 500;
}

.projects .container .contents .box .image,
.hot-offers .container .contents .box .image{
    min-width: 250px;
    height: 230px;
}

.projects .container .contents .box .image .discount,
.hot-offers .container .contents .box .image .discount{
    top: 0;
    right: 0;
    background-color: #E71D36;
    padding: 3px 13px 3px 5px;
}

.projects .container .contents .box .image .sea-view,
.hot-offers .container .contents .box .image .sea-view{
    top: 40px;
    right: 0;
    background-color: #30A9DE;
    padding: 3px 13px 3px 10px;
}

.projects .container .contents .box .image .sea-view::before,
.hot-offers .container .contents .box .image .sea-view::before{
    content: "";
    position: absolute;
    top: 0;
    left: -32px;
    border-width: 14px 13px 14px 20px;
    border-style: solid;
    border-color: transparent #30A9DE transparent transparent;
}

.projects .container .contents .box .image .resale,
.hot-offers .container .contents .box .image .resale{
    top: 165px;
    right: 0;
    background-color: var(--location-color);
    border: 2px solid #FFF;
    padding: 2px 10px;
}

.projects .container .contents .box .image .hot,
.hot-offers .container .contents .box .image .hot{
    top: 108px;
    left: 0;
    background-color: #D81159;
    border: 2px solid #FFF;
    padding: 2px 10px;
}

.projects .container .contents .box .image .sea-front,
.hot-offers .container .contents .box .image .sea-front{
    top: 83px;
    right: 0;
    background-color: #3454D1;
    padding: 2px 10px;
}

.projects .container .contents .box .image .sea-front::before,
.hot-offers .container .contents .box .image .sea-front::before{
    content: "";
    position: absolute;
    top: 0;
    left: -32px;
    border-width: 12px 13px 14px 20px;
    border-style: solid;
    border-color: transparent #3454D1 transparent transparent;
}

.projects .container .contents .box .image .exc,
.hot-offers .container .contents .box .image .exc{
    top: 65px;
    left: 0;
    background-color: #534847;   /* #732665 */
    border: 2px solid #FFF;
    padding: 2px 10px;
}

.projects .container .contents .box .image .invest,
.hot-offers .container .contents .box .image .invest{
    top: 203px;
    left: 0;
    background-color: #4f953b;   
    padding: 3px 10px;
}

.projects .container .contents .box .image .invest::before,
.hot-offers .container .contents .box .image .invest::before{
    content: "";
    position: absolute;
    top: 0;
    right: -20px;
    border-style: solid;
    border-color: transparent transparent transparent #4f953b;
    border-width: 0px 0px 27px 20px;
}

.projects .container .contents .box .image .mount-view,
.hot-offers .container .contents .box .image .mount-view{
    top: 122px;
    right: 0;
    background-color: #6c5f41;   
    padding: 3px 10px;
    border: 2px solid #FFF;
}

.projects .container .contents .box .image .nationality,
.hot-offers .container .contents .box .image .nationality{
    top: 156px;
    left: 0;
    background-color: #6e2f17;   
    padding: 3px 10px;
    border: 2px solid #FFF;
}

.projects .container .contents .box .box-link,
.hot-offers .container .contents .box .box-link{
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 1;
}

.projects .container .contents .box .compare,
.hot-offers .container .contents .box .compare{
    /* top: 203px;
    right: 10px;
    z-index: 2; */
    border-top: 2px solid #DDD;
  justify-content: space-between;
}

.projects .container .contents .box .compare button,
.hot-offers .container .contents .box .compare button{
    /* background: none;
    border: none;
    cursor: pointer; */
    margin: 0;
    background: rgb(21, 24, 49);
    font-size: 15px;
    padding: 5px;
    border-radius: 0 0 6px 6px;
    transition: var(--main-transition);
    border: none;
    cursor: pointer;
}

.projects .container .contents .box .compare button:hover,
.hot-offers .container .contents .box .compare button:hover{ color: #DDD; }

 /* Selected state for compare button */
.projects .container .contents .box .compare button.selected,
.hot-offers .container .contents .box .compare button.selected{
    background: #28a745 !important;
    color: white !important;
}

.projects .container .contents .box .info,
.hot-offers .container .contents .box .info{ 
    border-bottom: 2px solid #DDD; 
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    overflow: hidden;
}

.projects .container .contents .box .info h3,
.hot-offers .container .contents .box .info h3{
    font-size: 20px;
    color: var(--primary-color);
    font-weight: 700;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* show 2 lines max */
    -webkit-box-orient: vertical;
    min-height: 3em;
}

.projects .container .contents .box .info p,
.hot-offers .container .contents .box .info p,
.projects .container .contents .box .info .property-preview-desc,
.hot-offers .container .contents .box .info .property-preview-desc{
    margin: 15px 5px 10px;
    color: #333;
    line-height: 1.5;
    text-align: justify;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

/* Control description preview text styling */
/* If any HTML headings appear in property cards, make them smaller */
.projects .container .contents .box .info h1,
.hot-offers .container .contents .box .info h1{
    font-size: 18px !important;
    margin: 10px 5px !important;
    color: #333 !important;
    font-weight: 600 !important;
}

.projects .container .contents .box .info h2,
.hot-offers .container .contents .box .info h2{
    font-size: 16px !important;
    margin: 10px 5px !important;
    color: #333 !important;
    font-weight: 600 !important;
}

.projects .container .contents .box .info h3:not(.f-merriweather),
.hot-offers .container .contents .box .info h3:not(.f-merriweather){
    font-size: 14px !important;
    margin: 10px 5px !important;
    color: #333 !important;
    font-weight: 600 !important;
}

.projects .container .contents .box .info .price,
.hot-offers .container .contents .box .info .price{
    margin: 10px 0 auto 0;
    text-align: right;
    font-weight: 700;
    color: var(--lang-color);
    font-size: 20px;
    height: 60px;
}

.projects .container .contents .box .project-icons div img,
.hot-offers .container .contents .box .project-icons div img{
    width: 20px;
    height: 20px;
}
/* End Latest Properties */


/**** Style About Us Page ****/
/* Start Landing About Us */
.landing-about{
    min-height: 35vh;
    background-image: url(../images/services/img1.webp);
    background-size: cover;
}
/* End Landing About Us */

/* Start About Us Contents */
.bg-about,
.bg-services,
.bg-blog,
.bg-team,
.bg-contact,
.comparison{
    background-image: url(../images/bg.webp);
    background-position: center;
}

.about .container .contents p{ line-height: 1.6; }

@media (max-width: 767px){
    .landing-about h2{ font-size: 40px !important;  }

    .about .contents { padding: 0 20px; }
}
/* End About Us Contents */


/**** Style Services Page ****/
/* Start Landing Services */
.landing-services{
    min-height: 35vh;
    background-image: url(../images/services/img2.webp);
    background-size: cover;
}

.landing-services .overlay,
.landing-about .overlay,
.landing-blog .overlay,
.landing-team .overlay,
.landing-contact .overlay,
.landing-article .overlay,
.landing-search .overlay,
.landing-faq .overlay{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.landing-services h2, 
.landing-about h2,
.landing-blog h2,
.landing-team h2,
.landing-contact h2,
.landing-article h2,
.landing-search h2,
.landing-faq h2{ color: #FFF; }
/* End Landing Services */

/* Start Services Contents */
.services .container .contents{ grid-template-columns: repeat(auto-fill, minmax(270px, auto)); }

.services .container .contents .item{
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--secondary-color);
    -webkit-box-shadow: 0px 0px 20px #D2D0D0;
    -moz-box-shadow: 0px 0px 20px #D2D0D0;
    -o-box-shadow: 0px 0px 20px #D2D0D0;
    box-shadow: 0px 0px 20px #D2D0D0;
    /* overflow: hidden; */
}

.services .container .contents .item::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    transition: var(--main-transition);
}

.services .container .contents .item:hover{
    border-radius: 0;
    box-shadow: none;
}

.services .container .contents .item:hover::before{ 
    width: 100%; 
    background-color: #221f96;
}

.services .container .contents .item div img{
    width: 50px;
    height: 50px;
}

.services .container .contents .item div h3{
    color: #221f96;
    line-height: 1.4;
    word-break: break-word;
}

.services .container .contents .item p{ line-height: 1.6; }

.services .container .contents .item .more{
    margin-top: auto; /* push to bottom */
    align-self: flex-start;
    position: relative;
    padding-top: 5px; /* gap above button */
    border: none;
    background-color: transparent;
    color: #D81159;
    font-size: 17px;
    transition: var(--main-transition);
}

.services .container .contents .item:hover .more i{ animation: left-right .8s infinite ease-in-out; }

.services .container .contents .item .details{
    display: none; /* Hidden by default */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 25px;
    width: 880px;
    max-width: 90vw; /* Responsive width */
    max-height: 80vh; /* Fixed maximum height */
    height: auto;
    z-index: 2;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden;
    background-color: #dddfe6; /*#208AAE #519D9E  #379392 #4FB0C6 #9baec8 //#CADBE9 #d9e1e8 #e1eef6 #e4e7ec #dddfe6*/
    border: 4px solid #ccced5;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 15px #a2a5b1;
    -moz-box-shadow: 0px 0px 15px #a2a5b1;
    -o-box-shadow: 0px 0px 15px #a2a5b1;
    box-shadow: 0px 0px 15px #a2a5b1;
    word-wrap: break-word;
    animation: show-dialog 0.9s ease-in-out;
}

/* Custom scrollbar for service details box */
.services .container .contents .item .details::-webkit-scrollbar { width: 10px; }

.services .container .contents .item .details::-webkit-scrollbar-track {
    background: #e1e4ea;
    border-radius: 10px;
}

.services .container .contents .item .details::-webkit-scrollbar-thumb:hover { background: #BE7700; }

.services .container .contents .item .details span{
    color: #000;
    display: block;
    font-size: 25px;
    cursor: pointer;
    position: sticky; /* Sticky positioning keeps it at top while scrolling */
    top: 0; /* Stick to top of container */
    right: 0;
    float: right;
    background-color: #dddfe6;
    z-index: 10; /* Ensure it's above other content */
    margin: 0 0 -30px 0;; /* Adjust to sit at top-right corner */
    transition: var(--main-transition);
}

.services .container .contents .item .details span:hover{  color: #333; }

.services .container .contents .item .details h3{ 
    margin-top: -10px !important; 
    margin-right: 20px !important;
    clear: both; /* Ensure it appears below the close button */
}

.services .container .contents .item .details .service-content{
    margin-top: 20px;
    margin-bottom: 60px;
    line-height: 1.6; /* Reduced from 1.7 for tighter spacing */
    text-align: justify;
    color: #000;
    font-size: 17px;
}

/* Service content paragraph spacing */
.services .container .contents .item .details .service-content p {
    margin-bottom: 5px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.services .container .contents .item .details .service-content br {
    display: block;
    content: "";
    margin: 0.3em 0;
}

.services .container .contents .item .details .service-content h1,
.services .container .contents .item .details .service-content h2,
.services .container .contents .item .details .service-content h3,
.services .container .contents .item .details .service-content h4 {
    margin-top: 15px;
    margin-bottom: 8px;
    font-weight: bold;
}

.services .container .contents .item .details .service-content ul,
.services .container .contents .item .details .service-content ol {
    margin: 10px 0;
    padding-left: 30px;
}

.services .container .contents .item .details .service-content li { margin-bottom: 5px; }

.services .container .contents .item .details .service-content strong { font-weight: bold; }

.services .container .contents .item .details .service-content em { font-style: italic; }

.services .container .contents .item .details .pic{
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 90px;
    height: 65px;
}

.services .container .contents .item .details .pic img{
    width: 100%;
    height: 100%;
}

/* Responsive: Adjust Services Details Box For Smaller Screens */
@media (max-width: 991px) {
    .services .container .contents .item h3,
    .services .container .contents .item .details h3{ font-size: 20px !important; }

    .services .container .contents .item .details{
        width: 95vw;
        max-width: 95vw;
        max-height: 85vh; /* More height on tablets */
    }

    .services .container .contents .item .details .service-content{ font-size: 15px; }
}

@media (max-width: 767px){
    .landing-services h2{ font-size: 40px !important;  }

    .services .container .contents{ justify-content: center; }
    
    .services .container .contents .item{ max-width: 370px;  }

    .services .container .contents .item img{
        width: 40px !important;
        height: 40px !important;
    }

    .services .container .contents .item .details{ 
        max-height: 90vh; /* Maximum height on mobile */
        padding: 15px 20px; /* Less padding on mobile */
    }

    .services .container .contents .item .details .pic{ display: none; }
}
/* End Services Contents */


/**** Style Blog Page ****/
/* Start Landing Blog */
.landing-blog{
    min-height: 35vh;
    background-image: url(../images/services/img3.webp);
    background-size: cover;
}
/* End Landing Blog */

/* Start Blog Contents */
.blog .container .contents{ 
    grid-template-columns: repeat(auto-fill, minmax(360px, auto)); 
    grid-auto-rows: 1fr;
}

.blog .container .contents .box{
    display: flex;
    flex-direction: column;
    height: 100%; 
    width: 360px;
    min-height: 400px;
    background-color: var(--secondary-color);
    border: 1px solid #DDD;
    overflow: hidden;
    -webkit-box-shadow: 0 0 20px var(--lang-list);
    -moz-box-shadow: 0 0 20px var(--lang-list);
    -o-box-shadow: 0 0 20px var(--lang-list);
    box-shadow: 0 0 20px var(--lang-list);
}

.blog .container .contents .box .picture{
    width: 360px;
    height: 200px;
    overflow: hidden;
}

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

.blog .container .contents .box:hover .picture img{ transform: scale(1.1) rotate(3deg); }

.blog .container .contents .box .picture h3{
    bottom: 0;
    right: 0; 
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--location-color);
    width: 80%;
    max-width: 250px;
    padding: 10px;
    line-height: 1.4;
    border-radius: 10px 10px 0 0;
    word-break: break-word;
    z-index: 1;
    text-shadow:0 1px 3px rgba(0,0,0,.6);
}

.blog .container .contents .box .info p{
    line-height: 1.6;
    letter-spacing: 0.4px;
}

.blog .container .contents .box .card-footer{
    margin-top: auto !important;
    border-top: 1px solid #aaa;
    padding: 15px;
    color: var(--lang-color);
    font-weight: 500;
    transition: var(--main-transition);
}

.blog .container .contents .box .card-footer a{ color: var(--lang-color); }

.blog .container .contents .box .card-footer .link-more:hover a,
.blog .container .contents .box .card-footer .link-more:hover i{ color: #000000c2; }

/* Responsive: Adjust Blog Contents For Smaller Screens */
@media (max-width: 991px){
    .blog .container .contents{ 
        grid-template-columns: repeat(auto-fill, minmax(270px, auto)); 
        grid-auto-rows: 1fr;
    }

    .blog .container .contents .box{ width: 330px; }

    .blog .container .contents .box .picture h3{ left: 30%; }

    .article-section .article h1{ font-size: 25px !important; }
}

@media (max-width: 767px){
    .blog .container .contents{ justify-content: center; }   
    
    .article-section .article { padding: 0 20px !important; }

    .article-section .article .views-date{ font-size: 14px !important; }

    .article-section .article p{ font-size: 15px !important; }

    .article-section .share-project span{ margin-bottom: 15px; }
}

/* End Blog Contents */


/**** Style Our Team Page ****/
/* Start Landing Our Team */
.landing-team{
    min-height: 35vh;
    background-image: url(../images/services/img4.webp);
    background-size: cover;
}
/* End Landing Our Team */

/* Start Our Team Contents */
.team .container .contents .box{
    display: flex;
    flex-direction: column;
    min-width: 323px;
    padding: 30px 25px 10px;
    background-color: #C0C9EE1F;
    border: 1px dashed var(--lang-color);
}

.team .container .contents .box img{
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
}

.team .container .contents .box p{
    text-align: left;
    color: #333;
    font-weight: 500;
}

.team .container .contents .box p span{ color: var(--location-color); }

/* Responsive: Adjust Our Team Contents For Smaller Screens */
@media (max-width: 991px){
    .team .container .contents{ justify-content: normal !important;  }
}

@media (max-width: 767px){
    .team .container .contents{ justify-content: center !important;  }

    .team .container .contents .box{ min-width: 290px !important; }

    .team .container .contents .box img{ 
        width: 80px !important; 
        height: 80px !important; 
    }

    .team .container .contents .box h3{ font-size: 20px !important; }
}
/* End Our Team Contents */


/**** Style Contact Us Page ****/
/* Start Landing Contact */
.landing-contact{
    min-height: 35vh;
    background-image: url(../images/services/img5.webp);
    background-size: cover;
}
/* End Landing Contact */

/* Start Contact Us Contents */
.contact-us .container .office-info,
.contact-us .container .contact{
    width: 500px;
    height: auto;
    background-color: #F6F6F6;
    border: 3px solid var(--lang-list);
    -webkit-box-shadow: 0 0 8px var(--lang-color);
    -moz-box-shadow: 0 0 8px var(--lang-color);
    -o-box-shadow: 0 0 8px var(--lang-color);
    box-shadow: 0 0 8px var(--lang-color);
}

.contact-us .container .office-info h3{ 
    padding: 10px 15px;
    background-color: #C0C9EE69;
}

.contact-us .container .office-info h4{
    margin: 10px 15px !important;
    color: var(--primary-color);
}

.contact-us .container .office-info address,
.contact-us .container .office-info p{
    font-size: 16px;
    line-height: 1.4;
}

.contact-us .container .office-info .working-hours{ line-height: 2.2; }

.contact-us .container .contact{
    width: 400px;
    height: unset;
    margin-left: auto;
    padding: 25px 15px;
}

/* Responsive: Adjust Contact Us Contents For Smaller Screens */
@media (max-width: 991px){
    .contact-us .container .contact-box{
        flex-direction: column;
        align-items: center;
        gap: 40px;
        max-width: 420px;
        margin: 0 auto;
    }

    .contact-us .container .contact-box .office-info,
    .contact-us .container .contact-box .contact{ width: 100%; }
    
    .contact-us .container .map{ 
        margin: 70px auto;
        max-width: 690px;
     }

    .contact-us .container .map iframe{ width: 100% !important; }
}

@media (max-width: 767px){
    .contact-us .container .contact-box,
    .contact-us .container .map{ max-width: 370px; }

    .contact-us .container .office-info h3{ font-size: 20px !important; }

    .contact-us .container .contact form input[type="submit"]{ font-size: 17px !important; }
}
/* End Contact Us Contents */


/**** Style Projects Page ****/
/* Start Images Gallery and Information For Offers & Projects */
.gallery-project{ background-color: #F1DEDB26; }

.gallery-project .glide {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-project .glide__track {
    overflow: hidden;
    position: relative;
    height: 480px;
}

.gallery-project .glide__arrows button{ padding: 5px 10px; }

.gallery-project .glide__arrow:hover { background: rgba(255, 255, 255, 0.25); }

.gallery-project .glide__arrow--left { left: 20px; }

.gallery-project .glide__arrow--right { right: 20px; }

/* .gallery-project .container h3{ margin-top: 20px !important; } */

.gallery-project .container .main-info .estate-no{
    color: #005246;
    background-color: #0052460d;
    padding: 8px 10px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 5px #0000009e;
    -moz-box-shadow: 0 0 5px #0000009e;
    -o-box-shadow: 0 0 5px #0000009e;
    box-shadow: 0 0 5px #0000009e;
}

.gallery-project .container .description-container, 
.gallery-project .container .prices-container, 
.gallery-project .container .features-container,
.gallery-project .container .facilities-container,
.gallery-project .container .location-container,
.gallery-project .container .advisor-container,
.gallery-project .container .hot-sale-container{ 
    width: 630px; 
    margin-bottom: 50px;
    background-color: #b5b5c94d; 
    border: 2px solid #b5b5c9;
}

.gallery-project .container .location-container,
.gallery-project .container .advisor-container,
.gallery-project .container .hot-sale-container{ width: 400px; }

.gallery-project .container .description-container h3,
.gallery-project .container .prices-container h3,
.gallery-project .container .features-container h3,
.gallery-project .container .facilities-container h3,
.gallery-project .container .location-container h3,
.gallery-project .container .advisor-container h3,
.gallery-project .container .hot-sale-container h3{
    padding: 8px 15px;
    background-color: #b5b5c9;
}

.gallery-project .container .description,
.gallery-project .container .prices,
.gallery-project .container .features,
.gallery-project .container .facilities,
.gallery-project .container .location,
.gallery-project .container .advisor-info,
.gallery-project .container .hot-sale-info{  padding: 15px 15px 15px 30px; }

.gallery-project .container .description-container p,
.gallery-project .container .prices p,
.gallery-project .container .features p,
.gallery-project .container .facilities p,
.gallery-project .container .location p,
.gallery-project .container .advisor-info p{ margin-bottom: 0; }

.gallery-project .container .advisor-container .contact-advisor{
    margin-bottom: 20px;
    padding: 2px 15px;
    width: fit-content;
    background-color: rgb(21, 24, 49) !important
}

.gallery-project .container .advisor-container .contact-advisor:hover{ background-color: rgba(21, 24, 49, 0.86) !important; }

.gallery-project .container .facilities p i{ color: #0b368e; }

.gallery-project .container .contact{ 
    width: 400px;
    background-color: #F6F6F6;
    padding: 25px 15px;
    margin-bottom: 50px;
    border: 3px solid var(--lang-list);
    -webkit-box-shadow: 0 0 8px var(--lang-color);
    -moz-box-shadow: 0 0 8px var(--lang-color);
    -o-box-shadow: 0 0 8px var(--lang-color);
    box-shadow: 0 0 8px var(--lang-color);
}

.gallery-project .container .contact form input,
.contact-us .container .contact form input{
    background-color: #FFF;
    border: 1px solid #DDD;
    padding: 5px 10px;
    border-radius: 5px;
    outline: none;
}

.gallery-project .container .contact form textarea,
.contact-us .container .contact form textarea{
    height: 120px;
    background-color: #FFF;
    border: 1px solid #DDD;
    padding: 5px 10px;
    border-radius: 5px;
    outline: none;
    resize: none;
}

.gallery-project .container .contact form input::placeholder,
.contact-us .container .contact form input::placeholder{ color: #999;}

.gallery-project .container .contact form textarea::placeholder,
.contact-us .container .contact form textarea::placeholder{ color: #999;}

.gallery-project .container .contact form input[type="submit"],
.contact-us .container .contact form input[type="submit"]{
    padding: 3px 35px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 6px;
    font-family: serif;
    transition: var(--main-transition);
}

.gallery-project .container .contact form input[type="submit"]:hover,
.contact-us .container .contact form input[type="submit"]:hover{ background-color: #000000c2; }

.gallery-project .container .hot-sale-container .hot-sale-list .hot-sale-item{
    border: 1px solid #e0e0e0; 
    border-radius: 8px; 
    transition: all var(--main-transition); 
    cursor: pointer;
}

.gallery-project .container .hot-sale-container .hot-sale-list .hot-sale-item:hover{ 
    background-color: #f8f9fa;
    border-color: #BE7700 !important;
    box-shadow: 0 2px 8px rgba(190, 119, 0, 0.2);
    transform: translateY(-2px);
 }

.hot-sale-list::-webkit-scrollbar { width: 8px; }

.hot-sale-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.hot-sale-list::-webkit-scrollbar-thumb {
    background: #BE7700;
    border-radius: 10px;
}

.hot-sale-list::-webkit-scrollbar-thumb:hover {   background: #0b368e }

.gallery-project .container .map iframe,
.contact-us .container .map iframe{
    margin: 30px auto;
    display: block;
    width: 1000px;
    -webkit-box-shadow: 0 0 10px #aaaaaad4;
    -moz-box-shadow: 0 0 10px #aaaaaad4;
    -o-box-shadow: 0 0 10px #aaaaaad4;
    box-shadow: 0 0 10px #aaaaaad4;
}

.gallery-project .container .share-project ul li a,
.article-section .share-project ul li a{
    background-color: #eaeaee;
    border-radius: 20%;
    padding: 10px;
    width: 35px;
    height: 35px;
    font-size: 19px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: var(--main-transition);
}

.gallery-project .container .share-project ul li a:hover,
.article-section .share-project ul li a:hover{ background-color: #d1d1d639; }

/* Responsive: Adjust Images Gallery and Information For Project For Smaller Screens */
@media (max-width: 991px){
    .gallery-project .container .main-info div div:nth-of-type(2){
        margin-right: 25px;
        margin-left: 25px;
    }

    .gallery-project .container .project-contents{ 
        flex-direction: column; 
        align-items: center;
        gap: 15px;
    }

    .gallery-project .container .description-container, 
    .gallery-project .container .prices-container, 
    .gallery-project .container .features-container,
    .gallery-project .container .facilities-container,
    .gallery-project .container .contact,
    .gallery-project .container .location-container{ margin-bottom: 30px !important; }

    .gallery-project .container .map{
        margin: 0 auto;
        width: 690px;
        height: auto;
    }

    .gallery-project .container .map iframe{ width: 100% !important; }
}

@media (max-width: 767px) {    
    .gallery-project .container .main-info{ 
        flex-wrap: wrap; 
        gap: 20px;
        justify-content: center;
        margin-top: 30px;
    }

    .gallery-project .container .main-info div div:nth-of-type(2) {
        margin-right: 12px;
        margin-left: 12px;
    }    
    
    .gallery-project .container .project-contents { 
        width: 400px;
        gap: 0 !important;
    }

    .gallery-project .container .project-contents div { width: 100%; }

    .gallery-project .container .description-container h3,
    .gallery-project .container .prices-container h3,
    .gallery-project .container .features-container h3,
    .gallery-project .container .facilities-container h3,
    .gallery-project .container .location-container h3,
    .gallery-project .container .address-map{ font-size: 20px !important; }

    .gallery-project .container .description,
    .gallery-project .container .prices,
    .gallery-project .container .features,
    .gallery-project .container .facilities,
    .gallery-project .container .location{  
        padding: 15px;
        font-size: 15px;
     }

    /* .gallery-project .container .project-contents .contact-col .location-container{ margin-bottom: 20px !important; } */

    .gallery-project .container .contact form input[type="submit"]{ font-size: 17px !important; }

    .gallery-project .container .video,
    .gallery-project .container .video a{ font-size: 15px !important; }

    .gallery-project .container .map{ width: 400px !important; }

    .gallery-project .container .map iframe{ width: 100% !important; }

    .gallery-project .container .share-project{ 
        flex-wrap: wrap;
        margin-left: 0 !important;
     }

     .gallery-project .container .share-project span{ margin-bottom: 15px !important; }
}
/* End Images Gallery and Information For Project */


/* Start Compare Section */
.compare-section .compare{ margin-bottom: 70px !important; }

.compare-section table th{ 
    background-color: #0052460d;
    color: #005246; 
    font-weight: 700;
    font-size: 21px;
    padding: 10px;  
}

.compare-section table tr td{ 
    font-size: 15px; 
    color: #000;
    vertical-align: top;
}

/* Responsive: Adjust Compare Section For Smaller Screens */
@media (max-width: 767px){
    .comparison h2{ font-size: 32px !important; }

    .compare-section table th{ font-size: 18px !important; }
    
    .compare-section table tr td{ font-size: 13px !important; }

    .compare-section table tr td img{ 
        max-width: 160px !important; 
        height: auto !important; 
    }
}

/* End Compare Section */


/**** Style Article Page ****/
/* Start Landing Article */
.landing-article{
    min-height: 35vh;
    background-image: url(../images/services/img1.webp);
    background-size: cover;
}
/* End Landing Article */

/* Start Article Section */
.article-section,
.bg-faq{ background-color: #F1DEDB26; }

.article-section .article h1{
    font-weight: 700;
    color: var(--lang-color);
    margin-bottom: 40px !important;
    text-decoration: underline;
}

.article-section .article .views-date{
    color: var(--location-color) !important;
}
/* End Article Section */


/* Start FAQ */
.faq {  background-color: #EEE; }

.faq .container .view-all {
    width: fit-content;
    background-color: rgb(21, 24, 49) !important;
    overflow: hidden;
    z-index: 1;
}

.faq .container .view-all::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(8, 19, 107) !important;
    transform: translateX(-100%);
    transition: var(--main-transition);
    z-index: -1;
}  

.faq .container .view-all:hover::before{ transform: translateX(0) }
/* End FAQ */


/*** Style FAQ Page ****/
/* Start Landing FAQ */
.landing-faq{
    min-height: 35vh;
    background-image: url(../images/services/img5.webp);
    background-size: cover;
}
/* End Landing FAQ */

/* Start FAQ List */
.faq-list .container .faq-accordion{
    max-width: 900px;
    margin: 0 auto;
}

.faq-list .faq-item {
    background-color: #FFF;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-list .faq-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }

.faq-question {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
}

.faq-list .faq-item .faq-question:hover {  background-color: #f8f9fa !important; }

.faq-list .faq-item .faq-question .faq-icon {
    transition: transform 0.3s ease;
    color: #0b368e;
    min-width: 20px;
    margin-left: auto;
}

.faq-list .faq-item .faq-answer {
    border-top: 1px solid #e9ecef;
    background-color: #fafbfc;
    color: #000;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 20px;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.4s ease-in-out;
}

.faq-list .faq-item .faq-answer.open {
    max-height: 800px;
    opacity: 1;
    padding: 20px;
}

@keyframes slideDown {
    0% {
        opacity: 0;
        max-height: 0;
    }
    100% {
        opacity: 1;
        max-height: 500px;
    }
}

.faq-list .faq-item .faq-answer p { line-height: 1.8; }

/* Responsive FAQ */
@media (max-width: 991px){
    .faq-list .container .faq-accordion .faq-item .faq-question h3{ font-size: 17px; }

    .faq-answer p{ text-align: justify; }
}

@media (max-width: 767px) {
    .landing-faq h2{ font-size: 32px !important; }

    .faq-list .container .faq-accordion .faq-item .faq-question h3{ 
        font-size: 16px; 
        line-height: 1.5;
        margin-right: 15px !important;
    }
    
    .faq-list .container .faq-accordion .faq-item .faq-question .faq-icon{ font-size: 16px !important; }
    
    .faq-answer p { font-size: 14px; }
}
/* End FAQ List */


/* Start Footer */
footer{ background-color: rgba(21, 24, 49, 0.85) !important; }

footer .container .info .logo{
    width: 130px;
    height: 110px;
}

footer .container .info .about{ flex-basis: 7%; }

footer .container .info > div > h3{
    font-weight: 700;
    color: var(--primary-color);
}

footer .container .info > div > ul > li{ margin-bottom: 10px; }

footer .container .info > div > ul > li a{
    color: #FFF;
    font-size: 18px;
    transition: var(--main-transition);
}

footer .container .info > div > ul > li a:hover{ color: var(--location-color); }

footer .container .info .contact div{ color: #FFF; }

footer .container .info .contact .media li a{
    background-color: #F6F6F6;
    border-radius: 50%;
    padding: 10px;
    width: 45px;
    height: 45px;
    font-size: 23px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: var(--main-transition);
}

footer .container .info .contact .media li:first-of-type a{ 
    color: #e1306c; 
    border: 1px solid;
}

footer .container .info .contact .media li:nth-of-type(2) a{ border: 1px solid; }

footer .container .info .contact .media li:nth-of-type(2) a,
.gallery-project .container .share-project ul li:first-of-type a{  color: #1477f2; }

footer .container .info .contact .media li:nth-of-type(3) a{ 
    color: #25d366; 
    border: 1px solid;
}

footer .container .info .contact .media li:nth-of-type(4) a{ 
    color: #0088cc; 
    border: 1px solid;
}

footer .container .info .contact .media li:last-of-type a{ 
    color: #ff0000; 
    border: 1px solid;
}

footer .container .info .contact .media li:first-of-type a:hover{
    background-color: #e1306c;
    color: #F6F6F6;
}

footer .container .info .contact .media li:nth-of-type(2) a:hover{
    background-color: #1877f2;
    color: #F6F6F6;
}

footer .container .info .contact .media li:nth-of-type(3) a:hover{
    background-color: #25d366;
    color: #F6F6F6;
}

footer .container .info .contact .media li:nth-of-type(4) a:hover{
    background-color: #0088cc;
    color: #F6F6F6;
}

footer .container .info .contact .media li:last-of-type a:hover{
    background-color: #ff0000;
    color: #F6F6F6;
}

footer .container .info .contact .subscribe{
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 350px;
}

footer .container .info .contact .subscribe input{
    width: 100%;
    height: 100%;
    border: none;
    padding: 10px 20px;
    background-color: #FEF3E2;
    border-radius: 5px 5px 0 0; 
    outline: none;
}

footer .container .info .contact .subscribe input::placeholder{ color: #999; }

footer .container .info .contact .subscribe button{
    height: 45px;
    width: 100%;
    border-radius: 0;
}

footer .container .info .contact .subscribe button:hover{ background-color: #000000c2; }

@media (max-width: 991px) {
    footer .container .info {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px !important;
    }
    
    footer .container .info .logo {
        width: 110px;
        height: 85px;
        grid-column: 1 / -1; /* Logo spans full width */
    }
    
    footer .container .info > div > h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    footer .container .info > div > ul > li a { font-size: 16px  }
    
    footer .container .info .contact .media {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    footer .container .info .contact .fa-location-dot { margin-top: -20px; }
    
    footer .container .info .contact .subscribe {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    footer .container .info {
        display: flex !important;
        flex-direction: column !important;
    }
    
    footer .container .info { gap: 25px !important;  } 

    footer .container .info .about,
    footer .container .info .tags,
    footer .container .info .services,
    footer .container .info .contact {  
        padding: 0 30px;
        text-align: center;  
    }
    
    footer .container .info .logo {
        width: 100px;
        height: 70px;
        margin: 0 auto 15px;
    }
    
    footer .container .info > div > h3 { font-size: 16px;  }
    
    footer .container .info > div > ul > li { margin-bottom: 8px; }
    
    footer .container .info > div > ul > li a { font-size: 14px;  }
    
    footer .container .info .contact div { font-size: 14px;  }

    footer .container .info .contact .fa-location-dot { margin-top: 0; }
    
    footer .container .info .contact .media li a {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
    
    footer .container .info .contact .subscribe {
        width: 100%;
        height: 45px;
    }
    
    footer .container .info .contact .subscribe input,
    footer .container .info .contact .subscribe button { height: 45px; }

    footer .container .info .contact .subscribe input{ font-size: 14px; }

    footer .container .info .contact .subscribe button{ font-size: 17px; }

    .up{
        bottom: 50px !important;
        font-size: 15px !important;
        padding: 4px 7px !important;
    }
}

@media (max-width: 480px){
    footer .container .info .contact .media{ margin-bottom: 20px;  }

    footer .container .info .contact .media ul li{ margin-right: 7px !important; }

    footer .container .info .contact .subscribe{ margin-bottom: 100px; }
}
/* End Footer */

/* Start My Name */
.my-name{
    background: rgb(21, 24, 49) !important;
    text-align: center;
    padding: 13px 0;
    color: #FFF;
    font-weight: 500;
    font-size: 16px;
}

.my-name span a{ color: deeppink; }

.my-name span a:hover{ color: #f746a5; }
/* End My Name */

/* Start Scroll To Top */
.up{
    position: fixed;
    bottom: 32px;
    right: 20px;
    padding: 4px 7px;
    background-color: var(--primary-color);
    color: #FFF;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    opacity: 0;
    z-index: 1000;
    transition: var(--main-transition);
}

.up.show{ opacity: 1; }

.up:hover{ background-color: #CE4C06; }
/* End Scroll To Top */


/* Start Animation */
@keyframes left-right{
    0%{ transform: translateX(0); }

    50%{ transform: translateX(50%); }
}

@keyframes show-dialog{
    0%{
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    100%{
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}
/* End Animation */


/* --- remove Google-Translate banner completely (Google Translate banner is not visible in the page) --- */
iframe.goog-te-banner-frame,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
body > .skiptranslate {        /* extra wrapper Google adds */
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}

body { top:0 !important; }     /* reset any offset Google applied */


/* Sidebar Style */
.main-sidebar .sidebar nav ul li:nth-child(2),
.main-sidebar .sidebar nav ul li:nth-child(14){ margin-bottom: 20px; }