:root {
        --white: #ffffff;
        --muted: rgba(245, 245, 247, .64);
        --accent: #b79a55;
        --bg: #050507;
        --sans: "Google Sans", sans-serif;
        --serif: "Cormorant Garamond", serif;
        --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}


@keyframes bounceIn {
        0% {
                transform: translateY(0px);
        }

        35% {
                transform: translateY(-10px);
        }

        55% {
                transform: translateY(10px);
        }

        75% {
                transform: translateY(-10px);
        }

        100% {
                transform: translateY(0);
        }
}


* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style-type: none;
}

html,
body {
        margin: 0;
        width: 100%;
}


body {
        margin: 0;
        font-family: var(--sans);
        background:
                radial-gradient(circle at 12% 18%, rgba(183, 154, 85, .10), transparent 22%),
                linear-gradient(180deg, #faf8f4 0%, #ffffff 100%);
                background-repeat: no-repeat;background-size:cover;
                overflow-x: hidden;
}


body :focus-visible {
        outline: 3px solid rgba(183, 154, 85, .60);
        outline-offset: 4px;
}

a {
        color: inherit;
        text-decoration: none;
}

img {
        display: block;
        max-width: 100%;
}


p {
        line-height: 1.85;
}

table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
}

th,
td {
        padding: 0;
        margin: 0;
}

    button:disabled {
      cursor: not-allowed;
    }

.container {
        width: min(1180px, calc(100% - 2 * clamp(18px, 3vw, 34px)));
        margin-inline: auto;
}


.row {
        display: grid;
        align-items: flex-start;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 30px;
}

[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
        min-width: 0;
        grid-column: span 12;
}


.col-xs-1 {
        grid-column: span 1;
}

.col-xs-2 {
        grid-column: span 2;
}

.col-xs-3 {
        grid-column: span 3;
}

.col-xs-4 {
        grid-column: span 4;
}

.col-xs-5 {
        grid-column: span 5;
}

.col-xs-6 {
        grid-column: span 6;
}

.col-xs-7 {
        grid-column: span 7;
}

.col-xs-8 {
        grid-column: span 8;
}

.col-xs-9 {
        grid-column: span 9;
}

.col-xs-10 {
        grid-column: span 10;
}

.col-xs-11 {
        grid-column: span 11;
}

.col-xs-12 {
        grid-column: span 12;
}

.col-xs-offset-0 {
        margin-left: 0;
}

.col-xs-offset-1 {
        grid-column-start: 2;
}

.col-xs-offset-2 {
        grid-column-start: 3;
}

.col-xs-offset-3 {
        grid-column-start: 4;
}

.col-xs-offset-4 {
        grid-column-start: 5;
}

.col-xs-offset-5 {
        grid-column-start: 6;
}

.col-xs-offset-6 {
        grid-column-start: 7;
}

.col-xs-offset-7 {
        grid-column-start: 8;
}

.col-xs-offset-8 {
        grid-column-start: 9;
}

.col-xs-offset-9 {
        grid-column-start: 10;
}

.col-xs-offset-10 {
        grid-column-start: 11;
}

.col-xs-offset-11 {
        grid-column-start: 12;
}

@media (min-width: 768px) {

        .col-sm-1 {
                grid-column: span 1;
        }

        .col-sm-2 {
                grid-column: span 2;
        }

        .col-sm-3 {
                grid-column: span 3;
        }

        .col-sm-4 {
                grid-column: span 4;
        }

        .col-sm-5 {
                grid-column: span 5;
        }

        .col-sm-6 {
                grid-column: span 6;
        }

        .col-sm-7 {
                grid-column: span 7;
        }

        .col-sm-8 {
                grid-column: span 8;
        }

        .col-sm-9 {
                grid-column: span 9;
        }

        .col-sm-10 {
                grid-column: span 10;
        }

        .col-sm-11 {
                grid-column: span 11;
        }

        .col-sm-12 {
                grid-column: span 12;
        }

        .col-sm-offset-0 {
                margin-left: 0;
        }

        .col-sm-offset-1 {
                grid-column-start: 2;
        }

        .col-sm-offset-2 {
                grid-column-start: 3;
        }

        .col-sm-offset-3 {
                grid-column-start: 4;
        }

        .col-sm-offset-4 {
                grid-column-start: 5;
        }

        .col-sm-offset-5 {
                grid-column-start: 6;
        }

        .col-sm-offset-6 {
                grid-column-start: 7;
        }

        .col-sm-offset-7 {
                grid-column-start: 8;
        }

        .col-sm-offset-8 {
                grid-column-start: 9;
        }

        .col-sm-offset-9 {
                grid-column-start: 10;
        }

        .col-sm-offset-10 {
                grid-column-start: 11;
        }

        .col-sm-offset-11 {
                grid-column-start: 12;
        }
}

@media (min-width: 992px) {

        .col-md-1 {
                grid-column: span 1;
        }

        .col-md-2 {
                grid-column: span 2;
        }

        .col-md-3 {
                grid-column: span 3;
        }

        .col-md-4 {
                grid-column: span 4;
        }

        .col-md-5 {
                grid-column: span 5;
        }

        .col-md-6 {
                grid-column: span 6;
        }

        .col-md-7 {
                grid-column: span 7;
        }

        .col-md-8 {
                grid-column: span 8;
        }

        .col-md-9 {
                grid-column: span 9;
        }

        .col-md-10 {
                grid-column: span 10;
        }

        .col-md-11 {
                grid-column: span 11;
        }

        .col-md-12 {
                grid-column: span 12;
        }

        .col-md-offset-0 {
                margin-left: 0;
        }

        .col-md-offset-1 {
                grid-column-start: 2;
        }

        .col-md-offset-2 {
                grid-column-start: 3;
        }

        .col-md-offset-3 {
                grid-column-start: 4;
        }

        .col-md-offset-4 {
                grid-column-start: 5;
        }

        .col-md-offset-5 {
                grid-column-start: 6;
        }

        .col-md-offset-6 {
                grid-column-start: 7;
        }

        .col-md-offset-7 {
                grid-column-start: 8;
        }

        .col-md-offset-8 {
                grid-column-start: 9;
        }

        .col-md-offset-9 {
                grid-column-start: 10;
        }

        .col-md-offset-10 {
                grid-column-start: 11;
        }

        .col-md-offset-11 {
                grid-column-start: 12;
        }
}

@media (min-width: 1200px) {

        .col-lg-1 {
                grid-column: span 1;
        }

        .col-lg-2 {
                grid-column: span 2;
        }

        .col-lg-3 {
                grid-column: span 3;
        }

        .col-lg-4 {
                grid-column: span 4;
        }

        .col-lg-5 {
                grid-column: span 5;
        }

        .col-lg-6 {
                grid-column: span 6;
        }

        .col-lg-7 {
                grid-column: span 7;
        }

        .col-lg-8 {
                grid-column: span 8;
        }

        .col-lg-9 {
                grid-column: span 9;
        }

        .col-lg-10 {
                grid-column: span 10;
        }

        .col-lg-11 {
                grid-column: span 11;
        }

        .col-lg-12 {
                grid-column: span 12;
        }

        .col-lg-offset-0 {
                margin-left: 0;
        }

        .col-lg-offset-1 {
                grid-column-start: 2;
        }

        .col-lg-offset-2 {
                grid-column-start: 3;
        }

        .col-lg-offset-3 {
                grid-column-start: 4;
        }

        .col-lg-offset-4 {
                grid-column-start: 5;
        }

        .col-lg-offset-5 {
                grid-column-start: 6;
        }

        .col-lg-offset-6 {
                grid-column-start: 7;
        }

        .col-lg-offset-7 {
                grid-column-start: 8;
        }

        .col-lg-offset-8 {
                grid-column-start: 9;
        }

        .col-lg-offset-9 {
                grid-column-start: 10;
        }

        .col-lg-offset-10 {
                grid-column-start: 11;
        }

        .col-lg-offset-11 {
                grid-column-start: 12;
        }
}


