/*
Theme Name: Janoub
Author: Trenddc
Description: A simple theme for Janoub
Version: 0.0.1
*/

body {
  direction: rtl;
}

header.header-wrap {
  background-position: center;
  background-size: cover;
  height: 100px;
}

body.customize-support {
  margin: 0 !important;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 16px;
  padding-left: 16px;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.content-wrapper {
  display: flex;
  gap: 2.5rem;
}

aside.sidebar {
  width: 450px;
  background-position: top;
  background-size: contain;
  position: sticky;
}

.content {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;

}

.container h1 {
  width: calc(100% - 380px);
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 1.8;
}
img.featured-image {
    aspect-ratio: 16 / 9;
    object-fit: fill;
    border-radius: 12px;
    margin-bottom: 2.5rem;
}

.content h2{
    font-size: 24px;
    line-height: 32px;
    margin: 20px;
}
.content{
    margin-bottom: 20px !important;
    line-height: 28px !important;
    font-size: 16px !important;
    color: #6c6f72 !important;
        display: revert;
   
}
.content h3 , .content h4{
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 20px;
    color: #99cc00;
}
.content > img {
    width: 100%;
    height: fit-content;
}
footer.footer-wrap {
    height: 700px;
    background-position: top;
    background-size: cover;
    margin-top: 80px;
}

body {
    font-family: 'Alexandria';
}

@media  screen and (max-width: 1024px) {
    .content-wrapper {
        flex-direction: column-reverse;
    }
    .content {
        width: 100%;
    }
    aside.sidebar {
        width: 100%;
    }
    
}