/*
Theme Name: Prime Beauty Salon
Theme URI: https://www.themeignite.com/products/free-beauty-wordpress-theme/
Author: themeignite
Author URI: https://www.themeignite.com/
Description: Prime Beauty Salon is a sophisticated and feature-rich theme designed specifically for beauty salons, spas, wellness centers, hair studios, and cosmetic care businesses, offering a visually stunning and user-friendly platform to showcase services, promote specials, and build a captivating online presence in the beauty spa theme niche; visually, Prime Beauty Salon exudes elegance with its modern design, high-quality imagery, responsive beauty layout, and a color palette that reflects the luxurious and serene atmosphere of beauty care services, while the homepage is strategically organized with sections that highlight hair treatments, facials, manicures, pedicures, massage therapy, skincare services, makeup artist offerings, beauty gallery displays, stylist showcase features, and the overall salon ambiance to create an inviting experience; functionality remains a key focus with an integrated online beauty appointment system and compatibility with Contact Form 7 for smooth client interactions, ensuring seamless scheduling and engagement across all devices; extensive customization options, including clean code structure, customizable color schemes, fonts, versatile layout options, SEO-friendly beauty theme elements, and salon management features, allow owners to create a unique identity aligned with their brand; additional options such as showcasing special promotions, client testimonials, before-and-after galleries, beauty portfolio sections, social media integration, and promotional banners further enhance trust and engagement, making Prime Beauty Salon an ideal solution for any beauty business aiming to strengthen its digital presence with a professional, functional, and visually appealing website.
Version: 3.0
Requires at least: 5.1
Requires PHP: 7.2
Tested up to: 6.9
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: prime-beauty-salon
Tags: photography, portfolio, one-column, two-columns, three-columns, four-columns, right-sidebar, left-sidebar, custom-background, custom-menu, featured-images, featured-image-header, post-formats, flexible-header, sticky-post, threaded-comments, translation-ready, theme-options, footer-widgets,  full-width-template, custom-logo, custom-colors, editor-style, rtl-language-support

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

Prime Beauty Salon is based on Underscores http://underscores.me/, (C) 2012-2016 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 http://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
    ## Links
    ## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
    ## Comments
# Infinite scroll
# Layouts and Titles
# Media
    ## Captions
    ## Galleries
# Social Icons
# Breadcrumb List
# Homepage Sections
    ## Featured Slider Section
    ## Featured  Section
    ## Featured type_of_work Section
    ## Featured Classes Section
    ## Featured Testimonial Section
# Footer
# Responsive

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
:root {
  --primary-color: #9a563a;
}
html {
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust:     100%;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    background: #fff;
}

#content {
    position: relative;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    color: #000000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
}
mark {
    background: #ff0;
    color: #111;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

#wp-calendar {
    display: table;
    width: 100%;
    margin-bottom: 0;
}
tbody {
    text-align: left;
}

tr {
    border: 1px solid #aaa;
}

td,
th {
    padding: 5px;
    font-weight: 400;
}

td#next {
    text-align: right;
}
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
    color: #666;
    font-size: 14px;
    line-height: 1.7;
    word-wrap: break-word;
}
p {
    margin: 0 0 1em;
}
p:last-child {
    margin-bottom: 0;
}
dfn,
cite,
em,
i {
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #f6f6f6;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-size: 15px;
    font-size: 0.9375rem;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

/*mark,
ins {
    background: #fff9c0;
}*/

big {
    font-size: 125%;
}

/*--------------------------------------------------------------
# Scroll Back
--------------------------------------------------------------*/
#button {
  display: inline-block;
  background-color: var(--primary-color);
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 10px;
  right: 30px;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  padding: 15px 0;
  font-weight: bold;
}
#button:hover {
  cursor: pointer;
  background-color: #000000;
}
#button:active {
  background-color: #000000;
}
#button.show {
  opacity: 1;
  visibility: visible;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
.preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99999;
    background: #fff;
}
.loader{
    width: 160px;
    height: 160px;
    top: 13em;
    margin: 50px auto 0;
    border-top: 16px solid var(--primary-color);
    border-right: 16px solid transparent;
    border-radius: 50%;
    position: relative;
    animation: round 1s linear infinite;
}
.loader:before{
    content: '';
    background-color: var(--primary-color);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 5px;
}
@keyframes round{
    100%{ transform: rotate(360deg); }
}

/*PRE LOADER 2*/

body{background:#fff}

.load-one{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
  /*change these sizes to fit into your project*/
  width:100px;
  height:100px;
}
.load-one hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.load-one :first-child{background:var(--primary-color);animation-delay:-1.5s}
.load-one :nth-child(2){background:#000;animation-delay:-1s}
.load-one :nth-child(3){background:var(--primary-color);animation-delay:-0.5s}
.load-one :last-child{background:#000}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}

/*Loader Three */
/* Optional - (you can remove it) */
    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Load Settings */
.no-scroll-y {
    overflow-y: hidden;
}

#preloader-section{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
}


/* Preloader */
.ctn-preloader {
    -webkit-box-align: center;
    align-items: center;

    /* Show or Hide cursor when hover of Preloader*/
    cursor: none;

    display: -webkit-box;
    display: flex;
    height: 100%;
    -webkit-box-pack: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.ctn-preloader .animation-preloader {
    position: absolute;
    z-index: 100;
}

/* Spinner loading */
.ctn-preloader .animation-preloader .spinner {
    -webkit-animation: spinner 1s infinite linear;
    animation: spinner 1s infinite linear;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.2);
    border-top-color: var(--primary-color); /* It is not identified in alphabetical order so that it does not overwrite it */
    height: 9em;
    margin: 0 auto 3.5em auto;
    width: 9em;
}

/* Text Loading */
.ctn-preloader .animation-preloader .txt-loading {
  font: bold 5em 'Montserrat', sans-serif;
    text-align: center;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
    -webkit-animation: letters-loading 4s infinite;
    animation: letters-loading 4s infinite;
    color: var(--primary-color);
    content: attr(data-text-preloader);
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading {
    color: rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Letters Animation */
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(9):before {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(10):before {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(11):before {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(12):before {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(13):before {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(14):before {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(15):before {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(16):before {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

/* Loader section Settings */
.ctn-preloader .loader-section {
  background-color: #fff6e6;
  height: 100%;
    position: fixed;
  top: 0;
  width: calc(50% + 1px);
}

.ctn-preloader .loader-section.section-left {
  left: 0;
}

.ctn-preloader .loader-section.section-right {
  right: 0;
}

/* Fade effect in loading animation */
.loaded .animation-preloader {
  opacity: 0;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

/* Curtain effect */
.loaded .loader-section.section-left {
  -webkit-transform: translateX(-101%);
          transform: translateX(-101%);
  -webkit-transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2.000);
  transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2.000);
}

.loaded .loader-section.section-right {
  -webkit-transform: translateX(101%);
          transform: translateX(101%);
  -webkit-transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2.000);
  transition: 3.5s 0.1s all cubic-bezier(0.1, 0.1, 0.1, 2.000);
}


@keyframes spinner {
    to {
        -webkit-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
    }
}


@keyframes letters-loading {
  0%,
  75%,
  100% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}

/* Backward laptop size (laptop, tablet, cell phone) */
@media screen and (max-width: 767px) {
    /* Preloader */
    /* Spinner Loading */   
    .ctn-preloader .animation-preloader .spinner {
        height: 8em;
        width: 8em;
    }

    /* Text Loading */
    .ctn-preloader .animation-preloader .txt-loading {
      font: bold 3.5em 'Montserrat', sans-serif;
    }
}

@media screen and (max-width: 500px) {
    /* Prelaoder */
    /* Spinner Loading */
    .ctn-preloader .animation-preloader .spinner {
        height: 7em;
        width: 7em;
    }

    /* Text Loading */
    .ctn-preloader .animation-preloader .txt-loading {
      font: bold 2em 'Montserrat', sans-serif;
    }
}


/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}

body { /* Fallback for when there is no custom background color defined. */
    overflow-x: hidden;
}

blockquote {
    font-size: 18px;
    line-height: 35px;
    position: relative;
    margin: 0;
}
blockquote.alignright {
    padding-right: 0;
    margin-bottom: 14px;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0;
    padding-left: 1.5em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: 0.5em;
}

dt {
    font-weight: bold;
    margin-bottom: 1em;
}

dd {
    margin: 0 1.5em 1.5em;
}

img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
    vertical-align: middle;
}

figure {
    margin: 0; /* Extra wide images within figure tags don't overflow the content area. */
}

table {
    margin: 0 0 1.5em;
    width: 100%;
    display: table;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"],a.components-button.wc-block-components-button.wp-element-button.wc-block-cart__submit-button {
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 35px;
    position: relative;
    background-color: var(--primary-color);
    border-radius: 10px;
    border: 0;
    text-decoration: none;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    color: #fff;
    background-color: #000;
    border-color: #000;
    text-decoration: none;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    color: #fff;
    background-color: #000;
    border-color: #000;
    outline: thin dotted;
    text-decoration: none;
}

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 {
    color: #000000;
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 10px;
}
audio{
    width: 100%;
}

select {
    border: 1px solid #ccc;
}

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: #000000;
    outline: thin dotted;
}

textarea {
    width: 100%;
}
#respond input[type="checkbox"] {
    min-height: auto;
    height: auto;
    float: left;
    margin-right: 10px;
    width: auto;
}
#respond .comment-form-cookies-consent label {
    display: table;
    margin: 0;
    line-height: 1;
}
#commentform .comment-form-cookies-consent {
    clear: both;
    display: inline-block;
    width: 100%;
    margin-top: 25px;
    margin-bottom: 0;
}
p.form-submit {
    clear: both;
    display: inline-block;
    position: relative;
}
.comment-notes {
    font-size: 14px;
    margin-top: 0;
}
#respond label {
    margin-bottom: 15px;
    display: block;
}
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"] {
    width: 100%;
}
#commentform p {
    margin-bottom: 21px;
}
#commentform p.comment-form-comment {
    margin-bottom: 0;
}
#commentform p.form-submit {
    margin: 21px 0 0;
}
#comments {
    margin-top: 35px;
}
#respond {
    margin-top: 35px;
}
.logged-in-as a {
    color: #000;
    text-decoration: none;
}
.logged-in-as a:hover,
.logged-in-as a:focus {
    color: var(--primary-color);
}
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
    color: var(--primary-color);
    text-decoration: underline;
}

