
/*  
  ----------------------------------------------------------------
  -----      Import 'Manrope' font and apply it to body      -----
  ----------------------------------------------------------------
*/

@font-face {
    font-family: 'Manrope';
    src: url('./font/Manrope-VariableFont_wght.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
}

body {
    font-family: 'Manrope', sans-serif;
}





/*  
  ----------------------------------------------------------------- 
  -----      Loader animation before displaying the page      -----
  -----------------------------------------------------------------
*/

.loader-wrapper {
    z-index: 2000 !important;
}





/*  
  --------------------------------------------
  -----      Top navigation styling      -----
  --------------------------------------------
*/

.navigation {
    z-index: 1030;
}





/*  
  ------------------------------------------------  
  -----      Back-to-top button styling      -----
  ------------------------------------------------
*/

.btn-back-to-top {
    position: fixed;
    bottom: 20px;
    display: none;
    z-index: 2;
    right: 20px;
}





/*  
  ------------------------------------------------  
  -----      Additional classes styling      -----
  ------------------------------------------------
*/

.gradient-header {
    background-color: #f0eec5;
    -webkit-mask: radial-gradient(60% 52% at 50% 33.300000000000004%, #000000 0%, rgba(0, 0, 0, 0) 100%) add;
    mask: radial-gradient(60% 52% at 50% 33.300000000000004%, #000000 0%, rgba(0, 0, 0, 0) 100%) add;
}

.img-scale-up-hover img {
    transition: transform 1s ease-in-out;
}

.img-scale-up-hover:hover img {
    transform: scale(1.20);
}

.background-color {
    background: radial-gradient(40% 38% at 50% 0%, #3a3d32 0%, rgb(31, 30, 19) 100%);
}

.background-noise {
    background-image: url('./../img/bg/noise.png');
    background-repeat: repeat;
    background-position: left top;
    background-size: 128.00px auto;
}


/* Container for the rotating words */
.rotating-text-container {
    display: inline-block; /* Allows it to sit next to other text */
    height: 80px; /* Set to the height of one line of text */
    overflow: hidden; /* This is key: it hides the other words */
    vertical-align: middle; /* Aligns the container with the surrounding text */
}

/* Individual words */
.rotating-text-word {
    display: block; /* Makes each word take up a full line */
    height: 80px; /* Same as the container's height */
    line-height: 80px; /* Vertically centers the text */
    transition: transform 0.5s ease; /* Smooth transition effect */
}


.color-meta {
    color: #0081FB;
}

.color-amazon {
    color: #FF9900;
}

.color-netflix {
    color: #E50914;
}

.color-microsoft {
    color: #737373;
}

.color-nvidia {
    color: #76B900;
}

.color-snowflake {
    color: #29B5E8;
}

.color-jane-street {
    color: #0A419E;
}

/* Colors for each word of Google */
.g-blue {
    color: #4285F4;
}

.o-red {
    color: #EA4335;
}

.o-yellow {
    color: #FBBC05;
}

.l-green {
    color: #34A853;
}

.e-red {
    color: #EA4335;
}