/*

Tooplate 2119 Gymso Fitness

https://www.tooplate.com/view/2119-gymso-fitness

*/

  @font-face {
      font-family: 'Plain';
      src: url('../fonts/Plain-Regular.woff2') format('woff2'),
          url('../fonts/Plain-Regular.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }

  @font-face {
      font-family: 'Plain';
      src: url('../fonts/Plain-Light.woff2') format('woff2'),
          url('../fonts/Plain-Light.woff') format('woff');
      font-weight: 300;
      font-style: normal;
  }

  @font-face {
      font-family: 'Plain';
      src: url('../fonts/Plain-Bold.woff2') format('woff2'),
          url('../fonts/Plain-Bold.woff') format('woff');
      font-weight: bold;
      font-style: normal;
  }

  :root {
    --primary-color:        #E8DCCB;
    --white-color:          #cbad51;
    --dark-color:           #fb0505;
    --about-bg-color:       #fa0400;

    --gray-color:           #910606;
    --link-color:           #cbad51;
    --p-color:              #E8DCCB;

    --base-font-family:     'Plain', sans-serif;
    --font-weight-bold:     bold;
    --font-weight-normal:   normal;
    --font-weight-light:    300;
    --font-weight-thin:     100;

    --h1-font-size:         48px;
    --h2-font-size:         36px;
    --h3-font-size:         28px;
    --h4-font-size:         24px;
    --h5-font-size:         22px;
    --h6-font-size:         22px;
    --p-font-size:          18px;
    --base-font-size:       16px;
    --menu-font-size:       14px;

    --border-radius-large:  100%;
    --border-radius-small:  2px;
  }


  body {
    background: var(--white-color);
    font-family: var(--base-font-family);
  }


/* Texto normal do site */
body{
    font-family: 'Poppins', sans-serif;
}

/* Títulos */
h1, h2, h3, .navbar-brand{
    font-family: 'Cinzel', serif;
}







  /*---------------------------------------
     TYPOGRAPHY              
  -----------------------------------------*/

  h1,h2,h3,h4,h5,h6 {
    font-weight: var(--font-weight-thin);
    line-height: normal;
  }

  h1 {
    font-size: var(--h1-font-size);
    font-weight: var(--font-weight-bold);
    letter-spacing: -1px;
    text-transform: uppercase;
    margin: 20px 0;
  }

  h2 {
    font-size: var(--h2-font-size);
    font-weight: var(--font-weight-bold);
    letter-spacing: -2px;
  }

  h3 {
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-bold);
    letter-spacing: -1px;
    margin: 0;
  }

  h4 {
    font-size: var(--h4-font-size);
  }

  h5 {
    font-size: var(--h5-font-size);
  }

  h6 {
    color: var(--gray-color);
    font-size: var(--h6-font-size);
    line-height: inherit;
    margin: 0;
  }

  p {
    color: var(--p-color);
    font-size: var(--p-font-size);
    font-weight: var(--font-weight-light);
    line-height: 1.5em;
  }

  b, 
  strong {
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
  }

  .section {
    padding: 7rem 0;
  }


  /* BUTTON */

  .custom-btn {
    background: transparent;
    border-radius: var(--border-radius-small);
    padding: 14px 24px;
    color: var(--white-color);
    font-size: var(--menu-font-size);
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.3s ease;
  }

  .custom-btn:hover {
    color: var(--primary-color);
  }

  .custom-btn:focus {
    box-shadow: none;
  }

  .custom-btn.bordered:hover,
  .custom-btn.bordered:focus,

  .custom-btn.bg-color:hover,
  .custom-btn.bg-color:focus {
    background: var(--white-color);
    border-color: transparent;
    color: var(--primary-color);
  }

  .bordered {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
  }

  .bg-color {
    background: var(--primary-color);
    color: var(--white-color);
  }



  /*---------------------------------------
     GENERAL               
  -----------------------------------------*/

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

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

  a {
    color: var(--link-color);
    font-weight: normal;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  a:hover, 
  a:active, 
  a:focus {
    color: var(--primary-color);
    outline: none;
    text-decoration: none;
  }


  /* BG OVERLAY */

  .bg-overlay {
    background: var(--dark-color);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.85;
  }


  /*---------------------------------------
     MODAL              
  -----------------------------------------*/

  .modal-content {
    padding: 2rem 3rem;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    border: 0;
    padding: 0;
  }

  .membership-form a {
    color: var(--primary-color);
  }


  /*---------------------------------------
    FEATURE          
  -----------------------------------------*/

  .feature {
    background: var(--dark-color);
    padding: 5rem 0;
  }


  /*---------------------------------------
     MENU             
  -----------------------------------------*/

  .navbar {
    background: var(--dark-color);
    padding: 1rem;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  .navbar-brand {
    color: var(--white-color);
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-bold);
    line-height: normal;
    padding-top: 0;
  }

  .nav-item .nav-link {
    display: block;
    color: var(--white-color);
    font-size: var(--menu-font-size);
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    padding: 2px 6px;
  }

  .nav-item .nav-link.active,
  .nav-item .nav-link:hover {
    color: var(--primary-color);
  }

  .navbar .social-icon li a {
    color: var(--white-color);
  }

  .navbar-toggler {
    border: 0;
    padding: 0;
    cursor: pointer;
    margin: 0 10px 0 0;
    width: 30px;
    height: 35px;
    outline: none;
  }

  .navbar-toggler:focus {
    outline: none;
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
    top: 0;
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: rotate(45deg);
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: rotate(-45deg);
  }

  .navbar-toggler .navbar-toggler-icon {
    background: var(--primary-color);
    transition: background 10ms 300ms ease;
    display: block;
    width: 30px;
    height: 2px;
    position: relative;
  }

  .navbar-toggler .navbar-toggler-icon::before,
  .navbar-toggler .navbar-toggler-icon::after {
    transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
    position: absolute;
    right: 0;
    left: 0;
    background: var(--primary-color);
    width: 30px;
    height: 2px;
    content: '';
  }

  .navbar-toggler .navbar-toggler-icon::before {
    top: -8px;
  }

  .navbar-toggler .navbar-toggler-icon::after {
    top: 8px;
  }

  /*---------------------------------------
     HERO              
  -----------------------------------------*/

  .hero {
    background-image: url('../images/inicio.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    vertical-align: middle;
    min-height: 100vh;
    position: relative;
  }


  /*---------------------------------------
     CLASS               
  -----------------------------------------*/

  .class-info {
    background: var(--white-color);
    box-shadow: 6px 0 38px #830402;
    border-radius: 0 0 2px 2px;
    padding: 1rem 2rem;
    position: relative;
  }

  .class-info img {
    border-radius: 2px 2px 0 0;
  }

  .class-info strong {
    color: var(--gray-color);
  }

  .class-price {
    background: var(--primary-color);
    border-radius: var(--border-radius-large);
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    display: block;
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.5rem;
    text-align: center;
  }


  /*---------------------------------------
     SCHEDULE             
  -----------------------------------------*/

  .schedule {
    background: var(--dark-color);
  }

  .schedule-table {
    display: table;
    border: 0;
    text-align: center;
  }

  .schedule-table strong,
  .schedule-table span {
    display: block;
    text-align: center;
  }

  .schedule-table strong {
    color: var(--white-color);
  }

  .schedule-table span {
    color: var(--gray-color);
  }

  .schedule-table span,
  .schedule-table small {
    font-size: var(--menu-font-size);
    text-transform: uppercase;
  }

  .schedule-table small {
    position: relative;
    top: 10px;
  }

  .table .thead-light th,
  .schedule-table tr td:first-child {
    background: var(--primary-color);
    border: 1px solid #f3f3f8;
    color: var(--white-color);
  }

  .schedule-table .thead-light th {
    border-bottom: 0;
    text-transform: uppercase;
  }

  .table-bordered td, 
  .table-bordered th {
    border: 1px solid #fafaff;
  }

  .table-bordered td {
    padding-bottom: 22px;
  }

  .table td, .table th {
    padding: 1rem;
  }


  /*---------------------------------------
      ABOUT & TEAM            
  -----------------------------------------*/

  .about {
    background: var(--about-bg-color);
  }

  .about-working-hours {
    border-left: 2px solid;
    padding-left: 3.5rem;
  }

  .about-working-hours strong {
    color: var(--white-color);
    opacity: 0.85;
  }

  .team-thumb {
    position: relative;
  }

  .team-info {
    background: var(--white-color);
    border-radius: 0 0 2px 2px;
    box-shadow: 6px 0 38px rgb(252, 248, 248);
    padding: 20px;
    position: relative;
  }

  .team-info span {
    font-weight: var(--font-weight-light);
    opacity: 0.85;
  }

  .team-info .social-icon {
    position: absolute;
    top: 10px;
    right: 20px;
  }

  .team-info .social-icon li {
    display: block;
  }


  /*---------------------------------------
     CONTACT              
  -----------------------------------------*/

  .webform input,
  button#submit-button {
    height: calc(2.25rem + 20px);
  }

  .form-control {
    border-radius: var(--border-radius-small);
    margin: 1.3rem 0;
  }

  .form-control:focus {
    box-shadow: none;
    border-color: var(--dark-color);
  }

  button#submit-button {
    background: var(--dark-color);
    border-color: transparent;
    color: var(--white-color);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  button#submit-button:hover {
    background: var(--primary-color);
  }

  .contact h2 + p {
    max-width: 90%;
  }

  .google-map {
    border-top: 1px solid #efebeb;
    margin-top: 2.5rem;
    padding-top: 2.5rem;
  }

  .google-map iframe {
    width: 100%;
  }


  /*---------------------------------------
     FOOTER              
  -----------------------------------------*/

  .site-footer {
    border-top: 1px solid #cbad51;
    padding: 3rem 0;
  }

  .site-footer a {
    color: var(--p-color);
    font-weight: var(--font-weight-light);
  }

  .site-footer p {
    font-size: var(--base-font-size);
  }

  .contact .fa,
  .site-footer .fa {
    color: var(--primary-color);
  }


  /*---------------------------------------
     SOCIAL ICON              
  -----------------------------------------*/

  .social-icon {
    position: relative;
    padding: 0;
    margin: 5px 0 0 0;
  }

  .social-icon li {
    display: inline-block;
    list-style: none;
  }

  .social-icon li a {
    text-decoration: none;
    display: inline-block;
    color: var(--p-color);
    font-size: var(--p-font-size);
    font-weight: var(--font-weight-bold);
    margin: 5px 10px;
    text-align: center;
  }

  .social-icon li a:hover {
    color: var(--primary-color);
  }


  /*---------------------------------------
     RESPONSIVE STYLES              
  -----------------------------------------*/

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

    .section {
      padding: 5rem 0;
    }

    .nav-item .nav-link {
      padding: 6px;
    }

    .navbar .social-icon {
      margin-top: 22px;
    }

    .navbar-collapse,
    .site-footer {
      text-align: center;
    }

    .schedule-table {
      display: block;
    }

    .modal-content {
      padding: 2rem;
    }
  }

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

    h1 {
      font-size: 38px;
    }

    .about-working-hours {
      border-left: 0;
      padding: 22px 0 0 0;
    }

    .contact h2 span {
      display: block;
    }
  }

  
