html {
    scroll-behavior: smooth;
}


.bo{
border: 2px solid black;
}


:root {

  --color-primary-50:  #fdf2f7;
  --color-primary-100: #f9e5ef;
  --color-primary-200: #f3cadd;
  --color-primary-300: #e99ec0;
  --color-primary-400: #d96597;
  --color-primary-500: #9b205c; /* Brand */
  --color-primary-600: #861b50;
  --color-primary-700: #6d1642;
  --color-primary-800: #541134;
  --color-primary-900: #390b23;
  --color-primary-950: #220614;

  --color-secondary-50:  #eef1fd;
  --color-secondary-100: #dfe5fb;
  --color-secondary-200: #c5cff7;
  --color-secondary-300: #9eaff0;
  --color-secondary-400: #7488e4;
  --color-secondary-500: #3f51b5; /* Brand */
  --color-secondary-600: #36469d;
  --color-secondary-700: #2d3a82;
  --color-secondary-800: #232d67;
  --color-secondary-900: #181f47;
  --color-secondary-950: #0d1025;
  
  --color-accent-500: #026CB1;

  --color-siteblack: #333333;
  --color-siteblack-modal : #333333E6;
  --color-sitewhite: #f2f2f2;

  --color-sitegrey-primary: #999999;
  --color-sitegrey-secondary: #e0e0e0;
  --color-sitegrey-tertiary: #d9d9d9;

  --color-success-primary: #329A39;
  --color-success-primary-hover: #93CD92;

  --color-danger-primary: #9f0712;
  --color-danger-primary-hover: #E86E5E;

  --gradient-line :linear-gradient(90deg,transparent,#b72151 30%,#b72151 50%,#b72151 70%,transparent);
  --gradient-line-white :linear-gradient(90deg,transparent,#f2f2f2 30%,#f2f2f2 50%,#f2f2f2 70%,transparent);
  --gradient-primary:  linear-gradient(0deg, #b72151, #480e5a);

  --btn-size: 60px;
}

.bg-gradient-primary {
  background: var(--gradient-primary);
}



.bg-gradient-line {
  background: var(--gradient-line);
}

.bg-gradient-line-white {
  background: var(--gradient-line-white);
}


.font-primary {
  font-family: "Raleway", sans-serif;
}

.font-secondary {
  font-family: "Raleway", sans-serif;
}


/* Custom Scrollbar starts ------- */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(0deg, #b72151, #480e5a);
    border-radius: 999px;
    border: 2px solid #f3f4f6;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(0deg, #b721509a, #480e5a9a);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Custom Scrollbar ends ------- */

/* container */
.container {
  padding: 0rem 4rem 0rem 4rem  ;
  margin: 0 auto;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    padding: 0rem 4rem 0rem 4rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .container {
    padding: 0rem 4rem 0rem 4rem  ;
  }
}



/* nav-bar container */
.nav-bar-container {
  padding: 0rem 4rem 0rem 4rem  ;
  margin: 0 auto;
  max-width: 1536px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .nav-bar-container {
    padding: 0rem 4rem 0rem 4rem  ;
  }

}

@media screen and (min-width: 425px) and (max-width: 768px) {
  .nav-bar-container {
    padding: 0rem 4rem 0rem 4rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 425px) {
  .nav-bar-container {
    padding: 0rem 2rem 0rem 2rem  ;
  }
}

/* section-container */
.section-container {
  padding: 4rem 4rem 4rem 4rem  ;
  margin: 0 auto;
  max-width: 1536px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .section-container {
    padding: 2rem 2rem 2rem 2rem  ;
  }
}

@media screen and (min-width: 425px) and (max-width: 768px) {
  .section-container {
    padding: 4rem 1rem 4rem 1rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 425px) {
  .section-container {
    padding: 4rem 1.5rem 4rem 2rem  ;
  }
}

/* title-container */
.title-container {
  padding: 1rem 4rem 1rem 4rem  ;
  margin: 0 auto;
  max-width: 1536px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .title-container {
    padding: 1rem 2rem 1rem 2rem  ;
  }
}

@media screen and (min-width: 425px) and (max-width: 768px) {
  .title-container {
    padding: 2rem 1rem 2rem 1rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 425px) {
  .title-container {
    padding: 2rem 1.5rem 2rem 2rem  ;
  }
}





/* user selection */
::selection {
  background-color: var(--color-primary-500);
  color: white;
}

::-moz-selection {
  background-color: var(--color-primary-500);
  color: white;
}




/* cursor styling starts */

@media screen and (min-width: 1024px) {
  .cursor{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--color-primary-500);
    opacity: 1;
    position:fixed;
    pointer-events:none;
    transform:translate(-50%,-50%);
    transition:width .2s,height .2s,background .2s;
    z-index: 999;
  }
  .cursor.active{
    width:60px;
    height:60px;
    opacity: 0.2;
  }
}

/* cursor style ends */


/* scroll to top */

#scrollTopBtn {
    position: fixed;
    right: 25px;
    bottom: 25px;

    width: var(--btn-size);;
    height: var(--btn-size);;

    border: none;
    border-radius: 50%;
    background: var(--color-sitewhite);

    box-shadow: 0 8px 25px rgba(0,0,0,.15);

    cursor: pointer;
    z-index: 999;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);

    transition: .3s;
}

#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollTopBtn svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}

.progress-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 4;
}

.progress-ring {
    fill: none;
    stroke: var(--color-primary-500);
    stroke-width: 4;
    stroke-linecap: round;

    stroke-dasharray: 163.36;
    stroke-dashoffset: 163.36;

    transition: stroke-dashoffset .15s linear;
}

#scrollTopBtn span {
    position: relative;
    font-size: 22px;
    font-weight: bold;
    color: var(--color-primary-500);
}

/* scroll to top ends */


/* scrollbar  */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE & Edge */
    scrollbar-width: none;     /* Firefox */
}






/* menu btn starts*/


#menuBtn {
  position: relative;
  width: 28px;
  height: 24px;
}

