/*  ==========================================================================
    Table of Contents
    ==========================================================================
    
    1.0 Common Styles
    2.0 Header Section
    3.0 Hero Section
    4.0 Portfolio Section
    5.0 Services Section
    6.0 Testimonial Section
    7.0 Team Section
    8.0 Call To Action Section
    9.0 About Section
    10.0 Page Header Section
    11.0 Contact Section
    12.0 Blog Section
    13.0 Footer Section
    14.0 Scroll To Top
    
    ==========================================================================
    IconicThemes
    ========================================================================== */

    @import url('https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display:400,700,900');
   
    @import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&display=swap');

    @import url("https://use.typekit.net/bwj4ujl.css");

    /* Define CSS variables for light and dark modes */
:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --header-background: #ffffff;
    --header-text-color: #222;
    --link-color: #222;
    --link-hover-color: #111;
    --button-background: #111;
    --button-text-color: #ddd;
    --footer-background: #111;
    --footer-text-color: #777;
    --footer-heading-color: #ffffff;
    --portfolio-box-bg: rgba(255, 255, 255, 0.8);
    --comment-bg: #FCFCFC;
    --comment-border: #E5E5E5;
    --comment-name-color: #283035;
    --comment-content-bg: #FFF;
    --ham-menu: #000000;
}

/* Dark mode */
[data-theme="dark"] {
    --background-color: #000000;
    --text-color: #ffffff;
    --header-background: #000000;
    --header-text-color: #ffffff;
    --link-color: #ffffff;
    --link-hover-color: #ffffff;
    --button-background: #fffff;
    --button-text-color: #000000;
    --footer-background: #000000;
    --footer-text-color: #ffffff;
    --footer-heading-color: #fffff;
    --portfolio-box-bg: rgba(18, 18, 18, 0.8);
    --comment-bg: #1f1f1f;
    --comment-border: #333333;
    --comment-name-color: #ffffff;
    --comment-content-bg: #1f1f1f;
    --ham-menu: #ffffff;
}

/*  ==========================================================================
    1.0 Common Styles
    ========================================================================== */
*{
    padding: 0;
    margin: 0;
}
body{
    background-color: var(--background-color);
    font-family: 'Baskervville', sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: var(--text-color);
    font-weight: 400;
    position: relative;
    overflow-x: hidden;
}
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1000;
}
.theme-toggle:focus {
    outline: none; /* Remove the default focus outline */
}

.header-section .site-branding a:hover {
    text-decoration: none; /* Disable the underline effect on hover */
}

@media (max-width: 767px) {
    .theme-toggle {
        position: absolute;
        right: 30px;
        top: 7.9px;
    }

    .nav-button {
        position: absolute;
        right: 20px; /* Adjust the position to the left of the theme toggle button */
        top: 7.9px;
    }
}

@media (min-width: 768px) {
    .theme-toggle {
        position: absolute;
        right: 20px;
        top: 8px;
    }
}

/* Common Styles for Theme Icon */
.theme-icon {
    max-width: 25px;
    max-height: 25px;
}

/* Adjustments for smaller devices */
@media (max-width: 767px) {
 

    .theme-icon {
        max-width: 20px;
        max-height: 20px;
    }
}

/* Ensure the mainmenu items are not overlapped */
.header-section .nav-menu {
    margin-right: 60px; /* Adjust space for the theme toggle button */
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Baskervville', sans-serif;
    -webkit-font-smoothing:antialiased;
    color: var(--header-text-color);
}
h1{
    font-size: 45px;
    line-height: 50px;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
    font-weight: 700;
}
h2{
    font-size: 28px;
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: -0.04em;
}
h3,h4{
    margin: 0 0 10px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--header-text-color);
    letter-spacing: -0.04em;
}
h3{
    font-size: 17px;
}
h4{
    font-size: 15px;
}
h5,h6{
    font-size: 14px;
    margin: 0 0 10px;
}
img{
    border: none;
    outline:none;
}
ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
p{
    font-size: 14px;
    margin-bottom: 15px;
}
a{  
    font-family: "Baskervville",sans-serif;
    letter-spacing: -0.04em;
    color: var(--link-color);
}
a:hover{
    color: var(--link-hover-color);
}
a:focus{
    outline: 0;
    text-decoration: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
   color: #888 !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder{ /* Firefox 18- */
   color: #888 !important;  
}