.whatsapp {
    position: fixed;
    bottom: 30px;
    right: 20px; /* lado direito */
    padding: 12px;
    z-index: 10000000;
    border-radius: 50%;
    background-color: #25D366;
    box-shadow: 0 0 0 rgba(37, 211, 102, 0.6);
    animation: pulse 1.6s infinite;
    transition: transform 0.3s ease;
}

/* efeito ao passar o mouse */
.whatsapp:hover {
    transform: scale(1.15) rotate(5deg);
}

/* animação de pulsar */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 25px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* tamanho do ícone */
.whatsapp img {
    width: 55px;
    height: 55px;
}





h1.text-white{
    font-weight: 800;
    text-shadow: 0 0 10px rgba(255,215,0,0.7),
                 0 0 20px rgba(255,215,0,0.6),
                 0 0 40px rgba(255,215,0,0.5);
    animation: brilho 2s infinite alternate;
}

@keyframes brilho{
    from{
        text-shadow: 0 0 5px #cbad51;
    }
    to{
        text-shadow: 0 0 25px #cbad51;
    }
}


body{
    background: url("../images/class/fundo.png") no-repeat center center fixed;
    background-size: cover;
}




.feature{
    position: relative;
    padding: 140px 0;
    background: url("img/fundo-tarot.jpg") center center/cover no-repeat;
    overflow: hidden;
}

/* sombra escura */
.feature::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background: linear-gradient(90deg,#6f0202, #cbac51e9);
}

/* conteúdo acima da sombra */
.feature .container{
    position:relative;
    z-index:2;
}

/* badge */
.badge-tarot{
    background: #fcfcfc;
    padding: 8px 18px;
    border-radius: 50px;
    color:#f61313;
    font-size:13px;
    letter-spacing:1px;
}

