@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.woff') format('woff'),
            url('//piggzdesign.com/ATBSerif-It.woff2.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: #F1C4D9;
    font-family: Manrope, Lato, Helvetica, Arial, sans-serif;
    cursor: url("my-mouse-pointer.cur") 1 0, auto;
}

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

html {
    behavior: smooth;
}

title {
    display: none;
}

/*======================================================
                    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: 30vw;
  	/* Important */
  	position: relative;
  	z-index: -1;
}
	@media(max-width: 1030px) {
		.picfix {
			height: 40vw;
		}
	}
		@media(max-width: 740px) {
			.picfix {
				height: 250px;
			}
		}

.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(image/Grid-photo.webp);
  	transform: translateZ(0);
  	will-change: transform;
  	z-index: -1;
}

/*======================================================
                   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;
}

/*======================================================
                       BLOCK-1
======================================================*/

#BLOCK-1 {
	height: auto;
	background-color: #f3f0ec;
	text-align: -webkit-center;
}

.title-box {
	padding-top: 148px;
}

.title-first {
	font-family: 'ATBSerif';
	font-size: 40px;
	font-weight: 300;
}

.first-grid {
	width: 100%;
	display: grid;
    grid-template-areas:
    	'img-1 img-1-2'
		'img-1-3 img-1-4'
		'img-1-5 img-1-6'
		'img-1-7 img-1-8'
		'img-1-9 img-1-10'
		'img-1-11 img-1-12'
		'img-1-13 img-1-14'
		'img-1-15 img-1-16'
		'img-1-17 img-1-18'
		'img-1-19 img-1-20'
		'img-1-21 img-1-22'
		'img-1-23 img-1-24'
		'img-1-25 img-1-26'
		'img-1-27 img-1-28'
		'img-1-29 img-1-30'
		'img-1-31 img-1-32';
	padding: 79px 0px 20px 0px;
	/*grid-template-rows: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;*/
    grid-template-columns: 50% 50%;
	/*overflow-x: hidden;*/
	/*border-bottom: 1px solid black;*/
	overflow: hidden;
}
  	@media(max-width: 1180px) {
		.first-grid {
	width: 100%;
	display: grid;
    grid-template-areas:
		'img-1'
		'img-1-2'
		'img-1-3'
		'img-1-4'
		'img-1-5'
		'img-1-6'
		'img-1-7'
		'img-1-8'
		'img-1-9'
		'img-1-10'
		'img-1-11'
		'img-1-12'
		'img-1-13'
		'img-1-14'
		'img-1-15'
		'img-1-16'
		'img-1-17'
		'img-1-18'
		'img-1-19'
		'img-1-20'
		'img-1-21'
		'img-1-22'
		'img-1-23'
		'img-1-24'
		'img-1-25'
		'img-1-26'
		'img-1-27'
		'img-1-28'
		'img-1-29'
		'img-1-30'
		'img-1-31'
		'img-1-32';
	padding: 79px 0px 20px 0px;
	/*grid-template-rows: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;*/
    grid-template-columns: 100%;
	/*overflow-x: hidden;*/
	/*border-bottom: 1px solid black;*/
}
	}

