/* ------------------------------------------------
  Project:   Homesout - Home Guttering & Downspouts WordPress Theme
  Author:    ThemeHt
------------------------------------------------ */

/* ------------------------
    Table of Contents

  1. Variable
  2. General
  3. Background & Border Color
  4. Banner
  5. Title
  6. Video & Round Text
  7. Form Section
  8. Other
  9. Responsive
------------------------*/

:root {
  --themeht-primary-color: #FEBF02;
    --themeht-secondary-color: #F1503C;
    --themeht-body-color: #414D5B;
    --themeht-text-color: #0F0D25;
    --themeht-white-color: #FFFFFF;
    --themeht-bg-dark-color: #0C0A1F;
    --themeht-bg-light-color: #F3F3F3;
    --themeht-border-light-color: #E3E3E3;
  --themeht-typography-body-font-family: 'Inter', sans-serif;
  --themeht-typography-secondary-font-family: 'Saira', sans-serif;
}

/* ------------------------
    General
------------------------*/
body { font-family: var(--themeht-typography-body-font-family); overflow-x: hidden; font-size: 16px; line-height: 28px; font-weight: 500; color: var(--themeht-body-color); padding: 0; margin: 0; }
a { text-decoration: none; color: var(--themeht-text-color); }
a:hover, a:focus { color: var(--themeht-secondary-color); text-decoration: none; }
a { outline: none !important; }
p { margin-bottom: 0; line-height: 1.5; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--themeht-text-color); font-family: var(--themeht-typography-secondary-font-family); font-weight: 600; }
h1, .h1 { font-size: 70px; line-height: 80px; font-weight: 700; }
h2, h2 { font-size: 45px; line-height: 55px; font-weight: 700; }
h3, .h3 { font-size: 30px; line-height: 40px; }
h4, .h4 { font-size: 24px; line-height: 34px; }
h5, .h5 { font-size: 20px; line-height: 30px;}
h6, .h6 { font-size: 18px; line-height: 28px; }
ol, ul { margin-left: 0; }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-dark p { color: var(--themeht-white-color); }
.lead { font-size: 16px; font-weight: 500; color: var(--themeht-body-color); }
.text-primary { color: var(--themeht-primary-color) !important; }
.z-index-1 { z-index: 9; position: relative; }
.link-title { color: var(--themeht-text-color) }
.link-title:hover { color: var(--themeht-primary-color) }
.rounded, .card { border-radius: 0 !important; }
@media (min-width:1400px) {
  .elementor-section.elementor-section-boxed>.elementor-container { max-width: 1320px !important; }
}
.custom-sec-padding{padding-top: 100px; padding-bottom: 100px;}


/* ------------------------
Background & Border Color
------------------------*/
.bg-primary { background-color: var(--themeht-primary-color) !important; }
.bg-light { background-color: var(--themeht-bg-light-color) !important; }
.bg-dark { background-color: var(--themeht-bg-dark-color) !important; }
.bg-dark-2 { background-color: var(--themeht-bg-dark2-color) !important; }
.border-primary { border-color: var(--themeht-primary-color) !important; }
.border-light { border-color: var(--themeht-border-light-color) !important; }


/* ------------------------
  Banner
------------------------*/
.sub-banner { padding: 80px 0; background: var(--themeht-bg-light-color); }
.home.blog .blog-sidebar-page{display: none;}
.sub-banner h1 { font-size: 50px !important; line-height: 60px !important; margin-bottom: 20px; word-break: break-word; }
.breadcrumb { font-size: 20px; border-radius: 30px; background: var(--themeht-white-color); display: inline-block; padding: 15px 30px; margin: 0;}
.breadcrumb li{word-break: break-word;}
.main-banner h1 span { text-shadow: 0 0 80px rgba(255, 255, 255, .5); color: var(--themeht-white-color) !important; text-decoration: underline; text-decoration-style: wavy; text-decoration-thickness: 3px; text-decoration-color: var(--themeht-primary-color);}
.main-banner h1 { font-size: 100px; line-height: 115px; }
.main-banner p{font-size: 18px;  color: rgba(255,255,255,0.7); margin-bottom: 0;}
.elementor img { border-radius: 30px !important; }

