body{
    background: #22bae1;
}

.cookie-consent {
    display: block;
    width: 20%;
    min-width: 340px;
    height: auto;
    margin: 0;
    padding: 20px 20px 20px 70px;
    background: #252525;
    position: fixed;
    bottom: 120px;
    left: 0px;
    z-index: 90000;
}

.cookie-consent-box {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    gap: 30px 0;
    margin: 0;
    padding: 0;
    width: 100%;
    flex-direction: column;
}

.cookie-consent-text {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.cookie-consent__title {
    font-size: 26px;
    font-family: "Calibri";
    font-weight: bold;
    color: #cecece;
    margin-bottom: 20px;
}

.cookie-consent__message {
    font-size: 22px;
    line-height: 22px;
    color: #cecece;
    font-family: "Calibri";
    margin-bottom: 20px;
}

.cookie-consent-button {
    display: flex;
    justify-content: left;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0 0;
    width: 250px;
    margin: 0;
    padding: 0;
}

.cookie-consent__agree {
    display: block;
    width: 250px;
    height: 50px;
    margin: 0;
    padding: 0;
    border-radius: 18px;
    background: #b89c60;
    color: #050947;
    line-height: 50px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    appearance: none;
    border: 0;
    cursor: pointer;
    transition: all 100ms ease-in;
    -webkit-transition: all 100ms ease-in;
    -ms-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
}

.cookie-consent__agree:hover {
    background: #050947;
    font-weight: bold;
    color: #b89c60;
}

/*
| ----------
| Header
| ----------
*/
#header{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 70px;
    background-color: #ffffff;
    position: fixed;
    z-index: 9993;
    top: 0;
    left: 0;
}
#logo{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 50px;
    height: 50px;
    margin-right: 150px;
    opacity: 1;
}
#logo img{ transition-duration: .35s; }
#logo:hover img{ transform: scale(1.1); }

#header-actions{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: auto;
    min-width: 200px;
    height: auto;
    gap: 20px;
}
.item-actions{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: auto;
    min-width: 115px;
    height: 30px;
    text-align: center;
    padding: 0 20px;
    border-radius: 15px;
    border: 2px solid #213365;
    background-color: #fff;
    color: #213365;
    font-size: 16px;
    font-family: "filson-pro", sans-serif;
}
.item-godparents{
    background-color: #213365;
    color: #fff;
}
.item-actions:hover{
    background-color: #22bae1;
    border: 2px solid #1e9dbd;
    color: #fff;
    text-decoration: none;
}

