html, body { 
    margin: 0;
    background-color: rgb(253, 241, 234);
    /* overflow-x: hidden; */
}






.Home_slides{
    
}

    

.Home_slides_div .mySlides{
    max-width: 80%;
    display: flex;
    margin: auto;
    margin-top: 2%;
    margin-bottom: 2%;
    border-radius: 5%;
    filter: drop-shadow(0 0 1rem rgba(247, 168, 58, 0.848));
    
}

.text{
    margin:auto;
    margin-top: 12px;
    max-width: 500px;
    font-size: 20px;
    font-family:'Times New Roman', Times, serif;
}

.welcome_div{

}

#wlc{
    text-align: center;
    color: #6f1d14;
    font-family: 'Patua One', cursive, serif;
    font-size: clamp(0.7rem, 3vw, 1.8rem);
    font-weight: 300;
}

#hr_1 {
    color: #760000dc;
    display: block;
    margin: auto;
    border-style:solid;
    border-width: 1px;
    width: 75%;
}

#connect{
    margin-left: auto;
    margin-right: auto;
}

#connect_text{
    color: #6f1d14;
    font-size: clamp(0.7rem, 2vw, 1.2rem);

    text-align: center;

}

#contact_hr{
    color: #760000dc;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-style:solid;
    border-width: 1px;
    width: 25%;
    margin-bottom: 15px;
}

#m_div_connect_links{ 
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    display: flex;
    margin: 2%;
    gap: 3%; /* spacing between divs */
          
}

span{
    font-size: clamp(0.7rem, 2vw, 1rem);
}

#connect_link_fb{
    text-align: center;
    display:flex;
    flex-direction: column;
    color: #112b9f;
}

#img_fb_svg{
    height: clamp(1rem, 5vw, 2rem);
}


#connect_link_wsap{
    text-align: center;
    display: flex;
    flex-direction: column;
    color: #217d1a;
}

#img_wsap_svg{
    height: clamp(1rem, 5vw, 2rem);
}


#connect_link_youtube{
    text-align: center;
    display: flex;
    flex-direction: column;
    color: #bf3737;
}

#img_yt_svg{
    height: clamp(1rem, 5vw, 2rem);
}

#hr_aft_contact{
    color: #760000dc;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-style:solid;
    border-width: 1px;
    width: 85%;
    margin: 2.5% auto 8% auto;
}



/*=========== 3 Card Views ===========*/

#_3_card_view_main_div{
    justify-content: center;
    width: 100%;
    height: auto;
    margin-top: 2%;
    margin-bottom: 2%;
    padding: auto;
}

#_3_card_view_sub_div{
    display: flex;
    flex-direction: row;
    max-width: 70%;
    height: auto;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    gap: 1.5rem;

}

/* Card View 1 || Sri Ramakrishna Darshan */

#card_view_1{
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color:#2b4459 !important;
    border-radius: 3%;
    box-shadow: #30407dba 0px 0px 20px;
    width: 100%;
    height: auto;
}

.card_view_1_header{
    color: #f4b95f;
    line-height: 1;
    text-align: center;
    font-family:Alegreya;
    font-weight:700;
    font-style:normal;
    letter-spacing:1px;
    margin-bottom: 0;

}
.card_view_1_header_p{
    font-size: 90%;
    color: #f4b95f;
    text-align: center;
    font-family:Merriweather;
    font-weight:400;
    font-style:normal;
}

#card_view_1_body{
    align-items: center;
    border-radius: 3%;
    margin: 3%;
    max-width: 65%;

}

#card_view_1_footer{
    justify-content: center;
    text-align: center;
    color: #f4b95f;
    margin-bottom:3%;
    width: 100%;

}

#card_view_1c_a-ViewPhotos{
    width: 100%;
    color: #f4b95f;
    margin: 2%;
}


/* Card View 2 || Quotation */

#card_view_2{
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: #e8e8e8 !important;
    border-radius: 3%;
    box-shadow: #54647774 0px 0px 20px;
    width: 100%;
    height: auto;
}