input::-moz-placeholder,
textarea::-moz-placeholder{  /* Firefox 19+ */
   color: #888 !important;  
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder{  
   color: #888 !important;  
}
button{
    border: none;
    background: none;
}
/* Helper Class */
.padding{
    padding: 80px 0;
}
.pd-15{
    padding: 15px;
}
.no-padding{
    padding: 0;
}
.mb-10{ margin-bottom: 10px; }
.mb-15{ margin-bottom: 15px; }
.mb-20{ margin-bottom: 20px; }
.mb-25{ margin-bottom: 25px; }
.mb-30{ margin-bottom: 30px; }
.mb-35{ margin-bottom: 35px; }
.mb-40{ margin-bottom: 40px; }
.mb-45{ margin-bottom: 45px; }
.mb-50{ margin-bottom: 50px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.ml-5{ margin-left: 5px; }
.ml-10{ margin-left: 10px; }
.mr-5{ margin-right: 5px; }
.mr-10{ margin-right: 10px; }
.mt-15{ margin-left: 15px; }
.mt-15{ margin-left: 15px; }
.padding-15{ padding: 15px; }

.display-block{ display: block; }
.text-black{
    color: #282828;
}
.text-white{
    color: #ffffff;
}
.align-left{
    text-align: left;
}
.align-right{
    text-align: right;
}
.align-center{
    text-align: center;
}
.fl-right{
    float: right;
}
.fl-left{
    float: left;
}
.display-table{
    width: 100%;
    height: 100%;
    display: table;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
}
.overlay{
    width: 100%;
    position: relative;
    z-index: 1;
}
.overlay:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.bg-white{
    background-color: #fff;
}
.bg-grey{
    background-color: #f2f2f2;
}
.bd-bottom{
    border-bottom: 1px solid #eaeaea;
}
.bg-dark{
    background-color: #232323;
}

/* Preloader Styles */
.loaded .site-preloader-wrap {
    opacity: 0;
    visibility: hidden;
}
.site-preloader-wrap {
    background-color: #111;
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
.site-preloader-wrap .spinner {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
}
.spinner {
  width: 40px;
  height: 40px;

  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}


/* Button Style */
.btn_group{}
.btn_group a{
    margin: 5px;
}
.default-btn{
    font-family: "Baskervville",sans-serif;
    letter-spacing: 2px;
    background-color: var(--button-background);
    color: var(--button-text-color);
    line-height: 45px;
    display: inline-block;
    padding: 0 25px;
    border-radius: 0;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    z-index: 1;
    -webkit-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.default-btn:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #f2f2f2;
    -webkit-transform-origin: right center;
       -moz-transform-origin: right center;
        -ms-transform-origin: right center;
            transform-origin: right center;
    -webkit-transform: scale(0, 1);
       -moz-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
         -o-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}
.default-btn:hover{
    color: #111;
}
.default-btn:hover:before{
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
        transform-origin: left center;
    -webkit-transform: scale(1, 1);
       -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
         -o-transform: scale(1, 1);
            transform: scale(1, 1);
}
.default-btn.btn_sm{
    line-height: 40px;
    padding: 0 15px;
}

/* Transition Effect */
a,a:hover, .overlay, img, .form-control,  .form-control:hover, button{
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

/* ==========================================================================
   2.0 Header Section
   ========================================================================== */
.header-section {
    background-color: var(--header-background);
    position: relative;
    -webkit-box-shadow: 0 0 15px rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 15px rgba(255, 254, 254, 0.06);
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
   
}


.header-section.navbar-fixed-top {
    position: relative;
}

.header-height { 
    width: 100%; 
}

/* Main Header */
.main-header {
    background-color: var(--header-background);
    position: relative;
}

.bottom-content-wrap {
    display: flex;
    align-items: center;
}

#mainmenu {
    display: inline-block;
    margin-right: 20px;
}
#mainmenu li {
    padding-left: 10px; /* Increase left padding to space items apart */
    padding-right: 10px; /* Increase right padding to space items apart */
}
#mainmenu li {
    position: relative;
    padding-left: 20px;
    display: inline-block;
    text-align: left;
}

#mainmenu li a {
    font-family: "Baskervville", serif;
    color: var(--header-text-color);
    font-weight: 400;
    padding: 30px 0;
    text-transform: uppercase;
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0;
}

