@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: 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;
}

/*======================================================
                   BLOCK-1
======================================================*/
  
#BLOCK-1 {
	height: auto;
	background-color: #F3F0EC;
}

.color {
	width: 100%;
	height: auto;
}

.top-pic-color {
	padding-top: 80px;
	padding-bottom: 50px;
	width: 100%;
	transition: 0.4s;
	opacity: 1;
	/*margin-left: 2.5%;
	margin-right: 2.5%;*/
}
	@media(max-width: 630px) {
    	.top-pic-color {
			display: none;
    	}
	}
	.color:hover .top-pic-color {
		opacity: 0;
	}
	.color:hover .top-pic-b-a-w {
		opacity: 1;
		padding-bottom: 20px;
		width: 100%;
	}
	
.top-pic-b-a-w {
	opacity: 0;
	width: 100%;
  	transition: 0.4s;
	position: absolute;
  	left: 0;
	top: 80px;
}
@media(max-width: 630px) {
    	.top-pic-b-a-w {
			display: none;
    	}
	}
	/*--------------TOP-PIC-PHONE------------------*/
	
.color-phone {
	width: 100%;
	height: auto;
}	
	
.top-pic-color-phone {
	display: none;
}
	@media(max-width: 630px) {
    	.top-pic-color-phone {
			display: block;
			padding-top: 80px;
			padding-bottom: 40px;
			width: 100%;
			height: 600px;
			object-fit: cover;
			opacity: 1;
			transition: 0.4s;
    	}
	}
	.color-phone:hover .top-pic-color-phone {
		opacity: 0;
	}
	.color-phone:hover .top-pic-b-a-w-phone {
		opacity: 1;
		display: block;
		/*padding-bottom: 20px;*/
		width: 100%;
		height: 500px;
		object-fit: cover;
	}

.top-pic-b-a-w-phone {
	display: none;
	opacity: 0;
	width: 100%;
  	transition: 0.4s;
	position: absolute;
  	left: 0;
	top: 80px;
}
 
/*======================================================
                   BLOCK-2
======================================================*/


#BLOCK-2 {
	height: 100px;
	background-color: #F3F0EC;
}
  	@media(max-width: 630px) {
    	#BLOCK-2 {
			height: 50px;
    	}
	}
  
.rectangle-1 {
	width: 8%;
	height: 30px;
	background-color: #f7b3bd;
	margin-left: 4%;
	float: left;
	border: 0.1px solid #D4D4D4;
 }
 
 @media(max-width: 630px) {
    .rectangle-1 {
	  height: 15px;
    }
}
 
 .rectangle-2 {
	width: 8%;
	height: 30px;
	background-color: #1f7a21;
	margin-left: 4%;
	float: left;
	border: 0.1px solid #D4D4D4;
 }
 
 @media(max-width: 630px) {
    .rectangle-2 {
	  height: 15px;
    }
}
 
 .rectangle-3 {
	width: 8%;
	height: 30px;
	background-color: #97b40e;
	margin-left: 4%;
	float: left;
	border: 0.1px solid #D4D4D4;
 }
 
 @media(max-width: 630px) {
    .rectangle-3 {
	  height: 15px;
    }
}
 
 .rectangle-4 {
	width: 8%;
	height: 30px;
	background-color: #bb065e;
	margin-left: 4%;
	float: left;
	border: 0.1px solid #D4D4D4;
 }
 
 @media(max-width: 630px) {
    .rectangle-4 {
	  height: 15px;
    }
}
 
 .rectangle-5 {
	width: 8%;
	height: 30px;
	background-color: #fcca22;
	margin-left: 4%;
	float: left;
	border: 0.1px solid #D4D4D4;
 }
 
 @media(max-width: 630px) {
    .rectangle-5 {
	  height: 15px;
    }
}

.rectangle-6 {
	width: 8%;
	height: 30px;
	background-color: #963181;
	margin-left: 4%;
	float: left;
	border: 0.1px solid #D4D4D4;
 }
 
 @media(max-width: 630px) {
    .rectangle-6 {
	  height: 15px;
    }
}
 
 .rectangle-7 {
	width: 8%;
	height: 30px;
	background-color: #4e2883;
	margin-left: 4%;
	float: left;
	border: 0.1px solid #D4D4D4;
 }
 
 @media(max-width: 630px) {
    .rectangle-7 {
	  height: 15px;
    }
}
 
 .rectangle-8 {
	width: 8%;
	height: 30px;
	background-color: #4d78b9;
	margin-left: 4%;
	
	float: left;
	border: 0.1px solid #D4D4D4;
 }
 
 @media(max-width: 630px) {
    .rectangle-8 {
	  height: 15px;
    }
}
	
/*======================================================
                   BLOCK-3
======================================================*/

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

