/*
Template Name: Krishna Temple
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/

/*********************center_h****************/
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.carousel-caption{
background-color: #4ea6ce!important;
bottom:70px;
left:0;
color:#fff;
width:40%;
text-align:left;
left:40%;
padding:20px;
z-index:4;
animation: fadeIn 5s;
 }
 

.carousel-caption1{
left:55%;
 }
.carousel-caption2{
left:55%;
 }
.carousel-caption3{
left:55%;
 }
.center_home .carousel-indicators{
bottom:10px; 
z-index:4;
 }
.carousel-caption p{
border-left:2px solid #efefef;
padding-left:15px; 
 }
 
.carousel-item .center_hm1 {
    z-index: 3;
    left: 10%;
    bottom: 0;
	opacity: 0;
    transform: translateX(0px);
	
}
.carousel-item.active .center_hm1{
	opacity: 1;
    transform: translateX(70px);
    transition: all 1500ms ease;
    transition-delay: 1000ms;
	
}




.center_ht{
z-index:3; 
 }
.center_home .carousel-control-prev{
z-index:4;  
 }
.center_home .carousel-control-next{
z-index:4;  
 }

#hero .container-xl{
padding-top:150px;
padding-bottom:120px;
position: relative;
z-index: 2;
}

#hero{
min-height: 100vh;
}

#hero img{
min-height: 100vh !important;
}



/* Watch section YouTube styles */
.youtube-play{
background-color:#ff0000;
border-radius: 10px;
}

.youtube-btn{
background-color:#ff0000;
border-color:#ff0000;
color:#fff;
}
.youtube-btn:hover{
background-color:#ff0000;
border-color:#ff0000;
color:#fff;
}

#hero .bg_back{
z-index: 1;
}

#hero img{
position: relative;
z-index: 0;
}

/* Hero ghost button (glass-like, no color fill) */
.button_1--ghost{
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 22px rgba(2,33,71,0.2);
    color: #ffffff;
    backdrop-filter: blur(3px);
}
.button_1--ghost:hover,
.button_1--ghost:focus{
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.7);
    color: #ffffff;
}
/*********************center_h_end****************/

/*********************about_h****************/
.about_h1l span{
width:120px;
height:120px;
line-height:120px;
 }
.about_h2r p{
border-left:2px solid #4ea6ce;
}

.about_h2l h1{
line-height:0.2em; 
width:250px;
height:250px;
padding-top:100px;
font-size:70px;
 }
.about_h3i1r .form-control{
background: rgba(2,33,71,0.55);
color:#fff; 
}
.about_h3i1r ::placeholder {
  color: #fff;
  opacity: 1; /* Firefox */
}
.about_h3i1r .btn{
background: rgba(2,33,71,0.55); 
}
.about_h3i1r {
min-height:190px; 
 }
.about_h3i1l {
min-height:190px; 
 }
.about_h3m {
    left: -5%;
    bottom: 0;
}
.about_h3m2i span{
width:60px;
height:60px;
line-height:60px; 
 }
.about_h3m2{
padding-left:56%;
top:38%;
 }
/*********************about_h_end****************/

/*********************watch****************/
#donate .donate-card{
    box-shadow: 0 0 0 rgba(2,33,71,0);
    transition: transform 300ms ease 0s, box-shadow 300ms ease 180ms;
}
#donate .donate-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(2,33,71,0.22) !important;
}
.watch_1r {
    padding: 65px 30px 65px 30px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(2,33,71,0.18);
    height: 100%;
    border-radius: 18px;
    transition: transform 250ms ease, box-shadow 250ms ease;
}
.watch_1r:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 22px rgba(2,33,71,0.2);
}
.watch_1r h3{
    color: #022147;
}
.watch_1r h6{
    transition: color 0.2s ease;
}
.watch_1r h6:hover{
    color: #4ea6ce;
}
.watch_1r p{
    color: #3e4852;
    transition: color 0.2s ease;
}
.watch_1r p:hover{
    color: #2f3842;
}
.watch_1l2 span a{
width:80px;
height:80px;
line-height:80px;  
border-radius: 10px;
 }
.watch_1l2 {
padding-top:25%; 
 }
.watch_2l2 span a{
width:50px;
height:50px;
line-height:50px;  
 }
.watch_2l2{
padding-top:18%;   
 }
/*********************watch_end****************/

