body {
    background-color: black; /* Set page background to black */
    font-family: "Playfair Display", serif; /* Use Playfair Display font */
}
main, section, div, img, button{
    position: absolute; /* Position key elements for precise layout control */
}
main{
    width: 2250px; /* Set fixed width to contain all content */
    height: 1500px; /* Set fixed height to contain all content */
    background-color: black; /* White background for main content area */
    left: 50%; /* Center horizontally */
    top: 50%; /* Center vertically */
    transform: translate(-50%, -50%); /* Offset to center */
    overflow: hidden; /* Hide overflowing content for better animation */
}
#bg{
    width: 100%; /* Full width of main */
    height: 100%; /* Full height of main */
    object-fit: cover; /* Cover the entire area without distortion */
}
#logo{
    position: absolute; /* Position logo absolutely */
    width: 10rem; /* Fixed width for logo */
    height: auto; /* Height adjusts to maintain aspect ratio */
    left: 50%; /* Position logo from the left edge */
    top: 10rem; /* Position logo from the top edge */
    transform: translateX(-50%);
}
#title{
    position: absolute; /* Position title absolutely */
    width: 30rem; /* Full width of main */
    height: auto; /* Height adjusts to content */
    top: 20rem; /* Position title from the top edge */
    left: 50%;
    line-height: 9rem;
    font-size: 141px; /* Large font size for title */
    font-weight: 700; /* Bold font weight for prominence */
    color: black; /* White color for contrast */
    transform: translateX(-50%)
}
.color{
    color: #009cff; /* Blue color for emphasis */
}
#sub_title{
    position: absolute; /* Position sub-title absolutely */
    width: 57rem; /* Full width of main */
    height: auto; /* Height adjusts to content */
    top: 43rem; /* Position sub-title from the top edge */
    left: 50%;
    font-size: 60px; /* Large font size for sub-title */
    font-weight: 400; /* Bold font weight for prominence */
    color: #063160; /* White color for contrast */
    transform: translateX(-50%);
}
#start-btn{
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    font-size: 60px; /* Large font size */
    font-weight: 400; /* Bold font */
    padding-top: 854px;
    cursor: pointer; /* Pointer cursor on hover */
    color: #0075bf; /* Blue text color */
}
#hand{
    position: absolute; /* Position hand image absolutely */
    width: 8rem; /* Fixed width for hand image */
    height: auto; /* Height adjusts to maintain aspect ratio */
    left: 50%; /* Position hand from the left edge */
    top: 57rem; /* Position hand from the top edge */
    transform: translateX(-50%);
}

/* Ripple circles animation */
.ripple {
    position: absolute;
    width: 9rem;
    height: 9rem;
    border: 3px solid rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    left: 50%;
    top: 61rem;
    margin-left: -4rem;
    margin-top: -4rem;
    z-index: 5;
    pointer-events: none;
}

#bg_screen1{
    width: 100%; /* Full width of main */
    height: 100%; /* Full height of main */
     /* Cover the entire area without distortion */
    object-fit: cover;
}
#screen1 {
    display: none; /* Initially hidden */
}
#btn1{
        height: 23rem;
        left: 62rem;
        top: 9rem;
        cursor: pointer;
}
#btn2{
        height: 23rem;
        left: 36rem;
        top: 52rem;
        cursor: pointer;
}
#btn3{
        height: 23rem;
        left: 92rem;
        top: 52rem;
        cursor: pointer;
}
#screen1_txt1{
    position: absolute; /* Position text absolutely */
    width: 34rem; /* Full width of main */
    height: auto; /* Height adjusts to content */
    top: 32rem; /* Position text from the top edge */
    left: 7rem;
    font-size: 93px; /* Large font size for text */
    font-weight: 600; /* Semi-bold font weight for readability */
    color: black; /* White color for contrast */
}
#screen1_txt2{
    position: absolute; /* Position text absolutely */
    width: 34rem; /* Full width of main */
    height: auto; /* Height adjusts to content */
    top: 49rem; /* Position text from the top edge */
    left: 7rem;
    font-size: 36px; /* Large font size for text */
    font-weight: 600; /* Semi-bold font weight for readability */
    color: black; /* White color for contrast */
}
#screen1_txt3{
    position: absolute; /* Position text absolutely */
    width: 34rem; /* Full width of main */
    height: auto; /* Height adjusts to content */
    top: 28rem; /* Position text from the top edge */
    left: 6rem;
    font-size: 48px; /* Large font size for text */
    font-weight: 600; /* Semi-bold font weight for readability */
    color: black; /* White color for contrast */
}
#screen1_img1{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 60rem; /* Position image from the top edge */
    left: 6rem;
}
#screen1_img2{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 9rem; /* Position image from the top edge */
    left: 112rem;
}#screen1_img3{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 20rem; /* Position image from the top edge */
    left: 112rem;
}
#screen1_img4{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 32rem; /* Position image from the top edge */
    left: 113rem;
}
#instruction{
    position: absolute; /* Position instruction text absolutely */
    width: auto; /* Full width of main */
    height: auto; /* Height adjusts to content */
    bottom: 3rem; /* Position instruction from the top edge */
    left: 53%;
    font-size: 38px; /* Large font size for instruction */
    font-weight: 400; /* Semi-bold font weight for readability */
    color: black; /* White color for contrast */
    transform: translateX(-50%);
}
.instruction{
    position: absolute; /* Position instruction text absolutely */
    width: auto; /* Full width of main */
    height: auto; /* Height adjusts to content */
    bottom: 13rem; /* Position instruction from the top edge */
    left: 53%;
    font-size: 38px; /* Large font size for instruction */
    font-weight: 400; /* Semi-bold font weight for readability */
    color: black; /* White color for contrast */
    transform: translateX(-50%);
}
#screeen2_img0{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 9rem; /* Position image from the top edge */
    left: 112rem;
}
#screen2_img1{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 20rem; /* Position image from the top edge */
    left: 22rem;
}
#screen2_img1_back{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 20rem; /* Position image from the top edge */
    left: 22rem;
    display: none;
    opacity: 0;
}
#screen2_img2{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 20rem; /* Position image from the top edge */
    left: 62rem;
}
#screen2_img2_back{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 20rem; /* Position image from the top edge */
    left: 62rem;
    display: none;
    opacity: 0;
}
#screen2_img3{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 20rem; /* Position image from the top edge */
    left: 99rem;
}
#screen2_img3_back{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 20rem; /* Position image from the top edge */
    left: 99rem;
    display: none;
    opacity: 0;
}
#screen2_img4{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 50rem; /* Position image from the top edge */
    left: 44rem;
}
#screen2_img4_back{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 50rem; /* Position image from the top edge */
    left: 44rem;
    display: none;
    opacity: 0;
}
#screen2_img5{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 50rem; /* Position image from the top edge */
    left: 81rem;
}
#screen2_img5_back{
    position: absolute; /* Position image absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 50rem; /* Position image from the top edge */
    left: 81rem;
    display: none;
    opacity: 0;
}
.left{
    position: absolute; /* Position left element absolutely */
    width: 25rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 20rem; /* Position left element from the top edge */
    left: 11rem;
}
.middle{
    position: absolute; /* Position middle element absolutely */
    width: 570px; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 20rem; /* Position middle element from the top edge */
    left: 50%;
    transform: translateX(-50%);
}
#screen4_txt1{
    position: absolute; /* Position text absolutely */
    width: 34rem; /* Full width of main */
    height: auto; /* Height adjusts to content */
    top: 26rem; /* Position text from the top edge */
    left: 14rem;
    font-size: 60px; /* Large font size for text */
    font-weight: 600; /* Semi-bold font weight for readability */
    color: black; /* White color for contrast */
}
#screen4_front_btn{
    position: absolute; /* Position button absolutely */
    width: 12rem; /* Fixed width for button */
    height: 6rem; /* Fixed height for button */
    top: 37rem; /* Position button from the top edge */
    left: 20rem;
    font-size: 24px; /* Large font size for button text */
    font-weight: 600; /* Semi-bold font weight for readability */
    color: black; /* White text color for contrast */
    background-color: rgb(184, 216, 250); /* Blue background color for button */
    border: 1px solid black; /* Add border with same color as background */
    border-radius: 7rem;
    cursor: pointer; /* Pointer cursor on hover */
}
#screen4_back_btn{
    position: absolute; /* Position button absolutely */
    width: 12rem; /* Fixed width for button */
    height: 6rem; /* Fixed height for button */
    top: 47rem; /* Position button from the top edge */
    left: 20rem;
    font-size: 24px; /* Large font size for button text */
    font-weight: 600; /* Semi-bold font weight for readability */
    color: black; /* White text color for contrast */
    background-color: rgb(184, 216, 250); /* Blue background color for button */
    border: 1px solid black; /* Add border with same color as background */
    border-radius: 7rem;
    cursor: pointer; /* Pointer cursor on hover */
}

