@charset "utf-8";
/* CSS Document */

@font-face {
	font-family:"Neue Haas Grotesk Display Pro";
	src:url("NeueHaasGrotDisp-55Roman-Trial.ttf");
}
 body {
      font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    }

    .anim {
      opacity: 0;
      transform: translateY(30px);
      animation: moveup 0.5s linear forwards;
    }
    @keyframes moveup {
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
.bg-quasar-red {
            background-color: #ff5733; /* A specific red for the theme */
        } 
.bg-quasar-blue {
            background-color: #453591; /* A specific red for the theme */
        } 


.circular-image-container {
width: 300px; 
height: 200px; 
overflow: hidden;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f44336; 
}

.circular-image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image fills the circle without distortion */
}


 /* Custom shape from the design */
        .q-shape {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 75vw;
            max-width: 600px;
            height: 75vw;
            max-height: 600px;
            background-color: #E2E1E3;
            border-radius: 50%;
            z-index: 0;
        }
        
        .q-shape-inner {
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            background-color: #38246E;
            border-radius: 50%;
        }

        .hero-text {
            position: relative;
            z-index: 10;
        }

        .workshop-card {
            background-color: #55448C;
            padding: 1rem;
            border: 2px solid #E2E1E3;
            border-radius: 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s ease;
        }
        
        .workshop-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }