@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;700&display=swap');

body{
background-color: #fff;
font-family: 'Roboto Condensed', sans-serif;
    }
body, html {
overflow-x: hidden;
}
/*---Loader Satarts Here--*/
  .spinner {
  height: 120px;
  width: 120px;
  margin: auto;
  display: flex;
  position: absolute;
  -webkit-animation: rotation .6s infinite linear;
  -moz-animation: rotation .6s infinite linear;
  -o-animation: rotation .6s infinite linear;
  animation: rotation .6s infinite linear;
  border-left: 10px solid rgba(251, 177, 2, .15);
  border-right: 10px solid rgba(251, 177, 2, .15);
  border-bottom: 10px solid rgba(251, 177, 2, .15);
  border-top: 10px solid rgba(251, 177, 2, .8);
  border-radius: 100%;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}

@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#overlay {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 2;
  cursor: pointer;
}
#overlay h2{ color:#fff; margin-top:200px; text-align:center;}
/*---Loader Ends Here--*/

 #amountOptions {
            display: none;
            margin-top: 10px;
        }
	.amountOptions {
            display: none;
            margin-top: 5px;
        }
        .amount-btn {
    margin: 5px;
    background: #ffeb3b;
    padding: 5px 15px;
    cursor: pointer;
    float: left;
    color: #000;
    border-radius: 5px;
}
.amount-btn:hover {
    background: #fff; /* Change background on hover */
	color: #000;
    border-color: #ccc;  /* Darken border on hover */
}
.amount-btn:active {
    background: #fff; /* Change background on hover */
	color: #000;
    transform: translateY(2px); /* Slightly move the button down to give a pressed effect */
}
.form-container
 {
   padding: 10px;
    border-radius: 20px;
    margin:0px;
}
.label{
    font-weight: 500;
}
.razorpay-payment-button{
background-color: #00BD68;
  border-radius: 5px;
  color: #FFFFFF;
  cursor: pointer;
  height: 44px;
  line-height: 44px;
  width: 100%;
  border: 0;
  visibility: hidden;
}
    

.slider_wrapper {  
    width: 100%;
    height: auto;
    overflow: hidden;
}

.header {
    background: #0b7dc3;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.dthead h1 {
    color: #1a3259;
    text-align: center;
    font-weight: 700;
}
.dthead h2 {
    color: #ed1566;
    text-align: center;
    font-weight: 700;
}
.dthead {
    padding: 25px 15px 10px;
}
.bt_wrap{ text-align:center;}
.fwb {	
 font-weight: 400;
}
.blue_bg {
    background: #142849;
    padding: 25px 0px;
	margin:20px 0px 0px;
}
.black_bg {
    background: #242323;
    padding: 25px 0px;
	margin:0px 0px 0px;
}
.black_bg p{ color: #fff;
    text-align: center;
    font-weight: 400; margin;0px;}
