/*  Title   */

.title {
    font-weight: 600;
    line-height: 1.3;
    color: #222;
    margin-bottom: 0.5em;
}

.serif-font{
    font-family: "PT Serif", serif;
  ;
}
.title-lg {
    font-size: 3rem; /* ~40px */
    line-height: 1.25;
    font-weight: 700;


}

.title-md {
    font-size: 2rem; /* ~30px */
    line-height: 1.25;
    font-weight: 500;
}

.title-sm {
    font-size: 1.75rem; /* ~20px */
    line-height: 1.30;
    font-family: "PT Serif", serif;


}

.title-smm {
    font-size: 1.5rem; /* ~20px */
    line-height: 1.30;

}
.title-sx {
    font-size: 1.25rem; /* ~20px */
    line-height: 1.30;
}

.leading{
    font-size: 1.15rem;
    color: rgb(123, 123, 123);
}

.title-sxx {
    font-size: 1.1rem; /* ~20px */
    line-height: 1.30;

}
/*  Gaps    */

.mt5  { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }

.pl5  {
    padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.pl25 { padding-left: 25px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }

.pr5  {
    padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr25 { padding-right: 25px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }

.white-text{
    color: #ffffff;
}
.grey-text{
    color: rgb(123, 123, 123);
}
body {
    background: linear-gradient(to bottom, #ffffff 0%, rgba(114, 202, 255, 0) 100%);
    color: rgb(20, 20, 19);
}


body1 {
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    z-index: 0;
    overflow-x: hidden;
}

body1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0; /* always at bottom of content */
    width: 100%;
    height: 100vh; /* can tweak to smaller portion if needed */
    background: rgb(5 12 25 / 70%);
    background-image: url("../images/water-bg.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: -1;
    animation: floatBg 20s ease-in-out infinite alternate;
}

/* Subtle animation for the background */
@keyframes floatBg {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}


.top-section{
    padding: 10px 0 ;
}

.top-section a{
    color: #6e7b8c;
}

.hero-section{
    padding: 0px 0 0px;
}

.card {
    background: #ffffff;
    padding: 20px;
    border-radius: 1.2rem;
    transition:
            transform 0.3s ease,
            color 0.2s ease;
}

.card02 {
    background: #ffffff;
    padding: 30px 30px 40px;
    border-radius: 1.2rem;
    transition:
            transform 0.3s ease,
            color 0.2s ease;
}


.bg-red{
    background: #ffd4d4;
}
.bg-orange{
    background: #efe2da;
}
.bg-blue{
    background: #e0efff;
}
.bg-green{
    background: #dfffde;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    color: #fff;
}

.video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.content-container {
    position: relative;
    z-index: 3;
    padding: 60px 30px;
    display: flex;
    align-items: center;
    height: 80vh;
}


.btn {
    color: #fff!important;
    border: none;
    border-radius: 0.5rem;
    padding: 12px 32px;
    font-weight: bold;
    line-height: 1.5;
    font-size: 1rem;
    cursor: pointer;

    transition:
            background 0.3s ease,
            transform 0.2s ease,
            box-shadow 0.3s ease;
}

.btn:hover {
    transform: scale(1.03);
}

/* Blue button */
.btn-blue {
    background: linear-gradient(135deg, #0d6efd, #0056d2);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

.btn-blue:hover {
    background: linear-gradient(135deg, #0056d2, #003eaa);
    box-shadow: 0 6px 16px rgba(0, 85, 200, 0.4);
}

/* Green button */
.btn-green {
    background: linear-gradient(135deg, #16c372, #0e9f5a);
    box-shadow: 0 4px 12px rgba(14, 159, 90, 0.3);
}

.btn-green:hover {
    background: linear-gradient(135deg, #0e9f5a, #097847);
    box-shadow: 0 6px 16px rgba(14, 159, 90, 0.4);
}

/* Orange button */
.btn-orange {
    background: linear-gradient(135deg, #c35e16, #f67920);
    box-shadow: 0 4px 12px rgba(14, 159, 90, 0.3);
}

.btn-orange:hover {
    background: linear-gradient(135deg, #be3c05, #f5662c);
    box-shadow: 0 6px 16px rgba(14, 159, 90, 0.4);
}


.round {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    display: inline-block;
}

/* Image always gently waving */
.round img {
    display: block;
    width: 100%;
    height: auto;
    animation: floatWave 6s ease-in-out infinite;
}

/* Hover ripple effect */
.water-effect::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: none;
}

.water-effect:hover::after {
    animation: ripple 0.6s ease-out;
}

/* Gentle wave-like motion */
@keyframes floatWave {
    0%   { transform: scale(1) translateY(0px); }
    50%  { transform: scale(1.09) translateY(-4px); }
    100% { transform: scale(1) translateY(0px); }
}

/* Ripple on hover */
@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.4;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}


.home-bar{
    background:  #001f3f;
    padding: 20px 0;
    color: #ffffff;

}

.fade-text {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.grey-box{
    /*background: url("assets/images/home/big01.jpg");*/
    background: url("../images/home/big01.jpg");
    background-size: cover;
    background-position: center center;
    padding: 100px 0;
}
.home-bar02{
    background: url("../images/home/bg02.jpg");
    background-size: cover;
    background-position: center center;
    padding: 100px 0;
}


.grey-box02{
    background: #efefef;
    padding: 50px 50px;
}

.grey-box03{
    background: rgba(243, 243, 243, 0.68);
    padding: 50px 50px;
}
.contact-us{
    background: url("../images/pages/contact-us.png");
    padding: 40px 0;
    background-size: cover;
    min-height: 700px;
}

/*Inner Page Headers*/
.innerpage-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2c0c0c;
    opacity: 0.4;
    padding: 20px 0 0 0;
}

.inner-title-section {
    position: absolute;
    width: 100%;
    top: 40%;
}

.about-us{
    background-color: #fff4f4;
    background-image: url("../images/page-headers/1.jpg");
    background-size: cover;
    background-position: center center;
    color: #ffffff;
    padding: 200px 0px;
    position: relative;
}

.campaign-us{
    background-color: #fff4f4;
    background-image: url("../images/page-headers/2.jpg");
    background-size: cover;
    background-position: center center;
    color: #ffffff;
    padding: 200px 0px;
    position: relative;
}

.stories-us{
    background-color: #fff4f4;
    background-image: url("../images/page-headers/7.jpg");
    background-size: cover;
    background-position: center center;
    color: #ffffff;
    padding: 200px 0px;
    position: relative;
}

.giving-us{
    background-color: #fff4f4;
    background-image: url("../images/page-headers/3.jpg");
    background-size: cover;
    background-position: center center;
    color: #ffffff;
    padding: 200px 0px;
    position: relative;
}
.giving-us{
    background-color: #fff4f4;
    background-image: url("../images/page-headers/4.jpg");
    background-size: cover;
    background-position: center center;
    color: #ffffff;
    padding: 200px 0px;
    position: relative;
}

.contact-us1{
    background-color: #fff4f4;
    background-image: url("../images/page-headers/5.jpg");
    background-size: cover;
    background-position: center center;
    color: #ffffff;
    padding: 200px 0px;
    position: relative;
}

/* Responsive YouTube Styling */
.youtube-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
}

.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}



/*  others  */
.footer-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background:  #001f3f;
    padding: 100px 0 ; /* Add padding for space instead of fixed height */
}

#waterCanvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.footer-content {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 16px;
}

.footer-container p{
    color: rgba(104, 139, 159, 0.87);
    font-size: 14px;
}
.footer-container a{
    font-size: 14px;
    color: rgba(104, 139, 159, 0.87);
}

.footer-text-color{
    color: rgba(104, 139, 159, 0.87);
    font-size: 14px;

}
.footer-container a:hover{
    font-size: 14px;
    color: rgb(160 210 237 / 87%);
}
.footer-logo{
    opacity: .9;
    width: 300px;
    text-align: left;
}
.footer-card {
    background: rgba(32, 55, 86, 0.38);
    padding: 30px 30px 40px;
    border-radius: 1.2rem;
    transition:
            transform 0.3s ease,
            color 0.2s ease;
}

.copyright-hr{
    border-top: 1px solid rgba(77, 103, 114, 0.87);
}

.social-icons {
    display: flex;
    gap: 30px;
    padding: 10px 0;
}

.social-icons a {
    font-size: 18px!important;
    color: rgba(104, 139, 159, 0.87);
    text-decoration: none;
    transition: color 0.3s;
}

.social-icons a.instagram:hover { color: #E1306C; }
.social-icons a.linkedin:hover  { color: #0077B5; }
.social-icons a.youtube:hover   { color: #FF0000; }
.social-icons a.twitter:hover   { color: #1DA1F2; }
.phone {
    font-size: 16px!important;
    color: #444;
    font-weight: 300;
}