@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap);.btn-primary,.headlineSt{text-transform:uppercase; padding-top:10px !important;}p,ul li{font-weight:400}.region-container h2,ul li{font-style:normal;font-family:Roboto,sans-serif}.text-align-center{text-align:center!important}.justify-content-center{justify-content:center}.btn-orange{color:#fff}.btn-primary{background:#e34e09;color:#fff;padding:10px 30px}.btn{font-size:20px;line-height:24px;font-weight:500;border:none;border-radius:5px}.headlineSt,.inputstyle{font-weight:600}.text-unicef-blue{color:#1cabe2!important}.img-responsive{display:block;max-width:100%;height:auto}.BannerFull{background-image:url('https://storage.googleapis.com/landing_pages_content/digital_paid/promise_to_children/images/section-1-banner-promise-ring-child.webp')}.hero-text{font-size:20px;line-height:34px;margin-bottom:12px;font-style:italic}.region-container h2{margin-bottom:30px;font-size:36px;line-height:42px;font-weight:500;color:#2159a8}.card-title,.nav li{margin-bottom:0}.card{background-color:#fff;border-radius:1em;overflow:hidden;box-shadow:0 1px 7px 0 rgb(0 0 0 / 25%);height:100%}.card-header{justify-content:center;padding:.5em 1em;background-color:#1cabe2;display:flex;-webkit-box-align:center}.card-container,.col--card{padding-right:15px;padding-left:15px}.debit-card-content,.debit-card-info{background-color:#d3d3d3;text-align:center}.card-title{font-size:18px;text-align:center;color:#fff}.card-content,p,ul li{color:#2d2926}.card-content{font-size:18px;line-height:24px;margin-bottom:30px}.col--card{flex-basis:100%;margin-bottom:18px}.card-container{width:100%;margin-right:auto;margin-left:auto}.join-community-btn{text-decoration:none;white-space:normal;display:inline-block}.footer .footer-element,.join-community-container{padding:20px 0}.media-oembed-content{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive-16by9{padding-bottom:56.25%}.input-text-other-amount{font-weight:600;font-size:17px;position:relative;left:30px}.inputstyle{width:93%}.nav-tabs .nav-link{border-radius:0!important;border:none!important;font-size:22px;line-height:30px;font-weight:700;color:#2159a8!important;text-align:center;width:100%;transition:none;opacity:.6;background:#f1f1f1;outline:0;display:block;padding:10px 15px}.nav-tabs .nav-link.active{background:#fff;border-bottom:1px solid transparent;cursor:unset;box-shadow:0 2px 5px 2px rgb(0 0 0 / 25%);opacity:1}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{background:#fff}.tab-pane{height:auto!important}.disclaimer{font-size:16px;line-height:1.2rem;margin:10px}.btnstyle,p,ul li{line-height:24px}.header-align{padding:13px 0}.payment-mode,.tab-pane{padding:7px;border:1px solid #000;font-size:14px}.debit-card-info{border:1px solid #d3d3d3;border-radius:50%;display:inline-block;width:15px;height:15px}.debit-card-info sup{top:-.4em}.debit-card-content{visibility:hidden;width:200px;color:#000;border-radius:6px;padding:5px 0;position:absolute;z-index:1;font-size:10px;top:650px;left:17%}.debit-card-info:active .debit-card-content,.debit-card-info:hover .debit-card-content{visibility:visible}@media only screen and (max-width:768px){.hero-text-container{background:#fff;padding:30px;padding-top:50px}.col--card{max-width:400px}}@media only screen and (max-width:479px){.responsive-iframe{height:90%}.makedona,.nav-tabs .nav-link{font-size:20px}}.nav-pills .nav-link,h3,p,ul li{font-size:18px}@media (min-width:600px){.card-container{max-width:540px;margin:0 auto}.tab-pane-r4{height:85px}}@media only screen and (min-width:768px){.donor-form{margin-top:30px}.hero-text-container{background:#fff;color:#2d2926;margin:-70px 60px 50px;border-radius:5px;padding:55px;box-shadow:0 1px 7px 0 rgb(0 0 0 / 25%);max-width:1130px}.card-container{width:100%;padding-right:40px;padding-left:40px;margin-right:auto;margin-left:auto;max-width:720px}.col--card{flex-basis:50%}}@media (min-width:992px){.card-container{max-width:960px}.disclaimer{margin:10px 9rem}}@media only screen and (min-width:1200px){.col--card{flex-basis:33%}.card-container{max-width:1140px}}@media (min-width:768px) and (max-width:992px){.padding-0{padding:0}}.header .unicef-logo{-webkit-tap-highlight-color:"transparent";font-family:"Roboto,sans-serif";font-size:18px;color:#333;visibility:visible;box-sizing:inherit;border-bottom:0;padding:6px 0 6px 15px}.BannerFull,.nav-pills .nav-link,body,footer,header,p,ul{font-family:Roboto,sans-serif!important}.header .unicef-logo .logo img{height:50px;max-height:unset;max-width:unset}.footer .unicef-logo .logo img{height:40px}.footer .unicef-legal{text-align:right}.footer .unicef-legal a{margin-right:10px;text-decoration:none}.btnstyle{background:#e34e09}.btn:hover,.nav-pills .nav-link.active{background:#2159a8}.error{color:red;font-size:90%}@media only screen and (min-width:600px) and (max-width:959px){.footer .unicef-logo .logo img{height:25px}.tab-pane-r4 input{height:77%}}@media only screen and (max-width:576px){.tab-pane-image{flex:0 0 auto;width:33.33333333%}.tab-pane-content{flex:0 0 auto;width:66.66666667%}}@media screen and (max-width:768px){.month-donation-statement{display:inline}.makedona{font-size:20px;margin-bottom:.5rem!important}.bottom-container{margin-top:600px}}@media only screen and (max-width:600px){.debit-card-content{top:300px;left:35%}.unicef-logo .logo{justify-content:center}.footer .unicef-logo .logo img,.header .unicef-logo .logo img{height:30px}.footer .footer-element{margin:10px auto;padding:0 15px;text-align:center}.bottom-container{margin-top:600px}}@media only screen and (max-width:481px){.bottom-container{margin-top:600px}.footer .unicef-legal a{font-size:14px}.tab-pane{height:auto!important}.tab-pane-r4{height:70px!important}.headlineSt{font-size:13px; padding-top:10px !important;}}ul{margin-bottom:65px}footer,header{background:#1cabe2}.bluecolor{color:#1cabe2}.colordd{color:#2159a8}ul li{margin-bottom:20px}.lineblue{background:#3ea8d6;height:9px;width:69%;display:block;margin:8px 0 14px}.BannerFull{width:100;padding:60px 0;height:auto;background-size:cover;background-repeat:no-repeat;background-position:center}.widgetBox{background:#fff;padding:20px;border-radius:5px;width:470px;height:auto}.nav-item{width:50%}.nav-pills .nav-link{background:0 0;border:1px solid #363636;border-radius:0;padding:10px 16px;width:100%;color:#363636;font-weight:500;height:100%}.nav-pills{--bs-nav-pills-border-radius:0.375rem;--bs-nav-pills-link-active-color:#fff;--bs-nav-pills-link-active-bg:#1cabe2;--bs-nav-pills-link-active-boder:1px solid #1cabe2}.tab-2 .nav-item{width:25%}.inputstyle{margin:10px 0;font-size:17px;padding:10px 10px 10px 37px;border:1px solid #000}.btnstyle{width:100%;appearance:none;border:none;padding:10px;font-size:21px;font-weight:500;margin-top:30px}.makedona{font-weight:900;font-size:41px}.tab-pane-image img{height:100px!important}@media screen and (max-width:600px){.widgetBox{width:100%}.nav-pills .nav-link{font-size:15px}}
@media screen and (max-width: 768px) {



 .makedona{font-weight:700; font-size:22px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
}

.form-control { font-size: .85rem !important;}

.form-select { font-size: .85rem !important;}

    .headlineSt {
        font-size: 11px !important;
padding-top:5px !important;
   
    }

.mv-mb { margin-bottom:5px !important; }

.btnstyle { margin-top: 0px !important; }


.myinptext{ font-size:8px !important;
 line-height: 10px !important;}

  /* remove desktop banner image */
  .BannerFull {
        position: relative;
        top: 0;
  }

  /* widget on top */
  .widgetBox {
        left: 0;
        position: absolute;
        top: 100%;
        width: 100%;
  }


}
}

