/*
Theme Name: Media365 Theme
Theme URI: https://example.com/
Author: Media365
Author URI: https://example.com/
Description: A modern dark digital agency homepage theme for Media365.
Version: 1.0.0
Text Domain: media365
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Minimal base styles; most styling is done via Tailwind utility classes. */
html {
  scroll-behavior: smooth;
}

body {
  background: #000;
  font-family: 'Raleway', sans-serif;
}

html, body {
  overflow-x: hidden;
}

@font-face {
  font-family: 'Raleway';
  src: url('assets/fonts/Raleway-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway-bold-italic';
  src: url('assets/fonts/Raleway-BlackItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway-bold';
  src: url('assets/fonts/Raleway-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway-semi-bold';
  src: url('assets/fonts/Raleway-SemiBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Raleway-heavy';
  src: url('assets/fonts/Raleway-Heavy.woff2') format('woff2');
}

.font-regular{
  font-family: 'Raleway', sans-serif !important;
}

.font-heavy {
  font-family: 'Raleway-heavy', sans-serif !important;
}

.font-bold-italic{
  font-family: 'Raleway-bold-italic', sans-serif !important;
}

.font-bold{
  font-family: 'Raleway-bold', sans-serif !important;
}

.desktop-container {
  max-width: 1280px;
}

body.menu-open {
  overflow: hidden;
}

#mobileMenu {
  transform: translateX(100%);
  transition: transform 0.5s ease;
}

#mobileMenu.active {
  transform: translateX(0);
}

#mobileMenu ul > li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

#mobileMenu ul > li > div,
#mobileMenu ul > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

#mobileMenu .sub-menu {
  margin-top: 0;
  padding-left: 16px;
}

#mobileMenu .sub-menu li {
  border-bottom: none;
}

#mobileMenu .sub-menu li a {
  padding: 12px 0;
  font-size: 18px;
  opacity: 0.8;
}

#mobileMenu .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#mobileMenu .menu-item.open > .sub-menu {
  max-height: 400px;
}

.current-menu-item svg {
  opacity: 1 !important;
  transform: translateX(-50%) scale(1) !important;
}

.line {
  overflow: hidden;
  display: block;
}

.line-inner {
  display: inline-block; /* THIS is the key */
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: #dc2626; /* red-600 */
  color: #fff;
  z-index: 99999;
}

/* Desktop dropdown submenu (primary nav) */
@media (min-width: 1024px) {
  .media365-primary-nav .menu-item-has-children {
    position: relative;
  }

  .media365-primary-nav .sub-menu .scribble {
    display: none !important;
  }

  .media365-primary-nav .menu-item-has-children > a {
    padding-right: 2.25rem; /* room for arrow */
  }

  .media365-primary-nav .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-left: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
    opacity: 0.85;
  }

  .media365-primary-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
  
    /* 👇 FIX */
    padding-top: 0.75rem;
  
    width: 15rem;
    list-style: none;
    padding: 0.5rem;
    border-radius: 0.75rem;
    background: #000;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 9999;
  
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }

  .media365-primary-nav .menu-item-has-children:hover > .sub-menu,
  .media365-primary-nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .media365-primary-nav .sub-menu a {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 0.6rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.875rem;
    line-height: 1.2;
    transition: color 180ms ease, background-color 180ms ease;
    white-space: nowrap;
  }

  .media365-primary-nav .sub-menu a:hover,
  .media365-primary-nav .sub-menu a:focus-visible {
    color: #ef4444; /* red-500 */
    background: rgba(255, 255, 255, 0.06);
    outline: none;
  }
}



/* Scribble draw animation */
.scribble path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 0.6s ease;
}

/* Animate on hover */
.group:hover .scribble path,
.group.current-menu-item .scribble path {
  stroke-dashoffset: 0;
}

/* Optional: stagger effect */
.scribble path:nth-child(1) { transition-delay: 0s; }
.scribble path:nth-child(2) { transition-delay: 0.05s; }
.scribble path:nth-child(3) { transition-delay: 0.1s; }
.scribble path:nth-child(4) { transition-delay: 0.15s; }
.scribble path:nth-child(5) { transition-delay: 0.2s; }