/*
| ----------
| Footer
| ----------
*/
#footer{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 340px;
    background: #2c3663;
    padding: 60px 0;
    box-sizing: border-box;
}
#socialmedia{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 90%;
    max-width: 1100px;
    height: auto;
}
.socialmedia-title{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    color: #ffffff;
}
#socialmedia-list{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    gap: 55px;
    margin-top: 10px;
}
.socialmedia-item, .socialmedia-link{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 45px;
    height: 45px;
}
.icon-socialmedia{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 45px;
    height: 45px;
    color: #22bae1;
    font-size: 45px;
    border: none;
    margin: 0;
    padding: 0;
    transition-duration: .15s;
}
.socialmedia-link:hover{ text-decoration: none; }
.socialmedia-link:hover .icon-socialmedia{ color: #fff; font-size: 42px; }

.logo-salveodudu{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 285px;
    height: auto;
    margin-top: 35px;
}
.footer-detail{
    display: block;
    width: 90%;
    max-width: 600px;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    color: #ffffff;
    text-align: center;
    line-height: 24px;
    margin-top: 50px;
}
.footer-copyright{
    display: block;
    width: 90%;
    max-width: 600px;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    color: #ffffff;
    text-align: center;
    line-height: 24px;
    margin-top: 60px;
}
/*
| ----------
| banner
| ----------
*/
#banner{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 440px;
    margin-top: 70px;
}
#main-banner{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 90%;
    max-width: 1280px;
    height: auto;
    padding: 60px 0 30px;
    box-sizing: border-box;
}
.banner{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    gap: 100px;
}
.banner-image{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 430px;
    height: 430px;
    border-radius: 215px;
    overflow: hidden;
}
.banner-image img{ display: block; max-width: 100%; height: auto; transition-duration: .35s; }
.banner-image:hover img{ transform: scale(1.1); }
.banner-information{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    width: 100%;
    max-width: 560px;
    height: auto;
}
.banner-title{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    height: auto;
    font-size: 96px;
    font-family: "filson-pro", sans-serif;
    font-weight: 800;
    color: #2c3663;
    gap: 20px;
}
#banner-logo{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-bottom: 60px;
}
.banner-description{
    display: block;
    width: 100%;
    height: auto;
    font-size: 32px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    color: #ffffff;
    line-height: 34px;
}
.banner-mainButons{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin-top: 40px;
    gap: 15px;
}
.banner-button, .banner-button2{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 200px;
    height: 45px;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    color: #fff;
    gap: 20px;
    border: 2px solid #fff;
    border-radius: 22.5px;
    background: rgba(255, 255, 255, 0.2);
}
.banner-button2{
    border: none;
    background: transparent;
}
.banner-button:hover{
    font-weight: 600;
    background: rgba(108, 185, 223, 0.3);
    text-decoration: none;
    color: #fff;
}
.banner-button2:hover{
    font-weight: 600;
    text-decoration: none;
    color: #fff;
}
/*
| ----------
| history
| ----------
*/
#history{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 340px;
    background: #ffffff;
    margin-top: 100px;
    padding-bottom: 100px;
}
#history-topHeader{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 133px;
    margin-top: -100px;
}
#history-topHeader svg{
    fill: #fff;
    width: 100%;
    height: 133px
}
#main-history{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    width: 90%;
    max-width: 1300px;
    height: auto;
    gap: 60px;
}
#history-video{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 445px;
    height: 790px;
    background: #b89c60;
    border-radius: 30px;
    overflow: hidden;
}
#history-video img{ display: block; max-width: 100%; height: auto; }
.video-all-item iframe, .video-all-item .my-player-dimensions, .player-dudu-dimensions{
    width: 100%;
    height: 790px;
}
.video-all-item .video-js .vjs-big-play-button{
    top: 50% !important;
    left: 50% !important;
    margin-left: -34px!important;
    margin-top: -24px!important;
    width: 68px!important;
    height: 48px!important;
    background-color: #ff0000!important;
    border: none!important;
    border-radius: 12px;
}
#history-text{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    width: calc(100% - 505px);
    height: auto;
}
.history-title{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    width: 100%;
    height: auto;
    font-size: 50px;
    font-family: "filson-pro", sans-serif;
    font-weight: 600;
    color: #1e9dbd;
    gap: 20px;
}
.history-title svg{
    width: 90px;
    height: 90px;
    fill: #1e9dbd;
}
.history-description{
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    height: auto;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    color: #3a3a3a;
    font-size: 18px;
    margin-top: 80px;
}
.history-values{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    width: 100%;
    height: auto;
    gap: 30px;
    margin-top: 45px;
}
.history-Item{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 180px;
    height: auto;
    border-radius: 30px;
    background-color: rgba(108, 185, 223, 0.3);
    box-sizing: border-box;
    padding: 20px;
    min-height: 210px;
}
.history-iconItem{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: rgba(108, 185, 223, 0.3);
}
.history-iconItem svg{
    width: 28px;
    height: 28px;
    fill: #294287;
}
.history-titleItem{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    color: #444444;
    margin-top: 18px;
}
.history-valueItem{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 36px;
    font-family: "filson-pro", sans-serif;
    font-weight: 600;
    color: #294287;
    margin-top: 5px;
}
.history-detailItem{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    color: #444444;
    line-height: 18px;
}
.button-laudo{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-width: 245px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 22px;
    background-color: rgba(108, 185, 223, 0.2);
    border: 3px solid #22bae1;
    color: #22bae1;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    margin-top: 30px;
}
.button-laudo:hover{
    background-color: rgba(108, 185, 223, 1);
    color: #294287;
    text-decoration: none;
    border: 0;
}
#main-laudos{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    min-width: 245px;
    height: 44px;
    gap: 20px;
}
/*
| ----------
| godparentsAdvantage
| ----------
*/
#godparentsAdvantage{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 340px;
    background: #d3eaf5;
    box-sizing: border-box;
    padding: 150px 0;
}
.godparentsAdvantage-title{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 400px;
    height: 50px;
    text-align: center;
    font-size: 30px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    color: #2c3663;
    gap: 20px;
    background-color: rgba(34, 186, 225, 0.1);
    border: 2px solid #22bae1;
    border-radius: 25px;
}
.godparentsAdvantage-icon{
    display: block;
    width: 35px;
    height: 35px;
}
.godparentsAdvantage-description{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 90%;
    max-width: 1080px;
    height: auto;
    text-align: center;
    font-size: 22px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    color: #2c3663;
}
.godparentsAdvantage-description p{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
}
.godparentsAdvantage-description strong{
    font-weight: 800;
    font-size: 52px;
    margin-bottom: 45px;
    line-height: 48px;
}
.godparentsAdvantage-description strong em{
    font-style: normal;
    color: #22bae1;
}