a:hover,
a:focus,
a:active {
    color: #000;
}

a:focus, button:focus, input:focus, textarea:focus, .main-navigation ul ul li a:focus {
    outline: 1px dashed #000;
}
.site-menu a:focus, #featured-slider .read-more a.btn:focus, #colophon a:focus {
    outline-color: #fff;
}

.gallery-caption{
  margin:0;
  padding:0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#masthead a {
    text-decoration: none;
}
.site-logo,
#site-identity {
    display: inline-block;
    vertical-align: middle;
}
.site-title {
    font-size: 30px;
    margin: 0 0 0px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: capitalize;
}
.site-title a{
    color: #000;
}
.site-description {
    margin: 0;
    line-height: 1.3;
    color: #000;
    padding: 10px 0;
    letter-spacing: 0.01em;
}
.site-logo a {
    display: block;
    margin-right: 15px;
}
.header-main {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: absolute;
    width: 100%;
    z-index: 999;
    padding: 15px 0;
    left: 0;
}
.social-links {
    position: absolute;
    left: 5%;
}
.social-links a {
    font-size: 15px;
    color: #000;
    font-variant: normal;
    text-rendering: auto;
    font-family: "Font Awesome 5 Brands" !important;
    display: block;
}
.social-links a:hover{
    color: var(--primary-color);
}
.social-links a:before {
    content: "\f1d0";
}
.social-links a[href*="facebook.com"]:before,
.social-links a[href*="fb.com"]:before {
  content: "\f39e";
}
.social-links a[href*="twitter.com"]:before {
  content: "\f099";
}
.social-links a[href*="linkedin.com"]:before {
  content: "\f0e1";
}
.social-links a[href*="youtube.com"]:before {
  content: "\f167";
}
.social-links a[href*="dribbble.com"]:before {
  content: "\f17d";
}
.social-links a[href*="pinterest.com"]:before {
  content: "\f231";
}
.social-links a[href*="bitbucket.org"]:before {
  content: "\f171";
}
.social-links a[href*="github.com"]:before {
  content: "\f113";
}
.social-links a[href*="codepen.io"]:before {
  content: "\f1cb";
}
.social-links a[href*="flickr.com"]:before {
  content: "\f16e";
}
.social-links a[href$="/feed/"]:before {
  content: "\f09e";
}
.social-links a[href*="foursquare.com"]:before {
  content: "\f180";
}
.social-links a[href*="instagram.com"]:before {
  content: "\f16d";
}
.social-links a[href*="tumblr.com"]:before {
  content: "\f173";
}
.social-links a[href*="reddit.com"]:before {
  content: "\f1a1";
}
.social-links a[href*="vimeo.com"]:before {
  content: "\f194";
}
.social-links a[href*="digg.com"]:before {
  content: "\f1a6";
}
.social-links a[href*="twitch.tv"]:before {
  content: "\f1e8";
}
.social-links a[href*="stumbleupon.com"]:before {
  content: "\f1a4";
}
.social-links a[href*="delicious.com"]:before {
  content: "\f1a5";
}
.social-links a[href*="mailto:"]:before {
  content: "\f0e0";
}
.social-links a[href*="soundcloud.com"]:before {
  content: "\f1be";
}
.social-links a[href*="wordpress.org"]:before {
  content: "\f19a";
}
.social-links a[href*="wordpress.com"]:before {
  content: "\f19a";
}
.social-links a[href*="jsfiddle.net"]:before {
  content: "\f1cc";
}
.social-links a[href*="tripadvisor.com"]:before {
  content: "\f262";
}
.social-links a[href*="foursquare.com"]:before {
  content: "\f180";
}
.social-links a[href*="angel.co"]:before {
  content: "\f209";
}
.social-links a[href*="slack.com"]:before {
  content: "\f198";
}
.social-links a[href*="tiktok.com"]:before {
  content: "\e07b";
}

/* Header Start  */
.sticky-head {
    position: fixed;
    z-index: 999;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #000;
}
.site-branding {
    padding-left: 70px;
}
.site-menu{
    display: flex;
    align-items: center;
    padding: 0 70px 0 30px;
    gap: 85px;
}
.donate-btn a {
    color: #fff;
    background-color: var(--primary-color);
    display: inline-block;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
}
.donate-btn i{
    margin-left: 8px;
}

/* header contact */
.main-navigation {
    display: block;
    position: relative;
    width: 100%;
}
.main-navigation ul.nav-menu > li > a > i {
    width: 45px;
    height: 45px;
    border-radius: 45px;
    line-height: 45px;
    background-color: var(--primary-color);
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    text-align: center;
}
.main-navigation ul ul {
    background-color: #fff;
    text-align: left;
    padding: 0;
}
.main-navigation ul ul li a {
    padding: 12px 15px;
}
.main-navigation ul ul a:after {
    float: right;
}
.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.main-navigation li {
    position: relative;
}
.main-navigation ul.nav-menu > li > a {
    color: #555555;
    position: relative;
    height: 100%;
}
.main-navigation ul.nav-menu > li:hover > a,
.main-navigation ul.nav-menu > li.focus > a {
    color: var(--primary-color);
}
.main-navigation form.search-form input {
    background-color: #111;
    border-color: #111;
    color: #111;
    font-weight: 400;
}
.main-navigation a {
    display: block;
    font-weight: 400;
    color: #212121;
    font-size: 16px;
    line-height: 1.5;
}
.main-navigation ul ul {
    float: left;
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
}
.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}
.main-navigation li li {
    display: block;
}
.main-navigation ul.nav-menu .current_page_item > a,
.main-navigation ul.nav-menu .current-menu-item > a,
.main-navigation ul.nav-menu .current_page_ancestor > a,
.main-navigation ul.nav-menu .current-menu-ancestor > a {
    color: var(--primary-color);
}
.main-navigation ul.nav-menu > li:before {
    background-color: #5750A0;
    color: #fff;
    width: 46px;
    height: 46px;
    line-height: 46px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
}
form.search-form {
    width: 100%;
    max-width: 100%;
    position: relative;
}
.main-navigation form.search-form {
    min-width: 320px;
}
input.search-field {
    height: 45px;
    padding: 0 50px 0 15px;
    width: 100%;
}
.menu-toggle  {
    font-size: 8px;
    margin: 2px 0;
    display: block;
    width: 48px;
    height: 48px;
    position: relative;
    top: 0;
    right: 15px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 6px;
}
.menu-toggle:hover,
.menu-toggle:focus {
    background-color: var(--primary-color);
}
.menu-toggle span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 35px;
    height: 4px;
    background-color: #fff;
    font-size: 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    right: 0;
    margin: 0 auto;
}
.menu-toggle span:before,
.menu-toggle span:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -webkit-transform 0.3s;
    -ms-transition: -webkit-transform 0.3s;
    -o-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}
.menu-toggle span:before {
    -webkit-transform: translateY(-250%);
    -moz-transform: translateY(-250%);
    -ms-transform: translateY(-250%);
    -o-transform: translateY(-250%);
    transform: translateY(-250%);
}
.menu-toggle span:after {
    -webkit-transform: translateY(250%);
    -moz-transform: translateY(250%);
    -ms-transform: translateY(250%);
    -o-transform: translateY(250%);
    transform: translateY(250%);
}
.menu-toggle.active span:before {
    -webkit-transform: translateY(0) rotate(45deg);
    -moz-transform: translateY(0) rotate(45deg);
    -ms-transform: translateY(0) rotate(45deg);
    -o-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
}
.menu-toggle.active span:after {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
}
.menu-toggle.active span {
    background-color: transparent;
}
.menu-label {
    float: right;
    color: #111;
    padding: 7px 0 0 10px;
    display: none;
}
button.dropdown-toggle {
    padding: 0;
    position: absolute;
    right: 0;
    top: 11px;
    padding-left: 10px;
    z-index: 10;
    background-color: transparent;
    color: #000;
    border: none;
    margin-left: 10px;
    width: 45px;
    height: 45px;
    line-height: 50px;
}
button.dropdown-toggle.active i {
    transform: rotate(-180deg);
    transform-origin: center;
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0;
    overflow: hidden;
}
.wp-block-button.is-style-squared a {
    border-radius: 0px;
}
a.wp-block-button__link {
    margin-top: 7px;
}


.wp-block-button .wp-block-button__link:focus, .wp-block-button .wp-block-button__link:hover {
    background-color: var(--primary-color) !important;
    color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.nav-links .nav-previous a:before,
.nav-links .nav-next a:after {
    content: "\f0d9";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    font-size: 18px;
    position: relative;
    top: 1px;
}
.nav-links .nav-next a:after {
    content: "\f0da";
    margin-left: 10px;
    margin-right: 0;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    width: 50%;
    position: relative;
    text-align: left;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%;
    position: relative;
}
.post-navigation a,
.posts-navigation a {
    font-weight: 400;
    display: block;
    color: #212529;
    text-decoration: none;
}
.post-navigation a:hover,
.posts-navigation a:hover,
.post-navigation a:focus,
.posts-navigation a:focus {
    color: var(--primary-color);
}
.post-navigation,
.posts-navigation {
    padding: 0;
    position: relative;
}
.pagination .page-numbers,
.pagination .page-numbers.dots:hover,
.pagination .page-numbers.dots:focus {
    text-align: center;
    line-height: 35px;
    width: 35px;
    height: 35px;
    display: inline-block;
    margin-right: 5px;
    color: var(--primary-color);
    background-color: #ffe2cf;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
    color: #fff;
    background-color: var(--primary-color);
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    margin-right: 25px;
    width: auto;
    height: auto;
    position: relative;
    top: 2px;
    background-color: transparent;
    color: var(--primary-color);
}
.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover,
.pagination .page-numbers.prev:focus,
.pagination .page-numbers.next:focus {
    color: #111;
    background-color: transparent;
}
.post-navigation a, .posts-navigation a {
    font-weight: 400;
    display: block;
    color: #212529;
    border: 1px solid #000;
    text-decoration: none;
    text-align: center;
    border-radius: 12px;
}
.nav-previous span {
    padding-left: 30px;
    float: left;
    text-align: left;
}
.nav-next span {
    padding-right: 30px;
    float: right;
    text-align: right;
}
.post-navigation span,
.posts-navigation span {
    display: table;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
    outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}
.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}
.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after,
.footer-widgets-area:before,
.footer-widgets-area:after,
.wrapper:before,
.wrapper:after {
    content: "";
    display: table;
    table-layout: fixed;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after,
.footer-widgets-area:before,
.footer-widgets-area:after,
.wrapper:before,
.wrapper:after {
    clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
    margin: 0 0 1.3em;
}
.widget:last-child {
    margin-bottom: 0;
}
.widget_block h1,
.widget_block h2,
.widget_block h3,
.widget_block h4,
.widget_block h5,
.widget_block h6 {
    margin: 0 0 10px;
}
#colophon .widget.widget_text,
#colophon .secondary.widget_text {
    margin-bottom: 20px;
}
#colophon .widget_block h1,
#colophon .widget_block h2,
#colophon .widget_block h3,
#colophon .widget_block h4,
#colophon .widget_block h5,
#colophon .widget_block h6 {
    color: #fff;
}
#colophon .widget:last-child {
    margin-bottom: 0;
}