#mainmenu li a:hover {
    color: var(--link-hover-color);
}

/* Dropdown */
#mainmenu li ul {
    background-color: var(--background-color);
    width: 200px;
    height: auto;
    position: absolute;
    left: 0;
    top: 140%;
    visibility: hidden;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 999;
}

#mainmenu li:hover > ul {
    visibility: visible;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    top: 100%;
}

#mainmenu li ul li {
    border-bottom: 1px solid var(--comment-border);
    display: block;
    position: relative;
}

#mainmenu li ul li:last-child {
    border: none;
}

#mainmenu li ul li a {
    line-height: 45px;
    display: block;
    padding: 0 15px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-color);
    -webkit-transition: color 0.3s ease 0s, padding 0.3s ease 0s;
    transition: color 0.3s ease 0s, padding 0.3s ease 0s;
}

#mainmenu li > ul > li:hover a {
    color: var(--link-hover-color);
}

#mainmenu li > ul ul {
    background-color: var(--background-color);
    left: 200px;
}

#mainmenu li > ul li:hover > ul li a {
    color: var(--text-color);
}

#mainmenu li ul li:hover > ul {
    top: 0;
    opacity: 1;
    visibility: visible;
}

#mainmenu li > ul li:hover > ul li > a:hover {
    background-color: transparent;
    color: var(--header-text-color);
}

#mainmenu li ul li li a:hover {
    color: #ffca3f !important;
}

/* Mobile Menu */
.slicknav_menu {
    background: none;
    padding: 4px 0;
    display: none;
    z-index: 999;
    margin-bottom: 20px;
}

.slicknav_nav {
    background-color: var(--background-color);
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    height: calc(100% - 9px); /* Calculate the height as full height minus 90px */
    position: fixed; /* Fixed positioning to cover the full screen */
    width: 100%; /* Full width */
    top: 49px; /* Start 90px down from the top */
    left: 0; /* Align to the left */
    overflow-y: auto; /* Enable scroll for many items */
}

