/*
Author       : VAOneAgency
Template Name: Soul Suite Wellness - Health & Beauti HTML Template
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    00. BASE STYLES (Viewport, HTML, Body, etc)
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. BOOTSTRAP NAVIGATION OVERRIDES
    03. START HOME DESIGN
    04. START ABOUT US DESIGN
    05. START WHY CHOOSE US DESIGN
    06. START COUNTDOWN DESIGN
    07. START PORTFOLIO DESIGN
    08. START SPECIAL OFFER DESIGN
    09. START FEATURES DESIGN
    10. START OUR TEAM DESIGN
    11. START HOW IT WORKS DESIGN
    12. START PRICING DESIGN
    13. START TESTIMONIAL DESIGN
    14. START BLOG DESIGN
    15. START COMPANY PARTNER LOGO
    16. START CONTACT DESIGN
    17. START FOOTER DESIGN
  =============================================================*/

/*--------------------------------------------------------------
# Base Styles
--------------------------------------------------------------*/
@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
  zoom: 1.0;
}

html, body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%;
}

.container, 
.container-fluid {
  width: 100%;
  max-width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

input, select, textarea, button {
  max-width: 100%;
  box-sizing: border-box;
}

[class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  width: 100%;
  flex: 0 0 100%;
}

/* Responsive Utilities */
.hidden-xs {
  display: block !important;
}

.visible-xs {
  display: none !important;
}

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
  
  .visible-xs {
    display: block !important;
  }
}

/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive Helpers */
.text-center-xs {
  text-align: center !important;
}

.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .print-only {
    display: block !important;
  }
  
  body {
    padding: 20px;
    font-size: 14px;
  }
}

/* Responsive Typography */
@media only screen and (max-width: 768px) { 
    .section-title h2 { 
        text-align: center !important;
    }
    
    .section-title p {
        padding: 0 20px !important;
        width: 100% !important;
    }
    
    /* Hero section */
    .caption h2 { 
        font-size: 26px !important;
        line-height: 1.3 !important;
    }
    
    /* Navigation */
    .navbar-brand img { 
        width: 130px !important;
    }
    
    .navbar-default .navbar-nav > li > a {
        margin-top: 10px !important;
        padding: 8px !important;
    }
    
    .menu-top li a { 
        font-size: 11px !important;
    }
    
    /* About section */
    .about_img img { 
        width: 100% !important;
    }
    
    .about-us-content { 
        margin-top: 30px !important;
    }
    
    .about-us-content h2 { 
        font-size: 24px !important;
    }
    
    .about_img { 
        margin-top: 30px !important;
    }
    
    /* Features */
    .single_feature { 
        padding-top: 0 !important;
        margin-bottom: 30px !important;
    }
    
    .feature_img, 
    .feature_img img { 
        width: 100% !important;
    }
}

@media only screen and (max-width: 480px) { 
    .section-title h2 { 
        font-size: 30px !important;
    }
    
    .single_offer, 
    .pricing-table,
    .single-blog { 
        margin-bottom: 30px !important;
    }
    
    .offer a { 
        padding: 10px 26px !important;
    }
    
    .caption h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    .caption a { 
        margin: 20px 0 0 0 !important;
    }
    
    .left-control,
    .right-control { 
        display: none !important;
    }
    
    .testimonials .flexslider .testi-slider-item p {
        line-height: 24px !important;
        font-size: 16px !important; 
    }
    
    .footer_social {
        float: none !important;
        margin: 30px 0 !important;
    }
    
    .footer_social ul { 
        text-align: center !important;
        justify-content: center !important;
    }
    
    .footer_copyright {
        float: none !important;
        text-align: center !important;
        margin: 20px 0 0 0 !important;
    }
}

@media only screen and (max-width: 360px) { 
    .section-title h2 { 
        font-size: 24px !important;
    }
    
    .caption { 
        top: 40% !important;
    }
    
    .video-container h3 { 
        font-size: 24px !important;
    }
    
    .btn-light-bg { 
        padding: 12px 30px !important;
    }
}

