/*!
Theme Name: ttf
Author: Pema
Author URI: https://buddhaface.org.bt/
Description: official Theme of ttf
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: buddhaface
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.

RMGC 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/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/* navbar scrolled effect for header start................................................ */
.navbar {
  background:transparent; /* Set initial background color */
  transition: background 0.5s, box-shadow 0.5s; /* Apply transition only to background and box-shadow */
}
.navbar-scrolled {
  background:#f8f9fa;
  box-shadow: 0 3px 10px rgba(248, 249, 255);
}
nav#bar {
  padding-bottom: 0;
}

.nav-link,
.mega-menu ul li a,
.dropdown-item {
  color: black; /* Set initial color */
  transition: color 0.5s; /* Apply transition only to color */
}


.nav-link:hover,
.mega-menu ul li a:hover,
.nav-link:hover {
  color:414341;
  font-weight: 600 !important;
  transition: 0.5s;
}
.nav-link:hover,
.mega-menu ul li a:hover {
  text-decoration: 1.5px underline #414341;
  text-underline-offset: 0.4em;
}

.dropdown-item:hover {
  text-decoration: 1.5px underline #414341;
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-item.dropdown:hover .nav-link {
  text-decoration: underline;
}


/* ..navbar scrolled effect for header end..... */

/*  logo size  */
.container #logo {
    width: auto-flow;
    height: auto;
    }

/*  carousel image size............  */
  .carousel-inner img {
    height: 750px;
    width: 100%;
    }
.navbar {
  transition: background-color 0.3s ease;
}
.navbar-white-bg {
  background-color: white;
}
/*.for header carousel text display  */
.carousel-caption {
  position: absolute;
  top:70%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; /* Text color */
  text-align:center; 
 
}


p {
text-align: justify;
}

.card2 {
  border: none;/* 1px solid #ccc; */
  width: 100%; /* Full width on small screens */
  max-width: 400px; /* Maximum width of 400px on larger screens */
  height: auto; /* Automatic height */
  margin: auto; /* Center the card */
  padding: 15px; /* Padding for spacing */
  background-color: white; /* Darker background color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 3D shadow effect */
  border-radius: 8px; /* Optional: rounded corners for a softer look */
}


.card2-content {
  text-align: center; /* Center the content */
}

.card2-description {
  margin-top: 10px;
}

.card2:hover {
  background: #f7f9f9;
}

.card2:hover .card2-title {
  color:blue;
}


/* ------------ Media Query for Small Screens (max-width: 992px) ------------ */
@media (max-width: 992px) {
  /* Prevent horizontal scrolling */
  html, body {
    overflow-x: hidden;
  }

  /* Adjust logo size */
  .container #logo {
    width: 160px;
  }

  /* Resize navigation links and dropdown items */
  .container nav ul li a {
    font-size: 13px;
  }

  .container nav .dropdown-item {
    font-size: 11px;
  }

  /* Responsive card styling */
  .card2 {
    max-width: 100%; /* Full width for small screens */
    margin: 10px auto; /* Center with spacing */
  }
	/* Card container adjustments */
  .card2-container {
    display: flex;
    flex-direction: column; /* Stack cards vertically */
    align-items: center; /* Center cards */
    gap: 15px; /* Add spacing between stacked cards */
  }

  /* Individual card adjustments */
  .card2 {
    max-width: 100%; /* Full width for small screens */
    margin: 10px auto; /* Center the card */
  }

  /* Carousel caption adjustment */
  .carousel-caption {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
  }

  /* Content section adjustments */
  .content {
    width: 50%;
    word-wrap: break-word; /* Ensure text wraps properly */
    display: block;
    position: absolute;
    padding: 0 15px;
  }

  .content p {
    font-size: 0.7em;
    text-align: justify;
    margin-bottom: 0 !important;
  }

  .content h1 {
    font-size: 1.1em;
    border-bottom: 0.5px solid #2c9e41;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }

  /* Carousel image adjustments */
  .carousel-inner img {
    height: 300px;
    width: 60%;
  }

  /* Footer adjustments */
  .footer-left {
    margin: 0 2.5rem !important;
  }

  .footer h5 {
    margin-top: 1em !important;
  }
}

/* ------------ Media Query for Large Screens (min-width: 993px) ------------ */
@media (min-width: 993px) {
  /* Carousel height adjustment */
  .carousel-inner {
    height: 100%;
  }

  /* Logo adjustments */
  .container #logo {
    width: 160px;
    height: auto;
  }
	/* Card container for larger screens */
  .card2-container {
    display: flex;
    flex-wrap: wrap; /* Wrap cards in multiple rows if needed */
    justify-content: space-between; /* Distribute cards evenly */
  }

  /* Individual card adjustments */
  .card2 {
    max-width: 400px; /* Set a fixed width for larger screens */
    margin: 15px; /* Add spacing between cards */
  }
}