/*------St------*/
   * {
       margin: 0;
       padding: 0;
   }

   body {
       font-family: 'Segoe UI', sans-serif;
       background-color: #fffaf5;
       color: #1a1a1a;
   }

   .hero {
       /*background-color: #111;*/
       background: #000;
       background: linear-gradient(151deg, rgb(0 0 0) 0%, rgb(45 36 23) 73%, rgb(57 45 29) 100%);

       color: white;
       padding: 60px 0;
   }

   .hero h1 {
       font-size: 5rem;
   }

   .hero .h_subtitle {
       font-size: 1.3rem;
   }

   /* .hero img {
            max-width: 100%;
        } */

   .btn-gold {
       /* background-color: #b58b4b; */
       background: linear-gradient(151deg, rgba(55, 163, 34, 1) 0%, rgba(48, 105, 50, 1) 100%);
       color: white;
       border: 1px solid #fff;
       padding: 12px 24px;
       font-weight: bold;
       border-radius: 4px;
   }



   .section-light {
       background-color: #fffdf9;
       padding: 60px 20px;

       position: relative;
       z-index: 2;
       overflow: hidden;
   }

   .about-author {
       /* background-color: #1e120c; */
       background: linear-gradient(-151deg, rgb(0 0 0) 0%, rgb(45 36 23) 73%, rgb(57 45 29) 100%);
       color: white;
       padding: 60px 20px;
       border-top: 5px solid #bfb7b7;
       border-bottom: 5px solid #bfb7b7;
   }



   .about-author img {
       max-width: 100%;
       /* border: 2px solid;
            border-radius: 24px; */
       /* outline: 1px solid;
            outline-offset: 3px; */
   }

   .section-title {
       font-size: 3rem;
       margin-bottom: 20px;
       font-weight: bold;
   }

   .check-list {
       list-style: none;

   }

   .check-list li::before {
       content: '\2713';
       color: #bc0c0c;
       margin-right: 10px;
   }

   .text-second {
       color: #dbdbdb;
   }


     .text-thirdy {
       color: #ccb89b!important;
   }

   .device_img_container {
       /* overflow: hidden; */
       max-width: 1000px;
       /* border-radius: 40px; */

   }

   /*------St-E------*/


   /*------St------*/
   .hero {
       position: relative;
       width: 100%;
       /* height: 100vh; */
       overflow: hidden;
       /* background: ... mantido como está */
   }

   .hero-content {
       position: relative;
       z-index: 3;
   }

   .particle {
       position: absolute;
       outline: 1px solid #ffffff74;
       outline-offset: 1px;
       border: 1px solid #ffffff82;
       z-index: 2;
       background: #ffffff74;
       border-radius: 1%;
       transform: rotate(45deg);
       width: 10px;
       height: 30px;
       opacity: 0.1;
       animation-name: fly;
       animation-timing-function: linear;
       animation-fill-mode: forwards;
   }

   /* Movimento da partícula: superior para inferior esquerdo */
   @keyframes fly {
       0% {
           transform: translate(0, 0);
           opacity: 1;
       }

       100% {
           transform: translate(-500px, 1000px);
           /* movimento diagonal esquerda/baixo */
           opacity: 0;
       }
   }

   /*------St-E------*/



   /*------St------*/
   .glow-on-hover {
       /* width: 220px; */
       /* height: 50px; */
       /* border: none; */
       /* outline: none; */
       /* color: #fff; */
       /* background: #111; */
       cursor: pointer;
       position: relative;
       z-index: 0;
       /* border-radius: 10px; */
   }

   .glow-on-hover:before {
       content: '';
       background: linear-gradient(45deg, #8bc010, #c5de0a, #00d924, #11e60d);
       position: absolute;
       top: -2px;
       left: -2px;
       background-size: 400%;
       z-index: -1;
       filter: blur(5px);
       width: calc(100% + 4px);
       height: calc(100% + 4px);
       animation: glowing 20s linear infinite;
       /* opacity: 0; */
       transition: opacity .3s ease-in-out;
       /* border-radius: 10px; */
   }

   .glow-on-hover:active {
       color: #000
   }

   .glow-on-hover:active:after {
       background: transparent;
   }

   /* .glow-on-hover:hover:before {
    opacity: 1;
} */

   .glow-on-hover:after {
       z-index: -1;
       content: '';
       position: absolute;
       width: 100%;
       height: 100%;
       background: linear-gradient(151deg, rgba(56, 163, 34, 0.8) 0%, rgba(48, 105, 50, .8) 100%);
       left: 0;
       top: 0;
       /* border-radius: 10px; */
   }

   @keyframes glowing {
       0% {
           background-position: 0 0;
       }

       50% {
           background-position: 400% 0;
       }

       100% {
           background-position: 0 0;
       }
   }

   /*------St-E------*/


   /*------St------*/
   .section-features {
       background: #000 !important;
       border-bottom: 5px solid #bfb7b7;
   }

   .sec-features {
       /* background: #000; */
       color: #fff;
       /* height: 304px; */
       /* border-top-left-radius: 8%; */
       /* padding: 4rem 0; */
       /* border-bottom: 5px solid #bfb7b7; */
   }

   .bk-feature {
       color: #fff;
   }

   .bk-feature-border-right {
       /* border-right: 3px solid #fff; */
       padding: 4rem 0;
   }


   .bk-feature-icon {
       font-size: 4rem;
   }

   /*------St-E------*/



   /*------St------*/
   .notif-btn {
       /* width: 6em;
  height: 6em;
  padding: 1em;
  background: #C30F42;
  cursor: pointer;
  outline: 0;
  border: none; */

       /* -webkit-border-radius: 100%;
  border-radius: 100%; */

       -webkit-transition: all .3s ease;
       -o-transition: all .3s ease;
       transition: all .3s ease;

       -webkit-animation: pulse 1.6s infinite;
       animation: pulse 1.6s infinite;
   }

   .notif-btn:hover,
   .notif-btn:active {
       color: #fff;
       background: rgba(65, 196, 40, 1);
       border: 2px solid #ffffff;
       -webkit-animation: none;
       animation: none;
   }

   .notif-btn svg {
       fill: #fff;
   }


   /* Animations */

   @-webkit-keyframes pulse {

       0% {
           -webkit-box-shadow: 0 0 0 0 rgba(215, 17, 73, .85);
           box-shadow: 0 0 0 0 rgba(215, 17, 73, .85);
       }

       70% {
           -webkit-box-shadow: 0 0 0 2em rgba(215, 17, 73, 0);
           box-shadow: 0 0 0 2em rgba(215, 17, 73, 0);
       }

       100% {
           -webkit-box-shadow: 0 0 0 0 rgba(215, 17, 73, 0);
           box-shadow: 0 0 0 0 rgba(215, 17, 73, 0);
       }

   }

   @keyframes pulse {

       0% {
           -webkit-box-shadow: 0 0 0 0 rgba(106, 215, 17, 0.85);
           box-shadow: 0 0 0 0 rgba(8, 138, 8, 0.85);
       }

       70% {
           -webkit-box-shadow: 0 0 0 2em rgba(215, 17, 73, 0);
           box-shadow: 0 0 0 2em rgba(215, 17, 73, 0);
       }

       100% {
           -webkit-box-shadow: 0 0 0 0 rgba(215, 17, 73, 0);
           box-shadow: 0 0 0 0 rgba(215, 17, 73, 0);
       }
   }

   /*------St-E------*/


   /*------St------*/
   .about-sparks {
       position: relative;
       width: 100%;
       overflow: hidden;
   }

   .about-content {
       position: relative;
       z-index: 3;

   }

   .about-sparks .particle {
       position: absolute;
       /* outline: 1px solid #ffffff74; */
       /* outline-offset: 1px; */
       top: 0;
       left: 0;
       border: 1px solid #ffffff82;
       z-index: 2;
       /* background: #ffffff74; */
       background: transparent;
       border-radius: 1%;
       transform: rotate(45deg);
       opacity: 0.005;
       animation-name: fly-left;
       animation-timing-function: linear;
       animation-fill-mode: forwards;
   }

   @keyframes fly-left {
       0% {
           transform: translate(0, 0);
           opacity: 1;
       }

       100% {
           transform: translate(500px, 1000px);
           /* agora vai para baixo e para a direita */
           opacity: 0;
       }
   }

   /*------St-E------*/


   /*------St------*/
   .holographic-container {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       /* height: 100vh; */
       /* background: #000; */
       border-right: 3px solid #fff;

   }

   /* .holographic-container:not(:last-child)::after {
            
        
        } */

   .holographic-card {

       width: 100%;
       height: 100%;
       /* background: #111; */
       /* padding: 4rem; */
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       overflow: hidden;
       /* border-radius: 15px; */
       transition: all 0.5s ease;
   }


   .no-border-right {
       border-right: none;
   }

   .holographic-card h2 {
       /* color: #0ff;
  font-size: 2rem; */
       /* position: relative;
  z-index: 2; */
   }

   /* .holographic-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(0deg,
                    transparent,
                    transparent 30%,
                    rgba(255, 255, 255, 0.3));
            transform: rotate(-45deg);
            transition: all 0.5s ease;
            opacity: 0;
        } */

   .holographic-card:hover {
       transform: scale(1.08) translate(0, -0.375em);

       /* box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); */
   }

   /* .holographic-card:hover::before {
            opacity: 1;
            transform: rotate(-45deg) translateY(100%);
        } */
   /*------St-E------*/


   /*------St------*/
   .holographic-reflex {
       border: 2px solid #bfb7b7;
       border-radius: 24px;
   }

   .about-img-container img {
       /* transition: all 0.6s ease; */
       transition: transform 0.6s ease-out;
   }

   .about-img-container img:hover {

       transform: scale(1.08);
       will-change: transform;
   }

   .sec-title2 {
       color: #e8d8b7;
   }

   /* .holographic-reflex::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(0deg,
                    transparent,
                    transparent 30%,
                    rgba(255, 255, 255, 0.3));
            transform: rotate(-45deg);
            /* transition: all 1s ease; */
   /* transition: transform 0.8s ease-in, opacity 0.6s ease-in; */
   /*  will-change: transform, opacity;
            opacity: 0;
        }


        .holographic-reflex:hover::before {
            opacity: 1;
            transform: rotate(-45deg) translateY(100%);
        } */



   .about-img-container {
       outline: 2px solid #bfb7b7;
       outline-offset: 3px;
       position: relative;
       overflow: hidden;
       border-radius: 24px;


       border-radius: 30px;


       box-shadow: 10px 11px 26px 0px rgba(0, 0, 0, 0.42);
       -webkit-box-shadow: 10px 11px 26px 0px rgba(0, 0, 0, 0.42);
       -moz-box-shadow: 10px 11px 26px 0px rgba(0, 0, 0, 0.42);

   }

   /*------St-E------*/







   /*------St------*/
   .device_container {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
       overflow: hidden;
       background: transparent;
       /* border-radius: 30px; */


   }

   .frame_ipad {
       position: relative;
       z-index: 3;
       pointer-events: none;
       max-width: 100%;
       height: auto;
   }

   .capa_book {
       position: absolute;
       top: auto;
       bottom: auto;
       left: auto;
       right: auto;
       z-index: 2;
       /* width: 80%; */
       max-width: 92%;
       height: auto;
       transition: transform 0.6s ease-out;
       will-change: transform;
       /* overflow: hidden; */
       border-radius: 5%;

       animation: pulse_book 1s linear 1s infinite alternate;


   }

   /* .capa_book:hover {
            transform: scale(1.03);
        } */

   .capa_book::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: linear-gradient(0deg,
               transparent,
               transparent 30%,
               rgba(255, 255, 255, 0.4),
               transparent 70%);
       transform: rotate(-45deg);
       transition: transform 0.8s ease-in, opacity 0.6s ease-in;
       opacity: 0;
       z-index: 10;
       pointer-events: none;
   }

   .capa_book:hover::before {
       opacity: 1;
       transform: rotate(-45deg) translateY(100%);


   }



   @keyframes pulse_book {
       0% {
           transform: translate(0, 0);
           opacity: 1;
       }

       100% {
           transform: scale(1.03);
           /* movimento diagonal esquerda/baixo */
           /* opacity: 0; */
       }
   }

   /*------St-E------*/



   /*------St------*/
   .title-detail {
       color: #bc0c0c;
       font-weight: bold;
   }

   /*------St-E------*/

   /*------St------*/
   #chain-video1 {
       position: absolute;
       z-index: 1;
       bottom: -34%;
       left: 0;
       width: 100%;
       opacity: .2;
   }

   #chain-video2 {
       position: absolute;
       z-index: 1;
       top: -50%;
       left: 0;
       width: 100%;
       opacity: .2;
   }

   /*------St-E------*/
   /*------St------*/
   /* Extra small devices (phones, 600px and down) */
   @media only screen and (max-width: 600px) {
       .sec-features {

           padding: 0 0;
       }


       .bk-feature-border-right {
           border-right: none;
           border-top: 2px solid #bfb7b7;
           padding: 1rem 0;

       }



       .btn.btn-gold.my-4.glow-on-hover {
           width: 75%;
       }

       .holographic-container {
           border-right: none;
       }


       .container-w100 {
           width: 100% !important;
           max-width: 100%;
           margin-left: 0 !important;
           margin-right: 0 !important;
           padding-left: 0 !important;
           padding-right: 0 !important;
       }


   }

   /* Small devices (portrait tablets and large phones, 600px and up) */
   @media only screen and (min-width: 600px) {
       .sec-features {

           padding: 0 0;
       }


       .bk-feature-border-right {
           border-right: none;
           border-top: 2px solid #bfb7b7;
           padding: 1rem 0;

       }


       .btn.btn-gold.my-4.glow-on-hover {
           width: 75%;
       }


       .holographic-container {
           border-right: none;
       }





   }


   @media only screen and (max-width: 767px) {
       .container-w100 {
           width: 100% !important;
           max-width: 100%;
           margin-left: 0 !important;
           margin-right: 0 !important;
           padding-left: 0 !important;
           padding-right: 0 !important;
       }





       .title-border-mob {
           border-left: 7px solid #bc0d0c;
           /* border-right: 4px solid #bc0d0c; */
       }


       .title-detail {
           display: none;
       }


       .title-detail {
           display: none;
       }


       .hero h1 {
           font-size: 4rem;
       }


       #chain-video1 {

           bottom: 1% !important;


       }


       #chain-video2 {
           top: 50%;
       }

   }

   /* Medium devices (landscape tablets, 768px and up) */
   @media only screen and (min-width: 768px) {

       .bk-feature-border-right {

           border-top: none;
           padding: 3rem 0;


       }

       .btn.btn-gold.my-4.glow-on-hover {
           width: 65%;
       }

       .holographic-container {
           border-right: 3px solid #fff;
       }


       .no-border-right {
           border-right: none;
       }






   }


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


   /* Large devices (laptops/desktops, 992px and up) */
   @media only screen and (min-width: 992px) {}

   /* Extra large devices (large laptops and desktops, 1200px and up) */
   @media only screen and (min-width: 1200px) {}

   /*------St-E------*/

   /*------St------*/
   .btn-menu {
       outline: none;
       padding: .5rem;
       background: transparent;
       color: #fff;
       border: 1px solid #fff;
       font-weight: 100;
       font-family: 'Segoe UI', sans-serif;
       border-radius: 12px;
   }


   .btn-menu:hover,
   .btn-menu:active {

       background: rgb(38 45 36);

   }

   /*------St-E------*/

   /*------St------*/

   .video-lazy {
       position: relative;
       width: 100%;
       height: 100%;
       min-height: 520px;
       padding-top: 56.25%;
       /* Proporção 16:9 (ajuste se quiser) */
       background-size: cover;
       background-position: center;
       cursor: pointer;
       outline: 2px solid #fff;
       outline-offset: -1rem;
   }

   .video-lazy video {
       position: absolute;
       top: 0;
       left: 0;
       width: 100% !important;
       height: 100% !important;
       object-fit: cover;
   }


   .video-lazy,
   .video-lazy video {
       border: 2px solid #fff;
       border-radius: 20px;
   }

   /*------St-E------*/


   /*------St------*/
   .check-list {
       padding-left: 0px;
   }

   /*------St-E------*/


   /*------St------*/

   .header2 {
       background: linear-gradient(0deg, rgb(0 0 0) 0%, rgb(45 36 23) 93%, rgb(57 45 29) 100%);
       padding-top: 1rem;
       padding-bottom: 1rem;

box-shadow: -1px 10px 22px -5px rgba(0,0,0,0.75);
-webkit-box-shadow: -1px 10px 22px -5px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 10px 22px -5px rgba(0,0,0,0.75);

       position: relative;
       z-index: 3;
   }

   .header2 .btn-menu {
       outline: none;
       padding: .5rem;
       background: transparent;
       color: #fff;
       border: 1px solid #fff;
       font-weight: 100;
       font-family: 'Segoe UI', sans-serif;
       border-radius: 12px;

   }


   .header2 .btn-menu:hover,
   .header2 .btn-menu:active {

       background: rgb(38 45 36);

   }

   /*------St-E------*/


   /*------St------*/

   .logo-andrea {
       max-width: 65px;
       border-radius: 50%;
       padding: 0px;
       border: 1px solid #fff;
   }



   .logo_container {
       padding: 0px;
       border: 1px solid #fff;
       border-radius: 23%;
   }

   /*------St-E------*/


.know-btn{
        background: linear-gradient(151deg, rgba(55, 163, 34, 1) 0%, rgba(48, 105, 50, 1) 100%);
    color: white;
    border: 1px solid #fff;
    padding: 12px 24px;
    font-weight: bold;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    z-index: 3;
}


   .know-btn:hover,
   .know-btn:active {
       color: #fff!important;
       background: rgba(65, 196, 40, 1);
       border: 2px solid #ffffff;
       -webkit-animation: none;
       animation: none;
   }

   .know-btn svg {
       fill: #fff;
   }

   .logo_container:hover{
        background: rgb(38 45 36)!important;
   }

   .nav-item:hover{
    background: rgb(38 45 36 / 12%) !important;
    cursor: pointer;
   }


.nav-item .bi-book {
    color: #7d7d7d;
}


.offcanvas-header{

    background: linear-gradient(0deg, rgb(0 0 0) 0%, rgb(61 84 99) 93%, rgb(57 45 29) 100%);
    color: #fff;

}

.logo-andrea .logo-menu img{
max-width: 35px;
}

.btn-close{
    outline:  solid #8d9295!important
}