/* titulo */
.title-tarot{
    color:#fff;
    font-size:52px;
    font-weight:800;
    margin:20px 0;
    line-height:1.1;
}

.title-tarot span{
    color:#cbad51;
}

/* subtitulo */
.subtitle-taro





/* FUNDO HERO */
.hero{
    position: relative;
    min-height: 100vh;
    background: url("img/bg.jpg") center center/cover no-repeat;
}

/* ESCURECER FUNDO */
.bg-overlay{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: #6a0101;
    z-index:1;
}

.hero .container{
    position: relative;
    z-index:2;
}

.hero-text{
    position: relative;
    z-index:5;
}

/* OFERTA */
.oferta{
    display:inline-block;
    background: #760000;
    padding:25px 45px;
    border-radius:20px;
    border:2px solid #eee0b3;
    box-shadow:0 0 25px #cbad51;
    backdrop-filter: blur(3px);
    animation: brilho 2.5s infinite alternate;
}

.consulta{
    display:block;
    color:#fff;
    font-size:28px;
    letter-spacing:3px;
    text-transform:uppercase;
}

.preco{
    display:block;
    font-size:50px;
    font-weight:900;
    color:#cbad51;
    text-shadow:
        0 0 10px #cbad51,
        0 0 10px rgba(255,215,0,0.6),
        0 0 40px rgba(255,215,0,0.4);
}

/* BOTÃO */
.custom-btn{
    background:#25D366;
    color:#fff;
    padding:14px 35px;
    border-radius:50px;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
    box-shadow:0 0 0 rgba(37,211,102,0.7);
    animation:pulse 2s infinite;
}

.custom-btn:hover{
    background:#1ebe5d;
    transform:scale(1.05);
}

/* ANIMAÇÕES */
@keyframes brilho{
    from{ box-shadow:0 0 15px rgba(212,175,55,0.4); }
    to{ box-shadow:0 0 45px rgba(212,175,55,1); }
}

@keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(37,211,102,0.7); }
    70%{ box-shadow:0 0 0 20px rgba(37,211,102,0); }
    100%{ box-shadow:0 0 0 0 rgb(37, 211, 101); }
}



.site-footer {
    background: #5b0101;
    color: #fff;
    padding: 30px 0;
    font-size: 14px;
}

.site-footer a {
    color: #cbad51;
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
    transition: 0.3s;
}

.site-footer i {
    color: #c59d5f;
}

.copyright-text small {
    opacity: 0.7;
}




/* Caixa do contato */
.contact-box{
    background: #ffffff;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.15);
}

/* textos */
.contact-info{
    font-size: 18px;
    margin: 12px 0;
    color: #480101;
}

.contact-info i{
    color: #7b2cbf;
    margin-right: 8px;
}

/* Botão WhatsApp */
.whatsapp-btn{
    display: inline-block;
    margin-top: 25px;
    padding: 14px 28px;
    background: #25D366;
    color: #fff;
    font-size: 18px;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
    font-weight: 600;
}

.whatsapp-btn:hover{
    background: #1ebe5d;
    transform: scale(1.05);
}



h2{
    font-family: 'Cinzel', serif;
    font-size: 38px;
    color:#cbad51 ;
     background: #790101;
    text-align: center;
    letter-spacing: 3px;
    position: relative;
}

h2::after{
    content: "";
    width: 70px;
    height: 3px;
    background: #cbad51;
    display: block;
    margin: 12px auto 0;
}






/* =========================
   HERO VERMELHO + DOURADO
========================= */

.hero-laila {
    position: relative;
    min-height: 100vh;
    background:
        linear-gradient(135deg, #170407, #4b0b12 50%, #1a0508);
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(212, 163, 63, 0.12),
            transparent 35%
        ),
        linear-gradient(
            90deg,
            rgba(20, 3, 7, .98),
            rgba(75, 8, 18, .88),
            rgba(25, 3, 7, .72)
        );
}

.hero-laila .container {
    position: relative;
    z-index: 5;
}


/* =========================
   TEXTO
========================= */

.hero-content {
    max-width: 650px;
    padding: 40px 0;
}

.mini-title {
    color: #e3bd68;
    font-size: 12px;
    letter-spacing: 4px;
    font-weight: 600;
    margin-bottom: 25px;
}

.hero-content h1 {
    color: #fff;
    font-family: Georgia, serif;
    font-size: 58px;
    line-height: 1.12;
    font-weight: 400;
}

.hero-content h1 span {
    display: block;
    color: #e3bd68;
    font-style: italic;
    margin-top: 8px;
}

.gold-line {
    width: 90px;
    height: 2px;
    background: linear-gradient(
        90deg,
        #a87824,
        #f1d58b,
        #a87824
    );
    margin: 28px 0;
}

.hero-content p {
    max-width: 570px;
    color: rgba(255,255,255,.85);
    font-size: 16px;
    line-height: 1.9;
}

.laila-name {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #fff;
    font-family: Georgia, serif;
    font-size: 24px;

    margin: 25px 0;
}

.laila-name span {
    color: #e3bd68;
}


/* =========================
   BOTÃO DOURADO
========================= */

.btn-laila {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 17px 36px;

    background: linear-gradient(
        135deg,
        #b8862d,
        #f4d98b,
        #b8862d
    );

    color: #280408 !important;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;

    text-decoration: none;

    box-shadow:
        0 10px 35px rgba(0,0,0,.45);

    transition: .35s ease;
}

.btn-laila:hover {
    transform: translateY(-4px) scale(1.02);

    box-shadow:
        0 15px 45px rgba(218,174,77,.25);
}

.privacy {
    margin-top: 18px;

    color: rgba(255,255,255,.60);

    font-size: 11px;
}


/* =========================
   FOTO
========================= */

.laila-photo {
    position: relative;

    width: 360px;
    height: 500px;

    margin: auto;

    padding: 8px;

    border-radius: 190px 190px 25px 25px;

    background: linear-gradient(
        145deg,
        #f0d58b,
        #9c691c,
        #e7c56d,
        #70430e
    );

    box-shadow:
        0 30px 80px rgba(0,0,0,.60),
        0 0 50px rgba(210,160,50,.12);
}


/* MOLDURA INTERNA */

.photo-frame {
    position: absolute;

    inset: -10px;

    border: 1px solid rgba(230,190,90,.65);

    border-radius: 195px 195px 30px 30px;
}

.photo-frame::before {
    content: "";

    position: absolute;

    inset: 8px;

    border: 1px solid rgba(230,190,90,.25);

    border-radius: 185px 185px 20px 20px;
}


/* ÁREA DA FOTO */

