/*!
Theme Name: oyolloo
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: oyolloo
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

oyolloo is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

body {
    line-height: 1.7;
    font-size: 18px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    color: #515262;
    background: #fff;
}
  
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
  
  
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #1C1B1B;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}
  
h1 {
    font-size: 42px;
}
  
h2 {
    font-size: 36px;
}
  
h3 {
    font-size: 30px;
}
  
h4 {
    font-size: 24px;
}
  
h5 {
    font-size: 18px;
}
  
h6 {
    font-size: 16px;
}
  
a {
    text-decoration: none;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
  
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}
  
button:focus {
    outline: none;
    box-shadow: none;
}
  
.slick-slide:focus {
    outline: none;
    box-shadow: none;
}
  
.slick-slide img {
    display: inline-block !important;
}
  
button {
    border: none;
}
  
img {
    max-width: 100%;
    height: auto;
}
  
input:focus,
textarea:focus, select:focus {
  outline: none;
  box-shadow: none;
}

input {
  color: #fff;
  padding: 0 20px;
  line-height: 48px;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(224, 224, 224, 0.32);
  border-radius: 5px;
}

select {
  color: #fff;
  padding: 0 20px;
  line-height: 48px;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(224, 224, 224, 0.32);
  border-radius: 5px;
  height: 50px;
}

input::placeholder, textarea::placeholder {
  color: #fff;
  font-size: 14px;
}

.form-group.submit .primary-btn {
  line-height: initial;
  background: #FE5428;
  border: none;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid #FE5428;
  padding: 14px 20px;
}

.form-group.submit .primary-btn:hover {
  background: transparent;
  color: #fff;
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form p {
  margin-bottom: 0;
}

.contact-form select option {
  background: #232952;
}

/* animation delay css
============================================================================================ */
.delay-1 {
    animation-delay: 0.1s;
}
  
.delay-2 {
    animation-delay: 0.2s;
}
  
.delay-3 {
    animation-delay: 0.3s;
}
  
.delay-4 {
    animation-delay: 0.4s;
}
  
.delay-5 {
    animation-delay: 0.5s;
}
  
.delay-6 {
    animation-delay: 0.6s;
}
  
.delay-7 {
    animation-delay: 0.7s;
}
  
.delay-8 {
    animation-delay: 0.8s;
}
  
.delay-9 {
    animation-delay: 0.9s;
}
  
.delay-10 {
    animation-delay: 1s;
}
  
/* Main Title Area css
============================================================================================ */
  
.section-title {
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: 48px;
}

  
/* Start Primary btns css
============================================================================================ */
.primary-btn {
  position: relative;
  display: inline-block;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 35px;
  transition: 0.3s;
  color: #fff;
  background: #DB0A21;
  border-radius: 100px;
}

.primary-btn i {
  margin-left: 10px;
}
  
.primary-btn:hover {
    background: #fff;
    border: 1.5px solid #000;
    color: #000;
}
  
