@import url("https://fonts.googleapis.com/css2?family=Courgette&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alice&display=swap");

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

:root {
   --primary-font: "Courgette", cursive;
   --secondary-font: "Alice", serif;

   --primary-color: #FB1697;
   --secondary-color: #fbe7c6;
   --tertiary-color: #D130F4;
   --fourth-color: #0e1515;

   --white: #f5f5f5;
   --black: #111;

   --outer-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   --inner-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

   --outer-border-radius: 13px;
   --inner-border-radius: 7px;
}

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

body {
   width: 100%;
   overflow-x: hidden !important;
   color: var(--black);
   background: #f5f0ef;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--primary-font);
   font-weight: 400;
   font-style: normal;
   color: var(--fourth-color);
}

h1 {
   font-size: clamp(28px, 3vw, 35px);
}

h2 {
   font-size: clamp(29.4px, 3.5vw, 47px);
}

h3 {
   font-size: clamp(20.92px, 2vw, 25.88px);
}

h4 {
   font-size: clamp(14.34px, 1.75vw, 21.5px);
}

h5 {
   font-size: clamp(11.47px, 1.5vw, 17.2px);
}

h6 {
   font-size: clamp(9.18px, 1vw, 13.8px);
}

p,
li,
a,
span,
div {
   font-family: var(--secondary-font);
   font-weight: 500;
   font-style: normal;
   color: inherit;
   font-size: clamp(17px, 1.34vw, 18px);
}

ul {
   list-style-type: none;
}

a:hover {
   color: var(--primary-color);
}

/* ==============================================
               custom Classes
============================================== */
.pfs-1 {
   font-size: clamp(13px, 1.25vw, 16px);
}

.pfs-2 {
   font-size: clamp(20px, 2vw, 22px);
}

.btn-1 {
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s linear;
   border-radius: 30px;
   border: 1px solid #eb80a7;
   padding: 8px 23px;
   background: none;
}

.btn-1>svg {
   margin-left: 5px;
   transition: all 0.3s ease-in;
}

.btn-1:hover>svg {
   font-size: 1.2em;
   transform: translateX(6px);
}

.btn-1:hover {
   box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.175);
   transform: translateY(-3px);
}

.sec-padding {
   padding: 70px 0;
}

.sec-title {
   line-height: 65px;
}


.sec-title span {
   font-family: inherit;
   color: var(--primary-color);
   font-size: inherit;
}

.image-wrapper {
   width: 100%;
   height: 100%;
   position: relative;
}

