@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
@font-face {
    font-family: 'ATBSerif';
        src: url('//piggzdesign.com/ATBSerif-It.otf');
        src: url('//piggzdesign.com/ATBSerif-It.eot.eot') format('embedded-opentype'),      
            url('//piggzdesign.com/ATBSerif-It.woff') format('woff'),
            url('//piggzdesign.com/ATBSerif-It.woff2') format('woff2'),
            url('//piggzdesign.com/ATBSerif-It.ttf') format('truetype'),
            url('//piggzdesign.com/ATBSerif-It.svg') format('svg');
}

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #f3f0ec;
    font-family: Manrope, Lato, Helvetica, Arial, sans-serif;
    cursor: url("my-mouse-pointer.cur") 1 0, auto;    font-weight: 300;
}

a {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
}

html {
    behavior: smooth;
}


title {
    display: none;
}

.spinner{
  width:16px;
  height:16px;
  border:2px solid #010101;
  border-top-color:#fa84c1;
  border-radius:50%;
  display:inline-block;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }


.para {
  width: 40%;
}

@media (max-width: 1200px) {
  .para {
    width: 60%;
  }
}

@media (max-width: 600px) {
  .para {
    width: 80%;
  }
}

.PdfButton {
    background-color: #dae087;
}

.PdfButton:hover {
    background-color: #ffa748;
    cursor: pointer;
}

.returnBtn:hover {
    cursor: pointer;
}

.titl .error-msg {
    font-weight: 300;
}

/*=======================================
           CHECKBOXES
=========================================*/


.checkbox-group {
    /*padding-top: 11px;*/
    padding-bottom: 44px;
}

.checkbox-group input[type="checkbox"] {
  display: none;
}

.checkbox-group label {
    position: relative;
    padding-left: 28px; /* space for custom box */
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    height: 44px;
    line-height: 44px;
    margin-bottom: -44px;
}


.checkbox-group label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #555;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.2s;
  /* background-image: url('box.png'); */
}

/* Show checkmark when checked */
.checkbox-group input[type="checkbox"]:checked + label::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 36%; /*was 50*/
    transform: translateY(-50%);
    width: 11px;
    height: 15px;
    border-width: 0 2px 2px 0;
    padding: 6px;
    background-color: transparent;
    background-image: url('check.png');
    background-size: contain;
}


/*=======================================
           WHOLE PAGE
=========================================*/


.holder {
    margin-top: 184px;
    display: block;
}

.whole {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: 'square form';
    margin: auto;
}

@media (max-width:1200px){
    .whole {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: 'square'
                           'form';
}
}

/*=======================================
           THE INTRO TITLE
=========================================*/


.square {
    width: 40%;
    grid-area: square;
    margin: 14% 0% auto 9%;
    position: fixed;
}


/*=======================================
           NAMES FOR FIELDS
=========================================*/


.titl {
    font-weight: 500;
    display: inline; /* was block */
    line-height: 44px;
    margin-bottom: 0;
}

/*=======================================
           ?BUTTONS?
=========================================*/


.button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 43px;/*was 22*//*but 16 is perfect for sub page*/
}

.button-row .backu {
    justify-self: start;
}

.button-row .nexus {
    justify-self: end;
}
.button-row .sub {
    justify-self: end;
}

.nexus {
    font-family: manrope;
    font-weight: 400;
    border-radius: 30px;
    font-size: 31px;
    /* border: 1px #010101 solid; */
    padding: 0px 0px 4px 0px;
    background-color: #8fd1d8;
    color: #fff;
    width: 45px;
    /* float: right; */
}
.nexus:hover {
    cursor: pointer;
}

.sub {
    font-family: manrope;
    font-weight: 400;
    border-radius: 30px;
    font-size: 20px;
    /* border: 1px #010101 solid; */
    padding: 8px 15px;
    background-color: #dae087;
    color: #010101;
    width: 141px;
    /* float: right; */
}

.sub:hover {
    cursor: pointer;
}

.backu {
        font-family: manrope;
    font-weight: 400;
    border-radius: 30px;
    font-size: 31px;
    /* border: 1px #010101 solid; */
    padding: 0px 0px 4px 0px;
    background-color: #ffa748;
    color: #fff;
    width: 45px;
    /* float: right; */
    rotate: 180deg;
}

.backu:hover {
    cursor: pointer;
}

/*=======================================
            HEART RADIO BUTTONS
=========================================*/
  
   
   /* Hide default radio */
.radio-group input[type="radio"] {
    display: none;
}

/* Style label as clickable */
.radio-group label {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: -22px;
    margin-top: 0;
    height: 44px;
    position: relative;
    line-height: 44px;
}


/* Add empty heart before text */
.radio-group label::before {
    content: "\f08a"; /* ♡⁠ */⁠
    color: #010101;
    font-size: 29px;
    margin-right: 7px;
    margin-left: 2px;
    font-weight: 100;
    font: normal normal normal 19px / 1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
   /* transform:scaleX(1.3);*/
    z-index: 1;
    position: relative;
}

