/*
Theme Name:   NoxThemeNu
Description:  Responsive WordPress Theme.
Version:      1.0.0
Author:       Riccardo Galli
Author URI:   http://www.riccardogalli.com/chi-sono/
Site:         http://www.riccardogalli.com
Text Domain:  nakedpress
Domain Path:  /languages
Tags:         grid-layout, blog, custom-menu, featured-images, right-sidebar
License:      GNU General Public License v3.0
License URI:  http://www.gnu.org/licenses/gpl-3.0.html

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.
*/

/* CSS per eliminare lo scroll orizzontale e centrare il contenuto */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; 
}

[data-scroll-container] {
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: 0;
  padding-top: 0;
  overflow: visible;
  position: relative;
}

@media (max-width: 1024px) {
  [data-scroll-container] {
    box-sizing: border-box;
  }
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* ------------------------------------------------------------------------- *
/* ! Base */
/* ------------------------------------------------------------------------- */

body {
  color: #2b3173;
  font-family: 'Montserrat', sans-serif; 
  font-size: 17px;
  line-height: 23px; 
  font-weight: 500;
  background: #e8f4f8; 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  overflow-x: hidden;
}

a {
  text-decoration: none; 
  color: #dc18f2;
  position: relative;
  z-index: 150;
}

.orange {color: #df9b2e;}
.fux {color: #d243ee;}
.white {color: #ffffff;}
.blue {color: 2b3173;}

/* Title color */ 
h1, h2, h3, h4, h5, h6 {
  color: #2b3173; 
}

.button {
  display: inline-block;
  color: #12396C; 
  border: 2px solid #12396C; 
  padding: 8px 20px;
  border-radius: 25px;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 600; 
  transition: all 0.3s ease;
  position: relative;
  z-index: 200;
}

.button:hover {
  background-color: #dc18f2;
  color: white;
}

.button a {
  color: #fff;
  position: relative;
  z-index: 201;
}

.alex-brush-regular {
  font-family: "Alex Brush", cursive;
  font-weight: 400;
  font-style: normal;
}

.pageContent {
  margin: 30px;
}

.pink {
  color: #BF047E;
}

.studioColor {
  color: #2b3173;
}

.firstColor {
  color: #404794;
}

.white {
  color: white;
}

img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-filter: blur(0);
  filter: blur(0);
  max-width: 100%;
  height: auto;
}

svg {
  image-rendering: optimizeQuality;
}

.zoom-in {
  transform: scale(1.03);
  transition: transform 0.5s ease-in-out;
}

ul {
  list-style-type: none; 
}

.grid {
  padding: 0 5%;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  z-index: 100;
  margin: 0 auto;
}

.first-section .grid,
.libro-section .grid,
.corso-section .grid {
  padding: 0 5%;
  margin-bottom: -0.5%;
}

.corso-section .button {
  margin: 0 2%;
}

.alt-section .button {
  margin: 0 2%;
}

.first-section .button {
  margin-right: 2%;
}

.col-100 {
  position: relative;
  text-align: center;
  width: 100%;
}

#studio {
  max-height: 90vh;
  width: 60%;
  border-radius: 15px;
  transform: perspective(500px) rotateX(5deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 1s ease, opacity 1s ease;
  color: #404794;
}

/* ============================================================================
   ONDE RESPIRATORIE - Solo nella first-section
   ============================================================================ */

  /* ============================================================================
   ONDE RESPIRATORIE - Solo nella first-section
   ============================================================================ */

   .breathing-waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    margin-left: calc(-1 * (100vw - 100%) / 2);
    pointer-events: none;
    z-index: 5;
    opacity: 0.5;
    /* Safari optimization */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  .wave-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    /* Safari optimization */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

.wave {
  fill: none;
  stroke: #1e40af;
  stroke-width: 2;
  stroke-linecap: round;
  /* Safari optimization */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  vector-effect: non-scaling-stroke;
}

.wave-1 {
  stroke: rgba(30, 64, 175, 0.208);
  animation: wave-animation-1 4s ease-in-out infinite;
}

.wave-2 {
  stroke: rgba(59, 131, 246, 0.489);
  animation: wave-animation-2 4.5s ease-in-out infinite;
  animation-delay: 0.3s;
}

.wave-3 {
  stroke: rgba(38, 114, 206, 0.579);
  animation: wave-animation-3 5s ease-in-out infinite;
  animation-delay: 0.6s;
}

.wave-4 {
  stroke: rgba(21, 91, 170, 0.722);
  animation: wave-animation-4 5.5s ease-in-out infinite;
  animation-delay: 0.9s;
}

.wave-5 {
  stroke: rgba(81, 148, 231, 0.6);
  animation: wave-animation-5 6s ease-in-out infinite;
  animation-delay: 1.2s;
}

@keyframes wave-animation-1 {
  0%, 100% {
    d: path("M0,220 Q300,190 600,220 T1200,220");
  }
  50% {
    d: path("M0,220 Q300,250 600,220 T1200,220");
  }
}

@keyframes wave-animation-2 {
  0%, 100% {
    d: path("M0,280 Q300,310 600,280 T1200,280");
  }
  50% {
    d: path("M0,280 Q300,250 600,280 T1200,280");
  }
}

@keyframes wave-animation-3 {
  0%, 100% {
    d: path("M0,340 Q300,310 600,340 T1200,340");
  }
  50% {
    d: path("M0,340 Q300,370 600,340 T1200,340");
  }
}

@keyframes wave-animation-4 {
  0%, 100% {
    d: path("M0,400 Q300,430 600,400 T1200,400");
  }
  50% {
    d: path("M0,400 Q300,370 600,400 T1200,400");
  }
}

@keyframes wave-animation-5 {
  0%, 100% {
    d: path("M0,460 Q300,430 600,460 T1200,460");
  }
  50% {
    d: path("M0,460 Q300,490 600,460 T1200,460");
  }
}

@media (max-width: 1024px) {
  .breathing-waves {
    opacity: 0.5;
  }
}

@media (max-width: 768px) {
  .breathing-waves {
    opacity: 0.5;
  }
  
  .wave {
    stroke-width: 0.9;
  }
}

/* ============================================================================
   SEZIONI - SFONDI E CONTENUTI
   ============================================================================ */

[data-scroll-section] {
  z-index: auto;
}

/* Prima sezione */
.first-section {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  padding-top: 10%;
}

.first-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #05C7F2;
  z-index: 1;
}

/* Contenuti della first-section - SOPRA le onde */
.first-section > *:not(.breathing-waves) {
  position: relative;
  z-index: 100;
}

/* Onde - SOTTO i contenuti ma SOPRA lo sfondo */
.first-section .breathing-waves {
  z-index: 5;
}

/* Alt-section (Lo Studio) */
.alt-section {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.alt-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #83d0ff29;
  z-index: 1;
}

.alt-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/osteopatia_milano.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  pointer-events: none;
  z-index: 2;
}

.alt-section > * {
  position: relative;
  z-index: 100;
}

/* Libro-section */
.libro-section {
  position: relative;
  width: 100%;
  padding-top: 5%;
}

.libro-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0597f215;
  z-index: 1;
}