.js .slicknav_menu {
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

/* Assuming .site-branding contains both the text and the menu button */

/* Style for the hamburger menu button */
.slicknav_btn {
    position: relative;
    padding: 10px 15px;  /* Padding around the button for clickable area */
    cursor: pointer;
    display: block;
    z-index: 1000;
    background-color: transparent;
    border: none;
    transform: translateY(-15px);
}

/* Styling the hamburger icon bars */
.slicknav_btn .slicknav_icon-bar {
    background-color: var(--ham-menu); /* Color of the bars */
    height: 2px; /* Reduced thickness for a finer appearance */
    width: 25px; /* Width of the bars */
    margin: 7px 0; /* Increased spacing between bars */
    transition: all 0.3s ease; /* Smooth transition for transforming */
}

/* Transform to "X" on toggle */
.slicknav_btn.slicknav_open .slicknav_icon-bar {
    position: absolute;
    margin: 0; /* Remove margin to align for X shape */
    height: 2px; /* Keeping the thinner style even in X form */
}

.slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(1) {
    transform: rotate(45deg); /* Top bar rotates to form X */
    top: 25px; /* Centering adjustment */
}

.slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(2) {
    transform: scale(0); /* Middle bar disappears */
}

.slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(3) {
    transform: rotate(-45deg); /* Bottom bar rotates to form X */
    top: 25px; /* Centering adjustment */
}
/* For tablets and larger devices */
@media (min-width: 768px) {
    .slicknav_btn {
        top: 20px; /* Adjust as needed */
        right: 100px; /* Adjust as needed */
    }
}
/* Ensure visibility if the background is also dark */


.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row, 
.slicknav_nav a,
.slicknav_nav a:hover {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

.slicknav_nav .slicknav_row, 
.slicknav_nav a {
    font-size: 25px;  /* Increased font size for better readability */
    font-weight: 400;  /* Bolder font weight for clearer text */
    color: var(--text-color);  /* Dark grey for text, ensuring good contrast */
    padding: 12px 20px;  /* Adequate padding for sizeable touch targets */
    width: 100%;  /* Each link takes the full width to align center */
    text-align: center;  /* Ensures text is centered within each link */
    margin: 5px 0;  /* Vertical margin to separate each link */
    box-sizing: border-box;  /* Ensures padding does not affect the set width */
    text-transform: uppercase;  /* Uppercase text for stylistic choice */
    text-decoration: none;  /* Removes underline from links */
    top: -50px;
}
.slicknav_nav {
    background-color: var(--background-color);
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    height: 100%; /* Full height */
    width: 100%; /* Full width */
    position: fixed; /* Fixed positioning to cover the full screen */
    left: 0; /* Align to the left */
    overflow-y: auto; /* Enable scroll for many items */
    padding: 30px 0; /* Adjust padding if needed */
}

.slicknav_nav a .caret {
    display: none;
}

.slicknav_nav ul {
    margin: 0;
}

.slicknav_nav ul li a {
    padding-left: 30px;
    font-size: 12px;
}

.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover {
    background-color: rgba(0,0,0,0.1);  /* Subtle hover background for visual feedback */
    color: var(--link-hover-color);  /* Darkens text color on hover */
}

/* Additional Styles for the Header */
.header-section .site-branding .site-title {
    font-family: 'kepler-std-semicondensed-dis', serif; /* Adjust the font to match the reference */
    font-weight: bold;
    font-style: normal;
    color: var(--header-text-color); /* Adjust the color to match the reference */
    margin: 0;
    font-size: 50px;
    letter-spacing: 1px;
}
.header-section .site-branding a {
    z-index: 1;  /* Higher than other elements */
    position: relative;  /* Needed for z-index to take effect */
}
@media (max-width: 767px) {
    .header-section .site-branding .site-title {
        font-family: 'kepler-std-semicondensed-dis', serif; 
        font-size: 27px;
        font-weight: bold;
        color: var(--header-text-color); 
        margin: 0;
        transform: translateY(-15px);
        letter-spacing: 1px;  /* Adjust the spacing to suit your design needs */
    }
}

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.nav-menu .nav-item {
    margin-left: 1.5rem;
}

.nav-menu .nav-link {
    font-family: 'Baskervville', serif; /* Adjust the font to match the reference */
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-color); /* Adjust the color to match the reference */
    text-decoration: none;
}

.nav-menu .nav-link:hover,
.nav-menu .nav-item.active .nav-link {
    color: var(--link-hover-color); /* Adjust the hover and active color */
}

.submenu {
    display: none; /* Initially hide the submenu */
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    background: var(--background-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-item:hover .submenu {
    display: block; /* Show the submenu on hover */
}

.submenu .nav-item {
    margin: 0;
}

.submenu .nav-link {
    padding: 0.5rem 1rem;
}
.noscroll {
    overflow: hidden;
}

/* Responsive adjustments for smaller devices */
@media (max-width: 767px) {
    .site-branding {
        text-align: left; /* Aligns the logo to the left on small devices */
        padding-left: 15px; /* Add some padding if needed for spacing from the edge */
    }
}

@media (max-width: 767px) {
    .header-section {
        background-color: var(--header-background);
        position: relative;
        -webkit-box-shadow: 0 0 15px rgba(255, 255, 255, 0.06);
        box-shadow: 0 0 15px rgba(255, 254, 254, 0.06);
        width: 100%;
        left: 0;
        top: 0;
        z-index: 100;
        padding: 0.5rem 0;
    }
}
/* ==========================================================================
   3.0 Hero Section
   ========================================================================== */
.hero-section{
    width: 100%;
    padding: 150px 0;
}
.hero-content h1{
    margin: 0;
}

/* ==========================================================================
   4.0 Portfolio Section
   ========================================================================== */
/* General padding and section styling */
.portfolio-section {
    margin-top: 10px;  /* Example padding */
   
}

.container-fluid {
    padding-left: 38.86px;
    padding-right: 38.86px;  /* More padding to match larajade.com style */
}

/* Macy container specific styles */
#macy-container {
    margin: 0 auto;  /* Center the container */
    overflow: hidden;  /* Ensures no overflow due to margin */
}

/* Default styles for macy items */
.macy-item {
    margin-bottom: 30px;  /* Space between grid items */
    padding: 15px;  /* Padding around images to increase spacing */
    padding-bottom: 20px;  /* Specific padding at the bottom */
    overflow: hidden;  /* Ensures content fits within the item */
}

.macy-item img {
    width: 100%;  /* Ensure images take up all available width */
    height: auto;  /* Maintain aspect ratio */
    display: block;  /* Remove extra space below images */
    transition: transform 0.3s ease;  /* Smooth scaling on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .macy-item {
        padding: 0;  /* Remove padding for mobile devices */
        padding-bottom: 20px;  /* Specific bottom padding for mobile devices */
        margin-bottom: 48px;  /* Increased margin-bottom to match Bootstrap's mb-5 */
    }
}

/* Optionally, for very small screens, if different styling is needed */
@media (max-width: 480px) {
    .macy-item {
        padding: 0;  /* Ensure padding is removed on very small devices */
        padding-bottom: 20px;  /* Specific bottom padding for very small devices */
        margin-bottom: 48px;  /* Increased margin-bottom to match Bootstrap's mb-5 */
    }
}

/* Adjust padding for smaller screens */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 20px;  /* Reduces padding for smaller devices */
        padding-right: 20px;  /* Reduces padding for smaller devices */
    }
}