/* When checked → filled heart */
.radio-group input[type="radio"]:checked + label::after {
    content: "\f004"; /* ♥ */
    color: #fa84c1;
    font-size: 20px;
    font: normal normal normal 19px / 1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
        position: absolute;
    left: 2px;
    margin-top: 1px;
}
/*=======================================
           FORM-OLD
=========================================*/

/*.form-row{
    display:grid;
    grid-template-columns: 220px 1fr;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
}


.form-row input,
.form-row textarea{
    width:100%;
}

/* Radio groups should align under the input column */
.form-row.radio{
    align-items:start;
}

.form-row.radio .radio-group{
    margin-bottom:0;
}
/*======these are used tho========*/
.label-row {
    display: block;
    line-height: 43px;
    margin-bottom: 0;
}




/*=======================================
           NORMAL VERSION OF FORM?
=========================================*/


h1 {
    font-size: 40px;
    text-align: left;
    font-family: 'ATBSerif';
    font-weight: 100;
  }

  h2 {
    font-size: 30px;
        margin-top: -23px;
        padding-bottom: 40px;
    font-family: 'ATBSerif';
    font-weight: 100;
  }
  
/* Paper container */
form{
    grid-area: form;
    width: 708px; /*was 90%*/
    padding:77px 40px 40px 100px;
    margin: auto auto 102px auto;
    background:
        /* vertical margin lines */
        linear-gradient(to right, transparent 60px, #8fd1d8 60px, #8fd1d8 62px, transparent 62px),
        linear-gradient(to right, transparent 80px, #8fd1d8 80px, #8fd1d8 82px, transparent 82px),

        /* horizontal notebook lines */
        repeating-linear-gradient(
            to bottom,
            #ffffff 0px,
            #ffffff 42px,
            #fa84c1 44px
        );

    background-color:white;
    /*box-shadow:0 10px 30px rgba(0,0,0,0.1);*/
    border-radius: 0px 30px 30px 0px;
}

/* Align text to the lines */
input[type="text"],
input[type="email"],
textarea{
    width:100%;
    border:none;
    background-color: rgba(250, 132, 193, 0.2);   
    font-size:16px;
    line-height:44px;
    padding:0;
    margin-bottom:44px;
    outline:none;
        font-family: 'Manrope';
        font-weight: 300;
}

/* textarea multiple lines */
textarea {
    resize: vertical;
    min-height: 84px;
    line-height: 44px;
}


/* labels */
label{
    
    /*margin-top:14px;*/
    display: inline;
}

/* step visibility */
.step{
    display:none;
    margin-bottom:20px;
    grid-template-columns:1fr;
    
}

.step.active{display:grid;}

.honeypot{display:none;}
.radio-group{margin-bottom:44px;}

.error-msg{
    color:red;
    font-size:0.9em;
    display: inline;
}


/*.step{display:none;margin-bottom:20px;}*/
/*.step.active{display:block;}*/
.honeypot{display:none;}
label{display:inline;/*margin-top:14px;*/}
.radio-group{margin-bottom:44px; display: grid; grid-template-columns: 1fr;}

.steppa {
    height: 17px;
}

.form-paragraph {
    font-size: 20px;
}

/*==================================================================================
           the version before the VERSION OF FORM on the phone version table yes?
==================================================================================*/

@media(max-width:1490px){

/*.form-row{
        grid-template-columns:1fr;
    }*/
    
    .error-msg{
    color:red;
    font-size:0.9em;
    display: block;
    margin: 0px 0px 0px 0px;
}

form{
    grid-area: form;
    width: 95%; /*was 700px*/
    padding:77px 20px 30px 55px;
    margin-left: 0px;
 
        background:
        /* vertical margin lines */
        linear-gradient(to right, transparent 25px, #8fd1d8 25px, #8fd1d8 27px, transparent 27px),
        linear-gradient(to right, transparent 40px, #8fd1d8 40px, #8fd1d8 42px, transparent 42px),

        /* horizontal notebook lines */
        repeating-linear-gradient(
            to bottom,
            #ffffff 0px,
            #ffffff 42px,
            #fa84c1 44px
        );
}

/* inputs align to the tighter lines */
input[type="text"],
input[type="email"],
textarea {
    font-size: 15px;
    line-height: 44px;
    margin-bottom: 0px; /*was 44*/
    font-weight: 300;
}


/* textarea height adjustment */
textarea {
    min-height:78px;
}

/* headings scale down */

  h1 {
    font-size: 26px;
    text-align: left;
    font-family: 'ATBSerif';
    font-weight: 100;
  }

  h2 {
  font-size: 30px;
        margin-top: -23px;
        padding-bottom: 40px;
    font-family: 'ATBSerif';
    font-weight: 100;
}
/* radio groups more readable 
.radio-group{
    padding:5px 0;
}*/

.checkbox-group label {
    display: flex;
    align-items: center;
    height: 44px;
    line-height: 44px;
    float: none;
}

.titl {
    display: block;
    line-height: 44px;
        margin-bottom: 0px;
}

.label-row {
    display: block;
    line-height: 44px;
    margin-bottom: 0;
}

textarea {
    line-height: 44px;
}

.radio-group label {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: -22px;
    margin-top: 0;
    height: 44px;
    position: relative;
    line-height: 44px;
}

.form-paragraph {
    font-size: 16px;
}

.square {
    width: 40%;
    grid-area: square;
    margin: 14% 5% auto 5%;
    position: fixed;
}

}

/*=======================================
           mac/tablet VERSION OF FORM?
=========================================*/

@media(max-width:1200px){

/*.form-row{
        grid-template-columns:1fr;
    }*/
    
    .error-msg{
    color:red;
    font-size:0.9em;
    display: block;
    margin: 0px 0px 0px 0px;
}

form{
    grid-area: form;
    width: 95%; /*was 700px*/
    padding:77px 20px 30px 55px;
    margin: 102px auto;
 
        background:
        /* vertical margin lines */
        linear-gradient(to right, transparent 30px, #8fd1d8 30px, #8fd1d8 32px, transparent 32px),
        linear-gradient(to right, transparent 40px, #8fd1d8 40px, #8fd1d8 42px, transparent 42px),

        /* horizontal notebook lines */
        repeating-linear-gradient(
            to bottom,
            #ffffff 0px,
            #ffffff 42px,
            #fa84c1 44px
        );
}

/* inputs align to the tighter lines */
input[type="text"],
input[type="email"],
textarea {
    font-size: 15px;
    line-height: 44px;
    margin-bottom: 0px; /*was 44*/
    font-weight: 300;
}


/* textarea height adjustment */
textarea {
    min-height:78px;
}

/* headings scale down */

  h1 {
    font-size: 26px;
    text-align: left;
    font-family: 'ATBSerif';
    font-weight: 100;
  }

  h2 {
  font-size: 30px;
        margin-top: -23px;
        padding-bottom: 40px;
    font-family: 'ATBSerif';
    font-weight: 100;
}
/* radio groups more readable 
.radio-group{
    padding:5px 0;
}*/

.checkbox-group label {
    display: flex;
    align-items: center;
    height: 44px;
    line-height: 44px;
    float: none;
}

.titl {
    display: block;
    line-height: 44px;
        margin-bottom: 0px;
}

.label-row {
    display: block;
    line-height: 44px;
    margin-bottom: 0;
}

textarea {
    line-height: 44px;
}

.radio-group label {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: -22px;
    margin-top: 0;
    height: 44px;
    position: relative;
    line-height: 44px;
}


.square {
    width: 75%;
    grid-area: square;
    margin: auto;
    padding: 32px 0px;
    position: relative;
}

}



/*=======================================
           PHONE VERSION OF FORM?
=========================================*/

@media(max-width:709px){

/*.form-row{
        grid-template-columns:1fr;
    }*/

form{
    grid-area: form;
    width: 95%; /*was 700px*/
    padding:77px 20px 30px 20px;
    margin: 103px auto;
 
        background:
        /* vertical margin lines */


        /* horizontal notebook lines */
        repeating-linear-gradient(
            to bottom,
            #ffffff 0px,
            #ffffff 42px,
            #fa84c1 44px
        );
}

/* inputs align to the tighter lines */
input[type="text"],
input[type="email"],
textarea {
    font-size: 15px;
    line-height: 44px;
    margin-bottom: 44px;
    font-weight: 300;
}


/* textarea height adjustment */
textarea {
    min-height:78px;
}

/* headings scale down */

   h1 {
    font-size: 26px;
    text-align: center;
    font-family: 'ATBSerif';
    font-weight: 100;
  }

  h2 {
  font-size: 30px;
        margin-top: -23px;
        padding-bottom: 40px;
    font-family: 'ATBSerif';
    font-weight: 100;
}
/* radio groups more readable 
.radio-group{
    padding:5px 0;
}*/

.checkbox-group label {
    display: flex;
    align-items: center;
    height: 44px;
    line-height: 15px;
    float: none;
}

.titl {
    display: block;
    line-height: 44px;
        margin-bottom: 0px;
}

.label-row {
    display: block;
    line-height: 44px;
    margin-bottom: 0;
}

textarea {
    line-height: 44px;
}

.radio-group label {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: -22px;
    margin-top: 0;
    height: 44px;
    position: relative;
    line-height: 15px;
}


.square {
    width: 90%;
    grid-area: square;
    margin: auto;
    padding: 0px 0px;
}

}

/*=======================================
          LITTLE DRAWINGs
=========================================*/

.underline {
	width: 20px;
}
	.underline::after{
  		position: absolute; /* Makes the element position to be certain and not affected by other text. */
  		content:" "; /* Necessary because without this, After/Before Pseudo elements wont work. */
  		background-image: url(pictures/dots.png);
  		background-size: 113px;
  		width: 113px; /* Element width. So set the Image Width */
  		height: 7px; /* Element height. So set the Image Height */
  		margin-left: -111px; /* Image Width again. It's pulling the "after" text to the left to overlap. */
  		margin-top: 40px;
	}
		@media(max-width: 1490px) {
			.underline::after{
				background-size: 70px;
        		height: 4px;
  				margin-left: -72px; /* Image Width again. It's pulling the "after" text to the left to overlap. */
  				margin-top: 27px;
				width: 70px;
			}
		}/*
		@media(max-width: 620px) {
			.underline::after{
		        background-size: 160px;
        		height: 6px;
        		margin-left: -160px;
        		margin-top: 20px;
        		width: 160px;
			}
		}*/

.underline-2 {
	width: 20px;
}
	.underline-2::after{
  		position: absolute; /* Makes the element position to be certain and not affected by other text. */
  		content:" "; /* Necessary because without this, After/Before Pseudo elements wont work. */
  		background-image: url(pictures/handdrawn-arrow.png);
  		background-size: 70px;
  		width: 70px; /* Element width. So set the Image Width */
  		height: 35px; /* Element height. So set the Image Height */
  		margin-left: -61px; /* Image Width again. It's pulling the "after" text to the left to overlap. */
  		margin-top: -32px;
	}
		@media(max-width: 1490px) {
			.underline-2::after{
  				background-size: 60px;
  		        width: 60px; /* Element width. So set the Image Width */
  		        height: 30px; /* Element height. So set the Image Height */
  		        margin-left: -40px; /* Image Width again. It's pulling the "after" text to the left to overlap. */
  		        margin-top: -32px;
			}
		}/*
		@media(max-width: 620px) {
			.underline-2::after{
  		    	margin-left: 5px;
        		background-size: 28px;
        		width: 28px;
        		height: 25px;
        		margin-top: -11px;
			}
		}*/
		
		.underline-3 {
	width: 20px;
}
	.underline-3::after{
  		position: absolute; /* Makes the element position to be certain and not affected by other text. */
  		content:" "; /* Necessary because without this, After/Before Pseudo elements wont work. */
  		background-image: url(pictures/handdrawn-circle.png);
  		background-size: 76px;
  		width: 76px; /* Element width. So set the Image Width */
  		height: 44px; /* Element height. So set the Image Height */
  		margin-left: -73px; /* Image Width again. It's pulling the "after" text to the left to overlap. */
  		margin-top: 1px;
	}
		@media(max-width: 1490px) {
			.underline-3::after{
  				background-size: 53px;
  		        width: 53px; /* Element width. So set the Image Width */
  		        height: 31px; /* Element height. So set the Image Height */
  		        margin-left: -50px; /* Image Width again. It's pulling the "after" text to the left to overlap. */
  		        margin-top: 1px;
			}
		}	/*
        @media(max-width: 709px) {
			.underline-3::after{
  		        margin-left: -54px;
        		background-size: 30px;
        		width: 30px;
        		height: 19px;
        		margin-top: 18px;
			}
		}	*/
		
		
.big-pd-heart {
    width: 17%;
    position: absolute;
    margin: -179px auto auto 85%;
}

    @media(max-width:1490px){
        .big-pd-heart {
            width: 18%;
            position: absolute;
            margin: -151px auto auto 412px;
        }
    }
        @media(max-width:1200px){
            .big-pd-heart {
                width: 12%;
                position: absolute;
                margin: -90px auto auto 88%;
            }
        }
            @media(max-width:709px){
                .big-pd-heart {
                    width: 15%;
                    position: absolute;
                    margin: -75px auto auto 80%;
                }
            }



.big-orange-flower {
    width: 14%;
    position: relative;
    margin: 101px auto auto -58px;
}
    @media(max-width:1490px){
        .big-orange-flower {
            width: 15%;
            position: relative;
            margin: 78px auto auto -30px;
        }
    }
        @media(max-width:1200px){
            .big-orange-flower {
                width: 9%;
                position: absolute;
                margin: 29px auto auto -64px;
            }
        }
            @media(max-width:709px){
                .big-orange-flower {
                    width: 12%;
                    position: absolute;
                    margin: 21px auto auto 16%;
                }
            }


/*================================================================================================================================================================================
                    Navbar dropdown
======================================================*/

.sec-center {
    position: relative;
    max-width: 100%;
    text-align: center;
    z-index: 200;
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.dropdown:checked + label,
.dropdown:not(:checked) + label{
    position: relative;
    transition: all 200ms linear;
    border-radius: 4px;
    letter-spacing: 1px;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    text-align: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 12px 35px 0 rgba(255,235,167,.15);
}

.dropdown:checked + label:before,
.dropdown:not(:checked) + label:before{
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    z-index: -1;
    cursor: auto;
    pointer-events: none;
}

.dropdown:checked + label:before{
    pointer-events: auto;
}

.dropdown:not(:checked) + label .uil {
    font-size: 24px;
    margin-left: 10px;
    transition: transform 200ms linear;
}

.dropdown:checked + label .uil {
    transform: rotate(180deg);
    font-size: 24px;
    margin-left: 10px;
    transition: transform 200ms linear;
}

#dropdown a:hover {
    /* border-bottom: 1px solid rgb(28, 121, 184); */
    color: #010101;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}

/* Animated Bottom Line */
#dropdown a:before, #dropdown a:after {
    content: '';
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: -1px;
    background: rgb(13, 26, 38);
}

#dropdown a:before {
    left: 0;
    transition: 0.5s;
}

#dropdown a:after {
    background: rgb(13, 26, 38);
    right: 0;
    /* transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); */
}

#dropdown a:hover:before {
    background: rgb(13, 26, 38);
    width: 100%;
    transition: width 0.5s cubic-bezier((0.22, 0.61, 0.36, 1));
}

#dropdown a:hover:after {
    background: transparent;
    width: 100%;
    /* transition: 0s; */
}

/*---------------------------------------------------------------------*/
.section-dropdown {
    position: absolute;
    padding: 5px;
    background-color: #f3f0ec;
    top: 60px;
    left: 5px;
    width: 200px;
    height: 175px;
    border-radius: 10px;
    display: block;
    box-shadow: 0 5px 15px 0 rgba(9,9,12,0.1);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 200ms linear;
}

.dropdown:checked ~ .section-dropdown{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.section-dropdown:before {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    content: '';
    display: block;
    z-index: 1;
}

.section-dropdown:after {
    position: absolute;
    top: -7px;
    left: 30px;
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent; 
    border-bottom: 8px solid #f3f0ec;
    content: '';
    display: block;
    z-index: 2;
    transition: all 200ms linear;
}

.boxy:hover {
	background-color: #f3f0ec;
	color: #f3f0ec;
}

/*======================================================
                         mobile dropdown
======================================================*/

.second-center {
    display: block;
    position: relative;
    max-width: 100%;
    text-align: right;
    z-index: 9999;
    height: 60px;
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.dropdown-mobile:checked + label,
.dropdown-mobile:not(:checked) + label{
    position: relative;
    transition: all 200ms linear;
    border-radius: 4px;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    box-shadow: 0 12px 35px 0 rgba(255,235,167,.15);
}

.dropdown-mobile:checked + label:before,
.dropdown-mobile:not(:checked) + label:before{
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    z-index: -1;
    cursor: auto;
    pointer-events: none;
}

.dropdown-mobile:checked + label:before{
    pointer-events: auto;
}

.dropdown-mobile:not(:checked) + label .uila {
    font-size: 20px;
    margin-left: 10px;
    transition: transform 200ms linear;
}

.dropdown-mobile:checked + label .uila {
    transform: rotate(180deg);
    font-size: 24px;
    margin-left: 10px;
    transition: transform 200ms linear;
}

#dropdown-mobile a:hover {
    /* border-bottom: 1px solid rgb(28, 121, 184); */
    color: #010101;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}

/* Animated Bottom Line */
#dropdown-mobile a:before, #dropdown-mobile a:after {
    content: '';
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: -1px;
    background: rgb(13, 26, 38);
}

#dropdown-mobile a:before {
    left: 0;
    transition: 0.5s;
}

#dropdown-mobile a:after {
    background: rgb(13, 26, 38);
    right: 0;
    /* transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); */
}

#dropdown-mobile a:hover:before {
    background: rgb(13, 26, 38);
    width: 100%;
    transition: width 0.5s cubic-bezier((0.22, 0.61, 0.36, 1));
}

