* {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
            }
            
            body {
              font-family: 'Segoe UI', sans-serif;
              background: #fdfdfd;
              color: #003c32;
            }
            
            
            /*Start Header Section*/
            
            header1 {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 20px 50px;
              /*background: white;*/
              box-shadow: 0 2px 4px rgba(0,0,0,0.05);
              position: sticky;
              top: 0;
              z-index: 1000;
            }
            
            .logo1 {
              font-size: 35px;
              font-weight: bold;
              color: #CD5C5C;
            }
            
            nav1 a {
              margin: 0 20px;
              text-decoration: none;
              font-weight: 600;
              color: #CD5C5C;
            }
            
            nav1 a.active {
              color: #CD5C5C;
            }
            
            .flag {
              font-size: 20px;
              margin-left: 10px;
            }
            
           
            
            .boxes {
              display: flex;
              gap: 50px;
              justify-content: center;
              align-items: end;
              flex-wrap: wrap;
            }
            
            .box {
              width: 200px;
              height: 450px;
              border-radius: 8px;
              box-shadow: 0 10px 30px rgba(0,0,0,0.1);
              color: white;
              padding: 20px;
              font-weight: bold;
              position: relative;
              transform: rotate(-10deg);
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
            }
            
            .box p {
              margin-bottom: 10px;
            }
            
            .yellow {
              background: linear-gradient(145deg, #ffe000, #ffd100);
            }
            
            .green {
              background: linear-gradient(145deg, #1f6b5e, #23866f);
            }
            
            .blue {
              background: linear-gradient(145deg, #253667, #2f4ca5);
            }
            
            /*End Header Section*/
            
            
            /*Start Second Section*/
            
          /* 🌍 Base (mobile-first) styles: stack vertically */
.myfill-article {
    display: flex;
    flex-direction: column;
    gap: 5vh;
}

.myfill-pair {
    display: flex;
    flex-direction: column; /* stack on mobile */
    width: 100%;
    height: auto;
    margin-bottom: 5vh;
}

.myfill-figure {
    background: #eee;
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.myfill-figure img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.myfill-section {
    background: #e5e5e5;
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.myfill-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}

.myfill-heading {
    margin: 10% 0 auto;
    font-size: calc(6vw + 1rem); /* fluid font size */
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
}

.myfill-text {
    text-align: center;
    width: 100%;
    font-family: "Cormorant", serif;
    font-weight: 400;
    font-style: italic;
    font-size: calc(3vw + 0.5rem); /* scale with screen */
    margin: 1rem 0;
}

.myfill-link {
    color: transparent;
    -webkit-text-stroke: 1px #CD5C5C;
    text-decoration: none;
    font-weight: 200;
    letter-spacing: 2px;
}

.myfill-link:hover,
.myfill-link:focus {
    -webkit-text-stroke: 1px #999;
}


/* 💻 Tablet & Desktop (≥700px) */
@media screen and (min-width: 700px) {
    .myfill-article {
        flex-direction: column;
        gap: 10vh; /* spacing between pairs */
    }

    .myfill-pair {
        flex-direction: row;
        width: 100%;
        height: 100vh;
        position: sticky;
        top: 0;
        margin-bottom: 0;
    }

    /* Alternate layout: reverse order for even pairs */
    .myfill-pair:nth-of-type(2n) {
        flex-direction: row-reverse;
    }

    .myfill-figure {
        width: 50%;
        height: 100%;
        box-shadow: 4px -4px 8px rgba(0,0,0,.4);
    }

    .myfill-section {
        width: 50%;
        height: 100%;
        padding: 5vmin;
        box-shadow: -4px -4px 8px rgba(0,0,0,.4);
    }

    .myfill-heading {
        margin: 15% 0 auto;
        font-size: calc(5vmin + 3vmax);
    }

    .myfill-text {
        text-align: right;
        font-size: calc(1.5vmin + 1.75vmax);
        margin-bottom: 5%;
    }

    .myfill-link {
        -webkit-text-stroke: 2px #CD5C5C;
    }
}

  
            /*End Second Section*/
            
            
            
            
            /*Start Footer CSS*/
            
            .footer {
                  padding: 40px 60px;
                  color: #d6f8f1;
                  background-color: #e48888;
                }
                
                .footer-container {
                  display: flex;
                  justify-content: space-between;
                  flex-wrap: wrap;
                }
                
                .footer-left {
                  flex: 1 1 65%;
                  max-width: 65%;
                }
                
                .logo {
                  width: 150px;
                  margin-bottom: 20px;
                }
                
                .disclaimer p {
                  font-size: 14px;
                  line-height: 1.6;
                  margin-bottom: 10px;
                }
                
                .disclaimer strong {
                  font-size: 16px;
                  display: block;
                  margin-bottom: 10px;
                }
                
                .copyright {
                  margin-top: 20px;
                  font-size: 14px;
                }
                
                .footer-right {
                  flex: 1 1 30%;
                  max-width: 30%;
                  text-align: center;
                }
                
                .back-to-top img {
                  width: 40px;
                  height: 40px;
                  border: 1px solid #ccc;
                  padding: 10px;
                  border-radius: 4px;
                  background-color: transparent;
                  margin-bottom: 20px;
                }
                
                .contact-info h3 {
                  margin-bottom: 10px;
                  font-size: 18px;
                  color: #fff;
                }
                
                .contact-info p {
                  margin: 5px 0;
                  font-weight: bold;
                  font-size: 16px;
                }
                
                .contact-info a {
                  color: #fff;
                  text-decoration: none;
                }
            
            /*End Footer CSS*/