.form-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
}


.form-group label {
        display: block;
        color: rgba(17, 24, 39, .88);
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
}

.form-control {
        display: block;
        width: 100%;
        border: 1px solid rgba(0, 0, 0, .31);
        background: #ffffff;
        color: #000000;
        border-radius: 0px;
        padding: 15px;
        font-size: 15px;
        outline: none;
        transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.form-control:focus {
        border-color: rgba(183, 154, 85, .45);
        background: #fffdf8;
        box-shadow: 0 0 0 4px rgba(183, 154, 85, .10);
}

.form-control::placeholder {
        color: rgba(17, 24, 39, .34);
}


.success {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  padding:100px 50px;
  gap:5px;
  text-align: center;
}

.success .fa {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  background: #2ecc71;
  color: #fff;
  margin-bottom: 15px;
  border-radius: 50%;
  font-size: 30px;
}

.success p {
  color: rgba(17, 24, 39, .72);
}

.success .btn-primary { margin-top:15px; }


@media (max-width: 768px) {
  .success {
    padding: 25px;
  }
}
   


    .wizard .nav-wizard {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 30px;
    }

    .wizard .nav-wizard li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 30px;
      background: #FFF;
      transition: all 0.25s ease;

      border: 1px solid #EEE;
    }

   
   .wizard .nav-wizard .number {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      font-weight: 700;
      font-size: 14px;
      background: #e9e3db;
      color: #5b5b5b;
      flex-shrink: 0;
    }

   .wizard  .nav-wizard li.active .number {
      background:#000;
      color: white;
    }

   .wizard  .nav-wizard li.done .number {
      background:#2ecc71;
      color: white;
    }

   .wizard  .nav-wizard strong {
      display: block;
      font-size: 15px;
    }

   .wizard .nav-wizard span {
    
        color: rgba(17, 24, 39, .78);
      font-size: 13px;
    }



  .wizard  .wizard-panel {
      display: none;
      animation: fadeUp 0.25s ease;
    }

   .wizard .wizard-panel.active {
      display: grid;
    }

    .wizard-services { grid-template-columns:repeat(5, 1fr);gap:15px; }
    .wizard-branches { grid-template-columns:repeat(4, 1fr);gap:15px; }
   .wizard-contact{ background:#FFF;  padding: 30px;border: 1px solid #EEE;}


   .wizard .wizard-checkbox{
      position: relative;
    }

   .wizard .checkbox-inline { display:flex;gap:10px;align-items:center; }
   .wizard .wizard-checkbox input{
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

   .wizard .wizard-checkbox label {
      display: flex;
      align-items: flex-start;
      justify-content:  flex-start;
      flex-direction: column;
      gap: 15px;
      width: 100%;
      padding: 15px;
      border: 1px solid #EEE;
      background: #fff;
      cursor: pointer;
      transition: all 0.2s ease;
    }


   .wizard .wizard-checkbox label:hover {
      transform: translateY(-2px);
    }

   .wizard .wizard-checkbox input:checked + label {
      border: 1px solid rgba(0, 0, 0, .31);
    }


   .wizard .wizard-checkbox img{ 
        object-fit: cover;
        height: 150px;
        max-height: 150px;
        width: 100%; 
        box-shadow: inset 0 -30px 40px rgba(0, 0, 0, 0.12);
    }
  
   
   .wizard .wizard-checkbox strong {
        
      font-size: 17px;
      font-weight: 700;
    }
  .wizard .wizard-checkbox small {
        color: rgba(17, 24, 39, .78);
      font-size: 14px;
      line-height: 1.5;
    }

   .wizard .wizard-checkbox .fa-check {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid #bdb4ab;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      background: #fff;
      color: transparent;
      font-size: 14px;
      transition: all 0.2s ease;
    }

    .wizard .wizard-checkbox input:checked + label .fa-check,
   .wizard  .wizard-checkbox input:checked + label .fa-check {
      background: #000;
      border-color:#000;
      color: #fff;
    }

  
    .wizard .wizard-actions {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
      background:#FFF;
      flex-wrap: wrap;
      position:fixed;bottom:0;left:0;right:0;background:#FFF;padding:15px;
      border-top:1px solid #EEE;


    }

  





    @media (max-width: 900px) {
    
       .wizard .nav-wizard { text-align: center; gap:0px;margin-bottom: 30px;border:none; }
        .wizard .nav-wizard li { background:none;align-items:center;justify-content:flex-start;padding:0px 15px;gap:10px;border:none;text-align:left; }
        .wizard .nav-wizard li + li { border-left:1px solid rgba(15, 23, 42, 0.08); }

       .wizard  .nav-wizard span { display:none; }
       .wizard  .nav-wizard strong { font-size:12px; }
       .wizard  .wizard-checkbox small {font-size:12px;}
       .wizard  .nav-wizard .number { width:24px;height:24px; }




    .wizard-services { grid-template-columns:repeat(2, 1fr);gap:15px; }
    .wizard-branches { grid-template-columns:repeat(2, 1fr);gap:15px; }

       .wizard  .wizard-checkbox label { padding:15px;gap:10px; }
       .wizard  .wizard-checkbox strong { font-size:14px; }
       .wizard .wizard-checkbox img { max-height:100px;min-height:100px; }

        .wizard .wizard-checkbox .fa-check { width:18px;height:18px;font-size:10px; }
       .wizard  .wizard-branches .wizard-checkbox label { gap:2px; }
       .wizard  .wizard-branches .wizard-checkbox strong { margin-top:10px; }

       .wizard  .wizard-contact{ padding:15px; }
       .wizard  .wizard-contact .row { gap:0px; }

 .wizard .wizard-actions {justify-content: space-between; box-shadow: 0px -5px 8px 0px #0000001a;}

      
    }

 



.whatsapp-button {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 64px;
        height: 64px;
        background: #25d366;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        text-decoration: none;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        z-index: 9999;
        transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.whatsapp-button:hover {
        transform: scale(1.1);
        background: #1ebe5d;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.whatsapp-button::after {
        content: "Randevu Al";
        position: absolute;
        right: 75px;
        background: #111;
        color: #fff;
        font-size: 14px;
        padding: 10px 14px;
        white-space: nowrap;
        transition: all 0.3s ease;
}

.whatsapp-button:hover::after {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
}

@media (max-width: 768px) {
        .whatsapp-button {
                width: 58px;
                height: 58px;
                font-size: 28px;
                right: 15px;
                bottom: 15px;
        }

        .whatsapp-button::after {
                display: none;
        }
}


.header {
        position: absolute;
        top: 0;
        left: 0;
        right:0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        border-bottom: 1px solid rgba(245, 245, 247, 0.08) !important;
        backdrop-filter: blur(20px);
        height: 110px;
        overflow: hidden;
        z-index: 9999;
}

.header .logo {
        display: block;
        margin: 0 auto;
}

.header .logo img {
        width: 250px;
}

.header .container {
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        z-index: 2;
}


.header-left,
.header-right {
        display: flex;
        align-items: center;
        gap: 30px;
        color: var(--muted);
        font-size: 14px;
}

.header-left {
        justify-content: flex-start;
}

.header-left a+a {
        padding-left: 30px;
        border-left: 1px solid rgba(255, 255, 255, .3);
}

.header-left a {
        opacity: .7;
}

.header-left a.active {
        opacity: 1;
        font-weight: bold;
}

.header-right {
        justify-content: flex-end;
}


.header a {
        display: flex;
        gap: 5px;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 20px;
        letter-spacing: 0.03em;
}

.header .toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
}

.header .toggle .icon {
        display: flex;
        flex-flow: column;
        align-items: flex-end;
}

.header .toggle span {
        position: relative;
        height: 3px;
        background: #FFF;
}

.header .toggle span.bar:not(:first-child) {
        margin-top: 4px;
}

.header .toggle span.bar {
        transition: transform 0.3s ease-in-out 0.5s, opacity 0.15s ease-in-out 0.5s
}

.header .toggle span.bar:nth-child(1) {
        width: 1.34em;
}

.header .toggle span.bar:nth-child(2) {
        width: 1.8em;
}

.header .toggle span.bar:nth-child(3) {
        width: 0.8em;
}

.header .toggle span.close {
        position: absolute;
        margin-top: -1.5px;
        opacity: 0;
        top: 50%;
        width: 1.34em;
        transform-origin: center center;
        transition: transform 0.5s ease-in-out, opacity 0.125s ease-in-out 0.5s;
        background: #FFF;
}

.header .toggle span.close:not(:last-child) {
        transform: rotate(45deg) translateX(-250%);
}

.header .toggle span.close:last-child {
        transform: rotate(-45deg) translateX(250%);
}

.header .toggle .text {
        font-size: 20px;
        margin-left: 10px;
        letter-spacing: 0.03em;
        color: #FFF;
}


.dark .header {
        border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
}


.dark .header .logo img {
        filter: brightness(1) invert(1);
}

.dark .header { 
        color: #000000; }

.dark .header-left a {
        color: #000000;
}

.dark .header-left a+a {
        border-left: 1px solid rgba(0, 0, 0, .16);
}

.dark .header .toggle span {
        background: #000000;
}

.dark .header .toggle span.close {
        background: #000000;
}

.dark .header .toggle .text {
        color: #000000;
}



.headline {
        padding: 200px 0 70px 0;
        border-bottom: 1px solid rgba(15, 23, 42, .06);
        margin-bottom: 75px;
}

.headline em {
        display: block;
        margin-bottom: 10px;
        color: var(--accent);
        font-size: 40px;
        font-weight: bold;
        font-family: var(--serif), serif;
        font-style: italic;
}


.headline .container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
}


.headline h1 {
        margin: 0 0 14px;
        color: #000000;
        font-size: 55px;
        line-height: 1;
        letter-spacing: -.03em;
}

.headline p {
        margin-bottom: 15px;
        color: rgba(17, 24, 39, .78);
        font-size: 16px;
}


.headline img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.headline-actions { display:flex;gap:10px; }
.headline-actions + .headline-actions {margin-top:10px;}

.headline-gallery{
    column-count:3;
    column-gap:15px;
}

.headline-item{
    position:relative;
    display:block;
    break-inside:avoid;
    overflow:hidden;
    background:#fff;
    transition:transform .35s ease, box-shadow .35s ease;
    cursor:pointer;
}
.headline-item:nth-child(1),
.headline-item:nth-child(3),
.headline-item:nth-child(5){
    margin-bottom: 15px;
}
.headline-item:nth-child(1) img,
.headline-item:nth-child(4) img,
.headline-item:nth-child(5) img{
     height:260px;
}
.headline-item::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.6);
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;
}

.headline-item i {   position: absolute;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);color:#FFF;font-size:20px;opacity: 0; z-index: 99;}
.headline-item:hover i  { opacity:1; }

.headline-item:hover::after{ opacity:1; }

.headline-item img{
    width:100%;
    display:block;
    object-fit:cover;
    transition:transform .6s ease;
    height:170px; 
}


.headline-gallery:has(> .headline-item:nth-child(7)) > .headline-item:nth-child(n + 7) {
  display: none;
}


.headline-item.has-more .fal { display:none; }
.headline-item.has-more::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 1;
    z-index: 1;
}
.headline-item .gallery-more {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
}