#card_view_2_header{
    text-align: center;
    color: #bc2b2b;
}

#card_view_2_body{
    font-size: 110%;
    width: 90%;
    font-family: Georgia, serif, sans-serif;
    color: #3a4c60;
    line-height: 1.5;
    text-align: center;
    margin: 0 auto 0 auto;
}

#card_view_2_i{
    text-align: end;
    font-size: 100%;
    color: #3a4c60;
    margin: 2%;
}

/* Card View 3 || Notice */

#card_view_3{
    display: flex;
    flex-direction: column;
    flex: 1;
    border-radius: 3%;
    background-color: #6cbaff53 !important;
    box-shadow: #3640534e 0px 0px 20px;
    width: 100%;
    height: auto;
}

#card_view_3_header{
    text-align: center;
    color: #b1470a;
    line-height: 1;
    font-family:Alegreya;
    font-weight:700;
    font-style:normal;
    letter-spacing:1px;
}

#card_view_3_header_hr{
    color: #760000dc;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-style:solid;
    border-width: 1px;
    width: 70%;
    margin-top: 0.5%;
    margin-bottom: 1%;
}

#card_view_3_body{
    width: 100%;
    margin: 0 0 5% 0;
}
.card_view_3_body_notices{
    display: flex;
    flex-direction: row;
    width: 80%;
    align-content: center;
    align-items: center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    gap: 0rem;
    margin: 0 auto 0 auto;
}

.card_view_3_body_notice_date{
    flex: 1;
    width: 100%;
    text-align: center;
    font-size: clamp(1rem, 2vw, 1rem);
    margin: 0.5rem 0 0.5rem 0;
}
.card_view_3_body_notice_data{
    flex: 2;
    width:100%;
    text-align: center;
    font-size: clamp(1rem, 2vw, 1rem);
    margin: 0.5rem 0 0.5rem 0;
}



/*========= Latest Celebrations ===========*/

#latestC_main_div{
    width: 100%;
    height: 100%;
    margin: 1.5rem 0 1rem 0;
}
#card_view_4_LC{
    width: 65%;
    height: auto;
    padding: 2%;
    margin-bottom: 2%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    background-color: #ffba432f !important;
    box-shadow:  0 0 20px #6e6c366e;
}

#card_view_3_body_LC{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
}
#card_view_3_body_LC_header{
    text-align: center;
    color: #89390a;
    font-family: 'Patua One', cursive, serif;
    font-weight: bold;
    font-size: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: 3%;
}
#card_view_3_body_LC_img{
    max-width: 40%;
    border-radius: 5%;
    box-shadow: 0 4px 12px #ae6f10d9;
    margin-bottom: 2%;
}
#card_view_3_body_LC_span{
    color: #2a0602;
    font-size: clamp(1rem, 3vw, 1.3rem);
    text-align: center;
    width: 90%;
    margin: 3% 0 2% 0;
    line-height:1.5;
}

/* ------------ Ramakrishna Math & Ramakrishna Mission ----------- */

#ramakrishna_math_mission_main_div{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8b7755e;
    padding: 1% ;
}
#rkm_header{
    text-align: center;
    color: #a91100;
    font-family: Merriweather;
    font-weight: 300;
    font-style: normal;
    font-weight: bold;
    font-size: clamp(1.3rem, 4vw, 2rem);
    margin: 6% 0 1% 0;
}

.tabs-container {
  width: 80%;
  margin: 0 0;
  text-align: center;
  font-family: Arial, sans-serif;
}

/* Tabs */
.tabs {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin-bottom:5%;
  border-bottom: 2px solid #00000064;
}

.tab {
  margin: 0 20px;
  padding: 10px 5px;
  cursor: pointer;
  font-size: clamp(0.9rem, 2vw, 1.3rem);
  position: relative;
  color: #333;
  transition: color 0.2s ease;
}

.tab:hover {
  color: #d32f2f;
  background-color: #fa803e63;
  border-radius: 5px;
}

.tab.active {
  color: #d32f2f;
  font-weight: bold;
}

