/*
Template Name: Wadeng - Wedding & Event Planner Website Template
Author: Pillarix
Author URI: https://wrapbootstrap.com/user/pillarix
Version: 1.0
*/
/*
-- Body
-- Custom Classes
-- Navbar
-- Sidebar Nav
-- Homepage
-- Services
-- Gallery
-- Stories
-- About
-- Contact 
-- Footer
*/

@import url('https://fonts.googleapis.com/css2?family=Gantari:wght@100;200;300;400;500;600;700;800&family=Yeseva+One&display=swap');

/* Body */
body {
	font-family: 'Gantari', sans-serif;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: 'Yeseva One', serif;
	color: #38091A !important;
}
a {
	text-decoration: none;
}
.wedding-nav  a.nav-link {
	padding-top: 50px !important;
	padding-bottom: 50px !important;
	color: #ffffff !important;
}

/* Custom Classes */
.our-team .img-fluid {
	height: 170px;
	width: 170px !important;
	object-fit: cover;
}

.form-control, .form-select {
	box-shadow: none !important;
}
.btn-primary {
	background-color: #FE5792 !important;
	border-color: #FE5792 !important;
	color: #ffffff;
}
.btn-primary:hover,
.btn-outline-primary:hover {
    background-color: #ff3c81 !important;
    border-color: #ff3c81 !important;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(255, 60, 129, 0.4) !important;
}

.btn-outline-primary{
	border-color: #FE5792 !important;
	color: #FE5792;
}
.bg-primary {
	background-color: #fe5792 !important;
}
.bg-light {
	background-color: #FBEBF2 !important;
}
.text-primary {
	color: #FE5792 !important;
}
.link-primary {
	color: #FE5792 !important;
}
.link-primary:hover {
	color: #fe5792 !important;
}
.icon-sm {
	height: 35px;
	width: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mt-n4 {
	margin-top: -4rem;
}
.hover\:bg-primary:hover {
	background-color: #fe5792 !important;
	border-color: #fe5792 !important;
}
.hover\:text-white:hover {
	color: #ffffff !important;
}


/* Navbar */
.wedding-nav.fixed-top {
	background: #FE5792 !important;
}
.wedding-nav.fixed-top .text-primary {
	color: #000 !important;
}
.wedding-nav.fixed-top .text-center h5, .wedding-nav.fixed-top .text-center small {
	display: none;
}
.wedding-nav.fixed-top a.nav-link {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}
.coverbg {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 1100px; /* fixed visible height */
  overflow: hidden;
  z-index: -1000;
}

.moveImage {
  position: absolute; /* <-- this is key! */
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 1200px; /* your tall image */
  object-fit: cover;
  filter: brightness(40%);
  animation: moveUpDown 30s ease-in-out infinite alternate;
  z-index: -1;
}
.movImage {
  position: absolute; /* <-- this is key! */
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 2500px; /* your tall image */
  object-fit: cover;
  /* animation: mveUpDown 30s ease-in-out infinite alternate; */
  z-index: -1;
}
.moImage {
  position: absolute; /* <-- this is key! */
  top: -300px;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 500px; /* your tall image */
  object-fit: cover;
  filter: brightness(40%);
  
  z-index: -1;
}
@keyframes moveUpDown {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-1150px); } /* adjust based on image height */
}

@keyframes mveUpDown {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-650px); } /* adjust based on image height */
}

.coverbg .content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  padding: 100px 20px;
}

.social-links a:hover {
	border-color: #fe5792 !important;
	color: #fe5792 !important;
}
#loading, #zoom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000; /* or your brand color */
  z-index: 9999;
  justify-content: center;
  align-items: center;
  display: flex;
}


/* Sidebar Nav */
.sidebar-nav .navbar-nav .nav-link {
	color: #fe5792;
}
.sidebar-nav .navbar-nav .nav-link:hover {
	color: #000;
}
.sidebar-nav .navbar-nav .nav-link.active {
	color: #000;
}
.gallery-item {
    overflow: hidden;
}

.gallery-media {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    margin: 10px;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-media:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(255, 60, 129, 0.4);
}

/* From Uiverse.io by adamgiebl */ 
button {
  font-family: inherit;
  font-size: 20px;
  background: #ec407a;
  color: white;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-content: center;
  align-items: center;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}

button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

button:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

button:hover span {
  transform: translateX(5em);
}

button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}


/* Homepage */
.bg-homepage {
	/* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-homepage.jpg); */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.start-40 {
	left: 40%;
}
.video-container {
      width: 10rem;         /* Set your square size here */
      height: 8rem;
      overflow: hidden;
      position: relative;
    }

    .video-container video {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-53%, -50%);
      min-width: 100%;
      min-height: 100%;
    }
	.card-img-custom {
    width: 100%;
    height: 280px; /* Fixed height for rectangle shape */
    object-fit: cover; /* Keeps the image neatly scaled */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Soft shadow around image */
    border: 1px solid #ddd; /* Light border for definition */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-img-custom:hover {
    transform: scale(1.03); /* Slight zoom effect */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); /* Deeper shadow on hover */
    cursor: pointer;
}

/* Services */
.bg-services {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-services.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Gallery */
.bg-gallery {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-gallery.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Stories */
.bg-stories {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-stories.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* About */
.bg-about {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-about.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Contact */
.bg-contact {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg-contact.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
 .contact-section {
		
        background: linear-gradient(135deg, #ffd6e7 0%, #ffe3f1 100%);
        position: relative;
        overflow: hidden;
    }

    .left-logo {
        position: absolute;
        top: 0px;
        left: -10px;
        z-index: 10;
        width: 25%;
		opacity: 50%;
    }

    .right-bg-logo {
        position: absolute;
        bottom: 0;
        right: 0;
        max-width: 400px;
        opacity: 0.1;
        z-index: 0;
    }

    .contact-form-container {
		margin-top: 5rem;
        position: relative;
        z-index: 2;
        padding: 60px 20px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .form-control,
    .form-select {
        border: none;
        border-bottom: 2px solid #f48fb1;
        border-radius: 0;
        background: transparent;
        transition: border-color 0.3s ease;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: #ec407a;
        box-shadow: none;
    }

    .btn-pink {
        background-color: #ec407a;
        color: white;
        border-radius: 30px;
        transition: all 0.3s ease;
    }

    .btn-pink:hover {
        background-color: #f00d60;
        transform: scale(1.05);
		
    }

/* Footer */
.bg-footer {
	background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/bg-footer.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
footer .top-footer a:hover,
footer .bottom-footer a:hover {
	color: #fe5792 !important;
}
footer .social-links a:hover {
	border-color: #fe5792 !important;
	color: #fe5792 !important;
}

   .contact-us-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 9999;
      background-color: #007BFF;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      transition: background-color 0.3s ease;
    }

    .contact-us-button:hover {
      background-color: #0056b3;
    }
     .team-img-wrapper {
    width: 380px;
    height: 380px;
    overflow: hidden;
    border-radius: 12px;                 /* slight rounding, remove if you want hard‑edge */
  }
  .team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
  }

  /* subtle “pop‑out” on hover */
  .team-card {
    border-radius: 10px;
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,.2);
  }
  .team-card:hover .team-img {
    transform: scale(1.05);
  }