.libro-section > * {
  position: relative;
  z-index: 100;
}

.libro-section .col-33 img{
  width: 40px;
  color: #12396C;
}

.corso-section .col-33 img{
  width: 40px;
  color: #12396C;
}

/* Corso-section */
.corso-section {
  position: relative;
  width: 100%;
}

.corso-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #63bbff12;
  z-index: 1;
}

.corso-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/osteopatia_milano.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  pointer-events: none;
  z-index: 2;
}

.corso-section > * {
  position: relative;
  z-index: 100;
}

/* Compagni */
.compagni {
  height: 100%;
  padding: 5% 0;
  position: relative;
}

.compagni::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0597f215;
  z-index: 1;
}

.compagni > * {
  position: relative;
  z-index: 100;
}
.compagni p{padding: 0 5%;}




/* Footer */
.footer,
.myFooter {
  min-height: 80vh;
  width: 100%;
  position: relative;
}

.footer::before,
.myFooter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f3faff;
  z-index: 1;
}

/* Contenuti del footer - SOPRA le onde */
.footer > *:not(.breathing-waves),
.myFooter > *:not(.breathing-waves) {
  position: relative;
  z-index: 100;
}

/* Onde del footer - SOTTO i contenuti ma SOPRA lo sfondo */
.footer .breathing-waves,
.myFooter .breathing-waves {
  z-index: 5;
}


/* Fix Footer Onde Full Width */
.myFooter {
  min-height: 80vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.myFooter .breathing-waves {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0.5;
  /* Safari optimization - IMPORTANTE */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.myFooter .wave-svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Safari optimization */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.myFooter > .grid {
  position: relative;
  z-index: 10;
}

/* ============================================================================
   GRID E CONTENUTI
   ============================================================================ */

.grid {
  padding: 0 5%;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  z-index: 10;
  margin: 0 auto;
}

[data-scroll] {
  position: relative;
  z-index: 100;
}

/* ============================================================================
   HEADER - SEMPRE IN CIMA
   ============================================================================ */

.header {
  display: flex;
  position: fixed;
  justify-content: space-between;
  top: 0;
  width: 100%;
  z-index: 1100;
  transition: all 0.5s ease;
}

.fixed-preheader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
}

/* ============================================================================
   UP ICON - SOPRA TUTTO TRANNE HEADER
   ============================================================================ */

.up-icon {
  position: fixed;
  bottom: 20px;
  right: 5%;
  transform: translateX(50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 999;
  image-rendering: optimizeQuality;
}

@media (max-width: 900px) {
  .up-icon {
    right: 10%;
  }
}

/* ============================================================================
   ALTRE SEZIONI
   ============================================================================ */

#marea {width: 300px;}

.second-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.carousel-wrapper {
  overflow: hidden;
  width: 100vw;
  white-space: nowrap;
}

.carousel {
  display: flex;
  gap: 2rem;
  width: calc(100vw * 8);
}

.carousel-item {
  flex: 0 0 70vw;
  height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  border-radius: 8px;
}

#udemy {
  width: 150px;
}

.my-footer {
  height: 100%;
}

.fixed-background {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .headline {
    font-size: 50px;
    line-height: 60px;
  }

  .headline-light {
    font-size: 20px;
    line-height: 28px;
  }

  .button {
    font-size: 12px;
    padding: 5px 10px;
  }

  .first-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 5%;
  }

  .first-section .col-50 {
    width: 100%;
  }

  .grid {
    padding: 0 5%;
  }

  .col-33, .col-50 {
    width: 100%;
  }

  .col-100 {
    padding: 0 5%;
  }

  .compagni {
    padding-top: 5%;
    padding-bottom: 5%;
  }

  .libro-section, .corso-section {
    padding-top: 5%;
    padding-bottom: 5%;
  }
}

/* Stili per la sezione testimonial */
.testimonial-slider {
  width: 100%;
  padding: 40px 0;
}

.testimonial-card {
  background-color: #ffffffc1;
  border-radius: 25px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 90%;
  margin: 0 auto;
}

.testimonial-card .avatar {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  object-fit: cover;
  margin-bottom: 20px;
}

.testimonial-card .name {
  font-family: "Nothing You Could Do", cursive;
  font-size: 20px;
  font-weight: bold;
  color: #12396C;
  margin-bottom: 10px;
}

.testimonial-card .rating {
  color: #FFD700;
  font-size: 18px;
  margin-bottom: 15px;
}

.testimonial-card .testimonial-text {
  font-size: 16px;
  color: #555;
  line-height: 1.5;
  margin: 0;
}

.swiper-button-next,
.swiper-button-prev {
  color: #12396C;
}

.swiper-pagination-bullet {
  background-color: #12396C;
}

@media (min-width: 768px) {
  .testimonial-slider {
    width: 80%;
  }
}

.page-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 40px;
  color: #333;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.blog-post {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.blog-link {
  text-decoration: none;
  color: inherit;
}

.blog-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-title {
  font-size: 1.5rem;
  margin: 20px;
  color: #222;
}

.blog-excerpt {
  font-size: 1rem;
  margin: 0 20px 20px;
  color: #666;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.pagination a {
  color: #0073aa;
  text-decoration: none;
  padding: 10px 15px;
  border: 1px solid #ddd;
  margin: 0 5px;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination a:hover {
  background-color: #0073aa;
  color: #fff;
}

.pagination span {
  float: left;
  margin: 0 10px 10px 0;
  padding: 14px 19px;
  border: 1px solid #ddd;
}

/* -------------------------------------------------------------------------------- */
/* ! Animations */
/* -------------------------------------------------------------------------------- */

.fade-up {
  opacity: 0;
  transition: all 1s cubic-bezier(.215, .61, .355, 1);
  transform: translateY(100px);
}

.fade-up.is-inview {
  opacity: 1;
  transform: translateY(0px);
}

.fade-up.is-outview {
  opacity: 0;
  transform: translateY(-100px) scale(1.2) rotate(10deg);
}

.fade-up-img {
  opacity: 0;
  transition: all 1s cubic-bezier(.215, .61, .355, 1);
  transform: translateY(100px);
}

.fade-up-img.is-inview {
  opacity: 1;
  transform: translateY(-60px);
}

.fade-up-img.is-outview {
  opacity: 0;
  transform: translateY(-120px) scale(1.2) rotate(-10deg);
}

.fade-down {
  opacity: 0;
  transition: all 1s cubic-bezier(.215, .61, .355, 1);
  transform: translateY(-100px);
  transition-delay: 0.5s;
}

.fade-down.is-inview {
  opacity: 1;
  transform: translateY(0px);
}

.fade-down.is-outview {
  opacity: 0;
  transform: translateY(100px) scale(0.8) rotate(15deg);
}

.fade-left {
  opacity: 0;
  transition: all 1s cubic-bezier(.215, .61, .355, 1);
  transform: translateX(-300px);
  transition-delay: 0.5s;
}

.fade-left.is-inview {
  opacity: 1;
  transform: translateX(0px);
}

.fade-left.is-outview {
  opacity: 0;
  transform: translateX(-300px) scale(0.9) rotate(-20deg);
}

.fade-right {
  opacity: 0;
  transition: all 1s cubic-bezier(.215, .61, .355, 1);
  transform: translateX(300px);
  transition-delay: 0.5s;
}

.fade-right.is-inview {
  opacity: 1;
  transform: translateX(0px);
}

.fade-right.is-outview {
  opacity: 0;
  transform: translateX(300px) scale(1.1) rotate(20deg);
}

.delay-1 {transition-delay: .1s;}
.delay-2 {transition-delay: .2s;}
.delay-3 {transition-delay: .3s;}
.delay-4 {transition-delay: .4s;}
.delay-5 {transition-delay: .5s;}
.delay-6 {transition-delay: .6s;}
.delay-7 {transition-delay: .7s;}
.delay-8 {transition-delay: .8s;}
.delay-9 {transition-delay: .9s;}
.delay-10 {transition-delay: 1.0s;}
.delay-11 {transition-delay: 1.1s;}
.delay-12 {transition-delay: 1.2s;}
.delay-13 {transition-delay: 1.3s;}
.delay-14 {transition-delay: 1.4s;}
.delay-15 {transition-delay: 1.5s;}

#AndreaImage img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  #AndreaImage {
    max-width: 80%;
  }
}