/* Screen4 image styling */
#screen4_front_img {
    display: block;
}

#screen4_back_img {
    display: none;
}

/* Active button states */
#screen4_front_btn.active {
    background-color: rgb(100, 180, 255);
    font-weight: 700;
}

#screen4_back_btn.active {
    background-color: rgb(100, 180, 255);
    font-weight: 700;
}
#screen4_txt2{
    position: absolute; /* Position text absolutely */
    width: 34rem; /* Full width of main */
    height: auto; /* Height adjusts to content */
    top: 57rem; /* Position text from the top edge */
    left: 33rem;
    transform: translateX(-50%);
    font-size: 60px; /* Large font size for text */
    font-weight: 600; /* Semi-bold font weight for readability */
    color: black; /* White color for contrast */
}
#screen4_txt3{
    position: absolute; /* Position text absolutely */
    width: 48rem; /* Full width of main */
    height: auto; /* Height adjusts to content */
    top: -6rem; /* Position text from the top edge */
    left: 33rem;
    transform: translateX(-50%);
    font-size: 31px; /* Large font size for text */
    font-weight: 400; /* Semi-bold font weight for readability */
    color: black; /* White color for contrast */
}
.head{
    position: absolute; /* Position button absolutely */
    width: 11rem; /* Fixed width for button */
    height: 12rem; /* Fixed height for button */
    top: 0.5rem; /* Position button from the top edge */
    left: 12.5rem;
    background-color: transparent; /* Transparent background for invisible button */
    border: none; /* Remove border for invisible button */
    cursor: pointer; /* Pointer cursor on hover */
}
.chest{
    position: absolute; /* Position button absolutely */
    width: 16rem; /* Fixed width for button */
    height: 14rem; /* Fixed height for button */
    top: 14.5rem; /* Position button from the top edge */
    left: 9.5rem;
    background-color: transparent; /* Transparent background for invisible button */
    border: none; /* Remove border for invisible button */
    cursor: pointer; /* Pointer cursor on hover */
}
.abdomen{
    position: absolute; /* Position button absolutely */
    width: 16rem; /* Fixed width for button */
    height: 13rem; /* Fixed height for button */
    top: 31.5rem; /* Position button from the top edge */
    left: 10rem;
    background-color: transparent; /* Transparent background for invisible button */
    border: none; /* Remove border for invisible button */
    cursor: pointer; /* Pointer cursor on hover */
}
.lefthand{
    position: absolute; /* Position button absolutely */
    width: 4rem; /* Fixed width for button */
    height: 17rem; /* Fixed height for button */
    top: 26.5rem; /* Position button from the top edge */
    left: 3.5rem;
    background-color: transparent; /* Transparent background for invisible button */
    border: none; /* Remove border for invisible button */
    cursor: pointer; /* Pointer cursor on hover */
}
.righthand{
    position: absolute; /* Position button absolutely */
    width: 4rem; /* Fixed width for button */
    height: 20rem; /* Fixed height for button */
    top: 25.5rem; /* Position button from the top edge */
    left: 27.5rem;
    background-color: transparent; /* Transparent background for invisible button */
    border: none; /* Remove border for invisible button */
    cursor: pointer; /* Pointer cursor on hover */
}
.rightleg{
    position: absolute; /* Position button absolutely */
    width: 7rem; /* Fixed width for button */
    height: 18rem; /* Fixed height for button */
    top: 45.5rem; /* Position button from the top edge */
    left: 18.5rem;
    background-color: transparent; /* Transparent background for invisible button */
    border: none; /* Remove border for invisible button */
    cursor: pointer; /* Pointer cursor on hover */
}
.leftleg{
    position: absolute; /* Position button absolutely */
    width: 7rem; /* Fixed width for button */
    height: 19rem; /* Fixed height for button */
    top: 45.5rem; /* Position button from the top edge */
    left: 9.5rem;
    background-color: transparent; /* Transparent background for invisible button */
    border: none; /* Remove border for invisible button */
    cursor: pointer; /* Pointer cursor on hover */
}
.upperback{
    position: absolute; /* Position button absolutely */
    width: 14rem; /* Fixed width for button */
    height: 14rem; /* Fixed height for button */
    top: 14.5rem; /* Position button from the top edge */
    left: 11.5rem;
    background-color: transparent; /* Transparent background for invisible button */
    border: none; /* Remove border for invisible button */
    cursor: pointer; /* Pointer cursor on hover */
    display: none; /* Hide by default */
}
.lowerback{
    position: absolute; /* Position button absolutely */
    width: 12rem; /* Fixed width for button */
    height: 11rem; /* Fixed height for button */
    top: 30.5rem; /* Position button from the top edge */
    left: 11.5rem;
    background-color: transparent; /* Transparent background for invisible button */
    border: none; /* Remove border for invisible button */
    cursor: pointer; /* Pointer cursor on hover */
    display: none; /* Hide by default */
}
.popup{
    position: absolute; /* Position image absolutely */
    width: 34rem; /* Full width of main */
    height: auto; /* Height adjusts to maintain aspect ratio */
    top: 17.5rem; /* Position image from the top edge */
    left: 99.5rem;
    display: none; /* Hide popups by default */
    opacity: 1; /* Full opacity when visible */
}
.screen4_bg{
    width: 100%; /* Full width of main */
    height: 100%; /* Full height of main */
     /* Cover the entire area without distortion */
    object-fit: cover;
}
.sub-title2{
    position: absolute;
    left: 53rem; /* Position sub-title horizontally */
    top: 17rem; /* Position sub-title vertically */
    font-size: 60px; /* Large font size */
    font-weight: 700; /* Bold font weight for prominence */
    color: black; /* Blue color for branding */
    /* z-index: 1; */
}
#screen3_txt{
    position: absolute;
    left: 50%; /* Position sub-title horizontally */
    transform: translateX(-50%);
    top: 27rem; /* Position sub-title vertically */
    font-size: 42px; /* Large font size */
    font-weight: 700; /* Bold font weight for prominence */
    color: black; /* Blue color for branding */
    /* z-index: 1; */
}
#nopain{
    position: absolute; /* Position image absolutely */
    width: 12rem; /* Fixed width for image */
    height: auto; /* Height adjusts to maintain aspect ratio */
    bottom: 35rem; /* Position image from the top edge */
    left: 19rem;
    cursor: pointer; /* Pointer cursor on hover */
}
#mild{
    position: absolute; /* Position image absolutely */
    width: 14rem; /* Fixed width for image */
    height: auto; /* Height adjusts to maintain aspect ratio */
    bottom: 35rem; /* Position image from the top edge */
    left: 33rem;
    cursor: pointer; /* Pointer cursor on hover */
}
#moderate{
    position: absolute; /* Position image absolutely */
    width: 16rem; /* Fixed width for image */
    height: auto; /* Height adjusts to maintain aspect ratio */
    bottom: 35rem; /* Position image from the top edge */
    left: 48rem;
    cursor: pointer; /* Pointer cursor on hover */
}
#strong{
    position: absolute; /* Position image absolutely */
    width: 18rem; /* Fixed width for image */
    height: auto; /* Height adjusts to maintain aspect ratio */
    bottom: 35rem; /* Position image from the top edge */
    left: 65rem;
    cursor: pointer; /* Pointer cursor on hover */
}
#severe{
    position: absolute; /* Position image absolutely */
    width: 20rem; /* Fixed width for image */
    height: auto; /* Height adjusts to maintain aspect ratio */
    bottom: 35rem; /* Position image from the top edge */
    left: 84rem;
    cursor: pointer; /* Pointer cursor on hover */
}
#worst{
    position: absolute; /* Position image absolutely */
    width: 22rem; /* Fixed width for image */
    height: auto; /* Height adjusts to maintain aspect ratio */
    bottom: 35rem; /* Position image from the top edge */
    left: 106rem;
    cursor: pointer; /* Pointer cursor on hover */
}

