body{
font-family:"Roboto",sans-serif;
margin:0;
overflow-x:hidden;
}

/* Background */
.main-bg{position:relative;background: linear-gradient(180deg, rgba(252, 227, 216, 1) 0%, rgb(254 193 135 / 0%) 100%);}

/* Header image */
img.mainImg{
width:100%;
height:auto;
display:block;
}

/* Container */
.container.mincont{max-width: 95%;width: 100%;margin: 0px auto 30px;}

/* Outer Frame */
.mincont{position:relative;padding: 15px 17px;border-radius:20px;}
 
 
/* Title */
.frame-title{position:absolute;/* top:-18px; *//* left:50%; *//* transform:translateX(-50%); *//* padding: 1px 12px; *//* font-size:18px; *//* font-weight:600; *//* color:#1e4f87; *//* background: linear-gradient(#ffddce, #feeae2); *//* border:2px solid #7fa3c7; */border-radius:6px;/* font-family:'Poppins',sans-serif; *//* white-space:nowrap; */}

/* Labels */
label{
font-weight:600;
margin-bottom:5px;
}

/* Inputs */
.form-control{
border-radius:25px;
border:2px solid #7ea1c7;
padding:10px 15px;
}

/* Input group */
.input-group-custom{
display:flex;
gap:10px;
}

/* Section */
.section-box{
background:#dde3ea;
padding:12px;
border-radius:15px;
height:100%;
}

/* Upload */
.upload-area{
border:2px dashed #5e8ec5;
border-radius:15px;
padding:15px;
text-align:center;
background:#eef3f9;
width:100%;
}

.upload-icon img{
max-width:50px;
}
 
textarea{
border-radius:15px!important;
border:2px solid #7ea1c7!important;
resize:none;
}

/* Button */
.submit-btn{
background:#1c5299;
color:#fff;
border:none;
padding:10px 35px;
border-radius:30px;
font-size:16px;
font-weight:600;
width:100%;
max-width:250px;
}

 
 
/* ================= MOBILE ================= */

@media (max-width: 768px){
 body .frame-title {
     padding:  10px;
     font-size: 23px;
     border: none;
     margin: 0;
     max-width: 100%;
     background: none;
     line-height: normal;
}
.frame-title::before,
.frame-title::after{
 content: ""; 
 display: block; 
 width: 80px; 
 height: 2px; 
 background: #033d81; 
 margin: 1px auto; 
}
 body .container.mincont{
padding:10px;
 }
}
@media(max-width:768px){

 
.mincont{
padding:50px 15px 20px;
}

.frame-inner{padding-top: 0px!important;padding:15px;}

.midcont .frame-title{/* font-size:14px; */padding: 0;/* top:-14px; */}

.input-group-custom{
flex-direction:column;
}

.submit-btn{
width:100%;
}

}



/* Main Certificate Frame */
.mincont{
    position:relative;
    max-width:700px;
    margin:50px auto;
    padding: 50px 42px;
    background: #fde9e0;
    border: 8px solid #fec187; /* gold border */
    box-shadow:0 10px 40px rgba(0,0,0,0.15);
}

/* Inner Double Border */
.mincont::before{
    content:"";
    position:absolute;
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    border:2px solid #d4af37;
    pointer-events:none;
}

/* Decorative Corner Lines */
.mincont::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(#d4af37,#d4af37) 20px 20px/40px 2px no-repeat,
        linear-gradient(#d4af37,#d4af37) 20px 20px/2px 40px no-repeat,
        linear-gradient(#d4af37,#d4af37) calc(100% - 20px) 20px/40px 2px no-repeat,
        linear-gradient(#d4af37,#d4af37) calc(100% - 20px) 20px/2px 40px no-repeat,
        linear-gradient(#d4af37,#d4af37) 20px calc(100% - 20px)/40px 2px no-repeat,
        linear-gradient(#d4af37,#d4af37) 20px calc(100% - 20px)/2px 40px no-repeat,
        linear-gradient(#d4af37,#d4af37) calc(100% - 20px) calc(100% - 20px)/40px 2px no-repeat,
        linear-gradient(#d4af37,#d4af37) calc(100% - 20px) calc(100% - 20px)/2px 40px no-repeat;
    pointer-events:none;
}

/* Title Styling */
.frame-title{
    text-align:center;
    font-size: 1.5vw;
    font-weight: 600;
    letter-spacing:1px;
    color: #1c5299;
    margin-bottom: 0px;
    position:relative;
    margin-top: -77px;
    max-width: max-content;
    border: 3px solid;
    padding: 11px 20px;
    margin-left: auto;
    margin-right: auto;
    background: #dde3ea;
    line-height: 1;
}

 

.main-bg::before{
    background-image: url(image/shape.png);
    content: '';
    background-size: 676px;
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.3;
}

img.flower ,img.flower2 {
    position: absolute;
    top: 35vw;
    max-width: 8vw;
    width: 100%;
    z-index: 2;
    left: 1;
}
 
img.flower2 {
 right:0px;
 transform: scaleX(-1);
}
 





/* button  */