* {padding: 0; margin: 0; font-size: 16px; box-sizing: border-box;}

.main-container 
{
    position: relative; 
    margin-top: -20px;
    height: auto;
    display: grid;
    background: white;
    border-radius: 12px;
    overflow: hidden;
}
.box-Left { background: #8a017e; color: white; position: relative; }
.box-Right h2 { margin-bottom: 25px; color: #333; }
.box-Right label { display: block; margin-bottom: 6px; font-size: 1rem; font-weight: bold; color: #444; }
.box-Right input, .box-Right textarea 
{
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
}
.box-Right input:focus, .box-Right textarea:focus { border-color: #3498db; }
.box-Right textarea { resize: vertical; }
.box-Right button 
{
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    background: #3498db;
    color: white;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
}
.box-Right button:hover { background: #2980b9; }
#successMessage { margin-top: 15px; color: green; font-weight: bold; }

@media(max-width: 460px) /* OK Done */
{
    .main-container 
    { max-width: 94.5%; width: 94.5%; top: 30px;
    margin-left: 2.6%; grid-template-rows: 0.67fr 1.33fr; margin-bottom: 40px;
    }
    .box-Left { padding-top: 50px; padding-bottom: 0%; padding-left: 5%; }
    .box-Right {padding-top: 35px; padding-bottom: 0%; }
    h1 {margin-bottom: 75px; font-size: 1.1rem;}
    h1 p {margin-top: 2px; font-size: 1.05rem; max-width: 90%;}
}

@media(min-width: 461px) and (max-width: 576px) /* OK Done */
{
    .main-container 
    { max-width: 94.5%; width: 94.5%; top: 30px;
    margin-left: 2.6%; grid-template-rows: 0.45fr 1.55fr; margin-bottom: 40px;
    }
    .box-Left { padding-top: 30px; padding-left: 5%; }
    h1 {margin-bottom: 80px; font-size: 1.3rem;}
    h1 p {margin-top: 3px; font-size: 1.2rem; max-width: 90%;}
}

@media(min-width: 577px) and (max-width: 767px) /* OK Done */
{
    .main-container 
    { height: 1050px; max-width: 94.5%; width: 94.5%; top: 30px;
    margin-left: 2.6%; grid-template-rows: 0.40fr 1.60fr; margin-bottom: 40px;
    }
    .box-Left { padding-top: 30px; padding-left: 5%; }
    h1 {margin-bottom: 80px; font-size: 1.5rem;}
    h1 p {margin-top: 3px; font-size: 1.3rem; max-width: 90%;}
}
@media(min-width: 768px) and (max-width: 991px)  /* OK Done But Position NOT Fixed */
{
    .main-container
    { height: 1020px; max-width: 74%; width: 74%; 
    margin-left: 24%; grid-template-rows: 1.2fr 0.8fr; margin-bottom: 18px;
    }
    .box-Left { padding-top: 30px; padding-left: 5%; }
    h1 {margin-bottom: 80px; font-size: 1.6rem;}
    h1 p {margin-top: 3px; font-size: 1.4rem; max-width: 95%;}
}

@media(min-width: 992px) and (max-width: 1199px)  /* OK Done But Position NOT Fixed */
{
    .main-container 
    { height: 560px; max-width: 78.5%; width: 82.5%; margin-left: 20%; 
    grid-template-columns: 1.1fr 0.9fr; margin-bottom: 18px;
    }
    .box-Left { padding-top: 30px; padding-left: 5%; }
    h1 {margin-bottom: 80px; font-size: 1.6rem;}
    h1 p {margin-top: 3px; font-size: 1.4rem; max-width: 92%;}
}

@media(min-width: 1200px) and (max-width: 1399px)
{
    .main-container 
    { height: 565px; max-width: 83%; width: 83%; margin-left: 15.7%; 
    grid-template-columns: 1fr 1fr; margin-bottom: 18px;
    }
    .box-Left { padding-top: 30px; padding-left: 5%; }
    h1 {margin-bottom: 80px; font-size: 1.6rem;}
    h1 p {margin-top: 3px; font-size: 1.4rem; max-width: 92%;}
}

@media(min-width: 1400px) 
{
    .main-container 
    { height: 570px; max-width: 82.8%; width: 82.8%; margin-left: 15.7%; 
    grid-template-columns: 1fr 1fr; 
    }
    .box-Left { padding-top: 30px; padding-left: 5%; }
    h1 {margin-bottom: 80px; font-size: 1.6rem;}
    h1 p {margin-top: 3px; font-size: 1.4rem; max-width: 92%;}
}