.tab.active::after {
  content: "";
  display: block;
  height: 3px;
  background: #d32f2f;
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
}

/* Content */
.tab-content .content {
  display: none;
  width: 100%;
  font-size: clamp(0.8rem, 1.8vw, 1.1rem);
  line-height: 1.6;
}

.tab-content .content.active {
  display: block;
}



/* ==============Inspirations Section============ */

#inspiration_main_div{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8b7759e;
    /* color: rgba(224, 200, 145, 0.959) !important; */
    padding: 0 0 1% 0 ;
}

#inspiration_header_div{
    background: #fd9b2578;
    width: 100%;
    height: auto;

}

#inspiration_header_h{
    text-align: center;
    color: #6f1d14;
    font-family: 'Patua One', cursive, serif;
    font-weight: 300;
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 1%;
}

#inspiration_header_h_quote{
    text-align: center;
    color: #5b0202;
    width: 90%;
    justify-self: center;
    height: auto;
    font-family: 'Patua One', serif;
    font-weight: 300;
    font-size: clamp(0.6rem, 1.5vw, 1.2rem);
}

#inspiration_header_hr{
    color: #760000dc;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-style:solid;
    border-width: 1px;
    width: 70%;
    margin: 0% auto 3% auto;
}

/* =====Inspirations Section BODY===== */

#inspiration_body_mainDiv{
    margin-top:2%;
    margin-bottom:1%;
    width:100%;
    height:auto;
}

#inspiration_body_holyTrio {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
    gap: 2%;                    
    max-width: 70%;          
    height: auto;
    padding: 2% 0 2% 0;        
}

#inspiration_body_sri_ramakrishna{
    height: auto;
    width:fit-content;
    text-align: center;
}
    
#inspiration_body_sri_sarada_devi{
    height: auto;
    width:fit-content;
    text-align: center;
}

#inspiration_body_swami_vivekananda{
    height: auto;
    width:fit-content;
    text-align: center;
}

.inspiration_body_img_holyTrio {
    max-width: 100%;              
    height: auto;
    border-radius: 3%;
    box-shadow: 0 4px 12px #ae6f10d9;
}







/* ------------------- Additional STYLES ------------------- */

/*------------- NAVIGATION (responsive) ----------*/

.nav_div {
  background: #ff7834c6;
  position: relative;
}

.nav_buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.nav_buttons a {
  color: #f4f2f2;
  text-align: center;
  padding: 14px 30px;
  text-decoration: none;
  font-size: 20px;
}

.nav_buttons a:hover {
  background: #ff7834f3;
  color: #000000;
}

/*------------- Hamburger button (hidden on desktop) -----------*/

.nav_toggle {
  display: none;
  background: #ff7834;
  border: none;
  font-size: 28px;
  color: white;
  padding: 10px 15px;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.459);
}

.nav_toggle:hover {
  background: #d85c1c;
}



/*-------------- Scroll To Top Button -----------*/

#scrollTopBtn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  font-size: 24px;
  background: #ff7834;
  color: rgba(255, 255, 255, 0.855);
  border: none;
  padding: 10px 15px;
  border-radius: 30%;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.459);
}

#scrollTopBtn:hover {
  background: #d85c1c;
}


/*--------------- Responsive  ---------------*/

@media (max-width: 768px) {
  
    .theme_site_branding {
    flex-direction: column;

  }
  .Home_slides_div .mySlides{
    width: 65%;
  }

  #_3_card_view_sub_div {
    flex-direction: column;
  }

  /* ======== Navbar ======== */
  .nav_buttons {
    display: none;
    flex-direction: column;
    width: 100%;
    text-align: center;
    background-color: #d85b1c13;
  }
  
  .nav_buttons.show_nav {
    display: flex;
  }
  
  .nav_toggle {
    display: block;
    border-radius: 10px;
  }
  
  .nav_buttons a {
    padding: 7px;
    margin: 5px ;
    color: #a01d00;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 1px 1px 2px #6d1313;
    border-radius: 15px;
  }


/* Footer Responsive */

    #footer{
        flex-direction: column;
        align-items: center;
    }

}