/* Make sure select elements fit in widgets. */
.widget select {
    max-width: 100%;
    padding: 10px;
    border: none;
    width: 100%;
    max-width: 300px;
}
.widget input {
    height: 40px;
    padding: 0 15px;
    border: none;
}
form.search-form button.search-submit {
    height: 45px;
    line-height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    width: 45px;
    padding: 0;
}
.widget_search form.search-form button.search-submit {
    width: 50px;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    height: 50px;
    padding: 0;
}
.widget_search form.search-form input[type="search"] {
    padding: 0 55px 0 25px;
    height: 50px;
    background-color: #fff;
    color: #000;
    border: 1px solid;
}
.widget_search form.search-form input[type="search"]:focus {
    border-color: var(--primary-color);
}
form.search-form {
    position: relative;
}
form.search-form input {
    width: 100%;
    padding: 0 40px 0 15px;
    font-weight: 300;
}
#wp-calendar tbody td {
    text-align: center;
}
#wp-calendar caption {
    margin-bottom: 15px;
    font-weight: 600;
}
.widget-title {
    font-size: 18px;
    margin: 0 0 32px;
    color: #fff;
}
.widget li:not(:last-child) {
    margin-bottom: 10px;
}
#secondary .widget-title {
    font-size: 24px;
    border-bottom:3px solid #000;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000;
    letter-spacing: 0.01em;
}
#secondary a {
    color: #000;
    font-weight: 400;
}
#secondary a:hover,
#secondary a:focus {
    color: var(--primary-color);
}
#secondary ul li a {
    text-decoration: none;
}
#secondary ul {
    list-style-type: none;
    padding-left: 0px;
}
#secondary ul li a:hover,
#secondary ul li a:focus {
    border-bottom-color: var(--primary-color);
}
#secondary .widget:not(:last-child) {
    margin-bottom: 35px;
}
#secondary .widget {
    background-color: #fff;
    padding: 20px;
    box-shadow: #000000 0px 0px 8px;
    border-bottom: 5px solid var(--primary-color);
    border-top: 5px solid var(--primary-color);
    border-radius: 12px;
}
#secondary .widget input {
    border: 1px solid #000;
    border-radius: 10px;
}
.widget_contact_info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
    display: block;
}
.sticky .entry-header h2{
  background: url(assets/images/pin.png) no-repeat scroll 0 0px;
  padding-left: 40px;
}
.hentry {
    margin: 0;
}
.updated:not(.published) {
    display: none;
}
.single .byline,
.group-blog .byline {
    display: inline;
}
.page-content,
.entry-content,
.entry-summary {
    margin: 0;
}
.author img {
    display: block;
    text-align: center;
    margin: 20px auto;
}
.page-header span.posted-on {
    margin-bottom: 12px;
    display: inline-block;
    width: 100%;
}
.page-links {
    clear: both;
    margin: 0 0 1.5em;
}
.page-header span.author-name {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #111;
}
.page-header small {
    font-size: 12px;
    color: var(--primary-color);
}
nav.navigation.pagination {
    margin-top: 50px;
    clear: both;
    display: inline-block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.posts-wrapper.col-3 article:nth-child(3n) {
    border-right: 1px solid #e4e4e4;
}
.post-categories a {
    color: var(--primary-color);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}
.archive-description {
    color: #fff;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.tags-links {
    margin-bottom: 20px;
    display: inline-block;
}
.tags-links span {
    margin: 0 8px 8px 0;
}
.tags-links a {
    display: inline-block;
    padding: 5px 8px;
    color: #fff;
    line-height: 1;
    font-size: 14px;
    background-color: var(--primary-color);
    text-decoration: none;
}
.tags-links a:hover,
.tags-links a:focus {
    border-color: #000;
    background-color: #000;
    color: #fff;
}
.single .date a:before,
.entry-meta .author a:before,
.comments-link a:before,
.cat-links:before {
    content: "\f017";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 5px;
}
.entry-meta .author a:before {
    content: "\f007";
}
.comments-link a:before {
    content: "\f086";
}
.single .date a:before {
    content: "\f017";
}
.cat-links:before {
    content: "\f02c";
    color: var(--primary-color);
}
.entry-meta a,
.entry-meta span:before,
.entry-meta .cat-links:before,
.entry-meta .author:before {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}
.entry-meta a:hover,
.entry-meta a:focus {
    color: var(--primary-color);
}
.entry-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
}
.author.vcard {
    margin-left: 5px;
}
.byline {
    visibility: hidden;
}
.byline .author.vcard {
    visibility: visible;
    margin-left: -20px;
}
.single-post .site-main .comment-navigation,
.single-post .site-main .posts-navigation,
.single-post .site-main .post-navigation {
    margin-bottom: 0;
}
.navigation.post-navigation,
.navigation.posts-navigation {
    padding: 20px 30px;
    margin-top: 35px;
    background-color: #f6f6f6;
    border-radius: 10px;
}
.post-navigation .previous-article span span,
.posts-navigation .previous-article span span,
.post-navigation .next-article span span,
.posts-navigation .next-article span span {
    display: block;
}
.post-navigation span.previous-article b,
.post-navigations span.previous-article b,
.post-navigation span.next-article b,
.post-navigations span.next-article b {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}
.post-navigation span.previous-article,
.post-navigations span.previous-article {
    display: table;
}
.error-404.not-found {
    max-width: 35em;
    margin: 0 auto;
    text-align: center;
}
.error-404.not-found .page-title {
    font-size: 38px;
}
.no-sidebar #secondary {
    display: none;
}
.error-404.not-found {
    
    text-align: center  ;
}
.error-404.not-found img {
    width: 40%;
}

.btn-page-not {
    background: var(--primary-color);
    border-radius: 12px;
    margin-top: 2em;
    font-size: 25px;
    text-decoration: none !important;
    padding: 5px 5px;
}
.btn-page-not a {
    text-decoration: none;
    color: #fff !important;
}