#dropdown-mobile a:hover:after {
    background: transparent;
    width: 100%;
    /* transition: 0s; */
}

/*---------------------------------------------------------------------*/
.section-dropdown-mobile {
    position: absolute;
    padding: 5px;
    background-color: #f3f0ec;
    top: 60px;
    left: 15px;
    width: 215px;
    height: 160px;
    border-radius: 10px;
    display: block;
    box-shadow: 0 5px 15px 0 rgba(9,9,12,0.1);
    z-index: 2;
    opacity: 0;
    font-size: 12px;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 200ms linear;
}

.dropdown-mobile:checked ~ .section-dropdown-mobile{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.section-dropdown-mobile:before {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    content: '';
    display: block;
    z-index: 1;
}

.section-dropdown-mobile:after {
    position: absolute;
    top: -7px;
    left: 103px;
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent; 
    border-bottom: 8px solid #f3f0ec;
    content: '';
    display: block;
    z-index: 2;
    transition: all 200ms linear;
}

.boxy-mobile:hover {
	background-color: #f3f0ec;
	color: #f3f0ec;
}

/*======================================================
                          Navbar
======================================================*/
#navbar {
    background: #f3f0ec;
    border-bottom: 1px solid black;
    color: rgb(13, 26, 38);
    position: fixed;
    top: 0;
    height: 80px;
    line-height: 60px;
    width: 100vw;
    z-index: 10;
}

