/*color contrast
2907a8*
@import url('https://googleapis.com?family=Playfair Display');*/
:root{
    --maincolor : #C89B3C;/*Used in : buttons, active tabs, follow button, icons, verification badges, headings*/
    --bordercolor:#f4ebd8;/*#D9BE7A;/*Used in : Borders, secondary icons, filters outlines, subtle highlights*/
    --bgcolor: #fcfaf6;/*#faf8f1;/*#F9F5EB;/*#F8F4EE;/*Used in : background, cards, containers*/
    --textcolor:#1A1A1A;/*Used in : texts emphasis*/
}
/************************* Font Styles *************************/
.inter-400,p,span,label,a,input,button,p span {
font-family:inter, sans-serif;font-style:normal;font-weight:400;line-height:16px;
}
.playfair-500{
font-family:'Playfair Display', serif;font-style:normal;font-weight:500;line-height:24px;-webkit-font-smoothing: antialiased;
    font-variant-numeric: lining-nums; /* Ensures numbers are aligned */
}
.playfair-400,h1,h2,h3,h1 span{
font-family:'Playfair Display', serif;font-style:normal;font-weight:550;font-size:clamp(22px,3.5vw,28px);line-height:clamp(24px,3.8vw,30px);-webkit-font-smoothing: antialiased;
    font-variant-numeric: lining-nums; /* Ensures numbers are aligned */
}
.inter-500,.info-item p{
    font-family:inter, sans-serif;font-style:normal;font-weight:500;line-height:16px;
}
.inter-300,.info-item p1{
font-family:inter, sans-serif;font-style:normal;font-weight:300;line-height:23px;
}
.playfair-600{
font-family:"Playfair Display", serif;font-style:normal;font-weight:600;line-height:20px;
}
/*************************************************************************/
html, body{
    width:100vw;/*calc(100vw - 10px);*/
    padding:0px;
    min-height:100vh;
    position:relative;
    z-index:1;
    overflow-x:hidden;
    margin: 0;
    text-align:center;
    background: #FEFEFD;/*var(--bgcolor);*/
}
div,input,p,label,select,option,form,button,textarea,h1,h2,h3,subdiv,strong,p1,span,ul,li,h4,progress,a,img,p2{
    width:calc(100% - 10px);
    padding:5px;
    font-size:15px;
    margin:3px;
    margin-left:auto;
    margin-right:auto;
    resize:none;
    text-align:left;
     overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-decoration:none;
    list-style-position: inside;
}
input,select{
    font-size:15px;
}
div{
    border-color: solid #612143;
}
div div{
    width:100%;
    padding:0px;
    margin:0px;
    margin-left:auto;
    margin-right:auto;
}
.bodymain{
    width:calc(100% - 20px);
    padding:5px;
    margin-top:75px;
    position:relative;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
form{
    max-width:600px;
    border:1px solid var(--bordercolor);
    text-align:center;
}
form label {
    display:block;
    text-align:justify;
}
form textarea{
    height:150px;
}
/*.submit-button{
    max-width:300px;
    padding:5px;
    font-size:18px;
}
.login button{
    max-width:300px;
    background:white;
    font-size:20px;
}
*/
.login{
    background:lightgreen;
}
.login h1{
    text-align:center;
    font-size:24px;
}
.login label,.login input{
    font-size:18px;
}

input{
    border:1px solid gray;
    outline:none;
}
input:focus,textarea:focus{
    border:1px solid skyblue;
    outline:none;
}
input[type="file"]{
    border:none;
}
.rf::after {
    content: "*";
    color: red;
    margin-left:2px
}
.with-icon input,.with-icon select,.with-icon-2 input,.with-icon-2 select,.with-icon p{
    width:calc(100% - 35px);
    border:none;
    margin:0;
    padding:5px;
    font-size:16px;
    /*border-right:1px solid black;*/
    
}
.with-icon-2 input,.with-icon-2 select{
    width:calc(100% - 70px);
}
.with-icon i,.with-icon p,.with-icon span,.with-icon-2 i,.with-icon-2 p,.with-icon-2 span{
    width:30px;
    font-size:20px;
    text-align:center;
    margin-top:auto;
    margin-bottom:auto;
    padding:0;
    /*margin-left:auto;
    margin-right:auto;
    float:center;
    /*padding-top:0;
    padding-bottom:0;*/
    /*text-align:right;*
    float:right;
    /*6px auto auto auto;*/
    color:var(--maincolor);
 
}
.with-icon i:hover, .with-icon span:hover, .with-icon-2 i:hover,.with-icon-2 span:hover{
    cursor:pointer;
}
.with-icon,.with-icon-2{
    width:calc(100% - 35px);
    padding:0 10px 0 10px;
    border:1px solid gray;
    margin:3px;
    display:flex;
    align-items:center;
}
.with-icon p, .with-icon-2 p{
    display:flex;
    align-items:center;
    width:auto;
}
button{
    width:auto;
    border-radius:35px;
    font-size:24px;
    padding:5px 20px 5px 20px;
    background:var(--maincolor);
    color:white;
    border:none;
    box-shadow:3px 3px 3px var(--bgcolor);
    margin-left:auto;
    margin-right:auto;
}
button:active{
    background:var(--bgcolor);
    color:var(--maincolor);
    box-shadow:none;
}
h1{
    text-align:center;
     font-size:30px;
    line-height:36px;
}
input[type='number'],input[type='tel'] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.fa-heart-o,.fa-heart{
  -webkit-text-stroke: 2px white;
  text-stroke: 2px white;
    paint-order: stroke fill;
}
hr{
  border: none;
  border-top: 2px solid var(--maincolor); /* Color and thickness of the line */
  overflow: visible;
  text-align: center;
  height: 0;
  margin: 10px 0; /* Spacing above and below the divider */
}
hr::after {
    display: inline-block; 
    content: "§"; /* The section symbol */
    transform: rotate(90deg);
    background: var(--bgcolor); /* Matches the background of your page */
    padding: 0px 5px; /* Space between the symbol and the lines */
    position: relative;
    top: -10px; /* Pulls the symbol up to sit on top of the line */
    color: var(--maincolor);
    font-size: 1.2rem;
}
.grid-40-60,.grid-50-50,.grid-3-3{
    width:100%;
    margin:0;
    padding-left:0;
    padding-right:0;
    display:grid;
    grid-template-columns:35% 65%;
}
.grid-50-50{
    grid-template-columns:50% 50%;
}
.grid-3-3{
    grid-template-columns:repeat(3,calc(33.3% - 10px));
    column-gap:10px;
}
/******************************* Slider Switch*********************************
.switch {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 36px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.sliderswitch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.sliderswitch:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sliderswitch {
  background-color: #2196F3;
}

input:focus + .sliderswitch {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .sliderswitch:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders *
.sliderswitch.round {
  border-radius: 34px;
}

.sliderswitch.round:before {
  border-radius: 50%;
}
.flexcenter{
    display:flex;
    align-items:center;
    justify-content:center;
}
/************Navbar************/
.topnav{
    width:100%;
    padding:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:fixed;
    top:0;
    margin:0 auto;
    left:0;
    z-index:300;
    height:70px;
    /*transition: background-color 1s ease-in-out;*/
    background:var(--bgcolor);
    color:var(--maincolor);
    /*border:0.8px solid var(--color-7);*/
    border-radius:0;
    /*animation: slideUp 1s forwards ease-out;*/
    
}
@keyframes slideUp {
  from {
    transform: translateY(100%); /* Start off-screen to the left */
    opacity: 0;
  }
  to {
    transform: translateY(0); /* Slide into original position */
    opacity: 1;
  }
}
@keyframes slideDn {
  from {
    transform: translateY(0); /* Start off-screen to the left */
    opacity: 1;
  }
  to {
    transform: translateY(100%); /* Slide into original position */
    opacity: 0;
  }
}

.topnav img{
    width:50px;
    height:50px;
    object-fit:contain;
    border:1px solid white;
    border-radius:50%;
    padding:0;
    background:white;
    margin:0;
}
.mainbutton{
    max-width:500px;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    column-gap:5px;
    text-align:center;
    padding:2px;
    height:70px;
    align-items:center;
}
.mainbutton a,.popup-menu a{
    aspect-ratio:1 / 1;
    margin-left:auto;
    margin-right:auto;
    text-decoration:none;
    color:var(--maincolor);
    border-radius:5px;
    text-align:center;
    height:70px;
}
.mainbutton a:nth-child(4){
   pointer-events: none;
}
.mainbutton a p{
    font-size:clamp(12px,2.5vw,17px);
    text-align:center;    
    line-height:clamp(14px,2.8vw,19px);
}
.mainbutton a span{
    width:25px;
    height:25px;
    font-size:30px;
    padding:0;
    margin:0;
    font-weight:250;
}
.mainbutton a i{
    width: 50px; 
  height: 50px;
   font-size:48px;
}
.fa-2x{
    font-size:1.8em !important;
}
.fa-15x{
    font-size:1.5em !important;
}
#nav-icon{
    display:grid;
    
}
.inactive{
    border:1px solid var(--maincolor);
    color:transparent;
    background:var(--maincolor);
}
.active{
    color:var(--maincolor);
}
.active span{
    font-variation-settings: 
    'FILL' 1,
    'wght' 700,
    'GRAD' 0,
    'opsz' 48;
    color:var(--maincolor);
}
.inactive span{
    font-variation-settings: 
    'FILL' 0,
    'wght' 700,
    'GRAD' 0,
    'opsz' 48;
    color:var(--maincolor);
}
.active p{
    color:var(--maincolor);
}
/*********** Testing*************/
.progress-bar {
  width:220px;
  height:22px;
  border-radius: 20px;
  color:#514b82;
  border:2px solid;
  position: relative;
}
.progress-bar::before {
  content:"";
  position: absolute;
  margin:2px;
  inset:0 100% 0 0;
  border-radius: inherit;
  background:currentColor;
  animation:p6 2s infinite;
}
@keyframes p6 {
    100% {inset:0}
}
.morline{
    height:20px;
    display:none;
    align-items:center;
    
}
marquee{
    direction:left;
    font-size:16px;
    padding:3px;
}