/*********************home_sections****************/
.about-home{
    background: linear-gradient(120deg, rgba(2,33,71,0.06), rgba(78,166,206,0.12));
}
.about-home .about-img{
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(2,33,71,0.18);
    min-height: 320px;
    object-fit: cover;
}
.about-home .about-overlay{
    position: absolute;
    bottom: 18px;
    left: 18px;
    background: rgba(2,33,71,0.85);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.about-home .about-est{
    background: #022147;
    color: #fff;
    padding: 8px 14px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.events-home .events-banner{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(2,33,71,0.2);
    min-height: 320px;
}
.events-home .events-banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.events-home .events-banner-content{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 20px;
    background: linear-gradient(0deg, rgba(2,33,71,0.85), rgba(2,33,71,0.15));
    color: #fff;
}
.events-home .events-banner-content h3{
    color: #f8fbff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.events-home .events-banner-subtitle{
    color: #c5d1dd;
    font-size: 14px;
}
.events-home .event-tile{
    background: #fff;
    border-radius: 14px;
    transition: transform 250ms ease, box-shadow 250ms ease;
}

.contribution-home{
    background: linear-gradient(0deg, rgba(255,255,255,0.62), rgba(255,255,255,0.62)),
                            linear-gradient(120deg, rgba(255,153,51,0.08), rgba(212,175,55,0.1)),
                            url('../img/testing/blue-pattern.jpg');
    background-size: cover, cover, cover;
    background-position: center, center, center;
    background-attachment: scroll, scroll, scroll;
    position: relative;
}
.contribution-home .contribution-lead{
    color: #2f3842;
}
.contribution-home .contribution-card{
    background: #fff;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 18px 36px rgba(2,33,71,0.16);
}
.contribution-home .contribution-img{
    border-radius: 16px;
    min-height: 220px;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(2,33,71,0.16);
}
.contribution-home .impact-row{
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.contribution-home .impact-item{
    background: rgba(255,153,51,0.12);
    border: 1px solid rgba(255,153,51,0.35);
    padding: 10px 14px;
    border-radius: 12px;
    min-width: 120px;
}
.contribution-home .impact-item strong{
    display: block;
    color: #022147;
    font-size: 20px;
}
.contribution-home .impact-label{
    display: block;
    font-size: 13px;
    color: #767e88;
}

.connect-home .connect-card{
    background: #fff;
    border-radius: 18px;
    transition: transform 250ms ease, box-shadow 250ms ease;
}
.connect-home .connect-list{
    margin: 0;
    padding: 0;
}
.connect-home .connect-list li{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.connect-home .connect-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #4ea6ce;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 6px 16px rgba(78, 166, 206, 0.3);
    flex-shrink: 0;
    animation: iconPulse 2.6s ease-in-out infinite;
}
.connect-home .connect-social{
    display: inline-flex;
    gap: 10px;
}
.connect-home .connect-social a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.connect-home .connect-social a:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.18);
    background: #f1f3f5;
}
.connect-home .connect-social a i{
    font-size: 18px;
    display: block;
    line-height: 1;
}
.connect-home .connect-social a.facebook i{
    color: #1877F2;
}
.connect-home .connect-social a.instagram i{
    color: #E1306C;
}
.connect-home .connect-social a.whatsapp i{
    color: #25D366;
}
.connect-home .connect-visual{
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(2,33,71,0.18);
}
.connect-home .connect-visual img{
    width: 100%;
    min-height: 320px;
    object-fit: cover;
}
.connect-home .connect-visual-overlay{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 22px;
    background: linear-gradient(0deg, rgba(2,33,71,0.65), rgba(2,33,71,0.03));
    color: #f8fbff;
}
.connect-home .connect-visual-overlay h3{
    color: #f8fbff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.connect-home .connect-visual-subtitle{
    color: #e2eaf2;
    font-size: 14px;
}
.connect-home .connect-visual-subtitle{
  color: #c5d1dd;
  font-size: 14px;
}
@keyframes eventStagger{
    from{ opacity: 0; transform: translateY(20px); }
    to{ opacity: 1; transform: translateY(0); }
}
@keyframes contributionGlow{
    0%{ opacity: 0; transform: scale(0.96); box-shadow: 0 0 0 rgba(255,153,51,0); }
    60%{ box-shadow: 0 18px 30px rgba(255,153,51,0.25); }
    100%{ opacity: 1; transform: scale(1); box-shadow: 0 18px 36px rgba(2,33,71,0.16); }
}
@keyframes iconPulse{
    0%{ box-shadow: 0 0 0 0 rgba(78,166,206,0.4); }
    70%{ box-shadow: 0 0 0 14px rgba(78,166,206,0); }
    100%{ box-shadow: 0 0 0 0 rgba(78,166,206,0); }
}

.js-anim .about-copy.is-visible{
    animation: aboutSlideIn 750ms ease forwards;
}
.js-anim .about-media.is-visible{
    animation: aboutSlideInRight 750ms ease forwards;
}
.event-stagger{
    opacity: 0;
    transform: translateY(18px);
}
.event-desc{
  color: #8a92a0;
  font-size: 14px;
}
.js-anim .event-stagger.is-visible{
    animation: eventStagger 720ms ease forwards;
}
.contribute-glow{
    opacity: 0;
    transform: scale(0.96);
}
.js-anim .contribute-glow.is-visible{
    animation: contributionGlow 820ms ease forwards;
}

/*********************home_sections_end****************/

/*********************minist****************/
.donate_1r .nav-tabs .nav-link.active {
    background: none;
    color: #4ea6ce;
    border:none;
    border-bottom:3px solid #4ea6ce;
}
.donate_1r .nav-tabs .nav-link {
    background: none;
    color: #767e88;
	border:none;
	border-bottom:3px solid transparent;
	padding:20px 40px;
	font-size:15px;
	font-weight:bold;
}
.donate_1r .nav-tabs .nav-link:hover {
    color: #4ea6ce;
}
.minist_1i2 span a{
width:50px;
height:50px;
line-height:50px;
 }
.minist_1i3{
bottom:0; 
 }
/*********************minist_end****************/


/*********************testim****************/
#testim{
margin-top:180px; 
 }