@media only screen and (min-width:600px) and (max-width:959px){.BannerFull{padding:115px 0}.tab-content{display:flex;/*height:170px*/}.tab-pane-image img{height:150px!important}.tab-pane{width:100%}}

#modeOfDonation {
                  border: 1px solid black;
                  padding: 8px;
                  padding-left: 15px;
                  }
                  .inputstyle {
                  width: 90%;
                  }
                  .tab-pane-content {
                  text-align: center;
                  }
                   #join-community-btn {
            cursor: pointer;
            display: inline-block;
            text-align: center;
            }
            /* Style the image inside the button */
            .thank-you-btn {
            width: 400px;
            margin-bottom: 20px;
            }
            /* Style the modal (popup) */
            .modal {
            display: none; /* Hidden by default */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            padding-top: 0px;
            z-index: 1000;
            }
            /* Modal content */
            .modal-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 800px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            max-height: 85vh; /* Set a maximum height for the modal */
            overflow-y: scroll; /* Always show vertical scrollbar */
            scrollbar-color: #888 #f1f1f1;
            z-index: 1000;
            }
            /* Optional: Style the scroll bar */
            .modal-content::-webkit-scrollbar {
            width: 8px;
            }
            .modal-content::-webkit-scrollbar-thumb {
            background-color: #888;
            border-radius: 4px;
            }
            .modal-content::-webkit-scrollbar-thumb:hover {
            background-color: #555;
            }
            /* Close button */
            .close {
            color: #aaa;
            font-size: 40px;
            font-weight: bold;
            float: right;
            z-index: 9999;
            position: fixed;
            }
            .close:hover,
            .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
            }
            /* Style the content */
            .modal-content h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #004B87;
            }
            .modal-content p {
            text-align: left;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
            margin-bottom: 10px;
            }
            .modal-content ul {
            text-align: left;
            margin: 20px 0;
            }
            .modal-content li {
            text-align: left;
            margin-bottom: 10px;
            }
            .modal-content hr {
            border: 0;
            border-top: 1px solid #ddd;
            margin: 20px 0;
            }
            @media (min-width: 700px) {
            .modal-content {
            text-align: justify;
            }
            }
            /*  hide carousel indicators */
            .carousel-indicators.hidden {
            display: none !important;
            }
            s2body {
                  font-family: Arial, sans-serif;
                  margin: 0;
                  padding: 0;
                  background-color: #f9f9f9;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 100vh;
                  }
                  /* The main content box */
                  .s2content-box {
                  background: white;
                  padding: 20px;
                  border-radius: 10px;
                  box-shadow: 0 1px 7px 0 rgb(0 0 0 / 25%);
                  text-align: center;
                  max-width: 400px;
                  }
                  /* Individual sections */
                  .s2section {
                  padding: 20px 0;
                  }
                  .s2icon {
                  width: 50px;
                  margin-bottom: 10px;
                  }
                  /* Partial Divider */
                  .s2partial-divider {
                  width: 50px;
                  height: 1px;
                  background: lightgray;
                  margin: auto;
                  }
                  /* Desktop View */
                  @media (min-width: 768px) {
                  .s2content-box {
                  max-width: 1000px;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  text-align: center;
                  padding: 30px;
                  }
                  .s2section {
                  width: 30%;
                  padding: 0 20px;
                  }
                  .s2partial-divider {
                  height: 60px;
                  width: 1px;
                  background: lightgray;
                  }
                  }