/* Base CSS */

@font-face {
   font-family: 'Merriweather';
   src: url('../fonts/Merriweather-Heavy.eot');
   src: url('../fonts/Merriweather-Heavy.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Merriweather-Heavy.woff2') format('woff2'),
      url('../fonts/Merriweather-Heavy.woff') format('woff'),
      url('../fonts/Merriweather-Heavy.ttf') format('truetype');
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Merriweather';
   src: url('../fonts/Merriweather-Bold.eot');
   src: url('../fonts/Merriweather-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Merriweather-Bold.woff2') format('woff2'),
      url('../fonts/Merriweather-Bold.woff') format('woff'),
      url('../fonts/Merriweather-Bold.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Merriweather';
   src: url('../fonts/Merriweather-BoldItalic.eot');
   src: url('../fonts/Merriweather-BoldItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Merriweather-BoldItalic.woff2') format('woff2'),
      url('../fonts/Merriweather-BoldItalic.woff') format('woff'),
      url('../fonts/Merriweather-BoldItalic.ttf') format('truetype');
   font-weight: bold;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Merriweather';
   src: url('../fonts/Merriweather.eot');
   src: url('../fonts/Merriweather.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Merriweather.woff2') format('woff2'),
      url('../fonts/Merriweather.woff') format('woff'),
      url('../fonts/Merriweather.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Merriweather';
   src: url('../fonts/Merriweather-Italic.eot');
   src: url('../fonts/Merriweather-Italic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Merriweather-Italic.woff2') format('woff2'),
      url('../fonts/Merriweather-Italic.woff') format('woff'),
      url('../fonts/Merriweather-Italic.ttf') format('truetype');
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Merriweather';
   src: url('../fonts/Merriweather-HeavyItalic.eot');
   src: url('../fonts/Merriweather-HeavyItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Merriweather-HeavyItalic.woff2') format('woff2'),
      url('../fonts/Merriweather-HeavyItalic.woff') format('woff'),
      url('../fonts/Merriweather-HeavyItalic.ttf') format('truetype');
   font-weight: 900;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'Merriweather';
   src: url('../fonts/Merriweather-Light.eot');
   src: url('../fonts/Merriweather-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Merriweather-Light.woff2') format('woff2'),
      url('../fonts/Merriweather-Light.woff') format('woff'),
      url('../fonts/Merriweather-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Merriweather';
   src: url('../fonts/Merriweather-LightItalic.eot');
   src: url('../fonts/Merriweather-LightItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Merriweather-LightItalic.woff2') format('woff2'),
      url('../fonts/Merriweather-LightItalic.woff') format('woff'),
      url('../fonts/Merriweather-LightItalic.ttf') format('truetype');
   font-weight: 300;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'ChunkFive Print';
   src: url('../fonts/ChunkFivePrint.eot');
   src: url('../fonts/ChunkFivePrint.eot?#iefix') format('embedded-opentype'),
      url('../fonts/ChunkFivePrint.woff2') format('woff2'),
      url('../fonts/ChunkFivePrint.woff') format('woff'),
      url('../fonts/ChunkFivePrint.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'ChunkFive';
   src: url('../fonts/ChunkFive.eot');
   src: url('../fonts/ChunkFive.eot?#iefix') format('embedded-opentype'),
      url('../fonts/ChunkFive.woff2') format('woff2'),
      url('../fonts/ChunkFive.woff') format('woff'),
      url('../fonts/ChunkFive.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'ChunkFive';
   src: url('../fonts/ChunkFive-Roman.eot');
   src: url('../fonts/ChunkFive-Roman.eot?#iefix') format('embedded-opentype'),
      url('../fonts/ChunkFive-Roman.woff2') format('woff2'),
      url('../fonts/ChunkFive-Roman.woff') format('woff'),
      url('../fonts/ChunkFive-Roman.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'ChunkFive Print';
   src: url('../fonts/ChunkFivePrint_1.eot');
   src: url('../fonts/ChunkFivePrint_1.eot?#iefix') format('embedded-opentype'),
      url('../fonts/ChunkFivePrint_1.woff2') format('woff2'),
      url('../fonts/ChunkFivePrint_1.woff') format('woff'),
      url('../fonts/ChunkFivePrint_1.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}



* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

a {
   text-decoration: none;
   transition: all .3s;
}

button {
   transition: all .3s;
}

ul {
   margin: 0;
   padding: 0;
}

li {
   list-style-type: none;
}

input:focus,
select:focus,
textarea:focus {
   outline: none;
   box-shadow: none;
}

body {
   font-family: 'Merriweather';
}

:root {
   --steelblue: #237091;
   --orange: #E65330;
   --orange2: #D9694E;
   --cream: #F5F0E7;
   --green: #32A38C;
   --light-green: #DEE8D0;
   --light-pink: #C76D78;
   --yellow: #EEBB16;
}
.orange-bg {
   background-color: var(--orange);
}
.orange-bg2 {
   background-color: var(--orange2);
}
.yellow-bg {
   background-color: var(--yellow);
}
.pink-bg {
   background-color: var(--light-pink);
}
.section-title {
   margin-bottom: 50px;
}
.section-title .subtitle {
   gap: 12px;
   color: var(--green);
   margin-bottom: 24px;
}
.section-title .title {
   font-size: 112px;
   line-height: 1;
   color: var(--steelblue);
   font-family: 'ChunkFive Print';
}
.section-title .title span {
   color: var(--orange);
}
.para-style {
   font-size: 18px;
   line-height: 30px;
}
.theme-btn {
   display: inline-block;
   font-size: 18px;
   font-weight: 700;
   color: #fff;
   padding: 15px 50px;
   border-radius: 3px;
   border: 2px solid #000;
   background-color: var(--steelblue);
   filter: drop-shadow(4px 4px 0 #000000);
   gap: 12px;
}
.theme-btn:hover {
   background-color: var(--orange);
}
/* Base CSS End */

/* header area start */
.header-area {
   z-index: 99;
   margin-top: 50px;
}

.header-wrapper {
   padding: 8px 35px;
   background-image: url('../img/header-bg.jpg');
   background-size: cover;
   border: 2px solid #000;
   filter: drop-shadow(6px 6px 0 #000000);
}

.logo img {
   max-width: 180px;
}

.header-nav {
   font-family: 'ChunkFive';
   gap: 50px;
}

.header-nav-menu {
   gap: 30px;
}

.header-nav-menu li a {
   font-size: 20px;
   color: var(--steelblue);
}

.header-nav-menu li a.active,
.header-nav-menu li a:hover {
   color: var(--orange);
}

.header-nav-menu li .star-icon {
   width: 19px;
}

.search-btn img {
   width: 28px;
}

.header-right {
   gap: 70px;
}

.header-social {
   gap: 20px;
}

.social-icon {
   width: 48px;
   height: 48px;
   border: 2px solid #000;
   filter: drop-shadow(3px 3px 0 #000);
   background-color: var(--cream);
   padding: 8px;
}

.social-icon img {
   max-width: 100%;
   transition: all .3s ease-in-out;
}
.social-icon.facebook img {
   width: 14px;
}
.social-icon.instagram img {
   width: 25px;
}
.social-icon:hover {
   background-color: var(--orange);
}

.social-icon:hover img {
   filter: brightness(99);
}

/* offcanvas menu start */
.menu-btn svg {
   width: 28px;
   height: 28px;
   fill: var(--stealblue)
}
.offcanvas-nav-menu li a {
	padding: 10px 0;
	border-bottom: 2px solid var(--steelblue);
}
/* offcanvas menu end */

/* header area start */

/* hero area start */
.hero-area {
   padding: 180px 0 50px;
   background-color: var(--orange);
}
.hero-wrapper {
	padding: 100px 0 80px 55px;
	background-color: var(--steelblue);
	border: 2px solid #000;
	filter: drop-shadow(6px 6px 0 #000);
}
.hero-title {
   width: 580px;
   height: 490px;
   font-family: 'chunkFive';
   padding-top: 100px;
}
.hero-title span {
   font-size: 60px;
   line-height: 1;
   color: var(--orange);
   margin-bottom: 9px;
}
.hero-title h1 {
   font-size: 47px;
   color: var(--steelblue);
   max-width: 320px;
   margin: auto;
   filter: drop-shadow(3px 3px 0 rgba(230, 83, 48, 0.49));
   text-transform: uppercase;
}
.hero-title-bg {
   z-index: -1;
}
.hero-wrapper-bg {
	object-position: right;
}

/* hero area end */

/* welcome area start */
.welcome-area {
   padding: 64px 0 95px;
   background-image: url('../img/texture-bg-1.jpg');
   background-size: cover;
}
.welcome-area-wrapper {
   max-width: 1170px;
}
.welcome-area-wrapper .row {
   --bs-gutter-x: 45px;
}
.welcome-thumb {
   border: 2px solid #000;
   filter: drop-shadow(8px 8px 0 #000);
   margin-left: 15px;
}
.welcome-thumb img {
   transition: all 1s ease-in-out;
}
.welcome-thumb:hover .welcome-thumb-img {
   transform: scale(1.1);
}
.dots-shape {
   width: 225px;
   height: 225px;
}
.welcome-right .dots-shape {
   right: -130px;
   bottom: -47px;
   z-index: -1;
}
.welcome-area .dots-shape.one {
   top: 108px;
   left: -56px;
}
.welcome-area .dots-shape.two {
   top: 335px;
   left: -56px;
}
.welcome-area .dots-shape.three {
   top: 200px;
   right: -100px;
}
/* welcome area end */

/* tools area start */
.tools-area {
   padding: 55px 0 90px;
   background-image: url('../img/texture-bg-2.jpg');
   background-size: cover;
}

.tools-area-title {
   gap: 28px;
   font-family: 'ChunkFive';
   width: max-content;
}
.tools-area-title span {
   font-size: 59px;
   color: #F2EEE6;
   padding: 10px 35px 5px;
   line-height: 1;
   min-width: 330px;
   border: 2px solid #000;
   filter: drop-shadow(10px 10px 0 var(--yellow));
}
.tools-area-title span.yellow-bg {
   filter: drop-shadow(10px 10px 0 var(--steelblue));
}
.tools-area-title .star-shape {
   width: 105px;
   top: -50px;
   right: -65px;
   z-index: -1;
}
.tools-article {
   padding: 50px;
}
.tools-article-container:nth-child(even) .tools-article {
   border: 2px solid #000;
   filter: drop-shadow(6px 6px 0 #000);
}
.article-thumb {
   width: 53%;
   border: 2px solid #000;
   filter: drop-shadow(8px 8px 0 #000);
   border-radius: 30px;
   overflow: hidden;
}
.tools-article-container.one .article-thumb .play-video {
	background-color: rgba(0, 0, 0, 0.2);
}
.article-content {
   width: 44%;
}
.play-icon {
	width: 200px;
}
.article-title {
	font-size: 46px;
	color: #F3EFE7;
	font-weight: 900;
	margin-bottom: 20px;
	filter: drop-shadow(3px 3px 0 #82C9BB);
}
.article-desc p {
   color: #DFEBE8;
}
.article-desc {
   margin-top: 20px;
}
.btn-wrapper {
   gap: 35px;
}
.btn-green {
   color: var(--green);
   background-color: var(--light-green);
}
.btn-green:hover {
   color: #fff;
}
.btn-green2 {
   background-color: var(--green);
}
.btn-orange {
   background-color: #D35244;
}
.btn-orange:hover {
   background-color: var(--steelblue);
}
.tools-article-container.two .star-shape {
	top: -73px;
	left: -47px;
	width: 120px;
}
.tools-article-container.three .star-shape {
	bottom: 40px;
	right: -150px;
	width: 120px;
}

/* tools area v2 start */
.tools-area-2 .tools-area-title {
	margin-bottom: 80px;
}

.tools-area-2 .tools-article {
	padding: 35px;
	gap: 50px;
	filter: drop-shadow(7px 7px 0 #000);
}
.tools-area-2 .article-title {
	font-size: 36px;
	color: #171717;
}
.tools-area-2 .article-desc p {
	color: #171717;
	margin-bottom: 35px;
}
.tools-area-2 .tools-article.one .play-video {
   background-color: rgba(0, 0, 0, 0.2);
}
.tools-area-2 .play-video .play-icon {
   width: 160px;
}
.tools-area-2 .tools-article-wrapper .row {
	--bs-gutter-x: 45px;
	--bs-gutter-y: 45px;
}
.tools-area-2 .tools-article-container.one .star-shape {
	bottom: -30px;
	left: -110px;
	width: 130px;
}
.tools-area-2 .tools-article-container.two .star-shape {
	width: 130px;
	top: 50%;
	transform: translateY(-50%);
	left: auto;
	right: -110px;
}
.tools-area-2 .tools-article-container.four .star-shape {
	width: 130px;
	bottom: -20px;
	right: -180px;
}
/* tools area v2 end */

/* tools area end */

/* testimonial area start */
.testimonial-area {
   padding: 55px 0;
   background-image: url('../img/texture-bg-1.jpg');
   background-size: cover;
}
.testimonial-area-wrapper {
	padding: 44px 0 30px;
	border: 2px dashed #605030;
	filter: drop-shadow(1px 2px 0 #fff);
}
.testimoinial-area-title, .testimonial-container {
   max-width: 1170px;
}
.testimoinial-slider-container {
   padding-right: 6px;
}
.testimonial-slider-wrapper {
   padding-bottom: 30px;
}
.testimonial {
   padding: 60px 40px;
   background-color: #87D12C;
   border: 2px solid #000;
   border-radius: 4px;
   filter: drop-shadow(6px 6px 0 #000);
}
.testimonial-title {
   width: max-content;
   margin-bottom: 45px;
}
.testimonial-title .title {
	font-size: 48px;
	color: #F2EEE6;
	padding: 15px 35px 11px;
	line-height: 1;
	border: 2px solid #000;
	filter: drop-shadow(10px 10px 0 var(--yellow));
	display: inline-block;
	background-color: var(--orange);
	font-family: 'chunkFive';
}
.qoute-icon {
   width: 80px;
   height: 80px;
   background-color: #131313;
   left: -56px;
   top: -23px;
}
.testimonial-desc {
   font-size: 20px;
   line-height: 31px;
   font-weight: 700;
   font-style: italic;
}
.swiper-pagination {
   padding-bottom: 1px;
}
.swiper-pagination-bullet {
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background-color: #CFC8BA;
	opacity: 0.39 !important;
	transition: all .3s;
	margin: 0 3px !important;
}
.swiper-pagination-bullet:hover, .swiper-pagination-bullet-active {
   opacity: 1 !important;
}
.testimonial-container {
	padding-top: 45px;
}
.testimonial-container .dots-shape {
   width: 180px;
   height: 180px;
}
.testimonial-container .dots-shape.one {
	left: -160px;
}
.testimonial-container .dots-shape.two {
	right: -130px;
}
/* testimonial area end */

/* cta area start */
.cta-area {
	padding: 80px 0;
	background-image: url('../img/texture-bg-3.jpg');
	background-size: cover;
   border-top: 2px solid #000;
}

.cta-title {
   font-size: 36px;
   color: #171717;
   font-weight: 900;
   max-width: 420px;
   filter: drop-shadow(3px 3px 0 #BECEA8);
}
.cta-title span {
   color: var(--orange);
}
.cta-wrapper {
   gap: 20px;
}
.cta-form {
   gap: 10px;
}
.input-field {
   font-size: 18px;
   padding: 20px 24px;
   border: 2px solid #000;
   border-radius: 4px;
}
.form-input.name-input {
   width: 35%;
}
.form-input.email-input {
   width: 59%;
}
.form-input.email-input input {
	padding-right: 170px;
}
.cta-form .form-btn {
   right: 16px;
   top: 10px;
   font-size: 16px;
	padding: 10px 30px;
}
/* cta area end */

/* footer area start */
.footer-area {
   background-color: #171717;
}
.footer-wrapper {
	max-width: 1170px;
	padding: 40px 0;
	gap: 85px;
}
.footer-logo img {
   width: 64px;
}
.footer-widget ul li a {
   font-size: 14px;
   color: #B2B2B2;
}
.footer-widget ul {
   gap: 20px;
}
.footer-widget ul li a:hover {
   color: #fff;
}
.footer-social .social-icon img {
   filter: brightness(99999);
}
.footer-social .social-icon {
   border-color: #fff;
   background-color: #171717;
   filter: drop-shadow(3px 3px 0 #fff);
}
.footer-social .social-icon:hover {
   background-color: var(--orange);
}
.footer-copyright {
   padding: 24px 0;
   border-top: 1px solid #707070;
}
.copyright-wrapper {
   max-width: 1170px;
}
.copyright-link, .copyright-text {
   font-size: 13px;
   color: #B2B2B2;
}
.copyright-link:hover {
   color: #fff;
}
/* footer area end */

/* scroll to top */
.scroll-to-top {
   bottom: 30px;
   right: 30px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(100px);
   z-index: 99;
}
.scroll-to-top img {
   width: 44px;
}
.scroll-to-top.active {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}
.hero-slider-container {
	margin-right: -6px;
	padding-right: 6px;
	padding-bottom: 6px;
}
.slider-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 9;
}
.slider-nav-prev {
   left: 20px;
}
.slider-nav-next {
   right: 20px;
}
.slider-nav img {
   width: 30px;
}