/*
Theme Name: Satsang
Author: Shilpa
Description: A clean, custom WordPress theme built from scratch.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: satsang
Tags: blog, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, responsive-layout, two-columns
*/

body {
    box-sizing: border-box;
    margin: 0px;
}

.banner-container {
    display: flex;
    justify-content: center;
    width: 100%;
}
.banner-image {
    height: auto;
    width: 100%;
    margin-top: 10px;
}

.card-image {
    height: 350px;
    width: 250px;
    margin-top: 40px;
    margin-bottom: 30px;
    border: 1px solid #000;
}
.each-image-wrap{
    max-width: calc(100% / 3);
    flex: 1 calc(100% / 3);
    text-align: center;
}
.image-card-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

@media only screen and (max-width: 575.98px) {
    .image-card-container {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .card-image {
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

@media (min-width: 0) and (max-width: 767.98px) {
    .each-image-wrap{
        max-width: 100%;
        flex: 1 100%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) { 
    .each-image-wrap{
        max-width: calc(100% / 2);
        flex: 1 calc(100% / 2);
    }
}

/* popup styles */
.mfp-bottom-bar{
    display: none;
}

/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
	padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}
/* popup styles */

/* CSS */
.button-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}

.button-87 {
  margin: 10px;
  padding: 15px 30px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: #fff;
  border-radius: 10px;
  display: block;
  border: 0px;
  font-weight: 700;
  box-shadow: 0px 0px 14px -7px #f09819;
  background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  text-decoration: none;
}

.button-87:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.button-87:active {
  transform: scale(0.95);
}