/*
Theme Name: Eco Sound
Author: Kubiak Creative
Author URI: https://kubiakcreative.com
Description: Custom Theme - Requires The7 theme to be installed for base structure.
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/
:root {
    --mid-green:    #376969;
    --dark-green:   #385c4f;
    --light:        #f9efe1;
    --stone:        #c99e70;
    --green:        #00be96;
    --white:        #ffffff;
}


.midgreen   { color: var(--mid-green) !important}
.darkgreen  { color: var(--dark-green) !important}
.green      { color: var(--green) !important}
.stone, .stone h2     { color: var(--stone) !important}
.light, .light h1, .light h2, .light h3     { color: var(--light) !important}
.white      { color: var(--white) !important}


.bg-midgreen   { background-color: var(--mid-green) !important}
.bg-darkgreen  { background-color: var(--dark-green) !important}
.bg-green      { background-color: var(--green) !important}
.bg-stone      { background-color: var(--stone) !important}
.bg-light      { background-color: var(--light) !important}
.bg-white      { background-color: var(--white) !important}

.white-text, .white-text p, .white-text p a, .white-text h1, .white-text h2, .white-text h3, .white-text h4, .white-text h5, .white-text h6, .white-text blockquote {
    color: var(--white) !important;
}

/* Typography */
h1, h2, h3 {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 1.3 !important;
}
h1 {
    font-size: 40px !important;
    line-height: 1 !important;
}
h2 {
    font-size: 40px !important;
    line-height: 1 !important;
}
#hero h2 {
    font-size: 20px !important;
    line-height: 1 !important;

}
h3 a { color: inherit !important; font-size: 20px !important; line-height: 1 !important;}
a:hover { color: var(--green) !important}

.subtitle {
    color: var(--green) !important;
    font-size: 22px !important;
}
.text-light {font-weight: 400 !important;}
.subtitle {
    margin-bottom: 10px !important;
}
.eco-accordion .subtitle {
    margin-left: 15px;
}
.eco-accordion .subtitle p {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--green) !important;
}

.eco-accordion p, .eco-accordion .vc_tta-title-text {
    color: var(--dark-green) !important;
}
.vc_tta-title-text {
    font-size: 30px !important;
}

@media (min-width: 768px) {
    h1 {
    font-size: 80px !important;
    line-height: 1 !important;
}
h2 {
    font-size: 50px !important;
    line-height: 1 !important;
}

}

@media (min-width: 992px) { 
    h1 {
    font-size: 120px !important;
    line-height: 1 !important;
}
h2 {
    font-size: 70px !important;
    line-height: 1 !important;
}
#hero h2 {
    font-size: 20px !important;
    line-height: 1 !important;

}
h4 {
    font-size: 18px !important;
    line-height: 1 !important;
    color: var(--green) !important;

}
h3 a { color: inherit !important; font-size: 33px !important; line-height: 1 !important;}

.subtitle {

    font-size: 34px !important;
}

}


/* accordion */
.vc_tta.vc_tta-style-flat .vc_tta-panel-heading {
    border-bottom: 5px solid #f9efe1 !important;
}

.vc_tta.vc_tta-style-flat .vc_tta-panel-body {
    border-bottom: 10px solid #385c4f !important;
}


.vc_tta .vc_tta-controls-icon {
    height: 20px !important;
    width: 20px !important;
}

.vc_tta .vc_tta-controls-icon.vc_tta-controls-icon-chevron:before {
    transform: rotate(-45deg) translate(-25%, -25%) !important;
    border-width: 0 4px 4px 0 !important;
}
.vc_tta .vc_active .vc_tta-controls-icon.vc_tta-controls-icon-chevron:before {
    transform: rotate(45deg) translate(-25%, -25%) !important;
}
.vc_tta-color-white.vc_tta-style-flat .vc_tta-controls-icon:before {
    border-color: #385c4f !important;
}
/* table */


.column-1{
   background-color: #385c4f !important;
   color: #ffffff !important;
 }
  .column-2{
   background-color: rgba(56, 91, 79, 0.1)!important;
   color: #385c4f !important;
 }