.headline ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
}



.headline ul li span {
        display: block;
        margin-bottom: 8px;
        color: rgba(20, 20, 24, .48);
        font-size: 11px;
        letter-spacing: .14em;
        text-transform: uppercase;
}



.hero {
        position: relative;
        display: flex;
        align-items:center;
        justify-content: center;
        flex-direction: column;
        padding-top: 175px;
        padding-bottom: 75px;
        margin-bottom: 75px;
        text-align: center;
}


.hero h1 {
        color: var(--white);
        font-size: 45px;
        font-weight: 900;
        letter-spacing: -.04em;
}

.hero p {
        color: var(--muted);

        font-size: 16px;
        line-height: 24px;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;


}


.hero:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        backdrop-filter: blur(10px);
        x -webkit-backdrop-filter: blur(10px);
}

.hero h1,
.hero p {
        position: relative;
        max-width: 500px;
        z-index: 5;
}


.menu {
        display: flex;
        position: absolute;
        transition: transform 0.4s ease;
        transform: translateY(-100%);
        inset: 0;
        width: 100%;
        height: 100lvh;
        z-index: 1000;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        text-align: center;
        padding-top:110px;
        width: 100%;
        height: 100%;
        color: #000000;
}

.menu ul {
        display: flex;
        flex-direction: column;
        gap: 15px;
}

.menu ul li a {
        display: block;
        font-family: 'Anton', sans-serif;
        font-size: clamp(40px, 2vw, 75px);
        letter-spacing: -.03em;
        line-height: 1.02;
        transition: .25s ease;
        color: var(--white);
}


.menu ul li a:hover {
        color: var(--accent);
}


.menu-open {
        overflow: hidden;
}

.menu-open .menu {
        transform: translateY(0);
}

.menu-open .hero,
.menu-open .fullpage video,
.menu-open .hero video {
        height: 100vh;
        min-height: 100vh;
        margin-bottom: 0px;
        z-index: 6;
}

.menu-open .hero h1,
.menu-open .hero p { display:none; }

.dark.menu-open .menu { 

        backdrop-filter: blur(100px);
         -webkit-backdrop-filter: blur(100px); }
