/* Add your custom styles here */
div, h1, h2, h3, h4, h5, p{
	font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;
}
.formLavel {
    font-size: 18px ;
    /* padding-bottom: 15px; */
}
.formInput {
    margin-top: 15px ;
    width: 20% ;
    font-size: 16px ;
}
.formInput_submite_button {
    padding: 10px 40px ;
    font-size: 16px ;
    background: #3c434a ;
    color: white ;
    border: none ;
    border-radius: 10px ;
}
.formInput_submite_button:hover {
    color: #3c434a ;
    background: white ;
    border: 1px solid black ;
}
.fullform {
    padding: 35px 0px ;
}
/*popupcss*/
.mfp-container {
    padding: 0 0px;
	background-color: #fff;
}
.mfp-content {
    width: 100% ;
    /* max-width: 900px; */
    margin: 0 auto ;
    background: white ;
    height: 100vh ;
}
button.mfp-close, button.mfp-arrow {
    font-size: 50px ;
    margin-right: 37px ;
    margin-top: 25px ;
}
.popupfull {
    width: 100%;
    height: 100vh ;
    display: flex ;
    flex-direction: column ;
    align-content: center ;
    align-items: center ;
    border-radius: 10px 10px 0px 0px ;
}
.iframe-container {
    position: relative ;
    width: 100% ;
    height: 90vh ;
    border: 1px solid #ccc ;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) ;
    margin-top: 20px ;
}
iframe {
    width: 100% ;
    height: 100% ;
    border: none ;
}
.controls {
    margin-top: 20px ;
}
.controls button {
    margin: 0 5px ;
    padding: 8px 10px ;
    border: none ;
    border-radius: 4px ;
    background-color: #007bff ;
    color: white ;
    cursor: pointer ;
}
.controls button:hover {
    background-color: #0056b3 ;
}
img.button_icon {
    height: 25px ;
}
/*Fontend CSS*/

.rmtitle_section_full {
    display: flex ;
    flex-direction: column ;
    align-content: center ;
    align-items: center ;
    padding: 40px 30px;
    border-radius: 10px;
}
.rm_content_section{
   display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    width: 50% ;
}
.rmsectiontitle {
    text-align: center !important;
	font-weight: 700;
}
.rmsectiondic {
    text-align: center !important;
}
.rmtitle_img {
    width: 150px ;
    height: auto ;
}
.rm_button_section {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
    justify-items: center;
    align-items: center;
	flex-wrap: wrap;
}
.rm_filter_button {
    padding: 8px 25px;
    margin: 5px;
    border: 2px solid #B3CF7C; /* Default border color */
    border-radius: 20px;
    text-decoration: none;
    color: #555 ; /* Default text color */
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.rm_filter_button:hover {
    border-color: #333 !important;
    color: #fff !important;
    background-color: #4c1e85 !important;
}

/* This is the new style for the ACTIVE button */
.rm_filter_button.active {
    background-color: #4c1e85 !important; /* Active background color */
    color: #fff !important; /* Active text color */
    border-color: #333; /* Active border color */
}

.rm-template-list {
    display: flex ;
    align-content: center ;
    justify-content: center ;
    align-items: center ;
    justify-items: center ;
	flex-wrap: wrap;
    padding: 30px 20px ;
}
.rm-template-demo-live-preview-button {
    padding: 10px !important;
    margin-bottom: 20px !important;
}
.rm-template-demo-title {
    margin-top: 20px !important;
}
.rm-template-item {
	width: 300px !important;
    margin: 8px ;
    display: flex;
    flex-direction: column ;
    align-content: center ;
    align-items: center ;
    box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1) ;
    width: 95% ;
	border-radius: 5px ;
}
.rm-template-demo-image {
    width: 100% !important;
    height: 165px  !important;
    object-fit: cover  !important;
	border-radius: 5px 5px 0px 0px  !important;
}
.rm-template-demo-live-preview-button a{
    padding: 5px 20px 8px 20px;
    border-radius: 5px ;
    margin: 10px 5px ;
    text-align: center;
    text-decoration: none ;
}
.rm-template-category {
    width: fit-content;
    align-self: baseline ;
    margin-top: -32px ;
    border-radius: 0px 5px 5px 0px ;
    padding: 4px 10px 4px 10px ;
    background-color: #e4e4e4 ;
    color: #29292f ;
    font-size: 13px ;
    z-index: 1 ;
}
.rm-template-demo-title {
    font-size: 18px;
}

/*
 * Custom Styling for the Magnific Popup Close Button
 * This targets the default button and makes it a purple circle.
*/
button.mfp-close {
    /* --- POSITIONING --- */
    /* This moves the button down. Adjust the value to fit below your header. */
    top: 40px !important; 
    right: 10px !important;
    
    /* --- SIZING AND SHAPE --- */
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important; /* Makes it a circle */
    
    /* --- COLOR AND APPEARANCE --- */
    background: #4c1e85 !important; /* The purple color */
    color: #ffffff !important;
    border: none !important;
    opacity: 1 !important;
    
    /* --- TEXT ('x') STYLING --- */
    font-size: 30px !important;
    line-height: 40px !important; /* Vertically centers the 'x' */
    font-family: Arial, sans-serif !important;
    padding: 0 !important;

    /* --- Ensure it's on top --- */
    z-index: 9999 !important;
}

/* Optional: Slightly darker on hover */
button.mfp-close:hover {
    background: #3a166a !important; 
}

.mfp-content {
    /* You can adjust this value to add more or less space */
    margin-top: 50px !important;

    /* 
     * This is important: We reduce the popup's height by the same amount 
     * as the margin we added. This prevents an unnecessary scrollbar.
    */
    height: calc(100vh - 150px) !important;
}

@media only screen and (max-width: 767px) {
.mfp-content {
    /* You can adjust this value to add more or less space */
    margin-top: 50px !important;

    /* 
     * This is important: We reduce the popup's height by the same amount 
     * as the margin we added. This prevents an unnecessary scrollbar.
    */
    height: calc(100vh - 200px) !important;
}

button.mfp-close {
    margin-top: -20px !important;
    margin-right: -10px;
     width: 25px !important;
    height: 25px !important;
    font-size: 18px !important;
    line-height: 22px !important;
}



.mfp-content {
    /* You can adjust this value to add more or less space */
    margin-top: 0px !important;

    /* 
     * This is important: We reduce the popup's height by the same amount 
     * as the margin we added. This prevents an unnecessary scrollbar.
    */
    height: calc(100vh - 150px) !important;
}

}