* {
    box-sizing: border-box;
}

body {
    background-repeat: no-repeat;
    background-size: cover; /* Ensure the background covers the entire viewport */
    margin: 0;
    padding: 0;
    background-image: url(lotus-pond.jpg);
    background-attachment: fixed;
    min-height: 100vh;
}

.p {
    color: white;
    padding: 0;
    margin: 0;
    height: auto; /* Adjust as needed */
    align-content: center;
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center;
}
.title {
    padding: 0;
    margin: 0;
    height: auto; /* Adjust as needed */
    align-content: center;
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center;
}

h1 {
    font-family: "The Nautigal", cursive;
    font-weight: 400;
    font-style: normal;
    color: white;
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center;
    padding-left:50px;
    padding-top: 20px;
}
 
.container {
    height: relative;
    width: 100%;
    background-size: cover; /* Ensure the background covers the entire container */
    background-image: linear-gradient(to right, rgb(27, 76, 122), rgb(255, 110, 161));
    position: sticky;
    opacity: 0.55;
} 

.container> * {
    opacity: 1; /* Override opacity for direct children */
}

.section1 {
    background-color: black;
    height: 50px;
} 

.section2 {
    padding-top:40px;
    box-sizing: border-box;
    flex-direction: column;
    align-content:center;
    align-items:center;
    justify-content:center;
    display:flex;
    gap:0px;
}

