/* Akomo | Hotel and Resort HTML Template
Template Name: Akomo
Version: 1.0.0
License: copyright commercial
/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header
5. Sticky Header
6. Mobile Menu
7. Header Style Two
8. Header Style Three
9. Header Style four
10. Section Title
11. Page Title
12. Banner Section / Two / Three / Four
13. About Section / Two / Three
14. Rooms Section / Two / Three
15. Rooms Detail Section
16. Review Form
17. Packages Section / Two / Three / Four
18. Services Section
19. Video Section
20. Testimonial Section / Two / Three / Four
21. Experience Section
22. Gallery Section
23. News Section / Two / Three / Four / Five
24. Blog Single
25. Comment Area
26. Comment Form
27. Contact Section
28. Subscribe Section
29. Main Footer / Two
30. Sidebar Page Container
**********************************************/
/***
====================================================================
Fonts
====================================================================
***/
/***
====================================================================
Reset
====================================================================
***/
*{
margin:0px;
padding:0px;
border:none;
outline:none;
font-size: 100%;
}
/***
====================================================================
Global Settings
====================================================================
***/
body {
font-size:14px;
color:#777777;
line-height: 28px;
font-weight:400;
background:#ffffff;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-family: 'Lato', sans-serif;
}
a{
text-decoration:none;
cursor:pointer;
color:var(--two-color);
}
a:hover,
a:focus,
a:visited{
text-decoration:none;
outline:none;
}
h1,h2,h3,h4,h5,h6 {
position:relative;
font-weight:normal;
margin:0px;
background:none;
line-height:1.2em;
color: #222222;
font-family: 'Playfair Display', serif;
}
textarea{
overflow:hidden;
resize: none;
}
button{
outline: none !important;
cursor: pointer;
}
p,.text{
font-size: 18px;
line-height: 28px;
font-weight: 400;
color: #505050;
margin: 0;
}
::-webkit-input-placeholder{color: inherit;}
::-moz-input-placeholder{color: inherit;}
::-ms-input-placeholder{color: inherit;}
.auto-container{
position:static;
max-width:1200px;
padding:0px 15px;
margin:0 auto;
}
.small-container{
position:static;
max-width:1000px;
padding:0px 15px;
margin:0 auto;
}
.page-wrapper{
position:relative;
margin:0 auto;
width:100%;
min-width:300px;
overflow: hidden;
z-index: 99;
background-color: #ffffff;
}
ul,li{
list-style:none;
padding:0px;
margin:0px;
}
.theme-btn{
display:inline-block;
text-align: center;
white-space: nowrap;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
/*Btn Style One*/
.btn-style-one{
position:relative;
font-size:14px;
line-height:26px;
color:#ffffff;
padding: 10px 40px;
font-weight: 700;
border: 2px solid #ffffff;
background-color: transparent;
overflow: hidden;
text-transform: uppercase;
}
.btn-style-one:hover{
background-color: #ffffff;
color: var(--two-color);
}
/*Btn Style two*/
.btn-style-two{
position:relative;
font-size:14px;
line-height:28px;
color:#ffffff;
background-color: var(--two-color);
border: 1px solid var(--two-color);
padding: 10px 25px;
font-weight: 700;
text-transform: uppercase;
overflow: hidden;
}
.btn-style-two:hover{
color:#ffffff;
border-color: var(--main-color);
background: var(--main-color);
}
/*Btn Style Three*/
.btn-style-three{
position:relative;
font-size:14px;
line-height:28px;
color:#ffffff;
background-color: var(--main-color);
border: 1px solid var(--main-color);
padding: 10px 25px;
font-weight: 700;
text-transform: uppercase;
overflow: hidden;
}
.btn-style-three:hover{
color:#ffffff;
border-color: var(--two-color);
background: var(--two-color);
}
/*=== List Style One ===*/
.list-style-one{
position: relative;
display: block;
margin-bottom: 30px;
}
.list-style-one li{
position: relative;
font-size: 16px;
line-height: 28px;
color: #222222;
font-weight: 700;
padding-left: 35px;
margin-bottom: 20px;
font-family: "Saira";
}
.list-style-one li:before{
position: absolute;
left: 0;
top: 0;
font-size: 14px;
line-height: 28px;
color: var(--two-color);
font-weight: 600;
content: "\f181";
font-family: "Flaticon";
}
/*=== List Style Two ===*/
.list-style-two{
position: relative;
display: block;
margin-bottom: 30px;
}
.list-style-two li{
position: relative;
font-size: 16px;
line-height: 26px;
color: #ffffff;
font-weight: 500;
padding-left: 35px;
padding-right: 35px;
margin-bottom: 10px;
}
.list-style-two li:before{
position: absolute;
left: 0;
top: 0;
font-size: 16px;
line-height: 26px;
color: #ffffff;
font-weight: 900;
font-family: "Font Awesome 5 Free";
content: "\f00c";
}
/*=== List Style Three ===*/
.list-style-three{
position: relative;
display: block;
margin-bottom: 30px;
}
.list-style-three li{
position: relative;
font-size: 16px;
line-height: 26px;
color: #222222;
font-weight: 600;
padding-left: 45px;
margin-bottom: 10px;
}
.list-style-three li:before{
position: absolute;
left: 0;
top: 8px;
height: 9px;
width: 9px;
background: #1ebeb6;
content: "";
}
/*=== List Style Four ===*/
.list-style-four{
position: relative;
display: block;
margin-bottom: 30px;
}
.list-style-four li{
position: relative;
font-size: 22px;
line-height: 34px;
color: #222222;
font-weight: 500;
padding-left: 35px;
padding-right: 35px;
margin-bottom: 10px;
}
.list-style-four li:before{
position: absolute;
left: 0;
top: 0;
font-size: 22px;
line-height: 34px;
color: #1ebeb6;
font-weight: 900;
font-family: "Font Awesome 5 Free";
content: "\f0c3";
}
/*=== List Style Four ===*/
.list-style-five{
position: relative;
display: block;
margin-bottom: 30px;
}
.list-style-five li{
position: relative;
font-size: 20px;
line-height: 30px;
color: #555555;
font-weight: 500;
padding-left: 35px;
padding-right: 35px;
margin-bottom: 10px;
}
.list-style-five li:before{
position: absolute;
left: 0;
top: 0;
font-size: 16px;
line-height: 30px;
color: var(--two-color);
font-weight: 900;
font-family: "Font Awesome 5 Free";
content: "\f00c";
}
/*Social Icon One*/
.social-icon-one{
position:relative;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.social-icon-one li{
position:relative;
margin-left: 20px;
}
.social-icon-one li:first-child{
margin-left: 0;
}
.social-icon-one li a{
position:relative;
display:block;
height: 45px;
width: 45px;
line-height: 45px;
font-size:24px;
color:var(--two-color);
background: #ffffff;
text-align: center;
border-radius: 50%;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
}
.social-icon-one li a:hover{
color:#ffffff;
background: var(--two-color);
}
/*Social Icon Two*/
.social-icon-two{
position:relative;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.social-icon-two li{
position:relative;
margin-right: 10px;
}
.social-icon-two li a{
position:relative;
display:block;
height: 40px;
width: 40px;
color:#222222;
text-align: center;
font-size:16px;
line-height: 40px;
border: 1px solid transparent;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
}
.social-icon-two li a:hover{
color: #1ebeb6;
border-color: #222222;
background-color: #ffffff;
}
/*Social Icon Four */
.social-icon-four{
position:relative;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.social-icon-four li{
position:relative;
margin-left: 20px;
}
.social-icon-four li a{
position:relative;
display:block;
height: 37px;
width: 37px;
border-radius: 50%;
color:#222222;
text-align: center;
font-size:14px;
line-height: 35px;
border: 1px solid #eeeeee;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
}
.social-icon-four li a:hover{
color: #ffffff;
border-color: #ef5b3f;
background-color: #ef5b3f;
}
/*Social Icon Five */
.social-icon-five{
position:relative;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.social-icon-five li{
position:relative;
margin-left: 20px;
}
.social-icon-five li a{
position:relative;
display:block;
height: 40px;
width: 40px;
color:#ffffff;
background: #222222;
text-align: center;
font-size:18px;
line-height: 40px;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
}
.social-icon-five li a:hover{
color: var(--two-color);
background-color: #ffffff;
}
/*Social Icon Six */
.social-icon-six{
position:relative;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.social-icon-six li{
position:relative;
margin-left: 20px;
}
.social-icon-six li a{
position:relative;
display:block;
height: 37px;
width: 37px;
border-radius: 50%;
color:#222222;
text-align: center;
font-size:14px;
line-height: 35px;
border: 1px solid #eeeeee;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease;
}
.social-icon-six li a:hover{
color: #ffffff;
border-color: var(--two-color);
background-color: var(--two-color);
}
.theme_color{
color:#25262c;
}
.pull-right{
float: right;
}
.pull-left{
float: left;
}
/*.preloader{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:999999;
background-color:#ffffff;
background-position:center center;
background-repeat:no-repeat;
background-image:url(../images/logo.png);
} */
img{
display:inline-block;
max-width:100%;
height:auto;
}
.tabs-box{
position: relative;
}
.tabs-box .tab{
display: none;
}
.tabs-box .active-tab{
display: block;
}
/* Default Dots */
.default-dots .owl-dots{
position: absolute;
left: 0;
bottom: 0;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.default-dots .owl-dot{
position: relative;
margin: 0 6px;
height: 12px;
width: 12px;
border-radius: 5px;
background: #ffdeca;
transition: all 300ms ease;
}
.default-dots .owl-dot.active{
background: var(--main-color);
width: 36px;
}
/* Default Dots */
.default-nav .owl-nav{
position: absolute;
left: 0;
top: 50%;
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.default-nav .owl-next,
.default-nav .owl-prev{
position: relative;
display: block;
text-align: center;
height: 60px;
width: 60px;
margin-top: -30px;
line-height: 58px;
border-radius: 50%;
border:1px solid #d2d3d6;
transition: all 300ms ease;
}
.default-nav .owl-next:hover,
.default-nav .owl-prev:hover{
color: #ffffff;
background: var(--main-color);
border-color: var(--main-color);
}
/***
====================================================================
Scroll To Top style
====================================================================
***/
.scroll-to-top{
position: fixed;
right: 20px;
bottom: 20px;
width: 40px;
font-size:16px;
line-height:40px;
color:#1b212f;
text-align:center;
cursor:pointer;
background:#ffffff;
z-index:100;
display:none;
border-radius: 0;
margin: 0 auto;
box-shadow: 0 0 5px rgba(0,0,0,0.10);
-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
}
.scroll-to-top:hover{
background:#1b212f;
color: #ffffff;
}
/***
====================================================================
Main Header
====================================================================
***/
.header-span{
position: relative;
height: 110px;
display: block;
width: 100%;
}
.main-header{
position:absolute;
left:0px;
top:20px;
width:100%;
z-index:999;
}
.main-header .logo{
position: relative;
}
.main-header .logo img{
max-width: 100%;
height: auto;
}
.main-header .main-box{
position:relative;
left:0px;
top:0px;
display: flex;
align-items: center;
justify-content: space-between;
-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
}
.main-header .main-box .nav-outer{
position: relative;
display: flex;
align-items: center;
}
.main-menu{
position:relative;
float:left;
}
.main-menu .navbar-header{
display: none;
}
.main-menu .navbar-collapse{
padding:0px;
}
.main-menu .navigation{
position:relative;
margin:0px;
}
.main-menu .navigation > li{
position:relative;
float:left;
padding:15px 0px;
margin-right: 40px;
-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
}
.main-menu .navigation > li:last-child{
margin-right: 0;
}
.main-menu .navigation > li > a{
position:relative;
display:block;
text-align:center;
opacity:1;
font-weight:400;
color:#ffffff;
font-size:18px;
line-height:20px;
padding: 0;
-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
}
.main-menu .navigation > li > a:before{
position: absolute;
left: 50%;
bottom: -4px;
height: 2px;
width: 0%;
background: var(--main-color);
content: "";
-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
}
.main-menu .navigation > li:hover > a:before,
.main-menu .navigation > li.current > a:before{
left: 0;
width: 75%;
}
.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a{
}
.main-menu .navigation > li > ul{
position:absolute;
left:0px;
top:100%;
width:220px;
z-index:100;
padding:10px 0 0;
background-color:#ffffff;
margin-top: 30px;
opacity:0;
display:none;
box-shadow: 0 0 3px rgba(0,0,0,0.10);
-webkit-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
-ms-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
-o-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
-moz-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
}
.main-menu .navigation > li > ul.from-right{
left:auto;
right:0px;
}
.main-menu .navigation > li > ul > li{
position:relative;
width:100%;
}
.main-menu .navigation > li > ul > li:last-child{
border-bottom:none;
}
.main-menu .navigation > li > ul > li > a{
position:relative;
display:block;
padding:10px 0px;
line-height:29px;
font-weight:400;
font-size:16px;
color:#333333;
text-align:left;
margin: 0 30px;
border-bottom: 1px solid #e5e5e5;
text-transform:capitalize;
-webkit-transition:all 200ms ease;
-moz-transition:all 200ms ease;
-ms-transition:all 200ms ease;
-o-transition:all 200ms ease;
transition:all 200ms ease;
}
.main-menu .navigation > li > ul > li:hover > a{
color:var(--two-color);
}
.main-menu .navigation > li > ul > li.dropdown > a:after{
font-family: 'Font Awesome 5 Free';
content: "\f105";
position:absolute;
right:0;
top:11px;
display:block;
line-height:24px;
font-size:16px;
font-weight:900;
z-index:5;
}
.main-menu .navigation > li > ul > li > ul{
position:absolute;
left:100%;
top:0px;
width:220px;
z-index:100;
display:none;
background-color:#ffffff;
opacity:0;
padding: 10px 0 0;
margin-top: 10px;
-webkit-transform:translateY(-30px);
-ms-transform:translateY(-30px);
transform:translateY(-30px);
-webkit-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
-ms-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
-o-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
-moz-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
}
.main-menu .navigation > li > ul > li > ul > li{
position:relative;
width:100%;
}
.main-menu .navigation > li > ul > li > ul > li:last-child{
border-bottom:none;
}
.main-menu .navigation > li > ul > li > ul > li > a{
position:relative;
display:block;
padding:10px 0;
line-height:24px;
font-weight:400;
font-size:16px;
color:#333333;
text-align:left;
text-transform:capitalize;
border-bottom: 1px solid #e5e5e5;
transition:all 300ms ease;
margin: 0 30px;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
}
.main-menu .navigation > li > ul > li > ul > li > a:hover{
color:var(--two-color);
}
.main-menu .navigation > li.dropdown:hover > ul{
visibility:visible;
opacity:1;
top:100%;
margin-top: 0;
-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
}
.main-menu .navigation li > ul > li.dropdown:hover > ul{
visibility:visible;
opacity:1;
top:0px;
margin-top: 20px;
-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
}
.main-menu .navigation li.dropdown .dropdown-btn{
position:absolute;
right:10px;
top:8px;
width:34px;
height:30px;
border:1px solid #ffffff;
text-align:center;
font-size:16px;
line-height:26px;
color:#ffffff;
cursor:pointer;
z-index:5;
display:none;
}
.main-header .outer-box{
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-left: 40px;
}
.main-header .outer-box .theme-btn{
display: block;
min-width: 160px;
}
/***
====================================================================
Sticky Header
====================================================================
***/
.sticky-header {
position: fixed;
visibility: hidden;
opacity: 0;
left: 0px;
top: 0px;
width: 100%;
padding: 0px 0px;
z-index: 99999;
background: #ffffff;
box-shadow: 0 0 20px rgba(0,0,0,.05);
}
.fixed-header .sticky-header{
opacity:1;
z-index: 9999;
visibility:visible;
}
.header-style-two .sticky-header .logo,
.sticky-header .logo{
padding: 10px 0;
}
.sticky-header .logo img{
height: 40px;
}
.sticky-header .nav-outer{
background: none;
}
.sticky-header .inner-container{
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.sticky-header .main-menu .navigation > li{
margin: 0;
margin-left: 35px;
padding: 20px 0;
}
.sticky-header .main-menu .navigation > li > a{
color: #1b212f;
}
/***
====================================================================
Mobile Menu
====================================================================
***/
.mobile-nav-toggler{
position: relative;
font-size: 24px;
line-height: 50px;
cursor: pointer;
color: #ffffff;
order: 3;
margin-right: 15px;
display: none;
}
.mobile-menu{
position: fixed;
right: 0;
left: 0;
top: 0;
max-width:100%;
height: 100%;
margin: 0 auto;
overflow-y: auto;
opacity: 0;
visibility: hidden;
z-index: 999999;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.mobile-menu .nav-logo{
position:relative;
padding:20px 20px;
text-align:left;
}
.mobile-menu .nav-logo img{
max-width:200px;
height: 40px;
}
.mobile-menu-visible{
overflow: hidden;
}
.mobile-menu-visible .mobile-menu{
opacity: 1;
visibility: visible;
}
.mobile-menu .menu-box{
position: relative;
left: 0px;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow-y: auto;
background: #ffffff;
padding: 0px 0px;
z-index: 5;
opacity: 0;
visibility: hidden;
transform: translateX(-100%);
transition: all 300ms ease;
}
.mobile-menu-visible .mobile-menu .menu-box{
opacity: 1;
visibility: visible;
transform: translateX(0%);
}
.mobile-menu .close-btn{
position: absolute;
right: 20px;
top: 25px;
line-height: 30px;
width: 30px;
text-align: center;
font-size: 12px;
color: #ffffff;
background-color: var(--two-color);
cursor: pointer;
z-index: 10;
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
}
.mobile-menu-visible .mobile-menu .close-btn{
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.mobile-menu .close-btn:hover{
opacity: 0.50;
}
.mobile-menu .navigation{
position: relative;
display: block;
padding: 0 20px;
}
.mobile-menu .navigation > li{
position: relative;
display: block;
margin-bottom: 10px;
}
.mobile-menu .navigation > li > a{
font-weight: 500;
box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
.mobile-menu .navigation li > a{
position: relative;
display: block;
line-height: 20px;
padding: 10px 20px;
font-size: 16px;
color: #404040;
text-transform: capitalize;
}
.mobile-menu .navigation li:hover > a,
.mobile-menu .navigation li.current > a{
color:var(--two-color);
}
.mobile-menu .navigation li.dropdown .dropdown-btn{
position:absolute;
right:0px;
top:0px;
width:40px;
height:40px;
text-align:center;
font-size:12px;
line-height:40px;
border-left: 1px solid #fafafa;
color:#222222;
cursor:pointer;
z-index:5;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.mobile-menu .navigation li.dropdown .dropdown-btn.active .fa:before{
display: inline-block;
position: relative;
content: "\f068";
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.mobile-menu .navigation li > ul,
.mobile-menu .navigation li > ul > li > ul{
display: none;
}
/***
====================================================================
Header Style Two
====================================================================
***/
.header-style-two{
top:auto;
position:relative;
}
.header-style-two .main-menu .navigation > li > a{
color: #303030;
font-weight: 500;
}
.header-style-two .main-menu .navigation > li > a:before{
bottom: -4px;
}
.header-style-two .main-menu .navigation > li > a:hover:before,
.header-style-two .main-menu .navigation > li.current > a:before{
width: 25px;
}
.header-style-two .menu-outer{
position: relative;
background: #ffffff;
}
.header-style-two .outer-box .theme-btn{
min-width: 160px;
}
.header-style-two .logo{
padding: 30px 0;
}
/***
====================================================================
Header Style Three
====================================================================
***/
.header-style-three{
top: 0;
}
.header-style-three .menu-outer{
position: relative;
padding: 30px 0;
background: rgba(27,33,47,.60);
}
.header-style-three .theme-btn{
min-width: 160px;
}
/***
====================================================================
Header Style four
====================================================================
***/
.header-style-four{
top: 0;
background: #1b212f;
}
.header-style-four .menu-outer{
position: relative;
padding: 40px 0;
background: rgba(27,33,47,.60);
}
.header-style-four .theme-btn{
min-width: 160px;
}
/***
====================================================================
Section Title
====================================================================
***/
.sec-title{
position:relative;
margin-bottom:50px;
}
.sec-title .sub-title{
display: block;
font-size: 24px;
line-height: 1.2em;
color: #1b212f;
letter-spacing: .160em;
margin-bottom: 15px;
}
.sec-title .sub-title-two{
display: block;
font-size: 24px;
line-height: 1.2em;
color: var(--main-color);
text-transform: uppercase;
letter-spacing: .160em;
font-weight: 300;
margin-bottom: 15px;
}
.sec-title .sub-title-three{
display: block;
font-size: 36px;
line-height: 1.2em;
color: var(--main-color);
letter-spacing: .080em;
font-family: 'Dancing Script', cursive;
font-weight: 700;
margin-bottom: 12px;
}
.sec-title .sub-title-two{
display: block;
font-size: 24px;
line-height: 1.2em;
color: var(--main-color);
text-transform: uppercase;
letter-spacing: .160em;
font-weight: 300;
margin-bottom: 15px;
}
.sec-title .float-text {
display: block;
margin-bottom: -40px;
white-space: nowrap;
font-size: 150px;
line-height: 90px;
color: #484848;
font-weight: 900;
opacity: .05;
text-transform: uppercase;
font-family: 'Playfair Display', sans-serif;
}
.sec-title h2{
position: relative;
display: block;
font-size: 48px;
line-height: 62px;
color: #1b212f;
font-weight: 700;
transition: all 100ms linear;
}
.sec-title p,
.sec-title .text{
position: relative;
font-size: 18px;
line-height: 28px;
color: #707070;
font-weight: 400;
margin-top: 20px;
}
.sec-title.light .sub-title,
.sec-title.light .text,
.sec-title.light h2{
color: #ffffff;
}
/***
====================================================================
Page Title
====================================================================
***/
.page-title{
position: relative;
padding: 320px 0px 190px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
}
.page-title:before{
position:absolute;
content: '';
left: 0px;
top: 0px;
width: 100%;
height: 100%;
display: block;
background: #1b212f;
opacity: .70;
}
.page-title .auto-container{
position:relative;
}
.page-title h2{
position:relative;
color:#ffffff;
font-size:36px;
line-height:1.2em;
font-weight: 700;
margin-bottom: 17px;
}
.page-breadcrumb{
position:relative;
margin-top:5px;
}
.page-breadcrumb li{
position:relative;
display:inline-block;
margin-right:5px;
padding-right:10px;
color:#ffffff;
font-size:18px;
font-weight:400;
text-transform:capitalize;
}
.page-breadcrumb li:after{
position:absolute;
content: "-";
right:-1px;
top:1px;
color:#ffffff;
font-size:14px;
font-weight: 900;
}
.page-breadcrumb li:last-child::after{
display: none;
}
.page-breadcrumb li:last-child{
padding-right:0px;
margin-right:0px;
}
.page-breadcrumb li a{
color:#ffffff;
font-weight:500;
text-transform: capitalize;
transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
}
.page-breadcrumb li a:hover{
color:var(--two-color);
}
.play-now {
position: relative;
display: block;
z-index: 9;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.play-now .icon{
position: relative;
display: inline-block;
height: 110px;
width: 110px;
text-align: center;
line-height: 110px;
background-color: #ffffff;
color: var(--main-color);
z-index: 1;
padding-left: 5px;
font-size: 20px;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
-moz-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
-ms-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
-o-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
-webkit-transform-origin:center;
transform-origin:center;
}
.play-now .ripple,
.play-now .ripple:before,
.play-now .ripple:after {
position: absolute;
top: 50%;
left: 50%;
height: 70px;
width: 70px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
-ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
-o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
-webkit-animation: ripple 3s infinite;
-moz-animation: ripple 3s infinite;
-ms-animation: ripple 3s infinite;
-o-animation: ripple 3s infinite;
animation: ripple 3s infinite;
}
.play-now .ripple:before {
-webkit-animation-delay: .9s;
-moz-animation-delay: .9s;
-ms-animation-delay: .9s;
-o-animation-delay: .9s;
animation-delay: .9s;
content: "";
position: absolute;
}
.play-now .ripple:after {
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-ms-animation-delay: .6s;
-o-animation-delay: .6s;
animation-delay: .6s;
content: "";
position: absolute;
}
@-webkit-keyframes ripple {
70% {box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);}
100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}
@keyframes ripple {
70% {box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);}
100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}
/***
====================================================================
Banner Section
====================================================================
***/
.banner-section{
position: relative;
padding: 270px 0 0;
background-color: var(--two-color);
}
.banner-section:before{
position: absolute;
right: 84px;
top: 27%;
height: 370px;
width: 260px;
background-image: url(../images/icons/pattern-1.png);
content: "";
}
.banner-section:after{
position: absolute;
left: 0;
bottom: 0;
height: 310px;
width: 100%;
background: #ffffff;
content: "";
}
.banner-section h1{
font-size: 110px;
line-height: 140px;
color: #ffffff;
font-weight: 900;
margin-bottom: 50px;
}
.banner-section h2 u{
position: relative;
text-decoration: none;
}
.banner-section h2 u:before{
position: absolute;
left: 0;
bottom: 5%;
width: 100%;
border-bottom: 2px solid #ffffff;
content: "";
}
.banner-section .about-hotel{
position: relative;
display: flex;
align-items: flex-start;
margin-bottom: 60px;
}
.banner-section .experience{
font-size: 30px;
line-height: 1.2em;
color: #ffffff;
font-weight: 600;
min-width: 380px;
margin-bottom: 30px;
}
.banner-section .experience span{
position: relative;
display: inline-block;
font-weight: 600;
border-bottom: 1px solid #ffffff;
}
.banner-section .text{
font-size: 20px;
line-height: 32px;
color: #ffffff;
font-weight: 400;
margin-bottom: 30px;
}
.banner-section .main-image{
position: relative;
margin-left: -180px;
margin-right: -375px;
z-index: 7;
}
.banner-section .main-image img{
display: block;
width: 100%;
}
.room-search-form{
position: relative;
background: #FFFFFF;
padding: 55px 0 40px;
margin-top: -207px;
z-index: 9;
}
.room-search-form:before{
position: absolute;
right: 0;
top: 0;
left: -180px;
height: 100%;
background: #ffffff;
content: "";
border: 1px solid #e1e1e1;
}
.room-search-form .form-group {
position: relative;
margin-bottom: 20px;
}
.room-search-form .form-group label{
font-size: 18px;
line-height: 1.2em;
color: #1b212f;
font-weight: 600;
min-height: 22px;
letter-spacing: .120em;
text-transform: uppercase;
margin-bottom: 18px;
}
.room-search-form .ui-selectmenu-button.ui-button,
.room-search-form .form-group input,
.room-search-form .form-group select,
.room-search-form .form-group textarea {
position: relative;
display: block;
width: 100%;
height: 50px;
font-size: 16px;
line-height: 26px;
font-weight: 400;
color: #303030;
background: #ffffff;
padding: 10px 20px;
border: 2px solid #d1d3d5;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.room-search-form .form-group .theme-btn{
margin-top: 42px;
}
.ui-button .ui-icon{
background:none !important;
position:relative;
top:3px;
text-indent:0px;
color:#43c3ea;
}
.ui-button .ui-icon:before{
font-family: 'Font Awesome 5 Free';
content: "\f107";
font-weight: 900;
position:absolute;
right:0px;
top:0px;
width:10px;
height:20px;
display:block;
color:var(--two-color);
line-height:20px;
font-size:14px;
text-align:center;
z-index:5;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active, .ui-button:active,
.ui-button.ui-state-active:hover{
background-color: var(--two-color);
border-color:var(--two-color);
}
.ui-menu-item-wrapper{
padding: 4px 10px;
}
/***
====================================================================
Banner Section Two
====================================================================
***/
.banner-section-two{
position: relative;
padding: 350px 0 0;
}
.banner-section-two .bg-image{
position: absolute;
left: 0;
top: 0;
bottom: 105px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.banner-section-two .bg-image:before{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #000000;
content: "";
opacity: .60;
}
.banner-section-two h2{
font-size: 72px;
line-height: 90px;
color: #ffffff;
font-weight: 600;
margin-bottom: 30px;
}
.banner-section-two .text{
position: relative;
font-size: 20px;
line-height: 36px;
color: #ffffff;
font-weight: 400;
margin-bottom: 50px;
}
.banner-section-two .room-search-form{
position: relative;
background: #FFFFFF;
margin-left: -20px;
margin-right: -20px;
padding: 55px 60px 40px;
margin-top: 180px;
box-shadow: 0 25px 60px rgba(178,178,178,.10);
}
.banner-section-two .room-search-form label{
font-family: 'Playfair Display', sans-serif;
font-weight: 700;
}
.banner-section-two .room-search-form:before{
display: none;
}
.banner-section-two .room-search-form .row{
margin: 0 -30px;
}
.banner-section-two .room-search-form .form-group{
padding: 0 30px;
}
.room-search-form .form-group.width-20{width: 20%;}
.room-search-form .form-group.width-18{width: 18%;}
.room-search-form .form-group.width-22{width: 22%;}
/***
====================================================================
Banner Section Three
====================================================================
***/
.banner-section-three{
position: relative;
}
.banner-section-three .slide-item{
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 440px 0 280px;
min-height: 1080px;
}
.banner-section-three .slide-item:before{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #1b212f;
opacity: .70;
content: "";
}
.banner-section-three h2{
font-size: 72px;
line-height: 90px;
color: #ffffff;
font-weight: 600;
margin-bottom: 30px;
opacity: 0;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.banner-section-three h2 u{
position: relative;
text-decoration: none;
}
.banner-section-three h2 u:before{
position: absolute;
left: 0;
bottom: 5%;
width: 100%;
border-bottom: 2px solid #ffffff;
content: "";
}
.banner-section-three .active h2{
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 250ms;
-moz-transition-delay: 250ms;
-ms-transition-delay: 250ms;
-o-transition-delay: 250ms;
transition-delay: 250ms;
}
.banner-section-three .text{
position: relative;
font-size: 20px;
line-height: 32px;
color: #ffffff;
font-weight: 400;
margin-bottom: 35px;
opacity: 0;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.banner-section-three .active .text{
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 250ms;
-moz-transition-delay: 250ms;
-ms-transition-delay: 250ms;
-o-transition-delay: 250ms;
transition-delay: 500ms;
}
.banner-section-three .content-box .theme-btn{
opacity: 0;
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
transform: translateY(50px);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.banner-section-three .active .content-box .theme-btn{
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 750ms;
-moz-transition-delay: 750ms;
-ms-transition-delay: 750ms;
-o-transition-delay: 750ms;
transition-delay: 750ms;
}
.banner-section-three .owl-dots{
position: absolute;
left: 0;
bottom: 40px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.banner-section-three .owl-dot{
position: relative;
display: block;
height: 14px;
width: 14px;
margin: 0 5px;
border: 2px solid #ffffff;
border-radius: 10px;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.banner-section-three .owl-dot.active{
background: var(--main-color);
border-color: var(--main-color);
}
.banner-section-three .room-search-outer{
position: absolute;
left: 0;
right: 0;
bottom: 150px;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
.room-search-form-two{
position: relative;
background: #FFFFFF;
max-width: 400px;
width: 100%;
border-radius: 8px;
padding: 45px 50px 50px;
z-index: 1;
}
.room-search-form-two .form-group {
position: relative;
margin-bottom: 22px;
}
.room-search-form-two .form-group:last-child{
margin-bottom: 0;
}
.room-search-form-two .form-group label{
font-size: 18px;
line-height: 1.2em;
color: #1b212f;
font-weight: 600;
min-height: 22px;
letter-spacing: .20em;
text-transform: uppercase;
margin-bottom: 16px;
}
.room-search-form-two .ui-selectmenu-button.ui-button,
.room-search-form-two .form-group input,
.room-search-form-two .form-group select,
.room-search-form-two .form-group textarea {
position: relative;
display: block;
width: 100%;
height: 50px;
font-size: 16px;
line-height: 26px;
font-weight: 400;
color: #505050;
background: #ffffff;
padding: 10px 20px;
border: 2px solid #d1d3d5;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.room-search-form-two .form-group .theme-btn{
display: block;
width: 100%;
margin-top: 30px;
}
.banner-section-three .owl-nav{
display: none;
}
/***
====================================================================
Banner Section Four
====================================================================
***/
.banner-section-four{
position: relative;
padding: 200px 0 0;
background-color: #1b212f;
}
.banner-section-four:before{
position: absolute;
left: 0;
bottom: 0;
height: 150px;
width: 100%;
background: #ffffff;
content: "";
}
.banner-section-four h1{
font-size: 72px;
line-height: 90px;
color: #ffffff;
font-weight: 700;
padding-right: 30px;
min-width: 62%;
margin-bottom: 50px;
}
.banner-section-four h1 u{
position: relative;
text-decoration: none;
}
.banner-section-four h1 u:before{
position: absolute;
left: 0;
bottom: 5%;
width: 100%;
border-bottom: 2px solid #ffffff;
content: "";
}
.banner-section-four .about-hotel{
position: relative;
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.banner-section-four .text{
position: relative;
font-size: 20px;
line-height: 32px;
color: #ffffff;
font-weight: 400;
margin-bottom: 30px;
padding-top: 35px;
margin-top: 20px;
}
.banner-section-four .text:before{
position: absolute;
left: 0;
top: 0;
height: 2px;
width: 102px;
background: var(--main-color);
border-radius: 5px;
content: "";
}
.room-search-form-three{
position: relative;
background: #FFFFFF;
padding: 35px 55px 20px;
margin-bottom: -90px;
z-index: 9;
}
.room-search-form-three .form-group {
position: relative;
padding: 0 20px;
margin-bottom: 20px;
}
.room-search-form-three .form-group label{
font-size: 18px;
line-height: 1.2em;
color: #1b212f;
font-weight: 700;
min-height: 22px;
letter-spacing: .120em;
text-transform: uppercase;
font-family: 'Playfair Display', sans-serif;
margin-bottom: 18px;
}
.room-search-form-three .ui-selectmenu-button.ui-button,
.room-search-form-three .form-group input,
.room-search-form-three .form-group select,
.room-search-form-three .form-group textarea {
position: relative;
display: block;
width: 100%;
height: 60px;
font-size: 16px;
line-height: 26px;
font-weight: 400;
color: #303030;
background: #ffffff;
padding: 15px 25px;
border: 2px solid #cccccc;
border-radius: 4px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.room-search-form-three .form-group .theme-btn{
margin-top: 42px;
padding: 15px 20px;
border-radius: 4px;
}
.room-search-form-three .form-group.width-20{width: 20%;}
.room-search-form-three .form-group.width-15{width: 15%;}
.room-search-form-three .form-group.width-25{width: 25%;}
.banner-section-four .carousel-outer{
position: relative;
margin-left: -270px;
margin-right: -170px;
}
.banner-section-four .slide-item .image{
position: relative;
margin-bottom: 0;
}
.banner-section-four .owl-nav{
position: absolute;
right: -50px;
bottom: 0;
display: flex;
align-items: center;
}
.banner-section-four .owl-next,
.banner-section-four .owl-prev{
height: 50px;
width: 50px;
display: block;
background: var(--main-color);
color: #ffffff;
font-size: 24px;
line-height: 50px;
text-align: center;
transition: all 300ms ease;
}
.banner-section-four .owl-next:hover,
.banner-section-four .owl-prev:hover{
background: #ffffff;
color: var(--main-color);
box-shadow: 0 0 10px rgba(0,0,0,0.10);
}
/***
====================================================================
About Section
====================================================================
***/
.about-section{
position: relative;
padding: 120px 0 0;
}
.about-section:before{
position: absolute;
right: 10px;
bottom: 160px;
background-image: url(../images/icons/pattern-3.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 268px;
height: 293px;
content: "";
}
.about-section .content-column{
position: relative;
margin-bottom: 40px;
}
.about-section .content-column .inner-column{
position: relative;
padding: 120px 0 0 50px;
}
.about-section .content-column .theme-btn{
margin-top: 55px;
padding: 10px 35px;
}
.about-section .images-column{
position: relative;
}
.about-section .images-column .image{
position: relative;
margin-left: -70px;
padding-right: 40px;
margin-bottom: 0;
}
.about-section .images-column .image img{
position: relative;
z-index: 1;
width: 100%;
}
.about-section .images-column .image:before{
position: absolute;
left: -95px;
bottom: -100px;
background-image: url(../images/icons/pattern-2.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 322px;
width: 277px;
content: "";
opacity: .40;
}
/***
====================================================================
About Section Two
====================================================================
***/
.about-section-two{
position: relative;
padding: 120px 0 110px;
}
.about-section-two .content-column{
position: relative;
margin-bottom: 40px;
}
.about-section-two .content-column .inner-column{
position: relative;
margin-left: -28px;
}
.about-section-two .content-column .sec-title h2{
line-height: 62px;
}
.about-section-two .content-column .float-text{
margin-left: -90px;
margin-bottom: -50px;
}
.about-section-two .content-column .theme-btn{
margin-top: 35px;
padding: 10px 35px;
}
.about-section-two .content-column .image{
position: relative;
margin-left: -216px;
margin-bottom: 0;
z-index: 2;
}
.about-section-two .images-column{
position: relative;
}
.about-section-two .images-column .image-2{
position: relative;
margin-left: -20px;
padding-right: 90px;
margin-bottom: 60px;
}
.about-section-two .images-column .image-2 img{
width: 100%;
}
.about-section-two .images-column .image-3{
position: relative;
margin-right: -60px;
padding-left: 150px;
width: auto;
z-index: 9;
margin-bottom: 0;
}
.about-section-two .images-column:before{
position: absolute;
left: 20px;
bottom: 2px;
background-image: url(../images/icons/pattern-4.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 564px;
width: 564px;
content: "";
}
/***
====================================================================
About Section Three
====================================================================
***/
.about-section-three{
position: relative;
}
.about-section-three .outer-box{
position: relative;
max-width: 1620px;
padding: 100px 0 110px;
margin: 0 auto;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
text-align: center;
}
.about-section-three .outer-box:before{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #1b212f;
opacity: .7;
content: '';
}
.about-section-three .sec-title{
margin-bottom: 30px;
}
.about-section-three .fact-counter{
position: relative;
max-width: 750px;
margin: 0 auto;
}
.about-section-three .counter-column{
position:relative;
margin-bottom:50px;
}
.about-section-three .count-box{
position: relative;
font-size:36px;
color:var(--main-color);
line-height: 1em;
font-weight:700;
}
.about-section-three .count-box .count-text{
position:relative;
display: inline-block;
font-size:36px;
color:var(--main-color);
line-height: 1em;
font-weight:700;
margin-bottom: 20px;
}
.about-section-three .counter-title{
position: relative;
display: block;
font-size:18px;
line-height:24px;
font-weight:700;
color:#ffffff;
}
.about-section-three .btn-box{
position: relative;
margin-top: 20px;
}
.about-section-three .theme-btn{
min-width: 150px;
}
/***
====================================================================
Experience Section
====================================================================
***/
.about-section-four{
position: relative;
padding: 170px 0 110px;
}
.about-section-four .content-column{
position: relative;
margin-bottom: 40px;
}
.about-section-four .content-column .inner-column{
position: relative;
padding: 70px 80px 30px;
margin-left: -80px;
margin-right: -70px;
}
.about-section-four .content-column .inner-column:before{
position: absolute;
left: 0;
right: -74%;
top: 0;
height: 100%;
background: #f3f4f4;
content: "";
}
.about-section-four .sec-title{
margin-bottom: 0;
}
.about-section-four h3{
font-size: 48px;
line-height: 62px;
color: #000000;
font-weight: 700;
margin-bottom: 20px;
}
.about-section-four .text{
font-size: 18px;
line-height: 28px;
margin-bottom: 35px;
}
.about-section-four .theme-btn{
margin-bottom: 50px;
min-width: 150px;
padding: 10px 25px;
}
.about-section-four .image-column{
position: relative;
}
.about-section-four .image-column .inner-column{
position: relative;
text-align: right;
margin-top: -50px;
margin-right: -120px;
padding-bottom: 100px;
}
.about-section-four .image-column .image-1{
position: relative;
margin-bottom: 0;
}
.about-section-four .image-column .image-2{
position: absolute;
left: 15px;
bottom: 0;
margin-bottom: 0;
}
.about-section-four .fact-counter{
position: relative;
}
.about-section-four .counter-column{
position:relative;
margin-bottom:50px;
}
.about-section-four .count-box{
position: relative;
font-size:36px;
color:var(--main-color);
line-height: 1em;
font-weight:700;
}
.about-section-four .count-box .count-text{
position:relative;
display: inline-block;
font-size:36px;
color:var(--main-color);
line-height: 1em;
font-weight:700;
margin-bottom: 20px;
}
.about-section-four .counter-title{
position: relative;
display: block;
font-size:18px;
line-height:24px;
font-weight:700;
color:#303030;
}
/***
====================================================================
Rooms Section
====================================================================
***/
.rooms-section{
position: relative;
padding: 120px 0 90px;
}
.rooms-section .auto-container{
max-width: 1310px;
}
.room-block{
position: relative;
margin-bottom: 30px;
}
.room-block .inner-box{
position: relative;
border-radius: 5px;
overflow: hidden;
}
.room-block .image{
position: relative;
margin-bottom: 0;
}
.room-block .image img{
display: block;
width: 100%;
}
.room-block .overlay-cotnent{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 30px 30px;
overflow: hidden;
transition: all 300ms ease;
}
.room-block .rating{
position: relative;
display: flex;
font-size: 21px;
color: #f7bd01;
margin-bottom: 15px;
}
.room-block .rating i{
margin-right: 8px;
}
.room-block h5{
font-size: 24px;
line-height: 36px;
color: #ffffff;
font-weight: 600;
margin-bottom: 7px;
}
.room-block h5 a{
color: #ffffff;
}
.room-block h5 a:hover{
text-decoration: underline;
}
.room-block .price{
position: relative;
display: block;
font-size: 18px;
line-height: 26px;
color: #ffffff;
font-weight: 400;
text-decoration: underline;
margin-bottom: 10px;
}
.room-block .text{
position: absolute;
width: 100%;
bottom: -50px;
left: 0;
padding: 0 30px 30px;
font-size: 18px;
line-height: 28px;
color: #ffffff;
font-weight: 400;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: all 300ms ease;
}
.room-block .inner-box.active .text{
opacity: 1;
bottom: 0px;
visibility: visible;
transition-delay: 100ms;
}
.rooms-section .btn-box{
position: relative;
text-align: center;
margin: 30px 0;
}
.rooms-section .btn-box .theme-btn{
min-width: 150px;
}
/***
====================================================================
Rooms Section Two
====================================================================
***/
.rooms-section-two{
position: relative;
padding: 80px 0 100px;
background-color: #fff8f4;
background-image: url(../images/icons/pattern-6.jpg);
background-repeat: no-repeat;
background-position: center;
}
.rooms-section-two:before{
position: absolute;
right: 23%;
bottom: 120px;
height: 313px;
width: 313px;
border-radius: 50%;
background-image: url(../images/icons/pattern-5.png);
background-position: top left;
background-repeat: repeat;
content: "";
}
.rooms-section-two .auto-container{
max-width: 1700px;
}
.rooms-section-two .rooms-carousel{
padding-bottom: 20px;
}
.rooms-carousel .room-block-two{
padding: 20px;
}
.room-block-two{
position: relative;
margin-bottom: 30px;
}
.room-block-two .inner-box{
position: relative;
padding-right: 140px;
padding-bottom: 30px;
}
.room-block-two .image{
position: relative;
margin-bottom: 0;
}
.room-block-two .image img{
display: block;
width: 100%;
min-height: 400px;
object-fit: cover;
}
.room-block-two .overlay-cotnent{
position: absolute;
right: 0;
bottom: 0;
width: 100%;
max-width: 290px;
background: #ffffff;
padding: 25px 25px;
overflow: hidden;
box-shadow: 0 0 15px rgba(0,0,0,.10);
transition: all 300ms ease;
}
.room-block-two .inner-box:hover .overlay-cotnent{
background: #1b212f;
}
.room-block-two .rating{
position: relative;
display: flex;
font-size: 21px;
color: #f7bd01;
margin-bottom: 15px;
}
.room-block-two .rating i{
margin-right: 8px;
}
.room-block-two h5{
font-size: 24px;
line-height: 36px;
color: #000000;
font-weight: 700;
margin-bottom: 7px;
}
.room-block-two h5 a{
color: #000000;
transition: all 300ms ease;
}
.room-block-two .price{
position: relative;
display: block;
font-size: 18px;
line-height: 26px;
color: #505050;
font-weight: 600;
margin-bottom: 10px;
transition: all 300ms ease;
}
.room-block-two .text{
position: relative;
font-size: 16px;
line-height: 24px;
color: #505050;
font-weight: 400;
overflow: hidden;
margin-bottom: 15px;
transition: all 300ms ease;
}
.room-block-two .link{
position: relative;
display: inline-block;
font-size: 18px;
color: var(--main-color);
font-weight: 700;
}
.room-block-two .inner-box:hover .text,
.room-block-two .inner-box:hover .price,
.room-block-two .inner-box:hover h5 a{
color: #ffffff;
}
/***
====================================================================
Rooms Section Three
====================================================================
***/
.rooms-section-three{
position: relative;
padding: 120px 0 90px;
}
.rooms-section-three .auto-container{
max-width: 1290px;
}
/*=== Mixitup Gallery ===*/
.sortable-masonry .filters{
text-align: center;
margin-bottom:60px;
}
.sortable-masonry .filters .filter-tabs{
position:relative;
}
.sortable-masonry .filter-tabs{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.sortable-masonry .filters li{
position: relative;
font-size: 16px;
color: #1b212f;
line-height: 28px;
font-weight: 700;
padding: 10px 30px;
cursor: pointer;
border: 1px solid #d1d3d5;
margin: 0 15px;
text-transform: uppercase;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.sortable-masonry .filters .filter:hover,
.sortable-masonry .filters .filter.active{
color: #ffffff;
background-color: var(--two-color);
border-color: var(--two-color);
}
.room-block-three{
position: relative;
margin-bottom: 30px;
}
.room-block-three.mix{
display: none;
}
.room-block-three .inner-box{
position: relative;
border-radius: 5px;
overflow: hidden;
background: #1b212f;
}
.room-block-three .image{
position: relative;
margin-bottom: 0;
transition: all 300ms ease;
}
.room-block-three .inner-box:hover .image{
opacity: .5;
}
.room-block-three .image img{
display: block;
width: 100%;
}
.room-block-three .price{
position: absolute;
right: 0;
top: 50px;
font-size: 16px;
line-height: 30px;
color: var(--main-color);
font-weight: 700;
padding: 10px 25px;
border-radius: 5px 0 0 5px;
background: #ffffff;
z-index: 9;
transition: all 300ms ease;
}
.room-block-three .inner-box:hover .price{
background: var(--main-color);
color: #ffffff;
}
.room-block-three .overlay-cotnent{
position: absolute;
left: 0;
bottom: 20px;
width: 100%;
padding: 30px 30px 25px;
overflow: hidden;
transition: all 300ms ease;
opacity: 0;
visibility: hidden;
transform: scaleY(1.1);
transform-origin: bottom;
}
.room-block-three .inner-box:hover .overlay-cotnent{
bottom: 0;
opacity: 1;
visibility: visible;
transform: scaleY(1);
}
.room-block-three .rating{
position: relative;
display: flex;
font-size: 21px;
color: #f7bd01;
margin-bottom: 10px;
}
.room-block-three .rating i{
margin-right: 8px;
}
.room-block-three h5{
font-size: 24px;
line-height: 36px;
color: #ffffff;
font-weight: 600;
margin-bottom: 30px;
}
.room-block-three h5 a{
color: #ffffff;
}
.room-block-three .theme-btn{
min-width: 140px;
}
/* Room Block Four */
.room-block-four{
position: relative;
margin-bottom: 40px;
}
.room-block-four .inner-box{
position: relative;
display: flex;
overflow: hidden;
background: #ffffff;
box-shadow: 0 25px 60px rgba(28,115,234,.10);
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.room-block-four .image-box{
position: relative;
margin-bottom: 0;
transition: all 300ms ease;
}
.room-block-four .image-box img{
display: block;
min-width: 400px;
height: 100%;
object-fit: cover;
transition: all 300ms ease;
}
.room-block-four .image-box:before{
content:'';
position:absolute;
top:0px;
left:0px;
width:100%;
height:0;
background-color:rgba(var(--two-color-rgb), 0.5);
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.room-block-four .inner-box:hover .image-box:before{
height:100%;
}
.room-block-four .cotnent-box{
position: relative;
padding: 40px 40px;
padding-left: 84px;
}
.room-block-four .cotnent-box .upper-box{
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 20px;
padding-right: 20px;
}
.room-block-four .rating{
position: relative;
display: flex;
font-size: 21px;
line-height: 30px;
color: #f7bd01;
margin-right: 30px;
}
.room-block-four .rating i{
margin-right: 8px;
}
.room-block-four .rating span{
font-size: 20px;
line-height: 30px;
color: #505050;
font-weight: 700;
}
.room-block-four .price{
font-size: 18px;
line-height: 30px;
color: #1b212f;
font-weight: 700;
text-transform: uppercase;
}
.room-block-four h5{
font-size: 24px;
line-height: 36px;
color: #1b212f;
font-weight: 700;
margin-bottom: 20px;
}
.room-block-four h5 a{
color: #1b212f;
}
.room-block-four .text{
font-size: 18px;
line-height: 28px;
color: #505050;
margin-bottom: 30px;
}
.room-block-four .theme-btn{
min-width: 150px;
}
.rooms-section.list-view .auto-container{
max-width: 1200px;
}
.rooms-section.list-view .btn-box{
margin-top: 60px;
}
/***
====================================================================
Rooms Section Four
====================================================================
***/
.rooms-section-four{
position: relative;
padding: 0px 0 120px;
}
.rooms-section-four .auto-container{
max-width: 1290px;
}
.room-tabs{
position: relative;
}
.room-tabs .room-tab-btns{
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
}
.room-tabs .tab-btn{
position: relative;
font-size: 16px;
color: #1b212f;
line-height: 28px;
font-weight: 700;
padding: 10px 30px;
cursor: pointer;
border: 1px solid #d1d3d5;
margin: 0 15px;
text-transform: uppercase;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.room-tabs .tab-btn:hover,
.room-tabs .tab-btn.active-btn{
color: #ffffff;
background-color: var(--two-color);
border-color: var(--two-color);
}
.room-tabs .tabs-content{
position:relative;
display:block;
}
.room-tabs .room-tab{
position:absolute;
left:0px;
top:0px;
width:100%;
height:auto;
visibility:hidden;
}
.room-tabs .room-tab.active-tab{
position:relative;
visibility:visible;
z-index:5;
}
.room-tab .room-block-three{
transform: scaleX(0);
transition:all 500ms ease;
opacity: 0;
}
.room-tab.active-tab .room-block-three{
opacity: 1;
border-radius: 0;
transform: scaleX(1);
}
.rooms-carousel-two{
padding-bottom: 40px;
}
.rooms-carousel-two .room-block-three .overlay-cotnent{
opacity: 1;
visibility: visible;
transform: none;
bottom: 0;
padding-bottom: 10px;
}
.rooms-carousel-two .room-block-three .inner-box:hover .overlay-cotnent{
padding-bottom: 100px;
}
.rooms-carousel-two .room-block-three .theme-btn {
min-width: 140px;
position: absolute;
bottom: 50px;
opacity: 0;
visibility: hidden;
}
.rooms-carousel-two .room-block-three .inner-box:hover .theme-btn{
opacity: 1;
visibility: visible;
transition-delay: 200ms;
}
/***
====================================================================
Rooms Detail Section
====================================================================
***/
.room-detail-section{
position: relative;
padding: 120px 0 110px;
}
.room-detail-section .btn-box .theme-btn{
min-width: 160px;
}
.room-gallery{
position: relative;
margin-bottom: 60px;
}
.room-gallery .image-carousel .image{
position: relative;
margin-bottom: 0;
}
.room-gallery .thumbs-carousel .thumb{
position: relative;
margin-top: 20px;
border-radius: 5px;
overflow: hidden;
margin-bottom: 0;
}
.room-gallery .thumbs-carousel .thumb:before{
position: absolute;
left: 0;
top: 0;
height:100%;
width: 100%;
border: 5px solid #1b212f;
content: "";
opacity: 0;
visibility: hidden;
transition: all 300ms ease;
}
.room-gallery .thumbs-carousel .swiper-slide-thumb-active .thumb:before{
opacity: 1;
visibility: visible;
}
.room-detail-tabs{
position: relative;
}
.room-detail-tabs .tab-btns{
position: relative;
display: flex;
align-items: center;
}
.room-detail-tabs .tab-btn{
position: relative;
width: 100%;
text-align: center;
font-size: 16px;
line-height: 30px;
color: #1b212f;
font-weight: 700;
background: #e8e8ea;
text-transform: uppercase;
cursor: pointer;
border-radius: 5px;
margin-right: 30px;
padding: 15px 30px;
margin-bottom: 30px;
transition: all 300ms ease;
}
.room-detail-tabs .tab-btn.active-btn{
background: #0382df;
color: #ffffff;
}
.room-detail-tabs .tab-btn:last-child{
margin-right: 0;
}
.room-detail{
position: relative;
padding: 0px 40px 20px;
}
.room-detail h2{
font-size: 44px;
line-height: 1.2em;
color: #1b212f;
font-weight: 700;
margin-bottom: 35px;
}
.room-detail h4{
font-size: 24px;
line-height: 36px;
color: #1b212f;
font-weight: 700;
margin-bottom: 20px;
}
.room-detail .price{
font-family: 'Lato', sans-serif;
font-weight: 600;
text-transform: uppercase;
}
.room-detail p{
font-size: 18px;
line-height: 28px;
color: #505050;
margin-bottom: 28px;
}
.room-features{
position: relative;
}
.feature-block{
position: relative;
margin-top: 20px;
margin-bottom:20px;
}
.feature-block .inner-box{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #e8f1fd;
border-radius: 10px;
min-height: 140px;
padding: 20px;
}
.feature-block .icon{
font-size: 40px;
line-height: 50px;
color: var(--two-color);
}
.feature-block .title{
position: relative;
font-size: 14px;
color: #1b212f;
font-weight: 700;
text-transform: uppercase;
margin-top: 10px;
}
.regular-plan{
position: relative;
padding: 60px 40px;
box-shadow: 0 25px 60px rgba(28,115,234,.10);
margin-bottom: 60px;
}
.regular-plan h4{
font-size: 24px;
line-height: 36px;
color: #1b212f;
font-weight: 700;
margin-bottom: 25px;
}
.regular-plan .plan-outer{
position: relative;
display: flex;
align-items: center;
border-left: 2px solid #d1cfce;
}
.regular-plan .day{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
border: 2px solid #d1cfce;
border-left: 0;
min-height: 146px;
}
.regular-plan .name{
position: relative;
font-size: 18px;
line-height: 35px;
color: #1b212f;
width: 100%;
font-weight: 700;
padding: 19px 0;
border-bottom: 2px solid #d1cfce;
text-align: center;
}
.regular-plan .price{
position: relative;
font-size: 18px;
line-height: 36px;
color: #505050;
width: 100%;
padding: 19px 0;
text-align: center;
}
/***
====================================================================
Review Form
====================================================================
***/
.review-form{
position: relative;
}
.review-form{
position: relative;
padding: 60px 40px 60px;
box-shadow: 0 25px 60px rgba(28,115,234,.10);
margin-bottom: 60px;
}
.review-form h4{
font-size: 24px;
line-height: 36px;
color: #1b212f;
font-weight: 700;
margin-bottom: 15px;
}
.review-form p{
position: relative;
margin-bottom: 25px;
}
.review-form .form-group{
position:relative;
margin-bottom: 30px;
}
.review-form .form-group:last-child{
margin-bottom: 0;
}
.review-form .form-group input[type="text"],
.review-form .form-group input[type="email"],
.review-form .form-group textarea,
.review-form .form-group select{
position: relative;
display: block;
height: 50px;
width: 100%;
font-size: 15px;
color: #777777;
line-height: 23px;
font-weight: 400;
padding: 10px 22px;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;
}
.review-form .form-group input:focus,
.review-form .form-group select:focus,
.review-form .form-group textarea:focus{
border-color:#156f89;
}
.review-form .form-group textarea{
height: 150px;
resize: none;
}
.review-form .form-group input[type="submit"],
.review-form .form-group button{
margin-top: 20px;
min-width: 160px;
}
/***
====================================================================
Packages Section
====================================================================
***/
.packages-section{
position: relative;
padding: 120px 0 0;
}
.packages-section:before{
position: absolute;
left: 0;
top: 0;
width: 100%;
bottom: 0;
background-image: url(../images/background/1.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
content: "";
}
.packages-section .auto-container{
max-width: 1750px;
}
.packages-section .row{
margin: 0 -20px;
}
.package-block{
position: relative;
margin-bottom: 30px;
}
.package-block .inner-box{
position: relative;
border-radius: 5px;
overflow: hidden;
}
.package-block .image{
position: relative;
margin-bottom: 0;
}
.package-block .image img{
display: block;
width: 100%;
}
.package-block .overlay-cotnent{
position: absolute;
left: 25px;
right: 25px;
bottom: 20px;
padding: 30px 30px;
overflow: hidden;
background: #ffffff;
text-align: center;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
opacity: 0;
visibility: hidden;
transform: translateY(-50px);
}
.package-block .inner-box:hover .overlay-cotnent{
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.package-block .rating{
position: relative;
display: flex;
font-size: 21px;
color: #f7bd01;
margin-bottom: 15px;
justify-content: center;
}
.package-block .rating i{
margin: 0 4px;
}
.package-block h5{
font-size: 24px;
line-height: 36px;
color: #1b212f;
font-weight: 700;
margin-bottom: 12px;
}
.package-block h5 a{
color: #1b212f;
}
.package-block .price{
position: relative;
display: block;
font-size: 20px;
line-height: 26px;
color: #505050;
font-weight: 700;
margin-bottom: 30px;
}
.package-block .room-feature{
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.package-block .room-feature .icon{
height: 50px;
width: 50px;
border: 1px solid #d1d3d5;
display: flex;
align-items: center;
font-size: 20px;
color: #1b212f;
justify-content: center;
margin: 0 10px;
}
.package-block .room-feature .theme-btn{
padding: 10px 30px;
}
.packages-section .video-box-outer{
position: relative;
margin-top: 80px;
}
.packages-section .video-box-outer:before{
position: absolute;
left: 0;
bottom: 0;
height: 50%;
width: 100%;
background: #ffffff;
content: "";
}
.video-box{
position: relative;
max-width: 1520px;
margin: 0 auto;
}
.video-box .image{
position: relative;
border-radius: 8px;
overflow: hidden;
margin-bottom: 0;
}
.video-box .image img{
display: block;
width: 100%;
}
.video-box .play-now{
position: absolute;
left: 50%;
top: 50%;
margin-left: -45px;
margin-top: -45px;
}
/***
====================================================================
Packages Section Two
====================================================================
***/
.packages-section-two{
position: relative;
padding: 120px 0 0;
}
.packages-section-two .auto-container{
max-width: 1190px;
}
.package-block-two{
position: relative;
padding: 0 30px 30px;
}
.package-block-two .inner-box{
position: relative;
padding-bottom: 80px;
}
.package-block-two .image{
position: relative;
margin-bottom: 0;
}
.package-block-two .image img{
display: block;
width: 100%;
min-height: 500px;
object-fit: cover;
}
.package-block-two .overlay-cotnent{
position: absolute;
right: 50px;
bottom: 0;
max-width: 430px;
width: 100%;
padding: 30px 30px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 10px 30px rgba(0,0,0,.10);
opacity: 0;
visibility: hidden;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.packages-carousel .active .package-block-two .overlay-cotnent{
right: 0px;
opacity: 1;
visibility: visible;
transition-delay: 400ms;
}
.package-block-two h5{
font-size: 24px;
line-height: 36px;
color: #000000;
font-weight: 700;
margin-bottom: 10px;
}
.package-block-two h5 a{
color: #1b212f;
}
.package-block-two .pack-info{
position: relative;
display: flex;
align-items: center;
font-size: 18px;
line-height: 28px;
color: #303030;
font-weight: 400;
margin-bottom: 10px;
}
.package-block-two .pack-info .adult{
margin-right: 30px;
}
.package-block-two .pack-info .day{
margin-right: 40px;
}
.package-block-two .pack-info .price{
font-weight: 600;
}
.package-block-two .rating{
position: relative;
display: flex;
font-size: 18px;
color: #f7bd01;
margin-bottom: 10px;
}
.package-block-two .rating i{
margin-right: 5px;
}
.package-block-two .text{
font-size: 18px;
line-height: 28px;
color: #505050;
font-weight: 400;
margin-bottom: 18px;
}
.package-block-two .theme-btn{
min-width: 140px;
}
.packages-carousel .owl-nav{
width: auto;
left: 0;
right: 0;
margin: 0 -70px;
margin-top: -40px;
}
/***
====================================================================
Packages Section Three
====================================================================
***/
.packages-section-three{
position: relative;
padding: 120px 0 30px;
}
.packages-section-three .auto-container{
max-width: 1750px;
}
.packages-section-three .carousel-outer{
margin: 0 -20px;
}
.package-block-three{
position: relative;
padding: 0 20px;
margin-bottom: 30px;
}
.package-block-three .inner-box{
position: relative;
border-radius: 5px;
padding-bottom: 80px;
}
.package-block-three .image{
position: relative;
margin-bottom: 0;
}
.package-block-three .image img{
display: block;
width: 100%;
}
.package-block-three .overlay-cotnent{
position: absolute;
left: 25px;
right: 25px;
bottom: 0px;
padding: 30px 30px;
overflow: hidden;
background: #ffffff;
text-align: center;
border-radius: 30px 30px 0 0;
box-shadow: 0 10px 10px rgba(28,115,234,.10);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
opacity: 0;
visibility: hidden;
transform: translateY(-50px);
}
.package-block-three .inner-box:hover .overlay-cotnent{
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.package-block-three .rating{
position: relative;
display: flex;
font-size: 24px;
color: #f7bd01;
margin-bottom: 12px;
justify-content: center;
}
.package-block-three .rating i{
margin: 0 4px;
}
.package-block-three h5{
font-size: 24px;
line-height: 36px;
color: #1b212f;
font-weight: 700;
margin-bottom: 12px;
}
.package-block-three h5 a{
color: #1b212f;
}
.package-block-three .price{
position: relative;
display: block;
font-size: 20px;
line-height: 26px;
color: #505050;
font-weight: 700;
margin-bottom: 30px;
}
.package-block-three .room-feature{
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.package-block-three .room-feature .icon{
height: 50px;
width: 50px;
border: 1px solid #d1d3d5;
display: flex;
align-items: center;
font-size: 24px;
font-weight: 700;
color: #1b212f;
justify-content: center;
margin: 0 10px;
}
.package-block-three .room-feature .theme-btn{
padding: 10px 30px;
}
/***
====================================================================
Packages Section Four
====================================================================
***/
.packages-section-four{
position: relative;
padding: 120px 0 65px;
background: #f8f8f8;
}
.packages-section-four .carousel-outer{
margin-left: -105px;
}
.package-block-four{
position: relative;
padding: 0 30px 30px;
}
.package-block-four .inner-box{
position: relative;
padding-right: 220px;
padding-bottom: 55px;
}
.package-block-four .image{
position: relative;
margin-bottom: 0;
}
.package-block-four .image img{
display: block;
width: 100%;
}
.package-block-four .overlay-cotnent{
position: absolute;
right: 50px;
bottom: 0;
max-width: 450px;
width: 100%;
padding: 40px 40px 35px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 10px 30px rgba(0,0,0,.10);
opacity: 0;
visibility: hidden;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.packages-carousel .active .package-block-four .overlay-cotnent{
right: -30px;
opacity: 1;
visibility: visible;
transition-delay: 400ms;
}
.package-block-four .rating{
position: relative;
display: flex;
font-size: 24px;
color: #f7bd01;
margin-bottom: 15px;
}
.package-block-four .rating i{
margin-right: 10px;
}
.package-block-four h5{
font-size: 24px;
line-height: 36px;
color: #000000;
font-weight: 700;
margin-bottom: 13px;
}
.package-block-four h5 a{
color: #1b212f;
}
.package-block-four .price{
display: block;
font-size: 20px;
color: #303030;
font-weight: 700;
margin-bottom: 20px;
}
.package-block-four .text{
font-size: 18px;
line-height: 28px;
color: #505050;
font-weight: 400;
margin-bottom: 35px;
}
.package-block-four .theme-btn{
min-width: 140px;
}
.packages-section-four .packages-carousel .owl-nav{
left: auto;
right: 145px;
top: 30px;
margin: 0;
flex-direction: column;
}
.packages-section-four .packages-carousel .owl-next,
.packages-section-four .packages-carousel .owl-prev{
margin: 0 0 20px;
}
/***
====================================================================
Services Section
====================================================================
***/
.services-section{
position: relative;
padding: 120px 0;
}
.services-section .auto-container{
max-width: 1570px;
}
.service-block{
position: relative;
margin-bottom: 30px;
}
.service-block .inner-box{
position: relative;
padding: 30px 30px 25px;
background: #ffffff;
box-shadow: 0 25px 60px rgba(0,0,0,0.10);
border-bottom: 5px solid var(--main-color);
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.service-block .inner-box:hover{
background: var(--main-color);
}
.service-block .inner-box:before,
.service-block .inner-box:after{
position: absolute;
height: 180px;
width: 180px;
right: -10px;
top: -75px;
border-radius: 50%;
background-color: #ffffff;
z-index: 9;
opacity: .30;
transform: scale(0);
content: "";
transition: all 600ms ease;
}
.service-block .inner-box:hover:before{
transform: scale(1);
opacity: .10;
transition-delay: 300ms;
}
.service-block .inner-box:hover:after{
transform: scale(1.4);
opacity: .10;
transition-delay: 400ms;
}
.service-block .icon{
position: relative;
display: block;
height: 80px;
width: 80px;
color: var(--main-color);
font-size: 42px;
line-height: 78px;
border: 1px solid var(--main-color);
text-align: center;
border-radius: 50%;
margin-bottom: 20px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.service-block .inner-box:hover .icon{
background: #ffffff;
border-color: #ffffff;
color: var(--main-color);
box-shadow: 0 25px 60px rgba(0,0,0,0.10);
}
.service-block h4{
font-size: 30px;
line-height: 1em;
color: #000000;
font-weight: 700;
margin-bottom: 15px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.service-block .text{
font-size: 16px;
line-height: 24px;
color: #505050;
font-weight: 400;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.service-block .inner-box:hover .text,
.service-block .inner-box:hover h4{
color: #ffffff;
}
.services-section.style-two{
background: #1b212f;
padding: 120px 0 70px;
}
.services-section.style-two .service-block .inner-box {
background: #222836;
}
.services-section.style-two .service-block .inner-box:hover {
background: var(--main-color);
}
.services-section.style-two .service-block .text,
.services-section.style-two .service-block h4{
color: #ffffff;
}
/***
====================================================================
Video Section
====================================================================
***/
.video-section{
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-height: 800px;
display: flex;
justify-content: center;
align-items: center;
}
.video-section .play-now .icon{
height: 110px;
width: 110px;
background: var(--main-color);
color: #ffffff;
}
/***
====================================================================
Testimonial Section
====================================================================
***/
.testimonial-section{
position: relative;
padding: 120px 0 90px;
}
.testimonial-section .sec-title{
margin-bottom: 30px;
}
.testimonial-section .outer-box{
margin: 0 -15px;
}
.testimonial-block{
position: relative;
padding: 15px 15px 30px;
}
.testimonial-block .inner-box{
position: relative;
padding: 40px 30px;
border-radius: 8px;
overflow: hidden;
background-color: #ffffff;
box-shadow: 0 5px 15px rgba(8,0,0,.10);
}
.testimonial-block .thumb{
position: relative;
display: block;
height: 80px;
width: 80px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 22px;
}
.testimonial-block .thumb img{
display: block;
width: 100%;
}
.testimonial-block .name{
position: relative;
display: block;
font-size: 24px;
line-height: 1.2em;
color: #1b212f;
font-weight: 700;
font-family: 'Lato', sans-serif;
margin-bottom: 5px;
}
.testimonial-block .designation{
position: relative;
display: block;
font-size: 16px;
line-height: 24px;
color: #505050;
font-weight: 400;
margin-bottom: 30px;
}
.testimonial-block .rating{
position: relative;
display: flex;
align-items: center;
font-size: 22px;
line-height: 20px;
color: #ffc600;
font-weight: 900;
letter-spacing: 5px;
margin-bottom: 25px;
}
.testimonial-block .text{
position: relative;
display: block;
font-size: 20px;
line-height: 30px;
color: #505050;
font-weight: 400;
}
/***
====================================================================
Testimonial Section Two
====================================================================
***/
.testimonial-section-two{
position: relative;
padding: 120px 0 120px;
}
.testimonial-section-two .outer-box{
margin: 0 -30px;
}
.testimonial-section-two .testimonial-carousel-two{
padding-bottom: 40px;
}
.testimonial-block-two{
position: relative;
padding: 0px 30px 30px;
}
.testimonial-block-two .inner-box{
position: relative;
display: flex;
align-items: center;
background-color: #ffffff;
box-shadow: 0 15px 15px rgba(8,0,0,.10);
}
.testimonial-block-two .image-column{
position: relative;
min-width: 250px;
}
.testimonial-block-two .image-column .image{
margin-bottom: 0;
border-radius: 0 15px 15px 0;
overflow: hidden;
}
.testimonial-block-two .image-column .image img{
width: 100%;
}
.testimonial-block-two .content-column{
position: relative;
padding: 20px 25px;
}
.testimonial-block-two .rating{
position: relative;
display: flex;
align-items: center;
font-size: 18px;
line-height: 20px;
color: #ffc600;
font-weight: 900;
letter-spacing: 4px;
margin-bottom: 22px;
}
.testimonial-block-two .text{
position: relative;
display: block;
font-size: 18px;
line-height: 28px;
color: #505050;
font-weight: 400;
margin-bottom: 30px;
}
.testimonial-block-two .name{
position: relative;
display: block;
font-size: 24px;
line-height: 1.2em;
color: #1b212f;
font-weight: 700;
margin-bottom: 10px;
}
.testimonial-block-two .designation{
position: relative;
display: block;
font-size: 16px;
line-height: 24px;
color: #505050;
font-weight: 400;
}
/***
====================================================================
Testimonial Section Three
====================================================================
***/
.testimonial-section-three{
position: relative;
padding: 120px 0 0px;
}
.testimonial-section-three .auto-container{
max-width: 1020px;
}
.testimonial-section-three .outer-box{
margin: 0 -30px;
}
.testimonial-section-three .testimonial-carousel-three{
}
.testimonial-carousel-three .owl-nav{
width: auto;
left: 0;
right: 0;
margin: 0 -60px;
margin-top: -20px;
}
.testimonial-block-three{
position: relative;
padding: 0px 30px 30px;
}
.testimonial-block-three .inner-box{
position: relative;
display: flex;
align-items: center;
background-color: #ffffff;
box-shadow: 0 15px 30px rgba(28,115,234,.10);
}
.testimonial-block-three .image-column{
position: relative;
min-width: 450px;
order: 2;
}
.testimonial-block-three .image-column .image{
margin-bottom: 0;
border-radius: 0 15px 15px 0;
overflow: hidden;
}
.testimonial-block-three .image-column .image img{
width: 100%;
}
.testimonial-block-three .content-column{
position: relative;
padding: 30px 70px;
padding-right: 40px;
}
.testimonial-block-three .rating{
position: relative;
display: flex;
align-items: center;
font-size: 24px;
line-height: 20px;
color: #ffc600;
font-weight: 900;
letter-spacing: 4px;
margin-bottom: 30px;
}
.testimonial-block-three .text{
position: relative;
display: block;
font-size: 20px;
line-height: 30px;
color: #505050;
font-weight: 400;
margin-bottom: 30px;
}
.testimonial-block-three .name{
position: relative;
display: block;
font-size: 24px;
line-height: 1.2em;
color: #1b212f;
font-weight: 700;
margin-bottom: 10px;
font-family: 'Lato', sans-serif;
}
.testimonial-block-three .designation{
position: relative;
display: block;
font-size: 16px;
line-height: 24px;
color: #505050;
font-weight: 400;
}
/***
====================================================================
Testimonial Section Four
====================================================================
***/
.testimonial-section-four{
position: relative;
padding: 120px 0 120px;
}
.testimonial-section-four:before {
position: absolute;
right: 12.7%;
top: 15.6%;
height: 353px;
width: 374px;
background-image: url(../images/icons/pattern-5.png);
background-position: left top;
background-repeat: repeat;
content: "";
}
.testimonial-section-four .carousel-outer{
position: relative;
}
.testimonial-section-four .carousel-outer:before{
position: absolute;
left: 50%;
width: 268px;
height: 253px;
background-image: url(../images/icons/pattern-5.png);
content: "";
margin-left: -175px;
bottom: 30px;
opacity: .30;
z-index: -1;
}
.testimonial-block-four{
position: relative;
}
.testimonial-block-four .inner-box{
position: relative;
display: flex;
align-items: center;
}
.testimonial-block-four .image-column{
position: relative;
flex: 0 0 50%;
min-width: 500px;
order: 2;
}
.testimonial-block-four .image-column .image{
margin-left: 0px;
padding-right: 85px;
margin-bottom: 0;
overflow: hidden;
}
.testimonial-block-four .image-column .image img{
border-radius: 10px;
width: 100%;
}
.testimonial-block-four .content-column{
position: relative;
flex: 0 0 50%;
}
.testimonial-block-four .content-column .inner-column{
position: relative;
max-width: 440px;
top: 30px;
}
.testimonial-block-four .rating{
position: relative;
display: flex;
align-items: center;
font-size: 20px;
line-height: 20px;
color: #ffc600;
font-weight: 900;
letter-spacing: 10px;
margin-bottom: 30px;
}
.testimonial-block-four .text{
position: relative;
display: block;
font-size: 20px;
line-height: 30px;
color: #505050;
font-weight: 400;
margin-bottom: 30px;
}
.testimonial-block-four .name{
position: relative;
display: block;
font-size: 24px;
line-height: 1.2em;
color: #1b212f;
font-weight: 700;
margin-bottom: 10px;
}
.testimonial-block-four .designation{
position: relative;
display: block;
font-size: 16px;
line-height: 24px;
color: #505050;
font-weight: 400;
}
.testimonial-section-four .thumbs-carousel {
position: relative;
display: flex;
align-items: flex-end;
max-width: 500px;
margin-right: 85px;
margin-top: 30px;
}
.testimonial-section-four .thumbs-carousel .thumb{
position: relative;
border-radius: 10px;
overflow: hidden;
background: #ffffff;
}
.testimonial-section-four .thumbs-carousel .thumb img{
transition: all 300ms ease;
opacity: .30;
width: 100%;
}
.testimonial-section-four .thumbs-carousel .swiper-slide-thumb-active .thumb img{
opacity: 1;
}
/***
====================================================================
Experience Section
====================================================================
***/
.experience-section{
position: relative;
padding: 120px 0 0;
}
.experience-section:before{
position: absolute;
width: 1520px;
right: 90px;
top: 0;
bottom: 90px;
content: "";
background: #fff8f4;
}
.experience-section .content-column{
position: relative;
margin-bottom: 40px;
}
.experience-section .content-column:before{
position: absolute;
left: 100%;
margin-left: 40px;
bottom: -40px;
height: 340px;
width: 170px;
content: "";
background-image: url(../images/icons/pattern-5.png);
content: "";
}
.experience-section .content-column .inner-column{
position: relative;
padding-left: 55px;
padding-top: 40px;
}
.experience-section h3{
font-size: 30px;
line-height: 44px;
color: #000000;
font-weight: 700;
margin-bottom: 20px;
}
.experience-section .text{
font-size: 18px;
line-height: 28px;
margin-bottom: 30px;
}
.experience-section .theme-btn{
margin-bottom: 50px;
min-width: 150px;
padding: 10px 35px;
}
.experience-section .video-column{
position: relative;
}
.experience-section .video-column .video-box:before{
position: absolute;
top: -145px;
left: 0;
margin-left: -90px;
height: 320px;
width: 320px;
content: "";
background-image: url(../images/icons/pattern-5.png);
content: "";
}
.experience-section .video-column .video-box{
position: relative;
margin-left: -185px;
}
.experience-section .video-box .image{
position: relative;
margin-bottom: 0;
}
.experience-section .video-box .image img{
width: 100%;
}
.experience-section .play-now .icon{
height: 80px;
width: 80px;
font-size: 14px;
line-height: 80px;
}
.experience-section .fact-counter{
position: relative;
}
.experience-section .counter-column{
position:relative;
margin-bottom:50px;
}
.experience-section .count-box{
position: relative;
font-size:36px;
color:var(--main-color);
line-height: 1em;
font-weight:700;
}
.experience-section .count-box .count-text{
position:relative;
display: inline-block;
font-size:36px;
color:var(--main-color);
line-height: 1em;
font-weight:700;
margin-bottom: 20px;
}
.experience-section .counter-title{
position: relative;
display: block;
font-size:18px;
line-height:24px;
font-weight:700;
color:#303030;
}
/***
====================================================================
Gallery Section
====================================================================
***/
.gallery-section{
position: relative;
}
.gallery-section.alternate{
padding-bottom: 120px;
}
.gallery-block{
position: relative;
}
.gallery-block .image{
margin-bottom: 0;
background: #ffffff;
position:relative;
}
.gallery-block .image img{
display: block;
width: 100%;
transition: all 300ms ease;
}
.gallery-block .image:hover img{
opacity: .8;
}
.gallery-section.style-two .container-fluid{
padding: 0 20px;
}
.gallery-section.style-two .gallery-block{
padding: 0 10px;
}
.gallery-section.style-two .gallery-carousel-two{
padding-bottom: 70px;
}
/***
====================================================================
News Section
====================================================================
***/
.news-section{
position: relative;
padding: 120px 0 120px;
}
/* News BLock */
.news-block{
position: relative;
margin-bottom: 40px;
}
.news-block .inner-box{
position: relative;
overflow: hidden;
box-shadow: 0 25px 60px rgba(27,23,47,.10);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.news-block .inner-box:hover{
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px);
}
.news-block .image-box{
position: relative;
}
.news-block .image{
position: relative;
margin-bottom: 0;
}
.news-block .image img{
position: relative;
display: block;
width: 100%;
height: auto;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.news-block .inner-box:hover .image-box .image img{
opacity: .80;
}
.news-block .lower-content{
position: relative;
background: #ffffff;
padding: 35px 30px;
}
.news-block .post-meta{
position: relative;
display: flex;
flex-wrap: wrap;
margin-bottom: 18px;
}
.news-block .post-meta a{
font-size: 18px;
line-height: 28px;
color: var(--main-color);
font-weight: 600;
}
.news-block .lower-content h4{
position: relative;
font-size: 24px;
line-height: 36px;
font-weight: 700;
}
.news-block .lower-content h4 a{
display: inline-block;
color: inherit;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block .lower-content h4 a:hover{
color: var(--two-color);
}
.news-block .lower-content .text{
font-size: 18px;
line-height: 28px;
color: #505050;
margin-top: 12px;
}
.news-block .lower-content .post-info{
position: relative;
font-size: 18px;
line-height: 30px;
color: #909090;
display: flex;
justify-content: space-between;
margin-top: 13px;
}
.news-section .btn-box{
text-align: center;
margin-top: 20px;
}
.news-section .btn-box .theme-btn{
padding-left: 35px;
padding-right: 35px;
}
/***
====================================================================
News Section Two
====================================================================
***/
.news-section-two{
position: relative;
padding: 120px 0 100px;
}
.news-block-two{
position: relative;
margin-bottom: 40px;
}
.news-block-two .inner-box{
position: relative;
overflow: hidden;
padding: 35px 35px 40px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-shadow: 0 25px 60px rgba(27,23,47,.10);
}
.news-block-two .inner-box:before{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #ffffff;
content: "";
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block-two .inner-box:hover:before{
background: rgba(0,0,0,0.9);
visibility: visible;
}
.news-block-two h4{
position: relative;
font-size: 28px;
line-height: 44px;
font-weight: 700;
}
.news-block-two h4 a{
display: inline-block;
color: inherit;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block-two .post-info{
position: relative;
font-size: 18px;
line-height: 30px;
color: #000000;
display: flex;
justify-content: space-between;
margin-top: 13px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block-two .text{
position: relative;
font-size: 18px;
line-height: 28px;
color: #505050;
margin-top: 18px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block-two .read-more{
position: relative;
display: inline-block;
font-size: 20px;
line-height: 25px;
color: var(--main-color);
font-weight: 700;
margin-top: 25px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block-two .inner-box:hover .text,
.news-block-two .inner-box:hover .post-info,
.news-block-two .inner-box:hover h4 a{
color: #ffffff;
}
/***
====================================================================
News Section Three
====================================================================
***/
.news-section-three{
position: relative;
padding: 120px 0 70px;
}
.news-section-three .left-column{
position: relative;
}
.news-section-three .left-column .inner-column{
position: relative;
padding-right: 40px;
}
/* news block three */
.news-block-three{
position: relative;
margin-bottom: 50px;
}
.news-block-three .inner-box{
position: relative;
padding: 30px 24px 35px;
box-shadow: 0 25px 60px rgba(28,115,234,.05);
}
.news-block-three .image{
position: relative;
overflow: hidden;
border-radius: 4px;
margin-bottom: 25px;
}
.news-block-three .image img{
display: block;
width: 100%;
}
.news-block-three h4{
position: relative;
font-size: 24px;
line-height: 1.2em;
font-weight: 700;
margin-bottom: 14px;
}
.news-block-three h4 a{
display: inline-block;
color: inherit;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block-three .post-info{
position: relative;
font-size: 18px;
line-height: 30px;
color: #505050;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block-three .text{
position: relative;
font-size: 18px;
line-height: 28px;
color: #505050;
margin-bottom: 20px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block-three .read-more{
position: relative;
display: inline-block;
font-size: 14px;
line-height: 28px;
color: #303030;
font-weight: 700;
padding: 10px 30px;
text-transform: uppercase;
border: 1px solid #babcc0;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
/* News Block Four */
.news-block-four{
position: relative;
margin-bottom: 40px;
}
.news-block-four .inner-box{
position: relative;
padding-right: 220px;
min-height: 120px;
padding-top: 5px;
}
.news-block-four .image{
position: absolute;
right: 0;
top: 0;
height: 120px;
width: 160px;
border-radius: 4px;
overflow: hidden;
}
.news-block-four h4{
position: relative;
font-size: 24px;
line-height: 38px;
font-weight: 700;
margin-bottom: 5px;
}
.news-block-four h4 a{
display: inline-block;
color: inherit;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block-four .post-info{
position: relative;
font-size: 18px;
line-height: 30px;
color: #505050;
font-weight: 400;
display: flex;
letter-spacing: .016em;
justify-content: space-between;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
/* news block five */
.news-block-five{
position: relative;
margin-bottom: 50px;
}
.news-block-five .inner-box{
position: relative;
display: flex;
flex-direction: column;
background: #ffffff;
box-shadow: 0 25px 60px rgba(27,23,47,.10);
}
.news-block-five .image-box{
position: relative;
}
.news-block-five:nth-child(odd) .image-box{
order: 2;
}
.news-block-five .image{
position: relative;
overflow: hidden;
border-radius: 4px;
margin-bottom: 0;
}
.news-block-five .image img{
display: block;
width: 100%;
}
.news-block-five .lower-content{
position: relative;
padding: 35px 35px 40px;
}
.news-block-five h4{
position: relative;
font-size: 28px;
line-height: 44px;
color: #1b212f;
font-weight: 700;
margin-bottom: 12px;
}
.news-block-five h4 a{
display: inline-block;
color: inherit;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block-five .post-info{
position: relative;
font-size: 18px;
line-height: 30px;
color: #505050;
display: flex;
justify-content: flex-start;
margin-bottom: 8px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block-five .post-info .post-date,
.news-block-five .post-info .post-author{
margin-left: 25px;
color:#494d59;
font-weight:500;
}
.news-block-five .post-info .post-date{
margin-left:0px;
}
.news-block-five .text{
position: relative;
font-size: 18px;
line-height: 28px;
color: #505050;
margin-bottom: 20px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-block-five .read-more{
position: relative;
display: inline-block;
font-size: 14px;
line-height: 28px;
color: #303030;
font-weight: 700;
padding: 10px 30px;
text-transform: uppercase;
border: 1px solid #babcc0;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.news-section-five .right-column .inner-column{
position: relative;
padding-top: 10px;
padding-left: 15px;
}
/***
====================================================================
Blog Single
====================================================================
***/
.blog-single{
position: relative;
}
.blog-single.style-two{
padding-right:30px;
}
.news-block-six{
position: relative;
border-bottom: 1px solid #d1cfce;
margin-bottom: 30px;
padding-bottom: 14px;
}
.news-block-six .image{
position: relative;
}
.news-block-six .image img{
position: relative;
display: block;
width: 100%;
height: auto;
}
.news-block-six h2{
position: relative;
font-size: 36px;
line-height: 50px;
font-weight: 700;
margin-bottom: 15px;
}
.news-block-six h2 a{
color:inherit;
}
.news-block-six .post-info{
position: relative;
display: flex;
flex-wrap: wrap;
font-size: 18px;
color: #494d59;
font-weight: 500;
justify-content: flex-start;
margin-bottom: 10px;
gap: 25px;
}
.news-block-six .post-info .icon,
.news-block-six .post-info .colored{
color: var(--two-color);
}
.news-block-six .post-info .icon{
margin-right: 10px;
}
.news-block-six .post-info li:first-child{
margin-left: 0;
}
.news-block-six p{
font-size: 18px;
line-height: 26px;
color: #505050;
margin-bottom: 22px;
}
.news-block-six blockquote{
position: relative;
font-size: 18px;
line-height: 26px;
background: #e8e8ea;
color: #494d59;
padding: 25px 40px;
font-style: italic;
}
/***
====================================================================
Comment Area
====================================================================
***/
.group-title{
position: relative;
font-size: 30px;
line-height: 1.2em;
color: #1b212f;
font-weight: 700;
margin-bottom: 40px;
}
.comments-area{
position:relative;
margin-bottom: 120px;
}
.comments-area .comment-box{
position: relative;
padding-top: 60px;
border-top: 1px solid #e5e5e5;
margin-top: 60px;
}
.comments-area .comment-box.reply-comment{
margin-left: 100px;
}
.comments-area .comment-box:nth-child(2){
padding-top: 0;
margin-top: 0;
border: 0;
}
.comments-area .comment{
position:relative;
min-height: 85px;
padding-top: 10px;
padding-left: 120px;
}
.comments-area .comment-box .author-thumb{
position:absolute;
left:0px;
top:0px;
height: 83px;
width: 83px;
border-radius: 50%;
margin-bottom: 10px;
overflow: hidden;
}
.comments-area .comment-box .author-thumb img{
width:100%;
display:block;
}
.comments-area .comment-box .name{
position: relative;
display: block;
font-size:24px;
line-height:28px;
color:#1b212f;
font-weight:700;
margin-bottom: 8px;
}
.comments-area .comment-box .date{
position: relative;
font-size: 16px;
line-height: 28px;
color: #1b212f;
font-weight: 400;
text-transform: uppercase;
margin-bottom: 7px;
}
.comments-area .comment-box .text{
position: relative;
font-size: 18px;
line-height: 26px;
color:#505050;
font-weight: 400;
margin-bottom: 30px;
}
.comments-area .comment-box .reply-btn{
display: inline-block;
font-size: 16px;
line-height: 20px;
color: #ffffff;
padding: 10px 10px;
font-weight: 400;
background-color: var(--two-color);
min-width: 105px;
text-align: center;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
/***
====================================================================
Comment Form
====================================================================
***/
.comment-form{
position: relative;
}
.comment-form .form-group{
position:relative;
margin-bottom: 20px;
}
.comment-form .form-group:last-child{
margin-bottom: 0;
}
.comment-form .form-group input[type="text"],
.comment-form .form-group input[type="email"],
.comment-form .form-group textarea,
.comment-form .form-group select{
position: relative;
display: block;
height: 50px;
width: 100%;
font-size: 16px;
color: #494d59;
line-height: 28px;
font-weight: 400;
padding: 10px 30px;
background-color: #ffffff;
border: 1px solid #d1cfce;
border-radius: 5px;
-webkit-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;
}
.comment-form .form-group input:focus,
.comment-form .form-group select:focus,
.comment-form .form-group textarea:focus{
border-color:#156f89;
}
.comment-form .form-group textarea{
height: 230px;
resize: none;
}
.comment-form .form-group input[type="submit"],
.comment-form .form-group button{
font-size: 16px;
text-transform: uppercase;
min-width: 190px;
margin-top: 20px;
}
/***
====================================================================
Contact Section
====================================================================
***/
.contact-section{
position: relative;
padding: 120px 0 70px;
}
.contact-section .map-column{
position: relative;
margin-bottom: 100px;
}
.contact-section .info-column{
position: relative;
margin-bottom: 80px;
}
.contact-form{
position: relative;
max-width:900px;
margin:0 auto;
margin-bottom: 30px;
}
.contact-form .form-group{
position:relative;
margin-bottom: 30px;
}
.contact-form .form-group:last-child{
margin-bottom: 0;
}
.contact-form .form-group input[type="text"],
.contact-form .form-group input[type="email"],
.contact-form .form-group input[type="phone"],
.contact-form .form-group input[type="web"],
.contact-form .form-group input[type="url"],
.contact-form .form-group input[type="text"],
.contact-form .form-group textarea,
.contact-form .form-group select{
position: relative;
display: block;
height: 55px;
width: 100%;
font-size: 16px;
color: #505050;
line-height: 21px;
font-weight: 400;
padding: 15px 15px;
background-color: #ffffff;
border: 2px solid #eaeaea;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus{
}
.contact-form .form-group textarea{
height: 125px;
resize: none;
}
.contact-form .form-group input[type="submit"],
.contact-form .form-group button{
text-transform: uppercase;
min-width: 170px;
margin-top: 30px;
}
.contact-form label.error {
display: block;
font-weight: 500;
font-size: 13px;
text-transform: capitalize;
line-height: 24px;
color: #ff0000;
margin-bottom: 0;
}
.map-area{
position:relative;
}
.map-data{
text-align:center;
font-size:14px;
font-weight:400;
line-height:1.8em;
}
.map-data a{
display: block;
}
.map-data h6{
font-size:16px;
font-weight:700;
text-align:center;
margin-bottom:5px;
color:#121212;
}
.map-canvas{
height:510px;
background-color: #f9f9f9;
}
.contact-section .info-column .inner-column{
padding-left: 0px;
padding-right: 0px;
}
.contact-block{
position: relative;
}
.contact-block .inner-box{
position: relative;
padding: 30px;
border-radius: 5px;
box-shadow: 0px 0px 7px 0px rgb(0, 0, 0, 0.10);
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.contact-block .inner-box .info{
position:relative;
}
.contact-block .inner-box .info li{
position:relative;
padding-left:25px;
font-size: 16px;
line-height: 26px;
margin-bottom:10px;
color: #333333;
font-weight: 400;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.contact-block .inner-box .info li:last-child{
margin-bottom:0px;
}
.contact-block .inner-box .info li a{
color:inherit;
line-height:inherit;
}
.contact-block .inner-box .info li .icon{
position:absolute;
top:0px;
left:0px;
font-size: 16px;
line-height: inherit;
display: block;
color: var(--two-color);
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.contact-block h5{
font-size: 24px;
line-height: 1.2em;
color: #1b212f;
font-weight: 700;
border-bottom: 1px solid #bccadd;
margin-bottom: 20px;
padding-bottom: 20px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.contact-block p{
font-size: 18px;
line-height: 26px;
color: #333333;
font-weight: 400;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.contact-block p a{
color: inherit;
}
.contact-block .inner-box:hover{
background: var(--two-color);
}
.contact-block .social-links{
position: relative;
display: flex;
}
.contact-block .social-links a{
display: block;
font-size: 16px;
line-height: 34px;
color: var(--two-color);
width: 36px;
height: 36px;
text-align: center;
border: 1px solid var(--two-color);
border-radius: 50%;
margin-right: 15px;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.contact-block .inner-box:hover .social-links a{
background: #ffffff;
border-color: #ffffff;
color: var(--two-color);
}
.contact-block .inner-box:hover p,
.contact-block .inner-box:hover h5,
.contact-block .inner-box:hover .info li,
.contact-block .inner-box:hover .info li a,
.contact-block .inner-box:hover .info li .icon{
color: #ffffff;
}
/***
==================================================================
Subscribe Section
==================================================================
***/
.subscribe-section{
position: relative;
z-index: 1;
}
.subscribe-section:before{
position: absolute;
left: 0;
bottom: 0;
height: 50%;
width: 100%;
content: "";
background: #1b212f;
}
.subscribe-section .outer-box{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
max-width: 1420px;
margin: 0 auto;
padding: 100px 30px 90px;
}
.subscribe-section .inner-container{
position: relative;
max-width: 1010px;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.subscribe-section .title-column{
position: relative;
max-width: 450px;
padding-right: 30px;
}
.subscribe-section .title-column h4{
font-size: 30px;
line-height: 1.2em;
color: #ffffff;
font-weight: 700;
margin-bottom: 20px;
}
.subscribe-section .title-column .text{
position: relative;
font-size: 18px;
line-height: 28px;
color: #ffffff;
font-weight: 400;
}
.subscribe-section .form-column{
position:relative;
max-width: 455px;
width: 100%;
}
.subscribe-form{
position:relative;
}
.subscribe-form .form-group{
position:relative;
margin-bottom: 0;
}
.subscribe-form .form-group input[type="text"],
.subscribe-form .form-group input[type="email"]{
position: relative;
display:block;
height: 70px;
width:100%;
font-size:18px;
line-height:30px;
color: #505050;
background:#ffffff;
padding: 20px 29px;
padding-right: 160px;
font-family: 'Playfair Display', sans-serif;
-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
}
.subscribe-form .form-group .theme-btn{
position:absolute;
right:10px;
top:10px;
padding: 10px 35px;
}
.subscribe-section.style-two:before{
display: none;
}
.subscribe-section.style-two .outer-box{
background: var(--main-color);
max-width: 1200px;
padding: 80px 30px 80px;
margin-bottom: -150px;
}
.subscribe-section.style-two .inner-container{
max-width: 970px;
}
.subscribe-section.style-two .subscribe-form .form-group input[type="text"],
.subscribe-section.style-two .subscribe-form .form-group input[type="email"]{
background: transparent;
color: #ffffff;
padding: 16px 22px;
border: 2px solid #ffffff;
}
.subscribe-form .form-group .theme-btn:hover{
background: #ffffff;
color: var(--main-color);
}
/***
==================================================================
Main Footer
==================================================================
***/
.main-footer{
position:relative;
background: #1b212f;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.main-footer .widgets-section{
position: relative;
padding: 120px 0 10px;
}
.main-footer .footer-column{
position:relative;
margin-bottom:40px;
}
.main-footer .footer-widget{
position:relative;
}
.main-footer .footer-column .widget-title,
.footer-widget h2{
position: relative;
font-size:24px;
font-weight:700;
color:#ffffff;
line-height: 30px;
margin-bottom:35px;
}
.main-footer .about-widget{
position: relative;
}
.main-footer .logo{
position:relative;
margin-bottom: 30px;
}
.main-footer .footer-logo figure{
margin: 0;
}
.main-footer .footer-logo img{
display:block;
max-width:100%;
}
.main-footer .about-widget .text,
.main-footer .contact-widget .text{
position: relative;
font-size: 18px;
line-height: 28px;
color: rgba(255,255,255,1);
font-weight: 400;
margin-bottom: 32px;
}
.main-footer .contact-widget .text{
margin-bottom:15px;
}
/*=== User LInks ===*/
.user-links{
position: relative;
margin-top: 30px;
}
.user-links li{
position: relative;
font-size: 18px;
line-height: 28px;
color: rgba(255,255,255,.70);
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.user-links li a{
position: relative;
display: block;
color: rgba(255,255,255,.70);
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.user-links li a:hover{
color: #ffffff;
}
/*=== Contact List ===*/
.main-footer .contact-list{
position: relative;
}
.main-footer .contact-list li{
display: block;
font-size: 18px;
line-height: 28px;
color: rgba(255,255,255,.70);
font-weight: 400;
margin-bottom: 20px;
}
.main-footer .contact-list li:last-child{
margin-bottom: 0;
}
.main-footer .contact-list li a{
color: rgba(255,255,255,.70);
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.main-footer .contact-list li .text a:hover{
color: var(--two-color);
}
/*=== Footer Bottom ===*/
.footer-bottom{
position: relative;
background: #1b212f;
width: 100%;
}
.footer-bottom .inner-container{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 40px 0 54px;
border-top: 1px solid rgba(255,255,255,.20);
}
.footer-bottom .copyright-text{
position: relative;
padding: 10px 0px;
}
.footer-bottom .copyright-text p{
position: relative;
font-size: 18px;
line-height: 28px;
color: #ffffff;
font-weight: 400;
}
.footer-bottom .copyright-text a{
color: #ffffff;
font-weight: 700;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.footer-bottom .copyright-text a:hover{
color: #ffffff;
}
.footer-bottom .footer-nav{
position: relative;
}
.footer-bottom .footer-nav ul{
position: relative;
padding:20px 0;
}
.footer-bottom .footer-nav ul li{
position: relative;
float: left;
padding-left: 22px;
margin-left: 20px;
}
.footer-bottom .footer-nav ul li:first-child{
margin-left: 0;
padding-left: 0;
}
.footer-bottom .footer-nav ul li a{
position: relative;
display: block;
font-size: 18px;
line-height: 28px;
color: rgba(255,255,255,.70);
font-weight: 400;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
/***
==================================================================
Main Footer / Style Two
==================================================================
***/
.main-footer.style-two .widgets-section{
padding-top: 270px;
}
.main-footer.style-two .footer-bottom{
background: none;
}
.main-footer.style-two .user-links li,
.main-footer.style-two .user-links li a,
.main-footer.style-two .contact-list li,
.main-footer.style-two .contact-list li a,
.main-footer.style-two .about-widget .text,
.main-footer.style-two .footer-bottom .footer-nav ul li a{
color: #ffffff;
}
/***
====================================================================
Sidebar Page Container
====================================================================
***/
.sidebar-page-container{
position:relative;
padding:120px 0px 70px;
}
.sidebar-page-container .sidebar-side{
margin-bottom:50px;
}
.sidebar-widget{
position:relative;
padding: 35px 40px;
box-shadow: 0 25px 60px rgba(28,115,234,.10);
margin-bottom:60px;
}
.sidebar-widget:last-child{
margin-bottom: 0;
}
/* Sidebar Title */
.sidebar-title{
position: relative;
margin-bottom: 35px;
}
.sidebar-title h3{
position: relative;
display: block;
font-size: 26px;
line-height: 1.2em;
color: #1b212f;
font-weight: 700;
}
/*Search Box Widget*/
.sidebar .search-box{
margin-left: -20px;
margin-right: -20px;
}
.sidebar .search-box .form-group{
position:relative;
margin:0 0 30px;
}
.sidebar .search-box .form-group input[type="text"],
.sidebar .search-box .form-group input[type="search"]{
position:relative;
display:block;
font-size:16px;
line-height:28px;
width:100%;
height:60px;
border: 1px solid #d1cfce;
padding:10px 50px 10px 20px;
color:#777777;
border-radius: 5px;
-webkit-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;
}
.sidebar .search-box .form-group button{
position:absolute;
right: 5px;
top: 5px;
height:50px;
width:50px;
display:block;
font-size:18px;
color:#ffffff;
background: var(--two-color);
line-height:50px;
border-radius: 4px;
font-weight:normal;
-webkit-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;
}
.sidebar .search-box .form-group button:hover{
color: #dc3545;
}
/*=== Latest News ===*/
.sidebar .recent-post{
position: relative;
}
.recent-post .post{
position: relative;
padding-left: 100px;
min-height: 83px;
margin-bottom: 40px;
}
.recent-post .post:last-child{
margin-bottom: 0;
}
.recent-post .post-thumb{
position: absolute;
left: 0;
top: 0;
height: 83px;
width: 83px;
margin-bottom: 20px;
background-color: rgba(0,0,0,0.05);
}
.recent-post .post-thumb img{
position: relative;
display: block;
width: 100%;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.recent-post .post-thumb:hover img{
opacity: .9;
}
.recent-post .post h5{
position: relative;
font-size: 18px;
line-height: 26px;
color: #1b212f;
font-weight: 700;
margin-right: -10px;
margin-bottom: 10px;
}
.recent-post .post h5 a{
color: #1b212f;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.recent-post .post:hover h5 a{
color: #156f89;
}
.recent-post .post .post-info{
position: relative;
font-size: 16px;
line-height: 24px;
color: #494d59;
font-weight: 400;
}
/* Category List */
.category-list{
position: relative;
display: block;
}
.category-list .sidebar-title{
margin-bottom: 20px;
}
.category-list li{
position: relative;
margin-bottom: 10px;
border-bottom: 0;
}
.category-list li a{
position: relative;
display: block;
font-size: 18px;
color: #494d59;
font-weight: 400;
line-height: 26px;
background-color: rgba(0,0,0,0.01);
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.category-list li a:hover{
color: var(--two-color);
}
/*Popular Tags*/
.sidebar .sidebar-widget.tags{
padding-bottom: 20px;
}
.sidebar .popular-tags{
position: relative;
display: flex;
flex-wrap: wrap;
margin-right: -20px;
}
.sidebar .popular-tags li{
position: relative;
margin-right: 20px;
margin-bottom: 20px;
}
.sidebar .popular-tags a{
position:relative;
display:block;
font-size:14px;
color:#494d59;
line-height: 23px;
padding: 5px 17px;
text-align:center;
background:none;
font-weight:400;
border:1px solid #d1cfce;
border-radius: 2px;
text-transform:capitalize;
transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
-moz-transition:all 300ms ease;
}
.sidebar .popular-tags a:hover{
border-color:#dc3545;
background-color:#dc3545;
color:#ffffff;
}
/***
====================================================================
Updated Style
====================================================================
***/
.preloader{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:999999;
background-color:#ffffff;
}
.preloader:after{
position: absolute;
left: 50%;
top: 50%;
height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px;
background-position:center center;
background-repeat:no-repeat;
background-image:url(../images/favicon.png);
transform: rotateY(45deg);
animation: rotateAnimation 1s linear infinite;
content: "";
}
@keyframes rotateAnimation {
from {transform: rotateY(45deg);}
to {transform: rotateY(225deg);}
}
.preloader:before{
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 100%;
text-align: center;
margin: 0 auto;
margin-top: 30px;
color: #000000;
font-size: 1.2em;
opacity: .40;
font-weight: 700;
letter-spacing: 2px;
content: "Loading";
text-transform: uppercase;
transition: none;
}
.experience-section .video-column .video-box:before,
.about-section .images-column .image:before,
.banner-section:before,
.testimonial-section-four:before{
animation: bounce-one 10s linear infinite;
}
@-webkit-keyframes bounce-one {
0% {
transform: translateY(0);
}
50% {
transform: translateY(50px);
}
100% {
transform: translateY(0);
}
}
@keyframes bounce-one {
0% {
transform: translateY(0);
}
50% {
transform: translateY(50px);
}
100% {
transform: translateY(0);
}
}
.about-section:before{
animation: zoom-one 10s linear infinite;
}
@-webkit-keyframes zoom-one {
0% {
transform: scale(.9);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(.9);
}
}
@keyframes zoom-one {
0% {
transform: scale(.9);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(.9);
}
}
.rooms-section-two:before,
.about-section-two .images-column:before{
animation: fa-spin 60s linear infinite;
}
@-webkit-keyframes bounce-two {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(0);
}
}
.experience-section .content-column:before,
.testimonial-section-four .carousel-outer:before{
animation: bounce-two 15s linear infinite;
}
@keyframes bounce-two {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(0);
}
}
.news-block-two .inner-box{
position: relative;
z-index: 9;
}
.news-block-two .inner-box:after{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #1b212f;
opacity: 0;
visibility: hidden;
content: '';
z-index: -1;
transition: all 300ms ease;
}
.news-block-two .inner-box:hover:after{
visibility: visible;
opacity: .80;
}
.gallery-block .image{
overflow: hidden;
}
.gallery-block .image:hover img{
transform: scale(1.1);
opacity: 1;
}
.gallery-block .image a:before{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
content: "\f002";
font-family: 'Font Awesome 5 Free';
color: #ffffff;
font-size: 24px;
font-weight: 900;
background: rgba(0,0,0,.30);
opacity: 0;
visibility: hidden;
transition: all 300ms ease;
z-index: 1;
pointer-events: none;
}
.gallery-block .image:hover a:before{
opacity: 1;
visibility: visible;
}
.hotel-booking-search .sort-by-wrapper{
display:none;
}