/* - - - - - - - - - - - - - - - - - - - - -
Theme Name: Croatia Villas- Direct By Owners
Theme URI: https://www.croatiavilla.net
Author: Mate Ivancic
Author URI: https://www.htmlid.com/

Created :  04.08.2024
Modified : 04.08.2024
- - - - - - - - - - - - - - - - - - - - - */

/* global reset */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,
q,samp,small,strike,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,
form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;}
:focus{outline:0;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,
q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}

/* end of global reset */

body {background-color: #fff;font-family: 'Roboto Condensed', sans-serif;}

/*----Header CSS -------*/
#header {background-color:#ffffff;;padding:8px 0;box-shadow: 0 12px 18px rgb(0 0 0 / 0.1);}
#header .navbar-brand {max-width:290px;}
#header ul li {font-size:20px;text-transform: uppercase;font-weight:400;}
#header ul li a {text-decoration: none;color: #4d4848;;}
#header ul li a:hover {text-decoration: none;color:#E80000;}
#header ul li a:active {text-decoration: none;color:#E80000;}
#header ul li .dropdown-menu {background-color:#ffffff;margin:0;border-radius:0;text-transform:uppercase;box-shadow: 0 0 16px 0 #e7e7e8;border:none;}
#header ul li .dropdown-menu li {text-transform:uppercase;font-size:16px;}
#header ul li .dropdown-menu li a {background-color: #fff;padding:8px 12px;}
#header ul li .dropdown-menu li a:hover {color:#E80000;}
#header ul li a .heart {color:#E80000!important;font-size:16px;}

@media (max-width: 768px) {
    #header .navbar-brand {
        max-width: 200px;
    }
}

#header .navbar-toggler {color:#707070;font-size:28px;}
#header .navbar-toggler:focus {box-shadow: none;border:none;}

/* Intro section CSS*/
#intro {width:100%;}
#intro .search-form {background-color:#003663;padding:6% 3%;}
#intro .search-form h3 {font-size:2.8em;color:#fff;text-transform: uppercase;font-weight: bold;text-align: center;padding:20px 0;margin-bottom:20px;}
#intro .search-form h3:before {  content: ''; display: block;margin: 0 auto;width: 30%;border-bottom: 5px solid #E80000;margin-bottom: 20px;}
#intro .search-form h3:after {  content: ''; display: block;margin: 0 auto;width: 30%;border-bottom: 5px solid #E80000;margin-top: 20px;}
#intro .search-form .form-control-icon {position:relative;font-size:22px;color:#707070;margin-bottom:32px;}
#intro .search-form .form-control-icon .bi {position: absolute;top: 50%;left: 10px;transform: translateY(-50%);pointer-events: none;}
#intro .search-form .form-control-icon input {padding-left:40px;color:#707070;line-height:60px;height:60px;font-size:1.25rem;border-radius: 0;}
#intro .search-form .form-control-icon select {color:#707070;padding:14px 0 14px 40px;font-size:1.25rem;border-radius: 0;}
#intro .search-form .form-control-icon .form-select option {font-size: 1.25rem;padding:10px;color:#707070;}
#intro .search-form .btn-villa {font-size:22px;background-color: #E80000;color: #ffffff;text-transform: uppercase;border-radius: 0%!important;font-weight: bold;line-height: 60px;height:60px;display: block;padding:0;}
#intro .search-form .btn-villa:hover {background-color:#3888c9;}

#intro .search-form .white-logo {max-width:220px;margin:40px auto;}

#intro .banner {background-image: url(images/banner-background-intro.jpg);background-position:bottom center;background-repeat: no-repeat;}
#intro .banner .intro-text {display: flex;flex-direction: column;justify-content: center;height: 100%;}
#intro .banner .intro-text h1 {font-size:3em;text-transform: uppercase;color:#003663;text-align: center;padding-bottom:32px;font-weight: 900;}
#intro .banner .intro-text h1 span {color:#E80000;}
#intro .banner .intro-text p {font-size:18px;color:#707070;text-align: center;padding-bottom:22px;}
#intro .banner .cta-link {font-size:24px;text-transform: uppercase;padding-top:32px;font-weight: bold;}
#intro .banner .cta-link a {color:#fff;text-decoration: none;padding:18px 22px;background-color: #E80000;transition: all 0.5s ease;border-radius: 3px;}
#intro .banner .cta-link a:hover {background-color: #003663;}

/* Cities Logo Section CSS */
#city-logos {background-color: #f6f5f5;border-top:1px solid #e4dfdf;border-bottom:1px solid #e4dfdf;padding:10px 0;}
#city-logos a {margin:8px 0;transition: transform 0.5s ease;}
#city-logos .thumb img {    transition: transform 0.5s ease; display: block; margin: 0 auto;}
#city-logos a:hover img {opacity: 0.5;transform: scale(0.9);}

/* Why Section CSS */
#why {padding:60px 0 0 0;background-color: #fff;}
#why .headline {padding-bottom:52px;}
#why .headline h2 {text-align: center;font-size:42px;font-weight: bold;color: #003663;padding:16px;}
#why .headline h2 span {color: #E80000;text-transform: uppercase;}
#why .visitors {background-color: #f6f5f5;}
#why .visitors .inner {padding:40px 20px 20px 20px;}
#why .visitors .inner h3 {padding-bottom:20px;font-size:28px;color:#003663;font-weight: bold;text-transform: uppercase;}
#why .visitors .inner h3 span {color:#E80000;}
#why .visitors .inner p {color:#707070;padding-bottom:20px;font-size:17px;}
#why .visitors .inner .link {margin-top:16px;font-size:20px;text-transform: uppercase;font-weight: bold;}
#why .visitors .inner .link a {color:#ffffff;text-decoration: none;background-color: #003663;transition:all 0.5s;padding:16px 20px;}
#why .visitors .inner .link a:hover {background-color: #E80000;}

