body{
    width:calc(96vw - 6px);
    height: 100vh;
    padding: 0px;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: auto;
    margin-right:auto;
    position: relative;
    left:auto;
    right:auto;
    font-family: 'Times New Roman', serif;
    
}
:root {
    --primary: #00B98E;
    --secondary: #FF6922;
    --light: #EFFDF5;
    --dark: #0E2E50;
    --gray:rgb(222, 229, 236);
    --bg-faint:#fbeded;/*#ede6ff;*/
    --bg-dark:#65000b;
    --bg-blue-00:#f0f4fa;
    --bg-blue-0:#F7F9FC;/**/
    --bg-blue-1:#cbdaee;
    --bg-blue-2:#a6c0e1;
    --bg-blue-3:#82a6d5;
    --bg-blue-4:#5d8bc9;
    --bg-blue-5:#3e72b7;
    --bg-blue-6:#315b93;
    --bg-blue-7:#25446e;
    --bg-blue-8:#192e49;
    --bg-blue-9:#0c1725;
    --cl-1:#f9f4f1;
    --cl-2:#e9dbcf;
    --cl-3:#dac1ae;
    --cl-4:#cba88c;
    --cl-5:#bb8e6a;
    --cl-6:#a8754d;
    --cl-7:#875e3d;
    --cl-8:#65462e;
    --cl-9:#432f1f;
    --cl-10:#22170f;
}
    
div,input,p,label,select,option,form,button,textarea,h1,h2,h3,subdiv,strong,p1,span,ul,li,a{
    width:calc(100% - 10px);
    padding:5px;
    font-size:16px;
    margin:3px;
    margin-left:auto;
    margin-right:auto;
    border-radius:5px;
    resize:none;
    text-align:left;
    text-decoration:none;
}
h1{
    font-size:20px;
}
h2{
  font-size:18px;  
}
input,select{
    outline:0.8px solid lightgray;
    border:none;
    
}
input:focus,select:focus{
    border:none;
    outline:0.8px solid var(--dark);;
}
input:focus,select focus{
    outline:1px solid blue;
}
div div{
    width:100%;
    padding:0px;
}
button{
    text-align:center;
}
button:hover{
    cursor:pointer;
}
.selfcenter,.val{
    margin-left: auto;
    margin-right:auto;
}
.textcenter{
    text-align: center
}
.textleft{
    text-align: left;
}
.textright{
    text-align: right;
}
.fontsize16{
    font-size: 16px;
}
.fontsize18{ 
    font-size: 18px;
}
.fontsize20{
    font-size: 20px;
}
.fontsize22{
    font-size: 22px;
}
.fontsize24{
    font-size: 24px;
}
.nomargin{
    margin:0px;
}
.rf::after {
    content: "*";
    color: red;
    margin-left:2px
}
.req{
    outline-color: red;
}
.reqok{
    outline-color: none;
}
.fbold{
    font-weight: bold;
}
img{
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events: none;
}
input[type=checkbox] {
    transform: scale(1.5);
}