.dark.menu-open .menu li a { color:#000; }
.dark.menu-open .menu li:hover a { color:var(--accent); }


.menu ul li {
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
}

.menu-open .menu ul li {
        opacity: 1;
        transform: translateY(0);
}

.menu-open .menu ul li:nth-child(1) {
        transition-delay: .25s;
}

.menu-open .menu ul li:nth-child(2) {
        transition-delay: .50s;
}

.menu-open .menu ul li:nth-child(3) {
        transition-delay: .75s;
}

.menu-open .menu ul li:nth-child(4) {
        transition-delay: 1s;
}

.menu-open .menu ul li:nth-child(5) {
        transition-delay: 1.25s;
}

.menu-open .menu ul li:nth-child(6) {
        transition-delay: 1.50s;
}

.menu-open .menu ul li:nth-child(7) {
        transition-delay: 1.75s;
}
.menu-open .menu ul li:nth-child(8) {
        transition-delay: 2s;
}



.menu-open .header .toggle .bar {
        opacity: 0;
        transition: transform 0.3s ease-in-out, opacity 0.15s ease-in-out 0.15s;
}

.menu-open .header .toggle .close {
        opacity: 1;
        transition: transform 0.5s ease-in-out 0.3s, opacity 0.125s ease-in-out 0.3s;
}

.menu-open .header .toggle span:nth-child(1) {
        transform: rotate(-45deg) translateX(-400%);
}

.menu-open .header .toggle span:nth-child(2) {
        transform: rotate(-45deg) translate(0, -7px) translateX(200%);
}

.menu-open .header .toggle span:nth-child(3) {
        transform: rotate(-45deg) translate(0, 1px) translateX(200%);
}

.menu-open .header .toggle span.close:not(:last-child) {
        transform: rotate(45deg);
}

.menu-open .header .toggle span.close:last-child {
        transform: rotate(-45deg);
}


.menu-open .fullpage>.swiper-logo, 
.menu-open .fullpage>.swiper-subtitle, 
.menu-open .fullpage>.swiper-description {
        display: none;
}

.menu-open .fullpage:before{
        content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(10px);

}

.fullpage {
        position: relative;
        transition: all .5s ease;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        gap:10px;
        text-align: center;
        color: var(--white);
        height: 100vh;
        max-height: 100vh;
        min-height: 100vh;
}

.fullpage:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
        height: 100%;
        width: 100%;
}


.fullpage .swiper-logo { position: relative;z-index: 2; }


.fullpage .swiper-logo img { min-width: 200px;max-width: 200px;width:200px;filter: brightness(0) invert(1); }


.fullpage .swiper-subtitle {

        position: relative;
        z-index: 2;
        font-family: "Anton", sans-serif;
        font-size: clamp(35px, 4vw, 60px);
        line-height: 1.1;
        letter-spacing: -.03em;

}


.fullpage .swiper-description {
        position: relative;
        display: inline-block;
        margin: 0;
        color: var(--muted);
        line-height: 1.65;
        font-size: 17px;
        font-weight: 200;
        max-width: 600px;
        padding-bottom:100px;
        z-index: 2;
}

    .igm-modal {
                        position: fixed;
                        inset: 0;
                        background: rgba(0, 0, 0, 0.72);
                        z-index: 99999;
                        opacity: 0;
                        visibility: hidden;
                        pointer-events: none;
                        transition: .22s ease;
                        }
                        .igm-modal.is-open {
                        opacity: 1;
                        visibility: visible;
                        pointer-events: auto;
                        }
                        .igm-backdrop {
                        position: absolute;
                        inset: 0;
                        }
                        .igm-inner {
                        position: relative;
                        width: min(1280px, calc(100vw - 48px));
                        height: min(92vh, 820px);
                        margin: 4vh auto;
                        z-index: 2;
                        }
                        .igm-swiper,
                        .igm-swiper .swiper-wrapper,
                        .igm-swiper .swiper-slide {
                        width: 100%;
                        height: 100%;
                        }
                        .igm-swiper .swiper-slide {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        }
                        .igm-dialog {
                        width: 100%;
                        height: 100%;
                        background: #fff;
                        border-radius: 4px;
                        overflow: hidden;
                        display: grid;
                        grid-template-columns: minmax(0, 1fr) 405px;
                        }
                        .igm-media {
                        position: relative;
                        background: #000;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        min-width: 0;
                        }
                        .igm-media img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        display: block;
                        background: #000;
                        }
                        .igm-media img,
                        .igm-media video {
                        position: absolute;
                        top:0;left:0;right:0;bottom:0;
                        display: block;
                        background: #000;
                        width:100%;height:100%;
                        }
                        .igm-side {
                        display: flex;
                        flex-direction: column;
                        min-width: 0;
                        background: #fff;
                        }
                        .igm-header {
                        height: 60px;
                        padding: 14px 16px;
                        border-bottom: 1px solid #efefef;
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        min-width: 0;
                        }
                        .igm-avatar {
                        width: 32px;
                        height: 32px;
                        border-radius: 50%;
                        object-fit: cover;
                        flex-shrink: 0;
                        }
                        .igm-username {
                        font-size: 14px;
                        font-weight: 600;
                        color: #262626;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        }
                        .igm-content {
                        flex: 1;
                        min-height: 0;
                        overflow: auto;
                        padding: 16px;
                        }
                        .igm-post {
                        display: flex;
                        gap: 12px;
                        align-items: flex-start;
                        }
                        .igm-post-avatar {
                        width: 28px;
                        height: 28px;
                        border-radius: 50%;
                        object-fit: cover;
                        flex-shrink: 0;
                        }
                        .igm-post-body {
                        min-width: 0;
                        }
                        .igm-post-text {
                        font-size: 14px;
                        line-height: 1.45;
                        color: #262626;
                        word-break: break-word;
                        }
                        .igm-post-text strong {
                        margin-right: 6px;
                        }
                        .igm-actions {
                        border-top: 1px solid #efefef;
                        flex-shrink: 0;
                        }
                        .igm-toolbar {
                        padding: 10px 16px 8px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        }
                        .igm-toolbar-left {
                        display: flex;
                        gap: 16px;
                        align-items: center;
                        }
                        .igm-icon-btn {
                        border: 0;
                        background: transparent;
                        padding: 0;
                        cursor: pointer;
                        color: #262626;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        }
                        .igm-icon-btn img {
                        width: 24px;
                        height: 24px;
                        stroke: currentColor;
                        stroke-width: 2;
                        fill: none;
                        stroke-linecap: round;
                        stroke-linejoin: round;
                        }
                        .igm-likes {
                        padding: 0 16px;
                        font-size: 14px;
                        font-weight: 600;
                        color: #262626;
                        margin-bottom: 8px;
                        }
                        .igm-comments-count {
                        padding: 0 16px 12px;
                        font-size: 12px;
                        color: #8e8e8e;
                        }
                        .igm-add-comment {
                        height: 54px;
                        padding: 0 16px;
                        border-top: 1px solid #efefef;
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        flex-shrink: 0;
                        }
                        .igm-add-comment input {
                        flex: 1;
                        border: 0;
                        outline: 0;
                        background: transparent;
                        min-width: 0;
                        font-size: 14px;
                        }
                        .igm-add-comment a {
                        border: 0;
                        background: transparent;
                        color: #0095f6;
                        font-size: 14px;
                        font-weight: 600;
                        opacity: .45;
                        }
                        .igm-close {
                        position: absolute;
                        top: 18px;
                        right: 18px;
                        z-index: 3;
                        width: 36px;
                        height: 36px;
                        border: 0;
                        background: transparent;
                        color: #fff;
                        cursor: pointer;
                        }
                        .igm-close svg {
                        width: 20px;
                        height: 20px;
                        stroke: currentColor;
                        stroke-width: 2.2;
                        fill: none;
                        }
                        .igm-prev,
                        .igm-next {
                        width: 42px !important;
                        height: 42px !important;
                        border-radius: 50%;
                        background: rgba(255,255,255,.95);
                        color: #111 !important;
                        box-shadow: 0 4px 12px rgba(0,0,0,.16);
                        }
                        .igm-prev::after,
                        .igm-next::after {
                        font-size: 18px !important;
                        font-weight: 800;
                        }
                        .igm-prev {
                        left: 18px !important;
                        }
                        .igm-next {
                        right: 18px !important;
                        }
                        @media (max-width: 900px) {
                        .igm-inner {
                        width: 100vw;
                        height: 100vh;
                        margin: 0;
                        }
                        .igm-dialog {
                        grid-template-columns: 1fr;
                        grid-template-rows: 42vh 1fr;
                        border-radius: 0;
                        }
                        .igm-media img {
                        object-fit: cover;
                        }
                        .igm-prev,
                        .igm-next {
                        width: 36px !important;
                        height: 36px !important;
                        }
                        }


    .popup-overlay {
      position: fixed;
      top:0;left:0;right:0;bottom:0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(15, 15, 20, 0.72);
      backdrop-filter: blur(6px);
      z-index: 99999;
    }

    .popup-overlay.is-active {
      display: flex;
    }

    .popup {
        display: flex;
        align-items: center;
        flex-direction: column;
      position: relative;
      width: 100%;
      max-width: 500px;
      padding: 42px 34px 34px;
      text-align: center;
      background:
                radial-gradient(circle at 12% 18%, rgba(183, 154, 85, .10), transparent 22%),
                linear-gradient(180deg, #faf8f4 0%, #ffffff 100%);
                background-repeat: no-repeat;background-size:cover;
      overflow: hidden;
    }

  

    .popup-close {
      position: absolute;
      top: 16px;
      right: 18px;
      width: 38px;
      height: 38px;
      border: none;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.06);
      color: #555;
      font-size: 28px;
      line-height: 38px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .popup-close:hover {
      background: #e67e22;
      color: #fff;
      transform: rotate(90deg);
    }



 

    .popup-logo  {margin-bottom:30px;  }
    .popup-logo img {  max-width: 250px;min-width: 250px;width:250px;filter: brightness(0); }

    .popup-title {
        margin-bottom:15px;
        font-size: 20px;
        font-weight: bold;
        color: #000000;
        line-height: 1;
        letter-spacing: .04em;
    }

    .popup p {
      margin-bottom: 25px;
      color: #5f5f5f;
      font-size: 16px;
    }

    .popup .btn-primary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }

    .popup .btn-primary:hover {
      text-decoration: none;
      transform: translateY(-2px);
    }

   .popup .btn-primary span {
      font-size: 22px;
      transition: transform 0.25s ease;
    }

   .popup .btn-primary:hover span {
      transform: translateX(4px);
    }

    .popup-note {
      margin-top: 16px;
      color: #8a8a8a;
      font-size: 13px;
    }

   

    @media (max-width: 575px) {
  
      .popup {
        max-width: 90%;
        padding: 38px 22px 28px;
      }

      .popup p {
        font-size: 15px;
      }

        .popup-logo img { max-width:200px;min-width:200px;width:200px; }

      .popup-close {
        top: 12px;
        right: 12px;
      }
    }

hr {
        width: 50%;
        height: 1px;
        border: 0;
        outline: none;
        margin: 30px 0px;
        background: linear-gradient(90deg, var(--accent), transparent);
        flex: 0 0 auto;
}


.content {
        display: grid;
        grid-template-columns: 1.1fr .55fr;
        gap: 50px;
        align-items: start;
}


.content .title {
        margin-bottom: 30px;
}


.content .title em {
        margin-bottom: 10px;
        font-size: 24px;
}


.content .title h2 {
        font-size: 25px;
        margin-bottom: 0px;
}


.content iframe {
        width: 100% !important;
        height: 300px;
}

.content-left {
        position: relative;
        padding-right: 50px;
}

.content-left::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        height: 100%;
        background: linear-gradient(0deg, var(--accent), transparent);
}


.content-right p {
        margin: 0 0 15px;
        color: rgba(17, 24, 39, .78);
}

.content ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
}