@media (max-width: 480px) {
    .container-fluid {
        padding-left: 15px;  /* Minimal padding for very small screens */
        padding-right: 15px;  /* Minimal padding for very small screens */
    }
}


/* ==========================================================================
   5.0 Service Section
   ========================================================================== */
.service-section{}
.service-content{}
.service-content i{
    background-color: var(--header-text-color);
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    color: var(--background-color);
    font-size: 30px;
    margin-bottom: 15px;
}
/* ==========================================================================
   6.0 Testimonial Section
   ========================================================================== */
.testimonial-section{
    padding: 120px 0;
}
.testi-item{}
.testi-item i{
    color: var(--header-text-color);
    font-size: 30px;
    margin-bottom: 15px;
}
.testi-item h4{
    color: var(--header-text-color);
    display: block;
    font-size: 18px;
    font-weight: 600;
}
.testi-item h4 span{
    font-family: "Baskervville",sans-serif;
    display: block;
    font-size: 14px;
    color: var(--text-color);
    font-weight: 400;
}

/*Dots*/
.testimonial-carousel .owl-dots{
    display: block;
    text-align: center;
    margin-top: 20px;
}
.testimonial-carousel .owl-dots .owl-dot{
    background-color: #bbb;
    display: inline-block;
    width: 10px;
    height: 10px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    margin: 0 3px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    transition: all 0.5s ease-in-out;
}
.testimonial-carousel .owl-dots .owl-dot.active{
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: all 0.5s ease-in-out;
    background-color: var(--header-text-color);
    transition: all 0.5s ease-in-out;
} 
/* ==========================================================================
   7.0 Team Section
   ========================================================================== */