/* Pain Scale Popup Text Divs - Positioned Below Images */
.popup1_screen3,
.popup2_screen3,
.popup3_screen3,
.popup4_screen3,
.popup5_screen3,
.popup6_screen3{
    display: none;
    opacity: 0;
}

.popup1_screen3{
    position: absolute;
    bottom: 25rem;
    left: 19rem;
    width: 12rem;
    text-align: center;
    color: white;
}

.popup2_screen3{
    position: absolute;
    bottom: 25rem;
    left: 33rem;
    width: 14rem;
    text-align: center;
    color: white;
}

.popup3_screen3{
    position: absolute;
    bottom: 25rem;
    left: 48rem;
    width: 16rem;
    text-align: center;
    color: white;
}

.popup4_screen3{
    position: absolute;
    bottom: 25rem;
    left: 65rem;
    width: 18rem;
    text-align: center;
    color: white;
}

.popup5_screen3{
    position: absolute;
    bottom: 25rem;
    left: 84rem;
    width: 20rem;
    text-align: center;
    color: white;
}

.popup6_screen3{
    position: absolute;
    bottom: 25rem;
    left: 106rem;
    width: 22rem;
    text-align: center;
    color: white;
}
.popup_worst{
    position: absolute;
    bottom: 15rem;
    left: 50%;
    transform: translateX(-50%);
    /* width: 22rem; */
    text-align: center;
    color: #a70e0e;
    font-size: 3rem;
    display: none;
    opacity: 0;
}
.popup_worst2{
    position: absolute;
    bottom: 9rem;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    font-size: 3rem;
    text-align: center;
    color: #a70e0e;
    display: none;
    opacity: 0;
}
.colour_black{
    color: black;
}
.color_blue{
    color: #075b8b;
}
.colour_red{
    color: #a70e0e;
}








