.godparentsAdvantage-details{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 795px;
    height: auto;
    background-color: rgba(34, 186, 225, 0.1);
    border: 2px solid #22bae1;
    border-radius: 45px;
    padding: 50px;
    box-sizing: border-box;
    margin-top: 80px;
    color: #2c3663;
    font-size: 22px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
}
.godparentsAdvantage-titledetails{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 400px;
    text-align: center;
    font-size: 30px;
    font-family: "filson-pro", sans-serif;
    font-weight: 800;
    color: #2c3663;
    gap: 40px;
}
.godparentsAdvantage-titledetails img{
    display: block;
    width: 35px;
    height: 35px;
}
.godparentsAdvantage-details ul{
    list-style: disc;
    margin-left: 40px;
    margin-top: 30px;
}

/*
| ----------
| ecommerce
| ----------
*/
#dindos{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 340px;
    background: #f7f7f7;
    box-sizing: border-box;
    padding: 100px 0 50px;
}
.ecommerce-title{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 100%;
    height: auto;
    color: #2c3663;
    font-size: 48px;
    font-family: "filson-pro", sans-serif;
    font-weight: 800;
}
.ecommerce-subtitle{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 100%;
    height: auto;
    color: #3e3e3e;
    font-size: 32px;
    font-family: "filson-pro", sans-serif;
    font-weight: 600;
}
.ecommerce-description{
    display: block;
    width: 90%;
    height: auto;
    color: #3e3e3e;
    font-size: 22px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    margin-top: 25px;
    max-width: 800px;
    text-align: center;
}
.ecommerce-description strong{
    font-weight: bold;
}

#plan{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 350px;
    height: auto;
}
#value{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    border: 2px solid #d5d5d5;
    background: #ffffff;
    min-height: 130px;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 30px;
    margin-top: 50px;
}
.price{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 100%;
    height: auto;
    color: #2c3663;
    font-size: 48px;
    font-family: "filson-pro", sans-serif;
    font-weight: 800;
    line-height: 48px;
}
.cash{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 60px;
    height: auto;
    color: #2c3663;
    font-size: 16px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    line-height: 20px;
}
.conditions{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 300px;
    height: auto;
    color: #2c3663;
    font-size: 16px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    line-height: 20px;
    margin-top: 5px;
}
#button-buy{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-width: 350px;
    height: 55px;
    box-sizing: border-box;
    border-radius: 27.7px;
    background: #2c3663;
    color: #ffffff;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    margin-top: 5px;
    cursor: pointer;
    transition-duration: .35s;
}
#button-buy:hover{
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    background: #3b4883;
}
#value:hover{
    box-shadow: 37px -32px 80px -42px rgba(0,0,0,0.45);
    -webkit-box-shadow: 37px -32px 80px -42px rgba(0,0,0,0.45);
    -moz-box-shadow: 37px -32px 80px -42px rgba(0,0,0,0.45);
    background: rgba(34, 186, 225, 0.1);
    border: 2px solid #22bae1;
}

#benefits{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 660px;
    height: auto;
    box-sizing: border-box;
    border: 2px solid #d5d5d5;
    background: #ffffff;
    min-height: 130px;
    box-sizing: border-box;
    padding: 45px 0;
    border-radius: 30px;
    margin-top: 50px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    color: #2c3663;
    font-size: 18px;
}
.title-benefits{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 100%;
    height: auto;
    color: #2c3663;
    font-size: 30px;
    font-family: "filson-pro", sans-serif;
    font-weight: 800;
}
#benefits ul{
    list-style: disc;
    margin-left: 40px;
    margin-top: 30px;
}
#benefits ul li{
    text-align: left;
    width: 100%;
}

/*
| ----------
| godparents
| ----------
*/
#godparents{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 340px;
    background: #2c3663;
    padding: 50px 0;
    box-sizing: border-box;
}