#why .owners {background-color: #fff;}
#why .owners .inner {padding:40px 20px 20px 20px;}
#why .owners .inner h3 {padding-bottom:20px;font-size:28px;color:#003663;font-weight: bold;text-transform: uppercase;}
#why .owners .inner h3 span {color:#E80000;}
#why .owners .inner p {color:#707070;padding-bottom:20px;font-size:17px;}
#why .owners .inner .link {margin-top:16px;font-size:20px;text-transform: uppercase;font-weight: bold;}
#why .owners .inner .link a {color:#ffffff;text-decoration: none;background-color: #E80000;transition:all 0.5s;padding:16px 20px;}
#why .owners .inner .link a:hover {background-color: #182844;}

/* Villas Section CSS */

#villa-feed {padding:64px 0;}
#villa-feed .headline {padding-bottom:42px;}
#villa-feed .headline h3 {font-size:42px;text-align: center;text-transform: uppercase;color: #003663;padding-bottom:20px;font-weight: bold;}
#villa-feed .headline h3 span {color: #E80000;}
#villa-feed .headline p {font-size:17px;text-align:center;color: #707070;padding-bottom:10px;}

#villa-feed .villa-box {box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);margin-bottom:22px;}
#villa-feed .villa-box .villa-thumb {position: relative;height:250px;}
#villa-feed .villa-box .villa-thumb img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 4;}
#villa-feed .villa-box .villa-thumb .favorite {position: absolute;top:10px; right:10px;z-index: 7;font-size:32px;color:#E80000;}
#villa-feed .villa-description {padding:14px;}
#villa-feed .villa-description h3 {font-size:28px;color:#003663;padding-bottom:18px;text-transform: uppercase;font-weight: bold;}
#villa-feed .villa-description h3 a {color:#003663;text-decoration: none;transition: all 0.5;}
#villa-feed .villa-description h3 a:hover {color:#E80000;}
#villa-feed .villa-description h5 {font-size:16px;color:#707070;padding-bottom:12px;}
#villa-feed .villa-description h5 a {color:#707070;text-decoration:none;}
#villa-feed .villa-description h5 a:hover {text-decoration: underline;}
#villa-feed .villa-description .amenity p {font-size:14px;color:#4d4848;border-bottom: 1px solid #e4dfdf;padding:5px;font-weight: 300;}
#villa-feed .villa-description .amenity p .first {font-weight: bold;width:160px;display:inline-block;}
#villa-feed .villa-description .price {padding-top:3%;text-align: center;}

#villa-feed .villa-description .price p {font-size:20px;color:#707070;font-weight:300;}
#villa-feed .villa-description .price p span {font-size:32px;color:#1adf31;font-weight:bold;}
#villa-feed .villa-description .book-now {margin-top:28px;}
#villa-feed .villa-description .book-now a {font-size:26px;color:#fff;text-decoration:none;padding:14px 24px;text-align: center;background-color: #003663;font-weight: bold;text-transform: uppercase;transition:all 0.5s;display: block;}
#villa-feed .villa-description .book-now a:hover {background-color: #E80000;}
#villa-feed .see-more {margin-top:42px;text-align: center;}
#villa-feed .see-more p {font-size:26px;}
#villa-feed .see-more p a {font-size:26px;color:#fff;text-decoration:none;padding:14px 24px;text-align: center;background-color: #003663;font-weight: bold;text-transform: uppercase;transition:all 0.5s;max-width: 250px;}
#villa-feed .see-more p a:hover {background-color: #E80000;}

/* Croatia Banner Home CSS */
#croatia-banner {padding:100px 0;background-image: url(images/croatia-banner-bcg.jpg);background-repeat: no-repeat;background-position: top center;background-size: cover;background-attachment: fixed;}
#croatia-banner h3 {font-size:38px;color:#fff;text-transform: uppercase;font-weight: bold;padding-bottom:32px;}
#croatia-banner h3 span {color: #E80000;}
#croatia-banner .text p {font-size:18px;color:#fff;font-weight:300;padding-bottom:32px;}
#croatia-banner .cta { display: flex;align-items: center; justify-content: center;height: 100%;}
#croatia-banner .cta a {display: block;color: #fff;font-size:28px;text-align: center;padding:14px 26px;background-color: #E80000;font-weight: bold;text-decoration: none;transition: all 0.5s;}
#croatia-banner .cta a:hover {background-color: #003663;}

/* Croatia Blog Home CSS */

#blog-section {padding:80px 0;}
#blog-section .headline {padding-bottom:42px;}
#blog-section .headline h3 {font-size:42px;text-align: center;text-transform: uppercase;color: #003663;padding-bottom:20px;font-weight: bold;}
#blog-section .headline h3 span {color: #E80000;}
#blog-section .headline p {font-size:17px;text-align:center;color: #707070;padding-bottom:10px;}
#blog-section .blog-post {box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);margin-bottom:22px;}
#blog-section .blog-post .blog-thumb {position: relative;height:250px;}
#blog-section .blog-post .blog-thumb img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 4;}
#blog-section .blog-description {padding:14px;}
#blog-section .blog-description h3 {font-size:28px;color:#003663;padding-bottom:12px;text-transform: uppercase;font-weight: bold;min-height:86px;}
#blog-section .blog-description h3 a {color:#003663;text-decoration: none;transition: all 0.5;}
#blog-section .blog-description h3 a:hover {color:#E80000;}
#blog-section .blog-description .blog-excerpt {min-height: 72px;}
#blog-section .blog-description .blog-excerpt p {font-size:16px;color:#4d4848;}
#blog-section .blog-description .book-now {margin-top:28px;}
#blog-section .blog-description .book-now a {font-size:26px;color:#fff;text-decoration:none;padding:14px 24px;text-align: center;background-color: #003663;font-weight: bold;text-transform: uppercase;transition:all 0.5s;display: block;}
#blog-section .blog-description .book-now a:hover {background-color: #E80000;}
#blog-section .see-more {margin-top:42px;text-align: center;}