.testim_m2{
top:-40%!important;
 }
.testim_1rm2il{
padding-top:26%; 
 }
.testim_1ri{
padding-top:24%;  
 }
/*********************testim_end****************/


/*********************blog****************/
#blog{
    background-image: url(../img/34.jpg);
    background-position: center center;
    background-size: cover;
}
/*********************blog_end****************/

@media screen and (max-width : 767px){
.center_hm1{
display:none; 
 }
.carousel-caption{
position:static!important;
width:100%;
background:#4ea6ce; 
text-align:center;
 }
.center_ht{
display:none;  
 }

.carousel-caption .button_2{
padding-left:13px;
padding-right:13px;
font-size:13px;
 }
.carousel-caption .button_3{
padding-left:13px;
padding-right:13px;
font-size:13px;
 }
.carousel-caption .font_50{
font-size:26px;
 }
.carousel-caption p{
font-size:14px;
text-align:left;
 }
.center_home .carousel-indicators {
   display:none;
}

@media screen and (max-width : 767px){
    .about-home .about-overlay{
        position: static;
        margin-top: 12px;
    }
    .events-home .events-banner{
        min-height: 240px;
    }
    .contribution-home .contribution-card{
        padding: 18px;
    }
    .contribution-home .impact-row{
        gap: 12px;
    }
    .connect-home .connect-list li{
        align-items: flex-start;
    }
    .connect-home .connect-visual img{
        min-height: 240px;
    }
}
.about_h1l{
margin-top:8px;
margin-bottom:8px; 
 }
.about_h2l{
float:none!important;
 }
.about_h2r br{
display:none; 
 }
.about_h2r{
text-align:center;
margin-top:15px;
 }
.about_h2r p{
text-align:left;
 }
.about_h2rilir{
margin-top:15px;
}
.about_h2rilir p{
text-align:center;
}
.about_h3m{
display:none; 
 }
.about_h3m2{
display:none; 
 }
.about_h3i1l{
min-height:auto;
text-align:center!important;  
 }
.about_h3i1r{
min-height:auto;
text-align:center; 
 }
.watch_1 .ps-0{
padding-left:12px!important; 
 }
.watch_1 .pe-0{
padding-right:12px!important; 
 }
.watch_1r{
padding:20px!important;
min-height:auto;
text-align:center; 
 }
.watch_1r p{
text-align:left; 
 }
.watch_2m{
margin-top:8px;
margin-bottom:8px;
text-align:center;
border-radius: 18px;
transition: transform 250ms ease, box-shadow 250ms ease;
}
.donate_1l{
margin-bottom:10px;
text-align:center; 
 }
.donate_1r .nav-tabs .nav-link {
border-radius: 10px;
 padding: 10px 20px;
}
.minist_1i{
margin-top:8px;
margin-bottom:8px;
text-align:center;  
 }
.minist_1i1 img{
min-height:250px; 
 }
#testim{
margin-top:0; 
 }