.team-section{}
.team-wrap{}
.team-box{
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.team-box:hover img{
    opacity: 0.8;
}
.team-box img{
    width: 100%;
}
.team-content{
    background-color: #f2f2f2;
    padding: 20px 0;
    border: 1px solid #eaeaea;

}
.team-content h3{
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--header-text-color);
}
.team-content h3 span{
    display: block;
    font-family: "Baskervville",sans-serif;
    font-size: 14px;
    color: var(--text-color);
    font-weight: 400;
}
/* ==========================================================================
   8.0 Call To Action Section
   ========================================================================== */
.cta-section{
    padding: 120px 0;
}
.cta-content{}
.cta-content h2{
    font-size: 32px;
    margin-bottom: 30px;
}
/* ==========================================================================
   9.0 About Section
   ========================================================================== */
.about-section{}
.about-wrap{
    display: flex;
    align-items: center;
}
.about-wrap img{
    width: 100%;
}

.about-content{}
.about-content h2{
    font-size: 28px;
    margin-bottom: 20px;
}
.about-content p{
    margin-bottom: 30px;
}

/* ==========================================================================
   10.0 Page Header Section
   ========================================================================== */
.page-header{
    padding: 150px 0;
}
.page-header .meta-info{
    margin-top: 30px;
}
.page-header .meta-info a{
    font-size: 16;
    color: var(--header-text-color);
    font-weight: 600;
}
.page-header .meta-info a:hover{
    opacity: 0.8;
}
.page-header .meta-info span{
    margin: 10px;
}

/* ==========================================================================
   11.0 Contact Section
   ========================================================================== */
.contact-section{
    position: relative;
    z-index: 1;
}
.contact-wrap{
    background-color: #f2f2f2;
    padding: 80px 50px;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.15);
    margin-top: 110px;
    border-radius: 5px;
}

.contact-info ul li{
    line-height: 40px;
    display: flex;
    align-items: center;
}
.contact-info ul li i{
    margin-right: 10px;
    color: #999;
    font-size: 20px;
}
.contact-info ul li{
    font-family: "Baskervville",sans-serif;
    font-weight: 600;
    font-size: 12px;
}
/*Contact Form*/
.contact-form .form-control{
    border: 1px solid #ddd;
    border-radius: 0;
    height: 45px;
    background-color: transparent;
}
.contact-form .form-control.message{
    height: 150px;
}
#form-messages{
    display: none;
}
#form-messages.alert-danger,
#form-messages.alert-success{
    display: block;
}
/*Google Map*/
#google_map{
    width: 100%;
    height: 350px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

/* ==========================================================================
   12.0 Blog Section
   ========================================================================== */
.blog-section{}
.left-sidebar .blog-items{
    border-right: none;
    border-left: 1px solid #ddd;
    padding-right: 0;
    padding-left: 10px;
}
.blog-post{}
.blog-post img{
    width: 100%;
    margin-bottom: 10px;
}
.blog-post img:hover{
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.20);
}
.blog-post .blog-content h3{
    font-weight: 700;
    font-size: 18px;
}
.blog-post .blog-content a{
    color: var(--text-color);
}
.blog-post .blog-content a:hover{
    opacity: 0.8;
}
span.date{
    font-family: "Baskervville",sans-serif;
    color: #999;
    font-weight: 700;
    font-size: 10px;
    display: block;
    margin-bottom: 5px;
}
.blog-post .blog-content .post-meta{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-color);
    letter-spacing: -0.2px
}
.blog-post .blog-content .post-meta:hover{
    opacity: 0.8;
    text-decoration: underline;
}

/*Single Post Style*/
.single-post{}
.single-post img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
    margin-bottom: 20px;
}
.single-post h2{
    font-weight: 800;
}
.single-post .meta-info{
    margin-bottom: 25px;
}
.single-post .meta-info span{
    font-family: "Baskervville",sans-serif;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    font-size: 12px;
    margin-right: 15px;
}
.single-post .meta-info a{
    font-weight: 800;
    color: #777;
}
.single-post .meta-info i{
    color: #777;
}