.content ul li {
        position: relative;
        padding-left: 18px;
        color: rgba(17, 24, 39, .78);
        line-height: 1.85;
}

.content ul li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .8em;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        transform: translateY(-50%);
}


.content-right {
        position: sticky;
        top: 50px;
}


.content-widget h3 {
        margin: 0 0 16px;
        color: #161616;
        font-size: 22px;
        line-height: 1.2;
}

.content table tr td {
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(20, 20, 24, .08);
}

.content table tr:last-child td {
        border-bottom: none;
        padding-bottom: 0;
}

.content table tr td:first-child {
        color: rgba(20, 20, 24, .72);
}

.content table tr td:last-child {
        text-align: right;
        color: #161616;
        font-weight: 600;
}

.content table tr+tr td {
        padding-top: 10px;
}


.btn-primary, .btn-default {
        display: inline-block;
        padding: 15px 22px;
        border: none;
        color: var(--white);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        cursor: pointer;
        text-transform: uppercase;
        transition: all .3s ease;
}

.btn-primary {
        background: var(--bg);
        color: var(--white);
}
.btn-default {
        border: 1px solid rgba(15, 23, 42, .10);
        background: #fff;
        color: #000000;
}

.btn-primary:hover {
        background: var(--accent);
        transform: translateY(-2px);
}

.btn-default:hover {
        transform: translateY(-2px);
        border-color: rgba(183, 154, 85, .42);
        background: rgba(183, 154, 85, .08);
}

.btn-instagram, .btn-tiktok,
.btn-facebook, .btn-twitter,
.btn-linkedin, .btn-youtube{
        display: inline-block;
        padding: 7px 10px;
        border: none;
        color: var(--white);
        font-size: 15px;
        cursor: pointer;
        text-transform: uppercase;
        transition: all .3s ease;
}



.btn-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #ffffff;
}

.btn-tiktok {
    background-color: #000000;
    color: #ffffff;
}

.btn-facebook {
    background-color: #1877F2;
    color: #ffffff;
}

.btn-twitter {
    background-color: #000000;
    color: #ffffff;
}

.btn-linkedin {
    background-color: #0077B5;
    color: #ffffff;
}

.btn-youtube {
    background-color: #FF0000;
    border-color: #FF0000;
    color: #ffffff;
}


.contact .title {
        margin-bottom: 0px;
}

.contact .title p {
        margin-bottom: 0px;
}

.contact .title h2 {
        font-size: 35px;
}

.contact .title em {
        font-size: 25px;
}

.contact-left,
.contact-right {
        position: relative;
}

.contact-left {
        padding-right: 50px;
}

.contact-right {
        padding-left: 20px;
}

.contact-left::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        height: 100%;
        background: linear-gradient(0deg, var(--accent), transparent);
}

.contact nav a {
        display: block;
        padding-top: 20px;
        margin-top: 20px;
        border-top: 1px solid rgba(15, 23, 42, .06);
}

.contact nav a:first-child {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
}