#top_lines{
    width: 96%; /* Full width of main */
    left: 3rem;
    height: 100%; /* Full height of main */
     /* Cover the entire area without distortion */
}
.sub-title{
    left: 53rem; /* Position sub-title horizontally */
    top: 9rem; /* Position sub-title vertically */
    letter-spacing: 6px;
    font-size: 60px; /* Large font size */
    font-weight: 700; /* Bold font weight for prominence */
    color: white; /* Blue color for branding */
    /* z-index: 1; */
}
section{
    width: 100%; /* Full width of main */
    height: 100%; /* Full height of main */
    display: none; /* Hide sections by default */
    z-index: 10; /* Ensure sections appear above other elements */
    perspective: 1000px; /* Enable 3D perspective for child animations */
    transform-style: preserve-3d; /* Preserve 3D space for children */
}
.frame{
    left: 730px; /* Position frame horizontally */
    top: 160px; /* Position frame vertically */
    display: none; /* Hide frame initially */
}
#frame1, #title-txt{
    display: block; /* Show frame1 and title text */
}
#main-title{
    width: 1100px; /* Width adjusts to content */
    left: 100px; /* Position main title horizontally */
    top: 50px; /* Position main title vertically */
    font-size: 150px; /* Very large font for main title */
    font-weight: 800; /* Extra bold font weight */
    color: #0075bf; /* Blue color matching branding */
}
#right_icon{
    position: absolute;
    width: 18rem; /* Fixed width for right icon */
    height: auto; /* Height adjusts to maintain aspect ratio */
    right: 11rem; /* Position right icon from the right edge */
    top: 29rem; /* Position right icon vertically */
}
#left_icon{
    position: absolute; /* Absolutely positioned */
    width: 18rem; /* Fixed width for left icon */
    height: auto; /* Height adjusts to maintain aspect ratio */
    left: 10rem; /* Position left icon from the left edge */
    top: 29rem; /* Position left icon vertically */
}
#front_title{
    position: absolute; /* Absolutely positioned */
    left: 71rem; /* Center horizontally */
    top: 12rem; /* Center vertically */
    transform: translate(-50%, -50%); /* Offset to center */
    font-size: 62px; /* Very large font size */
    font-weight: 600; /* Extra bold font weight */
    color: white; /* White color for contrast */
    letter-spacing: 0.7rem; /* Tracking for letter spacing */
     /* Ensure title is above other elements */
    text-wrap: nowrap;
}
.intro-container{
    left: 495px; /* Position intro container horizontally */
    top: 30rem; /* Position intro container vertically */
    width: 1004px; /* Fixed width for content */
    height: 423px; /* Fixed height for content */
    /* padding: 40px; */ /* Padding inside container */
}
.intro-container *{
    position: static;
}
#bot_icon{
    position: absolute; /* Absolutely positioned */
    width: 38rem; /* Fixed width for bottom icon */
    height: auto; /* Height adjusts to maintain aspect ratio */
    left: 50%; /* Center horizontally */
    bottom: 19rem; /* Position bottom icon vertically */
    transform: translateX(-50%); /* Offset to center horizontally */
}
.time_bg{
    width: 34rem; /* Full width of timeline section */
    height: auto; /* Height adjusts to maintain aspect ratio */
}
#time_bg1{
    z-index: 1; /* Layer behind timeline markers */
    left: 23rem; /* Align to left edge */
    top: 30rem; /* Align to top edge */
}
#time_bg2{
    z-index: 1; /* Layer behind timeline markers */
    left: 86rem; /* Align to left edge */
    top: 27rem; /* Align to top edge */
}
#time_bg3{
    z-index: 1; /* Layer behind timeline markers */
    left: 0; /* Align to left edge */
    top: 0; /* Align to top edge */
}
#time_bg4{
    z-index: 1; /* Layer behind timeline markers */
    left: 40rem; /* Align to left edge */
    top: 63rem; /* Align to top edge */
}
#time_bg5{
    z-index: 1; /* Layer behind timeline markers */
    left: 78rem; /* Align to left edge */
    top: 63.5rem; /* Align to top edge */
}
#time_bg3{
    z-index: 1; /* Layer behind timeline markers */
    left: 65rem; /* Align to left edge */
    top: 43rem; /* Align to top edge */
}
.time_txt{
    position: absolute; /* Position time text absolutely */
    width: 34rem; /* Full width of timeline section */
    height: auto; /* Height adjusts to maintain aspect ratio */
    color: white; /* White text color for contrast */
    font-size: 28px; /* Large font size for readability */
    font-weight: 600; /* Semi-bold font weight */
    text-align: center; /* Center text within its container */
    width: 26rem;
}
#time_txt1{
    left: 31rem; /* Align to left edge */
    top: 38rem; /* Align to top edge */
    /* font-size: 3rem; */
}
#time_txt2{
    left: 85.6rem; /* Align to left edge */
    top: 28.8rem;
}
#time_txt3{
    left: 71rem; /* Align to left edge */
    top: 44.5rem; /* Align to top edge */
}
#time_txt4{
    left: 48rem; /* Align to left edge */
    top: 64rem; /* Align to top edge */
}
#time_txt5{
    left: 77rem; /* Align to left edge */
    top: 64.2rem; /* Align to top edge */
}
.year{
    position: absolute; /* Position year absolutely */
    width: 34rem; /* Full width of timeline section */
    height: auto; /* Height adjusts to maintain aspect ratio */
    color: #590000; /* White text color for contrast */
    font-size: 39px; /* Large font size for readability */
    font-weight: 600; /* Semi-bold font weight */
    text-align: center; /* Center text within its container */
}
#year1{
    left: 11rem; /* Align to left edge */
    top: 33.5rem; /* Align to top edge */
}
#year2{
    left: 98rem; /* Align to left edge */
    top: 32.5rem;
}
#year3{
    left: 53rem; /* Align to left edge */
    top: 48.3rem; /* Align to top edge */
}
#year4{
    left: 28.2rem; /* Align to left edge */
    top: 68.4rem; /* Align to top edge */
}
#year5{
    left: 89.8rem; /* Align to left edge */
    top: 69rem; /* Align to top edge */
}

/* Type of AI Section Styles (Screen 3) */
.type_bg{
    width: 34rem; /* Full width of type section */
    height: auto; /* Height adjusts to maintain aspect ratio */
}
#type_bg1{
    z-index: 1; /* Layer behind type markers */
    left: 32rem; /* Align to left edge */
    top: 30rem; /* Align to top edge */
}
#type_bg2{
    z-index: 1; /* Layer behind type markers */
    left: 23rem; /* Align to left edge */
    top: 38rem; /* Align to top edge */
}
#type_bg3{
    z-index: 1; /* Layer behind type markers */
    left: 44rem; /* Align to left edge */
    top: 45rem; /* Align to top edge */
}
#type_bg4{
    z-index: 1; /* Layer behind type markers */
    left: 54rem; /* Align to left edge */
    top: 37rem; /* Align to top edge */
}
#type_bg5{
    z-index: 1; /* Layer behind type markers */
    left: 69rem; /* Align to left edge */
    top: 29.5rem; /* Align to top edge */
}
#type_bg6{
    z-index: 1; /* Layer behind type markers */
    left: 80rem; /* Align to left edge */
    top: 45rem; /* Align to top edge */
}
.type_txt{
    position: absolute; /* Position type text absolutely */
    width: 34rem; /* Full width of type section */
    height: auto; /* Height adjusts to maintain aspect ratio */
    color: white; /* White text color for contrast */
    font-size: 24px; /* Large font size for readability */
    font-weight: 600; /* Semi-bold font weight */
    text-align: center; /* Center text within its container */
}
#type_txt1{
    left: 37rem; /* Align to left edge */
    top: 32rem; /* Align to top edge */
}
#type_txt2{
    left: 27.6rem; /* Align to left edge */
    top: 45rem;
}
#type_txt3{
    left: 40rem; /* Align to left edge */
    top: 52rem; /* Align to top edge */
}
#type_txt4{
    left: 50rem; /* Align to left edge */
    top: 39rem; /* Align to top edge */
}
#type_txt5{
    left: 65rem; /* Align to left edge */
    top: 31.5rem; /* Align to top edge */
}
#type_txt6{
    left: 81rem; /* Align to left edge */
    top: 51.3rem; /* Align to top edge */
    width: 22rem;
}
.num{
    position: absolute; /* Position number absolutely */
    width: auto; /* Full width of type section */
    height: auto; /* Height adjusts to maintain aspect ratio */
    color: #590000; /* Dark red text color for contrast */
    font-size: 74px; /* Large font size for readability */
    font-weight: 600; /* Semi-bold font weight */
    text-align: center; /* Center text within its container */
}
#num1{
    left: 34.5rem; /* Align to left edge */
    top: 32.5rem; /* Align to top edge */
}
#num2{
    left: 24.5rem; /* Align to left edge */
    top: 41rem;
}
#num3{
    left: 68.5rem; /* Align to left edge */
    top: 47.5rem; /* Align to top edge */
}
#num4{
    left: 79rem; /* Align to left edge */
    top: 41rem; /* Align to top edge */
}
#num5{
    left: 93.5rem; /* Align to left edge */
    top: 32rem; /* Align to top edge */
}
#num6{
    left: 104.6rem; /* Align to left edge */
    top: 47.5rem; /* Align to top edge */
}