.banner-effect { overflow: hidden !important; z-index: 9; }
.banner-effect:after { animation: grain 8s steps(10) infinite; background-image: url("../images/header-bg.png"); content: ""; height: 300%; left: -50%; opacity: 0.9; position: absolute; top: -100%; width: 300%; z-index: -1; }

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}


/* ------------------------
    Banner Slider
------------------------*/
.banner-slider .slider-img {background-size: cover; background-position: center center; background-repeat: no-repeat; position: absolute; left: 0; top: 0; width: 100%; height: 100%; right: 0;}
.banner-content { padding: 200px 0; position: relative; z-index: 9; }
.slider-img::before { position: absolute; content: ''; background-color: var(--themeht-bg-dark-color); width: 100%; height: 100%; top: 0; left: 0; opacity: 0.8; }
.banner-slider2 .slider-img::before { position: absolute; content: ''; background: rgb(0,25,22);
background: linear-gradient(90deg, rgba(0,25,22,1) 10%, rgba(255,255,255,0) 100%); width: 100%; height: 100%; top: 0; left: 0; }
.banner-content h1 span { color: var(--themeht-primary-color); }
.banner-content p { font-weight: 500; font-size: 17px; color: var(--themeht-text-color); }

.banner-slider h5 { position: relative; opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); }
.banner-slider h1 { position: relative; opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); }
.banner-slider p { position: relative; opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); }
.banner-slider .btn-box { position: relative; opacity: 0; -webkit-transition: all 1000ms ease; -moz-transition: all 100ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateY(80px); -moz-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); }
.banner-slider .swiper-slide-active h5 { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); transition-delay: 1000ms; }
.banner-slider .swiper-slide-active h1 { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); transition-delay: 1500ms; }
.banner-slider .swiper-slide-active p { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); transition-delay: 2000ms; }
.banner-slider .swiper-slide-active .btn-box { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); transition-delay: 2500ms; }
.banner-slider h1, .banner-slider p { color: var(--themeht-white-color); }
.banner-slider h1 span { color: var(--themeht-primary-color); }
.banner-slider h1{font-size: 90px; line-height: 100px;}
.banner-slider p{max-width: 80%;}

/* ------------------------
 Title
------------------------*/
.theme-title h6 { padding-left: 40px; font-weight: 500; margin-bottom: 15px; position: relative; display: inline-block; text-transform: uppercase; color: var(--themeht-primary-color); }
.theme-title h6:before { font-family: 'Line Awesome Free'; content: "\f621"; font-size: 35px; line-height: 1; font-weight: 900; color: var(--themeht-primary-color); top: -4px; position: absolute; left: 0; width: 35px; height: 35px; animation-name: spin; animation-duration: 5000ms; animation-iteration-count: infinite; animation-timing-function: linear; }
.bg-primary .theme-title h6, .bg-primary .theme-title h6:before, .bg-primary .theme-title h2, .bg-primary .theme-title p{color: var(--themeht-white-color);}


