/* 
Table of contents

    01. Google font
    02. CSS color variable
    03. Reset
    04. Typography
    05. General
    06. Background and border
    07. Width
    08. Height
    09. Loop
    10. Header
    11. Page title
    12. Layout
    13. Elements
    14. Blog
    15. Portfolio
    16. Shop
    17. Footer

*/
/* ===================================
    01. Google font
====================================== */

@import url('https://fonts.googleapis.com/css2?family=Jacques+Francois&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Italianno&family=Jacques+Francois&display=swap');


:root {
    --alt-font: "Italianno", cursive;
    --primary-font: "Jacques Francois", serif;
}

/* ===================================
    02. CSS color variable
====================================== */
:root {
    --primary-color: #BC004F;
    --light-primary-color: #bc004eec;
    --light-pink: rgba(251, 39, 154, 0.06);
    --pink: #FB279A;
    --hover-pink: #e71388;
    --base-color: #00468e;
    --white: #ffffff;
    --grey-box: #F6F6F6;
    --black: #000000;
    --red: #dc3131;
    --light-red: #feedec;
    --green: #2ebb79;
    --crusoe-green: #d39121;
    --yellow: #ffea23;
    --dark-gray: #232323;
    --medium-gray: #626161;
    --extra-medium-gray: #e4e4e4;
    --light-gray: #d6d6d6;
    --very-light-gray: #f7f7f7;
    --light-medium-gray: #eaeaeb;
    --charcoal-blue: #202329;
    --slate-blue: #262b35;
    --medium-slate-blue: #374162;
    --extra-medium-slate-blue: #23262d;
    --dark-slate-blue: #1f232c;
    --extra-dark-slate-blue: #121418;
    --extra-very-slate-blue: #161620;
    --tussock-yellow: #BC8947;
    --aluminium-grey: #80858F;
    --solitude-blue: #f0f4fd;
    --golden-yellow: #fd961e;
    --selago: #eaedff;
    --white-ice: #d8f5ef;
    --cornflower-blue: #445fed;
    --jade: #00AF6B;
    --orange: #ef991f;
    --majorelle-blue: #724ade;
    --light-majorelle-blue: #f2edfe;
    --spring-wood: #f9f6f3;
    --tropical-blue: #1ea3b1;
    --camarone: #20642b;
    --seal-brown: #0e0708;
    --Wasabi: #8ea63a;
    --gradient: linear-gradient(180deg, var(--primary-color), var(--pink));
    --background: radial-gradient(934px at 6% 39.5%, rgb(255, 35, 90) 0.2%, rgb(255, 35, 144) 54.8%, rgb(250, 99, 160) 93.4%);
}

.alt-font {
    font-family: var(--alt-font);
    font-weight: 400;
    font-style: normal;
    font-size:2.5rem;
    color:var(--primary-color);
}

.primary-font {
    font-family: var(--primary-font) !important;
}

.primary-color {
    color: var(--primary-color) !important;
}

.primarybg {
    background:var(--background);
    color: #fff;
}

* {
    padding: 0;
    margin: 0;
    font-family: var(--primary-font);
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--primary-font);
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    color: var(--medium-gray);
    -moz-osx-font-smoothing: grayscale;
    word-break: break-word;
    -webkit-font-smoothing: antialiased;
}



img {
    max-width: 100%;
    height: auto;
}

ul li {
    list-style: none;
}

a {
    color: var(--medium-gray);
    -webkit-transition: 0.3s;
    transition: 0.3s;
    text-decoration: none;
}

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

p {
    margin-bottom: 0;
    font-size: 16px;
}

header {
    position: sticky;
    top: 0;
    background-color: var(--white);
    z-index: 1000;
    transition: box-shadow 0.3s ease;
}

/* Shadow effect when scrolled */
.header-shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Shadow for the header */
}

/* navigation */
.navbar-nav .nav-link.active {
    position: relative;
    font-weight: 500;
    color: var(--primary-color);
    transition: color 0.3s ease, font-weight 0.3s ease; /* Smooth transition */
}

.nav-link {
    position: relative;
    transition: color 0.3s ease, font-weight 0.3s ease;
}

.navbar-nav .nav-link.active::after {
    content: "";
    display: block;
    width: 70%;
    height: 2px;
    background: var(--primary-color);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px;
    transition: width 0.3s ease; /* Smooth underline animation */
}

.navbar-nav .nav-link::after {
    content: "";
    display: block;
    width: 0; /* Start with no underline */
    height: 2px;
    background: var(--primary-color);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px;
    transition: width 0.3s ease; /* Transition for smooth effect */
}