.btn-page-not a{
    color: #fff!important;
}
.btn-page-not:hover{
    background: #000;
}
.error-404.not-found .page-title {
    font-size: 38px;
}
h1.page-header {
    font-size: 12em;
}
h2.page-content {
    font-size: 25px;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
    word-wrap: break-word;
}
.bypostauthor {
    display: block;
}
#reply-title, .comments-title {
    font-size: 42px;
    margin: 0;
}
.comments-title, #reply-title {
    margin-bottom: 30px;
    font-size: 25px;
    font-weight: 600;
}
ul.post-categories li:after {
    content: ",";
}
ul.post-categories li:last-child:after {
    display: none;
}
ol.comment-list {
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}
#comments ol {
    list-style: none;
    margin-left: 0;
    padding: 0;
}
#comments ol.comment-list {
    position: relative;
    overflow: hidden;
}
#comments ol.children {
    margin-left: 120px;
}
.says {
    display: none;
}
.comment-meta img {
    width: 60px;
    height: 60px;
    float: left;
    margin-right: 20px;
}
#comments time:before {
    display: none;
}
.comment-body {
    position: relative;
}
.reply {
    text-align: right;
}
#comments article {
    margin-bottom: 30px;
    clear: both;
    padding: 15px;
    background-color: #f6f6f6;
    text-decoration: none;
    border-radius: 25px;
}
#comments ol.comment-list > li:last-child article:last-child,
#comments ol.comment-list > li:last-child {
    border-bottom: none;
}
#comments ol.comment-list > li {
    padding-top: 49px;
}
#comments ol.comment-list > li:first-child {
    padding-top: 0;
}
#comments ol.comment-list > li article:last-child .reply {
    border-bottom: none;
    padding-bottom: 0;
}
.reply a {
    color: #fff;
    display: inline-block;
    font-weight: 500;
    padding: 5px 15px;
    position: relative;
    background-color: var(--primary-color);
    border-radius: 8px;
    text-decoration: none;
}
.reply a:hover,
.reply a:focus {
    color: #fff;
    background-color: #000;
}
.comment-meta .url,
.comment-meta .fn {
    display: inline-block;
    color: #000000;
    font-size: 20px;
    text-decoration: none;
    text-transform: capitalize;
}
.comment-meta .url:hover,
.comment-meta .url:focus {
    color: var(--primary-color);
}
.comment-metadata a,
.comment-metadata a time {
    color: #000000;
    text-decoration: none;
}
.comment-metadata a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover time,
.comment-metadata a:focus time {
    color: var(--primary-color);
}
.comment-metadata time {
    font-weight: 500;
}
.comment-metadata {
    display: block;
    margin-bottom: 10px;
}
.comment-content {
    margin-bottom: 10px;
    margin-top: 0;
    padding-left: 80px;
}
.comment-content p {
    font-weight: 400;
    margin-bottom: 1em;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
    display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Layouts and titles
--------------------------------------------------------------*/
section {
    position: relative;
}
.entry-content {
    margin-top: 0;
    margin-bottom: 15px;
}
@media screen and (min-width:1700px) and (max-width:1900px){
    .wrapper{
        max-width: 1520px;
    }
}
@media screen and (min-width:1920px) {
    .wrapper{
        max-width: 1620px;
    }
}
.wrapper {
    width: 100%;
    max-width: 1430px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}
.section-gap {
    padding: 4em 0;
}
.entry-title {
    font-size: 22px;
    margin: 0 0 10px;
    font-weight: 700;
    word-wrap: break-word;
}
.section-title h4 {
    margin: 0 0;
    font-size: 33px;
    font-weight: 700;
}
.section-title p {
    font-size: 15px;
    color: #848484;
    line-height: 1.2;
    margin-bottom: 35px;
    margin-top: 10px;
}
.entry-title a {
    color: #000;
    text-decoration: none;
    font-size: 25px;
    letter-spacing: 1px;
}
.entry-title a:hover,
.entry-title a:focus {
    color: var(--primary-color);
}
.post-thumbnail-link {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    opacity: 1;
    background-repeat: no-repeat;
}
.overlay:after{
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.4;
    position: absolute;
    z-index: -1;
}
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}
.align-right {
    text-align: right;
}
.btn {
    color: #fff;
    display: inline-block;
    font-weight: 600;
    padding: 8px 25px;
    border-radius: 7px;
    font-size: 15px;
    position: relative;
    background-color: var(--primary-color);
    text-decoration: none;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.btn:hover,
.btn:focus {
    color: #fff;
    background-color: #000;
    border-color: #000;
}
.btn i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}
.featured-image {
    position: relative;
}
.featured-image img{
    width: 100%;
    object-fit: cover;
}
.col-1 article,
.col-2 article,
.col-3 article,
.col-4 article,
.col-5 article,
.col-6 article {
    margin-bottom: 30px;
    width: 100%;
}
.col-1 article:last-child,
.col-2 article:last-child,
.col-3 article:last-child,
.col-4 article:last-child,
.col-5 article:last-child,
.col-6 article:last-child {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed, iframe, object {
    max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}
.wp-caption-text {
    text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.type_of_work {
    margin: -4px;
}
.type_of_work-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
    padding: 4px;
}
.type_of_work-columns-2 .type_of_work-item {
    max-width: 50%;
}
.type_of_work-columns-3 .type_of_work-item {
    max-width: 33.33%;
}
.type_of_work-columns-4 .type_of_work-item {
    max-width: 25%;
}
.type_of_work-columns-5 .type_of_work-item {
    max-width: 20%;
}
.type_of_work-columns-6 .type_of_work-item {
    max-width: 16.66%;
}
.type_of_work-columns-7 .type_of_work-item {
    max-width: 14.28%;
}
.type_of_work-columns-8 .type_of_work-item {
    max-width: 12.5%;
}
.type_of_work-columns-9 .type_of_work-item {
    max-width: 11.11%;
}
.type_of_work-caption {
    display: block;
}

/*--------------------------------------------------------------
## Social Icons
--------------------------------------------------------------*/
.social-icons li {
    display: inline-block;
    height: auto;
    text-align: center;
    position: relative;
    list-style: none;
}
.footer-widgets-area .widget .social-icons li {
    display: inline-block;
    width: auto;
}
.social-icons li:not(:last-child) {
    margin-right: 5px;
}
.social-icons,
.social-icons ul {
    margin: 0;
    padding: 0;
}
.social-icons li a {
    background-color: transparent;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
}

/*--------------------------------------------------------------
#  Page Site Header
--------------------------------------------------------------*/

#page-site-header {
    background-color: #000000;
    background-size: cover;
    background-position: 50%;
    position: relative;
    text-align: center;
    padding: 155px 0;
}
div#page-site-header {
    height: 300px;
    object-fit: cover;
    background-size: 100% 100%;
}
#page-site-header .overlay {
    opacity: 0.7;
}
#page-site-header .page-title {
    color: #fff;
    font-size: 42px;
    font-weight: 700;
}
#page-site-header .page-header {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*--------------------------------------------------------------
#  Slick Slider
--------------------------------------------------------------*/
.slick-slide {
    outline: none;
}
.slick-dotted.slick-slider {
    margin-bottom: 0;
}
.slick-next:before,
.slick-prev:before {
    opacity: 1;
    content: "\f053";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 18px;
}
.slick-next:before {
    content: "\f054";
}
.slick-prev,
.slick-next {
    left: 0;
    z-index: 1;
    width: 50px;
    height: 50px;
    line-height: 62px;
    background-color: var(--primary-color);
}
.slick-prev {
    left: 0;
}
.slick-next {
    left: auto;
    right: 0;
}
.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus {
    background-color: #000;
}
.slick-dots {
    bottom: 25px;
    display: none!important;
}
.slick-dots li {
    margin: 0 6px;
    width: auto;
    height: auto;
}
.slick-dots li button {
    background-color: #ccc;
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 12px;
}
.slick-dots li button:hover,
.slick-dots li.slick-active button {
    background-color: var(--primary-color);
}
.slick-dots li button:focus-visible {
    outline: auto;
}
.slick-dots li button:before {
    display: none;
}
.display-block {
    display: block;
}
.display-none {
    display: none;
}

/*--------------------------------------------------------------
#  Featured Slider Section
--------------------------------------------------------------*/
#featured-slider article {
    position: relative;
    padding: 250px 0;
    background-size: cover;
    background-position: 50%;
    background-color: #000;
}
#featured-slider .featured-image {
    background-size: cover;
    background-position: 50%;
    padding: 200px 0;
    border-radius: 50px;
    margin-bottom: 50px;
}
.content-image img{
     height: 140px;
}
.content-image {
    height: 140px;
    width: 100%;
    max-width: 100%;
}
#featured-slider .entry-container {
    position: absolute;
    top: 50%;text-align: left;
    left: 10%;
    right: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
#featured-slider .entry-title {
    font-size: 60px;
    letter-spacing: normal;
    font-weight: 700;
    line-height: 1;
    color: #000;
    position: relative;
    margin-bottom: 15px;
}
#featured-slider .entry-content {
    margin-bottom: 25px;
    color: #fff;
}
#featured-slider .entry-content p{
    font-size: 16px;
    letter-spacing: normal;
    line-height: 1.5;
    font-weight: 300;
    color: #000;
}
#featured-slider .read-more a:nth-child(2) {
    background-color: #fff;
    border-color: #fff;
    color: #000;
}
#featured-slider .read-more a:nth-child(2):hover,
#featured-slider .read-more a:nth-child(2):focus {
    background-color: #000;
    border-color: #000;
    color: #fff;
}
#featured-slider .read-more a.btn{
    color: #fff;
    display: inline-block;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 18px;
    background-color: var(--primary-color);
    border: none;
    text-decoration: none;
}
#featured-slider .read-more a.btn i, #featured-posts .read-more a i {
    color: #fff;
    font-size: 14px;
}
.read-more a i {
    color: var(--primary-color) !important;
    background-color: #fff;
    padding: 4px;
    border-radius: 4px;
}
#featured-posts .read-more a:hover{
    background-color: #000;
}
#featured-slider .read-more a.btn:hover,
#featured-slider .read-more a.btn:focus,
.donate-btn a:hover,
.donate-btn a:focus{
    color: #fff;
    background-color: #000;
}
#featured-slider .slick-arrow {
    opacity: 0;
    visibility: hidden;
}
#featured-slider:hover .slick-arrow {
    opacity: 1;
    visibility: visible;
}
#featured-slider .slick-prev, #featured-slider .slick-next {
    background-color: #fff;
    color: #000;
    border-radius: 8px;
}
#featured-slider .slick-prev:before, #featured-slider .slick-next:before {
    color: #000;
    content: '\f0da';
}
#featured-slider .slick-prev:before {
    content: '\f0d9';
}
#featured-slider .slick-prev:hover, #featured-slider .slick-next:hover {
    background-color: var(--primary-color);
}
#featured-slider .slick-prev:hover:before, #featured-slider .slick-next:hover:before {
    color: #fff;
}
#featured-slider .slick-prev {
    left: 10%;
}
#featured-slider .slick-next {
    right: 84%;
}
#featured-slider .slick-prev,#featured-slider .slick-next{
    top: 75%;
}
.icon-disable, /*.icon-container, */
.image-disable .featured-image,
.position-disable .team-position,
.position-disable .testimonial-position,
.title-disable .entry-header,
.content-disable .entry-content,
.button-disable .read-more,
.category-disable .cat-links,
.date-disable .date,
.blog-posts-wrapper .category-disable .cat-links,
#page-site-header.page-title-disable .page-header,
#page-site-header.header-image-disable {
    display: none;
}
.title-font-weight-regular .entry-title,
.content-font-weight-regular .entry-content,
.button-font-weight-regular .btn {
    font-weight: 400;
}
.title-font-weight-semi-bold .entry-title,
.content-font-weight-semi-bold .entry-content,
.button-font-weight-semi-bold .btn {
    font-weight: 600;
}
.title-font-weight-bold .entry-title,
.content-font-weight-bold .entry-content,
.button-font-weight-bold .btn {
    font-weight: bold;
}
.title-default .entry-title,
.content-default .entry-content,
.button-default .btn {
    text-transform: none;
}
.title-uppercase .entry-title,
.content-uppercase .entry-content,
.button-uppercase .btn {
    text-transform: uppercase;
}
.title-lowercase .entry-title,
.content-lowercase .entry-content,
.button-lowercase .btn {
    text-transform: lowercase;
}
.title-capitalize .entry-title,
.content-capitalize .entry-content,
.button-capitalize .btn {
    text-transform: capitalize;
}

#featured-slider .draggable {
    left: 0 !important;
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/

#mission-section {
    display: flex;
    gap: 30px;
}

#mission-section .tabs{
    width: 100%;
}

#mission-section ul.tabs-nav {
    padding: 0;
    margin-bottom: 20px;
    border-bottom: solid 1px #000;
    display: flex;
    justify-content: space-between;
}
#mission-section .tabs-nav-box {
    display: inline-block;
    font-size: 17px;
    font-weight: 400;
    padding: 15px;
}
#mission-section .tabs-nav-box a{
    color: #000;
}
li.tabs-nav-box.tab-active {
    border-bottom: 6px solid var(--primary-color);
}
.featured-mission-item {
    display: flex;
    gap: 25px;
}

.center_image {
    width: 60%;
}
#mission-section .cd-image-container {
    position: relative;
    width: 70%;
    max-width: 760px;
    margin: 0em 0 0 auto;
}
#mission-section .cd-image-container img {
  display: block;
  width: 100%;
}

#mission-section .cd-image-label {
  position: absolute;
  font-weight: 500;
  letter-spacing: 1px;
  top: 0;
  right: 0;
  color: #000;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