.nav-wrapper {
    margin-right: 10px;
    text-align: center;
    width: 98%;
}   
    @media(max-width: 768px) {
        .nav-wrapper {
            width: 98%;
        }
    } 
	    @media(max-width: 638px) {
            .nav-wrapper {
                width: 95%;
            }
        } 

/*-------------------------------------------*/
.logoimg {
	 user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/*-------------------------------------------*/
#logo {
    float: left;
    font-size: 1.5em;
    height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 50px;
    margin-top: -3px;  
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
} 
    @media(max-width: 768px) {
        #logo {
            /*margin-left: 5px; */
        }
    }

#navbar ul {
    display: inline-block;
    float: left;
    list-style: none;
    padding-top: 10px;
    /* margin-right: 14px; */
    margin-top: -2px;
    margin-left: 100px;
    text-align: right;
} 
    @media(max-width: 900px) {
        #navbar ul {
            display: none;
        }
    } 

#navbar li {
    display: inline-block;   
}

#navbar li a {
    color: #010101;
    display: block;
    font-size: 0.9em;
    height: 50px;
    letter-spacing: 1px;
    margin: 0 20px;
    padding: 0 4px;
    position: relative;
    text-transform: uppercase;
}

/*--------------------------OLD HOVER NAVBAR-------------------------------------------*/
/*#navbar li a:hover {
  /* --border-bottom: 1px solid rgb(28, 121, 184);
  color: #010101;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}

/* --Animated Bottom Line 
#navbar li a:before, #navbar li a:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 1px;
  bottom: -1px;
  background: rgb(13, 26, 38);
}

#navbar li a:before {
  left: 0;
  transition: 0.5s;
}

#navbar li a:after {
  background: rgb(13, 26, 38);
  right: 0;
  /* --transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); 
}

#navbar li a:hover:before {
  background: rgb(13, 26, 38);
  width: 100%;
  transition: width 0.5s cubic-bezier((0.22, 0.61, 0.36, 1));
}

#navbar li a:hover:after {
  background: transparent;
  width: 100%;
  /* --transition: 0s; 
}
-----------------------------------------------------------------*/
/*======================================================
                   additional flower navbar 
  ======================================================*/
  