.navbar-nav .nav-link:hover::after {
    width: 70%; /* On hover, show the underline */
}

.login-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.form-box {
    /* width: 100%; */
    background: var(--primary-color);
    padding: 2.9rem;
    color: var(--white);
}
/* STYLE C */

.checkbox.style-c {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .checkbox.style-c input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  .checkbox.style-c input:checked ~ .checkbox__checkmark {
    background-color: var(--pink);
  }
  .checkbox.style-c input:checked ~ .checkbox__checkmark:after {
    opacity: 1;
  }
  .checkbox.style-c:hover input ~ .checkbox__checkmark {
    background-color: #eee;
  }
  .checkbox.style-c:hover input:checked ~ .checkbox__checkmark {
    background-color: var(--pink);
  }
  .checkbox.style-c .checkbox__checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    transition: background-color 0.25s ease;
    border-radius: 4px;
  }
  .checkbox.style-c .checkbox__checkmark:after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .checkbox.style-c .checkbox__body {
    color: #fff;
    line-height: 1.4;
    font-size: 14px;
  }


.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 7px 25px;
}

.btn-outline-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.sub-h2 {
    font-family: var(--alt-font);
    font-size: 2.5em;
}

.first-section {
    height: 60vh;
}

.carousel-item img {
    object-fit: cover;
}

.form-control {
    font-family:poppins;
    font-weight: 400;
    color: var(--medium-gray);
    border-radius: 5px;
    border: none;
    height: 3rem;
    padding: 5px 10px;
    font-size: 16px;
    border: 1px solid lightgrey;
}

.textarea {
    font-weight: 400;
    color: var(--medium-gray);
    border-radius: 5px;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
    border: 1px solid lightgrey;
}

.form-style-1 {
    padding-top: 1rem;
}

.form-group {
    margin: 2rem 0;
    margin-bottom: 0;
}

.form-control::-webkit-input-placeholder {
    color: var(--light-gray);
}

.form-control:-moz-placeholder {
    color: var(--light-gray);
}

.form-control::-moz-placeholder {
    color: var(--light-gray);
}

.form-control:-ms-input-placeholder {
    color: var(--light-gray);
}

.form-control option:hover {
    background-color: var(--primary-color) !important;
}

#exampleFormControlSelect2 option:hover {
    background-color: #FFC0CB;
    /* pink color */
}

.btn-primary {
    background-color: var(--pink);
    border: none;
    width: 100%;
    border-radius: 5px;
    height: 45px;
}

.btn-primary:hover {
    background-color: var(--hover-pink);
}
.confirmBox{
    font-size: .8rem;
}

/*
  =========================================

    about us css start from here

  =========================================
  */

.about-section {
    padding: 60px 0;
    /* Add padding for the section */
}

.about-image {
    width: 100%;
    /* Maintain aspect ratio */
}

.about-content {
    text-align: center;
    /* Center-align the text */
}

.about-content h2 {
    font-size: 24px;
    /* Font size for the heading */
}

.about-content p {
    font-size: 16px;
    /* Font size for the content */
    margin-bottom: 20px;
    /* Space below the content */
}

/*
  =========================================

    Contact us css start from here

  =========================================
  */

.section-box {
  background-color: #f5f5ff;
}
.section-box .list-box {
  display: flex;
  margin-bottom: 35px;
}

.section-box {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 50px 0;
}

.section-box .box {
  box-shadow: 0 15px 15px -15px ;
}

.section-box .box {
  width: 90%;
  max-width: 300px;
  background-color: transparent;
  border: 1px solid var(--primary-color);
  color: black;
  padding: 25px 15px;
  border-radius: 10px 10px 10px 10px;
  position: relative;
  margin: 0 15px;
}

.section-box .box {
/*  border-top: 3px solid #1aa5e5;*/
}


.section-box .box .mini-title {
  color: rgb(0, 0, 0);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 18px;
}
.section-box .box .logo {
  width: 45px;
  border-radius: 50%;
}

.section-box .box .content {
  margin-top: 10px;
}
.section-box .box .big-title {
  color: rgb(0, 0, 0);
  font-size: 32px;
}
.section-box .box .text {
  color: rgb(0, 0, 0);
  font-size: 14px;
  margin: 10px 0;
}