#mission-section .cd-image-label.is-hidden {
  visibility: hidden;
}
#mission-section .is-visible .cd-image-label {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

#mission-section .cd-resize-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#mission-section .cd-resize-img img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
#mission-section .cd-resize-img .cd-image-label {
  right: auto;
  left: 0;
}
#mission-section .is-visible .cd-resize-img {
  width: 50%;
  /* bounce in animation of the modified image */
  -webkit-animation: cd-bounce-in 0.7s;
  -moz-animation: cd-bounce-in 0.7s;
  animation: cd-bounce-in 0.7s;
}

@-webkit-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@-moz-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
#mission-section .cd-handle {
    position: absolute;
    height: 65px;
    width: 65px;
    left: 50%;
    top: 50%;
    margin-left: 0px;
    margin-top: 0;
    border-radius: 50%;
    background: #ffffff url(./assets/images/arrow.png) no-repeat center center;
    cursor: move;
    box-shadow: none;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0) scale(0);
    -moz-transform: translate3d(0, 0, 0) scale(0);
    -ms-transform: translate3d(0, 0, 0) scale(0);
    -o-transform: translate3d(0, 0, 0) scale(0);
    transform: translate3d(0, 0, 0) scale(0);
    border: 5px solid var(--primary-color);
    transform: translate(-50%, -50%) !important;
    background-size: 30px;
}

#mission-section .is-visible .cd-handle {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  -moz-transform: translate3d(0, 0, 0) scale(1);
  -ms-transform: translate3d(0, 0, 0) scale(1);
  -o-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}


#mission-section .content-details p {
    font-size: 18px;
}

/*--------------------------------------------------------------
# Latest Posts
--------------------------------------------------------------*/
#featured-posts article.has-post-thumbnail {
    padding: 0 3px;
}
 .blog-posts-wrapper .featured-image {
    background-size: cover;
    background-position: 50%;
    padding: 155px 0;
    border-radius: 10px;
    margin-bottom: 15px;
}
#featured-posts .auther-comment{
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    padding-top: 10px;
    margin: 0;
    margin-bottom: 10px;
}
#featured-posts .auther-comment li{
    display: flex;
    align-items: center;
}
#featured-posts .auther-comment li a{
    color: #2B2B2B;
    text-decoration: none;
}
#featured-posts .auther-comment li svg{
    margin-right: 5px;
    color: #2B2B2B;
}
#featured-posts {
    background: #fff;
    padding: 15px;
    border-top: 5px solid var(--primary-color);
    border-radius: 10px;
    border-bottom: 5px solid var(--primary-color);
    box-shadow: #000000 0px 0px 8px;
    margin-bottom: 30px;
}
#featured-posts .entry-meta {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background-color: var(--primary-color);
    padding: 8px 12px;
    border-radius: 6px;
}
#featured-posts .entry-meta .date a{
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    display: block;
}
#featured-posts .entry-date{
    display: table-caption;
    text-align: center;
}
#featured-posts .entry-title{
    margin-bottom: 8px;
}
#featured-posts .entry-content p{
    color: #2B2B2B;
    line-height: 1.5;
    margin-bottom: 5px;
    font-size: 15px;
}
#featured-posts .post-item {
    border-radius: 15px;
    overflow: hidden;
}
#featured-posts .read-more {
    margin-bottom: 12px;
}
.featured-image img {
    padding: 10px 0px;
}
#featured-posts .read-more a {
    margin-top: 22px;
    text-decoration: none;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    padding: 10px 10px;
    margin-top: 1px !important;
    border-radius: 4px;
}
h2.wp-block-heading {
    border-bottom: 3px solid #000;
}
.owl-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    padding: 0;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%); 
    left: 0;
    z-index: 1;
    width: 50px;
    height: 50px;
    line-height: 62px;
    background-color: var(--primary-color) !important;
    color: #fff !important;
}
.owl-prev{
    position: absolute;
    top: 50%;
    display: block;
    right: 10px;
    width: 50px;
    height: 50px;
    line-height: 62px;
    background-color: var(--primary-color) !important;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%); 
    color: #fff !important;
}
.owl-prev:hover ,.owl-next:hover{
    background-color: #000 !important;
}

/*--------------------------------------------------------------
# Typography Options
--------------------------------------------------------------*/
.section-title-font-1 .section-title {
    font-family: 'Raleway', sans-serif;
}
.section-title-font-2 .section-title {
    font-family: 'Poppins', sans-serif;
}
.section-title-font-3 .section-title {
    font-family: 'Montserrat', sans-serif;
}
.section-title-font-4 .section-title {
    font-family: 'Open Sans', sans-serif;
}
.section-title-font-5 .section-title {
    font-family: 'Lato', sans-serif;
}
.section-title-font-6 .section-title {
    font-family: 'Ubuntu', sans-serif;
}
.section-title-font-7 .section-title {
    font-family: 'Playfair Display', serif;
}
.section-title-font-8 .section-title {
    font-family:"DIN Next LT Arabic Regular" !important;
}
.section-title-font-9 .section-title {
    font-family: 'Titillium Web', sans-serif;
}
.section-title-font-10 .section-title {
    font-family: 'Muli', sans-serif;
}
.section-title-font-11 .section-title {
    font-family: 'Oxygen', sans-serif;
}
.section-title-font-12 .section-title {
    font-family: 'Nunito Sans', sans-serif;
}
.section-title-font-13 .section-title {
    font-family: 'Maven Pro', sans-serif;
}
.section-title-font-14 .section-title {
    font-family: 'Cairo', serif;
}
.section-title-font-15 .section-title {
    font-family: 'Philosopher', sans-serif;
}
.section-title-font-16 .section-title {
    font-family: 'Dosis', sans-serif;
}
.section-title-font-17 .section-title {
    font-family: 'Sniglet', cursive;
}
.section-title-font-18 .section-title {
    font-family: 'Gloria Hallelujah', cursive;
}
.section-title-font-19 .section-title {
    font-family: 'Patrick Hand', cursive;
}
.section-title-font-20 .section-title {
    font-family: 'Shadows Into Light', cursive;
}
.header-font-1 h1,
.header-font-1 h2,
.header-font-1 h3,
.header-font-1 h4,
.header-font-1 h5,
.header-font-1 h6,
.header-font-1 .btn {
    font-family: 'Raleway', sans-serif;
}
.header-font-2 h1,
.header-font-2 h2,
.header-font-2 h3,
.header-font-2 h4,
.header-font-2 h5,
.header-font-2 h6,
.header-font-2 .btn {
    font-family: 'Poppins', sans-serif;
}
.header-font-3 h1,
.header-font-3 h2,
.header-font-3 h3,
.header-font-3 h4,
.header-font-3 h5,
.header-font-3 h6,
.header-font-3 .btn {
    font-family: 'Montserrat', sans-serif;
}
.header-font-4 h1,
.header-font-4 h2,
.header-font-4 h3,
.header-font-4 h4,
.header-font-4 h5,
.header-font-4 h6,
.header-font-4 .btn {
    font-family: 'Open Sans', sans-serif;
}
.header-font-5 h1,
.header-font-5 h2,
.header-font-5 h3,
.header-font-5 h4,
.header-font-5 h5,
.header-font-5 h6,
.header-font-5 .btn {
    font-family: 'Lato', sans-serif;
}
.header-font-6 h1,
.header-font-6 h2,
.header-font-6 h3,
.header-font-6 h4,
.header-font-6 h5,
.header-font-6 h6,
.header-font-6 .btn {
    font-family: 'Ubuntu', sans-serif;
}
.header-font-7 h1,
.header-font-7 h2,
.header-font-7 h3,
.header-font-7 h4,
.header-font-7 h5,
.header-font-7 h6,
.header-font-7 .btn {
    font-family: 'Playfair Display', serif;
}
.header-font-8 h1,
.header-font-8 h2,
.header-font-8 h3,
.header-font-8 h4,
.header-font-8 h5,
.header-font-8 h6,
.header-font-8 .btn {
    font-family:"DIN Next LT Arabic Regular" !important;
}
.header-font-9 h1,
.header-font-9 h2,
.header-font-9 h3,
.header-font-9 h4,
.header-font-9 h5,
.header-font-9 h6,
.header-font-9 .btn {
    font-family: 'Titillium Web', sans-serif;
}
.header-font-10 h1,
.header-font-10 h2,
.header-font-10 h3,
.header-font-10 h4,
.header-font-10 h5,
.header-font-10 h6,
.header-font-10 .btn {
    font-family: 'Muli', sans-serif;
}
.header-font-11 h1,
.header-font-11 h2,
.header-font-11 h3,
.header-font-11 h4,
.header-font-11 h5,
.header-font-11 h6,
.header-font-11 .btn {
    font-family: 'Oxygen', sans-serif;
}
.header-font-12 h1,
.header-font-12 h2,
.header-font-12 h3,
.header-font-12 h4,
.header-font-12 h5,
.header-font-12 h6,
.header-font-12 .btn {
    font-family: 'Nunito Sans', sans-serif;
}
.header-font-13 h1,
.header-font-13 h2,
.header-font-13 h3,
.header-font-13 h4,
.header-font-13 h5,
.header-font-13 h6,
.header-font-13 .btn {
    font-family: 'Maven Pro', sans-serif;
}
.header-font-14 h1,
.header-font-14 h2,
.header-font-14 h3,
.header-font-14 h4,
.header-font-14 h5,
.header-font-14 h6,
.header-font-14 .btn {
    font-family: 'Cairo', serif;
}
.header-font-15 h1,
.header-font-15 h2,
.header-font-15 h3,
.header-font-15 h4,
.header-font-15 h5,
.header-font-15 h6,
.header-font-15 .btn {
    font-family: 'Philosopher', sans-serif;
}
.header-font-16 h1,
.header-font-16 h2,
.header-font-16 h3,
.header-font-16 h4,
.header-font-16 h5,
.header-font-16 h6,
.header-font-16 .btn {
    font-family: 'Dosis', sans-serif;
}
.header-font-17 h1,
.header-font-17 h2,
.header-font-17 h3,
.header-font-17 h4,
.header-font-17 h5,
.header-font-17 h6,
.header-font-17 .btn {
    font-family: 'Sniglet', cursive;
}
.header-font-18 h1,
.header-font-18 h2,
.header-font-18 h3,
.header-font-18 h4,
.header-font-18 h5,
.header-font-18 h6,
.header-font-18 .btn {
    font-family: 'Gloria Hallelujah', cursive;
}
.header-font-19 h1,
.header-font-19 h2,
.header-font-19 h3,
.header-font-19 h4,
.header-font-19 h5,
.header-font-19 h6,
.header-font-19 .btn {
    font-family: 'Patrick Hand', cursive;
}
.header-font-20 h1,
.header-font-20 h2,
.header-font-20 h3,
.header-font-20 h4,
.header-font-20 h5,
.header-font-20 h6,
.header-font-20 .btn {
    font-family: 'Shadows Into Light', cursive;
}
.header-font-21 h1,
.header-font-21 h2,
.header-font-21 h3,
.header-font-21 h4,
.header-font-21 h5,
.header-font-21 h6,
.header-font-21 .btn {
    font-family: 'Space Grotesk', sans-serif;
}
.body-font-1,
.body-font-1 .main-navigation a {
    font-family: 'Raleway', sans-serif;
}
.body-font-2,
.body-font-2 .main-navigation a {
    font-family: 'Poppins', sans-serif;
}
.body-font-3,
.body-font-3 .main-navigation a {
    font-family: 'Montserrat', sans-serif;
}
.body-font-4,
.body-font-4 .main-navigation a {
    font-family: 'Open Sans', sans-serif;
}
.body-font-5,
.body-font-5 .main-navigation a {
    font-family: 'Lato', sans-serif;
}
.body-font-6,
.body-font-6 .main-navigation a {
    font-family: 'Ubuntu', sans-serif;
}
.body-font-7,
.body-font-7 .main-navigation a {
    font-family: 'Playfair Display', serif;
}
.body-font-8,
.body-font-8 .main-navigation a {
    font-family:"DIN Next LT Arabic Regular" !important;
}
.body-font-9,
.body-font-9 .main-navigation a {
    font-family: 'Titillium Web', sans-serif;
}
.body-font-10,
.body-font-10 .main-navigation a-10 {
    font-family: 'Muli', sans-serif;
}
.body-font-11,
.body-font-11 .main-navigation a {
    font-family: 'Oxygen', sans-serif;
}
.body-font-12,
.body-font-12 .main-navigation a {
    font-family: 'Nunito Sans', sans-serif;
}
.body-font-13,
.body-font-13 .main-navigation a {
    font-family: 'Maven Pro', sans-serif;
}
.body-font-14,
.body-font-14 .main-navigation a {
    font-family: 'Cairo', serif;
}
.body-font-15,
.body-font-15 .main-navigation a {
    font-family: 'Philosopher', sans-serif;
}
.body-font-16,
.body-font-16 .main-navigation a {
    font-family: 'Dosis', sans-serif;
}
.body-font-17,
.body-font-17 .main-navigation a {
    font-family: 'Sniglet', cursive;
}
.body-font-18,
.body-font-18 .main-navigation a {
    font-family: 'Gloria Hallelujah', cursive;
}
.body-font-19,
.body-font-19 .main-navigation a {
    font-family: 'Quicksand', sans-serif;
}