.s2-1 {
    background-image: linear-gradient(to top, rgb(255, 178, 36), #b35139);
    background-image: url(72.webp);
    background-size: 100%;
    border: 5px solid white;
    border-top-left-radius:100%;
    border-top-right-radius: 100%;
    border-bottom: 0px;
    justify-content: center;
    height: 80%;
    width: 80%;
    height: 250px;
    width: 750px;
    box-sizing: border-box;
    flex-direction: row;
    align-items:flex-end;
    justify-content:center;
    padding-left: 45px;
    padding-bottom: 0px;
    align-items: stretch;
    padding-bottom: 0px;
}

.s2-2 {
    background-image: linear-gradient(to top, rgb(209, 107, 19), #98255d);
    opacity: 40%;
    background-size: 100%;
    border: 4px dashed white;
    border-top-left-radius:150%;
    border-top-right-radius: 150%;
    border-bottom: 0px;
    justify-content: center;
    height: 200px;
    width: 650px;
    padding-left: 65px;
    box-sizing: border-box;
    flex-direction: row;
    align-content:flex-end;
    align-items:flex-end;
    justify-content:center;
}

.s2-3 {
    background-image: linear-gradient(to bottom, rgb(174, 1, 41), #fcd773);
    opacity: 100%;
    background-size: 100%;
    border: 2px solid white;
    border-top-left-radius:150%;
    border-top-right-radius: 150%;
    border-bottom: 0px;
    justify-content: center;
    height: 200px;
    width: 500px;
    padding-left: 400px;
    box-sizing: border-box;
    flex-direction: row;
    align-content:flex-end;
    align-items:flex-end;
    justify-content:center;
}
/* ------------------------- */
.section3 {
    height: 150px;
    opacity: 100%;
    align-items: center;
    display: flex; 
    flex-direction: row;
    text-wrap: wrap;
    justify-content: center;
    gap:10px;
    padding-top: 0px;
    padding-bottom: 10px;
} 

.s3-box1 {
    height:150px;
    background-image: url(column.jpeg);
    border: 5px solid white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    width: 100px;
    align-content: center;
    align-items: center;
}

.s3-box3 {
    background-image: linear-gradient(to top, rgb(169, 169, 169), rgb(123, 8, 81));
    border: 4px solid white;
    border-radius: 10%;
    justify-content: center;
    display: flex; 
    flex-direction: column;
    width: 80%;
    height:100%;
    align-content: center;
    align-items: center;
}

.s3-box4 {
    height:150px;
    background-image: url(monet2.jpeg);
    border: 4px dashed white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    width: 80%;
    height:90%;
    align-content: center;
    align-items: center;
}
.s3-box5 {
    height:150px;
    background-image: linear-gradient(to top, rgb(169, 169, 169), rgb(159, 169, 255));
    border: 3px solid white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    width: 80%;
    height:80%;
    align-content: center;
    align-items: center;
}

.s3-box6 {
    height:150px;
    background-image: url(monet2.jpeg);
    border: 3px dashed white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    width: 80%;
    height:70%;
    align-content: center;
    align-items: center;
}

.s3-box7 {
    height:150px;
    background-color: aquamarine;
    border-radius: 100%;
    border: 2px solid white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    width: 80%;
    height:30%;
    align-content: center;
    align-items: center;
}

.s3-box2 {
    background-image: linear-gradient(to right, rgb(169, 169, 169), rgb(123, 8, 81));
    border: 5px solid white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    height:50px;
    width: 50px;
    align-content: center;
    align-items: stretch;
}

.s4-box1-5 {
    height:150px;
    background-image: linear-gradient(to right, rgb(169, 169, 169), rgb(123, 8, 81));
    border: 1px solid white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    width: 50%;
    height: 95%;
    align-content: center;
    align-items: center;
}

.s4mainbox {
    background-color: rgb(255, 157, 206);
    border: 15px dotted rgb(141, 48, 121);
    opacity: 100%;
    width:1200px;
    height:200px;
    align-items: center;
    display: flex; 
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center;
    padding:10px;
}

.s4mainbox1 {
    background-image: linear-gradient(to right, rgb(161, 26, 26), rgb(255, 85, 47));
    border: 5px dotted rgb(255, 255, 255);
    opacity: 100%;
    width:1200px;
    align-items: center;
    display: flex; 
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center;
    height:95%;
    width:99%;
}

.s4mainbox2 {
    background-image: linear-gradient(to right, rgb(161, 26, 26), rgb(213, 154, 208));
    border: 5px solid rgb(197, 166, 190);
    opacity: 100%;
    align-items: center;
    display: flex; 
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center;
    height:90%;
    width:100%;
}


.s4mainbox4 {
    background-image: linear-gradient(to right, rgb(161, 26, 26), rgb(255, 85, 47));
    border: 3px solid rgb(15, 207, 255);
    align-items: center;
    display: flex; 
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center;
    height:85%;
    width:90%;
}

.s4mainbox3 {
    background-image: linear-gradient(to right, rgb(161, 26, 26), rgb(255, 85, 47));
    border: 3px dashed rgb(255, 255, 255);
    opacity: 100%;
    align-items: center;
    display: flex; 
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center;
    height:70%;
    width:90%;
}

.s4mainbox6 {
    background-image: url(st1.jpeg);
    border: 5px dotted rgb(255, 194, 80);
    align-items: center;
    display: flex; 
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center;
    height:70%;
    width:100%;
    gap:20px 50px;
}


.s4mainbox6 {
    background-image: url(st1.jpeg);
    border: 5px dotted rgb(141, 48, 121);
    opacity: 100%;
    align-items: center;
    display: flex; 
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center;
    height:95%;
    width:100%;
    gap:20px 50px;
}

.s4-box1-1 {
    height:150px;
    background-color: rgb(201, 99, 143);
    border: 5px solid white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    width: 40px;
    height: 120px;
    align-content: center;
    align-items: center;
}

.s4-box1-2 {
    height:150px;
    background-color: rgb(201, 99, 143);
    border: 2px dashed white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    width: 70%;
    height: 95%;
    align-content: center;
    align-items: center;
}

.s4-box1-3 {
    height:150px;
    background-color: rgb(190, 116, 148);
    border: 1px dashed white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    width: 65%;
    height: 95%;
    align-content: center;
    align-items: center;
}

.s4-box1-4 {
    height:150px;
    background-color: rgb(201, 99, 143);
    border: 1px solid white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    width: 65%;
    height: 95%;
    align-content: center;
    align-items: center;
}


.section4 {
    opacity: 100%;
    align-items: center;
    display: flex; 
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center;
    padding-bottom:20px;
    padding-top:20px;
    gap:20px 70px;
} 

.s4-box1 {
    padding-top: 0px;
    margin: 0px;
    background-image: linear-gradient(to right, rgb(161, 26, 26), rgb(255, 85, 47));
    background-position: relative;
    border: 5px solid white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    height:100px;
    width: 200px;
    align-content: center;
    align-items: center;
}


.s4-box2 {
    background-image: linear-gradient(to top, rgb(0, 205, 208), rgb(163, 128, 120));
    border: 2px dashed white;
    justify-content: center;
    height:80%;
    width: 90%;
    align-content: center;
    align-items: center;
    display: flex; 
    flex-direction: row;
}

.s4-box3 {
    background-image: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 77, 175));
    border: 2px solid white;
    justify-content: center;
    height:80%;
    width: 90%;
    align-content: center;
    align-items: center;
    display: flex; 
    flex-direction: row;
}

.s4-box4 {
    background-image: linear-gradient(to right, rgb(255, 255, 255), rgb(55, 145, 106));
    border: 1px solid white;
    justify-content: center;
    height:80%;
    width: 90%;
    align-content: center;
    align-items: center;
    display: flex; 
    flex-direction: row;
}

.s4-box5 {
    background-image: linear-gradient(to right, rgb(255, 255, 255), rgb(114, 55, 145));
    border: 1px dashed white;
    justify-content: center;
    height:80%;
    width: 90%;
    align-content: center;
    align-items: center;
    display: flex; 
    flex-direction: row;
}

.s4-box6 {
    background-image: linear-gradient(to right, rgb(119, 16, 32), rgb(210, 195, 177));
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border: 1px dashed white;
    justify-content: center;
    height:50%;
    width: 50%;
    align-content: center;
    align-items: center;
    display: flex; 
    flex-direction: row;
}

/* ------------------------------------ */
.section5 {
    height: 50px;
    opacity: 100%;
    align-items: center;
    display: flex; 
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center; 
} 

.s5-box1 {
    background-image: linear-gradient(to top, rgb(255, 178, 36), #b35139);
    border: 5px solid white;
    justify-content: center;
    display: flex; 
    flex-direction: row;
    height:100%;
    width: 1100px;
    align-content: center;
    align-items: center;
}

.s5-box2 {
    background-image: linear-gradient(to top, rgb(161, 26, 26), rgb(163, 128, 120));
    border: 2px dashed white;
    justify-content: center;
    height:80%;
    width: 90%;
    align-content: center;
    align-items: center;
    display: flex; 
    flex-direction: row;
}

.s5-box3 {
    background-image: linear-gradient(to right, rgb(255, 255, 255), rgb(253, 180, 163));
    border: 2px solid white;
    justify-content: center;
    height:50%;
    width: 80%;
    align-content: center;
    align-items: center;
    display: flex; 
    flex-direction: row;
}


.section6 {
    height: 350px;
    padding: 10px;
    align-items: stretch;
    display: flex; 
    flex-direction: row;
    text-wrap: nowrap;
    justify-content: center;
    column-gap: 70px;
} 

.columnbase {
    width:80px;
    background-color: rgb(158, 11, 11);
    background-image: url(monet.jpg);
    border: 5px solid white;
    justify-content: center;
    padding: 0px;
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.rectop {
    border: 3px dashed rgb(250, 205, 213);
    background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(114, 143, 152));
    display: flex;
    height:50px;
    width:100%;
    padding:0px;
    margin:0px;
}

.rectop1 {
    border: 5px solid rgb(181, 219, 215);
    background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(114, 143, 152));
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    height:90%;
    width:100%;
}

.rectop2 {
    border: 2px solid rgb(244, 201, 155);
    border-radius: 5px;
    background-image: linear-gradient(to top, rgb(86, 255, 249), rgb(130, 178, 255));
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    height:50%;
    width:60%;
}

.square {
    background-color: rgb(201, 99, 143);
    border: 3px dotted white;
    width:20px;
    height:80px;
    gap:10px;
}

.rec {
    background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(110, 253, 224));
    display: flex;
    height:50px;
    width:50px;
}

.inside1 {

}

.inside2 {

}

.inside3 {

}
.inside4 {

}