a:hover{
    cursor:pointer;
}
.col2{
    display: grid;
    grid-template-columns: 49% 49%;
    column-gap: 2%;
}
.col3{
    display: grid;
    grid-template-columns: 33% 33% 33%;
    column-gap: .3%;
}
.input-icon{
    display:grid;
    grid-template-columns : 1fr 40px 40px;
    align-items:center;
    border:1px solid gray;
    margin-top:0;
}
.input-icon input{
    border:none;
}
.input-icon input:focus{
    outline:none;
}
.input-icon i{
    font-size:25px;
}
/************************** Footer ***********************/
.footerbott{
    width: 100%;
    margin-top:5px;
        
}
.footerbutton{
    width: calc(100% - 10px);
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color:white;
    background: blue;
    max-height: 20px;
    margin-top:20px;
}
.footerbutton h1{
    font-size: 16px;
    color: white;
}
.footerbutton button{
    display:flex;
    max-width: 25px;
    max-height: 25px;
    background: transparent;
    border: 1px solid white;
    font-size: 18px;
    color: white;
    align-items:center;
    justify-content:center;
}
.quicklinks{
    width: calc(100% - 10px);
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    background-image: url("/images/footer_bg.jpg");
    background-repeat: repeat;
    background-size: cover;
    display: none;
    transition: 1s;
}
.quicklinks a{
    width: calc( 100% - 6px);
    padding: 3px;
    display: block;
    text-decoration: none;
    color:rgb(241, 240, 240);
    font-size: 15px;
    margin-left:5px;
    margin-top:0px;
    margin-bottom: 2px;
}
.quicklinks h1{
    font-size: 15px;
    color:white;
    margin-top: 0;
    margin-bottom: 4px;
}
#copyright{
    width:90%;
    text-align:center;
    font-size:12px;
    margin-left:auto;
    margin-right:auto;
}
.quicklinks a:hover{
    cursor: pointer;
}
.bodymain{
     margin-top:0;
     position: relative;
 }
 .contactandfeedback{
    display: grid;
    grid-template-columns: 50% 50%;
    background: rgba(241, 232, 211, 0.904);
    color:rgba(66, 50, 11, 0.904);
}
.contactus{
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont-img{
    width:150px;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(66, 50, 11, 0.904);
    border-radius:10px 100px / 120px;
}
.contactus img{
    width: 150px;
    height:150px;
}
.contactus h1, .contactus p{
    text-align: center;
    margin-top:3px;
    margin-bottom: 3px;
    font-size: 18px;
}
.contactus h1 , .feedbackform h1{
    font-size: 20px;
    text-align: center;
}
.feedbackform{
    text-align: center;

}
.feedbackform input,.feedbackform textarea{
    font-size: 15px;
}
.feedbackform button{
    padding: 10px;
    background: rgba(66, 50, 11, 0.904);
    color:rgba(241, 232, 211, 0.904);
    border-radius: 5px;
    font-size: 16px;
    border: none;
    box-shadow: 5px 5px 4px skyblue;
}
.feedbackform textarea{
    max-height: 200px;
}
.feedbackform hr{
    display:none;
}
.topnav{
    height:45px;
    background:lightblue;
    transition: bottom 0.3s;
    display: flex;
    align-items: center;
}
.moqline{
    font-size: 16px;
    font-weight: bold;
    margin-top:5px;
    padding-top: 3px;
    padding-bottom: 3px;
    width:100%;
}
.mainbutton{
    width: auto;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.logoclass{
    width:auto;
    height: 40px;
    object-fit: contain;
}
.mainbutton a{
    width:40px;
    height:40px;
    font-size:20px;
    margin-left:20px;
    margin-right:20px;
    margin-bottom: 5px;
}
.mainbutton a img{
    width:40px;
    height:40px;
    object-fit:contain;
}
.social-buttons a img,.social-buttons button img{
    width: 45px;
    height:45px;
    object-fit: contain;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    border-radius:50%;
    background:lightgray;
    padding:5px;
}
.social-buttons button{
    width:auto;
    background: transparent;
    border: none;
    display:inline-block;
    margin-left:5px;
    margin-right:5px;
    
    
}
.how-to{
    width:calc(100% - 10px);
    padding:5px;
    max-width:700px;
}
.how-to p{
    text-align:justify;
    line-height:normal;
}
.how-to span{
    font-size:12.0pt;
    font-family:"Arial","sans-serif";
}
.img-descr{
    width:50%;
    display:inline-block;
}
.howtoitem{
    border-radius:0;
    border:1px solid black;
}
.howtoitem h1{
    background:var(--bg-blue-7);
    color:white;
    text-align:center;
    padding-top:0;
    margin-top:0;
}
.howtoitem img{
    max-height:300px;
    object-fit:contain;
    margin-top:0;
    padding-top:0;
}
.how-to-sub{
    width:calc(100% - 10px);
    padding-left:5px;
    padding-right:5px;
    text-align:center;
}
.videodiv{
    background-image: url('../images/video_background.jpg'); /* Specify the image path */
    background-size: cover;/*contain;/*cover; /* or 'contain', '100% 100%', etc. */
    background-repeat: no-repeat; /* or 'repeat', 'repeat-x', 'repeat-y' */
    background-position: center center; /* or 'top left', '50% 50%', etc. */
    height: 400px; /* Set a height for the div to see the background */
    width: 100%; /* Set a width for the div */
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    
}
.how-to-sub button{
    background:none;
    border:none;
    border:.5px solid var(--bg-blue-3);
    width:auto;
    box-shadow:3px 3px 5px var(--bg-blue-3);
    padding-left:20px;
    padding-right:20px;
}
.how-to-sub h1,.how-to-sub h2{
    text-align:center;
    font-size:20px;
    color:var(--bg-blue-8);
}
.how-to-sub h2{
    font-size:18px;
}
.videodiv video{
    width:auto;
    height:380px;
  
   
}
.slider{
    position: absolute;
    top: 0;
    min-height: 100vh;
    overflow:hidden;
    transition: all 1s;
    /*background:#800000;*/
    color:white;
    max-width:800px;
    left:0;
    right:0;
    z-index:5;
    text-align:center;
    display:block;
}
.slider.close {
  top: 100%;
  height: 0px;
  background:transparent;
  z-index:-1;
  display:none;
}
.slider:disabled{
    opacity:0.5;
}
.closebutton{
    text-align:center;
  /*  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;*/
    background:#612143;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:20px;
    
    
}
.closebutton i{
    font-size:30px;
    font-weight:bold;
    color:white;
    float:right;
    margin-right:20px;
}

@media screen and (max-width: 800px) {
    body{
        width: 96vw;
        padding:0px;
    }
    .bodymain{
        margin-top:90px;
    }
    .contactandfeedback{
        grid-template-columns: 100%;
    }
    .feedbackform hr{
        display:block;
        width: 80%;
        margin-left:auto;
        margin-right: auto;
    }
    .topnav{
        text-align:center;
        border-radius: 0 0 25px 25px;
        position:fixed;
        top:20;
        left:0;
        z-index:101;
    }
    .moqline{
        text-align:center;
        position:fixed;
        top:0;
        left:0;
        z-index:101;
        background:lightblue;
        margin-top:0;
        height: 20px;
    }
    .logoclass{
        display: none;
    }
    .mainbutton{
        width: 100%;
        height:55px;
    }
    .mainbutton a{
        margin-left:5px;
        margin-right:20px;
    }
}