/*--------------------------------------------------------------
#                   Footer
--------------------------------------------------------------*/
#colophon {
    position: relative;
}
.footer-widgets-area .wrapper {
    display: flex;
    flex-wrap: nowrap;
}

.footer-widgets-area .custom-widget {
    flex: 0 0 auto;
    width: 25%; /* Adjust this value based on the number of columns */
}


.footer-widgets-area .custom-widget {
    flex: 1 0 auto;
    width: calc(90% / 2); /* Two columns by default */
    max-width: calc(90% / 2);
    margin: 0 10px; /* Add space between columns */
}

.footer-widgets-area .wrapper.footer-cols-1 .custom-widget {
    width: 100%; /* Single column - full width */
    max-width: 100%;
}

.footer-widgets-area .wrapper.footer-cols-3 .custom-widget {
    width: calc(90% / 3); /* Three columns */
    max-width: calc(90% / 3);
}

.footer-widgets-area .wrapper.footer-cols-4 .custom-widget {
    width: calc(90% / 4); /* Four columns */
    max-width: calc(90% / 4);
}
@media only screen and (max-width: 425px){
    .site-menu {
        padding: 0 5px 0 30px;
        gap: 0;
    }
    #mission-section .cd-handle {
    height: 41px;
    width: 40px;
    left: 50%;
    top: 50%;
    border: 2px solid var(--primary-color);
    
}
    .footer-widgets-area .wrapper {
        display: inline;
    }
    .footer-widgets-area .wrapper.footer-cols-4 .custom-widget {
        width: 100%; /* Four columns */
        max-width: 100%;
        padding: 10px;
        margin: 0;
    }
    #featured-slider .entry-container {
        left: 2%!important;
        right: 2%!important;
        text-align: center!important;
        padding: 0px;
    }
    h1.page-header {
        font-size: 8em;
    }
    h2.page-content {
        font-size: 18px;
    }
    .btn-page-not {
        background: #F1A91C;
        border-radius: 12px;
        margin-top: 1em;
        padding: 9px 8px;
    }
}
#colophon {
    background-color: #000000;
}
.footer-widgets-area {
    border-bottom: 1px solid rgb(255 255 255 / 10%);
}
#colophon ul {
    list-style: none;
    padding: 0;
}
.wp-block-tag-cloud a:hover{
    background-color: #000;
    color: #fff !important;
}
.wp-block-tag-cloud a{
    background: var(--primary-color);
    padding: 4px 16px;
    text-decoration: none;
    font-size: 16px !important;
    position: relative;
    margin-right: 4px;
    margin-bottom: 7px;
    display: inline-block;
    color: #fff;
}
#colophon .tag-cloud a {
    background: var(--primary-color);
    padding: 4px 16px;
    text-decoration: none;
    font-size: 16px !important;
    position: relative;
    margin-right: 4px;
    margin-bottom: 7px;
    display: inline-block;
    color: #fff;
}
#colophon .tag-cloud a:hover{
    background-color: #fff;
    color: var(--primary-color) !important;
}
#colophon ul a {
    text-decoration: none;
}
#colophon,
#colophon a,
#colophon p,
#colophon li {
    color: #fff;
    font-size: 16px;
}
#colophon a:hover,
#colophon a:focus {
    color: var(--primary-color);
}
#colophon .widget-title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 15px;
    border-bottom: 3px solid #fff;
}
.site-info {
    position: relative;
    padding: 20px 0;
    background-color: #2b2b2b;
}
.site-info span {
    display: block;
    text-align: center;
}
#colophon .site-info a:hover,
#colophon .site-info a:focus {
    color: var(--primary-color);
}
.footer-widgets-area .widget ul li {
    margin-bottom: 8px;
}
.footer-widgets-area .widget ul li:last-child,
.footer-widgets-area .widget .social-icons li {
    margin-bottom: 0;
}
.footer-widgets-area .hentry {
    margin-bottom: 45px;
}
.footer-widgets-area.col-1 .hentry {
    text-align: center;
}
.footer-widgets-area.col-1 .hentry:last-child {
    margin-bottom: 0;
}
.footer-widgets-area.col-1 .textwidget img {
    margin-left: auto;
    margin-right: auto;
}
.widget_recent_entries ul li span {
    font-size: 12px;
    display: block;
}
#colophon #wp-calendar caption {
    font-weight: 600;
    text-align: left;
}
.widget_nav_menu ul ul {
    padding-left: 0;
    margin-top: 15px;
}
.widget_tag_cloud .tagcloud a {
    font-size: 14px !important;
    line-height: 1;
    background-color: var(--primary-color);
    padding: 5px 8px;
    margin: 0 4px 8px 0;
    color: #fff!important;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
}
#secondary .widget_tag_cloud .tagcloud a:hover,
#secondary .widget_tag_cloud .tagcloud a:focus,
#colophon .widget_tag_cloud .tagcloud a:hover,
#colophon .widget_tag_cloud .tagcloud a:focus {
    background-color: #000;
    color: #fff;
}
#colophon .widget_search form.search-form button.search-submit {
    background-color: var(--primary-color);
}
#colophon .widget_recent_entries li:before {
    float: left;
}