.shortinfo{
    max-width:700px;
    border:1px solid black;
    display:grid;
    grid-template-columns:repeat(3, 32%);
    column-gap:1.3%;
    
}
.grid-50-50{
    display:grid;
    grid-template-columns:50% 50%;
    width:100%;
    padding:0;
    margin:0;
}
.footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:18px;
    font-weight:bold;
    background:#612143;
    color:white;
}
.footer p, .footer p1,.links{
    margin-top:0;
    margin-bottom:0;
    padding-top:0;
    padding-bottom:0;
}
.footer p1{
    width:25px;
    height:25px;
    font-size:25px;
    border:1px solid white;
    display:flex;
    align-items:center;
    justify-content:center;
}
.links{
    display:block;
    height:0px;
    overflow:hidden;
}
.links a{
    width:100%;
    display:block;
    text-decoration:none;
    font-size:16px;    
}
.progress-10 {
  width:120px;
  height:60px;
  border-radius:200px 200px 0 0;
  -webkit-mask:repeating-radial-gradient(farthest-side at bottom ,#0000 0,#000 1px 12%,#0000 calc(12% + 1px) 20%);
  background:
   radial-gradient(farthest-side at bottom,#514b82 0 95%,#0000 0) bottom/0% 0% no-repeat
   #ddd;
  animation:p10 2s infinite steps(6);
}/**/
@keyframes p10 {
    100% {background-size:120% 120%}
}
.slider{
    position: absolute;
    top: 10;
    min-height: 100vh;
    overflow:hidden;
    transition: all 1s;
    background:rgb(255,255,255,0.9);
    left:0;
    right:0;
    z-index:3;
    text-align:center;
    display:block;
    padding-bottom:20px;
    height:100%;
}
.slider-close{
    width:90%;
    text-align:right;
    padding-top:5px;
}
.slider-close span{
    font-size:clamp(24px,5vw,30px);
    color:black;
    width:auto;
    cursor:pointer;
}
.slider form{
    background:var(--bgcolor);
}
.slider.close {
  top: 100%;
  height: 0px;
  background:transparent;
  z-index:3;
  display:none;
}
.slider:disabled{
    opacity:0.5;
}
.in-slider{
    max-width:600px;
    border:1px solid var(--maincolor);
    display:block;
    border-radius:10px;
}

.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;
}
.closebutton i{
    font-size:30px;
    font-weight:bold;
    color:white;
}
.footerbott{
    margin-top:5px;
}
.footerbutton{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color:white;
    background: var(--maincolor);
    max-height: 20px;
    margin-top:20px;
    padding:7px 0 7px 0;
    width:auto;
    max-width:500px;
}
.footerbutton h1{
    font-size: 18px;
    color: white;
}
.quicklinks{
    color: white;
    background-image: url("/images/footer_bg.jpg");
    background-repeat: repeat;
    background-size: cover;
    display: none;
    transition: 1s;
    max-width:1000px;
}
.quicklinks a{
    display:inline-block;
    width:45%;
    text-decoration: none;
    color:white;
    font-size: 15px;
}
.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;
}
disabled{
    color:gray;
}
@media screen and (max-width: 800px) {
    body{
        padding-bottom: 50px;
        padding-top:5px;
    }
    .nodesktop{
        display:block;
    }
    .logoclass{
        display:none;
    }
    .topnav,.mainbutton{
        bottom:0;
        top:auto;
       /* border-radius: 100px / 25px; /* setting the 2 radii in the property */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        height:60px;
        padding-top:5px;
        /*border:0.8px solid var(--maincolor);*/
    }
    .topnav img{
        display:none;
    }
    .mainbutton a p{
        font-size:3.1vw;
        line-height:3.3vw;
        margin-bottom:0;
        padding-bottom:0;
        text-align:center;
    }
    .mainbutton a{
        margin-left:2px;
        margin-right:2px;
    }
    .mainbutton a i{
        width:20px;
        height:20px;
        font-size:25px;
    }
    .bodymain{
        margin-top:0px;
        padding-bottom:50px;
        padding-top:0px;
    }
    .nomob{
        display:none;
    }
    .mob1{
        grid-template-columns:100%;
    }
    .slider{
        top:0;
    }
    
}
@media screen and (max-width: 500px) {
    .mainbutton a{
        font-size:2.8vw;/*17px;*/   
    }
   .bodymain{
        margin-top:0px;
        padding-bottom:100px;
        padding-top:0px;
    }
    
}