.godparents-title{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 100%;
    height: auto;
    color: #fff;
    font-size: 48px;
    font-family: "filson-pro", sans-serif;
    font-weight: 800;
}
.godparents-subtitle{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 100%;
    height: auto;
    color: #fff;
    font-size: 22px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
}
#bubbles-container{
    display: block;
    width: 90%;
    max-width: 1600px;
    height: 500px; 
    pointer-events: none; 
    z-index: 10;
    position: relative;
    margin-top: 50px;
}
.donor-bubble {
    position: absolute;
    background: rgba(34, 186, 225, 0.1);
    border: 2px solid #22bae1;
    color: white;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    pointer-events: auto; /* Permite hover */
    transition: opacity 1s ease, transform 0.3s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.donor-bubble img{
    width: 22px;
    height: 22px;
    display: block;
}


/*
| ----------
| business
| ----------
*/
#business{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 340px;
    background: #d3eaf5;
    padding: 50px 0;
    box-sizing: border-box;
}
.business-title{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 100%;
    height: auto;
    color: #2c3663;
    font-size: 48px;
    font-family: "filson-pro", sans-serif;
    font-weight: 800;
    gap: 10px;
}
.business-title strong{
    color: #22bae1;
}
.business-subtitle{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 90%;
    max-width: 850px;
    margin-top: 35px;
    height: auto;
    color: #2c3663;
    font-size: 22px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
}

#business-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 90%;
    max-width: 1600px;
    height: auto;
    gap: 10px;
    margin-top: 55px;
}
.business-item, .business-link{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 170px;
    height: 80px;
}
.business-image{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    width: 170px;
    height: 80px;
    background: #3a3a3a;
}
.business-image img{ transition-duration: 0.35;}
.business-link:hover{ text-decoration: none;}
.business-link:hover .business-image img{ transform: scale(1.1); }
#business-buy{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-width: 380px;
    height: 55px;
    box-sizing: border-box;
    border-radius: 27.7px;
    background: #2c3663;
    color: #ffffff;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    margin-top: 45px;
    cursor: pointer;
    transition-duration: .35s;
}
#business-buy:hover{
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    background: #3b4883;
}
/*
| ----------
| questions
| ----------
*/
#questions{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 340px;
    background: #f7f7f7;
    padding: 110px 0 150px;
    box-sizing: border-box;
}
#main-questions{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 90%;
    max-width: 1350px;
    height: auto;
    gap: 70px;
}
#questions-items{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: calc(100% - 740px);
    height: auto;
}
.questions-title{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    width: 100%;
    height: auto;
    font-size: 32px;
    font-family: "filson-pro", sans-serif;
    font-weight: 800;
    color: #2c3663;
    gap: 20px;
    transition-duration: .35s;
}
.icon-question{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    align-content: center;
    width: 55px;
    height: 55px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #ccecf8;
    border: 2px solid #b5ebff;
    font-size: 28px;
    color: #2c3663;
    margin: 0;
    padding: 0;
}
#questions-list{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content:flex-start;
    align-items:flex-start;
    align-content: flex-start;
    width: 100%;
    height: auto;
    margin-top: 40px;
    gap: 20px;
}
.questions-item{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 85px;
    background: #ffffff;
    border: 2px solid #d5d5d5;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
}
.question{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    gap: 0 15px;  
}
.question-title{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    font-size: 22px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    color: #515151;
    width: calc(100% - 35px);
    height: auto;
    transition-duration: .35s;
}
.icon-arrowQuestion{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 20px;
    color: #c9c9c9;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: none;
    transition-duration: .35s;
}

.questions-item:hover .question-title, .questions-active .question-title{
    font-weight: 600;
}
.questions-item:hover .icon-arrowQuestion, .questions-active .icon-arrowQuestion{
    font-size: 22px;
}

.response{
    display: none;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    color: #515151;
    width: 100%;
    height: auto;
    margin-top: 15px;
    line-height: 24px;
}
#questions-image{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 670px;
    height: 580px;
    overflow: hidden;
    border-radius: 50px;
    background: #1e9dbd;
    box-shadow: -16px -13px 59px 0px rgba(0,0,0,0.54);
    -webkit-box-shadow: -16px -13px 59px 0px rgba(0,0,0,0.54);
    -moz-box-shadow: -16px -13px 59px 0px rgba(0,0,0,0.54);
}

