/*
Theme Name: Present Morocco
Author: Yassine Bahi 2
Version: 1.3
Description: HTML to WordPress converted theme
*/




html {
    box-sizing: border-box
}

*,*:before,*:after {
    box-sizing: inherit
}

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    color: #000 !important;
    background-color: #f1f1f1 !important;
    margin: 0
}
/*
p
{
	font-family: "More Sugar Thin";
	font-size: 18px;
}
li
{
	font-family: "More Sugar Thin";
    font-weight: bold;
}

.excerpt p, p.excerpt, b.excerpt {
	font-size: 15px;
}
*/

b.excerpt-more {
	font-size: 14px;
}


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

summary {
    display: list-item
}

audio,canvas,progress,video {
    display: inline-block
}

progress {
    vertical-align: baseline
}

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



/* adding style *//* adding style */
 /* language menu */ 
.rem-lang-item a
 {
    background: #1db8b8;
    margin-right: 100px;
}
li.menu-item.rem-lang-item
 {
    float: right;
}
.menu ul
 {
    list-style: none;
    margin: 0;
}

li.rem-padding-16
 {
    background: white;
}
.rem-padding-16 a
 {
    text-decoration: none;
}
img.rem-left.rem-margin-right {
    width: 100px;
    height: 80px;
}
img.custom-logo
 {
    max-width: 500px;
    height: auto;
}

img.image.wp-image-137.attachment-medium.size-medium
 {
    width: 100%;
}
/* adding style *//* adding style */
/* adding style *//* adding style */

/** Starting Css **/


.rem-padding-32 {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.rem-center {
    text-align: center !important;
}
.rem-container, .rem-panel {
    padding: 0.01em 16px;
}
figcaption, figure, footer, header, main, menu, nav, section {
    display: block;
}
.rem-light-grey, .rem-hover-light-grey:hover, .rem-light-gray, .rem-hover-light-gray:hover {
    color: #000 !important;
    background-color: #f1f1f1 !important;
}
body, h1, h2, h3, h4, h5 {
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

/** Content Css **/

.rem-light-grey, .rem-hover-light-grey:hover, .rem-light-gray, .rem-hover-light-gray:hover {
    color: #000 !important;
    background-color: #f1f1f1 !important;
}
.rem-container:after, .rem-container:before, .rem-panel:after, .rem-panel:before, .rem-row:after, .rem-row:before, .rem-row-padding:after, .rem-row-padding:before, .rem-cell-row:before, .rem-cell-row:after, .rem-clear:after, .rem-clear:before, .rem-bar:before, .rem-bar:after {
    content: "";
    display: table;
    clear: both;
}
.rem-container:after, .rem-container:before, .rem-panel:after, .rem-panel:before, .rem-row:after, .rem-row:before, .rem-row-padding:after, .rem-row-padding:before, .rem-cell-row:before, .rem-cell-row:after, .rem-clear:after, .rem-clear:before, .rem-bar:before, .rem-bar:after {
    content: "";
    display: table;
    clear: both;
}


/** Nav Menu Css **/

/* Add a black background color to the top navigation */

.topnav {
  background-color: #333;
  overflow: hidden;
  margin-bottom: 50px;
  list-style: none;
}

/* Handle list items */
.topnav li {
    float: left;
    list-style: none;
}

/* Style the links inside the navigation bar */
.topnav a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
	letter-spacing: 1px;
}

/* Style the first link (Home) */
.topnav li:first-child a {
     background: #b8713b;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.topnav li:first-child {
    
    width: 27%;
}

/* Add a color to the active/current link */


/* Hide the icon by default */
a.icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all list items, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 993px) {
  .topnav li:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 993px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
	  width: 100%;
  }
}

@media screen and (max-width: 993px) {
  .rem-lang-item a {margin-right: 0;}

  }

/** Articles Css **/