/*--------------------------------------------------------------
#                   RESPONSIVE
--------------------------------------------------------------*/
@media screen and (min-width: 567px) {
    .footer-widgets-area.col-2 .hentry,
    .footer-widgets-area.col-4 .hentry {
        width: 50%;
        float: left;
    }
    .footer-widgets-area.col-2 .hentry:nth-child(2n+1),
    .footer-widgets-area.col-4 .hentry:nth-child(2n+1) {
        clear: left;
    }
    .footer-widgets-area.col-2 .hentry:nth-child(odd),
    .footer-widgets-area.col-4 .hentry:nth-child(odd) {
        padding-right: 40px;
    }
    .footer-widgets-area.col-2 .hentry:nth-last-child(-n+2),
    .footer-widgets-area.col-4 .hentry:nth-last-child(-n+2) {
        margin-bottom: 0;
    }
}
@media screen and (min-width: 767px) {
    .col-2 article,
    .col-3 article,
    .col-4 article,
    .col-5 article,
    .col-6 article {
        padding: 0 19px;
        float: left;
        width: 50%;
        margin-bottom: 30px;
    }
    .col-2 article:nth-child(2n+1),
    .col-3 article:nth-child(2n+1),
    .col-4 article:nth-child(2n+1),
    .col-5 article:nth-child(2n+1),
    .col-6 article:nth-child(2n+1) {
        clear: left;
    }
    .col-2 article:nth-last-child(-n+2),
    .col-3 article:nth-last-child(-n+2),
    .col-4 article:nth-last-child(-n+2),
    .col-5 article:nth-last-child(-n+2),
    .col-6 article:nth-last-child(-n+2) {
        margin-bottom: 0;
    }
    .comment-navigation .nav-previous,
    .posts-navigation .nav-previous,
    .post-navigation .nav-previous {
        padding-right: 25px;
    }
    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
        padding-left: 25px;
    }
    .footer-widgets-area.col-3 .hentry {
        width: 33.33%;
        float: left;
        margin-bottom: 0;
    }
    .footer-widgets-area.col-3 .hentry:not(:last-child) {
        padding-right: 40px;
    }
    .site-info.col-2 span {
        float: left;
        width: 50%;
        text-align: left;
    }
    .site-info.col-2 span:nth-child(2) {
        float: right;
        text-align: right;
    }
}
@media screen and (min-width: 992px) {
    .col-3 article,
    .col-5 article,
    .col-6 article {
        width: 33.33%;
    }
    .col-3 article:nth-child(2n+1),
    .col-5 article:nth-child(2n+1),
    .col-6 article:nth-child(2n+1) {
        clear: none;
    }
    .col-3 article:nth-child(3n+1),
    .col-5 article:nth-child(3n+1),
    .col-6 article:nth-child(3n+1) {
        clear: left;
    }
    .col-3 article:nth-last-child(-n+3),
    .col-5 article:nth-last-child(-n+3),
    .col-6 article:nth-last-child(-n+3) {
        margin-bottom: 0;
    }
    .col-4 article {
        width: 25%;
    }
    .col-5 article {
        width: 20%;
    }
    .col-6 article {
        width: 16.66%;
    }
    .col-4 article:nth-child(2n+1),
    .col-5 article:nth-child(3n+1),
    .col-6 article:nth-child(3n+1) {
        clear: none;
    }
    .col-4 article:nth-child(4n+1),
    .col-5 article:nth-child(5n+1),
    .col-6 article:nth-child(6n+1) {
        clear: left;
    }
    .col-4 article:nth-last-child(-n+4),
    .col-5 article:nth-last-child(-n+5),
    .col-6 article:nth-last-child(-n+6) {
        margin-bottom: 0;
    }
    nav.navigation.pagination {
        margin-top: 63px;
    }
    .footer-widgets-area.col-4 .hentry {
        width: 25%;
        padding-right: 40px;
    }
    .footer-widgets-area.col-4 .hentry:last-child {
        padding-right: 0;
    }
    .footer-widgets-area.col-4 .hentry:nth-child(2n+1) {
        clear: none;
    }
    .footer-widgets-area.col-4 .hentry:nth-child(4n+1) {
        clear: left;
    }
    .footer-widgets-area.col-4 .hentry:nth-last-child(-n+4) {
        margin-bottom: 0;
    }
}
@media screen and (max-width: 1024px) {
    .site-branding {
        padding-left: 25px;
    }
    .site-menu{
        padding: 0 40px 0 30px;
        gap: 40px;
    }
}
@media screen and (min-width: 1024px) {
    .menu-sticky #masthead {
        position: sticky;
        top: 0;
    }
    .menu-sticky #masthead.nav-shrink {
        box-shadow: 0 6px 10px rgb(0 0 0 / 10%);
    }
    .customize-support.menu-sticky #masthead.nav-shrink {
        top: 32px;
    }
    .main-navigation {
        width: auto;
        float: right;
        text-align: right;
        position: relative;
        height: 100%;
    }
    .main-navigation.icons-active {
        padding: 0;
    }
    .main-navigation ul.nav-menu > li {
        text-align: center;
    }
    .main-navigation ul.nav-menu > li > a {
        color: #000;
        position: relative;
        z-index: 10;
        transition: all 0.3s ease-in-out;
    }
    .main-navigation ul.nav-menu .current_page_item > a,
    .main-navigation ul.nav-menu .current-menu-item > a,
    .main-navigation ul.nav-menu .current_page_ancestor > a,
    .main-navigation ul.nav-menu .current-menu-ancestor > a,
    .main-navigation ul.nav-menu > li:hover > a,
    .main-navigation ul.nav-menu > li.focus > a {
        color: var(--primary-color);

    }
    .main-navigation ul.nav-menu li ul .current_page_item > a,
    .main-navigation ul.nav-menu li ul .current-menu-item > a,
    .main-navigation ul.nav-menu li ul .current_page_ancestor > a,
    .main-navigation ul.nav-menu li ul .current-menu-ancestor > a,
    .main-navigation ul.nav-menu > li:hover > a,
    .main-navigation ul.nav-menu > li.focus > a {
        color: var(--primary-color);

    }
    .main-navigation ul.nav-menu > li {
        text-align: center;
        padding: 13px 0;
        margin: 0 10px;
        position: relative;
        height: 100%;
    }
    .main-navigation.icons-active ul.nav-menu > li {
        padding: 15px 25px 8px;
    }
    .main-navigation ul.nav-menu > .menu-item-has-children > a:after {
        content: "\f078";
        padding-left: 5px;
        font-size: 10px;
        position: relative;
        bottom: 1px;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
    }
    .main-navigation ul ul .menu-item-has-children > a:before {
        content: "\f067";
        font-size: 10px;
        position: relative;
        top: 20px;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        right: 15px;
    }
    .main-navigation ul.nav-menu  {
        display: block !important;
        height: auto !important;
        position: relative;
        height: 100%!important;
    }
    .main-navigation ul ul {
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15);
        width: 250px;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li.focus > ul {
        left: auto;
        right: 0;
        display: block !important;
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    .main-navigation ul ul li:hover > ul,
    .main-navigation ul ul li.focus > ul {
        left: auto;
        right: 100%;
    }
    .main-navigation ul ul li:hover > a,
    .main-navigation ul ul li.focus > a {
        background-color: var(--primary-color);
        color: #fff;
    }
    .main-navigation ul.sub-menu > li:last-child > a {
        border-bottom: none;
    }
    .main-navigation ul ul li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    }
    .main-navigation ul ul > li:last-child {
        border-bottom: none;
    }
    .main-navigation ul ul ul {
        top: 5px;
    }
    .main-navigation ul ul li a:hover,
    .main-navigation ul ul li.current-menu-ancestor:hover > a {
        color: #fff !important;
    }
    .main-navigation ul.nav-menu > li > a > i,
    .main-navigation ul.nav-menu > li > a > i.wpmi-icon:not(.wpmi-label-1).wpmi-position-before {
        display: block;
        margin: 0 auto 10px;
    }
    .menu-toggle {
        height: 80px;
        position: absolute;
        top: 50%;
        right: 35px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .main-navigation .search-active .icon-search {
        display: none;
    }
    .main-navigation .search-active .icon-close {
        display: inline-block;
    }
    button.dropdown-toggle {
        display: none;
    }
    .menu-toggle {
        display: none;
    }
    .main-navigation ul {
        display: block;
    }
    .main-navigation li {
        display: inline-block;
    }
    .main-navigation .left-menu {
        padding-left: 50px;
    }
    .main-navigation ul.nav-menu > li.left-menu > a,
    .main-navigation ul.nav-menu > li.right-menu > a {
        padding-left: 5px;
        padding-right: 5px;
    }
    .main-navigation li.left-menu + li.right-menu:before {
        content: "/";
        position: absolute;
        top: 50%;
        margin-left: -6px;
        color: #fff;
        margin-top: -1px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .main-navigation form.search-form {
        border: 20px solid #111;
    }
    .main-navigation form.search-form input {
        background-color: #fff;
        border-color: #fff;
        color: #111;
    }
    #featured-slider article {
        padding: 345px 0;
    }
    .overlay-side {
        position: absolute;
        top: 0;
    }
    .right-sidebar #primary,
    .left-sidebar #primary {
        width: 70%;
        float: left;
        padding-right: 30px;
    }
    .right-sidebar #secondary,
    .left-sidebar #secondary {
        width: 30%;
        float: right;
    }
    .left-sidebar #primary {
        float: right;
        padding-right: 0;
        padding-left: 30px;
    }
    .no-sidebar #primary {
        width: 100%;
        float: none;
        padding-right: 0;
    }
}
@media screen and (min-width: 1900px) {
    #featured-slider article {
        padding: 400px 0;
    }
    .footer-widgets-area.section-gap {
        padding: 70px 0 50px;
    }
}
@media only screen and (max-width: 768px){
    .site-menu{
        gap: 0;
        justify-content: space-between;
    }
    #featured-slider .entry-container {
        right: 30%;
    }
    #featured-slider .entry-title {
        font-size: 45px;
    }
    .dropdown-toggle::after{
        display: none !important;
    }
}
@media only screen and (max-width: 425px){
    .site-menu {
        padding: 0 5px 0 30px;
        gap: 0;
    }
    #featured-slider .entry-container {
        right: 10%;
    }
    #mission-section,.featured-mission-item {
        display: block;
    }
    .center_image{
        width: 100%;
        margin-top: 30px;
    }
    .section-title h4 {
        font-size: 30px;
    }
    .site-branding {
        padding-left: 5px;
    }
    #featured-slider article{
        padding: 365px 0;
    }
    #featured-posts .entry-content p {
        padding-right: 0em;
    }
    .site-logo img {
        width: auto;
    }
    .header-main {
        flex-wrap: wrap;
        justify-content: center;
        position: static;
    }
    .social-links {
        position: absolute;
        left: auto;
        bottom: 20px;
    }
    .social-links a {
        display: inline-block;
        margin-right: 15px;
    }
    #featured-slider .slick-next {
        right: 55%;
    }
}
@media only screen and (max-width: 1023px) {
    #masthead {
        min-height: 86px;
    }
    .site-title {
        font-size: 26px;
    }
    .main-navigation ul ul {
        border-top: 1px solid rgba(0, 0, 0, 0.10);
    }
    .main-navigation ul ul ul {
        margin-top: 0;
    }
    .main-navigation ul.nav-menu li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
        display: block;
        width: 100%;
    }
    .main-navigation ul.nav-menu li:last-child {
        border-bottom: none;
    }
    .main-navigation ul.nav-menu > li {
        width: 100%;
        padding: 0;
    }
    .main-navigation ul ul li a {
        padding-left: 35px;
    }
    .main-navigation ul ul ul li a {
        padding-left: 60px;
    }
    .main-navigation ul ul ul ul li a {
        padding-left: 80px;
    }
    .main-navigation ul ul a {
        width: 100%;
    }
    .main-navigation ul ul,
    .main-navigation ul ul ul {
        box-shadow: none;
        float: none;
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 0;
        display: none;
    }
    .main-navigation ul.nav-menu > li:before {
        display: none;
    }
    .main-navigation .menu-item-has-children > a:before {
        content: "";
        float: right;
        position: relative;
        right: 0;
        background-color: rgba(255, 255, 255, 0.20);
        width: 1px;
        height: 25px;
    }
    .main-navigation .menu-item-has-children > a:after {
        padding-top: 3px;
    }
    .main-navigation ul.sub-menu li a {
        border-left: none;
    }
    .main-navigation ul.nav-menu {
        margin-right: 0;
        background-color: #fff;
        margin-top: 25px;
        border-top: 1px solid rgba(0, 0, 0, 0.10);
    }
    .main-navigation {
        position: static;
        width: auto;
    }
    .main-navigation a {
        color: #555555;
        padding: 12px 15px;
    }
    #masthead.site-header .main-navigation ul.nav-menu {
        margin-top: 0;
        position: absolute;
        left: 0;
        right: 0;
        width: auto;
        z-index: 10;
    }
    .main-navigation .search-menu a {
        display: none;
    }
    .main-navigation form.search-form input {
        background-color: #fff;
        border: none;
        min-height: 55px;
    }
    .main-navigation form.search-form button.search-submit {
        height: 59px;
    }
    .main-navigation form.search-form input {
        padding-left: 25px;
    }
    .body-overlay #content,
    .body-overlay #colophon {
        filter: blur(25px);
    }
    #page-site-header {
        padding: 250px 0;
    }
}
@media screen and (max-width: 992px) {
    #page-site-header {
        padding: 200px 0;
    }
    .comments-title,
    #reply-title {
        font-size: 28px;
    }
}
@media screen and (max-width: 767px) {
    #page-site-header .page-title {
        font-size: 32px;
    }
    .blog-posts-wrapper .post-item,
    .footer-widgets-area .hentry {
        text-align: center;
    }
    .comment-navigation .nav-previous,
    .posts-navigation .nav-previous,
    .post-navigation .nav-previous,
    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
        width: 100%;
        margin: 15px 0;
    }
    .post-navigation span.previous-article b,
    .post-navigations span.previous-article b,
    .post-navigation span.next-article b,
    .post-navigations span.next-article b {
        font-size: 18px;
    }
    #respond {
        margin-top: 40px;
    }
    .comment-meta img {
        margin-right: 15px;
    }
    .comments-title,
    #reply-title {
        margin-bottom: 0;
    }
    #commentform p.comment-form-comment,
    #commentform p.form-submit {
        margin-top: 21px;
    }
    nav.navigation.pagination,
    #secondary {
        margin-top: 30px;
    }
    .comments-title,
    #reply-title {
        font-size: 26px;
    }
    #comments {
        margin-top: 40px;
    }
    .tags-links {
        margin-bottom: 25px;
    }
}
@media screen and (max-width: 567px) {
    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        top: 0;
    }
    .pagination .prev.page-numbers:before,
    .pagination .next.page-numbers:before {
        width: 35px;
        height: 10px;
    }
    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        margin-left: 0;
        margin-right: 0;
    }
    blockquote.alignright {
        margin-left: 0;
    }
    .comment-meta img {
        margin: 0 0 25px;
        float: none;
    }
    .comment-meta .url,
    .comment-meta .fn {
        display: block;
    }
    .comment-content {
        padding-left: 0;
    }
    #comments ol.children {
        margin-left: 50px;
    }
    .reply {
        padding-left: 0;
    }
    .footer-widgets-area .hentry:last-child,
    .footer-widgets-area.col-3 .hentry:last-child {
        margin-bottom: 0;
        padding-right: 0;
    }
}