#path{
    position: absolute; /* Position path absolutely */
    width: 133rem; /* Full width of timeline section */
    height: auto; /* Height adjusts to maintain aspect ratio */
    left: 6rem; /* Align to left edge */
    top: 34rem; /* Align to top edge */
}
#screen1_bodycopy{
    position: absolute;
    right: 32rem;
    top: 28rem;
    width: 34rem; /* Full width of intro container */
    height: auto; /* Height adjusts to maintain aspect ratio */
    margin-bottom: 30px; /* Space below body copy */
}
.history-txt{
    position: absolute;
    right: -15rem;
    top: -1rem;
    width: 34rem;
    height: auto;
    color: white; /* Blue text color */
    padding: 30px 40px; /* Padding inside text block */
    font-size: 23px; /* Medium font size for readability */
    text-align: justify; /* Justify text for neat alignment */
}
.learn-more-txt{
    margin-top: 60px; /* Space above this element */
    font-size: 38px; /* Large font size */
    font-weight: 700; /* Bold font weight */
    color: #0075bf; /* Blue color for emphasis */
}
button{
    background: none; /* Remove default button background */
    color: inherit; /* Inherit text color */
    border: none; /* Remove default border */
    font: inherit; /* Inherit font styles */
    outline: inherit; /* Inherit outline styles */
    cursor: pointer; /* Show pointer cursor on hover */
}
.to-screen-btn{
    position: absolute;
    width: 640px; /* Fixed width for button */
    height: 9rem; /* Fixed height for button */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically center content */
    padding: 0; /* Remove default padding */
    background-image: url(../img/SVG/btn_bg.svg);
    background-repeat: no-repeat; /* Prevent background from repeating */
    /* overflow: hidden; */ /* Hide overflowing content */
    left: 1rem;
    top: -2.6rem;
}
.to-screen-btn:nth-of-type(2){
    top: 8rem;
}
.to-screen-btn:nth-of-type(3){
    top: 18.3rem;
}
.to-screen-btn:nth-of-type(4){
    top: 10rem;
}
.to-screen-btn > div:first-child{
    padding: 30px; /* Padding inside first child */
    font-size: 33px; /* Large font size */
    color: #0075bf; /* Blue text color */
    font-weight: 600; /* Semi-bold font */
}
.to-screen-btn > div:last-child{
     /* Fixed width for icon or indicator */
      /* Match button height */
     /* Blue background */
     color: white; /* White text color */
     font-size: 2.5rem; /* Very large font size */
      /* Flexbox for centering */
      /* Center horizontally */
     flex-shrink: 0; /* Prevent shrinking */
}
.click-through{
    pointer-events: none; /* Disable pointer events for this element */
}

#back-btn{
    position: fixed; /* Fixed positioning */
    width: 100px; /* Fixed width */
    height: 130px; /* Fixed height */
    top: 50%; /* Vertically center */
    left: 0; /* Position on left side */
    transform: translateY(-50%); /* Offset for perfect vertical center */
    display: flex; /* Flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Vertically center content */
    z-index: 9999; /* Ensure button is above other elements */
    pointer-events: auto; /* Enable click events */
    touch-action: manipulation; /* Improve touch responsiveness */
    background: none;
    border: none;
    cursor: pointer;
}