/* Specific section adjustments */
@media (max-width: 767px) {
    .section-padding {
        padding: 40px 0 !important;
    }
    
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Typography adjustments for mobile */
    h1 { 
        font-size: 28px !important; 
        line-height: 1.3 !important;
    }
    
    h2 { 
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    h3 { 
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    p, li, a, span { 
        font-size: 16px !important; 
        line-height: 1.5 !important;
    }
    
    /* Form elements */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    textarea,
    select {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    /* Buttons */
    .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* Grid adjustments */
    [class*="col-"] {
        margin-bottom: 20px;
    }
    
    [class*="col-"]:last-child {
        margin-bottom: 0;
    }
}

/* Fix for specific sections */
@media only screen and (max-width: 770px) { 
    .offer,
    .opening_hour {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .offer {
        padding-bottom: 30px !important;
    }
    
    /* Fix for menu on mobile */
    .menu-top { 
        background-color: var(--color-white) !important;
        color: var(--color-white) !important;
        margin-left: 0 !important;
        padding: 10px 0 !important;
    }
    
    .navbar-default .navbar-nav > li > a { 
        color: #313131 !important;
        padding: 10px 15px !important;
    }
}

/* Fix for images in content */
.entry-content img,
.widget img,
.wp-caption {
    height: auto !important;
    max-width: 100% !important;
}

/* Fix for iframes */
iframe,
embed,
object,
video {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix for tables */
table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fix for pre and code blocks */
pre,
code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

/*--------------------------------------------------------------
# Theme Colors
--------------------------------------------------------------*/
:root {
    /* Color Palette */
    --color-teal: #40e0d0;
    --color-teal-hover: #39c9b9;
    --color-brown: #8c756a;
    --color-brown-hover: #7a6759;
    --color-orange: #ff5b0c;
    --color-orange-hover: #e5520b;
    --color-dark-teal: #227767;
    --color-text: #2c3e50;
    --color-text-light: #555;
    --color-off-white: #fdf8f4;
    --color-white: #ffffff;
    
    /* Font Sizes */
    --font-size-base: 15pt;
    --font-size-small: 0.85em;
    --font-size-medium: 1em;
    --font-size-large: 1.2em;
    --font-size-xlarge: 1.5em;
    --font-size-xxlarge: 2em;
    --font-size-xxxlarge: 2.5em;
    
    /* Gradients */
    --gradient-primary: linear-gradient(90deg, var(--color-teal), var(--color-brown), var(--color-orange));
    --gradient-primary-hover: linear-gradient(90deg, var(--color-teal-hover), var(--color-brown-hover), var(--color-orange-hover));
    
    /* Spacing */
    --spacing-section: 80px 0;
    --spacing-container: 0 40px;
    --spacing-large: 40px;
    --spacing-medium: 30px;
    --spacing-small: 20px;
    --spacing-xsmall: 10px;
    
    /* Border Radius */
    --radius-large: 20px;
    --radius-medium: 15px;
    --radius-small: 10px;
    --radius-pill: 50px;
    
    /* Shadows */
    --shadow-small: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 15px 40px rgba(0, 0, 0, 0.15);
  }  

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

body {
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 1px;
    height: 100%;
    font-family: 'Lato', sans-serif;
    background: #fff;
    color: #777;
}
html,
body { height: 100% }
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333;
    font-family: "Montserrat",sans-serif;
    font-weight: 700;
}
a {

    text-decoration: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
	color: var(--color-orange);
}
a:hover {
    text-decoration: none;
	color: var(--color-orange-hover);
}
a:focus {
    outline: none;
    text-decoration: none;
	color: var(--color-orange);
}

ul,
li {
    margin: 0;
    padding: 0;
}
fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}
/*START PRELOADER DESIGN*/
.preloader {
    background: var(--color-white);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}
.status,
.status-mes {
 
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    position: absolute;
    top: 50%;
    width: 200px;
}
.status-mes {
    background: none;
    left: 0;
    margin: 0;
    text-align: center;
    top: 65%;
}
.status-mes h4 {
    color: #333;
    margin-top: 30px;
	text-transform: uppercase;
	font-weight:400;
}
.no-padding { padding: 0 }
/*END PRELOADER DESIGN*/
/*START SCROLL TO TOP*/
.topcontrol {
    background: var(--color-orange) none repeat scroll 0 0;
    border-radius: 5px;
    bottom: 5px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
    color: var(--color-white);
    cursor: pointer;
    font-size: 26px;
    height: 40px;
    line-height: 40px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    position: fixed;
    right: 5px;
    text-align: center;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 40px;
}
.topcontrol:hover {
    background: var(--color-orange-hover);
    color: var(--color-white);
}
/*END SCROLL TO TOP*/
.section-padding { padding: 60px 0 }
/*START SECTION TITLE DESIGN*/
.section-title { margin-bottom: 60px }
.section-title  h2 {
    color: #333;
    margin: 0;
    position: relative;
    text-transform: uppercase;
    padding-bottom: 10px;
}
@media only screen and (max-width:768px) { 
    .section-title h2 { text-align: center }
}
@media only screen and (max-width:480px) { 
    .section-title h2 { font-size: 30px }
}
@media only screen and (max-width:360px) { 
    .section-title h2 { font-size: 24px }
}
.section-title  h2 span{color:var(--color-orange);}
.line {
    background: var(--color-orange) none repeat scroll 0 0;
    display: block;
    height: 2px;
    margin: 15px auto;
    width: 70px;
    position: relative;
}
.section-title-white {
    color: var(--color-white) !important;
    position: relative;
}
.section-title p {
    margin: auto auto 0px;
    width: 65%;
}
@media only screen and (max-width:768px) { 
    .section-title p {
        padding: 0 20px;
        width: 100%;
    }
}
/*END SECTION TITLE DESIGN*/
/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 02. START BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/
.navbar-default {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
    padding: 20px 0;
    background: none;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: var(--color-orange) !important;
    background-color: transparent;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    color: var(--color-orange) !important;
    background-color: transparent;
}
.navbar-brand { padding: 0px }
.navbar-brand img {
    width: 150px;
    margin-left: 10px;
}
@media only screen and (max-width:768px) { 
.navbar-brand img {width: 130px;}
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border-color: var(--color-white) }
.menu-top li a {
	color: var(--color-white) !important;
	font-size: 12px;
	font-weight: 400;
	text-transform: uppercase;
	font-family: "Montserrat",sans-serif;
}
.menu-top li a:hover { color: var(--color-orange)!important }
@media only screen and (max-width:768px) { 
    .navbar-default .navbar-nav > li > a {
        margin-top: 10px;
        padding: 8px;
    }
.menu-top li a {font-size: 11px;}	
}
@media only screen and (max-width:480px) { 
    .menu-top { background-color: var(--color-white) }
    .navbar-default .navbar-nav > li > a { color: #313131  !important }
}
.navbar-default.menu-shrink {
    background-color: rgba(255,255,255,0.9);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    width: 100%;
}
@media only screen and (max-width:480px) { 
    .menu-top {
        color: var(--color-white) !important;
        margin-left: 0px;
    }
}
.navbar-default.menu-shrink li a { color: #313131!important }
.navbar-default.menu-shrink li a:hover { color: var(--color-orange) !important }
.navbar-default .navbar-toggle { background: var(--color-white) none repeat scroll 0 0 }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: var(--color-white) }
.navbar-default .navbar-toggle .icon-bar { background-color: var(--color-orange) }

/*-------------------------------
# dropdwon menu 
--------------------------------*/

#navigation li ul.sub-menu, #navigation ul li ul.sub-menu li ul.sub-menu{
	opacity: 0;
	position: absolute;
	top: 115%;
	transition: all 0.3s ease 0s;
	width: 228px;
	z-index: -99;
	visibility:hidden;
	background: var(--color-white) none repeat scroll 0 0;
	box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.2);
	padding: 15px;  
	left: 10px;
	background: #f5f5f5;
	list-style: none;
}
#navigation ul li ul.sub-menu li ul.sub-menu{
	top: 0;
	left: 100%;
	transition: all 0.5s ease 0s;
}
#navigation ul li ul.sub-menu li{
	padding: 0;
	width: 100%;
}
#navigation ul li:hover ul.sub-menu{
	top:100%;
	opacity:1;
	z-index:999;
	visibility:visible;
}
#navigation ul.nav > li ul li:hover ul.sub-menu{
	opacity:1;
	visibility:visible;	
}
#navigation ul li ul.sub-menu li a {
	color: #777!important;
	cursor: pointer;
	display: block;
	padding: 10px 12px;
	text-transform: none;
	font-size: 14px;
}
#navigation ul li:hover ul.sub-menu li a:hover{
	color: var(--color-white)!important;
	background: var(--color-orange);
	text-decoration: none;
}

