@font-face {
   font-family: 'Pink Sunset';
   src: url('../fonts/PinkSunset-Regular.eot?#iefix') format('embedded-opentype'),
     url('../fonts/PinkSunset-Regular.woff2') format('woff2'),
     url('../fonts/PinkSunset-Regular.woff') format('woff'),
     url('../fonts/PinkSunset-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'Satoshi-Regular';
   src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
     url('../fonts/Satoshi-Regular.woff') format('woff'),
     url('../fonts/Satoshi-Regular.ttf') format('truetype');
   font-weight: 400;
   font-display: swap;
   font-style: normal;
 }

 @font-face {
   font-family: 'Satoshi-Medium';
   src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
     url('../fonts/Satoshi-Medium.woff') format('woff'),
     url('../fonts/Satoshi-Medium.ttf') format('truetype');
   font-weight: 500;
   font-display: swap;
   font-style: normal;
 }

 @font-face {
   font-family: 'Satoshi-Bold';
   src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
     url('../fonts/Satoshi-Bold.woff') format('woff'),
     url('../fonts/Satoshi-Bold.ttf') format('truetype');
   font-weight: 700;
   font-display: swap;
   font-style: normal;
 }


 :root {
   --selection-color: #3e93a66e;
   --black-color: #000000;
   --white-color: #ffffff;
   --purple-color: #553C5B;
   --text-color: #151515;
   --bg-color: #fdf6f2;
   --primary-color: #553C5B;
   --yellow-color: #DAE26B;
   --ease: all 350ms ease-in-out;
   --heading: 'Pink Sunset';
   --text-regular: 'Satoshi-Regular';
   --text-medium: 'Satoshi-Medium';
   --text-bold: 'Satoshi-Bold';
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: var(--heading);
 }

 body {
   font-family: var(--text-medium);
   font-size: 16px;
   background-color: var(--bg-color);
   /* cursor: none !important; */
 }

 html {
   scroll-behavior: smooth;
 }

 ::selection {
   background: var(--selection-color);
   color: var(--black-color);
   text-shadow: none;
 }

 ::-webkit-scrollbar {
   width: 5px;
   background-color: var(--primary-color);
 }

 ::-webkit-scrollbar-button:start:decrement,
 ::-webkit-scrollbar-button:end:increment {
   display: none;
 }

 ::-webkit-scrollbar-track-piece {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
   background-color: var(--white-color);
 }

 ::-webkit-scrollbar-thumb:vertical {
   border-radius: 10px;
   background-color: var(--primary-color);
 }

 ul {
   padding: 0;
   list-style: none;
 }

 a {
   text-decoration: none;
   transition: var(--ease);
   color: var(--text-color);
 }

 @-webkit-keyframes updown {
   0% {
     -webkit-transform: translateY(0px);
   }

   50% {
     -webkit-transform: translateY(15px);
   }

   100% {
     -webkit-transform: translateY(0px);
   }
 }

 @-webkit-keyframes rot {
   0% {
     -webkit-transform: rotate(15deg);
   }

   50% {
     -webkit-transform: rotate(-15deg);
   }

   100% {
     -webkit-transform: rotate(15deg);
   }
 }

 .purple-btn {
   background-color: var(--purple-color);
   color: var(--white-color);
 }

 .purple-btn:hover {
   background-color: var(--black-color);
   color: var(--white-color);
 }

 .btn-style {
   padding: 10px 35px;
   border-radius: 25px;
 }

 /* HEADER */

 .top-bar a {
   color: var(--white-color);
 }

 .top-links {
   display: flex;
   align-items: center;
 }

 .top-links li:first-child:after {
   content: '|';
   margin: 0 25px 0 25px;
 }

 .top-soc {
   display: flex;
   align-items: center;
   justify-content: end;
   gap: 5px;
 }

 .top-soc a {
   background-color: var(--white-color);
   color: #553c5b;
   width: 30px;
   display: block;
   height: 30px;
   line-height: 29px;
   border-radius: 3px;
 }

 .top-bar ul {
   margin: 0;
 }

 .top-bar {
   text-align: center;
   background-color: var(--purple-color);
   color: var(--white-color);
   padding: 10px 0;
   font-family: var(--text-medium);
   transition: var(--ease);
   overflow: hidden;

 }

 .scroll-thing .top-bar {
   height: 0;
   padding: 0;
 }

 .top-bar p {
   margin: 0;
 }

 .nav-links {
   display: flex;
   justify-content: space-evenly;
   margin: 0;
 }

 .nav-links a {
   text-transform: capitalize;
   padding: 0 10px 8px;
   border-bottom: 5px solid transparent;
   border-radius: 10px;
 }

 .nav-links .active {
   text-transform: capitalize;
   padding: 0 10px 8px;
   border-color: #EFB9D3;

 }

 .logo-area img {
   width: 100%;
   transition: var(--ease);
   display: block;
   margin: 0 auto;
 }

 .scroll-thing .logo-area img {
   width: 80%;
 }

 .navigation {
   padding: 30px 0 0;
   transition: var(--ease);
 }

 header {
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
   background-color: #fdf6f2c7;
   z-index: 999;
   transition: var(--ease);
   backdrop-filter: blur(5px);
 }

 .scroll-thing .navigation {
   padding: 10px 0;
 }

 .scroll-thing {
   box-shadow: 0px 4px 14px #00000073;
 }

 /* END HEADER */

 /* BANNER */
 .banner-head h2 {
   font-size: 86px;
   color: var(--purple-color);
   line-height: 95px;
 }

 .banner-head {
   max-width: 58%;
 }

 .banner-slider .slick-slide img {
   width: 100%;
 }

 .banner-side {
   width: 55%;
   float: right;
   margin-top: -250px;
   margin-right: 6%;
 }

 .banner {
   padding: 200px 0 0;
   position: relative;
   display: inline-block;
   width: 100%;
 }

 .f-img {
   position: absolute;
 }

 .banner-f-right {
   max-width: 300px;
   top: 110px;
   right: 0;
   -webkit-animation: updown 3s infinite linear;
   animation: updown 3s infinite linear;
 }

 .banner-f-left {
   bottom: -220px;
   left: 0;
   max-width: 330px;
   -webkit-animation: updown 3s infinite linear;
   animation: updown 3s infinite linear;
 }

 .banner .container {
   position: relative;
   z-index: 2;
 }

 .banner-slider:after {
   content: '';
   position: absolute;
   bottom: -30px;
   left: 50%;
   width: 110%;
   height: 150px;
   background-image: url(../images/slider-line.png);
   background-size: 100%;
   transform: translateX(-50%);
   z-index: 1;
   background-position: center bottom;
   background-repeat: no-repeat;
 }

 .nav-thumb {
   position: relative;
   display: flex;
   align-items: center;
   gap: 8px;
   justify-content: center;
   padding: 35px 0 0;
 }

 .nt-img {
   width: 55px;
   height: 55px;
   border-radius: 50%;
   border: 4px solid #CCC5B2;
   padding: 8px;
   min-width: 55px;
 }

 .nt-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .banner-slider-nav {
   margin: -14px 0 0;
   position: relative;
   z-index: 5;

 }

 .banner-slider-nav .slick-list {
   padding: 0 !important;
 }

 .nav-thumb:before {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background-color: #DAC8DA;
   position: absolute;
   content: '';
   top: 0px;
 }

 .slick-center .nav-thumb:before {
   background-color: var(--purple-color);
 }

 .banner-slider-nav .slick-slide {
   transition: var(--ease);
 }


 .banner-slider-nav .slick-center {
   /* margin: 34px 0 0; */
   transform: translateY(34px);
 }

 .banner-slider-nav .slick-list.draggable {
   padding-bottom: 50px !important;
 }

 .banner-head p {
   font-size: 20px;
   color: #A983B2;
   width: 70%;
   margin: 20px 0 30px;
 }

 /* END BANNER */

 /* ABOUT SEC */

 .story-sec {
   margin: 120px 0 0;
   position: relative;
   background-image: url(../images/string.png);
   background-size: 100%;
   background-position: center bottom;
   background-repeat: no-repeat;
 }

 .story-sec .sec-head h2 {
   font-size: 75px;
   color: var(--purple-color);
   line-height: 75px;
 }

 .story-sec .img-01 {
   float: right;
   position: relative;
   z-index: 4;
 }

 .story-sec .img-02 {
   float: right;
   margin: 80px -102px 0 0;
   position: relative;
   z-index: 3;
 }

 .story-sec .left-side {
   padding: 0 24% 0 0;

 }

 .story-sec .img-box {
   max-width: 260px;
   float: right;
   margin: 50px 23% -50px 0;
   position: relative;
 }

 .story-sec .img-box img {
   width: 100%;
 }

 .story-sec .img-box:after {
   position: absolute;
   right: 1px;
   background-image: url(../images/ob-cake-smily.png);
   width: 80px;
   height: 80px;
   content: '';
   top: -10px;
   background-size: 100%;
   background-repeat: no-repeat;
   -webkit-animation: rot 3s infinite linear;
   animation: rot 3s infinite linear;
 }

 /* END ABOUT SEC */

 /* THREE COL */

 .three-col {
   padding: 120px 0 0;
   overflow: hidden;
 }

 .tc-left {
   background-color: #66456E;
   border-radius: 35px;
   text-align: center;
   background-image: url(../images/bg-pattern.png);
   background-size: cover;
   background-repeat: no-repeat;
   padding: 50px 0;
   position: relative;
   overflow: hidden;
 }

 .tc-left h3 {
   font-size: 55px;
   color: var(--white-color);
 }

 .tc-left h5 {
   font-size: 37px;
   color: #EAB6F4;
   margin: 0 0 20px;
 }

 .tc-left .cake-holder img {
   width: 100%;
 }

 .tc-left .cake-holder {
   max-width: 400px;
   margin: 0 auto;
 }

 .tc-left .cr-box {
   position: absolute;
   width: 110%;
   height: 40%;
   background-color: #3A233D;
   bottom: -60px;
   border-radius: 50%;
   left: 50%;
   transform: translateX(-50%);
 }

 .tc-left>*:not(.cr-box) {
   position: relative;
   z-index: 2;
 }

 .tcr-01 {
   background-color: #E9B5F3;
   background-image: url(../images/bg-pattern.png);
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
   align-items: center;
   margin: 0 0 30px;
   padding: 0 0 0 50%;
 }

 .tc-right {
   border-radius: 35px;
   position: relative;
   overflow: hidden;
   min-height: 260px;
 }

 .tcr-01 h3 {
   font-size: 50px;
   color: #66456E;
 }

 .tcr-01 img {
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 2;
 }

 .tcr-01 .cr-box {
   position: absolute;
   left: -70px;
   top: 50%;
   transform: translateY(-50%);
   width: 50%;
   height: 120%;
   background: #3A233D;
   border-radius: 50%;
 }

 .tcr-02 {
   background-image: url(../images/package-bg.png);
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: center;
   margin: 0 0 30px;
 }

 .tcr-02 span {
   font-size: 19px;
   color: var(--white-color);
   text-align: center;
   display: block;
   position: absolute;
   right: 6%;
   bottom: 11%;
 }

 .tcr-02 span b {
   font-size: 35px;
   font-family: var(--heading);
   color: #F2CCFC;
 }

 .tcr-02 .cr-box {
   width: 400px;
   height: 400px;
   position: absolute;
   right: -190px;
   bottom: -220px;
   background-color: #3A233D;
   border-radius: 50%;
   border: 1px solid #F2C9A3;
 }

 .tcr-02 h3 {
   font-size: 50px;
   color: var(--white-color);
   margin: 0 0 0 60px;
 }

 /* END THREE COL */

 /* OUR CAKES */

 /* =SLIDER= */
 .wrap {
   position: relative;
   z-index: 100;
   width: 100%;
   height: 100%;
   padding: 0 0;
   /* overflow: hidden; */
 }


 .slider {
   position: relative;
   z-index: 200;
   padding: 0 0px;
   margin: 0 auto;
   /* max-width: 800px; */
   width: 100%;
 }

 .oc-slider-view .slick-arrow {
   background-color: #a983b28c;
   border-radius: 50%;
   width: 54px;
   height: 54px;
   text-align: center;
   z-index: 99;
 }

 .oc-slider-view .slick-arrow:before {
   content: none;
 }

 .oc-slider-view .slick-arrow i {
   font-size: 25px;
   color: #553C5B;
 }

 .oc-slider-view .slick-prev {
   left: 10%;
   bottom: 30px;
   transform: none;
   top: auto;
 }

 .oc-slider-view .slick-next {
   right: 10%;
   bottom: 30px;
   transform: none;
   top: auto;
 }

 .item.slick-slide {
   width: 400px;
   height: 400px !important;
   transition: transform .4s;
   position: relative;
 }

 /* .slick-slide:after {
  content:'';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  transition: transform .4s;
} */

 .item.slick-slide {
   transform: scale(0.5) translate(640px);
   margin-top: -40px;
   filter: blur(5px);
 }

 .item.slick-slide.slick-center+.slick-slide {
   transform: scale(0.6) translate(-200px);
   z-index: 10;
 }

 .item.slick-slide.slick-center+.slick-slide+.item.slick-slide {
   transform: scale(0.5) translate(-640px);
   z-index: 5;
 }

 .item.slick-slide.slick-active {
   transform: scale(0.6) translate(200px);

   margin-top: 0;
 }

 .item.slick-slide.slick-center {
   /* margin: 0 -10%; */
   transform: scale(1) !important;
   z-index: 30;
   filter: none;
 }

 .slick-center:after {
   opacity: 0;
 }

 /* =END SLIDER= */

 .o-cakes {
   text-align: center;
   padding: 100px 0;
   overflow: hidden;
 }

 .o-cakes .sec-head p {
   color: #A983B2;
   font-size: 20px;
   margin: 0 auto 0;
   max-width: 60%;
 }

 .o-cakes .sec-head h2 {
   font-size: 74px;
   color: #553C5B;
 }

 .oc-content p {
   color: #665C68;
   max-width: 70%;
   margin: 0 auto 30px;
 }

 /* END OUR CAKES */

 /* CUSTOMIZE */
 .cust-sec {
   background-color: #3B2541;
   color: #FCF4EF;
   padding: 100px 0 0;
   background-image: url(../images/customize-bg-pattern.png);
   background-size: cover;
   position: relative;
   /* margin: 0 0 -300px; */
   z-index: 2;
   max-height: 890px;
 }

 .cust-sec .sec-head {
   text-align: center;
 }

 .cust-sec .sec-head h2 {
   font-size: 74px;
 }

 .cust-sec .sec-head p {
   color: #C9A3D2;
   max-width: 70%;
   margin: 0 auto 30px;
 }

 .offwhite-btn {
   background-color: #FCF4EF;
   color: #4E3654;
 }

 .ca-plate img {
   width: 100%;
 }

 .ca-plate {
   max-width: 780px;
   margin: 0 auto;
   position: relative;
 }

 .cust-area {
   position: relative;
   padding: 70px 0 0;
 }

 .ca-picarea .change-pic {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .ca-picarea {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   overflow: hidden;
   mix-blend-mode: lighten;
   width: 390px;
   height: 390px;
 }

 .ca-picarea .cake-cream {
   position: absolute;
   top: 0px;
   right: -4px;
   max-width: 220px;
 }

 .rev-box {
   position: absolute;
   width: 300px;
 }

 .rev-box img {
   width: 60px;
   height: 60px;
   object-fit: cover;
   border-radius: 50%;
   margin: 0 0 5px;
 }

 .rb-1 {
   text-align: right;
   top: 3%;
   left: 7%;
   z-index: 9;
 }

 .rb-2 {
   text-align: right;
   top: 29%;
   left: 0%;
   max-width: 250px;
 }

 .rb-3 {
   text-align: left;
   top: 3%;
   right: 7%;
   z-index: 9;
 }

 .rb-4 {
   text-align: left;
   top: 29%;
   right: 0%;
   max-width: 250px;
 }

 .rev-box strong {
   display: block;
   font-size: 24px;
   color: #FCF4EF;
   font-weight: normal;
   margin: 0 0 3px;
 }

 .rev-box span {
   color: #A983B2;
   font-size: 15px;
   display: block;
   line-height: 18px;
 }

 .rev-box a {
   display: block;
 }

 .f-img.cs-fimg-1 {
   left: 0;
   top: -210px;
   -webkit-animation: updown 3s infinite linear;
   animation: updown 3s infinite linear;
 }

 /* END CUSTOMIZE */

 /* DIFF SEC */
 .diff-sec {
   background-color: #D5C0D4;
   background-image: url(../images/stripe-pattern.png);
   background-size: cover;
   position: relative;
   z-index: 1;
   padding: 260px 0 0;
   overflow: hidden;
 }

 .txt-scroll .container-fluid {
   position: relative;
   width: 100vw;
   overflow: hidden;

 }

 .txt-scroll .right-to-left {
   transform: rotate(15deg) scale(1.1);
   background-color: #78597F;
 }

 .txt-scroll .left-to-right {
   transform: rotate(-15deg) scale(1.1);
   background-color: #3A233D;
 }



 .scrolling-text {
   display: inline-block;
   will-change: transform;
   backface-visibility: hidden;
 }

 .scrolling-text,
 .scrolling-text .scrolling-text-content {
   transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
 }

 /* .txt-scroll>div:first-child p {
   color: #FBF3E7;
 } */

 .scrolling-text .scrolling-text-content {
   color: #FBF3E7;
   font-size: 64px;
   white-space: nowrap;
   line-height: 1em;
   margin: 25px 0;
   font-family: var(--heading);
 }

 .cont {
   position: relative;
   width: 810px;
   height: 540px;
   border: 10px solid #fff;
   border-radius: 15px;
   margin: 0 auto;
   overflow: hidden;
 }

 .cont .img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: 790px 100%;
 }

 .cont .background-img {
   background-image: url("../images/cart2.jpg");
 }

 .cont .foreground-img {
   background-image: url("../images/cart1.jpg");
   width: 50%;
 }

 .cont .slider-diff {
   position: absolute;
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   height: 100%;
   background: rgba(242, 242, 242, 0.3);
   outline: none;
   margin: 0;
   transition: all 0.2s;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .cont .slider-diff:hover {
   background: rgba(242, 242, 242, 0.1);
 }

 .cont .slider-diff::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 6px;
   height: 600px;
   background: white;
   cursor: pointer;
 }

 .cont .slider-diff::-moz-range-thumb {
   width: 6px;
   height: 600px;
   background: white;
   cursor: pointer;
 }

 .cont .slider-button {
   pointer-events: none;
   position: absolute;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-color: white;
   left: calc(50% - 18px);
   top: calc(50% - 18px);
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .cont .slider-button:after {
   content: "";
   padding: 3px;
   display: inline-block;
   border: solid #5D5D5D;
   border-width: 0 2px 2px 0;
   transform: rotate(-45deg);
 }

 .cont .slider-button:before {
   content: "";
   padding: 3px;
   display: inline-block;
   border: solid #5D5D5D;
   border-width: 0 2px 2px 0;
   transform: rotate(135deg);
 }

 /* END DIFF SEC */

 /* PORTFOLIO */
 .our-portfolio .sec-head {
   text-align: center;
   margin: 0 0 60px;
 }

 .our-portfolio .sec-head h2 {
   font-size: 74px;
   color: #553C5B;
 }

 .our-portfolio .sec-head p {
   color: #A983B2;
   font-size: 20px;
   margin: 0 0 5px;
 }

 .csb-img img {
   width: 100%;
 }

 .csb-img {
   position: relative;
   overflow: hidden;
 }

 .csb-txt {
   text-align: center;
   margin: 15px 0 30px;
 }

 .csb-txt strong {
   font-weight: normal;
   font-family: var(--heading);
   display: block;
   font-size: 20px;
 }

 .csb-txt p {
   font-size: 14px;
   color: #A983B2;
 }

 .diff-sec .cir-offwhite {
   position: absolute;
   left: 0;
   bottom: -100px;
   width: 100%;
   height: 200px;
   background-color: #fdf6f2;
   border-radius: 50%;
   z-index: 1;
 }

 .diff-sec>.container {
   position: relative;
   z-index: 2;
 }

 .our-portfolio {
   padding: 80px 0 60px;
 }

 .bottom-txt {
   max-width: 60%;
   text-align: center;
   margin: 30px auto 0;
 }

 /* END PORTFOLIO */

 /* BIRTHDAY */
 .birthday h2 {
   font-size: 74px;
   color: #FCF4EF;
 }

 .birthday p {
   color: #C9A3D2;
 }

 .bg-design {
   clip-path: polygon(0 39%, 100% 4%, 100% 100%, 0% 100%);
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #3A233D;
   z-index: 1;
   border-radius: 0 0 60px 60px;
 }

 .birthday .container {
   position: relative;
   z-index: 3;
   padding-bottom: 40px;
   padding-top: 40px;
 }

 .birthday .row {
   position: relative;
   z-index: 2;
   padding: 0 50px;
 }

 .birthday {
   overflow: hidden;
   padding: 80px 0 140px;
   margin: -80px 0 0;
 }

 .birthday .img-holder img {
   width: 100%;
 }

 .birthday .img-holder {
   padding-right: 7%;
 }

 .birthday .content-side {
   margin-top: 100px;
 }

 .birthday .f-img {
   z-index: 2;
 }

 .birthday .balloon-3 {
   z-index: 3;
   bottom: -130px;
   left: 30%;
   -webkit-animation: rot 3s infinite linear;
   animation: rot 3s infinite linear;

 }

 .birthday .balloon-1 {
   right: -80px;
   top: -60px;
   -webkit-animation: updown 3s infinite linear;
   animation: updown 3s infinite linear;
 }

 .birthday .balloon-2 {
   left: -70px;
   top: -70px;
   -webkit-animation: updown 3s infinite linear;
   animation: updown 3s infinite linear;
 }

 /* END BIRTHDAY */

 /* CLIENTS */
 .clients .sec-head h2 {
   font-size: 74px;
   color: #553C5B;
 }

 .clients .sec-head p {
   font-size: 20px;
   color: #A983B2;
 }

 .clients .sec-head {
   text-align: center;
   margin: 0 0 50px;
 }

 .testi-box {
   border: 1px solid #1e1e1e;
   border-radius: 20px;
   width: 31%;
   background-color: #fff;
   overflow: hidden;
   padding: 30px;
   transition: var(--ease);
   position: absolute;
   z-index: 1;
 }

 .cc-img {
   width: 32px;
   height: 32px;
   overflow: hidden;
   border-radius: 50%;
 }

 .cc-info {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 0 0 15px;
 }

 .cc-info img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .testi-box ul {
   margin: 0;
   display: flex;
   align-items: center;
   font-size: 10px;
   gap: 3px;
   color: #D8588C;
   transition: var(--ease);
 }

 .testi-box:hover {
   background-color: #78597F;
   color: #fff;
   border-color: #78597F;
   z-index: 2;
   transform: rotate(0deg);
 }

 .testi-box:hover ul {
   color: #fff;
 }

 .c-container {
   position: relative;
   margin: 0 auto;
   max-width: 1056px;
   height: 450px;
 }


 .testi-1 {
   transform: rotate(-5deg);
   top: 18%;
 }

 .testi-3 {
   right: 0;
   transform: rotate(11deg);
   top: 6%;
 }

 .testi-2 {
   left: 28%;
   transform: rotate(-9deg);
 }

 .testi-4 {
   bottom: 13%;
   left: 30%;
   transform: rotate(-2deg);
 }

 .testi-5 {
   bottom: 27%;
   right: 14%;
   transform: rotate(11deg);
 }

 .clients .cake-left {
   left: 0;
   top: -80px;
   -webkit-animation: updown 3s infinite linear;
   animation: updown 3s infinite linear;
 }

 .clients {
   position: relative;
 }

 .clients .cake-right {
   right: 0;
   bottom: -250px;
   -webkit-animation: updown 3s infinite linear;
   animation: updown 3s infinite linear;

 }

 /* END CLIENTS */

 /* FOOTER */
 footer {
   background-color: #78597F;
   border-radius: 50px 50px 0 0;
   margin: 170px 0 0;
   position: relative;
 }

 .contact-area .info-side h3 {
   font-size: 47px;
   margin: 0 0 20px;
 }

 .contact-area .info-side,
 .contact-area .info-side a {
   color: #fdf6f2;
 }

 .contact-area span {
   font-size: 18px;
   display: block;
   color: #F5C9FF;
 }

 .phone-info a {
   font-size: 34px;
   font-family: var(--heading);
 }

 .phone-info i {
   font-size: 32px;
   color: #F5C9FF;
   margin-right: 15px;
 }

 .phone-info {
   margin: 0 0 20px;
 }

 .email-info a {
   font-family: var(--heading);
   font-size: 34px;
 }

 .contact-area .info-side {
   margin-top: 70px;
 }

 .form-side {
   background-color: #fff;
   max-width: 560px;
   float: right;
   width: 100%;
   border: 1px solid #1E1E1E;
   border-radius: 30px;
   padding: 50px;
   margin: -180px 0 0 0;
 }

 .form-side span {
   color: #A983B2;
   display: block;
   margin: 0 0 5px;
 }

 .form-side strong {
   font-weight: normal;
   font-size: 40px;
   font-family: var(--heading);
   color: #553C5A;
   line-height: 40px;
   margin: 0 0 30px;
   display: block;
 }

 .form-side input {
   border: 1px solid #A8A8A8;
   padding: 10px 15px;
   border-radius: 25px;
 }

 .form-side textarea {
   border: 1px solid #A8A8A8;
   border-radius: 15px;
 }

 .form-side button {
   display: block;
   width: 100%;
 }

 .ftr-nav {
   background-color: #53345B;
   border-radius: 35px 35px 0 0;
   padding: 20px 0 20px;
 }

 .ftr-nav a {
   color: #fff;
   position: relative;
 }

 .ftr-nav ul {
   display: flex;
   align-items: center;
   justify-content: end;
   gap: 80px;
 }

 .ftr-nav ul a:before {
   content: '|';
   position: absolute;
   left: -39px;
 }

 .ftr-nav ul li:first-child a:before {
   content: none;
 }

 .contact-area {
   margin: 0 0 50px;
 }

 .copy-r {
   background-color: #3A233D;
   color: #fff;
   font-size: 12px;
   padding: 15px 0;
 }

 .copy-r ul {
   margin: 0;
   display: flex;
   justify-content: end;
   gap: 15px;
 }

 .copy-r a {
   color: #fff;
   border: 1px solid;
   width: 22px;
   display: block;
   height: 22px;
   text-align: center;
   border-radius: 50%;
   font-size: 10px;
   line-height: 20px;
 }

 .copy-r p {
   margin: 0;
 }

 /* END FOOTER */

 .top-links a:hover {
   color: #efb9d3;
 }

 .top-soc a:hover {
   background-color: #efb9d3;
 }

 .phone-menu {
   display: none;
   padding: 10px 0;
 }

 .phone-menu img {
   max-width: 120px;
 }

 .phone-menu .row>div:last-child {
   display: flex;
   align-items: center;
   justify-content: end;
 }

 .phone-menu .btn {
   border-radius: 3px;
 }

 .side-menu .offcanvas-header img {
   max-width: 120px;
 }

 .side-menu .offcanvas-header {
   background-color: #fdf6f2;
 }

 .side-menu .offcanvas-body {
   background-color: #3b2541;
   background-image: url(../images/customize-bg-pattern.png);
   background-repeat: no-repeat;
   background-size: cover;
 }

 .sm-menu a {
   font-family: var(--heading);
   color: #fdf6f2;
   font-size: 27px;
 }

 .sm-menu {
   display: flex;
   flex-direction: column;
   gap: 13px;
   margin: 20px 0 0;
 }

 .sm-soc {
   display: flex;
   align-items: center;
   gap: 5px;
   text-align: center;
   justify-content: start;
 }

 .sm-soc a {
   background-color: var(--white-color);
   color: #553c5b;
   width: 30px;
   display: block;
   height: 30px;
   line-height: 29px;
   border-radius: 3px;
 }

 .sm-soc a:hover {
   background-color: #efb9d3;
 }

 .side-menu .offcanvas-body>div {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
 }

 .story-sec .btn {
   border-radius: 30px;
   display: none;
 }

 /* RESPONSIVE */
 @media only screen and (max-width : 1399px) {

   .banner-head h2 {
     font-size: 75px;
     color: var(--purple-color);
     line-height: 85px;
   }

   .nav-thumb:before {
     top: 3px;
   }
 }

 @media only screen and (max-width : 1199px) {
   .banner-head {
     max-width: 70%;
   }

   .banner-head p {
     width: 65%;
   }

   .banner-f-left {
     max-width: 280px;
   }

   .nav-thumb:before {
     top: 9px;
   }

   .banner-slider-nav .slick-center {
     transform: translateY(26px);
   }

   .story-sec .left-side {
     padding: 0 10% 0 0;
   }
 }

 @media only screen and (max-width : 991px) {

   .top-bar,
   .navigation {
     display: none;
   }

   .phone-menu {
     display: block;
   }

   .banner {
     padding: 130px 0 0;
   }

   .banner-head {
     max-width: 72%;
   }

   .banner-head h2 {
     font-size: 60px;
     line-height: 65px;
   }

   .banner-f-right {
     max-width: 240px;
     top: 30px;
   }

   .nav-thumb:before {
     top: 17px;
   }

   .banner-slider-nav .slick-center {
     transform: translateY(19px);
   }

   .nt-img {
     width: 40px;
     height: 40px;
     border: 3px solid #CCC5B2;
     min-width: 40px;
   }

   .nav-thumb .nt-txt {
     line-height: 18px;
   }

   .banner-f-left {
     max-width: 240px;
   }

   .story-sec .left-side {
     padding: 0 0 0 0;
   }

   .story-sec .sec-head h2,
   .o-cakes .sec-head h2 {
     font-size: 60px;
     line-height: 65px;
   }

   .story-sec .img-02 {
     margin: -110px 80px 0 0;
     max-width: 77%;
   }

   .tc-left h3 {
     font-size: 45px;
   }

   .tc-left h5 {
     font-size: 35px;
   }

   .tc-left .cake-holder img {
     max-width: 80%;
   }

   .tcr-01 h3 {
     font-size: 45px;

   }

   .tcr-01 {
     padding: 0 0 0 40%;
   }

   .tcr-02 h3 {
     font-size: 45px;
     margin: 0 0 0 30px;
   }

   .tcr-02 span {
     right: 4%;
     bottom: 5%;
   }

   .tc-right {
     min-height: 202px;
   }

   .tcr-01 img {
     max-width: 170px;
   }

   .tcr-02 .cr-box {
     width: 360px;
     height: 360px;
     right: -190px;
     bottom: -220px;
   }

   .o-cakes .sec-head p {
     max-width: 80%;
   }


 }

 @media only screen and (max-width : 767px) {

   .banner-head h2,
   .story-sec .sec-head h2, .o-cakes .sec-head h2 {
     font-size: 45px;
     line-height: 50px;
   }

   .banner-head p {
     width: 80%;
     font-size: 18px;
   }

   .banner-side {
     width: 72%;
     margin-top: -80px;
     margin-right: 0;
   }

   .banner-f-right {
     max-width: 200px;
     top: 40px;
   }

   .nav-thumb .nt-txt {
     line-height: 15px;
     font-size: 14px;
   }

   .banner-f-left {
     max-width: 200px;
     bottom: -100px;
   }

   .story-sec {
     margin: 60px 0 0;
   }

   .story-sec .left-side .img-holder {
     display: none;
   }

   .story-sec .sec-head h2,
   .o-cakes .sec-head h2,.o-cakes .sec-head h2 {
     margin: 0 0 20px;
   }

   .story-sec p {
     text-align: justify;
   }

   .tc-left {
     margin: 0 0 20px;
   }

   .tcr-01 {
     padding: 0 0 0 50%;
   }

   .tcr-01 img {
     max-width: 230px;
   }

   .tcr-01 {
     margin: 0 0 20px;
   }

   .tc-right {
     margin: 0 0 30px;
   }

   .o-cakes .sec-head p {
     max-width: 100%;
   }

   .item.slick-slide {
     width: 300px;
     height: 300px !important;
   }

   .item.slick-slide.slick-center {
     background-size: 70% !important;
   }

   .item.slick-slide.slick-center+.slick-slide {
     transform: scale(0.4) translate(-340px);
   }

   .item.slick-slide {
     transform: scale(0.3) translate(1250px);

   }

   .item.slick-slide.slick-center+.slick-slide+.item.slick-slide {
     transform: scale(0.3) translate(-1250px);

   }

   .item.slick-slide.slick-active {
    transform: scale(0.4) translate(340px);
  
}
 }

 @media only screen and (max-width : 576px) {
   .banner-head {
     max-width: 100%;
     text-align: center;
   }

   .banner-head h2,
   .story-sec .sec-head h2,.o-cakes .sec-head h2 {
     font-size: 36px;
     line-height: 43px;
   }

   .banner-head p {
     width: 100%;

   }

   .banner-side {
     width: 100%;
     margin-top: 30px;
     margin-right: 0;
   }

   .banner-f-right {
     opacity: .2;
     filter: blur(2px);
   }

   .nav-thumb .nt-txt {
     line-height: 12px;
     font-size: 10px;
     text-align: center;
   }

   .nav-thumb {
     flex-direction: column;
     gap: 5px;
     padding: 40px 0 0;
   }

   .banner-slider-nav .slick-list.draggable {
     padding-bottom: 100px !important;
   }

   .nt-img {
     border: 2px solid #CCC5B2;
     padding: 5px;
   }

   .nav-thumb:before {
     width: 10px;
     height: 10px;
   }

   .nav-thumb:before {
     top: 23px;
   }

   .banner-slider-nav .slick-center {
     transform: translateY(15px);
   }

   .banner-f-left {
     max-width: 150px;
     opacity: .2;
     filter: blur(2px);
   }

   .story-sec {
     margin: 0 0 0;
   }

   .banner-slider-nav .slick-list.draggable {
     padding-bottom: 70px !important;
   }

   .story-sec .img-box {
     max-width: 200px;
     float: none;
     margin: 50px auto -50px auto;
     display: block;
   }

   .story-sec .btn {
     display: inline-block;
     margin: 10px 0 0;
   }

   .story-sec .content-side p:nth-child(2),
   .story-sec .content-side p:nth-child(3) {
     display: none;
   }

   .tc-left h3,
   .tcr-01 h3,
   .tcr-02 h3 {
     font-size: 30px;
   }

   .tc-left h5 {
     font-size: 26px;
   }

   .tcr-01 img {
     max-width: 160px;
   }

   .tcr-01 .cr-box {
     left: -30px;
   }

   .tcr-01 {
     padding: 0 0 0 44%;
   }

   .tcr-02 span b {
     font-size: 30px;
   }
   .item.slick-slide.slick-center {
    background-size: 60% !important;
}

.o-cakes .sec-head p {
  font-size: 16px;
}

.o-cakes {
  padding: 40px 0; 
}

.oc-content p {
  max-width: 100%; 
}
 }

 @media only screen and (max-width : 480px) {}