@media (min-width: 993px) {
    .rem-col.l8 {
        width: 66.66666%;
    }
}
h3.article-title {
    font-size: 18px;
}
.rem-col, .rem-half, .rem-third, .rem-twothird, .rem-threequarter, .rem-quarter {
    float: left;
    width: 100%;
}
.rem-light-grey, .rem-hover-light-grey:hover, .rem-light-gray, .rem-hover-light-gray:hover {
    color: #000 !important;
    background-color: #f1f1f1 !important;
}
.rem-white, .rem-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important;
}
.rem-margin {
    margin: 16px !important;
}
.rem-card-4, .rem-hover-shadow:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}
img {
    vertical-align: middle;
}
.rem-container, .rem-panel {
    padding: 0.01em 16px;
	width: 100%;
}
.rem-container:after, .rem-container:before, .rem-panel:after, .rem-panel:before, .rem-row:after, .rem-row:before, .rem-row-padding:after, .rem-row-padding:before, .rem-cell-row:before, .rem-cell-row:after, .rem-clear:after, .rem-clear:before, .rem-bar:before, .rem-bar:after {
    content: "";
    display: table;
    clear: both;
}
b, strong {
  
}
.rem-opacity, .rem-hover-opacity:hover {
    opacity: 0.60;
}
.rem-container:after, .rem-container:before, .rem-panel:after, .rem-panel:before, .rem-row:after, .rem-row:before, .rem-row-padding:after, .rem-row-padding:before, .rem-cell-row:before, .rem-cell-row:after, .rem-clear:after, .rem-clear:before, .rem-bar:before, .rem-bar:after {
    content: "";
    display: table;
    clear: both;
}
.rem-white, .rem-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important;
}
@media (min-width: 601px) {
    .rem-col.m8, .rem-twothird {
        width: 66.66666%;
    }
}
.rem-container:after, .rem-container:before, .rem-panel:after, .rem-panel:before, .rem-row:after, .rem-row:before, .rem-row-padding:after, .rem-row-padding:before, .rem-cell-row:before, .rem-cell-row:after, .rem-clear:after, .rem-clear:before, .rem-bar:before, .rem-bar:after {
    content: "";
    display: table;
    clear: both;
}

.rem-col, .rem-half, .rem-third, .rem-twothird, .rem-threequarter, .rem-quarter {
    float: left;
    width: 100%;
}
@media (min-width: 601px) {
    .rem-col.m4, .rem-third {
        width: 33.33333%;
    }
}
.rem-right {
    float: right !important;
    margin-top:inherit;
}

@media (max-width: 601px) {
.rem-right {
   
    display: none;
}
    }


.rem-border {
    border: 1px solid #ccc !important;
}
.rem-btn, .rem-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.rem-btn, .rem-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}
button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button;
}
button, select {
    text-transform: none;
}
.rem-white, .rem-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important;
}
button, input, select, textarea, optgroup {
    font: inherit;
    margin: 0;
}
*, *:before, *:after {
    box-sizing: inherit;
}

*, *:before, *:after {
    box-sizing: inherit;
}
.rem-white, .rem-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important;
}
.rem-card-4, .rem-hover-shadow:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .rem-card-4.rem-margin.rem-white:not(:first-child) 
  .topnav a.icon {
    float: right;
    display: block;
  }
}



/** END ARTICLES Css **/

/** SideBars Css **/

@media (min-width: 993px) {
    .rem-col.l4 {
        width: 33.33333%;
    }
}

/** Card SideBar Css **/

.rem-margin-top {
    margin-top: 16px !important;
}
.rem-margin {
    margin-bottom: 40px !important;
}
.rem-card, .rem-card-2 {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

/** Post SideBar Css **/

.rem-ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.rem-ul li {
    padding: 8px 16px;
    border-bottom: 1px solid #ddd;
	overflow: hidden;
}
.rem-padding-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.rem-ul li:last-child {
    border-bottom: none;
}
.rem-padding-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.rem-left {
    float: left !important;
}

/** Tags SideBar Css **/


.rem-badge, .rem-tag {
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
}
.rem-small {
    font-size: 12px !important;
}
.rem-margin-bottom {
    margin-bottom: 16px !important;
}
/*
.rem-large {
    font-size: 18px !important;
}
*/
.rem-ul li {
    padding: 8px 16px;
    border-bottom: 1px solid #ddd;
}
.rem-padding-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.rem-left {
    float: left !important;
}
.rem-margin-right {
    margin-right: 16px !important;
}
/** Footer Css **/

.rem-dark-grey, .rem-hover-dark-grey:hover, .rem-dark-gray, .rem-hover-dark-gray:hover {
    color: #fff !important;
    background-color: #616161 !important;
}

.rem-margin-top {
    margin-top: 16px !important;
}
.rem-black, .rem-hover-black:hover {
    color: #fff !important;
    background-color: #000 !important;
}

.rem-disabled, .rem-btn:disabled, .rem-button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}
a {
    color: inherit;
}
a {
    background-color: transparent;
}
hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0;
}