.contact nav span {
        display: block;
        margin-bottom: 6px;
        color: rgba(17, 24, 39, .72);
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
}

.contact nav strong {
        color: #000000;
        font-size: 15px;
        line-height: 1.6;
}

.contact iframe {
        margin-top: 75px;
        min-height: 420px;

        overflow: hidden;
        width: 100%;
}


.instagram {
        font-size: 18px;
        text-align: center;
}


.profile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding: 30px;
        margin-top:75px;
        margin-bottom: 75px;    
        background: #F7F4EE;

}

.profile figure {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(40deg, #f99b4a 15%, #dd3071 50%, #c72e8d 85%);
        width: 76px;
        height: 76px;
        border-radius: 50%;
        padding: 4px;
}

.profile img {
        max-width: 70px;
        border-radius: 100%;
        border: 3px solid #F7F4EE;
}

.profile strong {
        display: block;
}

.profile .fullname {
        margin-right: 15px;
        font-size: 18px;
        text-align: left;
}

.profile .fullname strong {
        line-height: 1;
}

.profile .fullname small {
        font-size: 14px;
        color: rgba(17, 24, 39, .78);
}

.profile .stats {
        text-align: center;
}

.profile .stats strong {}

.profile .stats small {
        font-size: 14px;
        color: rgba(0, 0, 0, .72);
}

.profile .follow {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(40deg, #f99b4a 15%, #dd3071 50%, #c72e8d 85%);
        color: #FFF;

        font-size: 14px;
        padding: 10px 15px;
        gap: 5px;
        margin-left: 15px;
}


.feedly {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 3px;
}

.feedly .item:nth-child(n+11) {
        display: none;
}

.feedly .item {
        position: relative;
        height: 350px;
        overflow: hidden;
        cursor: pointer;
}

.feedly .item:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg,
                        rgba(0, 0, 0, 0) 58%,
                        rgba(5, 5, 7, 0.92)) !important;
        z-index: 5;
}

.feedly .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;

        transition: all .3s ease;
}

.feedly .item:hover img {
        transform: scale(1.05);
}

.feedly ul {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: linear-gradient(180deg,
                        rgba(0, 0, 0, 0) 58%,
                        rgba(5, 5, 7, 0.92)) !important;
        text-align: center;
        padding: 15px;
        gap: 10px;
        color: #FFF;
        z-index: 6;
}

.feedly ul li {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
}



.events {
        padding: 100px 0px;
}

.events .title {
        text-align: center;
        margin: 0 auto 75px auto;
}





.events .wrapper {
        width: 100%;
        z-index: 999;
        position: relative;
        overflow: hidden;
        height: 450px;
        will-change: contents;
        --3d-carousel-item-width: 600px;
        --3d-carousel-gap: 7vw;
        --3d-carousel-rotate: 0deg;
        --3d-carousel-rotate-x: 0deg;
        touch-action: pan-y;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        opacity: 0;
        visibility: hidden;
}

.events .wrapper.is-dragging {
        cursor: grabbing;
}

.events .wrapper,
.events .wrapper * {
        -webkit-user-drag: none;
}


.events ul {
        justify-content: center;
        align-items: center;
        display: flex;
        position: relative;
        transform-style: preserve-3d;
        transform: translate3d(0px, 0px, var(--3d-carousel-z)) rotateX(var(--3d-carousel-rotate-x)) rotateY(var(--3d-carousel-rotate));
}


.events ul li {

        flex: none;
        position: absolute;
        overflow: hidden;
        height: 32vh;
        min-height: 350px;
        width: var(--3d-carousel-item-width);
}

.events ul li img {
        width: 100%;
        height: 100%;
        object-fit: cover;

}

.events ul li a {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        padding: 30px 30px 50px 30px;
        color: #FFF;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        font-size: 22px;
        text-align: center;
        gap: 10px;

}


.events ul li .fa,
.events ul li span {
        font-size: 16px;
        opacity: .9;
        font-weight: bold;
}

.events .actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
}

.events .actions a {
        display: inline-block;
        padding: 10px 20px;
        background: var(--bg);
        color: var(--white);
        border-radius: 999px;
        font-size: 14px;
}



.services-title {
        align-items: center;
        justify-content: center;
        margin: 0px auto 50px auto;
        text-align: center;
}

.services {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 30px;
}


.services-left,
.services-right {
        flex: 1;
        flex-grow: 1;
        width: 50%;
}

.services-left {
        position: sticky;
        top: 0px;
        height: 100vh;
}

.services-left img {
        height: 100%;
        object-fit: cover;
        width: 100%;
}


.services-left img {
        height: 100%;
        object-fit: cover;
}

.services-right {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
}

.service-item {
        position: relative;
        height: 400px;
        transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
        overflow: hidden;
}

.service-caption {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        padding: 30px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

.service-item:hover {
        transform: translateY(-3px);
}

.service-item img {
        width:100%;
        height: 100%;
        object-fit: cover;
}

.service-caption h3 {
        margin-bottom: 8px;
        font-size: 25px;
        color: var(--white);
        letter-spacing: -0.03em;

}

.service-caption p {
        color: var(--muted);

        font-size: 16px;
        line-height: 24px;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
}

 .works {
                             
                        }
                          .work-item {
                                display: grid;
                                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
                                   background: radial-gradient(circle at 12% 18%, rgba(183, 154, 85, .10), transparent 22%), linear-gradient(180deg, #faf8f4 0%, #ffffff 100%);
                                padding: 200px 100px;
                                height: 100vh;
                                align-items: center;
                                text-align: center;
                                margin: 0 auto;
                                gap: 30px;
                                }
                               
                                .work-item  h2 {
                                color: #000000;
                                font-size: clamp(34px, 4vw, 58px);
                                line-height: 1;
                                letter-spacing: -.03em;
                                margin-bottom: 15px;
                                }
                                .work-item  em {
                                display: inline-block;
                                color: var(--accent);
                                font-size: 40px;
                                line-height: 40px;
                                font-weight: bold;
                                font-family: var(--serif), serif;
                                font-style: italic;
                                margin-bottom: 15px;
                                }
                                .work-item  p {
                                margin-bottom: 15px;
                                color: rgba(17, 24, 39, .78);
                                font-size: 16px;
                                }
                                .work-item  img {
                                position: relative;
                                width: 100%;
                                object-fit: cover;
                                }
                               



.article {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 15px;
}


.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {

        font-size: 25px;
        color: #000000;
        line-height: 1;
        letter-spacing: -.04em;
}

.article p {
        color: rgba(17, 24, 39, .78);
        font-size: 16px;
}


.article ul li {
        position: relative;
        padding-left: 18px;
        color: rgba(20, 20, 24, .72);
        line-height: 1.85;
}

.article ul li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .8em;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        transform: translateY(-50%);
}

.article li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .8em;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        transform: translateY(-50%);
}

.article :is(ul, p, h1, h2, h3, h4, h5)+ :is(h2, h3, h4, h5, h6) {
        margin-top: 15px;
}






.franchise .title { margin-bottom:0px; }
.franchise .title em { font-size:25px; }
.franchise .title h2 { font-size:35px; }

.franchise .title p { margin-bottom:0px; }


.franchise-left, .franchise-right { position:relative; }
.franchise-left { padding-right:50px; }
.franchise-right { padding-left:20px; }
.franchise-left::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, var(--accent), transparent);
}


    .franchise ul {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }


.franchise ul li { position:relative;padding-left:15px; }
    .franchise ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-50%);


}

.franchise ul li + li { margin-top:15px; }
  


    .franchise ul li h3 {
         display: block;
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;

    }

     .franchise ul li p {
      font-size: 14px;
      color:rgba(17, 24, 39, .78);
    }




.salons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        justify-content: center;
        gap: 30px;
        aspect-ratio: 16 / 9;
        margin: 0 auto;
}

.salon-left,
.salon-right {
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 30px;
}

.salon-item {
        position: relative;
        width: 100%;
        height: calc((75vh - 30px) / 2);
        overflow: hidden;
}

.salon-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s ease;

}


.salon-item:hover img {
        transform: scale(1.04);
}


.salon-center {
        height: 75vh;
        overflow: hidden;
}

.salon-center .salon-item {
        height: calc(75vh + 60px);
}

.salon-center img {
        height: 100%;
        width: 100%;
}


.salon-caption {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-bottom:30px;
        flex-direction: column;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        transition: transform .6s ease;
}

.salon-caption h2 {
        color: #FFF;
        font-size: 30px;
        letter-spacing: -.03em;
}

.salon-caption em {
        display: inline-block;
        color: var(--accent);
        font-size: 25px;
        font-weight: bold;
        font-family: var(--serif), serif;
        font-style: italic;
}


.footer {
        position: relative;
        background:
                radial-gradient(circle at 12% 18%, rgba(183, 154, 85, .12), transparent 24%),
                radial-gradient(circle at 88% 82%, rgba(183, 154, 85, .05), transparent 18%),
                linear-gradient(180deg, #faf8f4 0%, #ffffff 100%);
        margin-top: 75px;
        padding: 75px 0px;
        overflow: hidden;
}

.footer .container {
        position: relative;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 30px;
}

.footer-title {
        display: block;
        margin-bottom: 18px;
        color: var(--accent);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
}

.footer-title .far { display:none; }

.footer ul {
        display: flex;
        flex-direction: column;
        gap: 15px;
}

.footer ul li a {
        display: flex;
        gap: 10px;
        font-size: 15px;
        color: rgba(17, 24, 39, .76);
        transition: all .25s ease;
}

.footer ul li a i {
        margin-right: 5px;
}

.footer ul li a:hover {
        color: #000000;
        transform: translateX(4px);
}


.copyright {
        font-size: 14px;
        padding: 15px 0px;
        border-top: 1px solid rgba(15, 23, 42, .06);
}

.copyright .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
}

.copyright p {
        margin: 0;
        color: rgba(17, 24, 39, .76);
}

.copyright ul {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
}

.copyright ul li a {
        color: rgba(17, 24, 39, .76);
        transition: color .25s ease;
}

.copyright ul li a:hover {
        color: #000000;
}


.title {
        max-width: 760px;
        margin-bottom: 50px;
}


.title em {
        display: inline-block;
        margin-bottom: 10px;
        color: var(--accent);
        font-size: 40px;
        font-weight: bold;
        font-family: var(--serif), serif;
        font-style: italic;
}

.title h1,
.title h2 {
        margin: 0 0 14px;
        color: #000000;
        font-size: clamp(34px, 4vw, 58px);
        line-height: 1;
        letter-spacing: -.04em;
}

.title p {
        margin-bottom: 15px;
        color: rgba(17, 24, 39, .78);
        font-size: 16px;
}

.title span {
        color: rgba(17, 24, 39, .50);
        font-size: 13px;
}


.about {
        position: relative;
        padding: 100px 0px;
        margin-bottom:75px;
        background: #F7F4EE;

}

.about ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
}

.about ul li {
        position: relative;
        padding-left: 18px;
        color: rgba(17, 24, 39, .78);
        line-height: 1.85;
}

.about ul li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .8em;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        transform: translateY(-50%);
}


.about img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .2s linear;
}

.about p {
        margin: 0 0 15px;
        color: rgba(17, 24, 39, .78);
}

.about p+p {
        margin-top: 10px;
}

.about-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(28px, 5vw, 70px);
        align-items: center;
}

.about-left {
        position: relative;
        overflow: hidden;
        height: 650px;

}

.about-left .fa {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, .7);
        font-size: 20px;
        text-align: center;
        transition: all .5s ease;
}

.about-left .fa:before {
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 100%;
        border: 2px solid rgba(255, 255, 255, .7);
}

.about-left:hover .fa {
        color: #FFF;
}

.about-left:hover .fa:before {
        border: 2px solid #FFF;
}

.about-left:hover img {
        transform: scale(1.05);
}


.about-title {
        margin-bottom: 0px;
}

.about-title h2 {
        margin-bottom: 0px;
        font-size: 50px;
}

.about-right {position: relative;}

.timeline {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        padding:100px 0px;
}


.timeline-right {display: flex;flex-direction: column;gap:10px;}

.timeline img {
        min-width:100%;
        max-width: 100%;
        width:100%;
        max-height: 350px;
        object-fit: cover;
}


.timeline em {
        color: var(--accent);
        font-size: 25px;
        font-weight: bold;
        font-family: var(--serif), serif;
        font-style: italic;
}

.timeline h2 {
         font-size: 30px;
        letter-spacing: -.03em;
}

.timeline p {
        color: rgba(17, 24, 39, .78);
}


.timeline-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 200px;
        position: relative;
        align-items: center;
        justify-content: center;


}



.timeline-item:nth-child(even) .timeline-left {
        order: 1;
}

.timeline-item:nth-child(even) .timeline-right {
        order: 0;
}





@media screen and (min-width: 992px) {

.headline ul li {
        padding: 16px 18px;

        background: rgba(255, 255, 255, .78);
        border: 1px solid rgba(20, 20, 24, .08);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}

.timeline:before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 1px;
        height: 100%;
        margin-left: -1px;
        content: "";
        background: rgba(0, 0, 0, 0.07);
}


.timeline-item:after {
        content: '';
        position: absolute;
        top: 50%;
        left: calc(50% - 1px);
        font-size: 35px;
        color: rgba(0, 0, 0, 0.5);
        font-family: var(--serif), serif;
        border-left: 2px solid rgba(0, 0, 0, 0.5);
        font-weight: bold;
        color: var(--accent);
        font-style: italic;
        width: 2px;
        height: 50px;
}
.timeline-item:nth-child(even) .timeline-right:before {
        right: auto;
        text-align: right;
        padding-left: 0;
        border-left: none;
        border-right: 2px solid rgba(0, 0, 0, 0.5);
        padding-right: 15px;
}


.timeline-item + .timeline-item { padding-top:100px; }


.timeline-item:nth-child(even) .timeline-right {
        text-align: right;
}


.timeline-item:nth-child(even) {
        align-self: flex-end;
}

         .work-item  img {
                                height: 450px;
                                max-height: 450px;
                                min-height: 450px;
                                }
                                .work-image-1 img {
                                transform-origin: bottom right;
                                transform: rotate(-2deg);
                                z-index: 4;
                                }
                                .work-image-2 img {
                                transform-origin: bottom left;
                                transform: rotate(-2deg);
                                z-index: 3;
                                }
                                 .work-image-3 img {
                                transform-origin: botom right;
                                transform: rotate(2deg);
                                z-index: 2;
                                }
                                 .work-image-4 img {
                                transform-origin: bottom left;
                                transform: rotate(2deg);
                                z-index: 1;
                                }

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