.blue_bg img{ border: 5px solid #fff;}
h1.ad_head {
    padding: 7px 20px;
    background-color: #006fae;
    border-radius: 15px 15px 15px 15px;
    color: #fff;
    font-weight: 400;
	margin-bottom: 10px; 
}
h1.gs_head {
    padding: 7px 20px;
    background-color: #007612;
    border-radius: 15px 15px 15px 15px;
    color: #fff;
    font-weight: 400;
	margin:30px 0px 10px; 
}
.col_ad_left{ width:50%; float:left; text-align:left;}
.col_ad_right{ width:50%; float:right; text-align:right;}
.col_ad_full{ width:100%;  text-align:center;}
.ad_amt {
    padding: 0px 20px 20px;
	border-bottom:1px solid #000;}
.ad_amt .ad_amt_hd{ text-align:center; margin: 20px; }
.ad_amt .btn-warning:hover{color: #fff; background-color: #e21c21; border-color: #e21c21;}
.bnk h4, .bnk p, .bnk h5, .bnk a{text-align:center; display: block;}
.bnk { padding:20px 0px;}
.pad_10{ padding: 15px 0px;}
.footer{ background:#282825; padding: 25px;}
.copy{background:#282825; padding: 25px;}
.copy p{color:#fff; margin:0px; font-weight:400;}
.footer h3{ color: #ff8001;}
.footer p{ color: #fff; text-align:justify;}
.footer ul {padding:0px;}
.footer li a {
    color: #fff;
    text-decoration: none;
    line-height: 30px;
	font-size:15px;
    font-weight: 500;
}
.footer i{ margin-right:10px;}
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	
  z-index:100;
}
.my-float{
	margin-top:16px;
}
.footer li a:hover{  color: #ff8001;}
.social a.iw  {
    color: #fff;
 text-align: center;
    border-radius: 100%;
	margin-right:15px;
}
.social a.fb  {
background: #1778f2; padding: 11px 8px;}
.social a.yt  {
background: #ff0000; padding: 11px 6px;}
.social a.tw  {
background: #1da1f2; padding: 11px 6px;}
.social{margin-top:20px; }
.social i.fa.fa-facebook, .social i.fa.fa-youtube, .social i.fa.fa-twitter {
    margin-left: 8px;
}
.skj26_seva_item {
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

/* Hover */
.skj26_seva_item:hover {
    transform: translateY(-5px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.18),
        0 0 15px rgba(120, 60, 180, 0.20);
}


/* SELECTED SEVA */
.skj26_seva_item.seva-selected {
    transform: translateY(-5px);

    border-color: #f5c400;

    background: linear-gradient(
        145deg,
        #fffdf2,
        #fff7d6
    );

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.20),
        0 0 0 3px rgba(245, 196, 0, 0.18),
        0 0 25px rgba(245, 196, 0, 0.30);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}


/* Selected heading */
.skj26_seva_item.seva-selected h5 {
    color: #c62828;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08);

    transition:
        color 0.35s ease,
        text-shadow 0.35s ease;
}


/* Selected image */
.skj26_seva_item.seva-selected img {
    transform: scale(1.02);

    transition:
        transform 0.4s ease,
        filter 0.4s ease;

    filter: saturate(1.1);
}
.form_wrap {
    width: 100%;
    margin: 0px auto;
    max-width: 600px;
    padding: 0px 15px 15px 15px;
    height: auto;
    overflow: hidden;
}

.fw_body {
    width: 100%;
    height: auto;
    min-height: 300px;
    padding: 30px;
    border-radius: 15px;

    position: relative;
    overflow: hidden;

    box-sizing: border-box;

    /* Dark Krishna background */
    background: linear-gradient(
        135deg,
        #090018 0%,
        #21002f 30%,
        #300933 55%,
        #071b3d 100%
    );

    color: #ffffff;

    /* Smooth hover transition */
    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;

   
}


/* =========================================
   MOVING PURPLE + BLUE LIGHT
   ========================================= */

.fw_body::before {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    top: -250px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(120, 40, 220, 0.75) 0%,
        rgba(80, 30, 180, 0.45) 25%,
        rgba(20, 80, 180, 0.20) 45%,
        transparent 70%
    );

    filter: blur(25px);

    pointer-events: none;

    z-index: 0;

    animation: krishnaPurpleMove 8s ease-in-out infinite alternate;
}


/* =========================================
   MOVING BLUE DIVINE LIGHT
   ========================================= */

.fw_body::after {
    content: "";
    position: absolute;

    width: 450px;
    height: 450px;

    right: -220px;
    bottom: -220px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(0, 180, 255, 0.70) 0%,
        rgba(0, 100, 220, 0.40) 25%,
        rgba(0, 180, 180, 0.20) 45%,
        transparent 70%
    );

    filter: blur(25px);

    pointer-events: none;

    z-index: 0;

    animation: krishnaBlueMove 10s ease-in-out infinite alternate;
}


/* =========================================
   KEEP CONTENT ABOVE ANIMATION
   ========================================= */

.fw_body > * {
    position: relative;
    z-index: 2;
}


/* =========================================
   PURPLE LIGHT ANIMATION
   ========================================= */

@keyframes krishnaPurpleMove {

    0% {
        left: -250px;
        top: -250px;
        transform: scale(0.9);
        opacity: 0.65;
    }

    25% {
        left: 10%;
        top: 5%;
        transform: scale(1.1);
        opacity: 0.85;
    }

    50% {
        left: 45%;
        top: 15%;
        transform: scale(1.25);
        opacity: 0.65;
    }

    75% {
        left: 65%;
        top: 35%;
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        left: 80%;
        top: 55%;
        transform: scale(1.3);
        opacity: 0.6;
    }
}


/* =========================================
   BLUE LIGHT ANIMATION
   ========================================= */

@keyframes krishnaBlueMove {

    0% {
        right: -220px;
        bottom: -220px;
        transform: scale(0.9);
        opacity: 0.55;
    }

    25% {
        right: 5%;
        bottom: 10%;
        transform: scale(1.15);
        opacity: 0.8;
    }

    50% {
        right: 35%;
        bottom: 25%;
        transform: scale(1.3);
        opacity: 0.65;
    }

    75% {
        right: 60%;
        bottom: 5%;
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        right: 80%;
        bottom: 40%;
        transform: scale(1.25);
        opacity: 0.55;
    }
}


/* =========================================
   HOVER TRANSITION
   ========================================= */

.fw_body:hover {
    transform: translateY(-3px);

   
}


/* =========================================
   HEADINGS
   ========================================= */

.fw_body h3,
.fw_body h4,
.fw_body h5 {
    color: #ffffff;

    transition:
        transform 0.4s ease,
        text-shadow 0.4s ease;
}

.fw_body h3:hover,
.fw_body h4:hover,
.fw_body h5:hover {
    transform: translateX(5px);

    text-shadow:
        0 0 8px rgba(80, 180, 255, 0.9),
        0 0 20px rgba(80, 100, 255, 0.7);
}


/* =========================================
   TEXT
   ========================================= */

.fw_body p,
.fw_body span,
.fw_body label {
    color: #ffffff;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    .fw_body {
        padding: 20px;
    }

    .fw_body::before {
        width: 350px;
        height: 350px;
    }

    .fw_body::after {
        width: 320px;
        height: 320px;
    }
}


/* =========================================
   ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .fw_body::before,
    .fw_body::after {
        animation: none;
    }
}
.fw_body h3 {
    text-align: center;
    margin-bottom: 15px;
    color: #300933;
    padding: 5px 5px;
    background: #fee37e;
    border-radius: 10px;
}

.fw_body .rendered-form {
    color: #000;
}
.fw_body p.fw_t1 {
    text-align: center;
    font-size: 22px;
    font-weight: 500;
	line-height:40px;
	margin-bottom: 0px;
	
}
.fw_t1 strong {
    background: #e21c21;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
	font-weight: 400;
}
.fw_sn{}
.fw_body label.formbuilder-textarea-label, .fw_body label.formbuilder-text-label, .fw_body label.formbuilder-radio-group-label {
    width: 100%;
    clear: both;
    float: left;
    font-size: 16px;
    font-weight: 400;
	margin-bottom: 3px;
	color: #fff;
}
.fw_body input.form-control {
    width: 100%;
    padding: 10px 20px;
    margin: 5px 0px 10px;
	    font-size: 17px;
}
.fw_body .fbr_lft {
    float: left;
    margin-right: 20px;
    font-weight: 400;
}
.fw_body .formbuilder-checkbox {
    width: 100%;
    float: none;
    clear: both;
    margin: 0px 0px 10px;
}
.fw_body .formbuilder-radio-group {
    margin-bottom: 10PX;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.fw_body .btn-default.btn {
    background: #FFEB3B;
    padding: 8px 24px;
    border-radius: 5px;
    font-size: 17px;
    margin-top: 10px;
	color: #000;
    font-weight: 500;
}
.fw_body .btn-default.btn:hover {
	background: #fff;}
.formbuilder-required{color:red;}.act_txt {text-align: justify;font-size: 12px;font-weight: 400; color: #fff;}
.spd h3 {
    background: #fbb102;
    text-transform: uppercase;
    padding: 7px 25px;
    border-radius: 5px;
}
.spd h4 {
    color: #ff0303;
    font-size: 1.4rem;
} 
.spd h5 {
    margin-bottom: 15px;
}
.dt_scs{
    color: #fff;
    background: #05c10c;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
}
.dlbt{ font-weight: 400;
    text-transform: uppercase; }
	.dlbt{ font-weight: 400; margin:10px 0px;}
.bank_dt{ text-align:center;}	
.bank_dt img{ margin:10px 0px;}
.bank_dt h4{ color: #0662BD;}
.bank_dt h3 {
    text-align: center;
    background: #ffc107;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 36px;
    color: #000;
}
.bank_dt h2{ text-align:center; background: #ffc107;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 36px;
    color: #000;}
.upi_pay {
	text-align: center;  margin-bottom: 15px;}
.upi_pay a {
    text-align: center;
    background: #4CAF50;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}
@media (max-width: 768px) {
    .form-control,
    .formbuilder-text input,
    .formbuilder-number input,
    .formbuilder-select select,
    .formbuilder-textarea textarea {
        font-size: 16px !important;
    }
}
.upi_pay a:hover { background: #F44336;}
/*--Purushottama Masa--*/
.clr_bg{
	background:linear-gradient(180deg, #d2f0d6, #c3ebee);
}
.clr_bg.svv{
	background: linear-gradient(180deg, #050301, #7c4d06);
}

.pm_ct_wrap {
    padding: 20px 0px;
}
.skj26_seva_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    width: 100%;
}

.skj26_seva_item {
    
    align-items: flex-start;
    gap: 18px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 10px;
    box-sizing: border-box;
}

.skj26_seva_item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.skj26_seva_content {
    flex: 1;
}

.skj26_seva_content h5 {
 font-size: 20px;
    font-weight: 500;
    text-align: center;
    padding: 8px;
    color: #c40d0d;
	margin: 0px;
}

.skj26_seva_content p {
    margin: 0;
    font-size: 12px;
	text-align: center !important;
    
}
p.pm_ct_last {
    font-size: 20px;
    margin: 10px 0 0 0;
    color: #023249;
    font-weight: 500;
}

/* Mobile */
@media (max-width: 767px) {
    .skj26_seva_grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .skj26_seva_item {
        gap: 12px;
        padding: 12px;
    }

    

    .skj26_seva_content h5 {
        font-size: 16px;
    }

    .skj26_seva_content p {
        font-size: 13px;
    }
}
p.desc1 {  font-weight: 500; font-style: italic; font-size: 18px; }
.pm_ct_wrap h3{ font-size: 25px; color: #c40d0d; }
.pm_ct_wrap h4{ font-size: 22px; color: #c40d0d; }
.pm_ct_wrap p span{ font-weight: 500; color:#cf5101; font-size: 16px;}
.pm_ct_wrap p{ text-align:justify; font-size: 18px;}
.pm_ct_wrap label.rless{ display:none;}
#ch{ display:none;}
.pm_ct_wrap label{ color: #f76c62; cursor:pointer;}
.pm_hide_ct{ display:none;}
#ch:checked ~ .pm_hide_ct{ display:block;}
#ch:checked ~ p label.rmore{ display:none;}
#ch:checked ~ p label.rless{ display:inline;}

.pad_wrap {
    background: #fff;
    padding: 10px;
    margin: 5px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);}
.skj .pad_wrap {width: 100%;
max-width: 350px; background: linear-gradient(180deg, #ffd659, white);}
.pad_wrap p.seva_desc{ text-align:center; font-size:14px;}
.pad_wrap h2{ text-align:center; margin:10px 0px; font-size:25px;}
.pm_dt_wrap{ width:100%; margin-bottom:15px; height: auto; overflow: hidden;}
.pm_dt_wrap.lst{ margin-bottom:0px;}
.pm_dt_wrap .colmn_clf { width: 48%; float:left;  }
.pm_dt_wrap .colmn_clr { width: 48%; float:right;  }
.pm_dt_wrap .colmn{ width: 100%;  }
.btn.btn-warning.pmbt{
    font-family: "Roboto Condensed", Sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-transform: capitalize;
	text-decoration:none;
    color: #FFFFFF;
    background-color: #CA1B22;
    border-radius: 3px 3px 3px 3px;
    padding: 5px 12px;
	border:none;
	width:100%;
}
.btn.btn-warning.pmbt:hover{background-color:#01b848;}

/*--Purushottama Masa--*/
.fnav ul { margin:0px;}
.fnav ul li {
    display: inline;
    list-style: none;
}
.fnav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    text-transform: capitalize;
    margin-right: 15px;
    font-weight: 500;
}
.fnav ul li a:hover{ color: #ff8001;}

/* ============================================================
   SRI JAGANNATHA RATHA YATRA
   KRISHNA / PEACOCK FEATHER ANIMATED BACKGROUND
   CSS3 ONLY
============================================================ */


/* ============================================================
   MAIN BACKGROUND
============================================================ */

.skj_bgm {
    position: relative;
    overflow: hidden;

    min-height: 100vh;

    background:
        /* Golden light from top */
        radial-gradient(
            circle at 50% 5%,
            rgba(255, 220, 100, 0.42) 0%,
            rgba(255, 220, 100, 0.16) 20%,
            transparent 45%
        ),

        /* Teal glow - left */
        radial-gradient(
            circle at 10% 70%,
            rgba(24, 143, 132, 0.28) 0%,
            transparent 36%
        ),

        /* Blue glow - right */
        radial-gradient(
            circle at 90% 35%,
            rgba(35, 92, 145, 0.30) 0%,
            transparent 40%
        ),

        /* Main gradient */
        linear-gradient(
            135deg,
            #f8e9b7 0%,
            #d9e8d5 22%,
            #9fcac2 45%,
            #c6dfd1 70%,
            #f4df9f 100%
        );

    background-size: 180% 180%;

    animation:
        skjBackgroundMove 12s ease-in-out infinite alternate;
}


/* ============================================================
   MOVING GOLDEN LIGHT
============================================================ */

.skj_bgm::before {
    content: "";

    position: absolute;

    width: 750px;
    height: 750px;

    top: -380px;
    left: 50%;

    transform: translateX(-50%);

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(255, 220, 105, 0.30) 0%,
            rgba(255, 196, 60, 0.16) 30%,
            transparent 70%
        );

    filter: blur(20px);

    animation:
        skjGoldenGlow 7s ease-in-out infinite alternate;

    z-index: 0;
}


/* ============================================================
   FLOATING PARTICLES
============================================================ */

.skj_bgm::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.55;

    background-image:

        /* Small golden particles */
        radial-gradient(
            circle,
            rgba(212, 153, 28, 0.65) 0 2px,
            transparent 3px
        ),

        /* Light particles */
        radial-gradient(
            circle,
            rgba(255, 225, 125, 0.65) 0 1.5px,
            transparent 3px
        ),

        /* Teal particles */
        radial-gradient(
            circle,
            rgba(24, 111, 111, 0.40) 0 2px,
            transparent 3px
        );

    background-size:
        180px 220px,
        260px 280px,
        330px 300px;

    background-position:
        0 0,
        70px 100px,
        150px 40px;

    animation:
        skjParticles 18s linear infinite;

    z-index: 1;
}


/* ============================================================
   FEATHER CONTAINER
============================================================ */

.krishna-feathers {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 2;
}


/* ============================================================
   PEACOCK FEATHER
============================================================ */

.feather {
    position: absolute;

    width: 32px;
    height: 125px;

    opacity: 0.42;

    border-radius:
        70% 30% 70% 30%;

    transform-origin:
        center bottom;

    /* Feather shaft */
    border-left:
        2px solid rgba(128, 92, 31, 0.42);

    background:

        /* Gold outer ring */
        radial-gradient(
            ellipse at 50% 27%,
            #f2c84b 0 9%,
            transparent 10%
        ),

        /* Dark blue */
        radial-gradient(
            ellipse at 50% 27%,
            #172d78 0 20%,
            transparent 21%
        ),

        /* Peacock blue */
        radial-gradient(
            ellipse at 50% 27%,
            #1977a5 0 28%,
            transparent 29%
        ),

        /* Green ring */
        radial-gradient(
            ellipse at 50% 27%,
            #29966b 0 38%,
            transparent 39%
        ),

        /* Golden ring */
        radial-gradient(
            ellipse at 50% 27%,
            #d7a536 0 47%,
            transparent 48%
        ),

        /* Feather body */
        linear-gradient(
            105deg,
            rgba(20, 118, 95, 0.65),
            rgba(42, 151, 108, 0.40) 40%,
            rgba(21, 91, 93, 0.22) 75%,
            rgba(15, 73, 81, 0.10)
        );

    box-shadow:
        0 0 10px rgba(24, 115, 110, 0.15);
}


/* ============================================================
   PEACOCK EYE
============================================================ */

.feather::before {
    content: "";

    position: absolute;

    width: 14px;
    height: 21px;

    top: 18px;
    left: 8px;

    border-radius: 50%;

    background:

        /* Dark centre */
        radial-gradient(
            ellipse at center,
            #11195d 0 25%,

            /* Blue */
            #1a70a0 26% 48%,

            /* Green */
            #36a66d 49% 66%,

            /* Gold */
            #e4b83f 67% 77%,

            transparent 78%
        );

    box-shadow:
        0 0 5px rgba(25, 92, 130, 0.25);
}


/* ============================================================
   FEATHER SHAFT
============================================================ */

.feather::after {
    content: "";

    position: absolute;

    width: 2px;
    height: 88px;

    bottom: -4px;
    left: 14px;

    border-radius: 50%;

    background:
        linear-gradient(
            to bottom,
            rgba(165, 119, 38, 0.75),
            rgba(110, 81, 30, 0.18)
        );

    transform:
        rotate(-5deg);
}


/* ============================================================
   FEATHER 1
============================================================ */

.feather-1 {
    left: 7%;
    bottom: -150px;

    animation:
        featherUp1 8s linear infinite,
        featherSway1 2.4s ease-in-out infinite alternate;
}


/* ============================================================
   FEATHER 2
============================================================ */

.feather-2 {
    left: 24%;
    bottom: -150px;

    transform: scale(0.75);

    animation:
        featherUp2 10s linear infinite 1s,
        featherSway2 2.8s ease-in-out infinite alternate;
}


/* ============================================================
   FEATHER 3
============================================================ */

.feather-3 {
    left: 48%;
    bottom: -150px;

    transform: scale(0.95);

    animation:
        featherUp3 8.5s linear infinite 2s,
        featherSway3 2.5s ease-in-out infinite alternate;
}


/* ============================================================
   FEATHER 4
============================================================ */

.feather-4 {
    left: 72%;
    bottom: -150px;

    transform: scale(0.70);

    animation:
        featherUp4 10.5s linear infinite 0.5s,
        featherSway4 3s ease-in-out infinite alternate;
}


/* ============================================================
   FEATHER 5
============================================================ */

.feather-5 {
    left: 90%;
    bottom: -150px;

    transform: scale(0.82);

    animation:
        featherUp5 9s linear infinite 3s,
        featherSway5 2.6s ease-in-out infinite alternate;
}


/* ============================================================
   FEATHER UPWARD MOVEMENT
============================================================ */

@keyframes featherUp1 {

    0% {
        bottom: -150px;
        opacity: 0;
    }

    10% {
        opacity: 0.42;
    }

    80% {
        opacity: 0.35;
    }

    100% {
        bottom: 110%;
        opacity: 0;
    }
}


@keyframes featherUp2 {

    0% {
        bottom: -150px;
        opacity: 0;
    }

    10% {
        opacity: 0.35;
    }

    80% {
        opacity: 0.28;
    }

    100% {
        bottom: 110%;
        opacity: 0;
    }
}


@keyframes featherUp3 {

    0% {
        bottom: -150px;
        opacity: 0;
    }

    10% {
        opacity: 0.45;
    }

    80% {
        opacity: 0.32;
    }

    100% {
        bottom: 110%;
        opacity: 0;
    }
}


@keyframes featherUp4 {

    0% {
        bottom: -150px;
        opacity: 0;
    }

    10% {
        opacity: 0.35;
    }

    80% {
        opacity: 0.27;
    }

    100% {
        bottom: 110%;
        opacity: 0;
    }
}


@keyframes featherUp5 {

    0% {
        bottom: -150px;
        opacity: 0;
    }

    10% {
        opacity: 0.40;
    }

    80% {
        opacity: 0.30;
    }

    100% {
        bottom: 110%;
        opacity: 0;
    }
}


/* ============================================================
   FEATHER SIDE MOVEMENT
============================================================ */

@keyframes featherSway1 {

    0% {
        margin-left: -15px;
        rotate: -8deg;
    }

    100% {
        margin-left: 18px;
        rotate: 10deg;
    }
}


@keyframes featherSway2 {

    0% {
        margin-left: 15px;
        rotate: 8deg;
    }

    100% {
        margin-left: -20px;
        rotate: -10deg;
    }
}


@keyframes featherSway3 {

    0% {
        margin-left: -20px;
        rotate: -10deg;
    }

    100% {
        margin-left: 20px;
        rotate: 12deg;
    }
}


@keyframes featherSway4 {

    0% {
        margin-left: 18px;
        rotate: 8deg;
    }

    100% {
        margin-left: -18px;
        rotate: -9deg;
    }
}


@keyframes featherSway5 {

    0% {
        margin-left: -15px;
        rotate: -7deg;
    }

    100% {
        margin-left: 15px;
        rotate: 10deg;
    }
}


/* ============================================================
   BACKGROUND MOVEMENT
============================================================ */

@keyframes skjBackgroundMove {

    0% {
        background-position:
            0% 0%;
    }

    50% {
        background-position:
            50% 35%;
    }

    100% {
        background-position:
            100% 70%;
    }
}


/* ============================================================
   GOLDEN GLOW MOVEMENT
============================================================ */

@keyframes skjGoldenGlow {

    0% {
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);

        opacity: 0.45;
    }

    50% {
        transform:
            translateX(-50%)
            translateY(45px)
            scale(1.08);

        opacity: 0.75;
    }

    100% {
        transform:
            translateX(-50%)
            translateY(90px)
            scale(1.15);

        opacity: 0.50;
    }
}


/* ============================================================
   PARTICLE MOVEMENT
============================================================ */

@keyframes skjParticles {

    0% {
        background-position:
            0 0,
            70px 100px,
            150px 40px;
    }

    50% {
        background-position:
            40px -120px,
            -80px -160px,
            190px -100px;
    }

    100% {
        background-position:
            80px -240px,
            -160px -320px,
            250px -200px;
    }
}


/* ============================================================
   KEEP EXISTING CONTENT ABOVE ANIMATION
============================================================ */

.skj_bgm > *:not(.krishna-feathers) {
    position: relative;
    z-index: 5;
}


/* ============================================================
   OPTIONAL - SOFT CONTENT BACKGROUND
============================================================ */

/*
   If your content wrapper currently has a solid background,
   you can use this class on that wrapper.

   Example:
   <div class="skj_content">
*/

.skj_content {
    background:
        rgba(255, 248, 225, 0.72);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    border-radius:
        10px;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 768px) {

    .skj_bgm {
        background-size:
            240% 240%;
    }

    .feather {
        width: 25px;
        height: 100px;

        opacity: 0.28;
    }

    .feather::before {
        width: 11px;
        height: 17px;

        top: 17px;
        left: 7px;
    }

    .feather::after {
        height: 72px;
        left: 11px;
    }

    /* Reduce number of feathers */
    .feather-2,
    .feather-4 {
        display: none;
    }

    .skj_bgm::before {
        width: 500px;
        height: 500px;
    }
}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .feather {
        opacity: 0.22;
    }

    .feather-5 {
        display: none;
    }

    .skj_bgm::after {
        opacity: 0.35;
    }
}


/* ============================================================
   REDUCE MOTION FOR ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .skj_bgm,
    .skj_bgm::before,
    .skj_bgm::after,
    .feather {
        animation: none !important;
    }
}
/*--start sri krishna janmashtami 2024--*/
.slider_wrapper{ background: linear-gradient(90deg, #fef8e8, #ffe3af);}
.gal_img{ width: 100%; border-radius:10px;}
.gmbt{margin-bottom:20px;}
.ban_mob{ display:none !important; }
.ban_desk{ display:block !important;}
.mob_gal{ display:none !important; }
.desk_gal{ display:block !important;}
.formbuilder-radio { margin-bottom:10px;}
.formbuilder-radio input[type="radio"]{ width: 18px; height: 18px; vertical-align: middle;}
.formbuilder-radio label{ vertical-align: middle; font-size: 17px; font-weight: 500; color:#fff;}
.dob_txt { font-size: 15px; margin: -7px 0px 10px; text-align: center; color: #fff; }

.ads .amount-btn{ font-size: 14px; font-weight: 500; width: 31%; text-align: center; padding: 5px 10px;}
.sv1 .amount-btn{ font-weight: 500; width: 23%; text-align:center;}
.sv2 .amount-btn{ font-weight: 500; width: 23%; text-align:center;}
.gps .amount-btn{ font-weight: 500; width: 31%; text-align:center;}
.sbx { border: 2px dotted #4e0438; padding: 10px; border-radius: 10px; background: #fff6eb; color: #59033e; }
/*--end sri krishna janmashtami 2024--*/

@media only screen and (max-width: 480px) {
	
	/*--start sri krishna janmashtami 2024--*/
	.dob_txt { font-size: 11px; margin: -7px 0px 10px; text-align: justify; }

.ban_desk{ display:none !important;}
.ban_mob{ display:block !important;}
.desk_gal{ display:none !important;}
.mob_gal{ display:block !important;}

.ads .amount-btn{ font-size: 13px; font-weight: 500; width: 46%; text-align: center; padding: 8px 5px;}
.sv1 .amount-btn{ font-weight: 500; width: 46%; text-align:center;}
.sv2 .amount-btn{ font-weight: 500; width: 46%; text-align:center;}
.gps .amount-btn{ font-weight: 500; width: 46%; text-align:center;}
/*--end sri krishna janmashtami 2024--*/
  .dthead h1, .dthead h2 { font-size:18px;}
  .dthead {
    padding: 10px 0px;
}
.blue_bg {
      padding: 10px 0px;
	margin:10px 0px 0px;
}
.header {
    padding:10px 0px;
  
}
.fw_body {padding: 15px 15px 30px;}
/*--Purushottama Masa--*/
.pad_wrap {  padding: 15px; margin: 8px;}
.btn.btn-warning.pmbt{ font-size: 17px;}
.pm_ct_wrap {
    padding: 20px 0px 0px;
}
.pm_ct_wrap h3 { font-size: 19px;}
.pm_ct_wrap p.desc1 { font-size: 15px;}
.pm_ct_wrap p{text-align:justify; font-size: 16px;}
.pm_ct_wrap ul li{
   text-align:justify; font-size: 14px; margin-bottom:5px;
}
/*--Purushottama Masa--*/
.skj .pad_wrap {width: auto;
max-width: 100%;}

.fnav ul li {
    display: block;
list-style: none;  margin-bottom: 7px;}
.fnav ul{
    padding:0px;
	 margin-bottom: 15px;}
	 
}