.line {
  position: absolute;


  height: 2px;
  transition: all 0.3s ease;
}

.line:nth-child(1) { 
  
    top: 0;
    left: 0;
    width: 28px;
}
.line:nth-child(2) { top: 10px; right: -5;   width: 20px; }
.line:nth-child(3) { top: 20px;   left: 0;   width: 28px; }

#menuBtn.active .line:nth-child(1),
#menuBtn.active .line:nth-child(3) {
  top: 10px; /* move both to the middle */
}

#menuBtn.active .line:nth-child(1) {
  transform: rotate(45deg);
}

#menuBtn.active .line:nth-child(2) {
  opacity: 0;
  right: 0;
  width: 28px; 
}

#menuBtn.active .line:nth-child(3) {
  transform: rotate(-45deg);
}



#mobileMenu.active {
  transform: translateX(0);
}

  
#overlay.active {
    opacity: 1;
    visibility: visible;
}

#mobileMenu.active {
    transform: translateX(0);
}

/* menu btn ends*/






/* testimonail */

.testimonial-slide{

    display:none;

    opacity:0;
    transform:translateY(20px);

    transition:.5s;
}

.testimonial-slide.active{

    display:block;

    animation:fadeSlide .5s ease forwards;
}

@keyframes fadeSlide{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.testimonial-dot{

    width:12px;
    height:12px;

    border-radius:999px;

    background:var(--color-sitegrey-tertiary);

    transition:.3s;

    cursor:pointer;
}

.testimonial-dot.active{

    width:34px;

    background:var(--color-primary-500);
}

#testimonial-slider{

    touch-action: pan-y;
    user-select: none;
    cursor: grab;

}

#testimonial-slider:active{

    cursor: grabbing;

}

/* testimonail ends */