/* -------------------------------------------------------------------------------- */
/* ! Pre */
/* -------------------------------------------------------------------------------- */

.miniFont {font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: bold;}
.blue {color: #17A5E7;}
.center {text-align: center;}
.left {text-align: left!important;}
.right {text-align: right!important;}
.small {max-height: 50px; margin: 0 auto;}
.small-m {max-height: 70px; margin: 0 auto;}
.small-md {max-height: 182px; margin: 0 auto;}
.medium {max-height: 300px;}
.up-icon.show {opacity: 1;}
.smooth {transition: all 1s cubic-bezier(.215, .61, .355, 1);}

.up-icon {
  position: fixed;
  bottom: 20px;
  right: 5%;
  transform: translateX(50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 999;
  image-rendering: optimizeQuality;
}

@media (max-width: 900px) {
  .up-icon {
    position: fixed;
    bottom: 20px;
    right: 10%;
    transform: translateX(50%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 999;
    image-rendering: optimizeQuality;
  }
}

/* -------------------------------------------------------------------------------- */
/* ! Typography */
/* -------------------------------------------------------------------------------- */

.superheadline {font-size: 70px; margin: 0 0 20px 0; font-family: 'Montserrat', sans-serif; font-weight: 100; line-height: 120px; letter-spacing: -5px;}
.preHeaderText {font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 12px; line-height: 8px; padding: 0 5%;}
.subtitle {font-family: 'Barlow Condensed', sans-serif; font-size: 68px; line-height: 68px; letter-spacing: -2px;}
.subtitle-small {font-family: 'Montserrat', sans-serif; font-size: 38px; line-height: 38px; letter-spacing: -1px;}
.headline {font-size: 78px; margin: 0 0 20px 0; font-family:'Montserrat', sans-serif; font-weight: 900; line-height: 70px; letter-spacing: -3px; padding-bottom: 15px; color: #2b3173;}
.headline-little {font-size: 35px; margin: 0 0 20px 0; font-family: "Nothing You Could Do", cursive; font-weight: 900; line-height: 35px; letter-spacing: -1px; padding-bottom: 15px; padding-top: 15px; color: #2b3173;}
.headline-alex {font-size: 115px; margin: 0 40px 40px 0; font-family: "Alex Brush", cursive; line-height: 86px; letter-spacing: -2px;}
.headline-white {font-size: 80px; margin: 0 0 20px 0; font-family: 'Montserrat', sans-serif; font-weight: 800; line-height: 90px; letter-spacing: -5px; color: #ffffff;}
.headline-small {font-size: 24px; margin: 0 0 20px 0; font-family: 'Montserrat', sans-serif; font-weight: 800; line-height: 30px; letter-spacing: -1px; color: #2b3173;}
.headline-medium {font-size: 32px; margin: 0 0 20px 0; font-family: 'Montserrat', sans-serif; font-weight: 800; line-height: 35px; letter-spacing: -2px;}
.headline-medium-bis {font-size: 32px; margin: 0 0 20px 0; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 35px; letter-spacing: -2px; color: #2b3173;}
.headline-light {font-size: 25px; margin: 0 0 20px 0; font-family: 'Montserrat', sans-serif; font-weight: 400; line-height: 28px; letter-spacing: -1px;}

@media (max-width: 1280px) {
  .superheadline {font-size: 68px; line-height: 65px;}
  .headline {font-size: 70px; line-height: 65px;}
  .headline-light {font-size: 18px; line-height: 18px;}
  .headline-medium {font-size: 24px; line-height: 24px;}
  .headline-medium-bis {font-size: 24px; line-height: 24px;}
}

@media (max-width: 768px) {
  .headline {font-size: 58px; line-height: 60px; letter-spacing: normal;}
  .headline-light {font-size: 20px; line-height: 28px;}
  .superheadline {font-size: 58px; line-height: 56px; letter-spacing: -3px; white-space: normal;}
  .headline-medium {font-size: 24px; line-height: 28px;}
  .headline-medium-bis {font-size: 24px; line-height: 28px;}
}

@media (min-width: 1024px) {
  .first-section .col-60 {
    padding-top: 7%;
  }
}



/* -------------------------------------------------------------------------------- */
/* ! Helpers */
/* -------------------------------------------------------------------------------- */

.margin {margin: 20px;}
.margin-top {margin-top: 40px;}
.margin-top-md {margin-top: 90px;}
.margin-bottom {margin-bottom: 40px;}
.margin-left {margin-left: 40px;}
.margin-right {margin-right: 40px;}
.margin-top-big {margin-top: 80px;}
.margin-bottom-big {margin-bottom: 80px;}
.margin-left-big {margin-left: 80px;}
.margin-right-big {margin-right: 80px;}
.margin-top-10 {margin-top: 10%;}
.margin-top-5 {margin-top: 5%;}

.padding {padding: 20px;}
.padding-top {padding-top: 40px;}
.padding-bottom {padding-bottom: 40px;}
.padding-left {padding-left: 40px;}
.padding-right {padding-right: 40px;}
.padding-top-big {padding-top: 80px;}
.padding-bottom-big {padding-bottom: 80px;}
.padding-left-big {padding-left: 80px;}
.padding-right-big {padding-right: 80px;}

/* -------------------------------------------------------------------------------- */
/* ! pageBlock */
/* -------------------------------------------------------------------------------- */

.pageBlock {height: 100%; position: relative; display: flex; width: 100%; align-items: center; z-index: 1; padding: 0 5%;}
.pageBlock .grid {padding: 0% 10%; display: flex; width: 100%; height: 100%; align-items: center;}
.pageBlock .grid .col-50 {padding: 0 5%;}
.pageBlock img {padding: 0 30px;}
.pageBlock .pf-img img {max-width: 600px;}

/* -------------------------------------------------------------------------------- */
/* ! Header */
/* -------------------------------------------------------------------------------- */

.fixed-preheader {position: fixed; top: 0; left: 0; z-index: 1100;}
.preheader {display: flex; justify-content: space-between; padding: 0 2%; width: 100vw; height: 100%; align-items: center; background-color: hsla(0, 0%, 0%, 0.899); z-index: 1100; color: #fff; line-height: 8px;}
.header {display: flex; position: fixed; justify-content: space-between; top: 0; width: 100%; z-index: 1100; transition: all 0.5s ease;}
.header-hyde {transform: translateY(-130%);}

.preheader__social a {color: #fff;}

.header__cta {display: flex; width: 100%; align-items: center; text-align: right; padding-right: 40px;}
.header__logo {text-align: left; padding-left: 2%; margin: 10px; height: 70px; width: 70px; z-index: 1101;}

.header__cta img {height: 48px; padding: 5px; opacity: 0.7;}

@media (min-width: 768px) {
  .header__logo {width: 116px;}
  .header__cta {width: 116px;}
}

.header__icon {display: none; position: relative; width: 130px;}

@media (max-width: 900px) {
  .header__logo {width: 90px;}
  .header {margin-top: 0; z-index: 1100;}
  .preheader {display: none;}
  .header__icon {display: block; color: #fff; width: 130px; z-index: 1102;}
  .header__menu {position: absolute; top: 0; left: 0; width: calc(100% - 60px); height: 100vh; background: #FFFFFFF0; transform: translateX(-100%); transition: all 1s cubic-bezier(.215, .61, .355, 1);}
  .header__menu--open {transform: translateX(0%);}
  .site-nav {display: block; left: 25%; top: 15%;}
  .site-nav a {width: 100%; display: block; color: #000;}
  .site-nav li {width: 100%; display: block;}
  .icon-hamburgher {width: 30px; height: 30px; position: absolute; top: 24px; right: 15%; z-index: 1103;}
  .icon-hamburgher span {height: 4px; width: 100%; background: #015688; position: absolute; top: 11px;}
  .icon-hamburgher:before,
  .icon-hamburgher:after {height: 4px; width: 100%; background: #015688; position: absolute; content: ' ';}
  .icon-hamburgher:after {top: 22px;}
  .header__cta {display: none;}
  .up-icon {margin: 0 auto;}
}

/* -------------------------------------------------------------------------------- */
/* ! SiteNav */
/* -------------------------------------------------------------------------------- */

.site-nav {padding: 0; list-style-type: none; position: relative; z-index: 1100;}
.site-nav-hide {padding: 0; list-style-type: none; position: relative; display: none;}
.site-nav > li {display: inline-block; color: #12396C;}

@media (min-width: 900px) {
  .site-nav > li a {display: block; padding: 12px; color: #12396C; font-size: 14px; font-weight: 600;}
}

.site-nav button {
  color: #12396C;
  border: #12396C;
}

.logo {display: block;}

.cover__content .headline {letter-spacing: normal;}

.header__menu--open .site-nav li {padding-right: 50%; padding-top: 50px; text-align: center; z-index: 1100;}

@media (min-width: 900px) {
  .site-nav .button {display: none;}
}

@media (max-width: 900px) { 
  .header { 
    margin-top: 0; 
    z-index: 1100; 
  } 
} 

.header__menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.95);
  z-index: 1099;
  transform: translateX(-100%);
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.header__menu--open {
  transform: translateX(0);
}

.site-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.site-nav li {
  margin: 15px 0;
}

.site-nav a {
  text-decoration: none;
  color: #12396C;
  font-size: 18px;
  font-weight: 600;
  display: block;
}

.icon-hamburgher {
  cursor: pointer;
  width: 30px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.icon-hamburgher span {
  display: block;
  height: 4px;
  width: 100%;
  background: #015688;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.icon-hamburgher.menu-open span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.icon-hamburgher.menu-open span:nth-child(2) {
  opacity: 0;
}

.icon-hamburgher.menu-open span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

@media (min-width: 900px) {
  .header__menu {
    position: relative;
    transform: none !important;
    height: auto;
    background: none;
    display: flex !important;
    justify-content: center;
  }

  .site-nav {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .site-nav li {
    margin: 0 15px;
  }

  .site-nav a {
    display: inline-block;
    color: #12396C;
    font-size: 16px;
    font-weight: 600;
  }

  .icon-hamburgher {
    display: none;
  }
}

/* -------------------------------------------------------------------------------- */
/* ! Cover */
/* -------------------------------------------------------------------------------- */

.cover {height: 100vh; position: relative; display: flex; width: 100%; align-items: center; z-index: 1; overflow: hidden; top: 0; left: 0;}
.cover__content {color: #fff; padding: 5%; width: 100%; text-align: center; z-index: 3;}
.cover .headline {padding: 2% 6%;}

.cover::before {
  content: '';
  position: absolute;
  width: 300%;
  height: 400%;
  top: -50%;
  left: -50%;
  background: linear-gradient(45deg, #bc05f4, #bd10f7, #29ABE2, #04e226, #2E3192);
  background-size: 200% 200%;
  animation: colorshift 10s infinite;
  transform: rotate(45deg);
}

@media (max-width: 1100px) {
  .cover::before {
    width: 200%;
    height: 200%;
  }
  
  .cover .headline {
    padding: 2% 3%;
  }
}

@media (max-width: 768px) {
  .cover__content {
    margin-top: 90px!important;
  }
  
  .cover {
    margin-top: -100px;
  }
}

/* -------------------------------------------------------------------------------- */
/* ! Works Cover */
/* -------------------------------------------------------------------------------- */

.works-cover {height: 23vh; position: relative; display: flex; width: 100%; align-items: center; z-index: 1; padding-top: 25vh;}
.works-cover__content {color: #fff; padding: 5%; width: 100%; text-align: center; z-index: 3;}
.works-cover .headline {padding: 2% 6%;}
.works-cover:before {content: ' '; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.works-cover .grid {margin: 0;}

/* -------------------------------------------------------------------------------- */
/* ! Intro */
/* -------------------------------------------------------------------------------- */

.intro {height: 100%; position: relative; margin-bottom: 60px;}
.intro__content {padding: 20px; width: 300px; height: 100%; width: 100%; top: 0; left: 0;}
.intro p {padding: 0 5%;}
.intro__img img {max-width: 600px; display: flex; width: 100%; height: 100%; align-items: center; image-rendering: optimizeQuality;}
.intro__content .grid {max-width: 1360px;}
.intro .col-33 {transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.intro .col-33:hover {transform: scale(0.98); transition: all 1s cubic-bezier(.215, .61, .355, 1);}

/* -------------------------------------------------------------------------------- */
/* ! Branding */
/* -------------------------------------------------------------------------------- */

.scrollText {transform: translateX(-600px);}
.branding {max-width: 1560px; margin: 0 auto;}

/* -------------------------------------------------------------------------------- */
/* ! Method */
/* -------------------------------------------------------------------------------- */

.method {height: 100%; position: relative; background-color: #f2f2f2;}
.method__content {width: 100%; height: 100%; position: absolute; top: 0; left: 0; max-width: 1280px; border: 1px solid red;}
.method__content .bigtitle {text-align: right;}
.method .grid {max-width: 1680px;}

/* -------------------------------------------------------------------------------- */
/* ! Works */
/* -------------------------------------------------------------------------------- */

.works {height: 800px; position: relative; background-color: #ffffff; max-width: 1420px; margin: 0 auto;}
.works__content {width: 300px; height: 100%; width: 100%; position: absolute; top: 0; left: 0;}
.works img {display: block; object-fit: cover; width: 100%; height:100%}
.works .button {margin: 20px 0px 60px 30px;}
.works .col-25 {padding: 0px; transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.works .col-33 {padding: 10px; transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.works .grid {padding: 0;}
.works .col-50 img {max-height: 400px;}
.works-cover background img {width: 100%;}

@media (max-width: 768px) {
  .works {
    height: 1400px;
  }
}

/* -------------------------------------------------------------------------------- */
/* ! Works2 */
/* -------------------------------------------------------------------------------- */

.works2 {height: 100%; position: relative; background-color: #ffffff;}
.works2__content {width: 300px; height: 100%; width: 100%; position: absolute; top: 0; left: 0;}
.works2 img {display: block; object-fit: cover; width: 100%; height:100%}
.works2 .button {margin: 20px 0px 60px 30px;}
.works2 .col-25 {padding: 0; overflow: hidden; transition: all 1s cubic-bezier(.215, .61, .355, 1);}
.works2 .grid {padding: 0 5%; max-width: none;}
.works2__content .grid {display: flex; flex-wrap: wrap;}
#uiImg {max-width: 600px; overflow: hidden; margin: 0 auto;}
#figmaImg {height: 154px; width:120px; margin: 0 auto;}
#codeImg {height: 657px; width: 550px; margin: 0 auto;}
.works2 .col-33,
.works2 .col-100 {padding: 0 5%;}
.works-2 .col-50:nth-child(1) {display: flex; width: 100%; height: 100%; align-items: center;}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: " ";
  background-color: rgba(248, 247, 247, 0.308);
}

/* -------------------------------------------------------------------------------- */
/* ! Single */
/* -------------------------------------------------------------------------------- */

.single__content {padding: 5% 5%;}
.single-cover {height: 600px;}

/* -------------------------------------------------------------------------------- */
/* ! Fase2 */
/* -------------------------------------------------------------------------------- */

.fase2 {position: relative; height: 600px;}
.fase2__content {position: absolute; z-index: 999; padding: 3% 10%;}
.fase2:before {content: ' '; width: 100%; height: 100%; background: #fffffff4; position: absolute; top: 0; left: 0; z-index: 2;}
.fase2__content img {display: block; margin: 0 auto; padding-top: 15px;}

/* -------------------------------------------------------------------------------- */
/* ! Fase3 */
/* -------------------------------------------------------------------------------- */

.fase3 {position: relative; height: 600px;}
.fase3__content {position: absolute; z-index: 999; color: #fff; padding: 3% 10%;}
.fase3:before {content: ' '; width: 100%; height: 100%; background: #232323d3; position: absolute; top: 0; left: 0; z-index: 2;}
.fase3__content img {display: block; margin: 0 auto; padding-top: 15px;}

/* -------------------------------------------------------------------------------- */
/* ! Row */
/* -------------------------------------------------------------------------------- */

.row {
  display: flex;
  flex-wrap: wrap;
}

.row img {display: flex; align-content: center;}
.row .col-100 {max-width: 1080px; margin: 0 auto;}
.row .col-50:nth-child(1) {padding-left: 5%; padding-right: 5%;}
.row .col-50:nth-child(2) {padding-right: 5%; padding-left: 5%;}

.parallax-border {
  position: relative;
  height: 0;
  padding-top: calc(0.95 * 100%);
  overflow: hidden;
  margin-bottom: 30px;
}

.parallax-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.parallax-image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc( 1 / 0.75 * 100%);
  object-fit: cover;
  transform: translateY(0);
  transition: transform ease-out 1s;
}

.parallax-border:hover .parallax-image {
  transform: translateY(calc(0.25 * -100%));
}

/* -------------------------------------------------------------------------------- */
/* ! News */
/* -------------------------------------------------------------------------------- */

.news {height: 1200px; position: relative; margin: 0 auto;}
.news__content {padding: 20px; width: 300px; height: 100%; width: 100%; position: absolute; top: 0; left: 0;}
.news img {max-width: 600px; object-fit: cover; position: relative; padding: 0 10px;}
.news .grid {max-width: none;}
.colBlog__data-1 {position: absolute; z-index: 999; top: 40px; right: 40px;}
.colblog1 {position: relative; line-height: 10px;}
.colBlog__data-2 {position: absolute; z-index: 999; top: 50px; right: 40px;}
.colblog2 {position: relative; line-height: 10px;}
.colBlog__data-3 {position: absolute; z-index: 999; top: 50px; right: 40px;}
.colblog3 {position: relative; line-height: 10px;}

.colblog1,
.colblog2,
.colblog3 {position: relative;}

.colblog1__content,
.colblog2__content,
.colblog3__content {position: absolute;}

@media (max-width: 1300px) {
  .news {display: flex; flex-wrap: wrap; height: 1080px;}
}

@media (max-width: 1000px) {
  .news {display: flex; flex-wrap: wrap; height: 900px;}
}

@media (max-width: 900px) {
  .news {display: flex; flex-wrap: wrap; height: 1000px;}
}

@media (max-width: 768px) {
  .news {display: flex; flex-wrap: wrap; height: 2400px;}
}

.blogPage {padding: 5% 10%;}
.blogArt {padding: 5% 10%;}

/* -------------------------------------------------------------------------------- */
/* ! Pre-footer */
/* -------------------------------------------------------------------------------- */

.pre-footer {
  position: relative;
  bottom: 0;
  left: 0;
  margin-bottom: -8px;
}

.pre-footer-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.pre-footer-svg svg {
  width: 100%;
  height: 100%;
  padding-bottom: -50px;
}

/* ------------------------------------------------------------------------- *
/* ! Index */
/* ------------------------------------------------------------------------- */

.home-title { 
  position: absolute; 
  top:-9999px; 
  color: #fff; 
  font-size: 12px;
}

/* -------------------------------------------------------------------------------- */
/* ! Footer */
/* -------------------------------------------------------------------------------- */

.footer__content {padding: 20px 5%; height: 100%; position: absolute; top: 0; left: 0; max-width: 1360px;}

.myFooter {height: 110%; width: 100%; padding: 0 5%; position: relative; z-index: 10;}
.myFooter .grid {max-width: 1280;}
.myFooter .col-33 {padding: 0 5%;}

/* --------------------------------------------------------------------------------------------------------------------------- */
/* ! Responsive */
/* --------------------------------------------------------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.admin-bar .navbar-fixed-top { 
    top: 42px;
  }
}

/* --------------------------------------------------------------------------------------------------------------------------- */
/* WordPress Default Styles */
/* --------------------------------------------------------------------------------------------------------------------------- */

/* Gallery */
.gallery { 
  float: left; 
  margin: 20px 0 20px 0; 
  width: 103.55%; 
}

.gallery-item { 
  float: left; 
  width: 33.333333%; 
  text-align: center; 
}

.gallery img { 
  margin: 0 10% 0 0; 
  width: 90%; 
  height: auto; 
  border: none!important; 
}

.gallery-caption { 
  width: 90%;
  margin:10px 0 0 0;
}

/* Image */
.alignleft { 
  float: left; 
  margin-right: 20px; 
  margin-bottom: 10px; 
  max-width: 97%; 
  height: auto; 
}

.alignright { 
  float: right; 
  margin-bottom: 10px; 
  margin-left: 20px; 
  max-width: 97%; 
  height: auto; 
}

.aligncenter { 
  display: block; 
  margin: 0 auto; 
  max-width: 97%; 
  height: auto; 
}

.alignnone { 
  max-width: 97%; 
  height: auto; 
}

/* img responsive */
.img-res {
  width: 100%;
  height: auto;
}

/* video responsive */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Table */
table {
  border-collapse: collapse;
  margin: 40px 0; 
  width:100%;
}

table, th, td {
  border: 1px solid #ddd;
  padding:10px; 
  font-size: 18px;
  text-transform: capitalize;
}

table tr:first-child td {
  font-weight: 900; 
  text-transform: uppercase; 
  background: #eee; 
  padding:12px 8px;
}

/* Image Caption */
.wp-caption { 
  margin-top: 1.5rem;
  margin-bottom: 0px; 
  padding: 10px; 
  max-width: 97%; 
  border: 1px solid #ddd; 
  text-align: center; 
}

.wp-caption img { 
  margin: 0; 
  padding: 0; 
  width: 100%!important; 
  height: auto; 
  border: 0 none; 
}

.wp-caption p.wp-caption-text { 
  margin: 0; 
  padding: 8px; 
  font-size: 1em; 
  line-height: 17px; 
}

/* Stiky */
.sticky { 
  border-right: 3px solid #eee; 
  border-bottom: 3px solid #ddd; 
}

/* Search */
.search-form {
  background: #eee;
}

.search-form input[type=text]{ 
  width: 80%; 
  color: #333; 
}

.search-form button{
  float:right;
  padding:10px 15px 0 0;
  border: none; 
  background: none;
  padding: 11px;
}

/* Contact Form 7 */
.wpcf7 label{
  width:100%
}

/* Comments */
.comment-form-author,
.comment-form-email,
.comment-form-url { 
  float: left; 
  margin-top: 20px; 
  margin-right: 3%; 
  width: 30.3333333%; 
}

.comment-form-author input,
.comment-form-email input,
.comment-form-url input { 
  width: 100%; 
}

ol.commentlist { 
  margin: 0 0 1em; 
  padding: 0; 
  list-style: none; 
  text-indent: 0; 
}

ol.commentlist li.comment { 
  padding: 1em; 
  border-top: 1px solid #eee; 
}

ol.commentlist li.comment div.vcard cite.fn { 
  text-transform: uppercase; 
  font-size: 14px; 
}

ol.commentlist li.comment div.vcard img.avatar { 
  float: left; 
  margin: 6px 1em 1em 0; 
  border-radius: 50px; 
}

ol.commentlist li.comment div.comment-meta { 
  font-size: 12px; 
}

ol.commentlist li.comment ul { 
  margin: 0 0 1em 2em; 
}

ol.commentlist li.comment div.reply { 
  margin-left: 80px; 
  font-size: 11px; 
}

ol.commentlist li.comment div.reply a { 
  font-weight: bold; 
}

ol.commentlist li.comment ul.children { 
  margin: 1em 0 0; 
  list-style: none; 
  text-indent: 0; 
}

ol.commentlist li.comment ul.children li.depth-2 { 
  margin: 0 0 .25em .25em; 
  border-left: 1px solid #eee; 
}

ol.commentlist li.comment ul.children li.depth-3 { 
  margin: 0 0 .25em .25em; 
  border-left: 1px solid #eee; 
}

ol.commentlist li.comment ul.children li.depth-4 { 
  margin: 0 0 .25em .25em; 
  border-left: 1px solid #eee; 
}

ol.commentlist li.even { 
  background: #fff; 
}

ol.commentlist li.odd {  
  background: #f9f9f9;  
}

ol.commentlist li.parent { 
  border-left: 1px solid #eee; 
}

ol.commentlist li.bypostauthor .fn { 
  font-weight: bold; 
}

ol.commentlist li img{
  max-width: 97%;
}

input[type=text],
input[type=email] { 
  width: 98%;
  margin-right: 10px; 
  padding: 10px; 
  border: none; 
  background: #eee;
  border-radius: 0;
  font-size: 14px;
}

textarea { 
  padding: 10px; 
  width: 98%; 
  border: none; 
  background: #eee;
  border-radius: 0;
  font-size: 14px;
}

input[type=submit] { 
  margin-top: 10px; 
  padding: 15px 20px; 
  color: #fff; 
  text-transform: uppercase; 
  background: #333; 
  border:none; 
  font-size: 14px;
}

#comments { 
  width: 100%; 
}

/* Calendar Widget */
#wp-calendar { 
  width: 100%; 
}

#wp-calendar a { 
  padding: 0; 
  border: none; 
}

#wp-calendar caption,
.screen-reader-text { 
  padding-bottom: 10px; 
  color: #000; 
  text-align: left; 
  text-transform: uppercase; 
  font-weight: 700; 
  font-size: 14px; 
}

#wp-calendar thead { 
  font-size: 10px; 
}

#wp-calendar thead th { 
  padding-bottom: 10px; 
}

#wp-calendar tbody { 
  color: #aaa; 
}

#wp-calendar tbody td { 
  padding: 8px; 
  border: 1px solid #fff; 
  background: #f5f5f5; 
  text-align: center; 
}

#wp-calendar tbody td:hover { 
  background: #fff; 
}

#wp-calendar tbody .pad { 
  background: none; 
}

#wp-calendar tfoot #next { 
  text-align: right; 
  text-transform: uppercase; 
  font-size: 10px; 
}

#wp-calendar tfoot #prev { 
  padding-top: 10px; 
  text-transform: uppercase; 
  font-size: 10px; 
}



/* ============================================================================
   SINGLE POST STYLES
   ============================================================================ */

/* Hero Section */
.single-post-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #2b3173 0%, #05C7F2 100%);
}

.single-post-hero__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.single-post-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-post-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.676);
  z-index: 2;
}

.works-cover__content {
  position: relative;
  z-index: 10;
  color: #fff;
  text-align: center;
  padding: 0 5%;
}

/* Breadcrumb */
.breadcrumb {
  font-size: 14px;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.8);
}

.breadcrumb a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb a:hover {
  color: #05C7F2;
}

.breadcrumb .separator {
  margin: 0 10px;
  opacity: 0.5;
}

.breadcrumb .current {
  opacity: 0.7;
}

/* Post Meta */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}

.post-meta__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-meta__item a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.post-meta__item a:hover {
  color: #05C7F2;
}

.post-meta__item i {
  font-size: 16px;
}

/* Single Post Content */
.single-post-content {
  width: 90%;
  margin: 0 auto;
  padding: 60px 5%;
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 15px;
  margin-top: -50px;
  margin-bottom: 5%;
  position: relative;
  z-index: 10;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* Sezione principale con sfondo come corso-section */
main#main {
  position: relative;
  width: 100%;
  padding-bottom: 5%;
}

main#main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #63bbff12;
  z-index: 1;
}

main#main::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/osteopatia_milano.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  pointer-events: none;
  z-index: 2;
}

main#main > * {
  position: relative;
  z-index: 100;
}

@media (min-width: 769px) {
  .single-post-content {
    width: 90%;
    padding: 60px 5%;
  }
}

@media (max-width: 768px) {
  .single-post-content {
    width: 100%;
    padding: 40px 20px;
    margin-top: -30px;
    background: rgba(255, 255, 255, 0.8);
  }
}

.post-excerpt {
  font-size: 22px;
  line-height: 1.6;
  color: #666;
  font-style: italic;
  padding: 30px;
  background: #f8f9fa;
  border-left: 4px solid #05C7F2;
  margin-bottom: 40px;
  border-radius: 8px;
}

.post-excerpt h2 {
  font-size: 22px;
  font-weight: 400;
  margin: 0;
  color: #666;
}

.post-content {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
}

.post-content h2 {
  font-size: 32px;
  margin: 40px 0 20px;
  color: #2b3173;
}

.post-content h3 {
  font-size: 26px;
  margin: 30px 0 15px;
  color: #2b3173;
}

.post-content p {
  margin-bottom: 20px;
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 30px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.post-content ul,
.post-content ol {
  margin: 20px 0;
  padding-left: 30px;
}

.post-content li {
  margin-bottom: 10px;
  line-height: 1.8;
}

.post-content blockquote {
  font-size: 20px;
  font-style: italic;
  padding: 20px 30px;
  margin: 30px 0;
  background: #f8f9fa;
  border-left: 4px solid #df9b2e;
  color: #555;
}

/* Tags */
.post-tags {
  padding: 20px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.post-tags a {
  display: inline-block;
  padding: 5px 15px;
  margin: 5px 5px 5px 0;
  background: #e8f4f8;
  color: #2b3173;
  border-radius: 20px;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.post-tags a:hover {
  background: #05C7F2;
  color: #fff;
}

/* Social Share */
.social-share {
  padding: 40px 0;
  text-align: center;
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
  margin: 40px 0;
}

.social-share h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #2b3173;
}

.social-share__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.social-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 25px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.social-share__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.social-share__btn--facebook {
  background: #3b5998;
}

.social-share__btn--twitter {
  background: #1da1f2;
}

.social-share__btn--linkedin {
  background: #0077b5;
}

.social-share__btn--whatsapp {
  background: #25d366;
}

.social-share__btn--email {
  background: #666;
}

/* Author Box */
.author-box {
  display: flex;
  gap: 30px;
  padding: 40px;
  background: #f8f9fa;
  border-radius: 15px;
  align-items: center;
}

.author-box__avatar img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.author-box__content {
  flex: 1;
}

.author-box__name {
  font-size: 24px;
  margin-bottom: 10px;
}

.author-box__name a {
  color: #2b3173;
  text-decoration: none;
  transition: color 0.3s ease;
}

.author-box__name a:hover {
  color: #05C7F2;
}

.author-box__bio {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 15px;
}

.author-box__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #05C7F2;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: gap 0.3s ease;
}

.author-box__link:hover {
  gap: 12px;
}

/* Post Navigation */
.post-navigation {
  padding: 40px 0;
  border-top: 1px solid #eee;
}

.post-navigation__inner {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.post-navigation__item {
  flex: 1;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.post-navigation__item:hover {
  background: #e8f4f8;
  transform: translateX(0);
}

.post-navigation__item--prev:hover {
  transform: translateX(-5px);
}

.post-navigation__item--next {
  text-align: right;
}

.post-navigation__item--next:hover {
  transform: translateX(5px);
}

.post-navigation__label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 10px;
  font-weight: 600;
}

.post-navigation__title {
  display: block;
  font-size: 18px;
  color: #2b3173;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.4;
}

.post-navigation__title:hover {
  color: #05C7F2;
}

/* Related Posts */
.related-posts {
  padding: 60px 0;
  border-top: 2px solid #eee;
}

.related-posts__title {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  color: #2b3173;
}

.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.related-post {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.related-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.related-post__image {
  display: block;
  overflow: hidden;
  height: 200px;
}

.related-post__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.related-post:hover .related-post__image img {
  transform: scale(1.1);
}

.related-post__content {
  padding: 25px;
}

.related-post__meta {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.related-post__meta .separator {
  margin: 0 8px;
}

.related-post__title {
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.related-post__title a {
  color: #2b3173;
  text-decoration: none;
  transition: color 0.3s ease;
}

.related-post__title a:hover {
  color: #05C7F2;
}

.related-post__excerpt {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.related-post__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #05C7F2;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: gap 0.3s ease;
}

.related-post__link:hover {
  gap: 12px;
}

/* Reading Progress Bar */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(5, 199, 242, 0.2);
  z-index: 9999;
}

.reading-progress-fill {
  height: 100%;
  background: #05C7F2;
  width: 0%;
  transition: width 0.1s ease;
}

/* Responsive */
@media (max-width: 768px) {
  .single-post-hero {
    min-height: 50vh;
  }
  
  .post-meta {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  
  .single-post-content {
    padding: 40px 20px;
    margin-top: -30px;
  }
  
  .post-content {
    font-size: 16px;
  }
  
  .author-box {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }
  
  .post-navigation__inner {
    flex-direction: column;
  }
  
  .post-navigation__item--next {
    text-align: left;
  }
  
  .social-share__buttons {
    flex-direction: column;
  }
  
  .social-share__btn {
    width: 100%;
    justify-content: center;
  }
  
  .related-posts__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   BLOG ARCHIVE PAGE (con Sidebar)
   ============================================================================ */

/* Hero Archive */
.blog-archive-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05C7F2;
  color: #fff;
  overflow: hidden;
}



/* Main Container con sfondo corso */
.blog-archive-page {
  position: relative;
  width: 100%;
  padding: 60px 0 5%;
}

.blog-archive-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #63bbff12;
  z-index: 1;
}

.blog-archive-page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/osteopatia_milano.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  pointer-events: none;
  z-index: 2;
}

.blog-archive-page > * {
  position: relative;
  z-index: 10;
}

/* Grid Archive */
.blog-archive-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-right: 5%;
}

/* Archive Card */
.blog-archive-card {
  background: rgba(255, 255, 255, 0.41);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  display: flex;
  flex-direction: row;
  min-height: 280px;
}

.blog-archive-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(5, 199, 242, 0.2);
}

/* Card Image */
.blog-archive-card__image {
  position: relative;
  display: block;
  width: 40%;
  min-height: 280px;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-archive-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.blog-archive-card:hover .blog-archive-card__image img {
  transform: scale(1.1);
}

.blog-archive-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.blog-archive-card:hover .blog-archive-card__overlay {
  opacity: 1;
}

/* Card Content */
.blog-archive-card__content {
  padding: 35px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Meta Info */
.blog-archive-card__meta {
  font-size: 13px;
  color: #999;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-archive-card__meta i {
  margin-right: 5px;
}

.blog-archive-card__meta .separator {
  opacity: 0.5;
}

.blog-archive-card__categories a {
  color: #05C7F2;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.blog-archive-card__categories a:hover {
  color: #2b3173;
}

/* Card Title */
.blog-archive-card__title {
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: 15px;
}

.blog-archive-card__title a {
  color: #2b3173;
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-archive-card__title a:hover {
  color: #05C7F2;
}

/* Card Excerpt */
.blog-archive-card__excerpt {
  font-size: 16px;
  line-height: 1.7;
  color: #666;
  margin-bottom: 20px;
}

.blog-archive-card__excerpt p {
  margin: 0;
}

/* Card Link */
.blog-archive-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #05C7F2;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-top: auto;
}

.blog-archive-card__link:hover {
  gap: 12px;
  color: #2b3173;
}

/* Pagination */
.blog-archive-pagination {
  margin-top: 60px;
  padding: 40px 0;
}

/* Empty State */
.blog-archive-empty {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 60px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.blog-archive-empty h3 {
  font-size: 28px;
  color: #2b3173;
  margin-bottom: 15px;
}

.blog-archive-empty p {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

/* Sidebar Styling */
.blog-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}

.blog-sidebar .widget {
  background: rgba(255, 255, 255, 0.41);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.blog-sidebar .widget h3 {
  font-size: 20px;
  color: #2b3173;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #05C7F2;
}

.blog-sidebar .widget ul {
  list-style: none;
  padding: 0;
}

.blog-sidebar .widget ul li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.blog-sidebar .widget ul li:last-child {
  border-bottom: none;
}

.blog-sidebar .widget ul li a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-sidebar .widget ul li a:hover {
  color: #05C7F2;
}

.blog-sidebar .widget ul li a::before {
  content: '→';
  color: #05C7F2;
  font-weight: bold;
}

/* Search Form in Sidebar */
.blog-sidebar .search-form {
  background: transparent;
  display: flex;
  gap: 10px;
}

.blog-sidebar .search-form input[type="text"] {
  flex: 1;
  padding: 12px 20px;
  border: 2px solid #e8f4f8;
  border-radius: 25px;
  font-size: 14px;
  background: #fff;
}

.blog-sidebar .search-form button {
  padding: 12px 25px;
  background: #05C7F2;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.blog-sidebar .search-form button:hover {
  background: #2b3173;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-archive-card {
    flex-direction: column;
    min-height: auto;
  }
  
  .blog-archive-card__image {
    width: 100%;
    min-height: 250px;
  }
  
  .blog-archive-card__content {
    padding: 30px;
  }
  
  .blog-sidebar {
    position: static;
    margin-top: 60px;
  }
}

@media (max-width: 768px) {
  .blog-archive-hero {
    min-height: 40vh;
  }
  
  .blog-archive-page {
    padding: 40px 0 5%;
  }
  
  .blog-archive-grid {
    gap: 30px;
  }
  
  .blog-archive-card__title {
    font-size: 22px;
  }
  
  .blog-archive-card__content {
    padding: 25px;
  }
  
  .blog-sidebar .widget {
    padding: 25px;
  }
  
  .col-70,
  .col-30 {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .blog-archive-card__image {
    min-height: 200px;
  }
  
  .blog-archive-card__content {
    padding: 20px;
  }
  
  .blog-archive-card__title {
    font-size: 20px;
  }
  
  .blog-archive-empty {
    padding: 40px 20px;
  }
}


/* Shortcode Ultimi Articoli - FORZA 3 COLONNE */
.ultimi-articoli-wrapper {
  width: 100%;
  padding: 60px 5%;
}

.ultimi-articoli-wrapper .related-posts__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 40px !important;
  padding: 0 !important;
}

.ultimi-articoli-wrapper .related-post {
  width: 100% !important;
}

@media (max-width: 1024px) {
  .ultimi-articoli-wrapper .related-posts__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .ultimi-articoli-wrapper .related-posts__grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  
  .ultimi-articoli-wrapper {
    padding: 40px 5%;
  }
}





/* functional stuff */

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

* html .clearfix { 
  zoom: 1; 
}

*:first-child+html .clearfix { 
  zoom: 1; 
}

.grid--center {
  justify-content: center;
}

.col { 
  flex: 1;
}

[class*='col-'] { 
  position: relative;
  padding: 0;
}

.grid .grid [class*='col-'] {
  padding: 0px;
}

.col-20 { width: 20%; }
.col-25 { width: 25%; }
.col-30 { width: 30%; }
.col-33 { width: 33.33%;padding: 30px; }
.col-40 { width: 40%; }
.col-50 { width: 50%; }
.col-60 { width: 60%; }
.col-70 { width: 70%; }
.col-80 { width: 80%; }
.col-100 { width: 100%; }

@media (max-width: 991px) {
  .tab-20 { width: 20%; }
  .tab-25 { width: 25%; }
  .tab-33 { width: 33.33%; }
  .tab-40 { width: 40%; }
  .tab-50 { width: 50%; }
  .tab-60 { width: 60%; }
  .tab-100 { width: 100%; }
  .col-33{padding: 2%;}
}

@media (max-width: 768px) {
  [class*='col-'] { width: 100%;}
  .sma-20 { width: 20%; }
  .sma-25 { width: 25%; }
  .sma-33 { width: 33.33%; }
  .sma-50 { width: 50%; }
  .sma-100 { width: 100%; }
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}