#questions-image img{
    transition-duration: .35s;
    max-width: 100%;
}


/*
| ----------
| actions
| ----------
*/
#actions{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 340px;
    padding: 100px 0 65px;
    box-sizing: border-box;
}

.actions-title{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 90%;
    max-width: 1000px;
    height: auto;
    font-size: 52px;
    font-family: "filson-pro", sans-serif;
    font-weight: 800;
    color: #2c3663;
    gap: 20px;
    text-align: center;
}
.actions-subtitle{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 90%;
    max-width: 1000px;
    height: auto;
    font-size: 22px;
    line-height: 26px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    color: #f7f7f7;
    text-align: center;
    margin-top: 50px;
}
#action-list{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    width: 90%;
    max-width: 1400px;
    height: auto;
    margin-top: 120px;
    gap: 100px;
}
.action-item{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 90%;
    max-width: 395px;
    height: auto;
    box-shadow: -17px -13px 48px 1px rgba(0,0,0,0.57);
    -webkit-box-shadow: -17px -13px 48px 1px rgba(0,0,0,0.57);
    -moz-box-shadow: -17px -13px 48px 1px rgba(0,0,0,0.57);
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid #6fd6f2;
    border-radius: 50px;
    padding: 35px 20px 50px;
    transition-duration: .35s;
}
.action-item:hover{
    box-shadow: -5px -13px 48px 1px rgba(0,0,0,0.75);
    -webkit-box-shadow: -5px -13px 48px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: -5px -13px 48px 1px rgba(0,0,0,0.75);
}
.action-link{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
}
.action-link:hover{
    text-decoration: none;
}
.action-image{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    max-width: 260px;
    height: 130px;
    overflow: hidden;
    border-radius: 15px;
    background: #1e9dbd;
}
.action-image img{
    max-width: 100%;
    transition-duration: .35s;
}
.action-item:hover .action-image img{
    transform: scale(1.1);
}

.action-category{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 90%;
    font-size: 22px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    color: #494949;
    text-align: center;
    margin-top: 20px;
    text-transform: uppercase;
}
.action-title{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 90%;
    font-size: 24px;
    font-family: "filson-pro", sans-serif;
    font-weight: 600;
    color: #2c3663;
    text-align: center;
    text-transform: uppercase;
}
.action-button{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: auto;
    min-height: 44px;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    color: #2c3663;
    text-align: center;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid #2c3663;
    border-radius: 22px;
    padding: 0 20px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: none;
}
.action-message{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 90%;
    max-width: 1110px;
    height: auto;
    font-size: 52px;
    font-family: "filson-pro", sans-serif;
    font-weight: 800;
    color: #ededed;
    gap: 20px;
    text-align: center;
    margin-top: 65px;
}

/* ----------------------------------------------------
   CHECKOUT SECTION
   ---------------------------------------------------- */
#headercheckout{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    min-height: 70px;
    background-color: #ffffff;
}
#process{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 60%;
    max-width: 600px;
    height: auto;
    background-color: #ffffff;
}
.checkout-title{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: auto;
    height: auto;
    padding: 0 20px;
    font-size: 18px;
    gap: 10px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    color: #515151;
}
.icon-checkout{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 35px;
    height: 35px;
    box-sizing: border-box;
    border-radius: 9px;
    background: #515151;
    border: 2px solid #444444;
    font-size: 16px;
    color: #fff;
    margin: 0;
    padding: 0;
}
.process-divider{
    display: block;
    width: 20px;
    height: 1px;
    background: #444444;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
}
.checkout-select{
    color: #213365;
}
.checkout-select .icon-checkout{
    background: #ccecf8;
    border: 2px solid #b5ebff;
    color: #2c3663;
}


#checkout {
    background-color: #f8f8f8;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: stretch;
    align-content: center;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    gap: 50px;
}
#form-personalData, #form-register, #form-payment, #form-revise{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 50%;
    height: auto;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: 30px;
    padding: 40px 60px;
    box-sizing: border-box;
    gap: 30px;
    margin: 60px 0;
}
#form-revise{ gap: 10px; }
.form-group {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    max-width: 600px;
    width: 100%;
}
.form-groupSmall{
    flex-direction: row;
    gap: 30px;
}
.form-label {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    font-family: "filson-pro", sans-serif;
}
.form-input {
    width: 100%;
    height: 55px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color: #f1f3f5;
    font-size: 15px;
    transition: all 0.3s ease;
}