.section-box .box .details {
  list-style: none;
  margin-top: 25px;
}
.section-box .box .details .detail {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.section-box .box .details svg {
  height: 25px;
  width: 25px;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-size: 10px;
}
.section-box .box .details .detail-name {
  margin-left: 15px;
  font-size: 12px;
  font-weight: 600;
  color: rgb(0, 0, 0);
}

.enrollnow-outer {
  text-align: center;
}
.enrollnow {
  background: var(--primary-color);
  color: #fff;
  padding: 5px 15px;
  font-size: 14px;
  border-radius: 50px;
  text-decoration: none;
}






/*
  =========================================

    Contact us css start from here

  =========================================
  */
.form-content{
    height: auto;
    padding: 20px 40px;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column;
}

.rounded-start {
    border-bottom-left-radius: 10px !important;
    border-top-left-radius: 10px !important;
}
.rounded-end {
    border-bottom-right-radius: 10px !important;
    border-top-right-radius: 10px !important;
}


.divider{
    border: .7px solid #e5e5e5;
    margin: 20px 0;
}

.btn-read-more {
    background-color: var(--pink);
    /* Button color */
    color: #fff;
    /* Text color */
    border: none;
    /* Remove border */
    padding: 10px 20px;
    /* Button padding */
    border-radius: 5px;
    /* Rounded corners */
}

.btn-read-more:hover {
    background-color: #e02d88;
    /* Darker button color on hover */
    text-decoration: none;
    /* Remove underline on hover */
    color: #fff;
}


.custom-background {
    background-color: var(--light-pink);
    padding: 20px;
}

.card {
    border: none;
    background-color: transparent;
    box-shadow: none;
}

.card-img-top {
    display: block;
    width: 100px;
    height: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.card-body {
    text-align: center;
}

.card-title {
    font-size: 30px;
    color: var(--primary-colors) !important;
}

.card-text {
    font-size: 18px;
}

/*
  =========================================

    app download css start from here

  =========================================
  */
.section-container {
    padding: 20px 0;
    /* Add padding for the section */
}

.heading {
    font-size: 50px;
    text-align: left;
    margin-bottom: 30px;
    line-height: 50px;
}

.app-icons {
    margin-bottom: 30px;
    /* Space below the icons */
}

.app-icons img {
    width: 150px;
    /* Fixed width for app icons */
    margin: 0 10px;
    /* Space between icons */
}

.content-image {
    max-width: 100%;
    /* Ensure the image fits within the column */
    height: auto;
    /* Maintain aspect ratio */
}

.content-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically */
    align-items: center;
    /* Center content horizontally */
    text-align: center;
    /* Center-align text */
}

.content-column p {
    text-align: justify;
    /* Justify text */
    font-size: 18px;
    /* Font size for the content */
    margin-bottom: 20px;
    /* Space below the content */
}


/*
  =========================================

    matrimonial profile css start from here

  =========================================
  */

/* .overlay-profile {
    background: linear-gradient(to top, rgba(217, 21, 103, 0.9), transparent 100%);
    padding: 15px;
} */
.snip *,
.snip *:before,
.snip *:after {
    box-sizing: border-box;
    transition: all 0.45s ease;
}

.snip {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 315px;
    min-width: 230px;
    font-family: "Source Sans Pro", sans-serif;
    color: #fff;
    font-size: 16px;
    margin: 10px;
    text-align: left;
    transform: translateZ(0);
}

.snip:hover .snip__title,
.snip:hover .snip__btn,
.snip:hover .snip__link,
.snip:hover .snip__text {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.2s;
}


.snip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
    opacity: 1;
    transition: all 0.45s ease;
}

.snip::before {
    transform: skew(30deg) translateY(50%);
}

.snip::after {
    transform: skew(0deg) translateY(100%);
}


.snip:hover::after {
    transform: skew(0deg) translateY(50%);
    border-radius: 25px 25px 0 0;
}



.snip__image {
    backface-visibility: hidden;
    max-width: 100%;
    vertical-align: top;
}

.snip__figcaption {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1;
    bottom: 0;
    padding: 70% 20px 25px 20px;
    text-align: center;
}

.snip__title,
.snip__btn,
.snip__link,
.snip__text {
    margin: 0;
    opacity: 0;
    letter-spacing: 1px;
}

.snip__title {
    font-family: "Teko", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1em;
    text-transform: uppercase;
}

.snip__text {
    font-size: 0.9em;
}

.slick-slide {
    margin: 10px;
}

    .slick-slide img {
        width: 100%;
        border: 2px solid #fff;
        height: 350px !important;
        object-fit: cover;
        border-radius: 10px;
        object-position: top center;
        aspect-ratio: 4 / 5 !important;
    }

