:root {
    /*--custom-gradient: linear-gradient(45deg, #00a0ec, #00ffff);*/
    /* --custom-gradient: linear-gradient(to right, ##00a0ec 0%, #c2e9fb 51%, #a1c4fd 100%);*/

    --custom-gradient-check: linear-gradient(45deg, #00a0ec, #00e6fa);
    --custom-gradient: linear-gradient(to right, #00a0ec 0%, #00e6fa 51%, #00a0ec 100%);
    --hover-gray-color: #dedede;
}

.big-bg {
    background-image: url('../image/HomePage/bigbackgroundsvg.svg');
/*    background-size: initial;
    background-repeat: no-repeat;
    background-attachment: local;
    background-size: 100%;
    background-position: center center;*/

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
}


.big-grad-bg {
    background-image: linear-gradient(to bottom, #065fd4, rgb(1 172 237 / 62%)), /* Transparent gradient */
    url('../image/HomePage/bigbackgroundsvg.svg'); /* Background image */


    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-size: cover;
    background-position: center;
    z-index: -1;
}


.blue-bg {
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 255, 0.7));*/ /* Dark blue gradient background */
    background: linear-gradient(to bottom, #065fd4, rgb(1 172 237 / 62%));
    color: white;
}

.blue-footer-bg {
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 255, 0.7));*/ /* Dark blue gradient background */
    background: linear-gradient(to bottom, rgb(1 172 237 / 80%), #065fd4);
    padding: 20px;
    color: white;
}




.navbar-t {
    background-color: transparent !important;
}

.scroll {
    overflow-y: scroll;
    height: 100dvh; /* dynamic viewport height, respects browser chrome */
}

h1 h2 h3 h4 h5 {
    margin-bottom: 0px; /* You can adjust this value as needed */
}

p {
    margin-bottom: 0px; /* You can adjust this value as needed */
}

.navbar-nav .nav-link {
    color: white;
}


.container-view {
    min-height: 100vh;
}

.container-view-footer {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.background-hearder {
    position: relative;
    /* Additional background properties can be set here (e.g., background-repeat, background-position) */
    z-index: 1;
    /* max-height: 62vh; */
    /*max-height: 100vh */
}

    .background-hearder::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* background-image: linear-gradient(rgba(4, 60, 119, 0.4), rgba(17, 0, 94, 0.932)); */
        /*background-color: rgba(4, 60, 119, 0.8);*/ /* The color overlay you want with transparency */
        /*        background-color: rgba(4, 60, 119, 0.8);*/
        background-image: url('../images/your_image.jpg'), linear-gradient(rgba(4, 60, 119, 0.8), rgba(4, 60, 119, 0.8));
        z-index: -1;
    }



.background-2 {
    z-index: -1;
    /*max-height: 100vh*/
}

.background-3 {
    position: relative; /* Ensure proper positioning for the pseudo-element */
}

    .background-3::before {
        content: ""; /* Required for pseudo-element */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('../image/HomePage/background4.svg'); /* Specify the background image again */
        transform: rotate(180deg) scaleX(-1) scale(1); /* Apply transformation to pseudo-element */
        z-index: -1; /* Ensure the pseudo-element is positioned behind the content */
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url('../image/HomePage/background4.svg');
    }


.background-4 {
    position: relative;
}

    .background-4::before {
        content: ""; /* Required for pseudo-element */
        position: absolute;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }

.btn-round {
    border-radius: 60px;
    height: 60px;
    width: 60px;
    margin-left: 1%;
}

.gradient-text {

    color: #0565ff;
    text-fill-color: transparent;
    background: linear-gradient(45deg, #00a0ec, #00ffff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
/*    animation: shine 3s ease-in-out infinite;*/
    background-size: 200% auto;
}

@keyframes shine {
    100% {
        background-position: 200%;
    }
}






.card-description {
    min-height: 80px;
}

.price-color {
    color: #00a0ec;
}

.btn-page {
    max-width: 150px;
}

.w-max-90 {
    max-width: 90%;
}

.w-90 {
    width: 90%;
}

.w-87 {
    width: 87%;
}

.w-60 {
    max-width: 60% !important;
}

.player {
    border-radius: 20px;
    overflow: hidden;
    z-index: 1;
/*    height: 315px;
    width: 560px*/;
}


    .player .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .player .spinner-border {
        width: 3rem;
        height: 3rem;
        color: #007bff;
    }

.card-player {
 /*   min-width: 60%;*/
    padding: 25px;
}

.footer-img {
    top: 50%;
    left: 8%;
}

.footer-arrow {
    top: 50%;
    right: 10%;
}

.card-bg {
    background-color: #e8eef2;
}

.card-p-product {
    padding: 1% 1% 6% 1%
}


.card-bg-pattern {
    background-repeat: no-repeat;
    background-size: cover; /* Adjust as needed */
    /* Additional styles for the card if desired */
    background-image: url('../image/HomePage/pattern-card.svg');
    position: relative;
    z-index: 1;
    border: none;
}

    .card-bg-pattern::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* background-image: linear-gradient(rgba(4, 60, 119, 0.4), rgba(17, 0, 94, 0.932)); */
        background-color: #0966d6ed; /* The color overlay you want with transparency */
        z-index: -1;
        border-radius: 20px;
        border: none;
    }

/*.gradient-button {
    background: var(--custom-gradient);
    border: none;
}
*/

.btn-home {
    border-radius: 5px;
    border: 1px solid black; /* Black border */
}


.btn-check:checked + .btn-home {
    color: var(--bs-btn-active-color) !important;
    background: var(--custom-gradient-check) !important;
}

.icon-f svg path {
    fill: black;
/*    transition: fill 0.3s ease;*/
}

.icon-s svg path {
    stroke:black;
    /*    transition: fill 0.3s ease;*/
}



.custom-radio-label {
    border: none !important;
    background-color: white;
    /*    transition: background-color 0.3s linear;*/
}

    .custom-radio-label:hover {
        border: none !important;
        background-color: #00a2ed !important;
        /*transition: background-color 0.3s linear;*/
    }

.resources-radio-label {
    border: none !important;
    background-color: white;
    width: 160px;
}

    .resources-radio-label:hover {
        border: none !important;
        background-color: #00a2ed !important;
        /*transition: background-color 0.3s linear;*/
    }

.lb-resources {
    min-height: 60px;
}

    .lb-resources:hover {
        border: none !important;
        background-color: #00a2ed !important;
    }


background-5{
    
}

.card-home {
    /* 
    background-color: #333;
    color: white;
    */
    /*padding: 15px !important;*/
    border-radius: 20px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    height:100%;
}


.card-home-2 {
    border-radius: 20px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    min-height: 1080px;
}


@media (max-width: 992px) {
    .card-home-2 {
        min-height: unset !important;
    }
}

.h-120 {
    min-height: 120px;
}


.footer-bg-color{
        background-color: #154980;
}

 .btn-home {
    display: inline-block;
    padding: 12px 22px;
    color: black;
    text-align: center;
    text-decoration: none;
    background-color: white;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    min-width: 180px;
}

.btn-home-top {
    display: inline-block;
    padding: 12px 22px;
    border: none;
    color: black;
    text-align: center;
    text-decoration: none;
    background-color: white;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    min-width: 105px;
}

    .btn-home-top:hover {
        background-color: #00a2ed;
        color: white;
    }

    .btn-home:hover {
        background-color: #00a2ed;
        color: white;
    }


.btn-home-outline {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid white;
    color: white;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    width: 105px;
}

    .btn-home-outline:hover {
        background-color: white;
        color: black;
    }
/*
@keyframes slidethebg {
    to {
        background-position: 20vw;
    }
}*/



/*.btn-gradient {
    background: var(--custom-gradient);
    border: none;
    color: #12477d;
    position: relative;
    color: white;
}

    .btn-gradient::before {
        content: "";
        position: absolute;
        top: -2px; 
        left: -2px; 
        right: -2px; 
        bottom: -2px; 
        border: 6px solid transparent; 
       
    }

    .btn-gradient:hover::before {
        border-color: #FEFEFF;
        border-radius: 10px;
        color: white;
    }
*/

.btn-gradient {
    background-image: var(--custom-gradient);
    transition: 0.5s;
    background-size: 200% auto;
    border: none;
    position: relative;
    color: white;
}

    .btn-gradient:hover {

        background-position: right center;
    }

.card-product-p {
    padding: 1% 1% 6% 1%
}

.card-home-bg {
    background-color: #F5F9FD;
}

.card-home-bg-select {
    background-color: #95c3f5;
}

.no-button-licence {
    padding: 27px;
}

/* Large devices (≥1400px) */
@media (max-width: 1400px) {
    .col-custom-md-6 {
        flex: 0 0 50%; /* Change the width to 50% for 2 columns */
        max-width: 50%;
    }
}

@media (max-width: 775px) {
    .col-custom-sm-12 {
        flex: 0 0 100%; /* Change the width to 100% for 2 columns */
        max-width: 100%;
    }

    .resources-radio-label {
        border: none !important;
        background-color: white;

    }
}


/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .w-sm-100 {
        width: 100% !important;
    }

    .w-sm-75 {
        width: 75% !important;
    }

    .w-sm-60 {
        width: 60% !important;
    }

    .w-sm-50 {
        width: 50% !important;
    }

    .w-sm-25 {
        width: 25% !important;
    }

    .h-sm-100 {
        height: 100% !important;
    }

    .h-sm-75 {
        height: 75% !important;
    }

    .h-sm-50 {
        height: 50% !important;
    }

    .h-sm-25 {
        height: 25% !important;
    }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .w-md-100 {
        width: 100% !important;
    }

    .w-md-75 {
        width: 75% !important;
    }

    .w-md-60 {
        width: 60% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-25 {
        width: 25% !important;
    }

    .h-md-100 {
        height: 100% !important;
    }

    .h-md-75 {
        height: 75% !important;
    }

    .h-md-50 {
        height: 50% !important;
    }

    .h-md-25 {
        height: 25% !important;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .w-lg-100 {
        width: 100% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .w-lg-60 {
        width: 60% !important;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-25 {
        width: 25% !important;
    }

    .h-lg-100 {
        height: 100% !important;
    }

    .h-lg-75 {
        height: 75% !important;
    }

    .h-lg-50 {
        height: 50% !important;
    }

    .h-lg-25 {
        height: 25% !important;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .w-xl-100 {
        width: 100% !important;
    }

    .w-xl-75 {
        width: 75% !important;
    }

    .w-xl-60 {
        width: 60% !important;
    }

    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-25 {
        width: 25% !important;
    }

    .h-xl-100 {
        height: 100% !important;
    }

    .h-xl-75 {
        height: 75% !important;
    }

    .h-xl-50 {
        height: 50% !important;
    }

    .h-xl-25 {
        height: 25% !important;
    }
}

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

@media (max-width: 400px){

    .text-400 {
        display: block;
        text-align: center;
    }

}

.b-rad-10 {
    border-radius: 10px !important;
}

.record-green{
    fill:green;
}

.record-red {
    fill: red;
}


.text-underline {
    text-decoration: underline; /* Underlines text on hover */
    font-size: 80%;
}

    .text-underline:hover {
        cursor: pointer; /* Changes cursor to pointer */
        color: #007bff; /* Bootstrap primary color */
    }

.mouse-pointer:hover {
    cursor: pointer;
}


/* Teste */
.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

    .inputfile + label {
/*        font-size: 1.25em;
        font-weight: 700;*/
        color: #333; /* Bootstrap gray color */
        background-color: #f7f7f7; /* Bootstrap gray background */
        border: 1px solid #ccc; /* Bootstrap gray border */
        display: inline-block;
        padding: 8px 12px; /* Bootstrap button padding */
        border-radius: 4px; /* Bootstrap button border-radius */
    }

/*        .inputfile:focus + label,*/
        .inputfile + label:hover {
            background-color: #d9edf7; /* Bootstrap gray hover color */
            border-color: #bce8f1; /* Bootstrap gray hover border color */
            cursor: pointer;
        }