.form-input:focus {
    background-color: #fff;
    border-color: #1e9dbd;
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
}
.selectParcel{ width: 140px; }
.parcel-information{
    font-size: 16px;
    color: #494949;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    margin-left: 30px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Container do Telefone com Bandeira */
.input-phone-container {
    display: flex;
    align-items: center;
    width: 100%;
}
.main-error{
    position: relative;
}
.main-error input{ border: 1px solid #e7001f; }
.error-message{
    display: block;
    position: absolute;
    top: 45px;
    left: 15px;
    background: #363636;
    color: #f1f3f5;
    font-size: 16px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    padding: 5px 20px;
    width: auto;
    height: auto;
    border-radius: 10px;
}

.country-flag {
    padding: 0 15px;
    display: flex;
    align-items: center;
    border-right: 1px solid #ddd;
    height: 30px;
    margin: 0 5px;
    font-size: 14px;
}

.form-check {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 10px;
    margin-top: 30px;
    max-width: 400px;
    width: 100%;
}

.form-checkbox {
    width: 20px;
    height: 20px;
    accent-color: #1e9dbd; /* Laranja do checkbox no print */
    cursor: pointer;
}
.form-checkLabel{
    color: #333;
    font-size: 15px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    width: 85%;
    display: block;
    line-height: 20px;
}

.button-checkout-continue {
    background: #22bae1;
    color: #fff;
    border: none;
    padding: 18px 45px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    float: right;
    margin-top: 20px;
    transition: transform 0.2s, background 0.3s;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
}

.button-checkout-continue:hover {
    background: #213365;
    transform: translateY(-2px);
}

/* --- Lado Direito: Resumo (Sidebar) --- */
#checkout-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 30%;
    height: auto;
    min-height: 450px;
    background: #fff;
    border-left: 2px solid #e5e5e5;
    padding: 130px 50px;
    box-sizing: border-box;
}
.summary-product {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    height: auto;
    gap: 15px;
    margin-bottom: 25px;
}
.product-image{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    height: auto;
}
.product-image img{
    display: block;
    width: auto;
    height: 45px;
}
.product-info{
    display: block;
    width: 100%;
    height: auto;
    max-width: 250px;
    color: #213365;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 600;
}
.summary-divider{
    display: block;
    width: 100%;
    height: 1px;
    background: #e5e5e5;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
}
.summary-values{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    height: auto;
    padding: 20px 0 0;
}
.value-item{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    height: auto;
}
.summary-label{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    color: #213365;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 300;
    width: 120px;
    gap: 10px;
}
.icon-summary{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    background: #ccecf8;
    border: 2px solid #b5ebff;
    color: #2c3663;
    width: 35px;
    height: 35px;
    box-sizing: border-box;
    border-radius: 9px;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
.summary-price{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    color: #213365;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 800;
    width: 120px;
    gap: 10px;
}

.checkout-titleEtapa{
    display: block;
    width: 100%;
    height: auto;
    color: #213365;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 600;
    margin-top: 30px;
}
#checkout-yourdata{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    height: auto;
    gap: 20px;
}
.item-revise{
   display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    height: auto;
    gap: 15px; 
}
.checkout-label{
    display: block;
    width: calc(100% - 50px);
    font-size: 18px;
    font-weight: 600;
    color: #333;
    font-family: "filson-pro", sans-serif;
    line-height: 20px;
}
.checkout-label strong{
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    color: #252525;
}
#checkout-paymentFormat{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    height: auto;
    gap: 15px;
}
.button-paymentFormat{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;
    color: #213365;
    font-size: 18px;
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    gap: 20px;
    padding: 5px 10px;
    background: #e5e5e5;
    border-radius: 15px;
    max-width: 410px;
}
.icon-paymentformat{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    align-content: center;
    width: 65px;
    height: 65px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #ccecf8;
    border: 2px solid #b5ebff;
    font-size: 32px;
    color: #2c3663;
    margin: 0;
    padding: 0;
}
.button-paymentFormat:hover{
    background: #213365;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}
.paymenterror-message{ 
    display: block;
    width: 100%;
    background: #f1f3f5;
    color: #e7001f;
    font-size: 16px;
    font-family: "filson-pro", sans-serif;
    padding: 10px 20px;
    border-radius: 7px;
}