.parampara {
    background-image: url('../images/ParamparaCards/Peacock_Feather.png');
    background-size: cover; /* Optional: Adjust the background size */
    background-position: center;
    margin-bottom: -140px;
}

.parampara::after {
    content: "";
    display: table;
    clear: both;
}

.parampara_top_bottom {
	justify-content: center;
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	row-gap: 5px;
	column-gap: 10px;
	width: 100%; /* Set the desired width */
    max-width: 400px; /* Set a maximum width if needed */
    margin: 0 auto;
	padding: 5px;
}

.parampara_middle {
	justify-content: center;
	display: grid;
    row-gap: 5px;
    grid-template-columns: repeat(3, 1fr);
	width: 100%; /* Set the desired width */
    max-width: 400px; /* Set a maximum width if needed */
    margin: 0 auto;
    padding: 5px;
}

.parampara_bottom {
	justify-content: center;
	display: grid;
    grid-template-columns: repeat(2, 1fr);
	row-gap: 5px;
	column-gap: 10px;
    margin: 0 auto;
	width: 100%; /* Set the desired width */
    max-width: 267px; /* Set a maximum width if needed */
    padding: 5px;
}


.parampara_cards {
  transition: all 1s cubic-bezier(0.175, 0.885, 0, 1);
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1);
  padding: 5px;
  border: 10px solid transparent;
  border-image: url(../images/ParamparaCards/border.png) 60 round;
}

.parampara_cards_hidden{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: 1s ease;
  opacity: 0;
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.parampara_cards:hover .middle {
  opacity: 0.8;
}

.text {
  background-color: #75301b;
  font-size: 7px;
  padding: 5px 5px;
  border-radius: 12px;
  opacity: 1;
  line-height: 9px;
}

.parampara_cards:hover {
  box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);
    transform: scale(2.10, 2.10);
    z-index: 1;
}

.parampara_link {
    color: white; /* Change this to the desired color */
	text-decoration: none;
}

.parampara_link:hover {
    color: white; /* Change this to the desired color */
}

.parampara_link:visited {
    color: white; /* Change this to the desired color */
}

.middle_tilak {
    background-image: url('../images/ParamparaCards/Tilak.png');  
    background-size: cover; /* Optional: Adjust the background size */
    
}

.Top_Left {
    background-image: url('../images/ParamparaCards/Top Left.png');  
    background-size: cover; /* Optional: Adjust the background size */
    
}

.Top_Right {
    background-image: url('../images/ParamparaCards/Top Right.png');  
    background-size: cover; /* Optional: Adjust the background size */
    
}

.Bottom_Left {
    background-image: url('../images/ParamparaCards/Bottom Left.png');  
    background-size: cover; /* Optional: Adjust the background size */
    
}

.Bottom_Right {
    background-image: url('../images/ParamparaCards/Bottom Right.png');  
    background-size: cover; /* Optional: Adjust the background size */
    
}

.card_top_left {
	bottom: 50%; /* Moving corner cards of the middle layer up by 50% */
    right: 100%;
}

.card_top_right {
	bottom: 50%; /* Moving corner cards of the middle layer up by 50% */
    left: 100%;
}

.card_bottom_three {
	bottom: 100%; /* Moving 3 cards of the bottom layer up by 100% */
} 

.card_bottom_two {
	bottom: 100%; /* Moving 2 cards of the bottom layer up by 100% */
}

@media all and (max-width: 620px) {

.middle_tilak {
	position: relative;
	top: 50%;
    
}

.card_top_left {
	bottom: 1%; /* Moving corner cards of the middle layer up by 1% */
    right: 1%;
}

.card_top_right {
	bottom: 1%; /* Moving corner cards of the middle layer up by 1% */
    left: 1%;
}

.card_bottom_three {
	bottom: 1%; /* Moving cards of the bottom layer up by 1% */
} 

.card_bottom_two {
	bottom: 1%; /* Moving 2 cards of the bottom layer up by 1% */
}

.parampara {
    margin: 1px;
    background-image: url('../images/ParamparaCards/Peacock_Feather_1.png');
}

.divider {
	margin-top: -1px;
}

}

@media (max-width: 768px) {
.parampara_cards:hover {
    transform: scale(1.5, 1.5);
}
}