#back-btn img {
    width: 70px;
    height: auto;
    max-height: 130px;
    object-fit: contain;
}
.image-content {
    position: relative; /* Relative positioning to contain absolute children */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    display: flex; /* Flexbox layout */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
}
.overlay_screen2{
    position: absolute; /* Position absolutely over parent */
    width: 1485px; /* Fixed width */
    height: auto; /* Height adjusts to content */
    top: 200px; /* Vertical position */
    left: 790px; /* Horizontal position */
    z-index: 0; /* Behind other elements */
}
.base_timeline{
    position: absolute; /* Absolute positioning */
    width: 100%; /* Full width */
    height: auto; /* Height adjusts to content */
    bottom: 0; /* Align to bottom */
    left: 0; /* Align to left */
    z-index: 2; /* Layer above some elements */
}
.markup{
    position: absolute; /* Positioned absolutely */
    z-index: 1; /* Layer below base_timeline */
}
.markup1{
    width: auto; /* Width adjusts automatically */
    height: 1270px; /* Fixed height */
    top: 370px; /* Vertical position */
    left: 205px; /* Horizontal position */
}
.markup2{
    width: auto; /* Width adjusts automatically */
    height: 1040px; /* Fixed height */
    top: 550px; /* Vertical position */
    left: 540px; /* Horizontal position */
}
.markup3{
    width: auto; /* Width adjusts automatically */
    height: 1040px; /* Fixed height */
    top: 740px; /* Vertical position */
    left: 890px; /* Horizontal position */
}
.markup4{
    width: auto; /* Width adjusts automatically */
    height: 1040px; /* Fixed height */
    top: 950px; /* Vertical position */
    left: 1229px; /* Horizontal position */
}
.markup5{
    width: auto; /* Width adjusts automatically */
    height: 1040px; /* Fixed height */
    top: 1141px; /* Vertical position */
    left: 1521px; /* Horizontal position */
}
.textbg{
    position: absolute; /* Absolutely positioned text background */
    width: 600px; /* Fixed width */
    height: auto; /* Height adjusts */
    z-index: 1; /* Layer below pins */
}
.textbg1_screen2{
    top: 31rem; /* Vertical position for screen 2 */
    left: 8.2rem; /* Horizontal position for screen 2 */
}
.textbg2_screen2{
    top: 42.75rem; /* Vertical position for screen 2 */
    left: 31.5rem; /* Horizontal position for screen 2 */
}
.textbg3_screen2{
    top: 54.45rem; /* Vertical position for screen 2 */
    left: 54.9rem; /* Horizontal position for screen 2, shifted left */
}
.textbg4_screen2{
    top: 66.22rem; /* Vertical position for screen 2 */
    left: 78.3rem; /* Horizontal position for screen 2 */
}
.textbg5_screen2{
    top: 77.9rem; /* Vertical position for screen 2 */
    left: 101.65rem; /* Horizontal position for screen 2 */
}
.pin{
    position: absolute; /* Absolutely positioned pins */
    width: 93px; /* Fixed width */
    height: auto; /* Height adjusts */
    z-index: 2; /* Layer above text backgrounds */
}
#pin1{
    top: 410px; /* Vertical position for pin 1 */
    left: 627px; /* Horizontal position for pin 1 */
}
#pin2{
    top: 520px; /* Vertical position for pin 2 */
    left: 1190px; /* Horizontal position for pin 2 */
}
#pin3{
    top: 699px; /* Vertical position for pin 3 */
    left: 750px; /* Horizontal position for pin 3 */
}
#pin4{
    top: 750px; /* Vertical position for pin 4 */
    left: 1340px; /* Horizontal position for pin 4 */
}
#pin5{
    top: 61em; /* Vertical position for pin 5 */
    left: 1530px; /* Horizontal position for pin 5 */
}
.textbg_screen3{
    position: absolute; /* Absolutely positioned text backgrounds on screen 3 */
    width: 447px; /* Fixed width */
    height: auto; /* Height adjusts */
}
.textbg1_screen3{
    width: 31rem;
    top: 31rem; /* Vertical position for screen 3 */
    left: 26rem; /* Horizontal position for screen 3 */
    z-index: 1; /* Layer below pins */
}
.textbg2_screen3{
    width: 30rem;
    top: 38rem; /* Vertical position for screen 3 */
    left: 62rem; /* Horizontal position for screen 3 */
    z-index: 1; /* Layer below pins */
}
.textbg3_screen3{
    width: 30rem;
    top: 49rem; /* Vertical position for screen 3 */
    left: 34rem; /* Horizontal position for screen 3, shifted left */
    z-index: 1; /* Layer below pins */
}
.textbg4_screen3{
    width: 33rem;
    top: 52rem; /* Vertical position for screen 3 */
    left: 69rem; /* Horizontal position for screen 3, shifted left */
    z-index: 1; /* Layer below pins */
}
.textbg5_screen3{
    width: 30rem;
    top: 66rem; /* Vertical position for screen 3 */
    left: 83rem; /* Horizontal position for screen 3 */
    z-index: 1; /* Layer below pins */
}
.aboutbg{
    position: absolute; /* Absolutely positioned about background */
    /* width: 706px; */ /* Fixed width */
    /* height: auto; */ /* Height adjusts */
    bottom: 99px; /* Positioned above bottom */
    left: 135px; /* Horizontal position */
    z-index: 6; /* Layer above base */
}
.conservationbg{
    position: absolute; /* Absolutely positioned conservation background */
    /* width: 956px; */ /* Fixed width */
    /* height: auto; */ /* Height adjusts */
    bottom: 167px; /* Positioned above bottom */
    left: 710px; /* Horizontal position */
    z-index: 4; /* Layer above aboutbg */
}
.communitybg{
    position: absolute; /* Absolutely positioned community background */
    /* width: auto; */ /* Width adjusts */
    /* height: 1044px; */ /* Fixed height */
    bottom: 142px; /* Positioned above bottom */
    left: 1283px; /* Horizontal position */
    z-index: 5; /* Layer above conservationbg */
}
.bird_overlay1{
    position: absolute; /* Absolutely positioned bird overlay */
    width: 872px; /* Fixed width */
    height: auto; /* Height adjusts */
    bottom: 141px; /* Positioned above bottom */
    left: 340px; /* Horizontal position */
    z-index: 6; /* Layer above communitybg */
}
.bird_overlay2{
    position: absolute; /* Absolutely positioned bird overlay */
    width: 499px; /* Fixed width */
    height: auto; /* Height adjusts */
    bottom: 73px; /* Positioned above bottom */
    left: 828px; /* Horizontal position */
    z-index: 5; /* Layer below bird_overlay1 */
}
.park1{
    position: absolute; /* Absolutely positioned park label */
    width: 36rem;
    top: 32rem; /* Vertical position */
    left: 8.15rem; /* Horizontal position */
    font-size: 33px; /* Large font size */
    font-weight: 700; /* Bold font */
    color: #0075bf; /* Blue color */
    text-align: center; /* Center text */
    z-index: 2; /* Layer above base */
}
.park2{
    width: 36rem;
    position: absolute; /* Absolutely positioned park label */
    top: 43.4rem; /* Vertical position */
    left: 31.7rem; /* Horizontal position */
    font-size: 33px; /* Large font size */
    font-weight: 700; /* Bold font */
    color: #0075bf; /* Blue color */
    text-align: center; /* Center text */
    z-index: 2; /* Layer above base */
}
.park3{
    width: 36rem;
    position: absolute; /* Absolutely positioned park label */
    top: 55.2rem; /* Vertical position */
    left: 55.1rem; /* Horizontal position */
    font-size: 33px; /* Large font size */
    font-weight: 700; /* Bold font */
    color: #0075bf; /* Blue color */
    text-align: center; /* Center text */
    z-index: 2; /* Layer above base */
}
.park4{
    width: 36rem;
    position: absolute; /* Absolutely positioned park label */
    top: 66.9rem; /* Vertical position */
    left: 78.5rem; /* Horizontal position */
    font-size: 33px; /* Large font size */
    font-weight: 700; /* Bold font */
    color: #0075bf; /* Blue color */
    text-align: center; /* Center text */
    z-index: 2; /* Layer above base */
}
.park5{
    width: 37rem;
    position: absolute; /* Absolutely positioned park label */
    top: 78.6rem; /* Vertical position */
    left: 101.7rem; /* Horizontal position */
    font-size: 33px; /* Large font size */
    font-weight: 700; /* Bold font */
    color: #0075bf; /* Blue color */
    text-align: center; /* Center text */
     /* Layer above base */
    z-index: 2;
}
.screen3_park1{
    position: absolute; /* Absolutely positioned screen 3 park label */
    top: 527px; /* Vertical position */
    left: 474px; /* Horizontal position */
    font-size: 28px; /* Slightly smaller font */
    font-weight: 700; /* Bold font */
    color: #0075bf; /* Blue color */
    text-align: center; /* Center text */
    z-index: 2; /* Layer above base */
}
.screen3_park2{
    position: absolute; /* Absolutely positioned screen 3 park label */
    top: 639px; /* Vertical position */
    left: 1052px; /* Horizontal position */
    font-size: 29px; /* Slightly smaller font */
    font-weight: 700; /* Bold font */
    color: #0075bf; /* Blue color */
    text-align: center; /* Center text */
    z-index: 2; /* Layer above base */
}
.screen3_park3{
    position: absolute; /* Absolutely positioned screen 3 park label */
    top: 811px; /* Vertical position */
    left: 607px; /* Horizontal position */
    font-size: 29px; /* Slightly smaller font */
    font-weight: 700; /* Bold font */
    color: #0075bf; /* Blue color */
    text-align: center; /* Center text */
    z-index: 2; /* Layer above base */
}
.screen3_park4{
    position: absolute; /* Absolutely positioned screen 3 park label */
    top: 866px; /* Vertical position */
    left: 1169px; /* Horizontal position */
    font-size: 28px; /* Slightly smaller font */
    font-weight: 700; /* Bold font */
    color: #0075bf; /* Blue color */
    text-align: center; /* Center text */
    z-index: 2; /* Layer above base */
}
.screen3_park5{
    position: absolute; /* Absolutely positioned screen 3 park label */
    top: 1084px; /* Vertical position */
    left: 1391px; /* Horizontal position */
    font-size: 29px; /* Slightly smaller font */
    font-weight: 700; /* Bold font */
    color: #0075bf; /* Blue color */
    text-align: center; /* Center text */
    z-index: 2; /* Layer above base */
}
.textbg, .textbg_screen3 {
    position: absolute; /* Position relative for stacking context */
    z-index: 2; /* Layer above base elements */
    cursor: pointer; /* Indicate clickable areas */
}