.review {
	text-align: justify;
	margin: auto 0px;
	width: 50%;
	padding-bottom: 30px; 
	font-size: 23px;
	font-weight: 300;
}
	@media(max-width: 730px) {
    	.review {
	  		width: 85%;
    	}
	}
    	@media(max-width: 1144px) {
			.review {
				font-size: 24px;
			}
		}
			@media(max-width: 900px) {
				.review {
					font-size: 20px;
				}
			}
  				@media(max-width: 434px) {
					.review {
        				font-size: 18px;
					}
				}
					@media(max-width: 370px) {
						.review {
        					font-size: 15px;
						}
					}

.name {
	text-align: right;
	margin: auto 0px;
	width: 50%;
	padding-bottom: 30px; 
	font-size: 23px;
	font-weight: 300;
}
	@media(max-width: 730px) {
    	.name {
	  		width: 85%;
			text-align: center;
    	}
	}
		@media(max-width: 1144px) {
			.name {
				font-size: 24px;
			}
		}
			@media(max-width: 900px) {
				.name {
					font-size: 20px;
				}
			}
  				@media(max-width: 434px) {
					.name {
        				font-size: 18px;
					}
				}
					@media(max-width: 370px) {
						.name {
        					font-size: 15px;
						}
					}

/*======================================================
                   BLOCK-4
======================================================*/


#BLOCK-4 {
	height: auto;
	background-color: #F3F0EC;
	padding-bottom: 70px;
}
  	@media(max-width: 630px) {
    	#BLOCK-4 {
			padding-bottom: 35px;
		}
	}
  
.brandmarks {
	padding-top: 50px;
	width: 100%;
	/*margin-left: 2.5%;
	margin-right: 2.5%;*/
}
	@media(max-width: 630px) {
    	.brandmarks {
			display: none;
    	}
	}
	
.brandmarks-phone {
	display: none;
}
	@media(max-width: 630px) {
    	.brandmarks-phone {
			display: block;
			padding-top: 15px;
			width: 100%;
    	}
	}
	
/*======================================================
                   block-5
======================================================*/
  
.block-5 {
	background-color: #f3f0ec;
	height: auto;
	text-align: center;
}
  	@media(max-width: 1144px) {
		.block-3-2 {
	  		/*padding-bottom: 100px;*/
  		}
	}
  
.secret-grid {
	width: 100%;
	/*margin-left: 1%;*/
	display: grid;
  	grid-template-areas:
    	'box-1 box-2';
	padding: 90px 5% 10px 5%;
	/*grid-template-rows: 50% 50%;*/
    grid-template-columns: 50% 50%;
	grid-gap: 0px;
}
  	@media(max-width: 1144px) {
		.secret-grid {
	    	width: 100%;
	  		display: grid;
  			grid-template-areas:
    			'box-1 box-2';
			/*padding: 10px 10px 10px 0px;*/
	   		/*grid-template-rows: 33.3% 3.33% 3.33%;*/
    		/*grid-template-columns: 50% 50%;*/
			/*grid-gap: 1%;*/
		}
  	}
	  	@media(max-width: 850px) {
			.secret-grid {
	    		width: 100%;
	  			display: grid;
  				grid-template-areas:
    				'box-1'
					'box-2';

				padding: 60px 5% 10px 5%;
	   			grid-template-rows: auto;
    			grid-template-columns: 100%;
				grid-gap: 0%;
			}
  		}
  
.article-secret {
	text-align: center;
	background-color: #f3f0ec;
	padding-bottom: 10px;
	grid-area: box-1;
}  
   /* @media(max-width: 1144px) {
		.article-secret {
	  		margin-left: 20px;
	  		margin-right: 20px;
	  		margin-top: 100px;
	  		margin-bottom: 0px;
  		}
	}*/
	
.article-secret-2 {
	text-align: center;
	background-color: #f3f0ec;
	padding-bottom: 10px;
	grid-area: box-2;
}  
    @media(max-width: 610px) {
		.article-secret-2 {
	  		/*margin-left: 20px;
	  		margin-right: 20px;*/
	  		/*margin-top: 10px;*/
	  		/*margin-bottom: 0px;*/
  		}
	}
  

.secret-title {
	font-size: 30px;
	font-weight: 100;
	padding-bottom: 10px;
	padding-top: 20px;
}  
  	@media(max-width: 1480px) {
    	.secret-title {
      		font-size: 30px;
    	}
	}
		@media(max-width: 900px) {
    		.secret-title {
      			font-size: 25px;
    		}
		}
  			/*@media(max-width: 400px) {
    			.secret-title {
      				font-size: 25px;
    			}
			}*/

.title-4 {
	text-align: justify;/*
    text-justify: inter-word;*/
	font-size: 23px;
	font-weight: 400;
  	font-family: Manrope;
	/*margin-left: 30%;
	margin-right: 30%;*/
	padding-bottom: 30px;
	padding-right: 80px;
	padding-left: 80px;
}  
    @media(max-width: 1190px) {
		.title-4 {
			padding-left: 30px;
			padding-right: 30px;
			font-size: 24px;
		}
	}
		@media(max-width: 900px) {
			.title-4 {
				font-size: 20px;
			}
		}
			@media(max-width: 675px) {
				.title-4 {
					/*margin-left: 20%;
					margin-right: 20%;*/
				}
			}
  				@media(max-width: 434px) {
					.title-4 {
        				font-size: 18px;
					}
				}
					@media(max-width: 370px) {
						.title-4 {
        					font-size: 15px;
						}
					}
					
