/*!
Theme Name: sncc
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sncc
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

sncc is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --primary: #002863;
  --primary-70: rgba(0, 40, 99, 0.7);
  --primary-30: rgba(0, 40, 99, 0.3);
  --secondary: #fe0000;
  --secondary-70: rgba(254, 0, 0, 0.7);
  --secondary-30: rgba(254, 0, 0, 0.3);
  --roboto-font: "Roboto", serif;
  --lato-font: "Lato", serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

a:hover,
a:active,
a {
  color: none;
  text-decoration: none;
}
body {
  font-family: var(--roboto-font);
}
.sncc-section {
  padding: 90px 0;
}
.sncc-section-sm {
  padding: 45px 0;
}
.sncc-section-t-sm {
  padding: 45px 0;
}
.sncc-section-t {
  padding-top: 90px;
}
.sncc-section-b {
  padding-bottom: 90px;
}
.custom-logo {
  width: 80px;
}
.top-header {
  background: var(--primary);
  padding: 4px 0;
}
.top-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-header-container p {
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.footer-followus-header,
.followus-header {
  list-style: none;
  display: flex;
  justify-content: end;
  align-items: center;
}
.footer-followus-header {
  justify-content: flex-start;
}
.footer-followus-header li:not(:last-child),
.followus-header li:not(:last-child) {
  margin-right: 8px;
}
.social-icon * {
  color: #fff;
  font-size: 16px;
  width: 18px;
  height: 18px;
}
.site-header {
  display: flex;
  align-items: center;
  padding: 8px 0;
  justify-content: space-between;
}
.site-header-container {
  -webkit-box-shadow: 9px -1px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 9px -1px 8px rgba(0, 0, 0, 0.2);
}
.header_button_container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.header_button {
  display: block;
  background-color: var(--secondary);
  padding: 12px 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
}
.hamburger {
  display: none;
  cursor: pointer;
}
.donate_button {
  background-color: var(--primary);
}
.main_menu {
  display: flex;
  gap: 46px;
  align-items: center;
}

.main_menu li {
  list-style: none;
  position: relative;
}
.main_menu li a {
  font-size: 16px;
  color: #000;
  font-weight: 450;
}
.main-navigation > div > ul > li > ul {
  position: absolute;
  top: 70px;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #ffffff;
  width: 200px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  transition: 0.3s linear;
  -webkit-box-shadow: 0 5px 15px #00000038;
  box-shadow: 0 5px 15px #00000038;
}

.main-navigation > div > ul > li:hover > ul {
  opacity: 1;
  top: 30px;
  visibility: visible;
  -webkit-transition: 0.3s linear;
  -o-transition: 0.3s linear;
  transition: 0.3s linear;
  z-index: 12;
}
.main-navigation > div > ul > li > span {
  transition: 0.3s linear;
}
.main-navigation > div > ul > li:hover > span {
  rotate: -180deg;
}
.main-navigation > div > ul > li > ul > li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.main-navigation > div > ul > li > ul > li > a {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
}
.uk-offcanvas-bar {
  background: var(--primary);
  padding: 0;
  width: 250px;
}

.offcanvas-logo {
  text-align: center;
  padding: 35px 10px;
  background-color: #fff;
}

.offcanvas-logo img {
  min-width: 150px;
}

.uk-offcanvas-bar > div > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.uk-offcanvas-bar > div > ul > li {
  position: relative;
}
.uk-offcanvas-bar > div > ul > li.menu-item-has-children ul {
  display: none;
  list-style: none;
  margin: 0;
  background-color: rgba(8, 72, 192, 0.3);
  padding: 0;
}
.uk-offcanvas-bar > div > ul > li.menu-item-has-children ul > li > a {
  display: block;
  padding: 10px 10px 10px 20px;
  font-size: 13px;
}
.uk-offcanvas-bar > div > ul > li > a {
  padding: 10px;
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.uk-offcanvas-bar
  > div
  > ul
  > li.menu-item-has-children
  > ul
  > li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.uk-offcanvas-bar > div > ul > li.menu-item-has-children span {
  position: absolute;
  right: 15px;
  top: 6px;
  font-size: 14px;
}
#offcanvas-reveal .offcanvas__button {
  padding: 0 24px;
  margin-top: 24px;
}
#offcanvas-reveal .offcanvas__button > a {
  display: block;
  background-color: var(--secondary-70);
}
#offcanvas-reveal .offcanvas__button > a:first-child {
  margin-bottom: 16px;
}
.hero__section,
.hero__slideshow_item img {
  height: calc(100vh - 128px);
  width: 100%;
  object-fit: cover;
  position: relative;
}
.hero__slideshow_item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 128px);
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.2);
}
.hero__section_header {
  z-index: 2;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
}
.hero__section_header h1 {
  font-size: 44px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.25;
  color: #fff;
  font-family: var(--lato-font);
}

.aboutus__section {
  position: relative;
  background-image: url("./Assets/image/5602.jpg");
  width: 100%;
}
.aboutus__section::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  z-index: 1;
}

.aboutus__section .aboutus__content {
  z-index: 2;
  position: relative;
}
.aboutus-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-right: 125px;
}
.aboutus-imgcontainer > img {
  height: 520px;
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.aboutus-imgcontainer {
  position: relative;
}
.aboutus-imgcontainer .floating-img {
  position: absolute;
  left: -70px;
  top: 50%;
  background-color: #fff;
  transform: translateY(-50%);
  padding: 18px;
  border-radius: 100%;
  border: 2px solid var(--secondary);
}
.aboutus-imgcontainer .floating-img img {
  width: 100px;
}
.aboutus-container h2 {
  font-size: 38px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  font-family: var(--lato-font);
}
.aboutus-container p {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 400;
  line-height: 1.7;
  font-style: var(--roboto-font);
  margin: 28px 0;
}
.aboutus-container a {
  display: block;
  padding: 12px 28px;
  color: #fff;
  border-radius: 4px;
  width: max-content;
  background-color: var(--primary);
}
.aboutus-container span {
  font-size: 14px;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: 10px;
}

.ourpresident__section {
  position: relative;
}

.ourpresident__section::after {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  background-color: #002863;
}
.ourpresident-content {
  position: relative;
  z-index: 2;
}
.ourpresident__presimg img {
  max-height: 650px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ourpresident__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ourpresident__container span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}
.ourpresident__container h3 {
  color: rgba(255, 255, 255);
  font-size: 44px;
  text-transform: capitalize;
  font-weight: 800;
}

.ourpresident__container ul {
  margin-top: 34px;
  list-style: none;
}
.ourpresident__container ul li:not(:last-child) {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.ourpresident__container ul li {
  display: flex;
  align-items: center;
  gap: 24px;
}

.ourpresident__container ul li img {
  width: 48px;
}
.ourpresident__container ul li p {
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  font-family: var(--lato-font);
}
.ourpurpose-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 45px;
}
.ourpurpose-navcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.ourpurpose-navcontainer .ourpurpose-nav {
  width: 42px;
  height: 42px;
  border-radius: 100%;
  background-color: var(--secondary);
  display: flex;
  justify-content: center;
  align-items: center;
}
.ourpurpose-navcontainer.bottom {
  display: none;
}
.ourpurpose-navcontainer .ourpurpose-nav svg {
  color: #fff;
  width: 18px;
  height: 18px;
}
.ourpurpose-header-content h2 {
  font-size: 38px;
  color: rgb(0, 0, 0);
  font-weight: 700;
}
.ourpurpose-header-content span {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 400;
}
.ourpurpose-item-container {
  display: block;
  position: relative;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
}
.ourpurpose-item-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0px 14px 28px 14px;
  justify-content: flex-end;
  background: linear-gradient(
    178.87deg,
    rgba(0, 0, 0, 0) 30.09%,
    #000000 99.06%
  );
}
.ourpurpose-item-content div {
  background-color: var(--primary-70);
  padding: 16px;
  border-radius: 100%;
  margin-bottom: 14px;
}
.ourpurpose-item-content img {
  width: 42px;
  height: 42px;
}
.ourpurpose-item-container > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 500px;
}
.sponsor__card__body {
  padding: 12px 14px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
}
.sponsor__card__body:hover {
  background-color: #fff;
}
.sponsor__card__body img {
  width: 90%;
  max-height: 80px;
}
.sponsor__card__body p {
  font-weight: 500;
  font-size: 16px;
  margin-top: 10px;
}
.invitation__section,
.single-team__header {
  background: linear-gradient(
    -45deg,
    #ee7752,
    var(--primary-30),
    var(--secondary-30),
    #23d5ab
  );
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
.invitation__content > div > div:not(:last-child) .invitation__item {
  padding-right: 30px;
  margin-right: 30px;
  border-right: 1px solid rgba(4, 38, 90, 0.179);
}
.invitation__header {
  display: flex;
  margin-bottom: 58px;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.invitation__header h2 {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  color: var(--primary);
}
.invitation__header p {
  margin-top: 24px;
  width: 60%;
  font-size: 16px;
  font-weight: 500;
  color: var(--primary-70);
}
.invitation__item {
  text-align: center;
}
.invitation__item h4 {
  color: var(--primary);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
}
.invitation__item p {
  font-size: 16px;
  font-weight: 450;
  color: var(--primary-70);
  margin: 28px 0 38px 0;
}
.invitation__item a {
  padding: 14px 24px;
  background-color: var(--primary);
  color: #fff;
  line-height: auto;
  font-size: 16px;
  border-radius: 4px;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

 .gallery__content h2 {
  font-style: 38px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 38px;
}
 .gallery__content img {
  height: 340px;
  width: 100%;
  object-fit: cover;
}
.gallery_viewmore_container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 38px;
}
.gallery_viewmorebtn {
  display: block;
  border-radius: 4px;
  padding: 14px 24px;
  background-color: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

.site-footer {
  background-image: url(Assets/image/bg-goot.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}
.site-footer::after {
  content: " ";
  background-color: rgba(0, 40, 99, 0.85);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.site-footer * {
  z-index: 4;
}
.site-footer > img {
  position: absolute;
  z-index: 3;
  top: 0px;
  right: 0;
  object-fit: cover;
  width: 450px;
  height: 450px;
}
.footer-siteinfo > *:not(:last-child) {
  margin-bottom: 32px;
}
.footer-siteinfo ul {
  list-style: none;
}
.footer-siteinfo ul li {
  font-size: 16px;
}
.footer-siteinfo ul.links li:not(:last-child) {
  margin-bottom: 14px;
}
.footer-siteinfo ul li a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
}
.footer-siteinfo img {
  width: 80px;
}
.footer-siteinfo h4 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
}
.bottom-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  padding-top: 14px;
  padding-bottom: 14px;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom-footer-links ul {
  display: flex;
  gap: 15px;
  list-style: none;
}

.bottom-footer a,
.bottom-footer p {
  color: #fff;
  font-size: 12px;
  font-weight: 300;
}

.genneralbanner-imgcontainer img {
  max-height: 450px;
  width: 100%;
  object-fit: cover;
}

.genneralbanner-imgcontainer {
  position: relative;
}
.genneralbanner-imgcontainer::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.genneralbanner-imgcontainer .genneralbanner-text {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.genneralbanner-text h1,
.genneralbanner-imgcontainer .genneralbanner-text h1 {
  color: #fff;
  font-size: 44px;  
  text-align: center;
  font-weight: 700;
}
.gallery-page__banner h1 {
  color: #000;
  text-align: center;
}
.genneralbanner-breadcrumbs {
  background-color: var(--primary);
  padding: 4px 0;
}

.breadcrumbs-lists {
  list-style: none;
  display: flex;
}
.breadcrumbs-lists li {
  position: relative;
}
.breadcrumbs-lists li:not(:last-child)::after {
  content: ">";
  font-size: 12px;
  color: #fff;
  margin-left: 8px;
}
.breadcrumbs-lists li:not(:last-child) {
  margin-right: 10px;
}

.breadcrumbs-lists li a {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}
.teammembers h2,
.boardof-directors h2 {
  font-size: 34px;
  text-align: center;
  margin-bottom: 45px;
  font-weight: 600;
}

.teamprofile-item {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  -webkit-box-shadow: 2px 3px 11px -3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 3px 11px -3px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 3px 11px -3px rgba(0, 0, 0, 0.75);
}
.teamprofile-item img {
  max-height: 250px;
  width: 100%;
  min-width: 250px;
  object-fit: cover;
}
.teamprofile-content {
  padding: 14px 18px;
  position: relative;
}
.teamprofile-content h3 {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
}
.teamprofile-content .teamcard-position {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
}
.teamprofile-content p {
  color: rgba(0, 0, 0, 0.8);
}
.team-link__container {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: var(--primary);
}
.team-link__container span {
  color: #fff;
}
.eachcontact-info {
  padding: 18px 24px;
  border-radius: 4px;
  background-color: var(--primary);
}
.eachcontact-info {
  display: flex;
  align-items: center;
  gap: 24px;
}
.eachcontact-info h3 {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 300;
  margin-bottom: 2px;
  color: #ffffffb8;
}

.eachcontact-info p {
  font-size: 20px;
  color: #fff;
  font-weight: 400;
}

.eachcontact-info img {
  filter: brightness(0) invert(1);
  width: 40px;
  opacity: 0.8;
  height: 40px;
}

.contact-form {
  background-color: #d0d0d0;
  padding: 24px;
}

.contact-form h2 {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 10px;
}

.wpcf7 input {
  width: 100%;
  padding: 12px 18px;
  border-radius: 4px;
  outline: none;
  border: 1px solid #000;
}
.wpcf7 textarea {
  width: 100%;
  outline: none;
  padding: 12px 18px;
  border-radius: 4px;
  border: 1px solid #000;
  resize: vertical;
}

.wpcf7 label {
  font-size: 14px;
  font-weight: 400;
  color: #000;
}

.wpcf7 p {
  margin-bottom: 12px;
}

.wpcf7 input[type="submit"] {
  background-color: var(--primary);
  color: #fff;
  padding: 12px 18px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
}
.single-team__imagecontainer img {
  height: 400px;
  object-fit: cover;
}
.single-team__content h1 {
  color: #000;
  font-weight: 600;
  margin-bottom: 16px;
}
.single-team__content p.profile-line {
  color: rgba(0, 0, 0, 0.75);
}
.single-program__header img {
  height: 450px;
  width: 100%;
  object-fit: cover;
}

.single-program__header {
  position: relative;
}
.single-program__header::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.2);
}
.single-program__header h1 {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
}
.roadblock__body{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.roadblock__body img{
  max-height: 650px;
  margin-bottom: 24px;
}