h1 {
    pointer-events: none; /* Disable pointer events on main headers */
    z-index: 1; /* Layer below interactive elements */
}



.popup-content {
    position: absolute; /* Absolute positioning within popup */
    width: 100%; /* Responsive width */
    max-width: 574px; /* Max width for larger screens */
    margin: 1% auto; /* Center horizontally with margin */
    height: 60rem; /* Height adjusts to content */
     /* Limit height to viewport */
    /* border-radius: 16px; */ /* Rounded corners for popup */
    /* box-shadow: 0 8px 40px rgba(0,117,191,0.25); */ /* Subtle blue shadow */
    /* display: grid; */ /* Grid layout for split view */
    /* grid-template-columns: 1fr 1fr; */ /* Two equal columns */
    /* gap: 40px; */ /* Space between columns */
    padding: 40px; /* Padding inside popup */
    /* animation: fadeInScale 0.3s ease; */ /* Fade and scale in animation */
    /* transition: transform 0.3s ease; */ /* Smooth transform transitions */
    top: 16%; /* Position from top */
    left: 69%; /* Position from left */
    /* transform: translate(-50%, -50%); */ /* Center popup */
    /* background: white; */ /* Soft gradient background */
    /* transform-style: preserve-3d; */ /* Enable 3D transforms */
    /* perspective: 1000px; */ /* Add perspective for 3D effects */
}

.popup-content:hover {
    transform: translate(-50%, -50%) translateY(-3px); /* Slight lift on hover for interactivity */
}

.popup-slider-container {
    position: relative; /* Relative positioning for controls */
    width: 100%; /* Full width */
    height: 500px; /* Fixed height */
    display: flex; /* Flex layout */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    background: rgba(255, 255, 255, 0.5); /* Light background */
    border-radius: 12px; /* Rounded corners */
    overflow: hidden; /* Hide overflow */
}

.popup-images-wrapper {
    position: relative; /* Relative positioning */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    display: flex; /* Flex layout */
}

.popup-image {
    width: 100%; /* Full width inside popup */
    height: 100%; /* Full height */
    border-radius: 10px; /* Rounded corners */
    object-fit: cover; /* Cover image area without distortion */
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* Subtle shadow for depth */
    display: none; /* Hide by default */
}

.popup-image.active {
    display: block; /* Show active image */
}

.slider-nav {
    position: absolute; /* Absolute positioning */
    top: 50%; /* Vertical center */
    transform: translateY(-50%); /* Center vertically */
    background: rgba(0, 117, 191, 0.8); /* Blue semi-transparent background */
    color: white; /* White text */
    border: none; /* No border */
    padding: 12px 18px; /* Padding */
    font-size: 24px; /* Large font */
    cursor: pointer; /* Pointer cursor */
    /* border-radius: 4px; */ /* Rounded corners */
    z-index: 10; /* Above image */
    transition: background 0.3s ease; /* Smooth hover transition */
}

.slider-nav:hover {
    background: rgba(0, 117, 191, 1); /* Fully opaque on hover */
}

.slider-nav.prev {
    left: 10px; /* Left position */
}

.slider-nav.next {
    right: 10px; /* Right position */
}

.slider-dots {
    position: absolute; /* Absolute positioning */
    bottom: 15px; /* Bottom position */
    left: 50%; /* Horizontal center */
    transform: translateX(-50%); /* Center horizontally */
    display: flex; /* Flex layout */
    gap: 8px; /* Space between dots */
    z-index: 10; /* Above image */
}

.slider-dot {
    width: 12px; /* Width */
    height: 12px; /* Height */
    border-radius: 50%; /* Circle */
    background: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    cursor: pointer; /* Pointer cursor */
    border: 2px solid white; /* White border */
    transition: background 0.3s ease; /* Smooth transition */
}

.slider-dot.active {
    background: rgba(0, 117, 191, 1); /* Blue when active */
}

.popup-text {
    width: 83%; /* Full width */
    padding: 1rem; /* No padding */
    /* margin: 0; */ /* Remove default margin */
    /* text-align: left; */ /* Align text to left */
    line-height: 1.6; /* Comfortable line spacing */
    font-size: 7rem; /* Medium font size */
    /* background: transparent; */ /* Transparent background for split view */
    /* border-radius: 10px; */ /* Rounded corners */
    /* position: relative; */ /* Relative positioning for child elements */
    /* display: flex; */ /* Flex layout */
    /* flex-direction: column; */ /* Stack content vertically */
    /* justify-content: flex-start; */ /* Align to top */
    /* overflow-y: auto; */ /* Enable scrolling if needed */
    /* max-height: 500px; */ /* Match slider height */
}

.popup-text h2 {
    /* background-image: url(../img/screen2/bg_park.png); */
    /* background-size: cover; */
    /* color: #0075bf; */ /* Blue heading color */
    /* font-size: 36px; */ /* Large heading font size */
    margin: 0 0 20px 0; /* Space below heading */
    /* width: 33rem; */
    font-weight: 600; /* Semi-bold heading */
    text-align: center; /* Align heading left */
    /* border-bottom: 2px solid #0075bf; */ /* Blue underline for heading */
    /* padding-bottom: 10px; */ /* Padding below underline */
}

.popup-text p {
    color: #0075bf; /* Blue text color */
    font-size: 18px; /* Medium paragraph text */
    font-weight: 400; /* Normal weight */
    margin: 12px 0; /* Vertical spacing */
}

.popup-text ul {
    list-style: none; /* Remove default list bullets */
    padding: 0; /* Remove padding */
    margin: 15px 0; /* Vertical spacing */
}

.popup-text li {
    margin-bottom: 8px; /* Space between list items */
    padding-left: 20px; /* Indent for custom bullet */
    position: relative; /* Relative for bullet positioning */
    font-size: 16px; /* Medium font for list items */
    color: #333; /* Dark gray color */
    line-height: 1.4; /* Line spacing */
}

.popup-text li:before {
    content: "•"; /* Custom bullet character */
    color: #0075bf; /* Blue bullet color */
    position: absolute; /* Position bullet absolutely */
    left: 0; /* Align bullet left */
}

.close-popup {
    position: absolute; /* Position close button */
    top: 15px; /* Top offset */
    right: 15px; /* Right offset */
    font-size: 28px; /* Large font size for visibility */
    color: #0075bf; /* Blue color */
    cursor: pointer; /* Pointer cursor on hover */
    border: none; /* Remove default border */
    background: none; /* Remove background */
    padding: 5px; /* Padding for clickable area */
    transition: transform 0.2s, color 0.2s; /* Smooth hover transitions */
}

.close-popup:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    color: #339ad6; /* Change color to lighter blue */
}

