/*
Theme Name: nonagram
Theme URI: #
Tags: portfolio, blog, photography, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready
Author: Mohammed RAJI 
Author URI: #
Description: Nanogam is a modern, clean, and responsive WordPress theme designed for creative professionals. It features a sleek design, customizable options, and full support for the block editor, making it perfect for showcasing portfolios, blogs, and photography. The theme is fully compatible with the latest WordPress features and provides an intuitive user experience.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: nanogam
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.
*/

:root{
  --vermilion: #FF3C38
}
@font-face {
  font-family: 'Montserrat Arabic';
  src: url('assets/fonts/Montserrat-Arabic-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
  padding: 0;
}
/* services section */

  button and input element */
a:focus,
a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
outline: 0;
}
    .services {
      margin: auto;
      text-align: right;
      position: relative;
      z-index: 1;
    }

    .services h2 {
      font-size: 20px;
      border-bottom: 1px solid #000;
      display: inline-block;
      padding-bottom: 3px;
      margin-bottom: 20px;
    }

    .services ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .services li {
      position: relative;
      margin: 20px 0;
      padding-left: 40px; /* مساحة لليسار */
    }

    /* النقطة */
    .services li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: pink;
      box-shadow: 0 0 8px rgba(255,0,0,0.4);
      animation: pulse 1.8s infinite;
    }

    /* الخط */
    .services li::after {
      content: "";
      position: absolute;
      left: 20px;
      top: 50%;
      width: 90%; /* طول الخط */
      height: 2px;
      background: #ddd;
      transform: translateY(-50%);
    }

    /* نص العنصر */
    .services li span {
      margin-left: 70px; /* إزاحة النص بعد الخط */

    background-color: #fff;
    z-index: 100;
    position: relative;
    padding-left: 10px;

    }

    /* زر */
    .btn {
      display: block;
      width: 100%;
      text-align: center;
      background: #ffe6e6;
      color: red;
      font-weight: bold;
      padding: 20px;
      margin-top: 20px;
      font-size: 18px;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
    }

    .btn:hover {
      background: #ffcccc;
    }

    /* أنيميشن النقط */
    @keyframes pulse {
      0% {
        transform: scale(1) translateY(-50%);
        opacity: 1;
      }
      50% {
        transform: scale(1.3) translateY(-50%);
        opacity: 0.6;
      }
      100% {
        transform: scale(1) translateY(-50%);
        opacity: 1;
      }
    }




    /* footer */
    /* ====== Footer Style ====== */
.site-footer {
  position: relative;
  background-color: #f9dfe2; /* الوردي الفاتح */
  color: #000;
  font-family: "Cairo", sans-serif;
  z-index: 2;
}

.footer-top {
  padding: 50px 20px;
  display: flex;
  justify-content: center;
}

.footer-widgets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  width: 100%;
}

.footer-column h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}

.footer-column p {
  font-size: 15px;
  line-height: 1.8;
}

/* ====== Social Icons ====== */
.footer-social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 15px;
}

.footer-social li a svg {
  width: 20px;
  height: 20px;
  fill: #000;
  transition: all 0.3s ease;
}

.footer-social li a:hover svg {
  fill: #e63946; /* أحمر عند hover */
}

/* ====== Logo + Slogan ====== */
.footer-bottom-bar {
  margin-bottom: 40px !important;
}

.footer-slogan {
  font-size: 24px;
  font-weight: 700;
  color: #e63946; /* نص أحمر */
  text-align: right;
}

/* ====== Footer Bottom ====== */
.footer-bottom {
  border-top: 1px solid #ccc;
  padding: 15px 20px;
  background-color: #fff;
  text-align: center;
}

.footer-bottom p {
  margin: 0;
  font-size: 14px;
  color: #444;
}
.top-bar-container{
  position: relative;
  background-color: #000;
  z-index: 2;
}
.top-bar {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    margin: auto;
}

.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
}

.footer-bottom-bar .footer-logo img {
    width: 250px;
        object-fit: cover;
}