#blog-section .see-more p {font-size:26px;}
#blog-section .see-more p a {font-size:26px;color:#fff;text-decoration:none;padding:12px 24px;text-align: center;background-color: #003663;font-weight: bold;text-transform: uppercase;transition:all 0.5s;max-width: 250px;}
#blog-section .see-more p a:hover {background-color: #E80000;}


#footer {padding:60px 0 5px 0;background-color:#003663;}
#footer .top-footer {padding-bottom:10px;}
#footer .top-footer .fbox {margin-bottom:28px;}
#footer .top-footer .fbox h4 {padding-bottom:18px;font-size:26px;font-weight: bold;color: #fff;text-transform: uppercase;}
#footer .top-footer .fbox p {padding-bottom:12px;font-size:16px;color: #fff;font-weight: 400!important;}
#footer .top-footer .fbox ul {margin-bottom:6px;}
#footer .top-footer .fbox ul li {font-size:18px;color:#fff;margin-bottom:12px;}
#footer .top-footer .fbox ul li a {color:#fff;;text-decoration: none;transition: all 0.5s ease-in-out;}
#footer .top-footer .fbox ul li a:hover {color:#E80000;}
#footer .top-footer .copyright {padding:5px 0;text-align: center;}
#footer .top-footer .copyright p {font-size:18px;color:#fff;font-weight: bold;}
#footer .top-footer .copyright p span {color: #E80000;}