/*
* ----------------------------------------------------------------------------------------
* 02.END BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 03.START HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
#home-slider {
    overflow: hidden;
    position: relative;
}
.caption {
    color: var(--color-white);
    left: 0;
    margin-top: -104px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    z-index: 15;
}
@media only screen and (max-width:375px) { 
    .caption { top: 42% }
}
@media only screen and (max-width:360px) { 
    .caption { top: 40% }
}
.caption h2 {
    color: var(--color-white);
    font-size: 44px;
    margin-bottom: 20px;
    margin-top: 0;
    text-transform: uppercase;
}
@media only screen and (max-width:768px) { 
    .caption h2 { font-size: 26px }
}
@media only screen and (max-width:480px) { 
    .caption h2 {
        font-size: 30px;
        line-height: 40px;
    }
}
@media only screen and (max-width:320px) { 
    .caption h2 { font-size: 24px }
}
.caption p {
    margin: auto auto 0px;
    width: 60%;
}
.caption a { margin: 30px 0 0 30px }
@media only screen and (max-width:480px) { 
.caption a { margin: 30px 0 0 0px }
}
.carousel-fade .carousel-inner .item {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition-property: opacity;
    transition-property: opacity;
    background-repeat: no-repeat;
    background-size: cover;
    height: 750px;
}
.carousel-fade .carousel-inner .item:after {
background: var(--color-black) none repeat scroll 0 0;
bottom: 0;
content: " ";
left: 0;
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
position: absolute;
right: 0;
top: 0;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}
.carousel-fade .carousel-control { z-index: 2 }
.left-control,
.right-control {
    background: var(--color-orange) none repeat scroll 0 0;
    border-radius: 30px;
    color: var(--color-white);
    font-size: 24px;
    height: 51px;
    line-height: 48px;
    position: absolute;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 51px;
    z-index: 20;
}
@media only screen and (max-width:480px) { 
    .left-control,
    .right-control { display: none }
}
.left-control { left: -51px }
.right-control { right: -51px }
.left-control:hover,
.right-control:hover {
    background-color: var(--color-white);
    color: var(--color-orange);
}
#home-slider:hover .left-control { left: 30px }
#home-slider:hover .right-control { right: 30px }
#home-slider .fa-angle-down {
    position: absolute;
    left: 50%;
    bottom: 50px;
    color: var(--color-white);
    display: inline-block;
    width: 24px;
    margin-left: -12px;
    font-size: 24px;
    line-height: 24px;
    z-index: 999;
    -webkit-animation: bounce 3000ms infinite;
    animation: bounce 3000ms infinite;
}
.btn-light-bg {
	background: var(--color-orange) none repeat scroll 0 0;
	border: medium none;
	border-radius: 0;
	color: var(--color-white);
	padding: 13px 35px;
	text-transform: uppercase;
	-webkit-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
	display: inline-block;
}
.btn-light-bg:hover,
.btn-light-bg:focus {
    background: var(--color-white);
    color: #333;
}
@media only screen and (max-width:375px) { 
.btn-light-bg {padding: 13px 45px;}
}
.btn-light-bg-two {
    background: var(--color-white) none repeat scroll 0 0;
    color: #333;
    padding: 13px 35px;
	border: medium none;
	border-radius: 0;
	margin-left:30px;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}
.btn-light-bg-two:hover,
.btn-light-bg-two:focus {
    background: var(--color-orange);
    color: var(--color-white);
}

/*START TEXT SLIDER*/
.text_slider {
position: relative;
height:700px;
}
.text_slider:before {
    background: var(--color-black) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
}