.social-icons svg {
    width: 50px;
    fill: blue;
}
/* ====== Responsive ====== */
@media (max-width: 768px) {
  .footer-widgets {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-slogan {
    text-align: center;
  }
}



/* footer */
.top-bar{
  max-width: 1200px;
}
.logo img {
    width: 125px;
    height: auto;
}

.top-bar p{
  font-family: 'Montserrat Arabic', sans-serif;
}

/* footer top */
.footer-slogan {
    font-family: 'Montserrat Arabic', sans-serif;
    font-size: 50px !important;
    font-weight: 100;
    margin: 0;
}

.footer-top .footer-column{
  text-align: right;
}

.footer-column h3 {
    font-family: 'Montserrat Arabic', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}
.footer-social {
    flex-direction: column;
}

.footer-widgets{
      grid-template-columns: 1fr 1fr 1fr 1fr !important;
}

.footer-widgets .footer-column:nth-child(3){
  grid-column: span 2;
}

.footer-bottom-bar{
  max-width: 1200px;
  margin: auto;
}

.footer-bottom-bar .logo img {
    width: 180px;
    object-fit: cover;
}


.footer-bottom {
   
    background-color: #f9dfe2 !important;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-bottom-bar .language img {
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
}

/* ====== Responsive ====== */
@media (max-width: 768px) {
  .footer-widgets {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-slogan {
    text-align: center;
  }
}



/* work slider */



.worksSwiper {
    width: 1200px;
    margin: auto;
    padding-top: 80px !important; /* space for arrows */
    padding-bottom: 40px !important;
  }

.worksSwiper .swiper-wrapper {
    height: auto;
}


.worksSwiper .swiper-slide {
    position: relative;
    height: 250px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    color: #000;
    transition: all 0.3s ease;
  }

  /* Overlay for readability */
.worksSwiper .swiper-slide::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    pointer-events: none;
  }

  /* Title text */
.worksSwiper .slide-title {
    position: absolute;
    left: 15px;
    bottom: 15px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    z-index: 2;
  }

  /* Arrows above center */
.worksSwiper .swiper-button-prev, 
.worksSwiper .swiper-button-next {
    top: 20px;
    color: #f8bcbc;
  }

  .worksSwiper .swiper-button-prev {
    left: 50%;
    transform: translateX(-200%);
    margin-right: 40px;
  }

  .worksSwiper .swiper-button-next {
    right: 50%;
    transform: translateX(200%);
    transform: rotate(180deg) !important;
    margin-right: -40px;
  }

  /* Arabic title style */
  .section-title {
font-family: 'Montserrat Arabic', sans-serif;
        text-align: right;
    font-size: 20px;
    font-weight: bold;
    /* margin-bottom: 10px; */
    max-width: 1200px;
    margin: auto;
    margin-bottom: 10px;
  }
  .section-title span {
    border-bottom: 1px solid #000;
    font-size: 25px;
  }

.logo-slider{
  padding: 0 50px !important;
}

.logo-slider-wrapper {
    max-width: 1200px;
    margin: auto;
    border-bottom: 1px solid red;
    border-top: 1px solid red;
    margin-top: 50px;
}


.logo-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.logo-slider-wrapper .swiper-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 10px; /* arrows under slider */
}

/* Example: arrows floating outside left/right */
.logo-slider-wrapper .swiper-button-prev,
.logo-slider-wrapper .swiper-button-next {
  position: absolute;
    cursor: pointer;
    display: block;
}

.logo-slider-wrapper .swiper-button-prev {
  left: 0px; /* outside left */
}

.logo-slider-wrapper .swiper-button-next {
  right: 0px; /* outside right */
  transform: rotate(180deg);
}


.hamburger{
  z-index: 1 !important;
}

.single-works .hamburger{
     position: relative !important;
    left: auto !important;
    bottom: auto;
    width: auto;
    height: auto;
}

.menu{
  cursor: pointer !important;
}

/* worksSwiperPage */
.mySwiperpage{
  height: 400px !important;
  width: 1200px !important;
  margin: auto;
}
.mySwiperpage .swiper-wrapper{
  align-items: center;
}
/* .mySwiperpage .swiper-slide-active {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
} */
 .mySwiperpage .swiper-slide {
  height: 150px !important;
}

.mySwiperpage .swiper-slide-active + .swiper-slide {
     border: 2px solid red;
    transform: scale(2.5);
    height: 100% !important;
    background-size: cover;
    height: 150px !important;
}
.contact-section h1,
.contact-section h2,
.contact-section h3,
.services h2,
.services li span{
  font-family: 'Montserrat Arabic', sans-serif;
}