.column-3{
   background-color: rgba(56, 91, 79, 0.2)!important;
   color: #385c4f !important;
 }
 .column-4{
   background-color: rgba(56, 91, 79, 0.3)!important;
   color: #385c4f !important;
 }
 .column-5{
   background-color: rgba(56, 91, 79, 0.4)!important;
   color: #385c4f !important;
 }
  .column-6{
   background-color: rgba(56, 91, 79, 0.5)!important;
   color: #385c4f !important;
 }
 
.content th {
  background-color: #385c4f !important;
   color: #ffffff !important;
}


/* Re-order topbar 
.masthead {
            display: flex  !important;
            flex-direction: column  !important;
        }

        .mobile-header-bar, .header-bar {
            order: 1  !important;
        }

        .top-bar {
            order: 2  !important;
        }*/

/* Padding*/

.row-padding {
    padding-top: 0px;
    padding-bottom: 0px;
}
.row-padding-text {
    padding-top: 55px;
    padding-bottom: 30px;
}

.padding-100 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;

}

@media (min-width: 992px) { 
    .padding-100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}
.padding-x-100  {
    padding-left: 100px !important;
    padding-right: 100px !important;

}
.row-padding {
    padding-top: 48px;
    padding-bottom: 100px;
}
}
@media only screen and (max-width: 1200px) and (min-width: 778px)  {
    .wpb_text_column, .padd-tablet {
    padding-left: 35px;
    padding-right: 35px;
}
.btn-margin {margin-left: 35px;}
}


/* Header slider styling */

.header-title {font-size: 60px}
.btn-main {}
.wp-block-button__link {
    background-color: inherit !important;
}

.side-header.dividers .main-nav > li {
    margin-left: 30px;
    margin-right: 50px;
}

/*.branding a img, .branding img {
    width: 70%;
    height: 70%;
}*/

/* Footer */
.widget_nav_menu a{
    font-size: 20px !important;
    color: #385c4f !important;
    font-weight: 700 !important;
}
.widget_nav_menu a:hover{
    font-size: 20px !important;
    color: #00be96!important;

}

.footer .menu li {
    border: none !important;
    margin: 0;
    padding: 0;
}

.footer img {
    height: 100px !important;
    width: auto !important;
}
/* Nav */
.side-header .branding {
    background-color: #ffffff;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 35px;
    padding-left: 30px;
}
/*.sticky-top-line-on .header-bar {
	min-height: 100px !important;	
}*/
#primary-menu li .menu-text,
#mobile-menu li .menu-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

#primary-menu li .small-above,
#mobile-menu li .small-above {
    font-size: 18px;
    color: #ffffff;
    line-height: 1.1;
}

#primary-menu li .menu-item-text,
#mobile-menu li .menu-item-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* MOBILE header + logo sizing */
@media (max-width: 768px) {

  /* Reduce header padding so the whole bar is shorter */
  .header-bar {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Control the logo container */
  .header-bar .branding {
    display: flex;
    align-items: center;
  }

  /* Your actual logo <img> tag */
  .mobile-header-bar .mobile-branding img {
    max-height: 80px !important;   /* ↓ Adjust this number to make logo smaller/bigger */
    width: auto !important; 
    height: auto !important; 
  }

  /* Optional: reduce spacing on left/right widgets */
  .top-line-left,
  .top-line-right {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Make sure the menu toggle lines don't blow up height */
  .menu-toggle {
    padding: 0;
  }
}


/* Form */

.contact-form input{
    margin-bottom: 30px !important;
    border: 2px solid #f9efe1 !important;
}
.dt-btn{
    border: 0px !important;
    border-radius: 8px !important;
    padding: 6px 60px 6px 60px;
}

label p{
    padding-bottom: 100px !important;
}

/* Default: show */
.hide-desktop {
    display: block !important;
}

/* Desktop only: hide */
@media (min-width: 993px) {
    .hide-desktop {
        display: none !important;
    }
}
/* Default: show */
.mobile-only {
display: inline-block !important;
margin-top: 15px;

}

/* Mobile screens only */
@media (min-width: 778px) {
    .mobile-only {
        display: none !important;
    }
}