.photo-placeholder {
    width: 100%;
    height: 100%;

    border-radius: 180px 180px 18px 18px;

    display: flex;
    flex-direction: column;

    justify-content: flex-end;
    align-items: center;

    padding-bottom: 45px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(218,167,60,.20),
            transparent 40%
        ),
        linear-gradient(
            160deg,
            #7b111c,
            #260308
        );

    box-shadow:
        inset 0 0 50px rgba(0,0,0,.45);
}

.photo-placeholder span {
    font-size: 60px;
    margin-bottom: 15px;
}

.photo-placeholder strong {
    color: #fff;

    font-family: Georgia, serif;

    font-size: 26px;
    font-weight: 400;
}

.photo-placeholder small {
    color: #e3bd68;

    font-size: 11px;
    letter-spacing: 2px;

    margin-top: 8px;
}


/* =========================
   ESTRELAS
========================= */

.floating-star {
    position: absolute;

    color: #e3bd68;

    z-index: 5;

    animation: brilho 2.5s infinite ease-in-out;
}

.star-1 {
    top: 35px;
    right: -35px;
    font-size: 30px;
}

.star-2 {
    top: 220px;
    left: -45px;
    font-size: 22px;
}

.star-3 {
    bottom: 70px;
    right: -25px;
    font-size: 18px;
}

@keyframes brilho {
    0%, 100% {
        opacity: .35;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 991px) {

    .hero-laila {
        padding: 100px 0 70px;
    }

    .hero-content {
        text-align: center;
        margin: auto;
    }

    .hero-content h1 {
        font-size: 43px;
    }

    .gold-line {
        margin: 25px auto;
    }

    .hero-content p {
        margin: auto;
    }

    .laila-name {
        justify-content: center;
    }

    .privacy {
        margin-bottom: 60px;
    }

    .laila-photo {
        width: 300px;
        height: 420px;
    }
}

@media (max-width: 576px) {

    .hero-content h1 {
        font-size: 36px;
    }

    .mini-title {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .hero-content p {
        font-size: 14px;
    }

    .laila-photo {
        width: 270px;
        height: 380px;
    }
}








/* ==========================================
   SERVIÇOS
========================================== */

.services-section {
    position: relative;
    padding: 100px 0;
    background:
        radial-gradient(
            circle at top left,
            rgba(180, 0, 0, 0.35),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(212, 175, 55, 0.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #210000,
            #520000 45%,
            #180000
        );

    overflow: hidden;
}


/* ==========================================
   TÍTULO
========================================== */

.section-title {
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}

.section-title span {
    display: inline-block;

    color: #e6c65c;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 12px;
}

.section-title h2 {
    margin: 0;

    color: #ffffff;

    font-size: 46px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;
}

.section-title h2::after {
    content: "";

    display: block;

    width: 90px;
    height: 3px;

    margin: 18px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d4af37,
            transparent
        );
}

.section-title p {
    color: #e5cfcf;

    font-size: 16px;
}


/* ==========================================
   CARD
========================================== */

.service-card {
    position: relative;

    height: 100%;

    background:
        linear-gradient(
            145deg,
            rgba(120, 0, 0, 0.75),
            rgba(35, 0, 0, 0.95)
        );

    border: 1px solid rgba(212, 175, 55, 0.35);

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.45);

    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease,
        border-color 0.5s ease;
}


/* ==========================================
   EFEITO DE BRILHO
========================================== */

.service-card::before {
    content: "";

    position: absolute;

    top: -100%;
    left: -120%;

    width: 60%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 215, 100, 0.25),
            transparent
        );

    transform: rotate(25deg);

    transition: 0.8s;

    z-index: 5;

    pointer-events: none;
}

.service-card:hover::before {
    left: 150%;
}


/* ==========================================
   HOVER DO CARD
========================================== */

.service-card:hover {

    transform: translateY(-12px);

    border-color: #e6c65c;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(212, 175, 55, 0.35);
}


/* ==========================================
   IMAGEM
========================================== */

.service-image {

    position: relative;

    height: 220px;

    overflow: hidden;
}

.service-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}

.service-card:hover .service-image img {

    transform: scale(1.1);
}


/* ==========================================
   SOBREPOSIÇÃO DA IMAGEM
========================================== */

.image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 20%,
            rgba(35, 0, 0, 0.95)
        );
}


/* ==========================================
   CONTEÚDO
========================================== */

.service-content {

    position: relative;

    padding: 28px;

    z-index: 6;
}


/* ==========================================
   ÍCONE
========================================== */

.service-icon {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: -58px;

    margin-bottom: 18px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d77b
        );

    border: 4px solid #470000;

    border-radius: 50%;

    font-size: 25px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.4);
}


/* ==========================================
   TÍTULO DO CARD
========================================== */

.service-content h3 {

    color: #f1d675;

    font-size: 20px;

    font-weight: 800;

    margin-bottom: 5px;
}


/* ==========================================
   SUBTÍTULO
========================================== */

.service-subtitle {

    color: #ffffff;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 2px;

    opacity: 0.7;
}


/* ==========================================
   TEXTO
========================================== */

.service-content p {

    color: #f2dddd;

    font-size: 14px;

    line-height: 1.8;

    margin-top: 18px;
}


/* ==========================================
   LISTA
========================================== */

.service-content ul {

    padding: 0;

    margin: 20px 0;

    list-style: none;
}

.service-content li {

    color: #ffffff;

    font-size: 14px;

    padding: 7px 0;

    border-bottom:
        1px solid
        rgba(212, 175, 55, 0.12);
}

.service-content li:last-child {

    border-bottom: none;
}


/* ==========================================
   BOTÃO WHATSAPP
========================================== */

.whatsapp-btn {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    width: 100%;

    padding: 14px 18px;

    margin-top: 25px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d77b,
            #c49a25
        );

    color: #350000 !important;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.8px;

    text-decoration: none !important;

    border-radius: 50px;

    box-shadow:
        0 6px 20px
        rgba(212, 175, 55, 0.25);

    transition:
        all 0.3s ease;
}


.whatsapp-btn:hover {

    color: #210000 !important;

    transform: translateY(-3px);

    box-shadow:
        0 10px 30px
        rgba(212, 175, 55, 0.5);
}


/* ==========================================
   RESPONSIVO
========================================== */

@media (max-width: 768px) {

    .services-section {

        padding: 70px 15px;
    }

    .section-title h2 {

        font-size: 32px;
    }

    .section-title {

        margin-bottom: 40px;
    }

    .service-image {

        height: 200px;
    }

    .service-content {

        padding: 24px;
    }
}