/*ENQUIRE IN BLOCK 5*/

.Experience {
	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;
	margin-bottom: 100px;
}
	.Experience:hover {
		opacity: 1 ;
		background-color: #dae087;
		color: #010101;
	}
		@media(max-width: 740px) {
    		.Experience {
				font-size: 20px;
			}
    	}
			@media(max-width: 390px) {
    			.Experience {	
					font-size: 18px;
				}
    		}
 
/*======================================================
                   BLOCK-6
======================================================*/
  
#BLOCK-6 {
	height: auto;
	background-color: #F3F0EC;
}
  
.pic-1 {
	width: 50%;
	float: left;
}  
	@media(max-width: 1030px) {
    	.pic-1 {
	 		width: 100%;
    	}
	}
  		@media(max-width: 630px) {
    		.pic-1 {
	  			display: none;
    		}
		}
 
.pic-1-phone {
	display: none;
}  
  	@media(max-width: 630px) {
    	.pic-1-phone {
	  		width: 100%;
			display: block;
    	}
	}
	
.pic-2 {
	width: 50%;
	float: left;
}  
	@media(max-width: 1030px) {
    	.pic-2 {
	 		width: 100%;
    	}
	}
  		@media(max-width: 630px) {
    		.pic-2 {
	  			display: none;
    		}
		}
  
.pic-2-phone {
	display: none;
}  
  	@media(max-width: 630px) {
    	.pic-2-phone {
	  		width: 100%;  
			display: block;
    	}
	}

	
/*======================================================
                   BLOCK-7
======================================================*/
 
#BLOCK-7 {
	height: auto;
	background-color: #F3F0EC;
}
  
.pic-3 {
	width: 50%;
	float: left;
}  
	@media(max-width: 1030px) {
    	.pic-3 {
	 		width: 100%;
    	}
	}
  		@media(max-width: 630px) {
    		.pic-3 {
	  			display: none;
    		}
		}
 
.pic-3-phone {
	display: none;
}  
  	@media(max-width: 630px) {
    	.pic-3-phone {
	  		width: 100%;
			display: block;
    	}
	}
	
.pic-4 {
	width: 50%;
	/*float: left;*/
}  
	@media(max-width: 1030px) {
    	.pic-4 {
	 		width: 100%;
    	}
	}
  		@media(max-width: 630px) {
    		.pic-4 {
	  			display: none;
    		}
		}
  
.pic-4-phone {
	display: none;
}  
  	@media(max-width: 630px) {
    	.pic-4-phone {
	  		width: 100%;  
			display: block;
    	}
	}

/*======================================================
                   BLOCK-7
======================================================*/

#BLOCK-8 {
	height: auto;
	background-color: #F3F0EC;
	text-align: -webkit-center;
}

.prev-next {
	width: 100%;
	/*margin-left: 1%;*/
	display: grid;
  	grid-template-areas:
    	'prev next';
	padding: 90px 5% 10px 5%;
	/*grid-template-rows: 50% 50%;*/
    grid-template-columns: 50% 50%;
	/*grid-gap: 20px;*/
}
  	@media(max-width: 1144px) {
		.prev-next {
	    	width: 100%;
	  		display: grid;
  			grid-template-areas:
    			'prev next';
			/*padding: 10px 10px 10px 0px;*/
	   		/*grid-template-rows: 33.3% 3.33% 3.33%;*/
    		/*grid-template-columns: 50% 50%;*/
			/*grid-gap: 1%;*/
		}
  	}
	  	/*@media(max-width: 610px) {
			.prev-next {
	    		width: 100%;
	  			display: grid;
  				grid-template-areas:
    				'box-1'
					'box-2';

				/*padding: 10px 10px 10px 0px;*/
	   			/*grid-template-rows: auto;
    			grid-template-columns: 100%;
				grid-gap: 0%;
			}
  		}*/
		
.prev {
	grid-area: prev;
}

.next {
	grid-area: next;
}

.bottom-button {
	position: flex;
	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;
	margin-bottom: 100px;
}
	.bottom-button:hover {
		opacity: 1 ;
		background-color: #dae087;
		color: #010101;
	}
		@media(max-width: 740px) {
    		.bottom-button {
				font-size: 18px;
			}
    	}
			@media(max-width: 433px) {
    			.bottom-button {	
					font-size: 15px;
				}
    		}

.bottom-button-2 {
	position: flex;
	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;
	margin-bottom: 100px;
}
	.bottom-button-2:hover {
		opacity: 1 ;
		background-color: #8fd1d8;
		color: #010101;
	}
		@media(max-width: 740px) {
    		.bottom-button-2 {
				font-size: 18px;
			}
    	}
			@media(max-width: 433px) {
    			.bottom-button-2 {	
					font-size: 15px;
				}
    		}

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