.image-wrapper img.cover {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.image-wrapper img.contain {
   width: 100%;
}

.background-cover {
   background-size: cover !important;
   background-position: center !important;
   background-repeat: no-repeat !important;
}

/* .content.background-overlay-2 p {
   font-weight: 500;
} */

.background-overlay,
.background-overlay-2 {
   position: relative;
   overflow: hidden;
}

.background-overlay::before,
.background-overlay-2::before {
   z-index: -1;
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
   background: radial-gradient(at center, #0003, #0004);
}

.background-overlay-2::before {
   background: linear-gradient(to bottom, #fff8, #fff3);
   /* background: linear-gradient(to bottom, #fff8 50%, #0000) */
}

/* .background-overlay>div {
   position: relative;
   z-index: 3;
} */

.background-contain {
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.justify-content-flex-end {
   justify-content: flex-end;
}

/* ==============================================
         css for the responsive part 
============================================== */
.video-icon {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--fourth-color);
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 5px;
}

.video-icon::after {
   content: "";
   width: 100%;
   height: 100%;
   clip-path: polygon(75% 50%, 33% 25%, 33% 75%);
   background: var(--white);
}

/* ==============================================
         css for the header section
============================================== */

/* css for the hamburget  */
.hamburger {
   display: none;
}

.hamburger {
   cursor: pointer;
   border: 0.5px solid #fff9;
   border-radius: 5px;
}

.hamburger svg {
   height: 2.8em;
   transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
   fill: none;
   stroke: var(--primary-color);
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 3;
   transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
   stroke-dasharray: 12 63;
}

.hamburger.active svg {
   transform: rotate(-45deg);
}

.hamburger.active svg .line-top-bottom {
   stroke-dasharray: 20 300;
   stroke-dashoffset: -32.42;
}

header {
   width: 100%;
   background: rgba(255, 255, 255, 0.7);
   position: fixed;
   top: 0;
   left: 0px;
   padding: 5px 20px;
   z-index: 99;
   backdrop-filter: blur(10px);
}

header .logo {
   /* width: 150px; */
   padding: 15px 0px;
   width: 400px;
   /* height: 60px; */
   /* border: 1px solid black; */
   /* background: gray; */
}

header .nav-links {
   margin: 0px;
   padding-left: 0px;
}

header li {
   margin: 5px;
}

header li a {
   font-weight: 600;
   display: block;
   padding: 5px 10px;
}

header .btn-1 {
   border: 2px solid var(--primary-color);
   box-shadow: 0px 0px 15px rgba(224, 161, 208, 0.515);
   font-weight: 600;
}

header .btn-1:hover {
   transform: none;
}

.nav-links .has-sub {
   position: relative;
}

header .w-icon {
   color: rgb(29, 205, 29);
}

.nav-links .has-sub::after {
   content: "";
   width: 13px;
   height: 15px;
   background: black;
   clip-path: polygon(50% 75%, 0 25%, 100% 25%);
   position: absolute;
   font-size: 20px;
   font-weight: 600;
   top: 55%;
   right: -6px;
   transform: translate(0%, -50%);
}

.has-sub .sub-list {
   position: absolute;
   width: auto;
   background: white;
   padding: 0px;
   top: 110%;
   transition: all 0.3s ease-in-out;
   max-height: 0px;
   overflow: hidden;

}

.sub-list li a {
   padding: 5px 10px;
   display: block;
   white-space: nowrap;
}

.has-sub:hover .sub-list {
   max-height: 350px;
}

.sub-list li:hover {
   background: #f3f3f3;
}

@media only screen and (max-width:1200px) {
   .nav-links {
      width: 100%;
      position: fixed;
      flex-direction: column;
      background: white;
      left: 0;
      z-index: -20;
      top: 75px;
      max-height: 0px;
      overflow: hidden;
   }

   .nav-links li a {
      text-align: center;
      border-bottom: 1px solid #0004;
   }

   .nav-links .has-sub {
      position: relative;
   }

   .nav-links li a:hover {
      background: #eee;
   }

   .nav-links.active {
      max-height: 100vh;
   }

   .nav-links .sub-list {
      position: relative;
   }

   .nav-links .has-sub::after {
      top: 10px;
      right: 20px;
   }
}

@media only screen and (max-width:620px) {
   header .logo {
      width: 250px;
   }

   .nav-links {
      top: 60px;
   }
}

/* ==============================================
         css for the footer section
============================================== */
footer {
   /* background: #F7B9D9; */
   background: #CD61EA80;
   color: black;
   border-top-left-radius: 80px;
   border-top-right-radius: 80px;
}

footer .logo {
   width: min(340px, 100%);
   /* background: rgba(255, 255, 255, 0.661); */
}

footer p {
   color: black;
}

footer h4 {
   color: black;
}

footer ul {
   padding-left: 5px;
}

footer ul li {
   margin-top: 10px !important;
}

footer h4 {
   font-size: 23px;
}

/* ==============================================
         css for contact-form
============================================== */
.contact-section .contact-info {
   display: flex;
   margin-top: 15px;
}

.contact-section .contact-info p {
   margin-bottom: 4px;
}

/* .contact-section .contact-info p a {
	font-weight: 600;
} */
.contact-section .contact-info i {
   font-size: 30px;
   margin-right: 20px;
}

.contact-info h3 {
   padding-bottom: 5px;
   text-decoration: underline;
}

.contact-form {
   /* background: yellow; */
   /* width: min(90%, 500px); */
   margin: auto;
   padding: 30px;
   background: rgb(255, 255, 255);
   border-radius: 30px;
   /* backdrop-filter: blur(10px); */
   /* background: white; */
}

.contact-form .btn-1 {
   background: var(--primary-color);
}

.contact-form input,
.contact-form textarea {
   display: block;
   margin: auto;
   width: 100%;
   margin-top: 15px;
   padding: 6px 8px;
   border-radius: 15px;
   border: 1px solid var(--primary-color);
   outline: none;
}

.map {
   width: 100%;
   height: 300px;
}

.map iframe {
   width: 100%;
   height: 350px;
   border-radius: 40px;
}

/* css for the breadcrumb  */
.breadcrumb {
   width: 100%;
   height: 400px;
   position: relative;
}

.breadcrumb:after {
   content: "";
   width: 100%;
   height: 10px;
   bottom: 0px;
   right: 0px;
   position: absolute;
   background-image: url("/images/banner-frame.png");
}

.breadcrumb h2 {
   color: white;
}

.breadcrumb>div a,
.breadcrumb>div p {
   font-weight: 600;
   font-size: 20px;
   color: white;
}

/* ==============================================
         css for thesocial media
============================================== */
.social-media-icons {
   position: fixed;
   left: -10px;
   bottom: 30px;
   z-index: 199;
}

.social-media-icons li {
   margin-top: 10px;
}

.social-media-icons li img {
   width: 36px;
}

/* .social-media-icons li img:hover {
} */

/* ==============================================
         css for the responsive part 
============================================== */

@media (max-width: 1200px) {
   .sec-padding {
      padding: 60px 0;
   }

   .sec-title {
      line-height: 45px;
   }

   .portfolio-section {
      padding-bottom: 0px !important;
   }

}

@media (max-width: 762px) {
   .sec-padding {
      padding: 50px 0;
   }

   .social-media-icons {
      left: -30px;
      bottom: 10px;
   }

   .sec-title {
      line-height: 40px;
   }

   .container {
      padding: 0px 20px;
   }


   /* .contact-section {
      padding-top: 80px;
   } */
}

@media (max-width: 480px) {
   .sec-padding {
      padding: 30px 0;
   }
}

/* custom animation  */
@keyframes scaleFromZero {
   0% {
      transform: scale(0.5);
   }

   100% {
      transform: scale(1);
   }
}

.scale-in {
   animation: scaleFromZero 0.7s ease-out;
}


/* ==============================================
         css for the cta section
============================================== */
.cta-section .cta-box-wrapper {
   background: white;
   padding: 35px 35px;
   border-radius: 40px;
   box-shadow: 0px 0px 10px #0003;
}

.cta-section .btn-1 {
   padding: 13px 20px;
   border: 2px solid var(--primary-color);
}

.cta-section .btn-1 span {
   font-weight: 600;
}

/* ==============================================
         css for the portfoli section
============================================== */
.portfolio-section {
   margin-top: -80px;
}

.gallery-item {
   display: block;
   margin-top: 25px;
   border-radius: 12px;
   overflow: hidden;
   cursor: pointer;
}

.gallery-item img {
   transition: all 0.3s ease-in;
}

.gallery-item:hover img {
   transform: scale(1.2);
   transform-origin: center center;
}

.s-height {
   height: 230px;
}

.m-height {
   height: 320px;
}

.l-height {
   height: 380px;
}

.popup {
   width: 100%;
   height: 100vh;
   position: fixed;
   top: 0;
   right: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 88;
   background: #fff4;
   backdrop-filter: blur(3px);
}

.popup .video-container {
   width: 500px;
   height: 300px;
   position: relative;
}

.popup {
   display: none;
}

.popup.active {
   display: flex;
}

.popup .video-container .close-btn {
   position: absolute;
   top: 0;
   right: 0px;
   width: 35px;
   height: 35px;
   border-radius: 50%;
   background: white;
   cursor: pointer;
   transform: translate(50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
}

.popup .close-btn::after,
.popup .close-btn::before {
   content: '';
   position: absolute;
   width: 70%;
   border-radius: 3px;
   height: 4px;
   background: black;
   transform-origin: center;
}

.popup .close-btn::after {
   content: '';
   transform: rotate(45deg)
}

.popup .close-btn::before {
   content: '';
   transform: rotate(-45deg)
}


.popup .video-container iframe {
   width: 100%;
   height: 100%;
}