.img-1-div {
	grid-area: img-1;
	rotate: 7deg;
	margin-right: -40px;
}
.img-2-div {
	grid-area: img-1-2;
	rotate: -2deg;
}
.img-3-div {
	grid-area: img-1-3;
	rotate: -3deg;
}
.img-4-div {
	grid-area: img-1-4;
	rotate: 6deg;
	margin-left: -62px;
}
.img-5-div {
	grid-area: img-1-5;
	rotate: -1deg;
	margin-right: -132px;
}
.img-6-div {
	grid-area: img-1-6;
	rotate: -2deg;
}
.img-7-div {
	grid-area: img-1-7;
	rotate: 4deg;
	margin-right: -162px;
	margin-top: -20px;
}
.img-8-div {
	grid-area: img-1-8;
	rotate: -1deg;
}
.img-9-div {
	grid-area: img-1-9;
	rotate: -3deg;
	margin-right: -162px;
	margin-top: -30px;
}
.img-10-div {
	grid-area: img-1-10;
	rotate: 2deg;
	margin-left: -112px;
	margin-top: 20px;
}
.img-11-div {
	grid-area: img-1-11;
	rotate: 2deg;
	margin-top: -50px;
	
}
.img-12-div {
	grid-area: img-1-12;
	rotate: 1deg;
	margin-left: -162px;
}
.img-13-div {
	grid-area: img-1-13;
	rotate: -7deg;
}
.img-14-div {
	grid-area: img-1-14;
	rotate: -2deg;
}
.img-15-div {
	grid-area: img-1-15;
	rotate: 0.5deg;
}
.img-16-div {
	grid-area: img-1-16;
	rotate: 4deg;
	margin-left: -122px;
	margin-top: 20px;
}
.img-17-div {
	grid-area: img-1-17;
	rotate: -3deg;
	margin-right: -162px;
	margin-top: -20px;
}
.img-18-div {
	grid-area: img-1-18;
	rotate: -2deg;
	margin-right: -52px;
	margin-top: 20px;
}
.img-19-div {
	grid-area: img-1-19;
	rotate: 4deg;
	margin-left: -32px;
}
.img-20-div {
	grid-area: img-1-20;
	rotate: -1deg;
	margin-left: -162px;
}
.img-21-div {
	grid-area: img-1-21;
	rotate: 2deg;
	margin-right: -122px;
	margin-top: 30px;
}
.img-22-div {
	grid-area: img-1-22;
	rotate: -5deg;
	margin-left: -162px;
	margin-top: -20px;
}
.img-23-div {
	grid-area: img-1-23;
	rotate: -1deg;
}
.img-24-div {
	grid-area: img-1-24;
	rotate: 4deg;
	margin-right: -12px;
}
.img-25-div {
	grid-area: img-1-25;
	rotate: 1deg;
	margin-left: -22px;
	margin-right: 22px;
}
.img-26-div {
	grid-area: img-1-26;
	rotate: -2deg;
	margin-left: 22px;
	margin-right: -22px;
}
.img-27-div {
	grid-area: img-1-27;
	rotate: -1deg;
	margin-left: 132px;
	margin-right: -132px;
}
.img-28-div {
	grid-area: img-1-28;
}
.img-29-div {
	grid-area: img-1-29;
	rotate: 1deg;
	margin-left: 32px;
	margin-right: -32px;
}
.img-30-div {
	grid-area: img-1-30;
	rotate: -2deg;
	margin-left: -32px;
	margin-right: 32px;
}
.img-31-div {
	grid-area: img-1-31;
	rotate: -2deg;
}
.img-32-div {
	grid-area: img-1-32;
	rotate: 1deg;
	margin-left: 32px;
	margin-right: -32px;
}

.img-1 {
	width: 80%;
}