/* ==========================================
   SOBRE LAILA
   MESMO ESTILO DOS SERVIÇOS
========================================== */

.about-laila {

    position: relative;

    padding: 100px 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(180, 0, 0, 0.35),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(212, 175, 55, 0.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #210000,
            #520000 45%,
            #180000
        );

    overflow: hidden;
}


/* ==========================================
   EFEITOS DE FUNDO
========================================== */

.about-laila::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    right: -200px;

    background:
        rgba(212, 175, 55, 0.10);

    border-radius: 50%;

    filter: blur(80px);
}


.about-laila::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    bottom: -200px;
    left: -150px;

    background:
        rgba(180, 0, 0, 0.25);

    border-radius: 50%;

    filter: blur(80px);
}


/* ==========================================
   GALERIA
========================================== */

.about-gallery {

    position: relative;

    height: 540px;

    margin-right: 30px;
}


/* ==========================================
   FOTOS
========================================== */

.about-photo {

    position: absolute;

    overflow: hidden;

    border-radius: 22px;

    border:
        1px solid
        rgba(212, 175, 55, 0.35);

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.45);

    transition:
        all 0.5s ease;
}


.about-photo::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 50%,
            rgba(35, 0, 0, 0.65)
        );
}


.about-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}


.about-photo:hover {

    border-color: #e6c65c;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(212, 175, 55, 0.35);

    transform: translateY(-8px);
}


.about-photo:hover img {

    transform: scale(1.08);
}


/* FOTO PRINCIPAL */

.about-photo-main {

    width: 330px;
    height: 440px;

    left: 20px;
    top: 20px;

    z-index: 2;
}


/* SEGUNDA FOTO */

.about-photo-small {

    width: 240px;
    height: 300px;

    right: 0;
    bottom: 15px;

    z-index: 3;
}


/* ==========================================
   DECORAÇÃO DOURADA
========================================== */

.about-decoration {

    position: absolute;

    width: 180px;
    height: 180px;

    right: 15px;
    top: 0;

    border:
        2px solid
        rgba(212, 175, 55, 0.35);

    border-radius: 50%;

    z-index: 1;
}


/* ==========================================
   CARD DE TEXTO
========================================== */

.about-card {

    position: relative;

    padding: 38px;

    background:
        linear-gradient(
            145deg,
            rgba(120, 0, 0, 0.75),
            rgba(35, 0, 0, 0.95)
        );

    border:
        1px solid
        rgba(212, 175, 55, 0.35);

    border-radius: 22px;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.45);

    overflow: hidden;

    transition:
        all 0.5s ease;
}


/* ==========================================
   BRILHO
========================================== */

.about-card::before {

    content: "";

    position: absolute;

    top: -100%;
    left: -120%;

    width: 60%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 215, 100, 0.25),
            transparent
        );

    transform: rotate(25deg);

    transition: 0.8s;

    pointer-events: none;
}


.about-card:hover::before {

    left: 150%;
}


.about-card:hover {

    border-color: #e6c65c;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(212, 175, 55, 0.35);
}


/* ==========================================
   ÍCONE
========================================== */

.about-icon {

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d77b
        );

    border-radius: 50%;

    font-size: 25px;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.4);
}


/* ==========================================
   TÍTULO
========================================== */

.about-card h3 {

    color: #f1d675;

    font-size: 23px;

    font-weight: 800;

    margin-bottom: 20px;
}


/* ==========================================
   TEXTO
========================================== */

.about-card p {

    color: #f2dddd;

    font-size: 14px;

    line-height: 1.9;

    margin-bottom: 18px;
}


.about-card strong {

    color: #f1d675;
}


/* ==========================================
   LISTA
========================================== */

.about-list {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin-top: 25px;
}


.about-item {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 13px 10px;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(212, 175, 55, 0.15);

    border-radius: 12px;

    transition:
        all 0.3s ease;
}


.about-item:hover {

    transform: translateY(-5px);

    border-color: #d4af37;

    background:
        rgba(212, 175, 55, 0.08);
}


.about-item > span {

    font-size: 22px;
}


.about-item strong {

    display: block;

    color: #f1d675;

    font-size: 11px;
}


.about-item small {

    display: block;

    color: #d9c5c5;

    font-size: 9px;

    margin-top: 3px;
}


/* ==========================================
   BOTÃO
========================================== */

.about-card .whatsapp-btn {

    margin-top: 28px;
}


/* ==========================================
   RESPONSIVO
========================================== */

@media (max-width: 991px) {

    .about-gallery {

        max-width: 600px;

        margin:
            0 auto 60px;
    }

    .about-card {

        margin-top: 20px;
    }
}


@media (max-width: 600px) {

    .about-laila {

        padding: 70px 15px;
    }

    .about-gallery {

        height: 430px;

        margin-bottom: 30px;
    }

    .about-photo-main {

        width: 250px;
        height: 340px;

        left: 0;
    }

    .about-photo-small {

        width: 190px;
        height: 250px;

        right: 0;
    }

    .about-card {

        padding: 25px;
    }

    .about-card h3 {

        font-size: 20px;
    }

    .about-list {

        grid-template-columns: 1fr;
    }

}


/* ==========================================
   HERO
   MESMO ESTILO DOS CARDS
========================================== */

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at top left,
            rgba(180, 0, 0, 0.35),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(212, 175, 55, 0.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #210000,
            #520000 45%,
            #180000
        );

    overflow: hidden;
}


/* ==========================================
   BRILHOS DE FUNDO
========================================== */

.hero::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    right: -200px;

    background:
        rgba(212, 175, 55, 0.10);

    border-radius: 50%;

    filter: blur(80px);
}


.hero::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    bottom: -200px;
    left: -150px;

    background:
        rgba(180, 0, 0, 0.25);

    border-radius: 50%;

    filter: blur(80px);
}


/* ==========================================
   OVERLAY
========================================== */

.bg-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20, 0, 0, 0.25),
            transparent,
            rgba(20, 0, 0, 0.25)
        );

    pointer-events: none;
}


/* ==========================================
   CONTEÚDO
========================================== */

.hero-content {

    position: relative;

    z-index: 5;

    padding-right: 40px;
}


/* ==========================================
   LABEL
========================================== */

.hero-label {

    display: inline-block;

    margin-bottom: 15px;

    color: #e6c65c;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;
}


/* ==========================================
   TÍTULO
========================================== */

.hero h1 {

    color: #ffffff;

    font-size: 58px;

    line-height: 1.12;

    font-weight: 800;

    margin: 0;
}


.hero h1 span {

    display: block;

    color: #f1d675;

    margin-top: 8px;
}