/* gradient-bg css
============================================================================================ */
.gradient-bg {
    background: -webkit-linear-gradient(90deg, #fe690b 0%, #ff8f1e 100%);
    background: -moz-linear-gradient(90deg, #fe690b 0%, #ff8f1e 100%);
    background: -o-linear-gradient(90deg, #fe690b 0%, #ff8f1e 100%);
    background: linear-gradient(90deg, #fe690b 0%, #ff8f1e 100%);
}
  
  
/* Start Header area style
============================================================================================ */
.header-area {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: transparent;
    padding: 20px 0;
    transition: 0.3s;
}

.header-area .navbar {
  background: transparent;
  padding: 0px;
  border: 0px;
  border-radius: 0px;
}

.header-area .navbar .navbar-nav li {
  margin-right: 70px;
  position: relative;
}

.header-area .navbar .navbar-nav li a {
  color: #fff;
  padding: 0px;
  display: inline-block;
  position: relative;
  font-size: 16px;
  line-height: 30px;
	text-transform: uppercase;
}

.header-area .navbar .navbar-nav li a:after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    background: #fff;
    width: 0;
    height: 2px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}


.header-area .navbar .navbar-nav li a:hover, .header-area .navbar .navbar-nav li a.active {
  color: #1CFFC2;
}

.header-area .navbar .navbar-nav li a:hover:after, .header-area .navbar .navbar-nav li a.active:after {
    opacity: 1;
    visibility: visible;
    width: 26px;
}


.header-btns {
  margin-left: 25px;
}

.header-btn {
    color: #fff;
    font-weight: 500;
    display: inline-block;
    padding: 13px 29px;
    transition: .3s;
    border-radius: 1000px;
    border: 2px solid #fff;
    font-size: 16px;
    letter-spacing: 0.01em;
}

.header-btn:hover {
  background:#FE5428;
  color: #fff;
  border-color: #FE5428;
}

.offcanvas-wraper {
  position: fixed;
  width: 300px;
  background: #070404;
  height: 100%;
  top: 0;
  padding-top: 100px;
  z-index: 99;
  left: -300px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: none;
}

.offcanvas-wraper.active {
  left: 0;
}

.mobile-header {
  display: none;
  padding: 10px 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #070404;
  transition: 0.3s;
  box-shadow: 0 5px 20px #92929229;
}

.mobile-header .site-logo img {
  max-width: 150px;
}

.offcanvas-wraper li a {
  color: #fff;
  font-size: 16px;
}

.offcanvas-wraper li {
  margin-bottom: 10px;
	position: relative;
}

.custom-logo {
  transition: .3s;
}

.header-area.sticky,
.mobile-header.sticky {
  background: #070404;
  box-shadow: 0 5px 20px #92929229;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 15px 0;
}



.center-sep {
    margin: 0 auto;
}

.elementor-service-box .elementor-widget-wrap {
    transition: .3s;
}

.elementor-service-box .elementor-widget-wrap:hover {
    background-color: #1CFFC2!important;
}

.elementor-service-box .elementor-widget-wrap:hover .elementor-button:hover {
    background-color: #000;
    color: #fff;
}

.theme-color {
  color: #FE5428;
}



.single-blog-post:hover {
  box-shadow: 0 10px 30px #c7c7c736;
  border-color: transparent;
}

.blog-thumb img {
  border-radius: 8px;
  height: 270px;
  object-fit: cover;
}

.single-blog-post {
  background: #FFFFFF;
  border: 1px solid #F2F2F2;
  border-radius: 8px;
  transition: .3s;
  height: 100%;
}

.blog-content {
  padding: 20px 20px 30px;
}

.blog-content .date {
  font-size: 16px;
  font-weight: 400;
  color: #70747E;
  margin-bottom: 10px;
}

.blog-content .date i {
  color: #FE5428;
  margin-right: 2px;
}

.blog-content .blog-title {
  font-size: 24px;
  margin-bottom: 15px;
}

.blog-content .blog-desc {
  color: #515262;
  margin-bottom: 15px;
}

.blog-content .inline-btn {
  color: #666666;
  font-weight: 500;
}

.blog-content .inline-btn:hover {
  color: #FE5428;
}

.blog-area {
  padding: 120px 0;
}

.breadcrumb-section {
  background: url(assets/img/breadcrumb-bg.png) center no-repeat;
  padding: 200px 0 105px;
  text-align: center;
  background-size: cover;
}

.breadcrumb-text h1 {
  color: #fff;
  font-size: 65px;
}

.breadcrumb-nav span {
  margin: 0 5px;
}

.breadcrumb-nav p {
  color: #1CFFC2;
}

.breadcrumb-nav p a {
  color: rgb(28 255 194 / 60%);
}


.single-blog-area {
  padding: 120px 0;
}


.single-blog .blog-thumb {
  height: 420px;
  width: 100%;
  object-fit: cover;
  margin-bottom: 30px;
}

.cat .post-categories a {
  color: #00A270;
  font-size: 16px;
  font-weight: 500;
  background: rgba(0, 162, 112, 0.09);
  border-radius: 5px;
  display: inline-block;
  padding: 11px 20px;
}

.cat .post-categories {
  margin-bottom: 20px;
}

.single-sidebar .desktop-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 30px;
}

.single-post-meta .author-avatar img {
  border-radius: 50%;
}

.single-post-meta .author-avatar {
  margin-bottom: 20px;
}

.single-post-meta li {
  font-size: 22px;
  font-weight: 500;
  color: #0F0E19;
  position: relative;
  z-index: 1;
}

.single-post-meta ul {
  display: flex;
  align-items: center;
  gap: 50px;
}

.single-post-meta {
  margin-bottom: 70px;
}

.single-post-meta li:last-child:before {
  position: absolute;
  left: -30px;
  top: 50%;
  height: 12px;
  width: 12px;
  content: "";
  background: #D9D9D9;
  border-radius: 50%;
  transform: translateY(-50%);
}

.popular-post-wrap {
  border: 1px solid #D6D7D8;
  box-shadow: 0px 2px 17px rgba(0, 0, 0, 0.02);
  border-radius: 3px;
  width: 75%;
  padding: 20px;
  margin-bottom: 50px;
}

.popular-post-wrap .widget-title {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 1px solid #D6D7D8;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.sidebar-blog {
  display: flex;
  align-items: center;
}

.sidebar-blog .blog-thumb img {
  height: 70px;
  width: 80px;
  border-radius: 0;
}

.sidebar-blog .blog-thumb {
  min-width: 80px;
  margin-right: 20px;
}

.sidebar-blog .blog-content {
  padding: 0;
}

.sidebar-blog .blog-content h5 a {
  font-size: 14px;
  font-weight: 400;
  color: #0F0E19;
}

.sidebar-blog .blog-content h5 {
  line-height: 1.1;
}

.sidebar-blog .blog-content .date {
  font-size: 13px;
  color: #828282;
  margin-bottom: 0;
}

.popular-post-wrap .sidebar-blog:not(:last-child) {
  margin-bottom: 20px;
}

.single-sidebar {
  padding-left: 20px;
}


.block-quote {
  border-left: 3px solid #00A270;
  font-size: 20px;
  font-weight: 500;
  color: #0F0E19;
  padding-left: 15px;
  margin: 25px 0 30px;
}


.title-mobile {
  display: none;
}

.single-post-meta.mobile {
  display: none;
}


.related-posts .title {
  font-size: 48px;
  margin-bottom: 50px;
}

.related-posts {
  margin-bottom: 120px;
}

.cat.mobile-cat {
  display: none;
}

.error-section {
  padding: 120px 0;
}

.acrhive-section {
  padding: 120px 0;
}