.current-menu-item a svg {
	top: auto !important;
}


.node {
  position: absolute;
}

.blob {
  position: relative;
  width: 120px;
  height: 120px;
}

.blob img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 520px) and (max-width: 640px) {

  .service-page .service-scribble-blobs-1{
    left: 21%;
    bottom: 10%;
  }

  .service-page .service-scribble-blobs-2{
    left: 1%;
    bottom: 37%;
  }

  .service-page .service-scribble-blobs-3{
    left: 7%;
    top: 8%;
  }

  .service-page .service-scribble-blobs-4{
    top: -10%;
    left: 36%;
  }

  .service-page .service-scribble-blobs-5{
    top: -3%;
    right: 10%;
  }

  .service-page .service-scribble-blobs-1 .blob,
  .service-page .service-scribble-blobs-2 .blob,
  .service-page .service-scribble-blobs-3 .blob,
  .service-page .service-scribble-blobs-4 .blob,
  .service-page .service-scribble-blobs-5 .blob{
    width: 100px !important;
    height: 100px !important;
  }
  
}

@media (min-width: 500px) and (max-width: 519px) {

  .service-page .service-scribble-blobs-1{
    left: 21%;
    bottom: 10%;
  }

  .service-page .service-scribble-blobs-2{
    left: 1%;
    bottom: 37%;
  }

  .service-page .service-scribble-blobs-3{
    left: 7%;
    top: 8%;
  }

  .service-page .service-scribble-blobs-4{
    top: -10%;
    left: 36%;
  }

  .service-page .service-scribble-blobs-5{
    top: -3%;
    right: 10%;
  }

  .service-page .service-scribble-blobs-1 .blob,
  .service-page .service-scribble-blobs-2 .blob,
  .service-page .service-scribble-blobs-3 .blob,
  .service-page .service-scribble-blobs-4 .blob,
  .service-page .service-scribble-blobs-5 .blob{
    width: 80px !important;
    height: 80px !important;
  }
}


@media screen and (max-width: 499px) {

  .service-page .service-scribble-blobs-1{
    left: 21%;
    bottom: 10%;
  }

  .service-page .service-scribble-blobs-2{
    left: 1%;
    bottom: 37%;
  }

  .service-page .service-scribble-blobs-3{
    left: 7%;
    top: 8%;
  }

  .service-page .service-scribble-blobs-4{
    top: -13%;
    left: 36%;
  }

  .service-page .service-scribble-blobs-5{
    top: -3%;
    right: 10%;
  }

  .service-page .service-scribble-blobs-1 .blob,
  .service-page .service-scribble-blobs-2 .blob,
  .service-page .service-scribble-blobs-3 .blob,
  .service-page .service-scribble-blobs-4 .blob,
  .service-page .service-scribble-blobs-5 .blob{
    width: 75px !important;
    height: 75px !important;
  }
}

@media (min-width: 545px) and (max-width: 1086px){
  .reviews .review-section-part{
    grid-template-columns: auto !important;  
  }  
}

@media screen and (max-width: 544px){
  .review-person p{
    font-size: 10px !important;
  }  
  .review-person h3{
    font-size: 14px !important;
  }

  /* .company-logo img{
    display: none !important;
  } */

  .company-logo img{
    height: 4rem;
  }

}

@media screen and (max-width: 630px){
  .review-text p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80%;
  }

  .review-person span{
    display: none !important;
  }

  .review-person{
    left: 34% !important;
    bottom: 6% !important
  }

  .review-slide-buttons{
    display: none !important;
  }
}

@media screen and (max-width: 445px){
  .review-person{
    bottom: -1% !important
  }

  .review-slider .company-logo img{
    height: 50px;
  }


}

@media screen and (max-width: 375px){
  .review-person{
    bottom: 6% !important
  }

  .review-person p {
    display: none !important;
  }

}

@media screen and (max-width: 1086px){
  .review-left-part{
    order: 2 !important;
    max-width: 90% !important;
    margin: auto !important;
  }

  .review-slider{
    order: 1 !important;
  }
  
}