/*Social Share*/
.share-wrap{
    margin-top: 25px;
    margin-bottom: 50px;
    width: 100%;
}
.share-wrap h4{
    text-transform: uppercase;
    font-weight: 800;
    font-size: 14px;
}
.share-icon{
    display: inline-block;
}
.share-icon li{
    display: inline-block;
    margin-right: 10px;
}
.share-icon i{
    margin-right: 5px;
}
.share-icon li:nth-child(1) a{ background-color: #3B5998; }
.share-icon li:nth-child(2) a{ background-color: #1DCAFF; }
.share-icon li:nth-child(3) a{ background-color: #DB4A39; }
.share-icon li:nth-child(4) a{ background-color: #e4405f; }
.share-icon li:nth-child(5) a{ background-color: #0077B5; }
.share-icon li a{
    display: inline-block;
    font-size: 13px;
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    font-weight: 600;
}
.share-icon li a:hover{
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.20);
}

/*Comments Style*/
.comments-wrapper{
    width: 100%;
}
.comments-wrapper h4{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 800;
}

.comments-list {
	margin-top: 30px;
	position: relative;
    margin-bottom: 50px;
    
}
/*Lines Details*/
.comments-list:before {
	content: '';
	width: 2px;
	height: 100%;
	background: #eee;
	position: absolute;
	left: 32px;
	top: 0;
}
.comments-list:after {
	content: '';
	position: absolute;
	background: #eee;
	bottom: 0;
	left: 29px;
	width: 7px;
	height: 7px;
	border: 3px solid #dee1e3;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.reply-list:before, .reply-list:after {display: none;}
.reply-list li:before {
	content: '';
	width: 60px;
	height: 2px;
	background: #eee;
	position: absolute;
	top: 25px;
	left: -55px;
}
.comments-list li {
	margin-bottom: 15px;
	display: block;
	position: relative;
}
.comments-list li:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	width: 0;
}
.reply-list {
	padding-left: 88px;
	clear: both;
	margin-top: 15px;
}
/*Avatar*/
.comments-list .comment-avatar {
	width: 65px;
	height: 65px;
	position: relative;
	z-index: 99;
	float: left;
	border: 3px solid #FFF;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	overflow: hidden;
    margin-right: 10px;
}

.comments-list .comment-avatar img {
	width: 100%;
	height: 100%;
}
.reply-list .comment-avatar {
	width: 50px;
	height: 50px;
}
.comment-main-level:after {
	content: '';
	width: 0;
	height: 0;
	display: block;
	clear: both;
}
/*Comment List*/
.comments-list .comment-box {
	width: 870px;
	float: right;
	position: relative;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
	box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.comments-list .comment-box:before, .comments-list .comment-box:after {
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	display: block;
	border-width: 10px 12px 10px 0;
	border-style: solid;
	border-color: transparent var(--comment-bg);
	top: 8px;
	left: -11px;
}
.comments-list .comment-box:before {
	border-width: 11px 13px 11px 0;
	border-color: transparent var(--comment-border);
	left: -12px;
}
.reply-list .comment-box {
	width: 800px;
}
.comment-box .comment-head {
	background: var(--comment-bg);
	padding: 10px 12px;
	border-bottom: 1px solid var(--comment-border);
	overflow: hidden;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}
.comment-box .comment-head i {
	float: right;
	margin-left: 14px;
	position: relative;
	top: 2px;
	color: #A6A6A6;
	cursor: pointer;
	-webkit-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
}
.comment-box .comment-head i:hover {
	color: #03658c;
}
.comment-box .comment-name {
	color: var(--comment-name-color);
	font-size: 14px;
	font-weight: 700;
	float: left;
	margin-right: 10px;
}
.comment-box .comment-name a {
	color: var(--comment-name-color);
}
.comment-box .comment-head span {
	float: left;
	color: #999;
	font-size: 13px;
	position: relative;
	top: 1px;
}
.comment-box .comment-content {
	background: var(--comment-content-bg);
	padding: 12px;
	font-size: 15px;
	color: var(--text-color);
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
}
.comment-box .comment-name.by-author, .comment-box .comment-name.by-author a {color: #03658c;}
.comment-box .comment-name.by-author:after {
	content: 'autor';
	background: #03658c;
	color: #FFF;
	font-size: 12px;
	padding: 3px 5px;
	font-weight: 700;
	margin-left: 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/*Comment Form*/
.comment-form h4{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 800;
}
.comment-form .form-control{
    border: 1px solid #ddd;
    border-radius: 0;
    height: 45px;
    background-color: transparent;
}
.comment-form .form-control.message{
    height: 150px;
}
#form-messages{
    display: none;
}
#form-messages.alert-danger,
#form-messages.alert-success{
    display: block;
}

/* Pagination 
=============== */
.pagination_wrap{}
.pagination_wrap li{
    display: inline-block;
    margin: 0 5px;
}
.pagination_wrap li a{
    border: 1px solid #ddd;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    color: var(--text-color);
    font-weight: 600;
}
.pagination_wrap li a:hover{
    opacity: 1;
    text-decoration: none;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.20);
}
.pagination_wrap li a.active{
    background-color: var(--header-text-color);
    border: 1px solid var(--header-text-color);
    color: #fff;
}

/* ==========================================================================
   13.0 Footer Section
   ========================================================================== */
.footer-widget-section{
    background-color: var(--footer-background);
}
.footer-widget{}
.footer-widget h2 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    margin: 0;
    color: var(--footer-heading-color);
}
.footer-widget .sep{
    width: 60px;
    height: 4px;
    background: #e0e0e0 none repeat;
    margin-top: 15px;
    margin-bottom: 25px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.footer-widget .address{}
.footer-widget .address li{
    display: block;
    line-height: 30px;
    color: var(--footer-text-color);
    margin-bottom: 25px;
    padding-left: 50px;
    position: relative;
}
.footer-widget .address li i{
    font-size: 13px;
    color: #888;
    margin-right: 10px;
    width: 30px;
    text-align: center;
    height: 30px;
    line-height: 28px;
    border: 1px solid #888;
    position: absolute;
    left: 0;
    top: 0;
}
.footer-widget .address li a{
    color: var(--footer-text-color);
    font-family: "Baskervville", sans-serif;
    letter-spacing: inherit;
}

/*Social Icon*/
.social-icon{
    position: relative;
    display: inline-block;
}
.social-icon li{
    display: inline-block;
}
.social-icon li:not(:last-of-type){
    margin-right: 10px;
}
.social-icon li a{
    background-color: rgba(255,255,255,0.1);
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 2px;
    text-align: center;
    display: inline-block;
    color: #fff;
    font-size: 14px;
}
.social-icon li a:hover{
    opacity: 0.6;
}
.social-icon li.facebook a{ background-color: #3b5998; }
.social-icon li.twitter a{ background-color: #55acee; }
.social-icon li.instagram a{ background-color: #bd3381; }
.social-icon li.pinterest a{ background-color: #bd081c; }
.social-icon li.dribbble a{ background-color: #ea4c89; }

/*Copyright Text*/
.copyright-text{
    background-color: var(--footer-background);
    padding: 25px 0;
    border-top: 1px solid var(--footer-heading-color);
}
.copyright-text p{
    margin: 0;
    color: var(--footer-text-color);
}
/* ==========================================================================
   14.0 Scroll To Top
   ========================================================================== */
#scroll-to-top{
    background-color: var(--header-text-color);
    display: none;
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 14px;
    line-height: 45px;
    border-radius: 50%;
    color: var(--background-color);
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 999;
}
#scroll-to-top:hover{
    background-color: var(--link-hover-color);
    color: var(--background-color);
}