*{ margin: 0; padding: 0; }
        html{scroll-behavior: smooth;}
        body{font-family:"Inter", sans-serif; }
        .panel-scroll{overflow-x: scroll;}

        :root {
        --wadew-red: #E3231D;
        --wadew-green: #1FB39D;
        --wadew-grey: #7b7b7b;     
        }

  
        h1,
        h2,
        h3,
        h4,
        h5,
        nav{font-family: "Josefin Sans", sans-serif;font-style: italic; }
        h2{font-weight: 200px; color:#1FB39D;  font-size: 20px; text-transform: uppercase; }
        h3{font-weight: 100px; color:#1FB39D;  font-size: 15px; text-transform: uppercase; }
        h4{font-weight: 100px; color:#7b7b7b;  font-size: 15px;}
        ul.list li{font-size: 12px; margin: 0 0 8px 0}

        h1 a{position: absolute; width: 100%; height: 50px; display: block; left: 0; top: 0}

        .pricing div,
        ul li, p{ font-family:  "Inter", sans-serif; font-size: 13px; }
        ul li, p{color: #7b7b7b}
        .closing h2{font-size: 15px; text-align: center; display: block; width: 100%}
        .btn-cta{font-family:  "Inter", sans-serif; font-size: 13px; }



        section.photo div{width: 100%; min-height:264px; display: block; margin: 0 0 12px 0; background-size: cover; }
        .preweddinghk-1{background:url(images/img-preweddinghk-1.webp);}
        .preweddinghk-2{background:url(images/img-preweddinghk-2.webp);}
        .preweddinghk-3{background:url(images/img-preweddinghk-3.webp);}
        .preweddinghk-4{background:url(images/img-preweddinghk-4.webp);}
        .preweddinghk-5{background:url(images/img-preweddinghk-5.webp);}
        .preweddinghk-6{background:url(images/img-preweddinghk-6.webp);}
        .preweddinghk-7{background:url(images/img-preweddinghk-7.webp);}

        .preweddingwt-1{background:url(images/img-preweddingwt-1.webp);}
        .preweddingwt-2{background:url(images/img-preweddingwt-2.webp);}
        .preweddingwt-3{background:url(images/img-preweddingwt-3.webp);}
        .preweddingwt-4{background:url(images/img-preweddingwt-4.webp);}
        .preweddingwt-5{background:url(images/img-preweddingwt-5.webp);}
        .preweddingwt-6{background:url(images/img-preweddingwt-6.webp);}
        .preweddingwt-7{background:url(images/img-preweddingwt-7.webp);}

        .weddingday-1{background:url(images/img-weddingday-1.webp);}
        .weddingday-2{background:url(images/img-weddingday-2.webp);}
        .weddingday-3{background:url(images/img-weddingday-3.webp);}
        .weddingday-4{background:url(images/img-weddingday-4.webp);}
        .weddingday-5{background:url(images/img-weddingday-5.webp);}
        .weddingday-6{background:url(images/img-weddingday-6.webp);}
        .weddingday-7{background:url(images/img-weddingday-7.webp);}

        .maternity-1{background:url(images/img-maternity-1.webp);}
        .maternity-2{background:url(images/img-maternity-2.webp);}
        .maternity-3{background:url(images/img-maternity-3.webp);}
        .maternity-4{background:url(images/img-maternity-4.webp);}
        .maternity-5{background:url(images/img-maternity-5.webp);}
        .maternity-6{background:url(images/img-maternity-6.webp);}
        .maternity-7{background:url(images/img-maternity-7.webp);}


        

        .feedback{display: flex; flex-direction: row; }
        .feedback img{height: 500px; width: auto; margin: 0 10px 0 0}


        section.text h2{font-size: 18px; color: #7B7B7B;text-transform: none; font-weight: normal; font-style: normal}
        section.text h3{font-size: 13px; color: #7B7B7B;text-transform: none; font-weight: normal; font-style: normal}
        section.text h4{font-size: 13px; color: #7B7B7B;text-transform: none; font-weight: bold; margin: 12px 0 0 0}
        section.text li{font-size: 11px;color: #7B7B7B;font-style: italic; }
        section.text p{font-size: 11px;color: #7B7B7B;font-style: italic; }


        p{margin: 0 0 20px 0}
        header{background: #fff}
        section{margin: 0 0 30px 0}
        section div{margin: 16px}
        section.closing{margin: 90px 0 0 0}
        section.text{margin: 0 20px}
        h1{background: url(https://photobywadew.wordpress.com/wp-content/uploads/2025/08/logo-wade.png) no-repeat; position: relative; background-size: contain; margin: 18px 8px 10px; width: 212px; height: 40px; display: block; text-indent: -9999px}
        nav{display: inline-flex;width: max-content; align-items: center; column-gap: 2px; }
        nav a{color: #000; text-decoration: none; padding: 10px; font-size: 14px}
        nav a.current{color: #1FB39D; font-weight: 500}

        nav a:nth-child(3).current{color: #E3231D; font-weight: 500}
        .btn-cta.weddingday{background:#E3231D} 
        .pricing.weddingday h2,
        .weddingday h2{color:#E3231D }
        .pricing.weddingday div {border-left: 1px solid #E3231D}
        .weddingday h3{color:#E3231D}
        .bar-discount.weddingday{background:#E3231D}
        .bar-discount.weddingday .btn-cta{color:#E3231D}

        .weddingday p{color: #7b7b7b; font-weight: bold}
        .weddingday div ul:nth-child(1){font-style: italic;}

        section.logo img{width: 100%}



        ul.list{list-style-position: inside; margin: 5px 0 20px 3px}
        .pricing div p{color:#7b7b7b; font-weight: bold; }
        .pricing div ul.price{list-style: square; list-style-position: inside;}
        .pricing div ul.price li{color:#1FB39D }
        .img{background-image: var(--bg-image); background-repeat: no-repeat; background-size: contain; width: 100%;min-height: 264px; display: block; margin:0 0 12px 0}
        .img{ opacity: 0;  transition: opacity 1s ease-in;}
        .img.loaded {  opacity: 1;}

        .img.vertical{background-image: var(--bg-image); background-repeat: no-repeat; background-size: cover; width: 100%;height: 500px; display: block; margin:0 0 12px 0}


        .pricing{display: inline-flex; margin: 20px 8px 8px 0; position: relative;}
        .pricing h2{font-weight: 300; font-style: italic; color:#1FB39D }
        .pricing div{ width:auto; min-width: 260px; display: flex; flex-direction: column; padding: 0 0 0 8px; margin: 0 0 0 8px;  border-left: 1px solid #1FB39D; }
        .pricing div ul{list-style: none; color: #7b7b7b; margin: 0 0 20px 0}
        .pricing div ul li{ margin: 0 0 8px 0; font-size: 12px }
        .btn-cta{display: flex; width: 100%; height: 40px; text-decoration: none;justify-content: center; align-items: center; font-weight: bold; background: #1FB39D; color: #fff; margin-top: auto; }    
        .btn-cta i{margin: 0 8px 0 0; font-size: 18px}
        .closing .btn-cta{width:280px; margin: 0  auto 10px}

        .bar-discount{background:#1FB39D; color: #fff;display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: fixed;bottom: 0; width: 100%}
        .bar-discount div{margin: 12px 20px;}
        .bar-discount h2{color: #fff}
        .bar-discount h3{color: #fff; font-weight: normal; font-style: normal; text-transform: none;letter-spacing: -0.03em}
        .bar-discount p{color: #fff; font-size: 11px; font-style: italic;}
        .bar-discount h2 span{font-weight: bold; font-size: 18px; margin: 0 0 0 8px}
        .bar-discount .btn-cta{background: #fff; width: 170px; color:#1FB39D; align-self: center;margin: 0; letter-spacing: -0.04em }

        .post-ig{margin: 90px auto; max-width: 540px}
        .post-ig iframe{margin: 30px auto}

        section.logo{margin: 90px 20px; display: grid;
              grid-template-rows: auto; /* 1 rows */
              grid-template-columns: auto auto ; /* 2 columns */
             gap: 12px;  }


        .btn-lang{color:#bbb; position: absolute; top: 22px; right: 20px; border: 1px solid #ccc; padding: 5px; font-size: 12px; border-radius: 3px; text-decoration: none;}

        .panel-feedback{margin: 30px auto 120px}

        .panel-feedback h2{margin: 50px 0 0 20px}


        .panel-profile{margin: 20px 10px; display: flex; flex-direction: row }
        .profile{width: 50px; height:50px; margin: 0 10px 0 0; position: relative; border-radius: 100px; display: block; background: url(images/profile-wade-1.webp) no-repeat; background-size: cover;}
        .profile:after{content: "WADE W. " ; width: 100%; text-align: center; font-style: italic;   color: #333; font-size: 9px; position: absolute; top: 55px;}
        .panel-profile ul{list-style: none;}
        .panel-profile ul li{font-size: 11px;   line-height: 20px; color: #837A77; border-radius: 100px; display: flex;}
 
        .accordion { max-width: 780px; margin: 0 20px 50px; display: grid; gap: 10px; }
          details {
            background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; overflow: clip;
          }
          summary {
            cursor: pointer; list-style: none;
            padding: 16px 18px; font-weight: 700; display: flex; gap: 10px; align-items: center;
          }
          summary::after {
            content: "▸"; margin-left: auto; font-size: 18px; line-height: 1;
            color: #666; transition: transform .2s ease;
          }
          details[open] summary::after { transform: rotate(90deg); }
          summary:hover { background: #fff; }

          div.content{margin: 0}
          .content {
            padding: 0 18px 16px 18px; color: #555; line-height: 1.7; display: grid; gap: 10px;
            animation: fadeSlide .18s ease;
          }
          .content p{margin: 0}
          .content ul { margin: 0; }
          .content li { margin: 0 0 8px 0; font-size: 14px }
          @keyframes fadeSlide { from {opacity:0; transform: translateY(-4px);} to {opacity:1; transform: translateY(0);} }
         



        @media screen and (min-width: 1200px) {

        header{margin: 0 auto; width: max-content}
        nav{width: 100%; display: flex;justify-content: space-between;}
        h1{margin: 50px auto}
        
        .panel-scroll{overflow: hidden;}

        .panel-scroll.feedback{overflow-x: scroll;}
        .panel-feedback h2{margin: 50px 0 0 0}
        .feedback img{height: 450px}

        .accordion { max-width: 900px; margin: 0 auto 50px; display: grid; gap: 10px; }


        section.photo{width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap:10px;}

        section.photo div:first-child{width: 900px; height: 570px}
        section.photo div{ width: 445px; height: 282px; display: block;  margin: 0;  }


        .preweddinghk-1{background:url(images/img-preweddinghk-1-desktop.jpg);}
        /*.preweddinghk-2{background:url(images/img-preweddinghk-2-desktop.png);}
        .preweddinghk-3{background:url(images/img-preweddinghk-3-desktop.png);}
        .preweddinghk-4{background:url(images/img-preweddinghk-4-desktop.png);}
        .preweddinghk-5{background:url(images/img-preweddinghk-5-desktop.png);}
        .preweddinghk-6{background:url(images/img-preweddinghk-6-desktop.png);}
        .preweddinghk-7{background:url(images/img-preweddinghk-7-desktop.png);}*/

        .preweddingwt-1{background:url(images/img-preweddingwt-1-desktop.jpg);}
        /*.preweddingwt-2{background:url(images/img-preweddingwt-2-desktop.png);}
        .preweddingwt-3{background:url(images/img-preweddingwt-3-desktop.png);}
        .preweddingwt-4{background:url(images/img-preweddingwt-4-desktop.png);}
        .preweddingwt-5{background:url(images/img-preweddingwt-5-desktop.png);}
        .preweddingwt-6{background:url(images/img-preweddingwt-6-desktop.png);}
        .preweddingwt-7{background:url(images/img-preweddingwt-7-desktop.png);}*/


        .weddingday-1{background:url(images/img-weddingday-1-desktop.jpg);}
        /*.weddingday-2{background:url(images/img-weddingday-2-desktop.png);}
        .weddingday-3{background:url(images/img-weddingday-3-desktop.png);}
        .weddingday-4{background:url(images/img-weddingday-4-desktop.png);}
        .weddingday-5{background:url(images/img-weddingday-5-desktop.png);}
        .weddingday-6{background:url(images/img-weddingday-6-desktop.png);}
        .weddingday-7{background:url(images/img-weddingday-7-desktop.png);}*/

        .maternity-1{background:url(images/img-maternity-1-desktop.jpg);}


     



        section.photo{ width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-around; gap:10;}
        section.photo div.img:first-child{ width: 900px; height: 570px }
        section.photo div.img{ width: 50%; height: 282px }

        section.photo div:first-child .img{ width: 900px; height: 570px }
        section.photo .img{ width: 50%; height: 282px }

        .panel-scroll{width: 900px; margin: 0 auto}
        div.pricing{display: flex}
        div.pricing div{ width: 100%; margin: 0 10px 0 0 }

        section{max-width: 900px; margin: 0 auto}

        section.closing{max-width: 900px; margin: 90px auto}

        .bar-discount{ width: 380px; height: auto; position: fixed;  bottom:20px;  right: 0;  transform: translateY(-50%);  z-index: 999; /* Ensure it stays on top */}
        .bar-discount p{margin: 0}
        .bar-discount h3{font-size: 13px}
        .bar-discount p{font-size: 10px}


        .img.vertical{background-image: var(--bg-image); background-repeat: no-repeat; background-size: cover; max-width: 400px;height: 500px; display: block; margin:0 0 12px 0}
        
        section.text{max-width: 800px; margin: 0 auto}


        section.logo{max-width:800px; margin: 90px auto; display: grid;
              grid-template-rows: auto; /* 1 rows */
              grid-template-columns: auto auto auto auto ; /* 2 columns */
             gap: 12px;  }

        .panel-profile{position: absolute; right: 0; top: 0; max-width: 800px; margin: 30px auto; display: flex; flex-direction: row; justify-content: flex-start;}    
        .profile{width: 60px; height:60px; order: 2;  border-radius: 100px; display: block; background: url(images/profile-wade-1.webp) no-repeat; background-size: cover;}
        .profile:after{top: 65px;}
        .panel-profile ul{margin: 0 10px 0 0; order: 1}
        .panel-profile ul li{text-align: right; display: block; font-size: 10px; letter-spacing: 0}



        .btn-lang{top: 25px; left:25px; position: absolute; width: 20px; text-align: center; }


        }