/* Screen 2 Popup Styling - Darker blue background */
.popup-screen2 .popup-content {
    background: linear-gradient(135deg, #1a3a52 0%, #0d2239 100%); /* Dark blue gradient */
}

.popup-screen2 .popup-text h2 {
    color: #00d4ff; /* Cyan color for screen2 */
    font-size: 2rem;
    border-bottom-color: #00d4ff;
}

.popup-screen2 .popup-text p {
    color: #e0e0e0; /* Light gray text for better contrast */
}

/* Screen 3 Popup Styling - Purple/Teal background */
.popup-screen3 .popup-content {
    background: linear-gradient(135deg, #2d1b4e 0%, #1a0d2e 100%); /* Purple gradient */
}

.popup-screen3 .popup-text h2 {
    color: #ff00ff; /* Magenta color for screen3 */
    font-size: 3rem;
    border-bottom-color: #ff00ff;
}

.popup-screen3 .popup-text p {
    color: #e0e0e0; /* Light gray text for better contrast */
}

/* Screen 4 Popup Styling - Teal/Cyan background */
.popup-screen4 .popup-content {
    /* background: linear-gradient(135deg, #1a3a52 0%, #0d2539 100%); */ /* Teal gradient */
    top: 60% !important; /* Center vertically */
    left: 71rem; /* Reset left */
    right: 40px !important; /* Position from right */
    transform: translateY(-50%) !important; /* Center vertically */
}

.popup-screen4 .popup-text h2 {
    color: #00d4ff; /* Cyan color for screen4 */
    /* border-bottom-color: #00d4ff; */
}

.popup-screen4 .popup-text p {
    color: #e0e0e0; /* Light gray text for better contrast */
}

.clickable {
    cursor: pointer; /* Show pointer cursor for clickable elements */
}

.textbg, .textbg_screen3 {
    cursor: pointer; /* Indicate clickable text backgrounds */
    transition: transform 0.2s; /* Smooth transform on hover */
}

.textbg:hover, .textbg_screen3:hover {
    transform: scale(1.05); /* Slightly enlarge on hover for emphasis */
}

/* Special styling for screen4 popups */
#screen4 .popup-image {
    width: 100%; /* Full width in grid cell */
    height: 450px; /* Fixed height */
    object-fit: cover; /* Cover image area */
    border-radius: 15px; /* Rounded corners */
}

#screen4 .popup-text {
    /* padding: 0; */ /* Remove padding */
    /* display: flex; */ /* Flex layout */
    /* flex-direction: column; */ /* Vertical stacking */
    /* justify-content: flex-start; */ /* Align to top */
}

#screen4 .popup-text h2 {
    font-size: 36px; /* Heading size */
    /* margin-bottom: 15px; */ /* Space below heading */
    color: #0075bf; /* Blue color */
    /* border-bottom: 3px solid #0075bf; */ /* Blue underline */
    padding-bottom: 10px; /* Padding below underline */
}

#screen4 .popup-text p {
    font-size: 1.6rem; /* Smaller font for text */
    margin-bottom: 15px; /* Space below paragraph */
}

#screen4 .popup-text ul {
    font-size: 16px; /* Smaller font for list */
}

#screen4 .popup-text li {
    margin-bottom: 12px; /* Space between list items */
    padding-left: 25px; /* Indent for bullets */
    font-size: 16px; /* List item font size */
    color: #333; /* Dark gray color */
}

#screen4 .close-popup {
    top: 20px; /* Position slightly lower */
    right: 20px; /* Position slightly left */
    font-size: 32px; /* Larger close icon */
    background: rgba(255, 255, 255, 0.9); /* White translucent background */
    border-radius: 50%; /* Circular shape */
    width: 40px; /* Fixed width */
    height: 40px; /* Fixed height */
    display: flex; /* Flex for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle shadow */
}

.view-more {
    position: absolute; /* Position relative to popup-text */
    bottom: 8px; /* Bottom offset */
    /* right: 8px; */ /* Right offset */
    color: #0075bf; /* Blue text color */
    text-decoration: none; /* Remove underline */
    font-weight: 800; /* Extra bold */
    font-size: 23px; /* Medium-large font */
    padding: 1px 16px; /* Padding inside button */
    border: 3px solid #0075bf; /* Blue border */
    /* border-radius: 11px; */ /* Rounded corners */
    transition: all 0.3s ease; /* Smooth transitions */
}

.view-more:hover {
    background: #0075bf; /* Fill background on hover */
    color: white; /* White text on hover */
    transform: translateY(-2px); /* Slight upward movement */
}

@keyframes fadeInScale {
    from {
        opacity: 0; /* Start transparent */
        transform: scale(0.9); /* Slightly smaller */
    }
    to {
        opacity: 1; /* Fully visible */
        transform: scale(1); /* Normal size */
    }
}
.tap_to_view{
    position: absolute; /* Absolutely positioned */
    bottom: 25px; /* Positioned above bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center by offset */
    font-size: 30px; /* Large font */
    font-weight: 700; /* Bold font */
    padding-top: 1300px; /* Large top padding for positioning */
    cursor: pointer; /* Pointer cursor */
    color: #0075bf; /* Blue text color */
}
#back_arrow{
    position: absolute;
    width: 12rem; /* Full width */
    height: auto; /* Full height */
    top: 50%;
    left: 13rem;
    transform: translateY(-50%);
    cursor: pointer;
}
#front_arrow{
    position: absolute;
    width: 12rem; /* Full width */
    height: auto; /* Full height */
    top: 50%;
    left: 70rem;
    transform: translateY(-50%);
    cursor: pointer;
}
#dial_svg{
    position: absolute; /* Absolutely positioned */
    width: 45rem; /* Full width */
    height: auto; /* Full height */
    left: 26rem;
    top: 50%;
    transform: translateY(-50%);
}
#txt{
    position: absolute; /* Absolutely positioned */
    width: 23rem; /* Full width */
    height: auto; /* Full height */
    left: 92rem;
    top: 50rem;
    text-align: center;
    font-size: 30px; /* Large font size */
    font-weight: 700; /* Bold font */
     /* Large top padding for positioning */
     /* Pointer cursor */
    color: white; /* Blue text color */
}
#txt_box{
    position: absolute; /* Absolutely positioned */
    width: 33rem; /* Full width */
    height: auto; /* Full height */
    left: 87rem;
    top: 50%;
    transform: translateY(-50%);
}

/* SVG Animation Styles */
#path {
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

/* Smooth filter transitions for blur effects */
main {
    transition: filter 0.4s ease;
}

section {
    transition: filter 0.4s ease;
}

/* Enhanced animation smoothing */
* {
    will-change: auto;
}

.time_bg, .type_bg, #back_arrow, #front_arrow, #dial {
    will-change: transform, opacity;
}

/* 3D Transform support for browser compatibility */
@supports (transform-style: preserve-3d) {
    .popup-content {
        transform-style: preserve-3d;
    }
    section {
        transform-style: preserve-3d;
    }
}