/* Font styles */
/*-------------*/
@font-face {
    font-family: 'Futura';
    src: url('../fonts/FUTURA65MEDIUM.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*url('fonts/Futura.woff2') format('woff2'),
         url('fonts/Futura.woff') format('woff'),*/

@font-face {
    font-family: 'Futura';
    src: url('../fonts/FUTURA75BOLD.TTF') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.futura {
    font-family: 'Futura', sans-serif;
}* 

{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    /* font-family: Arial, sans-serif; */
    scroll-behavior: smooth;
    font-weight: 450;
}

html body.project-page {
    --bs-body-bg: #FFC000;
    overflow-x: hidden;
    background-color: #FFC000; /* Apply background color to project page */
}

body {
    overflow-x: hidden;
    background-color: #FFC000; /* Background color */
}

/* Full-screen sections */
section {
    position: relative;
    width: 100%;
    height: 100vh; /* Each section takes up the full viewport height */
}

/* Fixed text container */
.text-container {
    position: fixed;  /* Fixed in the center of the screen */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;  /* Initially hidden */
    transition: opacity 1s ease-in-out;
    text-align: center;
    z-index: 10;
    pointer-events: none; /* Prevents pointer events when not visible */
}

/* Media Query for Mobile Phones */
@media (max-width: 576px) {
    .text-container {
        padding: -100px;
    }
}

.text-container.visible {
    opacity: 1;  /* Text fades in when visible */
    pointer-events: auto; /* Allows pointer events when visible */
}

p {
    font-size: 2em;
    color: black;
}

/* Media Query for Tablets */
@media (max-width: 768px) {
    p {
        font-size: 1.7em;
    }
}

/* Media Query for Mobile Phones */
@media (max-width: 576px) {
    p {
        font-size: 1.4em;
    }
}

span.small {
    font-size: 0.8em;
    font-style: italic;
}

/* Highlighted text style */
span.highlight {
    color: white;  /* Highlighting important words */
}

.mouse {
    width: 50px;
    height: 90px;
    border: 3px solid white;;
    border-radius: 60px;
    position: relative;
    margin: auto;
    &::before {
        content: '';
        width: 12px;
        height: 12px;
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: white;;
        border-radius: 50%;
        opacity: 1;
        animation: wheel 2s infinite;
        -webkit-animation: wheel 2s infinite;
    }
}

@keyframes wheel {
	to {
		opacity: 0;
		top: 60px;
	}
}

@-webkit-keyframes wheel {
	to {
		opacity: 0;
		top: 60px;
	}
}

.modal-header {
    background-color: #FFC000;
    color: white;
    border: none;
}

.btn.btn-custom {
    background-color: white; /* Button background color */
    border: 2px solid white ;   /* White border */
    color: #ffc000;              /* Icon color */
    border-radius: 50%;        /* Makes the button round */
    width: 60px;               /* Width of the button */
    height: 60px;              /* Height of the button */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: auto;
    cursor: pointer;
    -moz-animation: shakeme 3s infinite;
    -o-animation: shakeme 3s infinite;    
    -webkit-animation: shakeme 3s infinite;
    animation: shakeme 3s infinite;
}

.btn.btn-custom i {
    font-size: 35px;           /* Size of the icon */
    
}

@keyframes shakeme {
    0% {
        transform: scale(1);
    }
    5% {
        transform: scale(0.7);
    }
    10% {
        transform: scale(1.5);
    }
    15% {
        transform: scale(1.1);
    }
    20% {
        transform: scale(1.4);
    }
    30% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
  
.btn.btn-custom:hover {
    /*color: #FFC000;*/
    background-color: #FFC000;
    border-color: white;
    /*box-shadow: 0px 0px 5px 1px white;*/
}

.btn.btn-custom:hover i{
    color:white;
}

#buttonSubscribe {
    background-color: #FFC000;
    color: white; 
}

#buttonSubscribe:hover {
    /*color: #FFC000;*/
    background-color: antiquewhite;
    border-color: #FFC000;
    color: #FFC000;
    box-shadow: 0px 0px 5px 1px white
}
/* When modal is open, hide .text-container elements */
.modal-open .text-container {
    opacity: 0; /* Hide the text */
    pointer-events: none; /* Prevent interactions */
}