/* intro */

    /* .intro-section {
      background: #fdf4f6;
      padding: 60px 20px;
      position: relative;
      height: 100vh;
    }

    .intro-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('http://localhost/nano/wp-content/uploads/2025/10/image2.jpg') no-repeat center;
      background-size: cover;
      opacity: 0.1;
      z-index: 0;
      width: 80%
    }

    */

.intro-section {
  position: relative;
  min-height: 100vh;
  z-index: 2;
  background: none; /* نحذف الخلفية من هنا */
  overflow: hidden;
}

/* .intro-section::before { */
.main.main--demo-6::before{
  content: "";
  position: fixed; /* ثابت في الشاشة */
  top: 0;
  left: 0;
  width: 100vw;
  width: calc(100% - 200px);

  height: 100vh; /* نفس ارتفاع الشاشة */
  background: url('https://nanogram.nanogram.ma/wp-content/uploads/2025/07/image2.png') no-repeat center center;
  background-size: cover;
  z-index: 0;
  opacity: 1;
}

/* باقي السيكسيونات */
section {
  position: relative;
  z-index: 3; /* فوق الخلفية */
  background: white; /* لون أو محتوى فوق الخلفية */
}


.intro-content {
  font-family: 'Montserrat Arabic', sans-serif;
      position: relative;
      z-index: 1;
      max-width: 800px;
      margin: 0 auto;
      line-height: 2;
      color: #222;
      text-align: right;
    } 



    .intro-content h2 {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #000;
    }

    .intro-content p {
      font-size: 20px;
      margin-bottom: 15px;
    }

    .highlight {
      color: #e63946;
      font-weight: bold;
      margin-top: 30px;
      display: block;
      text-align: center;
    }

    .logos {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      gap: 40px;
    }

    .logos img {
      height: 60px;
    }


/* Old Contact Form Styles Removed to avoid conflict with new modern redesign */

/*  */
/* ====== Map Section ====== */
#map {
  width: 100%;
  height: 400px;
  margin: 40px 0 0 0 ;
  border: none;
  filter: grayscale(100%);
}

.contact-info {
    max-width: 1200px;
    margin: auto;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 60px;
}

.contact-info .contact-item {
    text-align: center;
}


/* إعداد الصفحة العامة */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow-x: hidden;
}

.main-bg-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
}

.main-bg-wrap .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.main-bg-wrap .bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* تراكب خفيف لجعل النص واضحًا فوق الصورة إن وُجد */
.bg-img::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}

/* قسم البداية (intro-section) */
.intro-section {
  position: relative;
  min-height: 100vh;
  background: white;
  padding: 120px 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0.8;
}

/* محتوى النصوص داخل intro-section */
.intro-section .intro-content {
  max-width: 1200px;
  margin: 0 auto;
  color: #222;
}

.intro-section h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.intro-section p {
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 15px;
  direction: rtl;
}

.intro-section .highlight {
    margin-top: 30px;
    text-align: center;
    color: #e63946;
    font-size: 30px;
    margin-bottom: 10px;
}

/* إضافة مسافة للأقسام التالية لتظهر فوق الصورة */
.services, 
.other-section {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 100px 0;
}


section.works-section,
.blog-section{
  padding: 50px 0;
}
.blog-section{
  background-color: #fff;
}



.menu-icon span{
  display: block;
    width: 25px;
    height: 2px;
    margin: 5px 0;
    background: var(--vermilion);
}










/* === Comments Section (Classic Layout) === */
.comments-area {
  margin-top: 50px;
}

.comments-title {
  font-size: 1.5rem;
  margin-bottom: 30px;
  color: #222;
  font-weight: 600;
}

/* Comment list */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

/* Avatar */
.comment .avatar {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

/* Comment body */
.comment-body {
  flex: 1;
}

/* Meta: author + date */
.comment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.comment-author a {
  color: inherit;
  text-decoration: none;
}

.comment-metadata {
  font-size: 0.85rem;
  color: #888;
}

/* Comment text */
.comment-content {
  color: #333;
  line-height: 1.6;
  margin-top: 5px;
}

.comment-content p {
  margin-bottom: 10px;
}

/* Reply link */
.comment-reply-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--vermilion);
  text-decoration: none;
  border: 1px solid var(--vermilion);
  padding: 4px 10px;
  background: #fff;
  transition: 0.3s;
}