/** Display content by flex Css **/
@media (min-width: 993px) {
.rem-card-4.rem-margin.rem-white {
    display: flex;
    padding: 10px;
}
}
.article-img  {
     width : 100%;
    
    }
/** Display content by flex Css **/
@media (min-width: 993px) {
.article-img  {
    width : 40%;
	height: 235px;
    
    }
}



/* PAGINATION FOR POSTS */

/* Pagination wrapper */
.pagination-wrapper {
    margin: 40px 0;
    text-align: center;
}

/* Nav links */
.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Page numbers & arrows */
.nav-links a,
.nav-links span {
    min-width: 40px;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
    background: #fff;
    transition: all 0.3s ease;
}

/* Hover effect */
.nav-links a:hover {
    background: #333333;
    color: #fff;
    border-color: #333333;
}

/* Current page */
.nav-links .current {
    background: #333333;
    color: #fff;
    border-color: #333333;
}

/* Disabled links */
.nav-links .disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Mobile optimization */
@media (max-width: 600px) {
    .nav-links a,
    .nav-links span {
        padding: 8px 10px;
        min-width: 34px;
        font-size: 13px;
    }
}

/* Comment Area */
.comments-area {
    margin-top: 40px;
    font-family: inherit;
}

/* Single Comment */
.comment {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Comment Author */
.comment-author {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.comment-author img {
    border-radius: 50%;
    margin-right: 15px;
}

.comment-author .fn {
    font-weight: 600;
    color: #222;
}

/* Comment Date */
.comment-metadata {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}

/* Comment Text */
.comment-content {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

/* Reply Link */
.comment-reply-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    color: #c59d5f;
    text-decoration: none;
    font-weight: 500;
}

.comment-reply-link:hover {
    text-decoration: underline;
}

/* Nested Comments */
.children {
    margin-left: 40px;
    margin-top: 20px;
}

/* Comment Form */
.comment-respond {
    margin-top: 40px;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    font-size: 14px;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #c59d5f;
}

/* Submit Button */
.comment-form .submit {
    background: #c59d5f;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.comment-form .submit:hover {
    background: #b0894f;
}

/* add more pictures */

.image-row {
        margin-bottom: 10px;
    }

    .image-row img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        display: block;
        margin-bottom: 5px;
        border: 1px solid #ccc;
    }
.image-single
 {	 
	 margin: 26px;
     max-width: 35%;
}
.image-row img {
    display: block;
    margin-bottom: 5px;
    width: 100px;
}
.image-single img
 {
    width: 100%;
	 margin-bottom: 40px;
	 }

.rem-card-4.rem-margin.rem-white
 {
    overflow: hidden;
}


/* Mobile optimization */
@media (max-width: 993px) {
    
    .image-single
 {	 
	
    max-width: 100%;        
	display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
	 padding: 16px;
	 margin: 0;
}
    }

@media (max-width: 993px) {
    
    .image-single img
 {	 
	
    width: 100%;
    height: 100%;
    padding: 2px;
	margin: 0;
	 object-fit: cover;
}
    }




/* Language Switcher Container */
.rem-lang-switcher {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 15px;
  align-items: center;
	background: white;
}

/* List items */
.rem-lang-switcher li {
  position: relative;
}

/* Links */
.rem-lang-switcher a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: #333;
  border-radius: 20px;
  border: 1px solid #ddd;
  transition: all 0.25s ease;
}

/* Hover effect */
.rem-lang-switcher a:hover {
  background-color: #f2f2f2;
  color: #000;
  border-color: #bbb;
}

/* Current language */
.rem-lang-switcher .current-lang a {
  background-color: #1e73be; /* change to your brand color */
  color: #fff;
  border-color: #1e73be;
  cursor: default;
}

/* Disable hover on active language */
.rem-lang-switcher .current-lang a:hover {
  background-color: #1e73be;
  color: #fff;
}

/* Mobile-friendly */
@media (max-width: 600px) {
  .rem-lang-switcher a {
    padding: 5px 10px;
    font-size: 13px;
  }
}

/*
body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  color: #333;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}
*/