html,body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
.dvtext { display:none}
#myModal {
    display: block !important; /* Force display to block */
   
	
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Auto-responsive columns */
    gap: 10px; /* Adds space between thumbnails */
}

.thumbnail {
    width: 150px; /* Set the desired width */
    height: 150px; /* Set the desired height to make it square */
    overflow: hidden; /* Hide the overflow to create a cropped effect */
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail img {
    width: 100%; /* Make the image fill the container */
    height: 100%; /* Make the image fill the container */
    object-fit: cover; /* Crop the image to cover the square dimensions */
    object-position: center; /* Center the image within the square */
    border-radius: 5px; /* Optional: add rounded corners */
}


 .tshirt-items-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .tshirt-item {
        flex: 0 1 250px;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .tshirt-image {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .size-selection {
        margin-bottom: 15px;
    }

    .size-button {
        padding: 8px 12px;
        border: 1px solid #ddd;
        background-color: #fff;
        cursor: pointer;
        margin-right: 5px;
        border-radius: 5px;
    }

    .size-button:hover:not(.disabled) {
        background-color: #f0f0f0;
    }

    .size-button.out-of-stock {
        cursor: not-allowed;
        background-color: #ccc;
        color: #888;
    }

    .size-button.selected {
        background-color: orange;
        color: white;
    }

    .tshirt-item h4 {
        margin: 10px 0;
    }

    .tshirt-item p {
        margin: 5px 0;
    }



.modal.show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s;
}

	.modal {

            opacity: 0;
			  transform: translateY(-100px);
            color:black;
            background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
}

    .modal-content {
            padding: 20px;
        }
        .modal-header {
            border-bottom: none;
        }
        .modal-footer {
            border-top: none;
        }
		


.show-mob, .bottom-ad-container {
display: none;
	}
	.no-mob {
	  display:block !important}
	  
	.mob { display:none !important}
	
.message-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 12px;
	text-align: center;
	font-size: 18px;
	z-index: 1000;
	display: none;
	
}
.message-success {
	background-color: lightgreen;
	color: #155724;
}
.message-error {
	background-color: lightcoral;
	color: #721c24;
}

.checkout-details {
width:70%
}

@media (max-width: 768px) {
.page-title {
    font-size: 8vw !important;
  }

}


@media (min-width: 180px) and (max-width: 760px) {
.container {width:100% !important;
max-width:100% !important; 
padding-left:0px !important;
padding-right:0px !important;
}	

.noo-header {
	position:fixed !important;
	z-index: 100 !important;
	width:100%}
		
.noo-cart{display:block !important;
right :10%;
 }

.checkout-details {
width:100%
}

.single-event{
	padding:0px 10px !important;
	text-align:justify;
}
.main-content {
	padding-top:130px !important}

.noo-page-heading.has_breadcrumbs {
    padding: 250px 0 0 !important;
}		
  .page-title {
    display: none !important;
  }

  #signup label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .note {
    top: 70px !important;
    position: absolute !important;
  }

  .hidden {
    display: none;
  }

  .show-mob {
	display: flex !important;
	align-items: center;  
    justify-content: center;
  }
  .no-mob {
	  display:none !important}
	  
  .mob { display:block !important;
  border: 1px solid black;
  padding:10px}

  .bottom-ad-container {
    display: block !important;
    height: 150px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
	 text-align: center;
    transition: height 0.3s ease;
    background-color: #f5f5f5; 
    box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
    z-index: 99999;
  }


/* Collapsed state */
.bottom-ad-container.collapsed {
    height: 50px !important;; /* Collapsed height */
}

/* Ad content */
.bottom-ad-content {
    padding: 10px;
}

.btn, .widget_newsletterwidget .newsletter-submit {
    padding: 1em;
    font-size: 13px;
}

 .pp_pic_holder {
        max-width: 95vw; /* 90% of the viewport width */
        max-height: 100vw;
		position: relative;
		overflow: hidden;
    }

    .pp_content {
        max-width: 100%;
        max-height: 75vw;
        overflow: hidden; /* Prevents overflow of content */
    }

    .pp_content_container {
        max-width: 100%;
        max-height: 75vw;
    }

    .pp_pic_holder img {
        max-width: 100%;
        max-height: 65vw;
        display: block;
        margin: 0 auto; /* Centers the image inside the container */
    }
.pp_pic_holder .pp_next,
    .pp_pic_holder .pp_previous {
        position: absolute !important; /* Position them absolutely within the holder */
        top: 20%; /* Center vertically */
        transform: translateY(-50%); /* Adjust for centering */
        z-index: 999; /* Make sure buttons are on top */
		width:10%;
    }

    .pp_pic_holder .pp_next {
        right: 55%; /* Adjust to be towards the right side */
    }

    .pp_pic_holder .pp_previous {
        left: 0%; /* Adjust to be towards the left side */
    }
/* Close button styling */
.close-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #555;
    color: #fff;
    border: none;   
    cursor: pointer;
    border-radius: 25px;
    font-size: 12px;
}
.events-tickets .events-tickets-content ul {  max-width: 100% !important;}

.events-tickets .events-tickets-content ul.odd .tickets_name:after {
    transform: skewY(6deg);
}

.events-tickets .events-tickets-content ul .tickets_name:after {
    transform: skewY(-6deg);
}

body { margin-bottom: 50px; }		
   	
}