/* ==========================================
   LINHA DOURADA
========================================== */

.hero-line {

    width: 100px;

    height: 3px;

    margin: 25px 0;

    background:
        linear-gradient(
            90deg,
            #d4af37,
            #f4d77b,
            transparent
        );
}


/* ==========================================
   TEXTO
========================================== */

.hero-content > p {

    max-width: 650px;

    color: #f2dddd;

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 30px;
}


/* ==========================================
   BOTÃO
========================================== */

.hero-whatsapp {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 32px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d77b,
            #c49a25
        );

    color: #350000 !important;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1px;

    text-decoration: none !important;

    border-radius: 50px;

    box-shadow:
        0 6px 20px
        rgba(212, 175, 55, 0.25);

    transition:
        all 0.3s ease;
}


.hero-whatsapp:hover {

    transform:
        translateY(-4px);

    color: #210000 !important;

    box-shadow:
        0 10px 30px
        rgba(212, 175, 55, 0.50);
}


/* ==========================================
   SEGURANÇA
========================================== */

.hero-security {

    margin-top: 18px;

    color: #d9c5c5;

    font-size: 12px;
}


.hero-security span {

    color: #d4af37;

    margin: 0 5px;
}


/* ==========================================
   CARD LATERAL
========================================== */

.hero-card {

    position: relative;

    z-index: 4;

    padding: 45px 35px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(120, 0, 0, 0.75),
            rgba(35, 0, 0, 0.95)
        );

    border:
        1px solid
        rgba(212, 175, 55, 0.35);

    border-radius: 22px;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.45);

    overflow: hidden;

    transition:
        all 0.5s ease;
}


/* ==========================================
   BRILHO IGUAL AOS CARDS
========================================== */

.hero-card-shine {

    content: "";

    position: absolute;

    top: -100%;
    left: -120%;

    width: 60%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 215, 100, 0.25),
            transparent
        );

    transform: rotate(25deg);

    transition: 0.8s;

    pointer-events: none;
}


.hero-card:hover .hero-card-shine {

    left: 150%;
}


.hero-card:hover {

    transform:
        translateY(-12px);

    border-color: #e6c65c;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.6),

        0 0 30px
        rgba(212, 175, 55, 0.35);
}


/* ==========================================
   SÍMBOLO
========================================== */

.hero-symbol {

    width: 75px;
    height: 75px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 22px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d77b
        );

    border:
        4px solid
        #470000;

    border-radius: 50%;

    font-size: 32px;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.4);
}


/* ==========================================
   TÍTULO DO CARD
========================================== */

.hero-card h2 {

    color: #ffffff;

    font-size: 28px;

    line-height: 1.3;

    font-weight: 800;

    margin-bottom: 18px;
}


.hero-card h2 span {

    display: block;

    color: #f1d675;
}


/* ==========================================
   LINHA
========================================== */

.hero-card-line {

    width: 70px;

    height: 2px;

    margin: 0 auto 22px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d4af37,
            transparent
        );
}


/* ==========================================
   TEXTO DO CARD
========================================== */

.hero-card p {

    color: #f2dddd;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 25px;
}


/* ==========================================
   OPÇÕES
========================================== */

.hero-options {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;
}


.hero-option {

    padding: 13px 5px;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(212, 175, 55, 0.15);

    border-radius: 12px;

    transition:
        all 0.3s ease;
}


.hero-option:hover {

    transform:
        translateY(-5px);

    border-color: #d4af37;

    background:
        rgba(212, 175, 55, 0.08);

    box-shadow:
        0 5px 20px
        rgba(212, 175, 55, 0.12);
}


.hero-option span {

    display: block;

    font-size: 21px;

    margin-bottom: 5px;
}


.hero-option strong {

    color: #f1d675;

    font-size: 10px;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .hero {

        min-height: auto;

        padding:
            120px 20px 80px;
    }

    .hero-content {

        padding-right: 0;

        margin-bottom: 40px;
    }

    .hero h1 {

        font-size: 46px;
    }

}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 600px) {

    .hero {

        padding:
            100px 15px 60px;
    }

    .hero h1 {

        font-size: 36px;
    }

    .hero-content > p {

        font-size: 14px;
    }

    .hero-whatsapp {

        width: 100%;
    }

    .hero-card {

        padding: 35px 22px;
    }

    .hero-card h2 {

        font-size: 24px;
    }

    .hero-options {

        grid-template-columns: 1fr;
    }

}


/* ==========================================
   FEATURE LAILA
   MESMO ESTILO DOS SERVIÇOS
========================================== */

.feature-laila {

    position: relative;

    padding: 100px 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(212, 175, 55, 0.15),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(180, 0, 0, 0.30),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #210000,
            #520000 45%,
            #180000
        );

    overflow: hidden;
}


/* ==========================================
   BRILHOS DE FUNDO
========================================== */

.feature-laila::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    right: -200px;

    background:
        rgba(212, 175, 55, 0.10);

    border-radius: 50%;

    filter: blur(80px);
}


.feature-laila::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    bottom: -200px;
    left: -150px;

    background:
        rgba(180, 0, 0, 0.25);

    border-radius: 50%;

    filter: blur(80px);
}


/* ==========================================
   CONTEÚDO
========================================== */

.feature-content {

    position: relative;

    z-index: 5;

    padding-right: 40px;
}


/* ==========================================
   LABEL
========================================== */

.feature-label {

    display: inline-block;

    color: #e6c65c;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 15px;
}


/* ==========================================
   TÍTULO
========================================== */

.feature-content h2 {

    color: #ffffff;

    font-size: 34px;

    line-height: 1.35;

    font-weight: 800;

    margin-bottom: 20px;
}


.feature-content h2 span {

    color: #f1d675;
}


/* ==========================================
   LINHA
========================================== */

.feature-line {

    width: 90px;

    height: 3px;

    margin: 20px 0 25px;

    background:
        linear-gradient(
            90deg,
            #d4af37,
            #f4d77b,
            transparent
        );
}


/* ==========================================
   SUBTÍTULO
========================================== */

.feature-content h3 {

    color: #ffffff;

    font-size: 22px;

    line-height: 1.5;

    font-weight: 500;

    margin-bottom: 20px;
}


.feature-content h3 strong {

    color: #f1d675;

    font-weight: 800;
}


/* ==========================================
   TEXTO
========================================== */

.feature-content p {

    color: #f2dddd;

    font-size: 15px;

    line-height: 1.9;

    margin-bottom: 28px;
}


/* ==========================================
   BOTÃO
========================================== */