/*.adhd {
	list-style: none;
}*/
 
.crazy {
	position: absolute;
	width: 50px;
	object-fit: contain;
	transform: translateX(-50%) translateY(-50%);
	top: 50%;
	left: 50%;
	z-index: 10;
}
 
.item {
	z-index: 1;
	color: #010101;
	display: block;
    font-size: 0.9em;
    height: 50px;
    letter-spacing: 1px;
    margin: 0 20px;
    padding: 0 4px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
 }
  
/*======================================================
                   FORWEB pic fixed 
  ======================================================*/
  
 /*
  
.picfix {
  width: 100%;
  height: 350px;
  */
  /* Important *//*
  position: relative;
  z-index: -1;
}

.picwrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.PIC {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-image: url(FORWEB.png);
  transform: translateZ(0);
  will-change: transform;
  z-index: -1;
  
}

@media(max-width: 740px) {
	.picfix {
		height: 250px;
	}
}
*/
/*======================================================
                   enquier here button
======================================================*/

.button {
    background-color: #ffa748;
    position: flex;
    float: right;
    border-radius: 50px;
    border: 1px solid #101010;
    color: #101010;
    padding: 12px 20px;
    text-align: center;
    font-size: 14px;
    margin: 18px 12px 0px 0px;
    opacity: 0.9;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    font-family: Manrope;
	font-weight: 400;
}

