section{padding:120px 0}.banner-w{background:url(<?php echo get_stylesheet_directory_uri();?>/inc/assets/images/nptp/beirut_full_pic.jpeg) no-repeat; background-size: cover; background-position: center; } .banner-w *{ color: #ffffff !important; font-family: "Oswald"; text-transform: uppercase; } .banner-w h1{ font-size: 20px; letter-spacing: 1px; margin-top: 0; margin-bottom: 20px; padding-bottom: 0; } .banner-w h2{ font-size: 45px; line-height: 50px; margin-top: 0; margin-bottom: 45px; padding-bottom: 0; } .banner-w a{ font-style: normal; padding: 15px 40px; background: #d19f2a; font-size: 20px; display: inline-block; } .banner-w .img-w{ text-align: right; } .icons-w{ background-color: #c6d7e1; padding-bottom: 280px; } .icons-w h3{ font-size: 42px; font-family: "Oswald"; color: #1a4565; text-align: center; text-transform: uppercase; margin-bottom: 60px; line-height: 42px; } .icons-w .icon-w{ min-height: 100px; align-items: center; display: flex; justify-content: center; margin-bottom: 15px; } .icons-w h5{ font-size: 18px; color: #1a4565; text-transform: uppercase; font-family: "Oswald"; text-align: center; line-height: 20px; max-width: 280px; margin: 0 auto; } .floating-img{ display: block; margin: 0 auto; margin-top: -120px; } .infographic-w{ text-align: center; } .infographic-w img{ max-width: 700px; } .infographic-w h4, .nptp-w h4, .year-2020 h4, .faq h4{ color: #5d88a8; font-size: 20px; font-family: "Oswald"; text-transform: uppercase; } .infographic-w h3, .nptp-w h3, .year-2020 h3, .faq h3{ color: #1a496b; font-size: 42px; font-family: "Oswald"; text-transform: uppercase; line-height: 42px; } .nptp-w{ padding: 0; background-color: #c6d7e1; } .nptp-w .img-w{ height: 100%; background: url(<?php echo get_stylesheet_directory_uri();?>/inc/assets/images/nptp/w3-01.jpg) center center no-repeat; background-size: cover; } .content-w{ max-width: 570px; padding: 120px 0 120px 30px; } p{ font-size: 18px; } p span.ar{ font-family: "Cairo"; color: #76a5a8; font-size: 18px; font-weight: 700; } .year-2020 .img-w{ text-align: center; } #total-counter{ background-color: #d5e7f1; padding: 40px; } #total-counter .col-4.days{ margin-left: auto; text-align: right; } .amount-w{ font-family: "Oswald"; color: #1e5176; text-transform: uppercase; font-size: 20px; margin-bottom: 10px; font-weight: 700; } .amount-w .amount{ font-size: 40px; font-weight: 700; } .progress-bar { width: 100%; background-color: #ffffff; border-radius: 8px; } .progress-bar-fill { display: block; height: 16px; background-color: #13d5e1; border-radius: 8px; transition: width 500ms ease-in-out; } .donation-w{ background-color: #76a5a8; } .donation-w h2{ font-family: "Oswald"; color: #ffffff; font-size: 42px; text-transform: uppercase; } .donation-w form label{ color: #ffffff; font-size: 20px !important; } .donation-w form input, .donation-w form select{ width: 100%; background: transparent; border: 1px solid #ffffff; padding: 10px; color: #ffffff; margin-bottom: 30px; outline: none; } .btn-donate{ position: absolute; right: 15px; bottom: 30px; background: transparent; font-family: "Oswald"; font-size: 20px; font-weight: 700; border: 2px solid #ffffff; padding: 12px 45px; color: #ffffff; outline: none; } .input-error{ border-color: red !important; } .donation-w form select:focus { color: #000000; } section.faq h3{ margin-bottom: 80px; } @media (max-width: 991px){ .icons-w{ padding-bottom: 200px; } } @media (max-width: 767px){ section{ padding: 90px 0; } .banner-w .img-w{ margin-top: 30px; } .icon-w{ margin-top: 45px; } .icons-w h3{ margin-bottom: 0; } .icons-w{ padding-bottom: 180px; } .nptp-w .img-w{ min-height: 540px; } .content-w{ padding: 90px 8px; } } @media (max-width: 575px){ section{ padding: 60px 0; } .btn-donate{ position: static; } .infographic-w img{ padding: 0 8px; max-width: 100%; } .nptp-w .img-w{ min-height: 320px; } .content-w{ padding: 60px 8px; } .banner-w h2{ font-size: 42px; line-height: 42px; } .banner-w{ background-position-x: 52%; } .infographic-w h3, .nptp-w h3, .year-2020 h3{ font-size: 28px; line-height: 28px; } .content-w p{ margin-bottom: 0; } #total-counter{ padding: 10px; } section.faq h3{ margin-bottom: 20px; } } .accordion { background-color: #ffffff; color: #444; cursor: pointer; padding: 30px 0; width: 100%; border: none; text-align: left; font-size: 15px; transition: 0.4s; outline: none !important; font-size: 24px; color: #2a4a5a; } .accordion:after { content: '\002B'; color: #2a4a5a; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border-bottom: 1px solid #e0e0e0; color: #2a4a5a; padding-left: 30px; }}