.feature-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 16px 30px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d77b,
            #c49a25
        );

    color: #350000 !important;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.8px;

    text-decoration: none !important;

    box-shadow:
        0 7px 25px
        rgba(212, 175, 55, 0.25);

    transition:
        all 0.35s ease;
}


.feature-btn:hover {

    transform:
        translateY(-4px);

    color: #210000 !important;

    box-shadow:
        0 12px 35px
        rgba(212, 175, 55, 0.50);
}


/* ==========================================
   SEGURANÇA
========================================== */

.feature-security {

    margin-top: 17px;

    color: #d9c5c5;

    font-size: 11px;
}


/* ==========================================
   CARD
========================================== */

.feature-card {

    position: relative;

    padding: 38px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(120, 0, 0, 0.75),
            rgba(35, 0, 0, 0.95)
        );

    border:
        1px solid
        rgba(212, 175, 55, 0.35);

    border-radius: 22px;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.45);

    overflow: hidden;

    transition:
        all 0.5s ease;
}


/* ==========================================
   BRILHO
========================================== */

.feature-shine {

    position: absolute;

    top: -100%;
    left: -120%;

    width: 60%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 215, 100, 0.25),
            transparent
        );

    transform: rotate(25deg);

    transition: 0.8s;

    pointer-events: none;
}


.feature-card:hover .feature-shine {

    left: 150%;
}


.feature-card:hover {

    transform:
        translateY(-12px);

    border-color: #e6c65c;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.6),

        0 0 30px
        rgba(212, 175, 55, 0.35);
}


/* ==========================================
   ÍCONE
========================================== */

.feature-icon {

    width: 62px;
    height: 62px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d77b
        );

    border:
        4px solid
        #470000;

    border-radius: 50%;

    font-size: 26px;

    box-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.4);
}


/* ==========================================
   LABEL DO CARD
========================================== */

.feature-card-label {

    display: block;

    color: #d4af37;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 8px;
}


/* ==========================================
   TÍTULO DO CARD
========================================== */

.feature-card h3 {

    color: #ffffff;

    font-size: 26px;

    line-height: 1.25;

    font-weight: 800;

    margin-bottom: 18px;
}


.feature-card h3 span {

    display: block;

    color: #f1d675;
}


/* ==========================================
   LINHA DO CARD
========================================== */

.feature-card-line {

    width: 70px;

    height: 2px;

    margin-bottom: 20px;

    background:
        linear-gradient(
            90deg,
            #d4af37,
            transparent
        );
}


/* ==========================================
   LISTA
========================================== */

.feature-card ul {

    list-style: none;

    padding: 0;

    margin: 0 0 22px;
}


.feature-card li {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #ffffff;

    font-size: 14px;

    padding: 11px 0;

    border-bottom:
        1px solid
        rgba(212, 175, 55, 0.12);
}


.feature-card li:last-child {

    border-bottom: none;
}


.feature-card li span {

    color: #d4af37;

    font-weight: 900;
}


/* ==========================================
   GARANTIA
========================================== */

.feature-guarantee {

    padding: 14px;

    color: #e5cfcf;

    font-size: 11px;

    line-height: 1.7;

    background:
        rgba(212, 175, 55, 0.06);

    border:
        1px solid
        rgba(212, 175, 55, 0.15);

    border-radius: 12px;
}


/* ==========================================
   BOTÃO DO CARD
========================================== */

.feature-card-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    margin-top: 22px;

    padding: 14px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d77b,
            #c49a25
        );

    color: #350000 !important;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 900;

    text-decoration: none !important;

    transition:
        all 0.3s ease;
}


.feature-card-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 25px
        rgba(212, 175, 55, 0.4);
}


/* ==========================================
   RESPONSIVO
========================================== */

@media (max-width: 991px) {

    .feature-laila {

        padding: 80px 20px;
    }

    .feature-content {

        padding-right: 0;
    }

    .feature-card {

        margin-top: 20px;
    }
}


@media (max-width: 600px) {

    .feature-laila {

        padding: 70px 15px;
    }

    .feature-content h2 {

        font-size: 27px;
    }

    .feature-content h3 {

        font-size: 19px;
    }

    .feature-btn {

        width: 100%;
    }

    .feature-card {

        padding: 30px 22px;
    }

    .feature-card h3 {

        font-size: 23px;
    }
}





/* ==========================================
   CONTATO LAILA
========================================== */

.contact-laila {

    position: relative;

    padding: 100px 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(180, 0, 0, 0.35),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(212, 175, 55, 0.14),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #210000,
            #520000 45%,
            #180000
        );

    overflow: hidden;
}


/* ==========================================
   BRILHOS DE FUNDO
========================================== */

.contact-laila::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    right: -200px;

    background:
        rgba(212, 175, 55, 0.10);

    border-radius: 50%;

    filter: blur(80px);
}


.contact-laila::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    bottom: -200px;
    left: -150px;

    background:
        rgba(180, 0, 0, 0.25);

    border-radius: 50%;

    filter: blur(80px);
}


/* ==========================================
   CARD
========================================== */

.contact-box {

    position: relative;

    z-index: 5;

    padding: 50px 45px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(120, 0, 0, 0.78),
            rgba(35, 0, 0, 0.96)
        );

    border:
        1px solid
        rgba(212, 175, 55, 0.38);

    border-radius: 25px;

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.50);

    overflow: hidden;

    transition:
        all 0.5s ease;
}


/* ==========================================
   BRILHO NO HOVER
========================================== */

.contact-shine {

    position: absolute;

    top: -100%;
    left: -120%;

    width: 60%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 215, 100, 0.25),
            transparent
        );

    transform: rotate(25deg);

    transition: 0.8s;

    pointer-events: none;
}


.contact-box:hover .contact-shine {

    left: 150%;
}


.contact-box:hover {

    transform:
        translateY(-8px);

    border-color: #e6c65c;

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.60),

        0 0 35px
        rgba(212, 175, 55, 0.30);
}


/* ==========================================
   ÍCONE
========================================== */

.contact-icon {

    width: 75px;
    height: 75px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0 auto 20px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d77b
        );

    border:
        4px solid
        #470000;

    border-radius: 50%;

    font-size: 32px;

    box-shadow:
        0 7px 25px
        rgba(212, 175, 55, 0.25);
}


/* ==========================================
   LABEL
========================================== */

.contact-label {

    display: block;

    color: #d4af37;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 10px;
}


/* ==========================================
   TÍTULO
========================================== */

.contact-box h2 {

    color: #ffffff;

    font-size: 38px;

    font-weight: 800;

    margin-bottom: 15px;
}