@media(max-width: 720px){ #footer .bottom-footer p {text-align: center;padding-bottom:8px;} }

/* ----- Page CSS ----- */
#content {padding:64px 0;}

#content{padding:60px 0;}
#content .social {padding-bottom:20px;top:140px;z-index: 100!important;}
#content .social ul {list-style: none;}
#content .social ul li {text-align: center;font-size:20px;margin-bottom:5px;}
#content .social ul li a {color: #fff;background-color: #003663;display: block;text-decoration: none;transition: all 0.2s ease-in-out;padding:8px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#content .social ul li a:hover {background-color: #E80000;}
@media(max-width: 720px){ #content .social {z-index: 0!important;} #content .social ul {display: inline-flex;text-align: center;} #content .social ul li {margin-left:3px;} }

#content .breadcrumb {padding:0 15px 10px 15px;}
#content .breadcrumb p {font-size:18px;color:#E80000;}
#content .breadcrumb p span {color:#707070;}
#content .breadcrumb p a {color: #E80000;text-decoration: none;transition: all 0.2s ease-in-out;font-weight: bold;}
#content .breadcrumb p a:hover {color: #707070;}

#content .post {padding-bottom:20px;}
#content .post h1 {font-size:2.2rem;font-weight: bold;color:#003663;padding-bottom:20px;margin:0;}
#content .post h2 {font-size:2rem;font-weight: bold;color:#003663;padding-bottom:20px;margin:0;}
#content .post h3 {font-size:1.8rem;font-weight: bold;color:#003663;padding-bottom:20px;margin:0;}
#content .post h4 {font-size:1.6rem;font-weight: bold;color:#003663;padding-bottom:20px;margin:0;}
#content .post h5 {font-size:1.6rem;font-weight: bold;color:#003663;padding-bottom:20px;margin:0;}
#content .post p {font-size:18px;color:#707070;padding-bottom:20px;margin:0;}
#content .post ul {list-style-type: disc;padding-left:24px;margin-bottom:10px;}
#content .post ul li {font-size:18px;color: #4d4848;margin-bottom:14px;}
#content .post ol {list-style-type: disc;padding-left:24px;margin-bottom:20px;}
#content .post ol li {font-size:18px;color: #4d4848;margin-bottom:14px;}
#content .post .wp-element-caption {margin-bottom: 20px;padding:10px; font-size: 16px;background-color: #003663;color: #ffffff;margin-top:-2px;}
#content .post a {transition: all 0.2s ease-in-out;text-decoration: none;color:#E80000;}
#content .post a:hover {text-decoration: none;color:#003663;text-decoration: underline;}
#content .post p input {width: 100%;height: 50px;line-height: 50px; font-size: 24px;color: #333; border-top: none; border-left: none;border-right: none; border-bottom: 1px solid #c0c0c0; text-indent: 12px;}
#content .post p textarea {padding: 1%;width: 100%; min-height: 120px;border: 1px solid #c0c0c0;}
#content .post .wpcf7-submit {width: 100%;height: 70px;line-height: 72px; border: none; background-color: #003663;color: #dfeeff;text-align: center;font-size: 38px; text-transform: uppercase;font-weight: bold;transition: all 0.3s;}
#content .post .wpcf7-submit:hover {background-color: #E80000;}

#content .sidebar {padding:10px;}
#content .sidebar .sbox {margin-bottom:20px;}
#content .sidebar .sbox h4 {padding:12px 20px;background-color: #003663;color:#fff;font-size:22px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
#content .sidebar .sbox ul li {padding:8px 20px;font-size:16px;border-bottom:1px solid rgba(75, 105, 156, 0.2);}
#content .sidebar .sbox ul li a {text-decoration: none;color:#707070;transition: all 0.2s ease-in-out;}
#content .sidebar .sbox ul li a:hover {color:#E80000;}
#content .sidebar .sbox p {padding:12px;font-size:16px;color:#707070;}

/*-- Category CSS ---*/
.category-title {padding:0 20px 20px 15px;}
.category-title h1 {font-size:2.2rem;color:#003663;font-weight: bold;}

.post-feed {padding:20px;margin-bottom:28px;background-color: #fff;box-shadow: 0 12px 18px rgb(0 0 0 / 0.1);border-radius: 6px;}
.post-feed .post-thumb {position: relative;height:200px;}
.post-feed .post-thumb img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 4;}
.post-feed h3 {font-size:1.8rem;color: #003663;font-weight: bold;padding:10px 0;;margin:0;}
.post-feed h3 a {color: #003663;text-decoration: none;transition: all 0.5s ease-in-out;}
.post-feed h3 a:hover {color: #E80000;}
.post-feed p {color: #707070;font-size:16px;padding-bottom:12px;}
.post-feed .more {text-align: right;font-size:16px;font-weight: bold;text-transform: uppercase;}
.post-feed .more a {color:#fff;background-color: #003663;padding:8px 16px;text-decoration: none;transition: all 0.4s ease-in-out;}
.post-feed .more a:hover {background-color: #E80000;}

.post-navigation {padding:20px 0;}
.post-navigation span {margin:3px;display:inline-block;padding:6px 14px;font-size:20px;background-color:#003663;color:#fff;}
.post-navigation a {padding:6px 14px;font-size:20px;background-color:#E80000;color:#fff;text-decoration: none;}
.post-navigation a:hover {background-color: #003663;}

/* ----- Villas Category CSS ----- */
#category-intro {background-repeat: no-repeat;background-position: bottom center;background-attachment: fixed;background-size: cover;}
#category-intro .overflow-category {padding:100px 0;background-color: rgba(0, 54, 99, 0.9);}
#category-intro .breadcrumb {padding-bottom:16px;margin:0;}
#category-intro .breadcrumb p {font-size:18px;color:#fff;}
#category-intro .breadcrumb p span {color:#fff;}
#category-intro .breadcrumb p a {color: #E80000;text-decoration: none;transition: all 0.2s ease-in-out;font-weight: bold;}
#category-intro .breadcrumb p a:hover {color: #fff;}
#category-intro h1 {color: #fff;font-size:36px;font-weight: bold;padding-bottom:32px;}
#category-intro p {color: #fff;font-size:18px;padding-bottom:22px;font-weight: 400;}

#content .villa-box {box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);margin-bottom:22px;}
#content .villa-box .villa-thumb {position: relative;height:250px;}
#content .villa-box .villa-thumb img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 4;}
#content .villa-box .villa-thumb .favorite {position: absolute;top:10px; right:10px;z-index: 7;font-size:32px;color:#E80000;}
#villa-feed .villa-box .villa-thumb .favorite {position: absolute;top:10px; right:10px;z-index: 7;font-size:32px;color:#E80000;}
#content .villa-description {padding:14px;}
#content .villa-description h3 {font-size:28px;color:#003663;padding-bottom:18px;text-transform: uppercase;font-weight: bold;}
#content .villa-description h3 a {color:#003663;text-decoration: none;transition: all 0.5;}
#content .villa-description h3 a:hover {color:#E80000;}
#content .villa-description h5 {font-size:16px;color:#707070;padding-bottom:12px;}
#content .villa-description h5 a {color:#707070;text-decoration:none;}
#content .villa-description h5 a:hover {text-decoration: underline;}
#content .villa-description .amenity p {font-size:14px;color:#4d4848;border-bottom: 1px solid #e4dfdf;padding:5px;font-weight: 300;}
#content .villa-description .amenity p .first {font-weight: bold;width:140px;display:inline-block;}
#content .villa-description .price {padding-top:3%;text-align: center;}

#content .villa-description .price p {font-size:20px;color:#707070;font-weight:300;}
#content .villa-description .price p span {font-size:32px;color:#1adf31;font-weight:bold;}
#content .villa-description .book-now {margin-top:28px;}
#content .villa-description .book-now a {font-size:26px;color:#fff;text-decoration:none;padding:14px 24px;text-align: center;background-color: #003663;font-weight: bold;text-transform: uppercase;transition:all 0.5s;display: block;}
#content .villa-description .book-now a:hover {background-color: #E80000;}

#content .pagination {padding:20px;}
#content .pagination span {display:inline-block;padding:6px 14px;font-size:20px;background-color:#003663;color:#fff;}
#content .pagination a {padding:6px 14px;font-size:20px;background-color:#E80000;color:#fff;text-decoration: none;margin:3px;}
#content .pagination a:hover {background-color: #003663;}

/* ----- Advanced Search Section ----- */
#advanced-search {margin-bottom:80px;position: relative;background-color:#E80000;}
#advanced-search .btn-search {background-color: #E80000;border-bottom: 1px solid #e4dfdf;border-radius: 0 0 5px 5px;font-size:22px;font-weight: bold;color: #fff;padding:12px 25px;text-transform: uppercase;}
#advanced-search .button {position: absolute;z-index: 6px;bottom:-59px;left:50%;transform: translate(-50%, 0%);}
#advanced-search .card {background-color: #E80000;border:none;box-shadow: none;}

/* Favorites Page CSS */

.headline-favorite-croatia-villas {padding:60px 0 80px 0;}
.headline-favorite-croatia-villas h3 {font-size:42px;text-align: center;text-transform: uppercase;color: #003663;padding-bottom:20px;font-weight: bold;}
.headline-favorite-croatia-villas h3 span {color: #E80000;}
.headline-favorite-croatia-villas p {font-size:17px;text-align:center;color: #707070;padding-bottom:10px;}

/* ----- Advanced Search Banner CSS ----- */
#advanced-search-banner {background-color: #003663;padding:60px 0;}
#advanced-search-banner .breadcrumb {padding-bottom:26px;margin:0;}
#advanced-search-banner .breadcrumb p {font-size:18px;color:#fff;}
#advanced-search-banner .breadcrumb p span {color:#fff;}
#advanced-search-banner .breadcrumb p a {color: #E80000;text-decoration: none;transition: all 0.2s ease-in-out;font-weight: bold;}
#advanced-search-banner .breadcrumb p a:hover {color: #ffffff;}
#advanced-search-banner h1 {font-size:32px;font-weight: bold;color:#fff;text-transform: uppercase;padding-bottom:28px;}
#advanced-search-banner h1 span {color: #E80000;}
#advanced-search-form label {color: #ffffff;}
#advanced-search-form .btn-as {color: #ffffff;background-color: #E80000;padding:12px 42px;text-transform: uppercase;font-size:28px;font-weight: bold;transition: all 0.5s;}
#advanced-search-form .btn-as:hover {background-color: #9e1a1a;}

/* ----- Single Villas CSS ----- */
#intro2 {background-size: cover!important;}
#intro2 .overflow {padding:60px 0;background-color: rgba(0, 54, 99, 0.7);}
#intro2 .breadcrumb {padding:0 15px 200px 15px;}
#intro2 .breadcrumb p {font-size:18px;color:#fff;}
#intro2 .breadcrumb p span {color:#fff;}
#intro2 .breadcrumb p span a {text-decoration: none;color:#fff;font-weight: bold;transition: all 0.2s ease-in-out;}
#intro2 .breadcrumb p span a span {text-decoration: none;transition: all 0.2s ease-in-out;font-weight: bold;}
#intro2 .breadcrumb p a:hover {color: #E80000!important;}
#intro2 .breadcrumb p span a:hover span {color: #E80000!important;}
#intro2 .intro-text h1 {font-size:4rem;font-weight: bold;color:#fff;text-transform: uppercase;}
#intro2 .intro-text p {font-size:20px;color:#fff;padding-bottom:10px;font-weight: bold;}
#intro2 .intro-text p span {font-weight:300;}
#intro2 .intro-text .pricing span {font-size:28px;font-weight: 300;color:#fff;}
#intro2 .intro-text .favorites  {display: flex;align-items: center;}
#intro2 .intro-text .favorites .favorites-text {margin-right: 10px;font-weight: bold;}
#open-gallery-popup {margin:10px 0;width:100%;border: none;font-size:20px;padding:12px 22px;text-transform: uppercase;font-weight: bold;background-color: #E80000;color:#ffffff;transition: all 0.2s ease-in-out;}
#open-gallery-popup:hover {background-color: #9e1a1a;}

@media (max-width: 767px) {
    #intro2 .intro-text h1 {font-size:2rem;}
    }

/* Contact The Owner Button & Modal */
#intro2 .villa-info .btn-contact {margin:10px 0;width:100%;border: none;font-size:20px;padding:12px 22px;text-transform: uppercase;font-weight: bold;background-color: #ffffff;color:#003663;transition: all 0.2s ease-in-out;}
#intro2 .villa-info .btn-contact:hover {color: #000000;}
#contactModal .modal-header {background-color: #E80000;}
#contactModal .modal-header h5 {color: #ffffff;font-size:22px;}
#contactModal .modal-body .nav-item {color: #707070;}
#contactModal .modal-body .nav-link {color: #003663;}
#contactModal .modal-body .tab-pane {padding-top:18px;}
#contactModal .modal-body input {margin:6px 0;width:100%;padding:10px;border: 1px solid #c0c0c0;border-radius: 3px;color: #707070;font-size:16px;}
#contactModal .modal-body textarea {margin:6px 0;width:100%;padding:3px 6px;border: 1px solid #c0c0c0;border-radius: 3px;max-height:120px;overflow-y: scroll;font-size:16px;}
#contactModal .modal-body .wpcf7-submit {width:100%;border-radius: 0;font-size:22px;text-transform: uppercase;color:#fff;background-color: #003663;border:none;font-weight: bold;transition: all 0.2s ease-in-out;}
#contactModal .modal-body .wpcf7-submit:hover {background-color: #E80000;}

/* Gallery CSS */
.croatia-villas-gallery {display: flex;flex-wrap: wrap;gap: 10px;}
.croatia-villas-thumbnail {max-width: 100px;max-height: 100px;object-fit: cover;}
.croatia-villas-gallery-item {display: inline-block;text-decoration: none;}

/* Seasonal prices picker */
#content .post .seasonal-prices-table {width: 100%;border-collapse: collapse;margin: 20px 0;background-color: #f9f9f9;}
#content .post .seasonal-prices-table th,
#content .post .seasonal-prices-table td {border: 1px solid #ddd; padding: 12px;text-align: left;}
#content .post .seasonal-prices-table th {background-color: #dfeeff; color: #707070;font-weight: bold;}
#content .post .seasonal-prices-table td {background-color: #ffffff;color: #707070;}
#content .post .seasonal-prices-table tr:nth-child(even) td {background-color: #dfeeff;}
#content .post .seasonal-prices-table tr:hover td {background-color: #e0e0e0;}

@media screen and (max-width: 768px) {
    #content .post .seasonal-prices-table th, 
    #content .post .seasonal-prices-table td {padding: 8px;font-size: 14px;}
}

/* Amenity Styling */
#content .post .villa-amenity {background-color: #f6f5f5;color:#707070;font-size:18px;padding-top:20px;padding-bottom:8px;font-weight: bold;}
#content .post .villa-amenity .col-md-3 {padding-bottom:12px;}
#content .post .house-rules {background-color: #f6f5f5;;color:#707070;font-size:18px;padding:20px;}

/* Post Content Tabs Styling */
#content .post .nav-tabs {list-style-type: none; display: flex; justify-content: space-between;padding:0;margin:0;background-color: #dfeeff;}
#content .post .nav-tabs li {margin:0;font-size:18px;border:none;text-transform: capitalize;flex-grow: 1;text-align: center;}
#content .post .nav-tabs li a {padding:26px 38px;border: none;border-radius: 0;color:#707070;}
#content .post .nav-tabs li a:hover {background-color: #182844;color: #fff;}
#content .post .nav-tabs li a:hover {text-decoration: none;}
#content .post .nav-tabs li .active {padding:26px 38px;background-color: #182844;color: #fff;}
#content .post .nav-tabs li .active:hover {text-decoration: none;}
#content .post .tab-pane {padding:25px 20px;}

@media (max-width: 767px) {
    #content .post .nav-tabs li {
        width: 100%;
        text-align: center;
        display: block;
        margin: 0 auto;
    }
}

/* Custom Login Page Owner & Agency */
#custom-login-page {padding:10% 0;background-image: url(images/banner-background-intro.jpg);background-repeat: no-repeat;background-position: top center;background-size: cover;background-attachment: fixed;}
#custom-login-page .form-wrap {padding:20px; background-color: #fff;border:1px solid #e4dfdf;border-radius: 12px;}
#custom-login-page .login-logo {text-align: center;}
#loginform p {margin-bottom:12px;font-size:18px;color:#707070;text-indent:3px;}
#loginform p input {padding:8px 5px;border:1px solid #e4dfdf;border-radius:4px;width:100%;}
#loginform .submit {margin-top:32px;}
#wp-submit {background-color: #003663;color:#fff;font-size:22px;font-weight: bold;text-transform: uppercase;transition: ease-in 0.3s;padding:8px 12px;}
#wp-submit:hover {background-color: #E80000;}
.custom-login-message {margin-bottom:12px;font-size:18px;color:#707070;}
.lost-password {margin-bottom:12px;font-size:18px;color:#707070;}
.lost-password a {text-decoration: none;color: #003663;}
.lost-password a:hover {color: #E80000;}

/* Account Page For Owner & Agency */
#user-account {padding:80px 0;}
#user-account .headline {background-color: #f6f5f5;padding:20px;margin-bottom:32px;}
#user-account .headline h2 {padding-bottom:22px;font-size:26px;font-weight: bold;color:#003663;}
#user-account .headline h2 span {color:#E80000;}
#user-account .headline p {font-size:18px;color:#707070;padding-bottom:20px;}
#user-account .headline p a {text-decoration: none;font-size:22px;color: #fff;padding:10px 22px;background-color: #003663;text-transform: uppercase;transition: ease-in 0.3s;}
#user-account .headline p a:hover {background-color: #E80000;font-weight: bold;}

#user-account .sidebar-nav  {margin-bottom:18px;}
#user-account .sidebar-nav li {width:100%;margin-bottom:3px;}
#user-account .sidebar-nav .nav-link {width:100%;font-size:20px;color:#707070;text-decoration: none;background-color: #f6f5f5;}
#user-account .sidebar-nav .active {background-color: #003663;color:#fff;}
#user-account .sidebar-nav .nav-link:hover {background-color: #003663;color:#fff;}
#user-account .main-content h3 {color: #003663; padding-bottom:28px;font-size:28px;font-weight: bold;}
#content-1 p {color: #707070; padding-bottom:16px;font-size:18px;}
#content-1 p span {color: #003663; padding-bottom:16px;font-size:18px;font-weight: bold;width:160px;display:inline-block;}

#content-2 .number {color: #707070; padding-bottom:16px;font-size:18px;}
#content-2 .number2 {color: #707070; padding-bottom:16px;font-size:18px;}
#content-2 .more {color: #707070; padding-bottom:16px;font-size:18px;}
#content-2 .new-villa {padding:12px 22px;background-color: #003663;color:#fff;margin-bottom:18px;font-weight: bold;font-size:22px;transition: ease-in 0.3s;}
#content-2 .new-villa:hover {background-color: #E80000;}

#content-2 .post-feed .more .reservation-post {background-color: #1adf31;padding:8px 16px;margin:5px;border:none;font-size:16px;transition: ease-in-out 0.3s;}
#content-2 .post-feed .more .reservation-post:hover {background-color: #17b82a;}
#content-2 .post-feed .more .delete-post {background-color: #df1a1a;padding:8px 16px;margin:5px;border:none;font-size:16px;transition: ease-in-out 0.3s;}
#content-2 .post-feed .more .delete-post:hover {background-color: #b81717;}
#content-2 .post-feed .more .edit-post {background-color: #1a3adf;padding:8px 16px;margin:5px;border:none;font-size:16px;transition: ease-in-out 0.3s;}
#content-2 .post-feed .more .edit-post:hover {background-color: #162fb8;}
#content-2 .post-feed .more .preview-post {background-color: #003663;padding:8px 16px;margin:5px;border:none;font-size:16px;transition: ease-in-out 0.3s;}
#content-2 .post-feed .more .preview-post:hover {background-color: #162fb8;}

/* ----- Create Post CSS ----- */
#create-post .breadcrumb {padding:40px 15px;color: #707070;font-size:18px;}
#create-post .breadcrumb a {text-decoration: none;color: #E80000;transition: ease-in-out 0.3s;}
#create-post .breadcrumb a:hover {color: #003663;}
#create-post h4 {color: #003663;font-size:22px;font-weight: bold;padding-bottom:32px;}
#create-post h3 {color: #003663;font-size:32px;font-weight: bold;padding-bottom:32px;text-transform: uppercase;}
#create-post h2 {color: #003663;font-size:32px;font-weight: bold;padding-bottom:22px;}
#create-post h2 span {color: #E80000;}
#create-post label {font-size:18px;margin-bottom:12px;color:#707070;font-weight: bold;}
#create-post .form-label1 {color: #003663;font-size:22px;font-weight: bold;padding-bottom:32px;}
#create-post .upload {background-color: #003663;color:#fff;width:100%;margin:5px 0;}
#create-post .removal {background-color: #E80000;color:#fff;width:100%;margin:5px 0;font-weight: bold;border-radius: 0;}

#seasonal-prices-container {width:100%;}
#seasonal-prices-container .form-table {width:100%;}
#seasonal-prices-container .form-table thead {background-color:#003663;color: #fff;text-indent: 10px;line-height: 52px;border-radius: 4px;margin-bottom:5px;}
#seasonal-prices-wrapper {width:100%;margin:3px 0;}
#seasonal-prices-wrapper .seasonal-price-row input {margin:3px;color:#707070;}
#seasonal-prices-wrapper .seasonal-price-row .remove-seasonal-price-row {margin:6px;border:none;color:#fff;background-color: #E80000;padding:6px 16px;text-align: right;}
#seasonal-prices-wrapper .seasonal-price-row .remove-seasonal-price-row:hover {background-color: #9e1a1a;}
#add-seasonal-price-row {margin:20px 0;border: none;background-color: #003663;color: #fff;font-size:20px;padding:12px 22px;transition: ease-in 0.4s;}
#add-seasonal-price-row:hover {background-color: #E80000;}

#create-post .add-villa {border: none;background-color: #003663;color: #fff;font-size:20px;padding:18px 32px;transition: ease-in 0.4s;text-transform: uppercase;font-weight: bold;}
#create-post .add-villa:hover {background-color: #E80000;}
#create-post .editor-sb ul li {margin-bottom:3px;}
#create-post .editor-sb h5 {font-size:22px;font-weight: bold;padding-bottom:12px;color:#707070;text-transform:capitalize;}

#create-post .editor-sb .delete-post {background-color: #E80000;padding:4px 16px;margin:5px;border:none;font-size:18px;transition: ease-in-out 0.3s;}
#create-post .editor-sb .delete-post:hover {background-color: #003663;}
#create-post .editor-sb .edit-post {background-color: #003663;padding:4px 16px;margin:5px;border:none;font-size:18px;transition: ease-in-out 0.3s;}
#create-post .editor-sb .edit-post:hover {background-color: #E80000;}
#create-post .editor-sb .preview-post {background-color: #182844;padding:4px 16px;margin:5px;border:none;font-size:18px;transition: ease-in-out 0.3s;color:#fff;}
#create-post .editor-sb .more .preview-post:hover {background-color: #9e1a1a;padding:4px 20px;}
#create-post .editor-sb .reservation-post {background-color: #1adf31;padding:4px 16px;margin:5px;border:none;font-size:18px;transition: ease-in-out 0.3s;color:#fff;}
#create-post .editor-sb .reservation-post:hover {background-color: #17b82a;}

#featured-image-preview  {overflow: hidden;}
#featured-image-preview p {color:#fff;}
#featured-image-preview img {width:100%;height:auto;object-fit: contain;}

#current-gallery-images p {font-size:18px;font-weight: bold;color:#707070;padding-bottom:12px;}
#current-gallery-images .image-thumbnail-container {position: relative; display: inline-block; margin: 5px;width:100px; height:100px;}
#current-gallery-images .image-thumbnail-container img {height: 100%;width: auto; max-width: 100%; object-fit: cover;}

#upload_button {background-color: #003663;padding:8px 32px;margin:5px;border:none;font-size:18px;transition: ease-in-out 0.3s;font-size:20px;color:#fff;font-weight: bold;}
#upload_button:hover {background-color: #E80000;}

#add-season {margin:20px 0;border: none;background-color: #003663;color: #fff;font-size:20px;padding:12px 22px;transition: ease-in 0.4s;}
#add-season:hover {background-color: #E80000;}

#create-post .book-cal {width:100%;}
#create-post .book-cal h4 {font-size:22px;text-transform: uppercase;padding-bottom:20px;}
#create-post .book-cal p {font-size:18px;padding-bottom:24px;color:#707070;}

.dates-legend {width:100%;}
.dates-legend h3 {font-size:24px;font-weight: bold;color:#003663;padding-bottom:16px;}
.dates-legend p {font-size: 16px; font-weight: 600;padding-bottom:20px;}
.dates-legend p span {height: 12px; width: 12px; border-radius: 50%; display: inline-block;}
.dates-legend p .booked {background-color: #ffcccc;}
.dates-legend p .available {background-color: #e6ffe6;}

#rank-math-toc {padding:12px;margin-bottom:20px;background-color: #dfeeff;}
#rank-math-toc ul {list-style-type:none!important;margin:0!important;padding:0!important;}
#rank-math-toc ul li {font-size:18px!important;margin-bottom:12px!important;font-weight:bold!important;}
#rank-math-toc ul li ul {padding-left:20px!important;}
#rank-math-toc ul li ul li {font-size:16px!important;margin-bottom:6px!important;font-weight:400!important;}
#rank-math-toc ul li a {color: #003663!important;}
#rank-math-toc ul li a:hover {color:#9e1a1a;text-decoration: none!important}

/* Shop CSS */
#product-feed {padding:100px 0 80px 0;}
#product-feed .headline {padding-bottom:20px;}
#product-feed .headline h3 {padding-bottom:20px;font-size:2em;color: #003663;text-transform: uppercase;font-weight: bold;}
#product-feed .headline h3 span {color: #E80000;}
#product-feed .headline p {padding-bottom:20px;font-size:18px;color:#707070;}

#product-feed .product-box {margin-bottom:22px;}
#product-feed .product-box .product-inner {padding:10px 10px 20px 10px;font-size:18px;color:#707070;box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);}
#product-feed .product-box .product-img {position: relative;height:250px;}
#product-feed .product-box .product-img img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 4;}
#product-feed .product-box .product-title {font-size:26px;padding:12px 0 18px 0;font-weight: bold;text-transform: uppercase;}
#product-feed .product-box .product-title a {text-decoration: none;color:#003663;transition: ease-in-out 0.3s;}
#product-feed .product-box .product-title a:hover {color:#E80000;}
#product-feed .product-box p {font-size:18px;color:#707070;padding-bottom:20px;}
#product-feed .product-box .price {font-size:28px;color:#1adf31;padding-bottom:20px;text-align: right;font-weight: bold;}

#product-feed .product-box .add-link a {width:100%;padding:10px 18px;display: block;color:#fff;font-size:20px;font-weight:bold;text-align: center;background-color: #182844;text-decoration: none;text-transform: uppercase;transition: ease-in 0.3s;}
#product-feed .product-box .add-link a:hover {background-color: #E80000;}

#product-feed .product-box .see-link a {width:100%;padding:10px 18px;display: block;color:#fff;font-size:20px;font-weight:bold;text-align: center;background-color: #182844;text-decoration: none;text-transform: uppercase;transition: ease-in 0.3s;}
#product-feed .product-box .see-link a:hover {background-color: #E80000;}
/* Single Product */
#content .product_title {padding-bottom:12px;font-size:26px;color: #003663;text-transform: uppercase;font-weight: bold;}
#content .price {font-size:26px;color: #1adf31;font-weight: bold;padding-bottom:20px;}
#content .woocommerce-product-details__short-description p {font-size:16px;color: #707070;padding-bottom:20px;}
#content .stock {font-size:20px;color: #003663;padding-bottom:20px;font-weight: bold;}
#content .quantity .qty {height:38px;}
#content .single_add_to_cart_button {background-color: #003663;}
#content .single_add_to_cart_button:hover {background-color: #E80000;}
#content .product_meta .sku_wrapper {width:100%!important;display:block!important;padding-bottom:12px;font-size:18px;color:#707070;font-weight: bold;}
#content .product_meta .posted_in {width:100%!important;display:block!important;padding-bottom:12px;font-size:18px;color:#707070;font-weight: bold;}
#content .product_meta a {text-decoration: none;color:#003663;}
#content .woocommerce-message {border-top-color:#003663!important;}
#content .woocommerce-message .wc-forward {background-color:#003663!important;color:#fff;}
#content .woocommerce-message .wc-forward:hover {background-color:#E80000!important;color:#fff;}

#content .post .wc-block-components-product-name {font-size:18px;text-decoration: none;text-transform: uppercase;color:#003663;font-weight: bold;}
#content .post .wc-block-cart__submit-container a {font-size:18px;text-decoration: none;text-transform: uppercase;background-color:#003663;font-weight: bold;color:#fff;transition: ease-in-out 0.3s;}
#content .post .wc-block-cart__submit-container a:hover {background-color:#E80000;}

#content .post .wc-block-components-checkout-place-order-button {font-size:18px;text-decoration: none;text-transform: uppercase;background-color:#003663;font-weight: bold;color:#fff;transition: ease-in-out 0.3s;border:none;}
#content .post .wc-block-components-checkout-place-order-button:hover {background-color: #E80000;}

/* Reservation Page CSS */
.reservation-edit {padding-bottom:60px;}
.reservation-edit h1 {text-transform: uppercase;color:#003663;font-size:28px;padding-bottom:18px;font-weight: bold;}
.reservation-edit h1 span {color: #E80000;}
.reservation-edit p {color: #707070;font-size:18px;padding-bottom:26px;}

/* Calendars CSS Styling */

#visitor-booking-calendar {width:100%;display:block;}
#visitor-booking-calendar .ui-widget.ui-widget-content {width:100%!important;border:none!important;}

.ui-datepicker-inline { width: 100%!important;display: flex!important; flex-wrap: wrap!important;justify-content: space-between!important;  gap: 5px; margin: 4px auto;}
.ui-datepicker-group {width: calc((100% / 3) - 10px)!important;padding: 0;box-sizing: border-box;float: left!important;}
.ui-datepicker-calendar {width:100%!important;margin:0!important;border:none;}

.ui-datepicker-prev {display:none;}
.ui-datepicker-next {display:none;}
.ui-widget.ui-widget-content {border:none!important;}

@media (max-width: 768px) {
    .ui-datepicker-group {
        width: 100%!important; /* Full width for smaller screens */
        float: none!important; /* Remove float to ensure proper stacking */
    }
}

#logged-in-booking-calendar {display:block;overflow: hidden;}
.az-datum {font-size:22px;font-weight: bold;padding:12px 24px;background-color: #003663;color:#fff;}
.az-datum:hover {background-color: #E80000;color:#fff;}

/* ----- SPECIAL CLASSES ----- */
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}