.container {
        width:100%;
        padding:0 15px;
}

        hr { width:100%; }
        .header { height:90px; }
        .header .logo img { width:190px; }
        .header-left { gap:10px; }
        .header-left a.active { display:none; }
        .header-left a { opacity:1; }
        .header-left a+a { padding-left:0 !important;border-left:0 !important; }
        .header .toggle .text { display:none; }

        .menu { padding-top:0px;}
        .menu ul li a { font-size: 40px;letter-spacing:0; }

.form-control { padding:10px 15px; }
        .btn-primary, .btn-default {    padding: 10px 15px;}

        .row { gap:15px; }
        .hero { padding-left:15px;padding-right:15px;margin-bottom:50px; }
        .hero h1 { font-size:35px; }

        .fullpage .swiper-logo img { max-width:150px;min-width:150px;width:150px;  }
        .fullpage .swiper-subtitle{ font-size:40px;letter-spacing:0; }
        .fullpage .swiper-description{ font-size:15px;padding-left:15px; padding-right:15px; }

        .title em { font-size:25px;line-height:25px;margin-bottom:5px; }
        .title h1, .title h2 { font-size:30px;margin-bottom:10px; }
        .title p { margin-bottom:0px; line-height: 24px; }


.about { padding:50px 0px;margin-bottom:50px;  }
.about p { text-align:justify; }
.about p:last-child { margin-bottom:0px; }
.about hr { display:none; }
.about-layout { grid-template-columns:1fr; }
.about-left { height:300px; }
.about-title { position:absolute;top:-125px;text-align:center;width:100%; }
.about-title h2 { color:#FFF;margin-bottom:0px; }
.about ul li { line-height:1.3; }

.services { padding:0px 0px; }
.services-left { display:none; }
.services-right { gap:15px; }
.service-item { height:300px; }
.service-caption { padding:15px; }
.service-caption h3 { font-size:18px;margin-bottom:0px; }
.service-caption p {
    font-size: 13px;
    line-height: 19px;
    -webkit-line-clamp:3;
    line-clamp: 3;}
        .events { padding: 50px 15px; }

        .events .title { text-align: center;margin: 0 auto 50px auto;
        }


.events .wrapper {
       
        height: 270px;
         padding:0 15px;
        --3d-carousel-item-width: 300px;
        --3d-carousel-gap: 7vw;
        --3d-carousel-rotate: 0deg;
        --3d-carousel-rotate-x: 0deg;
}

.events ul li { height:200px;min-height:200px; }

.events ul li a { font-size:15px;padding:30px;gap:5px; }
.events ul li span { font-size:14px; }

.events .actions a { padding:6px 12px;font-size:13px; }

.headline { padding:150px 0px 50px 0px;margin-bottom:0px;border-bottom:0px;text-align:center; }
.headline .container { grid-template-columns:1fr; }
.headline em { font-size:25px; }
.headline h1 { font-size:35px; }
.headline-actions { align-items:center;justify-content:center; }
.headline-item:nth-child(1) img,
.headline-item:nth-child(4) img,
.headline-item:nth-child(5) img{
     height:200px;
}


.headline ul li {  }
.headline ul li strong { font-size:14px; }
.content { grid-template-columns:1fr; }
.content-left { padding-right:0px; }

.content-left::after{
        display: none;
}
.content .title { text-align:center; }

.content-right { position:static;text-align:justify; }
.content-right p { margin-bottom:10px; }
.feedly {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:15px;
}

.feedly .item:nth-child(n+11) {
        display: none;
}

.feedly .item {
        position: relative;
        height: 200px;
        overflow: hidden;
}

.profile { margin-bottom: 50px;margin-top:50px; padding:30px 15px; 
    justify-content: center; }
    .profile .fullname { margin-right:0px; }
.profile .stats { display:none; }
.profile .follow {margin-left:0;}

        .timeline { padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;margin-inline: initial; width:100%; }

        .timeline-item { gap:30px; padding:50px 15px;  grid-template-columns: 1fr; background: radial-gradient(circle at 12% 18%, rgba(183, 154, 85, .10), transparent 22%), linear-gradient(180deg, #faf8f4 0%, #ffffff 100%); }
        .timeline img{ max-height:150px; }
        .timeline h2 { font-size:25px; }

        .timeline-item, .timeline-item:nth-child(even) .timeline-right  { text-align:center; }
        .timeline-left { order:1; }

        .salons { grid-template-columns:1fr; }
        .salon-caption em { font-size:25px; }
        .salon-caption h2 { font-size:30px;letter-spacing:0; }
        .salon-center { order: 0; height: calc((75vh - 30px) / 2); }
        .salon-left { order:1; }
        .salon-right { order:2; }

        .work-item { position:relative;padding: 50px 15px;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap:15px; }
        .work-item img {height: 100%;max-height: 100%;min-height: 100%;}
        .work-image-1,
        .work-image-2,
        .work-image-3,
        .work-image-4,
        .work-content{ height:100%; }

        .work-content { position: absolute;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);display: flex;align-items: center;justify-content: center;flex-direction: column; width: 200px;min-width: 200px;max-width: 200px;height: 200px;max-height: 200px;min-height: 200px;background:#FFF;padding:0px 15px; z-index: 99; }
       
        .work-item em {font-size:20px;line-height: 20px;margin-bottom: 10px; }
        .work-item h2 { font-size:30px; }
        .work-item p {display:none;  }


        .contact hr, .franchise hr{ display:none; }
        .contact nav a { margin-top:15px;padding-top:15px; }
        .contact .title, .franchise .title{ margin-bottom:30px; }
        .contact .title em, .contact .title h2, .franchise .title em, .franchise .title h2 { font-size:25px; }

        .contact-left, .contact-right, .franchise-left, .franchise-right { padding-left:0px;padding-right:0px;padding-bottom:50px;margin-bottom: 50px;text-align: center;}
        .contact-left::after, .franchise-left:after { top:auto;bottom:0; width: 100%;height: 1px;background: linear-gradient(90deg, var(--accent), transparent); }
        .contact-right::after { content:'';position: absolute;left:0;right:0; top:auto;bottom:0; width: 100%;height: 1px;background: linear-gradient(90deg, var(--accent), transparent); }
        .contact iframe { margin-top:0px; }

        .franchise-right { padding-bottom:0px;margin-bottom:0px; }
        .franchise ul li { padding-left:0px; }
        .franchise ul li::before { position:static;display:inline-block; }

        .footer { padding:50px 0px;margin-top:50px; }
        .footer .container {display:flex;align-items:stretch;justify-content:center;flex-direction:column; }
        .footer-widget {}
        .footer-widget ul {display: none;}
        .footer-widget.active ul { display:flex;margin-top:15px; }
        .footer-widget.active .footer-title .far {transform: rotate(180deg);}
        .footer-title { display: flex;justify-content: space-between; margin-bottom:0px;font-size:15px; }
        .footer-title .far { display:block; }


        .copyright .container{  align-items: center;justify-content: center;justify-content:center;gap:15px; }
        .copyright ul { align-items:center;justify-content:center; }

}