.testim_1l{
padding-left:0!important;
padding-right:0!important;
text-align:center; 
 }
.testim_1l p{
text-align:left; 
 }
.testim_m2{
display:none; 
 }
.testim_m{
margin-top:15px;
text-align:center; 
 }
.testim_m p{
text-align:left; 
 }
.testim_1ri{
padding-top:30px; 
 }
 }


@media (min-width:576px) and (max-width:767px) {

 }
 
@media (min-width:768px) and (max-width:991px) {
	.carousel-caption{
		bottom:10px;
		right:10%
	}

 .center_home .carousel-inner .center_hm1 img{
	      width: 60%;
 }
.carousel-caption .font_50{
font-size:20px; 
 }
.carousel-caption p {
    font-size: 14px;
}
.carousel-caption .button_2{
padding-left:13px;
padding-right:13px;
font-size:13px;
 }
.carousel-caption .button_3{
padding-left:13px;
padding-right:13px;
font-size:13px;
 }
.about_h1l  h4{
font-size:16px; 
 }
.about_h1l p{
font-size:14px; 
 }
.about_h2r br{
display:none; 
 }
.about_h2rilil .fs-2{
font-size:18px!important; 
 }
.about_h3i1r h5{
font-size:14px!important;
 }
.about_h3i1l  h5{
font-size:13px!important; 
 }
.about_h3i1l  h2{
font-size:17px!important; 
 }
.about_h3i1l  {
padding-left:20px!important;
padding-right:20px!important;
 }
.about_h3m  img{
width:300px; 
 }
.about_h3m2 {
    padding-left: 55%;
}
.about_h3m2 span{
    width:50px;
	height:50px;
	line-height:50px;
}

.watch_1l1 img{
min-height:373px; 
 }
.watch_1r{
padding:15px!important; 
 }
.watch_1r h2{
font-size:20px;
 }
.watch_2l1 img{
min-height:150px; 
 }
.watch_2l2 {
    padding-top: 30%;
}
.donate_1r .nav-tabs .nav-link {
     padding: 10px 20px;
}
.donate_1l .font_50{
font-size:22px; 
 }
.minist_1i1 img{
min-height:240px; 
 }
.minist_1i3   p{
font-size:13px; 
 }
.testim_m2 {
    top: -30%!important;
}
.testim_1l{
padding-left:0!important; 
padding-right:0!important; 
 }
 }

@media (min-width:992px) and (max-width:1200px) {
.carousel-caption{
		bottom:40px;
	}
  .center_home .carousel-inner .center_hm1 img{
	      width: 70%;
 }
.carousel-caption .font_50{
font-size:32px; 
 }
.carousel-caption .button_2{
padding-left:20px;
padding-right:20px;
font-size:13px;
 }
.carousel-caption .button_3{
padding-left:20px;
padding-right:20px;
font-size:13px;
 }
 
.about_h3i1l  {
padding-left:20px!important;
padding-right:20px!important;
 }
.watch_1l1 img{
min-height:373px; 
 }
.watch_1r{
padding:30px!important; 
 }
.watch_2l1 img{
min-height:150px; 
 }
.watch_2l2 {
    padding-top: 25%;
}
.minist_1i1 img{
min-height:240px; 
 }
.minist_1i3   p{
font-size:13px; 
 }
.donate_1l .font_50{
font-size:36px; 
 }
.donate_1r .nav-tabs .nav-link {
     padding: 15px 30px;
}
.testim_1l{
padding-left:0!important; 
padding-right:0!important; 
 }
 }

@media (min-width:1201px) and (max-width:1300px) {
.center_home .carousel-inner .center_hm1 img{
	      width: 80%;
 }
.carousel-caption .font_50{
font-size:38px; 
 }
.watch_1r{
padding:15px!important; 
 }
.watch_1l1 img{
min-height:373px; 
 }
 }
@media (min-width:1400px) and (max-width:2000px) {
.watch_1l1 img{
min-height:435px; 
 }
.watch_1r{
min-height:435px; 
padding: 85px 30px 85px 30px;
 }
.testim_1ri {
    padding-top: 28%;
}
 }