.container-fluid {
          width: 100%;
          padding-right: 0px !important;
          padding-left: 0px !important;
          margin-right: auto;
          margin-left: auto;
          }
      .container-fluid.pb-3 {
        margin-bottom: -35px !important;
    }
      .modal {
        display: none;
        position: fixed;
        z-index: 21 !important;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.9) !important;
        padding-top: 8% !important;
    }

          /* For desktop or laptop screens */
          @media screen and (min-width: 1280px) {
              .row.max-w-screen-2xl.pt-3 {
                  max-width: 100%;
                  overflow: hidden;        
              }
            .col-12 {
                  padding-right: 0px !important;
                  padding-left: 0px !important;
            }
        }  

    /*CATEGORY DIVS*/
    .category-hl h2 {
        font-size: 30px !important;
        margin-bottom: 20px;
    }   
    .slider-container {
        width: 100%;
        padding: 0 40px;
    }    
    .carousel-div-box {
        width: 100%;
    }
    .shop-style-img-2 {
        width: 100%;
        background: #F4F4F1;
        height: 100%;
            padding: 2% 8%;
    }    
    .shop-style-img-2 img{ 
        margin-top: 30px;
        }

    /*SHAPES DIVS   */  
    .event-gallery-info {
        text-align: center;
        padding: 5%;
    }
    .event-gallery, .event-gallery-1 {
        padding: 15px;
        transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, border-radius 0.3s; 
        position: relative;
        display: inline-block;
        overflow: hidden; /* Ensure the overflow is hidden to prevent content overflow issues */
    }
    .event-gallery:hover {
        background-color: #fff;
        border-radius: 7px;
        transform: scale(1.03) rotate(-3deg); /* Zoom 105% and rotate 5 degrees */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Smooth shadow effect */
    } 
    .event-gallery-1:hover {
        background-color: #fff;
        border-radius: 7px;
        transform: scale(1.03) rotate(3deg); /* Zoom 105% and rotate 5 degrees */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Smooth shadow effect */
    }   
    .zoom-rug {
        display: block;
        width: 100%;
    }

    @keyframes flash {
        0% { opacity: 1; } /* Start with full opacity */
        85% { opacity: .5; } /* Quickly fade out to 0 opacity */
        100% { opacity: 1; } /* Fade back in to full opacity */
    }
    .event-gallery:hover, .event-gallery-1:hover .zoom-rug {
        animation: flash 0.4s; /* Use the 'flash' animation defined above */
    }   
    .event-gallery-info h2 {
        font-size: 12px !important;
        font-weight: 300 !important;
        text-align: center;
        /*font-family: "Inter";*/
        margin-top: 5px !important;
        margin-bottom: 0px !important;
        line-height: 23px;
        text-transform: uppercase !important;

    } 

    .shop-throws-info-pink h1, .shop-throws-info-pink h3 {
        color: #fff !important;
    }   
    .shop-throws-info-pink .shapes-percent-div-1 {
        color: #FF4BF7 !important;
    } 
    .style-info-aqua .shapes-percent-div-1 {
        color: #36FFE8 !important;
    } 
    .pattern-info-pink .shapes-percent-div-1 {
        color: #FF4BF7 !important;
    }     
    .event-gallery-info h3 {
        font-size: 15px !important;
        text-align: center;
        margin: 5px 0;
        color: #fff;
    }   
    .shapes-percent-div-1 {
        float: left;
        width: auto;
        margin: 0 auto;
        padding: 0 19%;
    }
    .shapes-number-1 {
        width: 70%;
        float: left;
        font-size: 80px !important;
        font-weight: bold;
        line-height: 90%;
        text-align: right;
    }
    .shapes-discount-1 {
        width: 30%;
        float: left;
          line-height: 23px;
    }
    .shapes-percentage-1 {
        font-size: 45px !important;
        font-weight: bold;
        line-height: 107%;
    }
    .shapes-off-1 {
        font-size: 20px !important;
        font-weight: bold;
    }      
    .event-gallery-info-img {
        height: auto !important;

    }   
    .style-img img, .patterns-img img {
            margin-top: 40px;
            float: left;
            border-radius: 0 0 10px 10px !important;
        }    
    /* Carousel container */
    .swiper_slider {
      width: 100%;
      padding-block-end: 55px;
    }
    /* Carousel items */
    .carousel-items-2 {
      display: flex;
      transition: transform 0.5s;
    }
    .shop-style-div-1 {
      width:100%;
      background: #F4F4F1;
      padding: 3% 0 0;
      height: 100%;
        }
    .shop-throws-info-pink .shop-style-div-1 {
    border-bottom: 10px solid #FF4BF7;
        }    
    /* Navigation buttons (optional) */
    .carousel-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
    }
    .carousel-nav button {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
    }
    .carousel-nav button:focus {
      outline: none;
    }
    /* CSS for the dots */
    .carousel-dots-1 {
      text-align: center;
      margin-top: 10px;
    }
    .carousel-dots-2 {
      text-align: center;
      margin-top: 10px;
    }
    .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        background-color: #B7B7B7 !important;
        transition: .3s;
        border-radius: 50%;
        margin: 0 15px !important;
        opacity: unset;
    }
    .swiper-pagination-bullet-active {
      background-color: #71BF4B !important; /* You can adjust the active dot color */
    }
    .white-dots .swiper-pagination-bullet {
            background-color: #fff !important;
            opacity: 100% !important;
        }
    .white-dots .swiper-pagination-bullet-active {
        background-color: #A37E08 !important;
        opacity: 100% !important;
    }

    /* The Modal (background) */
    .modal {
        display: none;
        position: fixed;
        z-index: 21;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.9);
        padding-top: 20%;
    }
    /* Modal Content (image) */
    .modal-content {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 750px;
    }
    .modal .modal-content {
        border-radius: 50px;
    }
    /* Add Animation */
    .modal-content, .caption {
        -webkit-animation-name: zoom !important;
        -webkit-animation-duration: 0.6s !important;
        animation-name: zoom !important;
        animation-duration: 0.6s !important;
    }
    @-webkit-keyframes zoom {
        from {-webkit-transform:scale(0)}
        to {-webkit-transform:scale(1)}
    }
    @keyframes zoom {
        from {transform:scale(0)}
        to {transform:scale(1)}
    }

    .modal-video {
        width: 100%;  /* Increase width for better visibility */
        max-width: 1080px; /* Set a max width */
        border-radius: 20px; /* Softer edges for a polished look */
    }    

    /* The Close Button */
    .close {
        position: absolute;
        font-size: 4.5rem !important;
        opacity: 1 !important;
        top: 15px;
        right: 35px;
        color: #fff !important;
        }


    a:hover {
    /*    opacity: 80%;*/
        text-decoration: none;
    }    
    .zoom {
      transition: transform .4s;
    }
    .zoom:hover {
      -ms-transform: scale(105%); /* IE 9 */
      -webkit-transform: scale(105%); /* Safari 3-8 */
      transform: scale(105%); 
    }   
    hr {
        border-top: 2px solid rgba(0,0,0,.1);
        background: #00FBFF;
        width: 20%;
        margin: 15px auto 0; 
    }
    .ls-2 {
        letter-spacing: 2px;
    } 
    .round-corners {
        border-radius: 10px !important;
    }    
    .center-content {
        text-align: center;
    }
    .center-image {
        margin: 0 auto; /* This centers a block-level element horizontally */
        display: block; /* Ensures that the margin works as expected */
    }
    .clear-space {
        margin-bottom: 30px; /* Adjust the value as needed */
    }   
    .banner-img img {
        object-fit: cover;
        width: 100%;
    }  
    .no-padding {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }   


    /*BANNER    */ 
    .anniversary-banner {
        background-image: url(https://assets.rugimg.com/webpage/Rugs.com/Annual%20Picnic/picnic-banner-desktop%20%281%29.jpg);
        height: 680px;
        background-size: cover;
        background-position: right;
        transition: height 1.5s ease-in-out, transform .5s ease-in-out;        
    }
    .anniversary-title-div {
        position: absolute;
        top: 50%;
        right: -14%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }
    .anniversary-title h1 {
        font-size: 120px !important;
        /*font-family: "averta std", serif;*/
        font-weight: bold !important;
        font-style: normal !important;
        text-align: center;
        color: #71BF4B;
        line-height: 12vh !important;
        transition: font-size 1.5s ease-in-out, transform .5s ease-in-out;
    }
    .anniversary-title h2 {
        font-size: 50px !important;
        /*font-family: "averta std", serif;*/
        font-weight: 400 !important;
        color: #fff;
        text-align: center;
        letter-spacing: 0px;
        line-height: 42px !important;
        margin: 0px !important;
        transition: font-size 1.5s ease-in-out, transform .5s ease-in-out;
    }

    /*DATE*/
    .container-date-div {
        background-color: #F8F8F8;
        margin: 0px !important;
        padding: 115px 0;
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
    .container-date {
        width: 1400px;
        margin: auto;
    }
    .vertical-line {
        border-left: 1px solid #bbb;
        height: 170px; /* Adjust height as needed */
        margin: auto 0px;
    }
    .black-text {
        color: #000000 !important;
    }    
    .ani-div-1, .ani-div-3 {
        width: 28.5% !important;
    }
    .ani-div-2 {
        width: 42.8% !important;
        padding: 0% 2%;
    }
    .anniversary-date h2 {
        font-size: 65px !important;
        /*font-family: "averta std", serif;*/
        font-weight: Bold !important;
        text-align: center;
        color: #71BF4B;
        margin: 0px !important;
        line-height: 4.5rem !important;
    }
    .anniversary-date h3 {
        font-size: 30px !important;
        /*font-family: "averta std", serif;*/
        font-weight: 600 !important;
        text-align: center;
        color: #71BF4B;
        line-height: 3rem !important;
    }
    .anniversary-date h3.date-font {
        font-size: 22px !important;
    }    
    .anniversary-date p {
        font-size: 24px !important;
        /*font-family: "averta std", serif;*/
        font-weight: 500 !important;
        text-align: center;
        color: #707070;
    }
    .container-address p {
        font-size: 23px !important;
        /*font-family: "averta std", serif;*/
        font-weight: bold !important;
        color: #71BF4B;
        letter-spacing: 1px;
        padding: 20px 0;
        margin: auto;
        font-variant-caps: all-small-caps;
        text-align: center;
        transition: color 0.5s ease; /* Smooth transition for color change */
    }
    .container-address p:hover {
        color: #000; /* Change to black on hover */
    }    

    /*BANNER 2*/
    .container-banner-2 {
        position: relative;
        background-image: url(https://assets.rugimg.com/webpage/Rugs.com/Annual%20Picnic/picnic-banner-2.jpg);
        height: auto;
        background-size: 105%;
        background-position: center 65%; /* Ensures the image is centered both horizontally and vertically */
        z-index: 3;
        transition: height 1.5s ease-in-out, transform .5s ease-in-out;    
    }  
    .container-banner-2::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Black layer with 50% opacity */
    }
    .banner-2-text {
        position: relative;
        width: 100%;
        height: 300px;
        margin: auto;

    }    
    .banner-2-text h3 {
        color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 120px !important;
        line-height: 9vh;
        transition: font-size 1.5s ease-in-out, transform .5s ease-in-out;    
    }

    /*OUR EVENT*/
    .container-event {
            background-color: #F8F8F8;
            padding-top: 120px;
        }     
    .anniversary-event h1 {
        font-size: 95px !important;
        /*font-family: "averta std", serif !important;*/
        font-weight: Bold !important;
        text-align: center;
        color: #71BF4B;
        margin: 0px !important;
        line-height: 4.5rem !important;
        padding-bottom: 120px;
    }    

    /*EMPLOYEES*/
    #containerEmployee {
        background-color: #F8F8F8;
        padding-top: 120px;
    }  
    .container-employee {
        width: 1400px;
        margin: auto;
        padding: 70px 0;
    }      
    .employee-1{
        opacity: 0;
        transform: translateY(120px);
        transition: transform .5s ease-in-out, opacity 2s ease-out;
    }
    .employee-2 {
        opacity: 0;
        transform: translateY(140px);
        transition: transform 1s ease-in-out, opacity 2s ease-out;
    }
    .employee-3 {
        opacity: 0;
        transform: translateY(165px);
        transition: transform 1.2s ease-in-out, opacity 2s ease-out;
    }
    .employee-1.visible, .employee-2.visible, .employee-3.visible {
        opacity: 1;
        transform: translateY(0);
    }   
    .animate h3 {
        font-size: 115px !important;
        /*font-family: "averta std", serif !important;*/
        font-weight: Bold !important;
        text-align: center;
        color: #71BF4B;
        margin: 0px !important;
        line-height: 3.5rem !important;
        padding-bottom: 60px;    
    }    
    .animate p {
        font-size: 35px !important;
        /*font-family: "futura" !important;*/
        font-weight: 500 !important;
        text-align: center;
        color: #71BF4B;
        margin: 0px !important;
        line-height: 2.5rem !important;
        padding-bottom: 60px;    
    }     

    @media screen and (min-width: 1600px) {
        .anniversary-title-div {
            padding-right: 2%;
        }
    }

    @media screen and (max-width: 1400px) {  

    .anniversary-banner {
        background-position: center;
    }    
    .container-date {
        width: unset;
        margin: auto;
    }   
    .anniversary-title-div {
        right: -19%;
    }  

    }    
    @media screen and (max-width: 1200px) {
    /*BANNER*/
    .anniversary-banner {
      height: 550px;
    } 
    .anniversary-logo img {
      width: auto;
      height: 540px;
      margin-left: -20px;
    }
    .anniversary-title h1 {
        font-size: 90px !important;
        line-height: 10vh !important;
    }    
    .anniversary-title h2 {
        font-size: 45px !important;
        line-height: 20px !important;
    }
        .anniversary-title-div {
            right: -15%;
        }    
    /*DATE*/
    .container-date-div {
        padding: 70px 0;
    }    
    .anniversary-date h2 {
        font-size: 45px !important;
        line-height: 3.5rem !important;
    }    
    .anniversary-date h3.date-font {
        font-size: 16px !important;
        line-height: 1.5rem !important;
    }    
    .anniversary-date h3 {
        font-size: 25px !important;
        line-height: 1.5rem !important;
    }    
    .anniversary-date p {
        font-size: 20px !important;
    }    
    .container-address {
        padding: 10px 0;
    }    

    .banner-2-text h3 {
        font-size: 80px !important;
        line-height: 6vh;
    }    

    }       
    @media screen and (max-width: 992px) {
    /* BANNER*/
        .anniversary-banner {
            height: 350px;
        }    
    .anniversary-title h1 {
        font-size: 60px !important;
        line-height: 6vh !important;
    } 
    .anniversary-title h2 {
        font-size: 27px !important;
        line-height: 20px !important;
    }    
    .anniversary-logo img {
        width: auto;
        height: 482px;
        margin-left: -20px;
    }  
    /*DATE*/    
    .ani-div-2 {
        width: 42% !important;
        padding: 1% 2%;
    }

    .container-banner-2 {
        height: auto;
    }  
    .countdown-title h1 {
        font-size: 45px !important;
        padding-top: 30px;
    }    

    .event-gallery-info {
        text-align: center;
        padding: 10%;
    }    
    .event-gallery, .event-gallery-1 {
        padding: 25px;
    }   

    /*EMPLOYEES*/    
    .animate h3 {
        font-size: 75px !important;
        line-height: 0.5rem !important;
    }    
    .animate p {
        font-size: 25px !important;
        line-height: 2rem !important;
        padding-bottom: 30px !important;
    }    

    }  
    @media screen and (max-width: 768px){
    /* BANNER*/ 
    .anniversary-banner {
        background-image: url(https://assets.rugimg.com/webpage/Rugs.com/Annual%20Picnic/picnic-banner-mobile%20%281%29.jpg);
        height: 680px;
        background-size: cover;
        background-position: center -200px;
        transition: height 1.5s ease-in-out, transform .5s ease-in-out;        
    }    
    .anniversary-title-div {
        width: 76%;
        top: 30%;
        right: unset;
        margin: 0 10%;
        transform: translate(0%, -50%);
    }

    .anniversary-title h1 {
        font-size: 80px !important;
        line-height: 6vh !important;
    }    
    .anniversary-title h2 {
        font-size: 40px !important;
        line-height: 4vh !important;
    }  
    .anniversary-logo {
        width: 100%;
        height: 550px;
    }
    .anniversary-logo img {
        width: auto;
        height: 520px;
        margin: 0 12%;
    }

    /*DATE*/    
    .ani-div-1, .ani-div-3 {
        width: 33.33% !important;
    }    
    .ani-div-2 {
        width: 33% !important;
    }    
    .anniversary-date p {
        font-size: 15px !important;
    }    
    .anniversary-date h3.date-font {
        font-size: 14px !important;
    }
     .anniversary-date h2 {
        font-size: 35px !important;
        line-height: 2.5rem !important;
    }
    .vertical-line {
        height: 120px;
    }
    .ani-div-2 {
        padding: 0% 2%;
    }    
    .container-date-div {
        padding: 50px 0;
    }

    /*DATE    */
    .anniversary-date h3.date-font {
        font-size: 20px !important;
    }  
    .anniversary-date h2 {
        font-size: 55px !important;
        line-height: 3.5rem !important;
    }    
    .anniversary-date h3 {
        font-size: 30px !important;
        line-height: 3.5rem !important;
    }
    .anniversary-date p {
        font-size: 20px !important;
    }    
    .ani-div-1-mob {
        width: 100%;
    }
    .ani-div-2-mob {
        width: 100%;

        padding: 0 120px;
    }
    .ani-div-3-mob {
        width: 100%;
    }

    .horizontal-line {
        border-top: 1px solid black;
        width: 150px; /* Adjust width as needed */
        margin: 40px auto;
    }    

    /*EVENT*/
    .slider-container {
        padding: 0 10px;
    }    
    .event-gallery-info {
        padding: 10px 5% 10px;
    }    
    .event-gallery, .event-gallery-1 {
        padding: 25px;
    }    
    /*EMPLOYEES*/  
    .animate h3 {
        font-size: 75px !important;
        line-height: 2rem !important;
        padding-bottom: 30px;
    }    
    .animate p {
        padding-bottom: 50px !important;
    }  

    }  
    @media screen and (max-width: 576px) {
    /* BANNER*/ 
    .anniversary-banner {
        background-position: center bottom;
    }
    .anniversary-title-div {
        top: 15%;

    }    
    .anniversary-title h1 {
        font-size: 60px !important;
    }
    .anniversary-title h2 {
        font-size: 30px !important;
        line-height: 2vh !important;
    }    

    /*DATE    */
    .anniversary-date h3.date-font {
        font-size: 20px !important;
    }  
    .anniversary-date h2 {
        font-size: 55px !important;
        line-height: 3.5rem !important;
    }    
    .anniversary-date h3 {
        font-size: 30px !important;
        line-height: 3.5rem !important;
    }
    .anniversary-date p {
        font-size: 20px !important;
    }

    .horizontal-line {
        border-top: 1px solid #bbb;
        width: 200px;
        margin: 40px auto;
    }   
    .container-banner-2 {
        height: auto;
        background-size: 160%;
        background-position: 90% center;
    }
    /*EVENT*/
    .container-event {
        background-color: #F8F8F8;
        padding-top: 50px;
    }    
    .anniversary-event h1 {
        font-size: 75px !important;
        padding-bottom: 50px;
    }    
    .event-gallery-info {
        padding: 10px 10% 10px;
    }
    .ani-div-2-mob {
        width: 100%;
        padding: 0 70px;
    }    

    /*COUNTDOWN*/

    .countdown-title h1 {
        font-size: 35px !important;
        font-weight: 700 !important;
        }    
     .countdown {
        width: 100%;
    }   
    .month-box {
        width: 33%;
    }
    .days-box {
        width: 33%;
    }
    .hours-box {
        width: 33%;
    } 
    .modal-content {
        width: 90%;
    }   
    .modal {
        padding-top: 25%;
    }    

    }  
    @media screen and (max-width: 480px){  
    /*BANNER*/
        .anniversary-title h1 {
            font-size: 50px !important;
        }
        .anniversary-title h2 {
            font-size: 25px !important;
        }      
        .container-banner-2 {
            height: 700px;
            background-size: 200%;
        } 
        .banner-2-text h3 {
            font-size: 70px !important;
            line-height: 6vh;
        }

    }

    /* === FORM STYLES === */
    .banner-2-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 60px 5%;
        position: relative;
        z-index: 5;
        color: #fff;
        box-sizing: border-box;
      }
      .container-banner-2 {
        overflow: hidden;
        background-image: url("https://assets.rugimg.com/webpage/Rugs.com/Annual%20Picnic/picnic-banner-2.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .banner-2-left {
        width: 45%;
        text-align: left;
      }
      .banner-2-left h3 {
        font-size: 70px !important;
        color: #fff;
        /*font-family: "averta std", sans-serif;*/
        font-weight: 700 !important;
        line-height: 1.2;
      }
      .banner-2-form {
        width: 50%;
        padding: 40px;
        border-radius: 10px;
        box-sizing: border-box;
      }
      .form-div {
        color: #000;
        /*font-family: "averta std", sans-serif;*/
      }
      .form-text p {
        font-size: 18px;
        margin-bottom: 10px;
        color: #fff;
      }
      .form-info {
        font-style: italic;
      }
      .form-row {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
      }
      .form-element {
        flex: 1;
        padding: 15px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
      .submit-group input[type="submit"] {
        background-color: #71BF4B;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        padding: 12px 24px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.3s;
      }
      .submit-group input[type="submit"]:hover {
        background-color: #5da93e;
      }

      /* === RESPONSIVE === */
      @media (max-width: 1200px) {
        .banner-2-left {
          width: 100%;
          text-align: center;
          margin-bottom: 30px;
        }
        .banner-2-form {
          width: 90%;
          margin: 0 auto;
        }
        .banner-2-left h3 {
          font-size: 70px !important;
        }
        .form-row {
          flex-direction: column;
        }
      }
      @media (max-width: 992px) {
        .banner-2-grid {
          flex-direction: column;
          padding: 40px 20px;
        }
        .banner-2-left,
        .banner-2-form {
            margin: 0 auto;
        }
        .banner-2-left h3 {
          font-size: 60px !important;
          text-align: center;
        }
        .form-row {
          flex-direction: column;
        }
      }
      @media (max-width: 576px) {
        .banner-2-left h3 {
          font-size: 40px !important;
        }
        .form-text p {
          font-size: 16px;
        }
        .form-element {
          padding: 12px;
          font-size: 14px;
        }
        .submit-group input[type="submit"] {
          font-size: 14px;
        }
      }
      @media (max-width: 480px) {
        .banner-2-left h3 {
          font-size: 32px !important;
        }
        .form-text p {
          font-size: 15px;
        }
        .form-element {
          padding: 10px;
          font-size: 13px;
        }
        .submit-group input[type="submit"] {
          font-size: 13px;
          padding: 10px 20px;
        }
      }
      @media (max-width: 375px) {
        .banner-2-left h3 {
          font-size: 26px !important;
        }
        .form-text p {
          font-size: 14px;
        }
        .form-element {
          padding: 8px;
          font-size: 12px;
        }
        .submit-group input[type="submit"] {
          font-size: 12px;
          padding: 8px 16px;
        }
    }

    /* THANK YOU MESSAGE STYLES */
    #thankYouMessage {
        text-align: center;
        padding: 40px 20px;
        background-color: rgba(255, 255, 255, 0.95);
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
        animation: fadeIn 1s ease-in-out;
      }
      .envelope-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .thankyou-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .envelope svg {
        margin-bottom: 20px;
      }
      .thankyoumessage {
        font-size: 40px;
        color: #71BF4B;
        margin-bottom: 10px;
        /*font-family: "averta std", sans-serif;*/
      }
      .thankyou-info {
        font-size: 20px;
        color: #333;
        margin-bottom: 10px;
        /*font-family: "averta std", sans-serif;*/
      }
      .thankyou-p {
        font-size: 18px;
        color: #555;
        /*font-family: "averta std", sans-serif;*/
      }
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @media (max-width: 768px) {
        .thankyoumessage {
          font-size: 32px;
        }
        .thankyou-info {
          font-size: 18px;
        }
        .thankyou-p {
          font-size: 16px;
        }
      }
      @media (max-width: 480px) {
        .thankyoumessage {
          font-size: 21px;
        }
        .thankyou-info {
          font-size: 16px;
        }
        .thankyou-p {
          font-size: 15px;
        }
      }