@font-face {
    font-family: 'InterVariable';
    src: url('../fonts/Inter-VariableFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: 'InterVariable', sans-serif;
    background-color: #f9f9f9;
}

:root {
    --custom-primary-color: #f87b00;
    --custom-secondary-color: #f4ec2b;
}

.custom-primary-text {    
    color: var(--custom-primary-color)!important;
}

.custom-secondary-text {    
    color: var(--custom-secondary-color)!important;
}

.w-fit-content {
    width: fit-content;
}

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


.custom-fs-1 {
    font-size: 60px!important;
    line-height: 64px;
}

@media screen and (min-width: 768px) {
    .custom-fs-1 {
        font-size: 70px!important;
        line-height: 74px;
    }
}

.custom-fs-2 {
    font-size: 50px!important;
    line-height: 48px;
}

.custom-fw-bolder {
    font-weight: 900!important;
}

.btn-custom {
    background-color: #f87b00;

    &:hover {
        background-color: #c85000;
    }
}

.shadow-image {
    box-shadow: var(--custom-primary-color) 30px 30px 0 0;
}

.custom-link {
    text-decoration: none;
    color: #f9f9f9;
}

.header {
    background-color: var(--custom-primary-color);
    max-height: 700px;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
    animation: fadeInTop 0.5s ease-out 0s 1;

    &  .row {
        max-width: 1320px;

        & a {
            align-self: center;
        }
    }

    &  .row > div:nth-child(1) {
        z-index: 1;

        & h1 {
            font-size: 38px!important;            
        }
    }

    &  .row > div:nth-child(2) {
        & img {
            max-width: none;
            display: none;
        }

        /* & > img:nth-child(1) {
            z-index: 0; 
            width: 500px;
            height: auto;
            transform: translate(20%, -16%);
            animation: fadeInBottom_1 0.5s ease-out 0s 1;
        }
        
        & > img:nth-child(2) {
            z-index: 1;            
            transform: translate(180px, -510px);
            width: 130px;
            max-width: 44vw;
            animation: fadeInBottom_2-mobile 0.5s ease-out 0s 1;
        } */
    }    
}

@media screen and (min-width: 768px) {
    .header {
        border-radius: 0;

        & #logos {
            & img:nth-child(2) {
                border-left: 1px solid #f9f9f9;
                padding-left: 10px;
                margin-left: 10px;
            }

            & img {
                width: 260px;
                height: fit-content;                
            }
        }

        &  .row {               
            & a {
                align-self: flex-start;
            }
        }

        & > .row:nth-child(2) > div:nth-child(1) {
            & h1 {
                font-size: 50px!important;
                margin-top: 50px;
            }
        }    

        & > .row > div:nth-child(2) {
            & img {
                display: block;
            }

            & > img:nth-child(1) {
                z-index: 0;
                width: 1000px;
                height: auto;
                transform: translate(15%, -23%);
                animation: fadeInBottom_1 0.5s ease-out 0s 1;
            }
    
            & > img:nth-child(2) {
                z-index: 1;                
                transform: translate(30px, -140%);
                width: 400px;
                max-width: 44vw;
                animation: fadeInBottom_2 0.5s ease-out 0s 1;
            }
        }
    }
}

@keyframes fadeInTop {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInBottom_1 {
    0% {
        opacity: 0;
        transform: translate(10%, 100%);
    }
    100% {
        opacity: 1;
        transform: translate(10%, 0%);
    }
}

@keyframes fadeInBottom_2 {
    0% {
        opacity: 0;
        transform: translate(30px, 0%);
    }
    100% {
        opacity: 1;
        transform: translate(30px, -140%);
    }
}

@keyframes fadeInBottom_2-mobile {
    0% {
        opacity: 0;
        transform: translate(30px, 0%);
    }
    100% {
        opacity: 1;
        transform: translate(30px, -500px);
    }
}


.benefits {
    max-width: 1320px;
    animation: fadeInBottom_3 0.5s ease-out 0s 1;
    & img {
        width: 90%;
        height: auto;
    }

    & .btn {
        display: inline;
    }

    & > div:nth-child(2) > .d-flex {        
        justify-content: center;
        align-items: center;        
    }
}

@media screen and (min-width: 768px) {
    .benefits {
        & img {
            width: auto;
            height: 600px;
        }        
    }
}

@keyframes fadeInBottom_3 {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

.description-container {
    overflow-x: hidden;

    & img {
        transform: translateX(80px);

    }
}

@media screen and (min-width: 768px) {
    .description-container {
        & img {
            position: absolute;
            transform: translateX(80px);
            width: auto;
            height: 800px;
        }
    }
}

@keyframes moveBg {
    0% { background-position: 0% 0%; }
    50% { background-position: 30% 0%; }
    100% { background-position: 0% 0%; }
}

.shining-background-container {
    max-width: 1320px;
    background-size: 150% 250%;
    background-position: 0% 0%;
    position: relative;
    overflow: hidden; /* Contain the shine effect */
    animation: moveBg 4s linear infinite; /* Animation controls */

    & img {
        max-width: none;
        width: 100%;
        transform: translate(0px, 0px);
        border-radius: 20px;     
        margin-bottom: 36px;   
    }
}

@media screen and (min-width: 768px) {
    .shining-background-container {
        & img {
            max-width: none;
            width: 800px;
            height: max-content;
            transform: translate(0px, 10px);
            border-radius: 20px 0 0 0;
            margin-bottom: 0px; 
        }
    }
}

@keyframes shine {
    0% { transform: translate(-200px, -100px) rotate(-45deg); opacity: 0; } /* Starts fainter */
    50% { transform: translate(100px, 0px) rotate(-45deg); opacity: 0.8; } /* Brightest at the center */
    100% { transform: translate(500px, 100px) rotate(-45deg); opacity: 0; } /* Fades out again */
}

.shining-background-container::before {
    content: '';
    position: absolute;
    top: -100px; /* Start position above the element */
    left: -200px;  /* Adjust left for initial off-screen position */
    width: 400px; /* Width of the shine */
    height: 200px; /* Height of the shine */
    border-radius: 50px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5), transparent); /* White shine, adjust opacity as desired */
    transform: rotate(-45deg) translateY(80px); /* Rotate to match the background gradient */
    animation: shine 4s ease-in-out infinite; /* Animation controls */
    filter: blur(5px);
}

.golden-background {
    background: var(--custom-primary-color); /* Fallback golden color */
    background: linear-gradient(45deg, #c85000, #f87b00);
}

.silver-background {
    background: #b3b3b3; /* Fallback golden color */    
    background: linear-gradient(45deg, 
        #a3a3a3, /* Slightly darker start */
        #bebebe, 
        #a3a3a3); /* Slightly lighter middle */
}

.green-background {
    background: #11998e; /* Fallback golden color */    
    background: linear-gradient(45deg, 
        #11998e, 
        #38ef7d); 
}

.placa-solar {
    max-width: 1320px;
    
    & img {
        width: 90%;
        height: auto;
    }

    & .d-flex {
        justify-content: center;
        align-items: center;
    }
}

@media screen and (min-width: 768px) {
    .placa-solar {
        & img {
            width: auto;
            height: 600px;
        }
    }
}

@media screen and (max-width: 768px) {
    footer {
        & .d-flex {
            justify-content: center;
            align-content: center;
        }
    }
}

@media screen and (min-width: 768px) {
    footer {
        & > .row {
            margin-left: -30px;
            max-width: 1000px;
            justify-self: center;
        }

        & #copyright {
            font-size: 12px;
        }
    }   
}