@media(max-width: 1180px) {
	.img-1-div {
	grid-area: img-1;
	rotate: 7deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.img-2-div {
	grid-area: img-1-2;
	rotate: -2deg;
}
.img-3-div {
	grid-area: img-1-3;
	rotate: -3deg;
}
.img-4-div {
	grid-area: img-1-4;
	rotate: 6deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.img-5-div {
	grid-area: img-1-5;
	rotate: -1deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.img-6-div {
	grid-area: img-1-6;
	rotate: -2deg;
}
.img-7-div {
	grid-area: img-1-7;
	rotate: 2deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.img-8-div {
	grid-area: img-1-8;
	rotate: -1deg;
}
.img-9-div {
	grid-area: img-1-9;
	rotate: -3deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.img-10-div {
	grid-area: img-1-10;
	rotate: 2deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.img-11-div {
	grid-area: img-1-11;
	rotate: 2deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	
}
.img-12-div {
	grid-area: img-1-12;
	rotate: 1deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.img-13-div {
	grid-area: img-1-13;
	rotate: -5deg;
}
.img-14-div {
	grid-area: img-1-14;
	rotate: -2deg;
}
.img-15-div {
	grid-area: img-1-15;
	rotate: 0.5deg;
}
.img-16-div {
	grid-area: img-1-16;
	rotate: 4deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.img-17-div {
	grid-area: img-1-17;
	rotate: -3deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.img-18-div {
	grid-area: img-1-18;
	rotate: -2deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.img-19-div {
	grid-area: img-1-19;
	rotate: 3deg;
	margin-left: 0px;
	margin-right: 0px;
}
.img-20-div {
	grid-area: img-1-20;
	rotate: -1deg;
	margin-left: 0px;
	margin-right: 0px;
}
.img-21-div {
	grid-area: img-1-21;
	rotate: 2deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.img-22-div {
	grid-area: img-1-22;
	rotate: -3deg;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
.img-23-div {
	grid-area: img-1-23;
	rotate: -1deg;
}
.img-24-div {
	grid-area: img-1-24;
	rotate: 2deg;
	margin-left: 0px;
	margin-right: 0px;
}
.img-25-div {
	grid-area: img-1-25;
	rotate: 1deg;
	margin-left: 0px;
	margin-right: 0px;
}
.img-26-div {
	grid-area: img-1-26;
	rotate: -2deg;
	margin-left: 0px;
	margin-right: 0px;
}
.img-27-div {
	grid-area: img-1-27;
	rotate: -1deg;
	margin-left: 0px;
	margin-right: 0px;
}
.img-28-div {
	grid-area: img-1-28;
}
.img-29-div {
	grid-area: img-1-29;
	rotate: 1deg;
	margin-left: 0px;
	margin-right: 0px;
}
.img-30-div {
	grid-area: img-1-30;
	rotate: -2deg;
	margin-left: 0px;
	margin-right: 0px;
}
.img-31-div {
	grid-area: img-1-31;
	rotate: -2deg;
}
.img-32-div {
	grid-area: img-1-32;
	rotate: 1deg;
	margin-left: 0px;
	margin-right: 0px;
}

.img-1 {
	width: 90%;
}

.nice {
    font-size: 35px;
}
}

.ask {
	text-align: center;
	padding: 100px 0px;
	background-color: #f3f0ec;
}

.nice {
	    font-family: 'ATBSerif';
    font-size: 40px;
    font-weight: 300;
    padding-top: 30px;
	padding-bottom: 20px;
}

#here {
	position: flex;
	background-color: #fa84c1;
	border-radius: 50px;
  	border: 1px solid black;
  	color: #010101;
  	padding: 10px 15px 10px 15px;
  	text-align: center;
  	font-size: 22px;
  	font-weight: 400;
  	font-family: Manrope;
  	opacity: 0.9;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}
	#here:hover {
		opacity: 1 ;
		background-color: #dae087;
		color: #010101;
	}
		@media(max-width: 740px) {
    		#here {
				font-size: 18px;
			}
    	}
			@media(max-width: 390px) {
    			#here {	
					font-size: 15px;
				}
    		}

/*======================================================
                   block-heart
======================================================*/

#block-heart {
	background-color: #f3f0ec;
	height: 12px;
	border-bottom: 1px solid black;
}

  /*
  #heart { 
    position: relative;
    width: 100px; 
    height: 90px; 
	top: 50%;
  left: 50%;
  margin: 0 0 0 -10px;
} 

#heart:before, #heart:after { 
    position: absolute; 
    content: ""; 
    left: 9px; 
    top: 0; 
    width: 9px; 
    height: 15px; 
    background: #e9a6ca; 
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg); 
    transform-origin: 0 100%; 
} 

#heart:after { 
    left: 0; 
    transform: rotate(45deg); 
    transform-origin :100% 100%; 
}
*/

.fa.first.fa-heart {     
    padding-right: 20px;
    position: relative;
    top: 5%;
    left: 50%;
}
@media(max-width: 610px) {
	.fa.first.fa-heart {     
    left: 48%;
}
}
    .fa.first.fa-heart::before {
        display: block;
        /*  position: absolute;*/
        color: #fa97c1;
		content: "\f004";
        -webkit-text-stroke: 1.2px black;
        height: 0px;  
    }

/*======================================================
                   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: 10px;
	margin-left: 20px;
}
 	@media(max-width: 559px) {
	 	.copyright {
		 	float: none;
		  	text-align: center;
		  	margin-top: 10px;
		  	margin-left: 0px;
		  	display: block;	
	 	}
 	}
 
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

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

.socialiconsul {
    margin-top: 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;
}