.comment-reply-link:hover {
  background: var(--vermilion);
  color: #fff;
}

/* Comment form */
.comment-respond {
  margin-top: 50px;
}

.comment-respond textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"] {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 1rem;
  margin-bottom: 15px;
  transition: 0.3s;
}

.comment-respond textarea:focus,
.comment-respond input:focus {
  border-color: var(--vermilion);
  box-shadow: 0 0 0 3px rgba(255, 80, 0, 0.1);
  outline: none;
}

.comment-respond ::placeholder {
  color: #aaa;
  font-style: italic;
}

/* Submit button */
.submit-comment-btn {
  background-color: var(--vermilion);
  color: #fff;
  border: none;
  padding: 12px 30px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
}

.submit-comment-btn:hover {
  background-color: #d14400;
}

.comment-author-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.comment-form-cookies-consent{
  margin-bottom: 25px;
}
/* single work */
.site-main.work-single {
    padding: 0 15px 50px 15px;
}

header.site-header {
    margin: auto;
    background-color: #ffecee;
    padding: 0 10px;
}

.admin-bar header.site-header {
  margin-top: 33px;
}


.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; /* add horizontal padding for small screens */
  box-sizing: border-box;
  position: relative;
}

/* Large tablets and small desktops */
@media (max-width: 992px) {
  .container {
    max-width: 900px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .container {
    max-width: 700px;
    padding: 0 15px;
  }
}

/* Phones */
@media (max-width: 576px) {
  .container {
    max-width: 100%;
    padding: 0 10px;
  }
}


.worksSwiper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 80px !important;
  padding-bottom: 40px !important;
  box-sizing: border-box;
}

/* Large tablets */
@media (max-width: 992px) {
  .worksSwiper {
    max-width: 900px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .worksSwiper {
    max-width: 700px;
  }
}

/* Phones */
@media (max-width: 576px) {
  .worksSwiper {
    max-width: 100%;
  }

  .top-bar {
    flex-direction: column-reverse;
    gap: 15px;
}

.top-bar p {
    font-size: 25px;
    text-align: center;
}
    .footer-widgets {
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        align-items: end;
        
    }
}

.intro-section .intro-content {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  color: #222;
  padding: 0 20px; /* ensures content doesn’t touch edges */
  box-sizing: border-box;
}

/* Large tablets */
@media (max-width: 992px) {
  .intro-section .intro-content {
    max-width: 900px;
    padding: 0 15px;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .intro-section .intro-content {
    max-width: 700px;
    padding: 0 15px;
  }
}

/* Phones */
@media (max-width: 576px) {
  .intro-section .intro-content {
    max-width: 100%;
    padding: 0 10px;
    font-size: 0.95rem; /* optional: slightly smaller text on mobile */
    text-align: center; /* optional: center align for small screens */
  }
  .intro-section h2 {
    font-size: 2rem;
  }
  .intro-section p{
    font-size: 1.5rem;
  }
  .intro-section .highlight {
    font-size: 20px;
  }
  .language-name, .b-logo-wrap {
    z-index: 25 !important;
    position: absolute !important;
  }
  .language-name {
    left: 20px !important;
    bottom: 20px !important;
    gap: 10px !important;
  }
  .language-name .language {
    font-size: 16px !important;
  }
  .language-name .site-name {
    font-size: 14px !important;
  }
  .b-logo-wrap {
    right: 20px !important;
    bottom: 20px !important;
  }
  .b-logo {
    height: 15px !important;
    width: auto !important;
  }
  .hamburger {
    z-index: 100 !important;
  }
  .services, .intro-section, .works-section {
    z-index: 30;
    position: relative;
    background: #fff;
  }
}
/* Works Page Swiper Fixes */
.mySwiperpage .swiper-slide {
    width: 30% !important;
    height: 300px !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    border-radius: 10px;
    overflow: hidden;
    background-color: #eee; /* Fallback color */
}

/* Single Work Header Fix */
.work-header {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .mySwiperpage {
        width: 100% !important;
        height: auto !important;
    }
    .mySwiperpage .swiper-slide {
        width: 90% !important;
        height: 200px !important;
    }
    .work-header {
        height: 250px;
    }
}

.site-main.work-single .work-header{
    display: none;
    
}