/*START TEXT SLIDER*/

/*START HTML5 VIDEO*/
.html-video {
    top: 0%;
    left: 0%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.html-video:before {
    background: var(--color-black) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
}
.slider-caption {
    position: absolute;
    top: 33%;
    width: 100%;
    left: 0;
    text-align: center;
    z-index: 15;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
.slider-caption p {
  width: 60% !important;
}
video { min-width: 100% }
/*END HTML5 VIDEO*/
/*START YOUTUBE HOME DESIGN*/
.youtube_bg {
position: relative;
height:700px;
}
.youtube_bg:before {
    background: rgba(0, 0, 0, 0.6);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
}
.home_text h2 {
    color: #f8f8f8;
    font-size: 40px;
	padding-top:250px;
    margin-top: 0;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.home_text p {
    color: var(--color-white);
    margin: auto auto 30px;
    width: 70%;
}
@media only screen and (max-width:768px) { 
    .home_text p { width: 100% }
}
/*END YOUTUBE HOME DESIGN*/
/*
* ----------------------------------------------------------------------------------------
* 03.END HOME DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 04.START ABOUT US DESIGN
* ----------------------------------------------------------------------------------------
*/
@media only screen and (max-width:768px) { 
.about_img img {
  width: 100%;
}
}
@media only screen and (max-width:768px) { 
    .about-us-content {margin-top:60px; }
}
.about-us-content h2 {
margin: 0;
text-transform: uppercase;
font-size: 24px;
}

@media only screen and (max-width:768px) { 
    .about-us-content h2 { font-size: 24px }
}
.about-line {
    background: var(--color-orange) none repeat scroll 0 0;
    display: block;
    height: 2px;
    margin: 20px 0;
    width: 80px;
}
.about-us-content h2 span { color: var(--color-orange) }
p{
	margin-bottom: 15px;
}

.about_img img{
	width: 100%;
}

@media only screen and (max-width:768px) { 
    .about_img { margin-top: 30px }
}
/*
* ----------------------------------------------------------------------------------------
* 04.END ABOUT US DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 05.START WHY CHOOSE US DESIGN
* ----------------------------------------------------------------------------------------
*/
.single_feature {
	margin-top: 50px;
}
.feature_img {
    margin: auto auto 0;
    max-width: 450px;
}
@media only screen and (max-width:768px) { 
    .single_feature { padding-top: 0px; }
	.feature_img, .feature_img img {
		width: 100%;
	}	
	
}


.single_feature i {
    border-radius: 50%;
    color: var(--color-white);
	background:var(--color-orange);
    display: inline-block;
    font-size: 24px;
    height: 60px;
    line-height: 62px;
    margin: 0 auto 15px;
    position: relative;
    text-align: center;
    width: 60px;
    z-index: 3;
	-webkit-transition: .5s;
	transition: .5s;
}
.single_feature:hover i{
	background: #333;
}
.single_feature h3 {
    text-transform: uppercase;
    font-size: 14px;
}
.single_feature span {
    border-bottom: 1px dashed #ccc;
    width: 80px;
    display: block;
	margin-bottom: 10px;
}
.single_feature p { margin-bottom: 0 }
/*
* ----------------------------------------------------------------------------------------
* 05.END  WHY CHOOSE US DESIGN
* ----------------------------------------------------------------------------------------
*/



/*
 * ----------------------------------------------------------------------------------------
 *  06.START COUNTDOWN DESIGN
 * ----------------------------------------------------------------------------------------
 */
.counter { position: relative }
.counter:before {
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
position: absolute;
top: 0;
width: 100%;
}
.timer {
    background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
    padding: 30px 0;
}
@media only screen and (max-width:480px) { 
.timer {margin-bottom:20px;}
}
.time_counter {
color: var(--color-orange);
font-size: 40px;
font-weight: 700;
margin-top: 0;
}
.counter_title {
color: var(--color-white);
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 0;
text-transform: uppercase;
}
/*
 * ----------------------------------------------------------------------------------------
 *  06.END COUNTDOWN DESIGN
 * ----------------------------------------------------------------------------------------
 */


 
 /*
* ----------------------------------------------------------------------------------------
* 07.START PORTFOLIO DESIGN
* ----------------------------------------------------------------------------------------
*/
.grid figure {
    background: var(--color-teal) none repeat scroll 0 0;
    overflow: hidden;
    position: relative;
}
.grid figure img {
    position: relative;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
}
.grid figure figcaption {
    padding: 2em;
    color: var(--color-white);
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
.grid figure h2 span { font-weight: 700 }
.grid figure h2,
.grid figure p { margin: 0 }
.grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}
.effect-apollo p a {
color: var(--color-white);
font-size: 14px;
}
figure.effect-apollo {background: rgba(0,0,0,0.9);}
figure.effect-apollo img {
    opacity: 0.95;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    filter: alpha(opacity=95);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
    -webkit-transform: scale3d(1.05,1.05,1);
    transform: scale3d(1.05,1.05,1);
}
figure.effect-apollo figcaption:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
    content: '';
    -webkit-transition: -webkit-transform 0.6s;
    transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}
figure.effect-apollo p {
border-right: 4px solid var(--color-white);
bottom: 0;
margin: 3em;
max-width: 185px;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
padding: 0 1em;
position: absolute;
right: 0;
text-align: right;
-webkit-transition: opacity 0.35s ease 0s;
transition: opacity 0.35s ease 0s;
}
figure.effect-apollo h4{ text-align: left;color:#fff;position: absolute; }
figure.effect-apollo:hover img {
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}
figure.effect-apollo:hover figcaption:before {
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}
figure.effect-apollo:hover p {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.portfolio_btn { padding-top: 50px }

.btn-portfolio-bg {
    background: var(--color-orange) none repeat scroll 0 0 !important;
    border: 1px solid var(--color-orange);
    border-radius: 3px;
    box-shadow: none;
    color: var(--color-white);
    font-size: 12px;
    padding: 12px 30px;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    font-family: montserrat,sans-serif;
}
.btn-portfolio-bg:hover,
.btn-portfolio-bg:focus {
    background: #333!important;
    color: var(--color-white);
    border: 1px solid #333!important;
}
/*
* ----------------------------------------------------------------------------------------
* 07.END PORTFOLIO DESIGN
* ----------------------------------------------------------------------------------------
*/



/*
* ----------------------------------------------------------------------------------------
* 08.START SPECIAL OFFER DESIGN
* ----------------------------------------------------------------------------------------
*/
.special_offer {
    position: relative;
}
.special_offer:before {
    background: rgba(15, 22, 30, 0.4) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    position: absolute;
    top: 0;
    width: 100%;
}
.offer h3{
color:var(--color-white);
margin-top: 0;
margin-bottom: 20px;
text-transform: uppercase;
}
.offer p{margin-bottom: 30px;color:#ddd;}
.offer a {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	border: 1px solid #eee;
	border-radius: 30px;
	color: var(--color-white);
	padding: 10px 30px;
	text-transform: uppercase;
	-webkit-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
	display: inline-block;
}
@media only screen and (max-width:480px) { 
    .offer a{padding: 10px 26px; }
}
.offer a:hover,
.offer a:focus {
border: 1px solid var(--color-orange);
color: var(--color-orange);
}
.opening_hour h3{
color:var(--color-white);
margin-top: 0;
margin-bottom: 20px;
text-transform: uppercase;
}
.opening_hour p{
color:#ddd;
margin-bottom: 30px;
}
.opening_hour ul{list-style:none;}
.opening_hour ul li{
color: var(--color-white);
line-height: 24px;
}
.opening_hour ul li span{
color: var(--color-orange);
float: right;
font-weight: 700;
}
/*
* ----------------------------------------------------------------------------------------
* 08.END SPECIAL OFFER DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 09.START FEATURES DESIGN
* ----------------------------------------------------------------------------------------
*/

.single_offer {
border: 1px solid #eee;
padding: 20px;
-webkit-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}
@media only screen and (max-width:480px) { 
    .single_offer { margin-bottom: 20px }
}
.single_offer:hover {
border: 1px solid var(--color-orange-hover);
box-shadow:0px 0px 20px 0px rgba(0,0,0,0.2);
}
.single_offer_img { overflow: hidden }
.single_offer_img img {
  border-radius: 500px;
  height: 250px;
  margin: auto;
  width: 250px;
}
@media only screen and (max-width:768px) { 
.single_offer_img img {
  border-radius: 500px;
  height: 200px;
  margin: auto;
  width: 200px;
}
}
.single_offer h4 {
font-weight: 400;
margin-bottom: 0;
margin-top: 20px;
text-transform: uppercase;
-webkit-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.single_offer h5{
color: var(--color-orange);
font-size: 18px;
}

.single_offer p {
    margin-bottom: 20px;
}
.btn-feature-bg {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid #eee;
  border-radius: 30px;
  color: #333;
  padding: 10px 30px;
  text-transform: uppercase;
  -webkit-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
  font-family: montserrat,sans-serif;
}
.btn-feature-bg:hover,
.btn-feature-bg:focus {
    border: 1px solid var(--color-orange-hover);
    background: var(--color-white);
    color: var(--color-orange-hover);
}
/*
* ----------------------------------------------------------------------------------------
* 09.END FEATURE DESIGN
* ----------------------------------------------------------------------------------------
*/



/*
 * ----------------------------------------------------------------------------------------
 * 10.START OUR TEAM DESIGN
 * ----------------------------------------------------------------------------------------
 */

@media only screen and (max-width:768px) { 
.single_team {margin-bottom: 60px;}
}
.single_team h3{
	font-size: 18px;
	margin-top: 15px;
	text-transform: uppercase;
}
.single_team h4 {
color: #777;
font-size: 15px;
margin-bottom: 0;
text-transform: uppercase;
}
.img_wrap{
	position:relative;
}
.img_wrap img {
  width: 100%;
}
.social_link{
	height: 100%;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	position: absolute;
	text-align: center;
	top: 0;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
	visibility: hidden;
	width: 100%;
	z-index: 1;
	background: rgba(var(--color-orange-hover), .75);
	-webkit-transform: scale(0);
	        transform: scale(0);
}
.img_wrap:hover .social_link{
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	visibility: visible;
	-webkit-transform: scale(1);
	        transform: scale(1)
}
.social_table{
	display: table;
	height: 100%;
	width: 100%;	
}
.social_table ul{
	list-style: none;
	display: table-cell;
	list-style: outside none none;
	padding: 0;
	vertical-align: middle;
}
.social_table ul a{
	background: var(--color-white) none repeat scroll 0 0;
	border: 1px solid var(--color-white);
	border-radius: 50%;
	color: #333;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	-webkit-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
	width: 40px;
}
.social_table ul a:hover{
background: var(--color-orange-hover) none repeat scroll 0 0;
	color: var(--color-white);
	border-color: var(--color-orange-hover);
}
/*
 * ----------------------------------------------------------------------------------------
 * 10.END OUR TEAM DESIGN
 * ----------------------------------------------------------------------------------------
 */




/*
* ----------------------------------------------------------------------------------------
* 11.START HOW IT WORKS DESIGN
* ----------------------------------------------------------------------------------------
*/
.about_video {
    height: 500px;
    position: relative;
}
.about_video:before {
    background: rgba(15, 22, 30, 0.4) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    position: absolute;
    top: 0;
    width: 100%;
}
.video-container h3 {
    color: var(--color-white);
    font-size: 40px;
    font-weight: 400;
    margin-top: 150px;
	margin-bottom: 50px;
    text-transform: capitalize;
}
@media only screen and (max-width:320px) { 
    .video-container h3 { font-size: 280px }
}
.play-video {
    background-color: rgba(255, 255, 255, 0.3);
    border: 7px solid var(--color-white);
    border-radius: 500px;
    cursor: pointer;
    height: 150px;
    left: 50%;
    margin-left: -76px;
    position: absolute;
    top: 85%;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 150px;
}
.video-container a { display: inline-block }
.video-container a:hover .play-video {
    background: var(--color-orange-hover);
    color: var(--color-white);
}
.video-container a:hover .fa-play { color: var(--color-white) }
.play-video .fa-play {
    color: var(--color-white);
    font-size: 70px;
    left: 50px;
    position: absolute;
    top: 30px;
}
.modal-content {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    margin-top: 100px;
    text-align: center;
    box-shadow: none;
    border: none;
}
.modal-content iframe { border: none }
/*
* ----------------------------------------------------------------------------------------
* 11.END HOW IT WORKS DESIGN
* ----------------------------------------------------------------------------------------
*/



/*
* ----------------------------------------------------------------------------------------
* 12.START PRICING DESIGN
* ----------------------------------------------------------------------------------------
*/
.pricing-table {
  background-color: var(--color-white);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  position: relative;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.pricing-table:hover{
 box-shadow: none;
}
@media only screen and (max-width:480px) { 
    .pricing-table { margin-bottom: 40px }
}
.pricing-table.active { box-shadow: 0 0 4px rgba(0, 0, 0, 0.1) }
.pricing-table h3 {
	color: #333;
	font-size: 20px;
	margin-bottom: 0;
	margin-top: 0;
	padding: 25px 0 20px;
	text-align: center;
	text-transform: uppercase;
}
.pricing-table .price {
	color: #333;
	display: inline-block;
	font-family: montserrat,sans-serif;
	font-size: 14px;
	line-height: 26px;
	margin-bottom: 12px;
	padding-bottom: 25px;
	text-transform: uppercase;
	width: 100%;

}
.price.color-two h3{
	color: #fff;
}
.color-one {
    background: #f2f2f2;
}
.color-two {
  background: var(--color-orange) none repeat scroll 0 0;
  color: var(--color-white);
}
.color-three {
    background: #dd3333;
    color: var(--color-white);
}
.pricing-table .price span {
	display: block;
	font-size: 42px;
	font-weight: 700;
	padding-bottom: 20px;
}
.pricing-list {
    list-style: outside none none;
    margin-bottom: 0;
    text-align: center;
}
.pricing-list li {
	border-bottom: 1px dashed #eee;
	color: #333;
	font-size: 15px;
	padding: 10px 15px;
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	position: relative;
}
.pricing-list li:hover {}
.pricing-btn { padding: 20px 0 }
.pricing-btn a {
    background: var(--color-orange);
    color: var(--color-white);
    font-family: montserrat,sans-serif;
    padding: 8px 30px;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    border: 1px solid var(--color-orange);
}
.pricing-btn a:hover {
    background: #333;
    color: var(--color-white);
  	border-color: #333;
}
/*
* ----------------------------------------------------------------------------------------
* 12.END PRICING DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 13. START TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/
.testimonials {
    background: #f7f7f7;
    position: relative;
    height: auto;
    z-index: 1;
    padding: 60px 0;
}
.testimonials .flexslider {
    background-color: var(--color-white);
    border: 0 none;
    box-shadow: 0 7px 33px 0 rgba(0, 0, 0, 0.12);
    margin: 0;
}
.testimonials .flexslider .testi-slider-item {
    padding: 30px 60px;
    text-align: center;
}
.testimonials .flexslider .testi-slider-item img {
border: 3px solid var(--color-orange);
border-radius: 50%;
height: 100px;
margin: 20px auto;
width: 100px;
}
.testimonials .flexslider .testi-slider-item h6 {
color: var(--color-orange);
font-size: 14px;
margin-bottom: 0;
text-transform: uppercase;
}
@media only screen and (max-width:360px) { 
.testimonials .flexslider .testi-slider-item p  {line-height: 24px;font-size: 16px; }
}
.testimonials .flex-direction-nav a {
    background: var(--color-orange) none repeat scroll 0 0;
    border-radius: 100px;
    box-shadow: 0 10px 11px 0 rgba(0, 0, 0, 0.2);
    color: var(--color-white);
    cursor: pointer;
    display: block;
    height: 45px;
    line-height: 50px;
    margin: -20px 0 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    overflow: hidden;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-shadow: none !important;
    top: 50%;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
    width: 45px;
    z-index: 10;
}
.testimonials .flex-direction-nav a i {
    display: inline-block;
    font-size: 25px;
}
.testimonials .flex-direction-nav a:before { display: none }
.testimonials .flex-direction-nav a.flex-next:before { display: none }
.testimonials .flex-control-paging li a {
    background: #222 none repeat scroll 0 0;
    border: 1px solid #222;
    border-radius: 20px;
    cursor: pointer;
    display: block;
    height: 6px;
    text-indent: -9999px;
    width: 6px;
}
.testimonials .flex-control-paging li a:hover {
    background: var(--color-teal) none repeat scroll 0 0;
    border-color: var(--color-teal);
}
.testimonials .flex-control-paging li a.flex-active {
    background: var(--color-teal) none repeat scroll 0 0;
    border-color: var(--color-teal);
    cursor: default;
}
.flex-control-nav {display: none;}
/*
* ----------------------------------------------------------------------------------------
* 13. END TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 14. START BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
.single-blog {
    background: var(--color-white) none repeat scroll 0 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
}
.single-blog:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) }
@media only screen and (max-width:480px) { 
    .single-blog { margin-bottom: 40px }
}
.single-img {
    position: relative;
    width: 100%;
}
.post-date {
    background: var(--color-white) none repeat scroll 0 0;
    display: inline-block;
    left: 0;
    padding: 15px;
    position: absolute;
    top: 5%;
}
.post-date  h4 {
    color: #333;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}
.blog-social {
    background: var(--color-white) none repeat scroll 0 0;
    bottom: 5%;
    display: inline-block;
    padding: 20px;
    position: absolute;
    left: 0;
}
.blog-social h4 {
    border-bottom: 1px solid #e8e8e9;
    margin-top: 0;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
}
.blog-social ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.blog-social ul li { float: left }
.blog-social ul li a { }
.blog-social ul li a i {
    color: var(--color-white);
    font-size: 18px;
    height: 40px;
    line-height: 45px;
    text-align: center;
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
    width: 40px;
}
.blog-social ul li a i:hover {
    background: var(--color-orange-hover);
    color: var(--color-white);
}
.single_blog_dsc { padding: 20px }
.single_blog_dsc h3 {
    color: #333;
    display: block;
    font-size: 20px;
    margin: 0;
    padding-bottom: 15px;
    text-transform: uppercase;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}
.single_blog_dsc h3 a:hover { color: var(--color-orange-hover) }
.single_blog_dsc p {
    margin-bottom: 10px;
}
.single_blog_dsc a {
    color: var(--color-orange);
    font-weight: 400;
    -webkit-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
    text-transform: uppercase;
    font-size: 14px;
}
.single_blog_dsc a:hover { padding-left: 10px }
.view_more { margin-top: 50px }
.facebook { background:linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) }
.twitter { background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) }
.align { background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) }
.linkedin { background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) }
.youtube { background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) }
.instagram { background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) }
/*
* ----------------------------------------------------------------------------------------
* 14. END BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 15.START COMPANY PARTNER LOGO
* ----------------------------------------------------------------------------------------
*/
.partner-logo { background: var(--color-orange) }
.partner { text-align: center }
.partner img {
  
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
}
.partner img:hover {}
/*
* ----------------------------------------------------------------------------------------
* 15.END COMPANY PARTNER LOGO
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 16.START CONTACT DESIGN
* ----------------------------------------------------------------------------------------
*/
.single-address { margin-bottom: 60px }
.mb-none { margin-bottom: 0px }
.single-address i {
background: var(--color-orange) none repeat scroll 0 0;
color: var(--color-white);
font-size: 18px;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}
.single-address:hover i{background: #333 none repeat scroll 0 0;}
.single-address h2 {
font-size: 16px;
text-transform: uppercase;
-webkit-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
 }
.single-address:hover h2{color:var(--color-orange-hover)};
.single-address p {
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
}
.form-control {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #eee;
    border-radius: 2px;
    box-shadow: none;
    color: #333;
    height: 50px;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.form-control:focus {
    border: 1px solid var(--color-orange);
    box-shadow: none;
    outline: 0 none;
}
.description textarea { height: 220px }
.form-group  button { border: none }
.btn-contact-bg {
    background: var(--color-orange) none repeat scroll 0 0;
    border-radius: 0 !important;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
    color: #fff;
    font-family: montserrat,sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.btn-contact-bg:hover,
.btn-contact-bg:focus {
    background: #333;
    color: #fff;
}
#map { height: 400px }
/*
* ----------------------------------------------------------------------------------------
* 16.END CONTACT DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 17.START FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.footer {
    background-color: var(--color-dark-teal);
    padding: 60px 0 30px 0 !important;
    position: relative;
    display: block;
    overflow: visible;
    clear: both;
    z-index: 10;
    margin-top: 40px;
}
.footer-logo img{
width: 150px;
}
@media only screen and (max-width:480px) { 
    .footer_social {
        float: none !important;
        margin-top: 30px;
    }
}
.footer_social ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
@media only screen and (max-width:480px) { 
    .footer_social ul { text-align: center }
}
.footer_social ul li {
    margin: 2px;
    display: inline-block;
}
.footer_social ul li a {
    background: none;
    border-radius: 30px;
	border:1px solid var(--color-orange);
    color: var(--color-white);
    display: block;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-align: center;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 40px;
}
@media only screen and (max-width:768px) { 
    .footer_social ul li a { font-size: 12px }
}
@media only screen and (max-width:360px) { 
    .footer_social ul li a { font-size: 14px }
}
@media only screen and (max-width:320px) { 
    .footer_social ul li a {
        font-size: 14px;
        height: 40px;
        width: 40px;
        line-height: 40px;
    }
}
.footer_social ul li a:hover { color: var(--color-white) }
.footer_facebook:hover { background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) }
.footer_twitter:hover { background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) }
.footer_align:hover { background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) }
.footer_linkedin:hover { background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) }
.footer_youtube:hover { background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) }
.footer_insta:hover { background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) }
.footer_copyright {
    color: var(--color-white);
    margin: 0;
    padding: 20px 0;
    font-size: var(--font-size-base);
    text-align: center;
    clear: both;
    position: relative;
    z-index: 1;
}
@media only screen and (max-width:480px) { 
    .footer_copyright {
        float: none !important;
        text-align: center;
    }
}
/*
* ----------------------------------------------------------------------------------------
* 17.END FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/

@media only screen and (max-width:770px) { 

	.offer,
	.opening_hour{
		padding-left: 15px;
		padding-right: 15px;
		
	}
	.offer{
		padding-bottom: 30px;
	}
}

/* Add viewport settings */
@viewport {
  width: device-width;
  zoom: 1.0;
}

/* Ensure proper box sizing and prevent horizontal scroll */
html, body {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}

/* Make containers fluid */
.container, 
.container-fluid {
  width: 100%;
  max-width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive form elements */
input, 
select, 
textarea, 
button {
  max-width: 100%;
  box-sizing: border-box;
}

/* Adjust padding and margins for mobile */
@media (max-width: 767px) {
  .section-padding {
    padding: 40px 0 !important;
  }
  
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Adjust font sizes for better mobile readability */
  h1 { font-size: 28px !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 20px !important; }
  p, li, a, span { 
    font-size: 16px !important; 
    line-height: 1.5 !important;
  }
}

/* Fix footer responsiveness */

/* Ensure footer is always visible */
.footer {
    background-color: var(--color-dark-teal) !important;
    padding: 60px 0 30px 0 !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
    width: 100% !important;
    clear: both !important;
    margin-top: 0 !important;
    overflow: visible;
}

/* Footer logo styles */
.footer-logo {
    text-align: center;
    margin-bottom: -50px;
}

.footer-logo img {
    width: 150px;
    margin: 0 auto 20px;
    display: block;
}

.footer-logo a {
    display: inline-block;
    line-height: 1;
}

/* Social media icons */
.footer_social {
    text-align: center;
    margin: 30px 0;
}

.footer_social ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
}

.footer_social ul li {
    margin: 5px !important;
    display: inline-block !important;
}

.footer_social ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid var(--color-orange) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-white) !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.footer_social ul li a:hover {
    background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) !important;
    transform: translateY(-3px) !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
}

/* Specific social icon hover effects */
.footer_facebook:hover,
.footer_twitter:hover,
.footer_align:hover,
.footer_linkedin:hover,
.footer_youtube:hover,
.footer_insta:hover {
    background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange)) !important;
}

/* Alignable icon specific styles */
.alignable-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Copyright section */
.footer_copyright {
    color: var(--color-white) !important;
    margin: 0 !important;
    padding: 30px 0 0 0 !important;
    font-size: 15px !important;
    text-align: center !important;
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer_copyright p {
    margin: 0 !important;
    color: var(--color-white) !important;
}

/* Mobile responsive footer */
@media (max-width: 768px) {
    .footer {
        padding: 40px 0 20px 0 !important;
    }
    
    .footer-logo img {
        width: 130px;
    }
    
    .footer_social {
        margin: 20px 0;
    }
    
    .footer_social ul {
        justify-content: center !important;
    }
    
    .footer_social ul li a {
        width: 35px !important;
        height: 35px !important;
        font-size: 14px !important;
    }
    
    .footer_copyright {
        padding: 20px 0 0 0 !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 30px 0 15px 0 !important;
    }
    
    .footer-logo {
        margin-bottom: 20px;
    }
    
    .footer_social {
        margin: 15px 0;
    }
    
    .footer_copyright {
        padding: 15px 0 0 0 !important;
    }
}

/* Ensure footer sticks to bottom when content is short */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content,
#main,
main {
    flex: 1;
}

/* Ensure content area has proper spacing */
#content {
  padding: 0px;
  min-height: calc(100vh - 400px);
  position: relative;
  overflow: visible;
}

/* Fix row and column spacing */
.row {
  margin-right: -15px;
  margin-left: -15px;
  display: flex;
  flex-wrap: wrap;
}

[class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  width: 100%;
}

/* Fix for the footer social icons */
.footer_social ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0 0 20px 0;
  list-style: none;
}

.footer_social ul li {
  margin: 5px;
}

.footer_social ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  transition: all 0.3s ease;
}

.footer_social ul li a:hover {
  background: linear-gradient(to right, var(--color-teal), var(--color-brown), var(--color-orange));
  transform: translateY(-3px);
}