.button:hover {
	opacity: 1;
	background-color: #fa97c1;
	color: #101010;
}
    @media(max-width: 900px) {
        .button {
            display: none;
        }
    }

/*======================================================
                    Mobile Menu Menu Icon
======================================================*/
@media(max-width: 900px) {
    .menuIcon {
    	cursor: pointer;
    	display: block;
    	position: fixed;
    	right: 15px;
    	top: 27px;
    	height: 23px;
    	width: 27px;
    	z-index: 12;
    }

    /* Icon Bars */
    .icon-bars {
    	background: #fa84c1;
    	position: absolute;
    	left: 1px;
    	top: 45%;
    	height: 2px;
    	width: 20px;
    	-webkit-transition: 0.4s;
    	transition: 0.4s;
    } 

    .icon-bars::before {
    	background: #fa84c1;
    	content: '';
    	position: absolute;
    	left: 0;
    	top: -8px;
    	height: 2px;
    	width: 20px;
		/*-webkit-transition: top 0.2s ease 0.3s;
    	transition: top 0.2s ease 0.3s; */
    	-webkit-transition: 0.3s width 0.4s;
    	transition: 0.3s width 0.4s;
    }

    .icon-bars::after {
    	margin-top: 0px;
    	background: #fa84c1;
    	content: '';
    	position: absolute;
    	left: 0;
    	bottom: -8px;
    	height: 2px;
    	width: 20px;
		/*-webkit-transition: top 0.2s ease 0.3s;
    	transition: top 0.2s ease 0.3s; */
    	-webkit-transition: 0.3s width 0.4s;
    	transition: 0.3s width 0.4s;
    }

    /* Bars Shadows */
    .icon-bars.overlay {
    	background: #8fd1d8;
    	background: #8fd1d8;
    	width: 20px;
    	animation: middleBar 3s infinite 0.5s;
    	-webkit-animation: middleBar 3s infinite 0.5s;
	} 	
		@keyframes middleBar {
      		0% {width: 0px}
      		50% {width: 20px}
      		100% {width: 0px}
    	} 
			@-webkit-keyframes middleBar {
        		0% {width: 0px}
        		50% {width: 20px}
        		100% {width: 0px}
      		}

  	.icon-bars.overlay::before {
    	background: #8fd1d8;
    	background: #8fd1d8;
    	width: 10px;
    	animation: topBar 3s infinite 0.2s;
    	-webkit-animation: topBar 3s infinite 0s;
  	} 
		@keyframes topBar {
      		0% {width: 0px}
      		50% {width: 10px}
      		100% {width: 0px}
    	} 
			@-webkit-keyframes topBar {
        		0% {width: 0px}
        		50% {width: 10px}
        		100% {width: 0px}
      		}

  	.icon-bars.overlay::after {
    	background: #8fd1d8;
    	background: #8fd1d8;
    	width: 15px;
    	animation: bottomBar 3s infinite 1s;
    	-webkit-animation: bottomBar 3s infinite 1s;
  	} 	
  		@keyframes bottomBar {
    	  	0% {width: 0px}
      		50% {width: 15px}
      		100% {width: 0px}
    	} 
			@-webkit-keyframes bottomBar {
        		0% {width: 0px}
        		50% {width: 15px}
        		100% {width: 0px}
      		}

  	/* Toggle Menu Icon */
  	.menuIcon.toggle .icon-bars {
    	top: 5px;
    	transform: translate3d(0, 5px, 0) rotate(135deg);
    	transition-delay: 0.1s;
    	transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  	}

  	.menuIcon.toggle .icon-bars::before {
    	top: 0;
    	transition-delay: 0.1s;
    	opacity: 0;
  	}

  	.menuIcon.toggle .icon-bars::after {
    	top: 10px;
    	transform: translate3d(0, -10px, 0) rotate(-270deg);
    	transition-delay: 0.1s;
    	transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  	}

  	.menuIcon.toggle .icon-bars.overlay {
    	width: 20px;
    	opacity: 0;
    	-webkit-transition: all 0s ease 0s;
    	transition: all 0s ease 0s;
  	}
}

