/* CSS styles optimized for the Pi Classes Sahibabad */

/* Importing Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* Base styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Variable definitions */
:root {
    /* Colors */ 
    --white_color: rgb(255, 255, 255);
    --orange_color: rgb(255, 165, 89);
    --orange_dark_color: rgb(255, 96, 0);
    --black_color: rgb(69, 69, 69);
    --background_color: linear-gradient(to top left, #b156d9, #213780);
}

/* Container styling */
.container1 {
    width: 100%;
    min-height: 100vh;
    background-image: var(--background_color);
    padding-bottom: 1rem;
    transform-style: preserve-3d;
}

/* Header styling */
header {
    padding: 2rem 0;
    margin: 0 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo styling */
.logo {
    width: 20rem;
    height: 6rem;
}

.logo img {
    width: 100%;
    height: 100%;
}

/* Heading styling */
h1 {
    color: var(--white_color);
    text-align: center;
    padding: 1rem;
    border-bottom: 0.2rem var(--orange_color) solid;
    text-transform: uppercase;
}

/* ... (CSS rules for the hero section) ... */ 

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 7rem;
}

/* Image Gallery */ 
.hero .image_gallery {
    position: relative;
    width: 15rem;
    height: 12.5rem;
    transform-style: preserve-3d;
    transition: 1.5s;
    transform: perspective(62.5rem) rotateY(0deg);
}

.image_gallery span {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    transform: rotateY(0) translateZ(18.75rem);
    -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, var(--black_color));
}

.image_gallery span img {
    user-select: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0; 
    object-fit: cover;
}

/* ... (CSS rules for the navigation buttons and icons) ... */

.img_btns {
    position: absolute;
    bottom: 40%;
    display: flex;
    gap: 56.25rem;
}

.img_btns .btn {
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    border: 0.125rem solid var(--orange_color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
} 

.img_btns .btn:active {
    background: var(--white_color);
}

.img_btns .btn:hover {
    border: 0.125rem solid var(--orange_dark_color);
}

.img_btns .btn i {
    font-size: 2.5rem;
    color: var(--orange_color);
}

.img_btns .btn:hover i{
    color: var(--orange_dark_color);
}