/* ------------------------
  Video & Round Text
------------------------*/
.center .round-text { margin-left: auto; margin-right: auto; }
.right .round-text { margin-left: auto; }
.round-text { position: relative; width: 180px; overflow: hidden; height: 180px; }
.round-text text { text-transform: uppercase; font-size: 14.2px; letter-spacing: 2px; font-weight: 600; fill: var(--themeht-text-color); }
.round-text svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-animation-name: rotate; -moz-animation-name: rotate; -ms-animation-name: rotate; -o-animation-name: rotate; animation-name: rotate; -webkit-animation-duration: 10s; -moz-animation-duration: 10s; -ms-animation-duration: 10s; -o-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; }
.text-btn-icon { font-size: 45px; color: var(--themeht-primary-color) !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.video-popup i { font-size: 26px; }
.elementor-widget-video-popup .round-text text { font-size: 14.5px; }
.main-banner .round-text { position: absolute; top: -250px; right:0; z-index: 9; background: var(--themeht-primary-color); border-radius: 50%; }
.main-banner .round-text .text-btn-icon {color: var(--themeht-text-color) !important; }


/* ------------------------
 Form Section
------------------------*/
input[type="submit"].subscribe-btn,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-search__button {
	background-color: var(--themeht-white-color);
	color: var(--themeht-text-color);
	border-radius: 30px;
	border: 1px solid var(--themeht-text-color);
	padding: 12px 30px;
	height: 100%;
	font-size: 17px;
	line-height: inherit;
	font-weight: 600;
}


.bg-dark input[type="submit"].subscribe-btn,
.bg-dark input[type="button"],
.bg-dark input[type="reset"],
.bg-dark input[type="submit"],
.bg-dark .wp-block-search__button {
	background-color:var(--themeht-bg-dark-color);
  border-color:var(--themeht-primary-color);
	color: var(--themeht-white-color);
}

.bg-dark input[type="submit"].subscribe-btn:hover,
.bg-dark input[type="button"]:hover,
.bg-dark input[type="reset"]:hover,
.bg-dark input[type="submit"]:hover,
.bg-dark .wp-block-search__button:hover {
	background-color:var(--themeht-primary-color);
  border-color:var(--themeht-primary-color);
  color:var(--themeht-white-color);
  transform: scale(1.06)
}

input[type="submit"].subscribe-btn:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-search__button:hover {
	background-color:var(--themeht-primary-color);
  border-color:var(--themeht-primary-color);
  color:var(--themeht-text-color);
  transform: scale(1.06)
}


input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	border: none;
	padding: .375rem 15px;
	width: 100%;
	height: 55px;
	color: var(--themeht-body-color);
	border-radius: 30px;
	font-size: 16px;
	font-weight: 600;
	box-shadow: 0 10px 30px 5px rgb(115 113 255 / 6%);
}

textarea {
	height: 100px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: var(--themeht-body-color);
	border: 1px solid var(--themeht-bg-dark-color) !important;
}

.wpcf7-form-control,
select {
	border: none;
	box-shadow: 0 10px 30px 5px rgb(115 113 255 / 6%);
}

.wpcf7-form-control.wpcf7-select,
select {
	width: 100%;
	padding: .550rem 15px;
	background-color: var(--themeht-white-color);
	height: 55px;
	color: var(--themeht-body-color);
	font-size: 16px;
	font-weight: 600;
	border-radius: 30px;
}

.wpcf7-form-control.wpcf7-textarea {
	height: 100px;
}

::-webkit-input-placeholder {
	color: var(--themeht-body-color) !important;
	opacity: 1;
}

:-moz-placeholder {
	color: var(--themeht-body-color) !important;
	opacity: 1;
}

::-moz-placeholder {
	color: var(--themeht-body-color) !important;
	opacity: 1;
}

:-ms-input-placeholder {
	color: var(--themeht-body-color) !important;
	opacity: 1;
}

:focus-visible {
	outline: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url(../../assets/images/down-arrow.svg);
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.wpcf7-form-control-wrap { display: block; }
.wpcf7-not-valid-tip { position: absolute; right: 0; font-size: 0.8rem; bottom: -25px; }
 
/* ------------------------
Other
------------------------*/
.contact-page .elementor-widget .elementor-icon-list-item { margin-bottom: 20px !important; }
.contact-page .elementor-widget .elementor-icon-list-icon i { width: auto !important; font-size: 40px !important; line-height: 1; color: var(--themeht-primary-color) !important; }
.contact-page .elementor-widget-icon-list .elementor-icon-list-text { margin-left: 10px; color: var(--themeht-body-color) !important; }
.legal-page h5 { margin-bottom: 0; color: var(--themeht-primary-color); }
.legal-page p { margin-bottom: 0; }
.elementor-widget .center { text-align: center; }
.elementor-widget .right { text-align: right; }
.page { margin: 0; }
.page-content { margin-top: 100px; margin-bottom: 100px; }
.elementor-default .page-content { margin-top: -1.5em; margin-bottom: 0; }
.error-page-search label { min-width: 450px; }
.search-page article { margin-bottom: 30px; }
.search-page article:last-child { margin-bottom: 0; }
.search-content-page { position: relative; box-shadow: 0 10px 30px 5px rgb(115 113 255 / 6%); padding: 30px; border-radius: 30px; }
.post-thumbnail { margin-top: 20px; display: block; }


.pagination .page-numbers, .page-links .post-page-numbers { border: 1px solid var(--themeht-border-light-color); width: 40px; height: 40px; display: inline-block; text-align: center; line-height: 40px; border-radius: 10px; }
.pagination .page-numbers:hover, .pagination .page-numbers.current, .page-links .post-page-numbers:hover, .page-links .post-page-numbers.current { border: 1px solid var(--themeht-primary-color); background-color: var(--themeht-primary-color); color: var(--themeht-white-color); }
.elementor-widget.elementor-widget-text-editor { font-weight: 400; color: var(--themeht-body-color) !important; font-family: var(--themeht-typography-body-font-family) !important; }
.wp-block-cover-image-text, .wp-block-cover-text, section.wp-block-cover-image h2 { color: var(--themeht-white-color) !important; }
p { margin: 0 0 25px; }
.wp-block-cover, .wp-block-cover-image { position: relative; background-position: 50%; min-height: 430px; display: flex; justify-content: center; align-items: center; padding: 1em; box-sizing: border-box; margin-bottom: 30px; border-radius: 30px; }
.wp-block-button { margin: 50px 0; }
.alignleft { margin: 5px 20px 20px 0 !important; }
.alignright { margin: 5px 0 20px 20px !important; clear: both; }
.lead p, .elementor-widget-list_style p, .elementor-widget-list_style_two p, .elementor-widget-title p, .elementor-widget-feature p, .elementor-tab-content p { margin-bottom: 0; }
.wp-block-group.has-background { padding: 25px !important; margin-bottom: 15px !important; border-radius: 30px; }
.wp-block-quote.is-large cite, .wp-block-quote.is-large footer, .wp-block-quote.is-style-large cite, .wp-block-quote.is-style-large footer { font-size: 16px !important; text-align: left; }
.has-large-font-size { line-height: 40px !important; }
.wp-block-media-text.has-media-on-the-right { margin-bottom: 25px; }
.wp-block-image { margin: 0 0 1em; }
.wp-block-archives select, .wp-block-categories select { margin-bottom: 20px; }
.post-card .wp-block-gallery .blocks-gallery-image figure, .post-card .wp-block-gallery .blocks-gallery-item figure { position: relative; overflow: hidden; border-radius: 30px; }
.post-card .wp-block-gallery .blocks-gallery-image figcaption, .post-card .wp-block-gallery .blocks-gallery-item figcaption { position: absolute; font-size: 13px; font-weight: 400; overflow: hidden; padding: 10px 0; bottom: -100%; width: 100%; color: var(--themeht-text-color); background: rgba(255, 255, 255, .7); white-space: nowrap; text-indent: 10px; text-overflow: ellipsis; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.post-card .wp-block-gallery .blocks-gallery-image:hover figcaption, .post-card .wp-block-gallery .blocks-gallery-item:hover figcaption { bottom: 0; }
.wp-block-embed iframe { width: 100%; }
table tbody th, table tbody td { border-color: var(--themeht-border-light-color) !important; border: 1px solid; padding: 5px 10px; }
.gallery-caption { padding-top: 0.53em; padding-bottom: 0.53em; }
.comment-content table tbody td a { color: var(--themeht-primary-color) }
.comment-content > ul, .comment-content > ol { margin-bottom: 30px; }
.wp-block-image.alignfull img, .wp-block-image.alignwide img, .wp-block-image img, .wp-block-media-text__media img, .wp-block-media-text__media video, .wp-block-media-text, .wp-block-code, .wp-block-preformatted,
pre.wp-block-verse, pre, .post-card img, .comment-content p img,
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body, .wp-block-cover.has-background-dim:not(.has-background-gradient):before, .wp-block-video video{ border-radius: 30px; }
blockquote.wp-block-quote a { color: var(--themeht-white-color); }
blockquote.wp-block-quote a:hover { color: var(--themeht-white-color); text-decoration: underline !important; }
.wp-block-button__link:hover { background: var(--themeht-primary-color); color: var(--themeht-white-color); }
.wp-block-preformatted { margin-top: 10px; }
.mejs-container { margin-bottom: 20px; }
embed, iframe, object { width: 100%; border-radius: 30px; }
.wp-block-embed .twitter-tweet iframe { border-radius: 0; }
.wp-block-calendar { padding-bottom: 30px; }
.wp-block-calendar .wp-calendar-nav-prev { float: left; }
.wp-block-calendar .wp-calendar-nav-next { float: right; }








/* ------------------------
 Responsive
------------------------*/

@media (max-width:1400px) {
    .navbar-nav .nav-item { margin: 0 10px; }
}

@media (min-width:1200px) {
    .themeht-sidebar { padding-left: 50px; }
}

@media (max-width:1200px) {
    .header-number { display: none; }
    .main-banner h1 { font-size: 80px; line-height: 95px; }
    
    .header-top li {padding: 0 10px;}
    .header-top .social-icons{display: none;}
}

@media (max-width:991.98px) {
    h2, .h2 { line-height: 55px !important; font-size: 45px !important; }
    .navbar-nav .nav-item { margin: 0; }
    .elementor-widget-project-box .row [class*='col-']:first-child { margin-top: 0 }
    .elementor-widget-project-box .row [class*='col-'] { margin-top: 80px }
    .main-banner h1 { font-size: 62px; line-height: 75px; }
    .main-banner p { font-size: 16px; }
    .main-banner .round-text { top: -220px; right: 0; }
    .logo img { max-height: 70px; }
    #follow-cursor, #main-cursor{display: none;}
    .sub-banner h1 {font-size: 40px !important; line-height: 50px !important;}
    .banner-content { padding: 150px 0; }
    .banner-slider .swiper-button-next, .banner-slider .swiper-button-prev { top: 93%; left: 20px; right: auto; }
    .banner-slider .swiper-button-next { left: 80px; }
    .banner-slider h1{font-size: 70px; line-height: 80px;}
}
@media (max-width:767.98px) {
    h1 { font-size: 50px !important; line-height: 60px !important; }
    h2, .h2 { line-height: 42px !important; font-size: 32px !important; }
    .admin-bar #header-wrap.fixed-header { top: 0; }
    .main-banner h1 { font-size: 40px; line-height: 52px; }
    .service-swiper .swiper-button-next, .service-swiper .swiper-button-prev { position: inherit !important; right: inherit !important; left: inherit !important; margin-top: 0; margin-left: 80px; float: left; }
    .service-swiper .swiper-button-prev { margin-left: -100px; }
    .service-item .service-img { padding-right: 0; height: auto; }
    .service-desc { padding: 30px 20px; margin-top: 0; width: 100%; }
    .service-item .service-icon { top: 0; right: 0; left: auto; width: 90px; height: 90px; }
    .portfolio-item h3 { font-size: 28px; line-height: 38px; }
    .post-comment li.comment .comment-body, .post-comment li.trackback .comment-body, .post-comment li.pingback .comment-body { padding-left: 20px; padding-top: 110px;}
    .comments-box ol, .comments-box ul{margin-left:0; padding-left:0;}
    .sub-banner h1 {font-size: 30px !important; line-height: 40px !important;}
    .breadcrumb { font-size: 16px; padding: 15px 20px;}
    .header-right{display: none;}
    .team-member .theme-social { padding: 10px 20px; }
    .banner-slider p{max-width: 100%;}
}
@media (max-width:576.98px) {
    .site-header .header-btn { display: none !important; }
    .testimonial-box p { font-size: 18px; }
    .feature-box-2 { display: block; }
    .feature-box-2 .feature-icon {margin-right: 0; margin-bottom: 15px;}
    .navbar-toggler{margin-right: 0;}
}
@media (max-width:1200px) {
    .container { max-width: inherit; }
}