.contact-box h2 span {

    color: #f1d675;
}


/* ==========================================
   LINHA
========================================== */

.contact-line {

    width: 80px;

    height: 2px;

    margin: 0 auto 22px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d4af37,
            transparent
        );
}


/* ==========================================
   DESCRIÇÃO
========================================== */

.contact-description {

    max-width: 580px;

    margin: 0 auto 30px;

    color: #f2dddd;

    font-size: 14px;

    line-height: 1.8;
}


/* ==========================================
   INFORMAÇÕES
========================================== */

.contact-info-list {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;

    margin-bottom: 28px;
}


.contact-item {

    display: flex;

    align-items: center;

    text-align: left;

    gap: 13px;

    padding: 15px;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid
        rgba(212, 175, 55, 0.15);

    border-radius: 13px;

    transition:
        all 0.3s ease;
}


.contact-item:hover {

    transform:
        translateY(-4px);

    border-color: #d4af37;

    background:
        rgba(212, 175, 55, 0.07);
}


/* ==========================================
   ÍCONE DAS INFORMAÇÕES
========================================== */

.contact-item-icon {

    min-width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(212, 175, 55, 0.12);

    border:
        1px solid
        rgba(212, 175, 55, 0.25);

    border-radius: 50%;

    font-size: 18px;
}


/* ==========================================
   TEXTOS
========================================== */

.contact-item small {

    display: block;

    color: #d4af37;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 4px;
}


.contact-item strong {

    display: block;

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;
}


/* ==========================================
   INSTAGRAM
========================================== */

.instagram-link {

    color: #f1d675 !important;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none !important;

    transition:
        all 0.3s ease;
}


.instagram-link:hover {

    color: #ffffff !important;
}


/* ==========================================
   BOTÃO WHATSAPP
========================================== */

.contact-whatsapp {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;

    padding: 17px 25px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d77b,
            #c49a25
        );

    color: #350000 !important;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;

    text-decoration: none !important;

    box-shadow:
        0 8px 25px
        rgba(212, 175, 55, 0.25);

    transition:
        all 0.35s ease;
}


.contact-whatsapp:hover {

    transform:
        translateY(-4px);

    color: #210000 !important;

    box-shadow:
        0 12px 35px
        rgba(212, 175, 55, 0.50);
}


/* ==========================================
   SEGURANÇA
========================================== */

.contact-security {

    margin-top: 17px;

    color: #cdbaba;

    font-size: 10px;
}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 600px) {

    .contact-laila {

        padding: 70px 15px;
    }

    .contact-box {

        padding: 35px 20px;
    }

    .contact-box h2 {

        font-size: 30px;
    }

    .contact-info-list {

        grid-template-columns: 1fr;
    }

    .contact-whatsapp {

        font-size: 11px;

        padding: 15px 12px;
    }

}


/* ==========================================
   NAVBAR LAILA
========================================== */

.navbar-laila {

    padding: 18px 0;

    background:
        rgba(25, 0, 0, 0.88);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border-bottom:
        1px solid
        rgba(212, 175, 55, 0.20);

    box-shadow:
        0 5px 25px
        rgba(0, 0, 0, 0.25);

    transition:
        all 0.4s ease;
}


/* ==========================================
   LOGO
========================================== */

.navbar-laila .navbar-brand {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #ffffff !important;

    font-size: 21px;

    font-weight: 600;

    letter-spacing: 0.5px;

    text-decoration: none;
}


.navbar-laila .navbar-brand strong {

    color: #d4af37;

    font-weight: 800;
}


/* ==========================================
   ÍCONE DA LOGO
========================================== */

.logo-icon {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d77b,
            #c49a25
        );

    border-radius: 50%;

    font-size: 20px;

    box-shadow:
        0 4px 15px
        rgba(212, 175, 55, 0.25);
}


/* ==========================================
   MENU
========================================== */

.navbar-laila .nav-link {

    position: relative;

    margin: 0 7px;

    padding: 10px 8px !important;

    color: #eadada !important;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.7px;

    text-transform: uppercase;

    transition:
        all 0.3s ease;
}


/* ==========================================
   LINHA DOURADA
========================================== */

.navbar-laila .nav-link::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 2px;

    width: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #d4af37,
            #f4d77b
        );

    transform:
        translateX(-50%);

    transition:
        width 0.3s ease;
}


.navbar-laila .nav-link:hover {

    color: #f1d675 !important;
}


.navbar-laila .nav-link:hover::after {

    width: 70%;
}


/* ==========================================
   REDES SOCIAIS
========================================== */

.navbar-laila .social-icon {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 0;

    padding-left: 15px;
}


.navbar-laila .social-icon li {

    list-style: none;
}


.navbar-laila .social-icon li a {

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #d4af37;

    border:
        1px solid
        rgba(212, 175, 55, 0.30);

    border-radius: 50%;

    text-decoration: none;

    transition:
        all 0.3s ease;
}


.navbar-laila .social-icon li a:hover {

    color: #350000;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #f4d77b
        );

    border-color: #d4af37;

    transform:
        translateY(-3px);

    box-shadow:
        0 5px 18px
        rgba(212, 175, 55, 0.30);
}


/* ==========================================
   WHATSAPP
========================================== */

.navbar-laila .social-icon .whatsapp-nav {

    color: #f4d77b;

    border-color:
        rgba(212, 175, 55, 0.55);
}


/* ==========================================
   BOTÃO MOBILE
========================================== */

.navbar-laila .navbar-toggler {

    padding: 7px 10px;

    border:
        1px solid
        rgba(212, 175, 55, 0.40);

    border-radius: 8px;

    outline: none;
}


/* ÍCONE DO MENU */

.navbar-laila .navbar-toggler-icon {

    background-image:
        linear-gradient(
            #d4af37,
            #d4af37
        );

    width: 25px;
    height: 2px;

    position: relative;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 991px) {

    .navbar-laila {

        padding: 12px 15px;

    }

    .navbar-laila .navbar-collapse {

        margin-top: 15px;

        padding:
            15px;

        background:
            rgba(45, 0, 0, 0.97);

        border:
            1px solid
            rgba(212, 175, 55, 0.20);

        border-radius: 15px;
    }


    .navbar-laila .nav-link {

        padding:
            12px 10px !important;

        margin: 2px 0;

        text-align: center;
    }


    .navbar-laila .nav-link::after {

        display: none;
    }


    .navbar-laila .social-icon {

        justify-content: center;

        padding:
            15px 0 5px;

        border-top:
            1px solid
            rgba(212, 175, 55, 0.15);
    }

}