/*-------- Wocommerce CSS -------*/
.woocommerce-account .addresses .title .edit{
  float: left !important;
  background: var(--primary-color);
  color: #fff;
  padding: 4px 10px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 20px;
}
button.woosq-btn {
    display: none;
}
a.button.yith-wcqv-button{
    display: none !important;
}
.woocommerce ul.products li.product {
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: #000000 0px 0px 8px;
}
.woocommerce ul.products li.product a img {
    border-radius: 8px;
}
table.wc-block-cart-items.wp-block-woocommerce-cart-line-items-block tr {
    border: 1px solid #000;
}
.woocommerce span.onsale {
    padding: 0;
    border-radius: 8px;
    background-color: var(--primary-color);
}
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 20px;
    color: #000;
    font-weight: 700;
    padding-top: 0;
}
.woocommerce ul.products li.product .price {
    font-size: 15px;
    color: var(--primary-color);
    margin-bottom: 0;
}
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.added_to_cart.wc-forward, .woocommerce .woocommerce-message .button, .woocommerce div.product form.cart .button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 6px;
    line-height: 1.2;
}
.woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product a.added_to_cart.wc-forward:hover, .woocommerce .woocommerce-message .button:hover, .woocommerce div.product form.cart .button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
    background-color: #000;
    color: #fff;
}
.woocommerce ul.products li.product a.added_to_cart.wc-forward {
    padding: 10px 15px;
    line-height: 1;
    margin-left: 10px;
    font-weight: 500;
}
.woocommerce nav.woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul li{
    border: 0;
}
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
    margin:  5px;
    background-color: #fff;
    padding: 10px;
    border-radius: 3px;
    font-weight: 500;
    box-shadow: #000000 0px 0px 8px;
}
.woocommerce nav.woocommerce-pagination ul li span.current,.woocommerce nav.woocommerce-pagination ul li a:hover {
    background-color: var(--primary-color);
    color: #fff;
}
.woocommerce-message {
    border-color: var(--primary-color);
}
.woocommerce-message::before, .woocommerce div.product p.price {
    color: var(--primary-color);
}
.woocommerce .quantity .qty {
    width: 5em;
    border: 1px solid #666;
    padding: 5px;
    line-height: 1.5;
    border-radius: 5px;
}
.woocommerce-product-details__short-description {
    margin-bottom: 15px;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    padding: 5px;
}
.product_meta span {
    display: block;
}
.woocommerce .select2-container--default .select2-selection--single , .woocommerce input#billing_phone{
  padding: 10px 0px;
  border-radius: 0px;
  border: 1px solid #ddd;
}
.woocommerce input#billing_phone{
  padding: 10px;
}
.woocommerce .select2-container .select2-selection--single, .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 45px;
}
.woocommerce li.woocommerce-MyAccount-navigation-link a {
    text-decoration: none;
    color: #fff;
    background-color: var(--primary-color);
    padding: 10px;
    display: block;
    border-radius: 8px;
    font-weight: 500;
}
.woocommerce li.woocommerce-MyAccount-navigation-link {
    list-style: none;
    margin-bottom: 10px;
}
<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Prime Beauty Salon
 */
/**
* Hook - prime_beauty_salon_action_doctype.
*
* @hooked prime_beauty_salon_doctype -  10
*/
do_action( 'prime_beauty_salon_action_doctype' );
?>
<head>
    <?php
    /**
    * Hook - prime_beauty_salon_action_head.
    *
    * @hooked prime_beauty_salon_head -  10
    */
    do_action( 'prime_beauty_salon_action_head' );
    ?>

    <?php wp_head(); ?>
	<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>

<body <?php body_class(); ?>>
    <?php do_action( 'wp_body_open' ); ?>

        <?php
$prime_beauty_salon_preloader_setting = prime_beauty_salon_get_option('prime_beauty_salon_header_donate_preloader_setting', false);
$prime_beauty_salon_loader_layout = get_theme_mod('prime_beauty_salon_loader_layout_setting', 'load');

if ($prime_beauty_salon_preloader_setting && $prime_beauty_salon_loader_layout !== 'none') { ?>
    <div class="preloader">
        <?php if ($prime_beauty_salon_loader_layout === 'both' || $prime_beauty_salon_loader_layout === 'load') { ?>
            <div class="load">
                <div class="loader"></div>
            </div>
        <?php } ?>
        <?php if ($prime_beauty_salon_loader_layout === 'both' || $prime_beauty_salon_loader_layout === 'load-one') { ?>
            <div class="load-one">
                <hr/><hr/><hr/><hr/>
            </div>
        <?php } ?>
        <?php if ($prime_beauty_salon_loader_layout === 'both' || $prime_beauty_salon_loader_layout === 'ctn-preloader') { ?>
        <div id="preloader">
            <div id="ctn-preloader" class="ctn-preloader">
                <div class="animation-preloader">
                    
                    <!-- Spinner -->
                    <div class="spinner"></div>
                    
                    <!-- Start: Text Loading -->
                    <div class="txt-loading">
                        <span data-text-preloader="B" class="letters-loading">B</span>
                        <span data-text-preloader="E" class="letters-loading">E</span>
                        <span data-text-preloader="A" class="letters-loading">A</span>
                        <span data-text-preloader="U" class="letters-loading">U</span>
                        <span data-text-preloader="T" class="letters-loading">T</span>
                        <span data-text-preloader="Y" class="letters-loading">Y</span>
                        <span data-text-preloader="" class="letters-loading">&nbsp</span>
                        <span data-text-preloader="S" class="letters-loading">S</span>
                        <span data-text-preloader="A" class="letters-loading">A</span>
                        <span data-text-preloader="L" class="letters-loading">L</span>
                        <span data-text-preloader="O" class="letters-loading">O</span>
                        <span data-text-preloader="N" class="letters-loading">N</span>
                    </div>
                    <!-- End: Text Loading -->

                </div>

                <!-- Start: Preloader sides - Model 1 -->
                <div class="loader-section section-left"></div>
                <div class="loader-section section-right"></div>
                <!-- End: Preloader sides - Model 1 -->

            </div>
        </div>
        <?php } ?>
    </div>
<?php } ?>
    <?php

    /**
    * Hook - prime_beauty_salon_action_before.
    *
    * @hooked prime_beauty_salon_page_start - 10
    */
    do_action( 'prime_beauty_salon_action_before' );

    /**
    *
    * @hooked prime_beauty_salon_header_start - 10
    */
    do_action( 'prime_beauty_salon_action_before_header' );

    /**
    *
    *@hooked prime_beauty_salon_site_branding - 10
    *@hooked prime_beauty_salon_header_end - 15 
    */
    do_action('prime_beauty_salon_action_header');

    /**
    *
    * @hooked prime_beauty_salon_content_start - 10
    */
    do_action( 'prime_beauty_salon_action_before_content' );

    /**
     * Banner start
     * 
     * @hooked prime_beauty_salon_banner_header - 10
    */
    do_action( 'prime_beauty_salon_banner_header' );  
/* Sayfanın iki yanını genel olarak içeri al */
#content,
.site-content{
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Bootstrap row negatif marginlerini iptal et (kenara yaslanma sorunu bundan) */
#content .row,
.site-content .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Tablet */
@media (max-width: 1024px){
  #content,
  .site-content{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Mobil */
@media (max-width: 480px){
  #content,
  .site-content{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}