/* for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Prata", serif;
    background-color: #181818;
    color: white;
    background-image: url('Images/second-page-bg.png'); 
    background-size: contain;
    background-size: 65%; 
    background-position: 50% -15%;

    background-repeat: no-repeat; 
   
}

/* Common styling for images */
img {
    position: absolute; /* Allows placement at specific positions */
    height: 33.33vh; /* 1/3 of screen height */
}

/* Positioning each image */
.top-left-shape { /* Top-left corner */
    top: 0;
    left: 0;
}

.top-right-shape { /* Top-right corner */
    top: 0;
    right: 0;
}

.bot-left-shape { /* Bottom-left corner */
    bottom: 0;
    left: 0;
}

.bot-right-shape { /* Bottom-right corner */
    bottom: 0;
    right: 0;
}
/* Styling for the middle image */
/* Centering the SVG container */
/* SVG container adjustments */
.svg-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Correct centering */
    width: 600px; /* Increased size for padding */
    height: 550px; /* Increased size for padding */
    margin: 0 auto; /* Center the container horizontally */
    padding: 30px; /* Space between SVG and edges */
    box-sizing: border-box; /* Includes padding in width/height */
}

/* Ensure the middle image is centered properly */
.middle-image {
    width: auto;
    height: auto;
    max-width: 500px; /* Adjust to fit nicely within the new container */
    max-height: 450px; /* Adjust to fit nicely within the new container */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}


/* SVG adjustments */
svg {
    position: relative;
    width: calc(100% - 60px); /* Matches the padding of the container */
    height: calc(100% - 60px); /* Matches the padding of the container */
    z-index: 2;
    overflow: visible;
    left: 10px;
    top: -40px;
    pointer-events: none;
}

/* Text inside the SVG */
text {
    font-size: 20px;
    fill: white;
    font-family: 'Prata', serif;
    letter-spacing: 15px; /* Adjust letter-spacing */
}
/* Default positioning */
.bottom-vector {
    position: absolute;  
    left: 40%;
    top: 78%;  /* Default top value for all screen sizes */
    width: 220px;
    height: auto;
    z-index: 0; 
}
/* Screen size for Mac */
@media screen and (min-height: 750px) and (max-height: 850px) {
    .bottom-vector {
        top: 76% !important;  /* Adjust top for this range */
        left: 40% !important; 
    }
}
/* Screen size for full-screen laptop */
@media screen and (min-width: 1300px) and (max-width: 1400px) {
    .bottom-vector {
        top: 78vh !important;  
        left: 40.5% !important;  
    }
    .top-right-img{
        top: 11% !important;
        left: 84% !important;
    }
    .bottom-left-img{
        top: 83.5% !important;     
        left: 6.5% !important;
    }
   
}



/* Screen size for laptop without full screen */
@media screen and (min-height: 550px) and (max-height: 700px) {
    .bottom-vector {
        top: 83.5% !important;  /* Adjust top for this screen range */
        left: 40.5% !important; 
    }
    .bottom-text {
        top:91vh !important;
    }
    .top-right-img{
        top: 9% !important;
        left: 86% !important;
    }
    .bottom-left-img{
        top: 82% !important;     
        left: 6% !important;
    }
    .bottom-right-img{
        left: 96% !important;
        top: 78% !important;
    }
    .top-left-img{
        top: 9% !important;
        left: 6% !important;
    }
}

.top-text {
    position: absolute; 
    top: 5vh; 
    left: 50%; 
    transform: translateX(-50%);
    width: 25.5vw; 
    font-size: 10px; 
    text-align: center; 
    color: white;
}

.right-text{
    position: absolute; 
    width: 19.2vw;
    top: 50%;
    transform: translateY(-50%);
    left: 76vw;
    font-size: 10px; 
    text-align: center; 
    color: white;
}
.bottom-text {
    position: absolute; 
    top: 86vh; 
    left: 50%; 
    transform: translateX(-50%);
    width: 23.7vw; 
    font-size: 10px; 
    text-align: center; 
    color: white;
}
.left-text{
    position: absolute; 
    width: 19.2vw;
    top: 50%;
    transform: translateY(-50%);
    left: 4.7vw;
    font-size: 10px; 
    text-align: center; 
    color: white;
}
.top-left-img{
    top: 12%;
    width: 100px;
    height: auto;
    left: 7%;
    pointer-events: none;
}
.top-right-img{
    width: 150px;
    left: 85%;
    top: 12%;
    height: auto;
    pointer-events: none;
}
.bottom-left-img{
    top: 85%;
    width: 119px;
    height: auto;
    left: 5%;
    transform: translateX(-50%);
    pointer-events: none;
}
.bottom-right-img{
    width: 100px;
    left: 95%;
    transform: translateX(-50%);
    top: 80%;
    height: auto;
    pointer-events: none;
}
/* Anim images hidden by default */
.anim-img {
    position: absolute;
    height: 33.33vh; /* Matching size with corner images */
    opacity: 0; /* Hidden initially */
    transform: scale(0); /* Start with a small size */
    transform-origin: center; /* Default, will change per corner */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth scaling and fade-in */
    z-index: 4;
}


.top-left-anim {
    top: 0;
    left: 0;
    transform-origin: top left; /* Scale from top-left */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.top-right-anim {
    top: 0;
    right: 0;
    transform-origin: top right; /* Scale from top-right */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.bottom-left-anim {
    bottom: 0;
    left: 0;
    transform-origin: bottom left; /* Scale from bottom-left */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.bottom-right-anim {
    bottom: 0;
    right: 0;
    transform-origin: bottom right; /* Scale from bottom-right */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.top-text:hover{
    .top-left-anim{
        display: block;
    }
}