/*======================================================
                   Responsive Mobile Menu 
======================================================*/

.overlay-menu {
  	background: #f3f0ec;
  	color: #101010;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	position: fixed;
  	top: 0;
  	right: 0;
  	padding-right: 15px;
  	transform: translateX(-100%);
  	width: 100vw;
  	height: 100vh;
  	-webkit-transition: transform 0.2s ease-out;
  	transition: transform 0.2s ease-out;
  	z-index: 3;
  	/*position: -webkit-sticky; 
  	position: sticky;
  	top: 0px;*/
}

.overlay-menu ul, .overlay-menu li {
  	display: block;
  	position: relative;
}

.overlay-menu li a {
  	display: block;
  	font-size: 1.8em;
  	letter-spacing: 4px;
	/*opacity: 0; */
  	padding: 10px 0;
  	text-align: right;
  	text-transform: uppercase;
  	-webkit-transition: color 0.3s ease;
  	transition: color 0.3s ease;
	/*-webkit-transition: 0.2s opacity 0.2s ease-out;
  	transition: 0.2s opacity 0.2s ease-out; */
}

.overlay-menu li a:hover,
.overlay-menu li a:active {
  	color: #D781B5;
  	-webkit-transition: color 0.3s ease;
  	transition: color 0.3s ease;
}

/*=======================ICON_MENU===============================*/

.iconu-menu-1 {
	width: 40px;
	position: absolute;
	margin-top: 21px;
	margin-left: 0px;
}
	 
.iconu-menu-2 {
	width: 40px;
	margin-top: -40px;
	margin-left: 141px;
}
	 
.iconu-menu-3 {
	width: 40px;
	position: absolute;
	margin-top: 93px;
	margin-left: 209px;
}
	 
.iconu-menu-4 {
	width: 40px;
	position: absolute;
	margin-top: 282px;
	margin-left: -218px;
}
	 
.iconu-menu-5 {
    width: 40px;
    position: absolute;
    margin-top: 111px;
    margin-left: 14px;
    rotate: 134deg;
}

/*======================================================
                   enquier here button menu
======================================================*/

#enquire {
	background-color: #ffa748;
	position: flex;
    float: right;
    border-radius: 50px;
    border: 1px solid #101010;
    color: #101010;
    padding: 12px 20px;
    margin: 20px -12px 0px 0px;
    font-family: Manrope;
    opacity: 0.9;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
	font-weight: 400;
}

#enquire:hover {
	opacity: 1 ;
	background-color: #fa97c1;
	color: #010101;
}


/*======================================================
                   footer
======================================================*/