.wrapper .slick-dots li button:before {
    font-size: 20px;
    color: white;
}
.slick-dots li button:before {
    font-family: slick;
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: var(--primary-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
  =========================================

    Testimonial css start from here

  =========================================
  */


.testimonial-section {
    background: var(--light-pink);
    padding: 50px 0;

    display: flex;
    align-items: center;
    flex-direction: column;
}

.testimonial-container {
    background-color: var(--white);
    color: #000000;
    border-radius: 5px;
    margin: 20px auto;
    padding: 50px 80px;
    max-width: 768px;
    position: relative;
    z-index: 0;
    min-height: 400px;
}

.fa-quote {
    color: var(--primary-color);
    font-size: 28px;
    position: absolute;
    top: 70px;
}

.fa-quote-right {
    left: 40px;
}

.fa-quote-left {
    right: 40px;
}

.testimonial {
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 30px;
}

.user {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user .user-image {
    border-radius: 50%;
    border: 3px solid #FFD369;
    height: 75px;
    width: 75px;
    object-fit: cover;
}

.user .user-details {
    margin-left: 10px;
}

.user .username {
    margin: 0;
}

.user .role {
    font-weight: normal;
    margin: 10px 0;
}

.progress-bar {
    background-color: var(--primary-color) !important;
    height: 4px;
    width: 100%;
    margin-bottom: 40px;
    animation: grow 10s linear infinite;
    transform-origin: left;
}

@keyframes grow {
    0% {
        transform: scaleX(0);
    }
}




@media(max-width: 768px) {
    .testimonial-container {
        padding: 20px 30px;
    }

    .fa-quote {
        display: none;
    }
}

/*
  =========================================

    common section css start from here

  =========================================
  */


  .breadcrumb-header-heading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--background);
    color: var(--white);
    height: 200px;
    margin-bottom: 20px;
  }


/*
  =========================================

    about us page css start from here

  =========================================
  */







/*
  =========================================

    Footer css start from here

  =========================================
  */


footer {
    /* background-color: var(--primary-color); */
    background: var(--primary-color);
    padding: 3rem;
    color: var(--white);
    text-align: center;
}

.footer-container {
    max-width: 768px;
    margin: auto;
}

.footer-container a {
    color: var(--white);
}


.bar {
  width: 100%;
  height: 70px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(51, 51, 51, 0.4);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-direction: row;
  padding: 0 15px;
}

.els-wrap {
  display: flex;
  align-items: center;
  background-size: 1200px;
  background-position: 100% 50%;
  color: #333333;
  padding: 0 9px;
  border-radius: 100px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: width 200ms, padding 200ms, border-radius 300ms, background-position 900ms;
  transition-timing-function: ease-in-out;
}
.els-wrap:hover {
  background-position: 0 50%;
  padding: 3px 13px;
  border-radius: 50px;
}
.els-wrap:hover .icon {
  font-size: 27px;
  /*margin-right: 10px;*/
}
.els-wrap:hover .label {
  opacity: 1;
}
.els-wrap:focus {
  background-position: 0 50%;
  padding: 3px 13px;
  border-radius: 50px;
}
.els-wrap:focus .icon {
  font-size: 27px;
  margin-right: 10px;
}
.els-wrap:focus .label {
  opacity: 1;
}
.els-wrap .icon {
    font-size: 1rem;
    margin-right: 10px;
    position: relative;
    z-index: 2;
    transition: none !important; /* Transition completely remove */
}
.MobileHeaderLogin .icon {
    font-size: 1rem;
    margin-right: 10px;
    position: relative;
    z-index: 2;
    color: #e82a93 !important;
}
span.header_login {
    margin-left: 5px;
}
.els-wrap .label {
  font-weight: 600;
  letter-spacing: 0.15em;
  opacity: 0;
  position: relative;
  z-index: 2;
  font-size: 11px;
  transition: opacity 400ms;
  transition-delay: 130ms;
  transition-timing-function: ease-out;
}

.el-0 {
  background-image: radial-gradient(circle at right, #fff, rgb(216,216,255));
}

.el-1 {
  background-image: radial-gradient(circle at right, #fff, rgb(216,216,255));
}

.el-2 {
  background-image: radial-gradient(circle at right, #fff, rgb(255,216,216));
}

.el-3 {
  background-image: radial-gradient(circle at right, #fff, rgb(255,236,216));
}

.el-4 {
  background-image: radial-gradient(circle at right, #fff, rgb(255,255,216));
}

.el-0:hover {
  width: 82.5px;
}

.el-0:focus {
  width: 82.5px;
}

.el-1:hover {
  width: 82.5px;
}

.el-1:focus {
  width: 82.5px;
}

.el-2:hover {
  width: 72.6px;
}

.el-2:focus {
  width: 72.6px;
}

.el-3:hover {
  width: 66px;
}

.el-3:focus {
  width: 66px;
}

.el-4:hover {
  width: 87.45px;
}

.el-4:focus {
  width: 87.45px;
}