@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Open+Sans:wght@300..800&display=swap');
body{line-height:30px;color:#444444;font-size:16px;min-height:100vh;background:linear-gradient(to bottom, var(--pc) 0%, var(--pc-dark) 100%);transition:.3s;font-family: "Cairo", sans-serif;}
body.male{--pc:#1ccbe1;--pc-dark:#00385e;--sc:#36A556;}
body{--pc:#eaadc6;--pc-dark:#97318f;--sc:#36A556;}
p{text-align:justify;}
ul, ol{list-style:none;-webkit-padding-start:0px;-moz-padding-start:0px;}
a{color:var(--pc-dark);}
a:hover, a:active, a:focus{text-decoration:none;color:var(--sc);}
::selection{color:#FFF;background:var(--pc-dark);}
.margin-top-30{margin-top:30px;}
.margin-auto{margin:auto;}
.clr{clear:both;}
.bg-styles{background-size:cover !important;background-position:center !important;}
.inline{display:inline-block;}
*{outline:none !important;transition:var(--tr);}
.left-md-center, .right-md-center{text-align:center;}
.left-md-center img, .right-md-center img{margin:auto;}
.padding-0{padding:0;}
.inline-img{float:none;}
.text-center img{margin:auto;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{color:var(--pc-dark);}
.full-width{width:100%;}

.booking-wrapper{display:flex;min-height:100vh;flex-direction:column;justify-content:center;padding:30px 0;}
.form-wrapper{background-color:#FFF;position:relative;transform:translateZ(1px);}
.form-wrapper:before,.form-wrapper:after{z-index:-1;position:absolute;content:"";bottom:10px;left:14px;width:50%;top:80%;max-width:40%;background:#00000050;-webkit-box-shadow:0 15px 10px #777;-moz-box-shadow:0 15px 10px #00000050;box-shadow:0 15px 10px #00000050;-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-o-transform:rotate(-3deg);-ms-transform:rotate(-3deg);transform:rotate(-3deg)}
.form-wrapper:after{-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-o-transform:rotate(3deg);-ms-transform:rotate(3deg);transform:rotate(3deg);right:14px;left:auto}
.primary-heading{margin:0 0 30px 0;}
.img-side{height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;;min-height:400px;background-color:#FFF;background-image:url("../images/boy.jpg");}
.form-side{padding:42px;position:relative;transform:translateZ(1px);}

.form-header{display:flex;align-items:center;justify-content:space-between;justify-items:center;margin-bottom:30px;}
.form-header h3{margin:0;font-size:22px;text-transform:uppercase;font-weight:600;}
.logo img{max-height:72px;}
.form-side::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:#eceef3;z-index:-1;}

.gender{align-items:center;gap:20px;}
.select-title, .gender-type{text-align:center;text-transform:uppercase;font-size:18px;font-weight:700;margin-bottom:8px;color:#AAA;color:#00000030;font-weight:700;text-shadow:0px .5px .5px rgba(255,255,2555,0.5), 0px -.5px .5px rgba(0,0,0,.5);}
body:not(.male) .gender-type:first-child{color:var(--of);text-shadow:0 0 calc(var(--sz) / 10) var(--of), 0 0 calc(var(--sz) / 5) #fff, calc(var(--sz) / -8000) calc(var(--sz) / -150) calc(var(--sz) / 50) #0008, calc(var(--sz) / 150) calc(var(--sz) / 100) calc(var(--sz) / 50) #fff;}
body.male .gender-type:last-child{color:var(--on);text-shadow:0 0 calc(var(--sz) / 10) var(--on), 0 0 calc(var(--sz) / 5) #fff, calc(var(--sz) / -8000) calc(var(--sz) / -150) calc(var(--sz) / 50) #0008, calc(var(--sz) / 150) calc(var(--sz) / 100) calc(var(--sz) / 50) #fff;}
.form-control{padding:10px;border-radius:0;}

:root{--sz:3vmin;--on:#2eddf3;--of:#f55ee1;--tr:all 0.25s ease 0s;}	

.toggle{position:relative;width:calc(var(--sz) * 4);height:calc(var(--sz) * 2);display:flex;align-items:center;justify-content:center;}
label[for=select-gender]{position:absolute;width:calc(var(--sz) * 4);height:calc(var(--sz) * 2);background:linear-gradient(180deg, #888, #fff);border-radius:var(--sz);padding:calc(var(--sz) / 5);box-shadow:0 0 calc(var(--sz) / 50) calc(var(--sz) / 50) #0002;}	
#select-gender:checked + label[for=select-gender]{box-shadow:0 calc(var(--sz) / 50) calc(var(--sz) / 5) #fff9, 0 0 calc(var(--sz) / 50) calc(var(--sz) / 50) #0002;}
label[for=select-gender]:after{content:"";position:absolute;width: calc(100% - calc(calc(var(--sz) / 5) * 2));height:calc(100% - calc(calc(var(--sz) / 5) * 2));box-shadow: 0 0 calc(var(--sz) / 2) calc(var(--sz) / 10) var(--of), 0 0 calc(var(--sz) / 2) calc(var(--sz) / 10) #fff;border-radius:var(--sz);z-index:0;/* opacity:0; */transition:var(--tr);animation:move-shadow 3s ease 0s 1;}
#select-gender:checked + label[for=select-gender]:after{opacity:1;box-shadow: 0 0 calc(var(--sz) / 2) calc(var(--sz) / 10) var(--on), 0 0 calc(var(--sz) / 2) calc(var(--sz) / 10) #fff;}
.track{position:absolute;width:calc(calc(var(--sz) * 4) - calc(var(--sz) / 2.5));height:calc(calc(var(--sz) * 2) - calc(var(--sz) / 2.5));border-radius:var(--sz);overflow:hidden;}
.track:before{content:"";position:absolute;width:calc(200% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3)));height:100%;left:-50%;transition:var(--tr);background:linear-gradient(90deg, var(--on) 50%, var(--of) 50%);animation:move-color 3s ease 0s 1;}
.track:after{content:"";position:absolute;width:100%;height:100%;border-radius:var(--sz);box-shadow:0 calc(var(--sz) / -10) calc(var(--sz) / 10) 0 #0005 inset, 0 calc(var(--sz) / 10) calc(var(--sz) / 10) 0 #0005 inset;}
#select-gender:checked + label .track:before{left:0%;}
.thumb{position:absolute;width:calc(calc(var(--sz) * 2) - calc(var(--sz) / 3));height:calc(calc(var(--sz) * 2) - calc(var(--sz) / 3));top:calc(calc( var(--sz) / 10) + calc(var(--sz) / 15));left:calc(calc( var(--sz) / 10) + calc(var(--sz) / 15));background:linear-gradient(180deg, #fff, #afafaf);border-radius:var(--sz);box-shadow:0 0 0 calc(var(--sz) / 50) #0002, 0 calc(var(--sz) / 10) calc(var(--sz) / 10) 0 #0008;cursor:pointer;font-size:calc(var(--sz) / 2);display:flex;align-items:center;justify-content:center;text-indent:calc(var(--sz) * -0.025);text-shadow:0 0 calc(var(--sz) / 10) var(--of, 0 0 calc(var(--sz) / 5) #fff, calc(var(--sz) / -8000) calc(var(--sz) / -150) calc(var(--sz) / 50) #0008, calc(var(--sz) / 150) calc(var(--sz) / 100) calc(var(--sz) / 50) #fff);color:var(--of);z-index:1;animation:move-thumb 3s ease 0s 1;}
#select-gender:checked + label .thumb{left:calc(calc(100% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3))) - calc(calc( var(--sz) / 10) + calc(var(--sz) / 15)));color:var(--on);background:radial-gradient(circle at 7% 50%, #fff calc(var(--sz) / 50), #fff0 calc(var(--sz) / 2)), linear-gradient(180deg, #fff, #afafaf);text-shadow:0 0 calc(var(--sz) / 10) var(--on), 0 0 calc(var(--sz) / 5) #fff, calc(var(--sz) / -8000) calc(var(--sz) / -150) calc(var(--sz) / 50) #0008, calc(var(--sz) / 150) calc(var(--sz) / 100) calc(var(--sz) / 50) #fff;}
.thumb:before{content:"";display:block;width:70%;height:70%;background:linear-gradient(180deg, #0008, #ccc, #fff);position:absolute;z-index:-1;border-radius:var(--sz);border:calc(var(--sz) / 50) solid #ddd;}
.form-control:disabled {background-color: #a3f5ff;}

.txt{display:flex;justify-content:space-evenly;position:absolute;inset:0;opacity:0.6;align-items:center;}
.txt img{height:calc(var(--sz) / 1);}

.btn-primary{background-color:var(--pc);border:none;border-radius:0;padding: 8px 36px;}
body:not(.male) .btn-primary{background-color:var(--of);}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background-color:var(--pc-dark);}
body:not(.male) .btn-primary:hover,body:not(.male) .btn-primary:focus,body:not(.male) .btn-primary:active{background-color:var(--pc-dark);}

.form-actions{display:flex;align-items:center;justify-content: space-between;gap:10px;}
body:not(.male) .change-btn,.change-btn{background-color:#CCC;color:#444;}
.change-btn:hover,.change-btn:focus,.change-btn:active,body:not(.male) .change-btn:hover,body:not(.male) .change-btn:focus,body:not(.male) .change-btn:active{background-color:#AAA;color:#444;}
input[type="date"]{position:relative;}
input[type="date"]:before{color: #595c5f;content:attr(placeholder);position:absolute;background-color:#fff;width:calc(100% - 50px);}
input[type="date"].full:before{color:black;content:unset !important;}

.contract-frame{height:calc(100vh - 350px);overflow-y:scroll;background-color:#fff;padding:30px;font-size:18px;}
.contract-frame ul{padding-inline-start:20px;margin:0;}
.contract-frame p{margin:0;}


.thank-you{padding:72px 0;background-color:#eceef3;font-size:24px;}
.thank-you *{transition:0s;}
.success-icon{font-size:72px;line-height:90px;margin: 0 0 36px 0;color:green;}
.thanks-message p{text-align:center;}
.thanks-message .mt-5{font-size:20px;}












@media (min-width:576px){

}

@media (min-width:768px){

.col-md-offset-1{margin-right:8.33333333%;margin-left:0;}
.left-md-center{text-align:left !important;}
.right-md-center{text-align:right !important;}
.left-md-center img{margin-left:0;}
.right-md-center img{margin-right:0;}
.inline-img{float:left;margin-right:15px;}
.inline-video{width:50%;}

}

@media (min-width:992px){

}

@media (min-width:1200px){

}