#footer {
  	text-align: right; 
  	padding-top: 20px;
  	padding-bottom: 20px;
  	background-color: #fa84c1;
  	color: #F3F0EC;
}
  	@media(max-width: 559px) {
	 	#footer {
		 	text-align: center;
	 	}
 	}

.copyright {
	float: left;
	margin-top: 25px;
	margin-left: 20px;
}
 	@media(max-width: 559px) {
	 	.copyright {
		 	float: none;
		  	text-align: center;
		  	margin-top: 10px;
		  	margin-left: 0px;
		  	display: block;	
	 	}
 	}
	
.link-p {
	margin-left: 60px;
	margin-top: 5px;
}
@media(max-width: 559px) {
	 	.link-p {
	margin-left: 0px;
	text-align: center;
}
 	}
 


.footericons {
    width: 250px;
    display: inline-block;
    margin: 0px;
	text-align: left;	
}
	@media(max-width: 559px) {
	 	.footericons {
			text-align: center;
	 	}
 	}

.socialiconsul {
    margin-top: 0px;
	padding: 5px 0px;
}

.socialiconsli {
    vertical-align: top;
    display: inline;
    height: 100px;	
}

.socialicon {
    color: #fa84c1;
    text-decoration: none;	
}

.fa-facebook {
   padding:10px 14px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
    background-color: #F3F0EC;
	border-radius: 50px;
}
	.fa-facebook:hover {
    	background-color: #fa84c1;
		color: #F3F0EC;
	}

.fa-envelope {
    padding:10px 14px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
    background-color: #F3F0EC;
	border-radius: 50px;
}
	.fa-envelope:hover {
    	background-color: #fa84c1;
		color: #F3F0EC;
	}

.fa-pinterest {
    padding:10px 14px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
    background-color: #F3F0EC;
	border-radius: 50px;
}
	.fa-pinterest:hover {
    	background-color: #fa84c1;
		color: #F3F0EC;
	}

.fa-behance {
    padding:10px 14px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
    background-color: #F3F0EC;
	border-radius: 50px;
}
	.fa-behance:hover {
    	background-color: #fa84c1;
		color: #F3F0EC;
	}
	
.fa-instagram {
    padding:10px 14px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
    background-color: #F3F0EC;
	border-radius: 50px;
}
	.fa-instagram:hover {
    	background-color: #fa84c1;
		color: #F3F0EC;
	}

/*======================================================
                  LOADER
======================================================*/
  
.blob {
	background-color: #F3F0EC;
	overflow: hidden;
	width: 100%;
 	height: 100vh;
}
 
.ball1 {
	width: 30px;
	height: 30px;
	margin-bottom: -30px;
	position: relative;
	top: 45%;
	border-radius: 50%;
	animation: move 3s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}

.ball2 {
	width: 30px;
	height: 30px;
	margin-bottom: -30px;
	position: relative;
	top: 45%;
	border-radius: 50%;
	animation: move 3s 500ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}

.ball3 {
	width: 30px;
	height: 30px;
	margin-bottom: -30px;
	position: relative;
	top: 45%;
	border-radius: 50%;
	animation: move 3s 1000ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}

.ball4 {
	width: 30px;
	height: 30px;
	position: relative;
	top: 45%;
	border-radius: 50%;
	animation: move 3s 1500ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}
	@keyframes move {
	 	0% {
		 	left: 0%;
		 	transform: rotate(-70deg);
		}
	 	100% {
		 	left: 100%;
		 	transform: rotate(90deg);
		}
	}
	@media(max-width: 630px) {
 		.ball1 {
	 		animation: move 2s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
		}
		
 		.ball2 {
	 		animation: move 2s 500ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
		}
 		.ball3 {
	 		animation: move 2s 1000ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
		}
 		.ball4 {
	 		animation: move 2s 1500ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
		}
 			@keyframes move {
	 			0% {
		 			left: 0%;
		 			transform: rotate(-70deg);
				}
	 			100% {
		 			left: 100%;
		 			transform: rotate(90deg);
				}
			}

	}
		@media(max-width: 400px) {
 			.ball1 {
	 			animation: move 1.6s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
			}
			
 			.ball2 {
	 			animation: move 1.6s 400ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
			}
			
 			.ball3 {
	 			animation: move 1.6s 800ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
			}
			
 			.ball4 {
	 			animation: move 1.6s 1200ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
			}
 				@keyframes move {
	 				0% {
		 				left: 0%;
		 				transform: rotate(-70deg);
					}
	 				100% {
		 				left: 100%;
		 				transform: rotate(90deg);
					}
				}

		}

.ball-heart {
 	object-fit: contain; 
 	width: 40px;
}
 
/*scrollinnggg*/
/* ===== Scrollbar CSS ===== */
  /* Firefox */
*{
   	scrollbar-width: auto;
    scrollbar-color: #fa84c1 #f3f0ec;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: #f3f0ec;
}

*::-webkit-scrollbar-thumb {
    background-color: #fa84c1;
    border-radius: 10px;
    border: 5px none #ffffff;
}