/*
Theme Name: Radefy
Theme URI: https://wordpress.org/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Theme Description
Version: 1.0
Text Domain: radefy

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  /* colors */
  --white: #fff;
  --black: #000;
  --primary-purple: #5400cf;
  --grey-dark: #5d5d5d;
  --grey-mid: #cdcdcd;
  --grey-light: #f3f3f3;
  --grey-bg: #f8f8f8;
  --grey-bg2: #f9f9f9;
  --red: #ff6767;
  --pink: #ff6767;
  --green: #4da572;
  --yellow: #e7af22;
  --purple-2: #4300a6;
  --black-2: #1e1e1e;
  --purple-bg-light: #f6f2fb;
  --cultured: #f5f2fa;
  --cultur: #f6f6f4;
  --raisinblack: #252525;
  --light-silver: #d9d9d9;
  --palelavender: #dfcafe;
  --white-100: #f6f6f4;
  --white-200: #f7f7f5;
  --rich-electricblue: #1191e0;
  --Lavender: #eee5fa;
  --Munsell: #0a95a4;
  --granitegray: #616161;

  /* why radefy slider home arrow */
  --shadow-1: 0px 0px 20px 0px #0000001a;
  --shadow-2: 4px 4px 10px 0 rgba(84, 0, 207, 0.25);
  --shadow-3: 0px 0px 20px 0px rgba(84, 0, 207, 0.25);

  /* banner home gradient */
  --grdnt-black-banner-home: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.2) 40.75%,
    rgba(0, 0, 0, 0) 100%
  );
  --grdnt-purple-light-dark: linear-gradient(
    104.04deg,
    #7644bf 0%,
    #4300a6 100%
  );
  --grdnt-purple-grey-border: linear-gradient(
    105.58deg,
    #b695e8 0%,
    #a295ba 100%
  );

  /* container:  */
  --container: 1440px;

  /* heading-font-sizes */
  --font-h1: 22px;
  --font-h2: 18px;
  --font-h3: 16px;
  --font-h4: 14px;
  --font-h5: 12px;
  --font-40: 40px;
  --font-30: 30px;
  --font-26: 26px;
  --font-28: 28px;
  --font-24: 24px;
  --inter: "Inter", sans-serif;

  /* headings home */
  --h1-main: clamp(2rem, 1.5813rem + 1.5764vw, 3rem);
  /* big 48px - 32px small */
  --h2-main: clamp(1.75rem, 1.2266rem + 1.9704vw, 3rem);
  /* big 48px - 28px small */

  --h1-branded: clamp(1.375rem, 0.8516rem + 1.9704vw, 2.625rem);
  /* big 42px - 22px small */
  --font-40-cs: clamp(1.75rem, -2.5752rem + 9.0226vw, 2.5rem);
  /* big 40px - 28px small */
  /* rounded-corners */
  --radius-22px: 22px;
  --radius-16px: 16px;
  --radius-12px: 12px;

  /* text-sizes */
  --text-10px: 10px;
  --text-11px: 11px;
  --text-12px: 12px;
  --text-13px: 13px;
  --text-14px: 14px;
  --text-15px: 15px;
  --text-16px: 16px;
  --text-17px: 17px;
  --text-18px: 18px;
  --text-19px: 19px;
  --text-20px: 20px;
  --text-21px: 21px;
  --text-22px: 22px;
  --text-32px: 32px;

  --text-52px: 52px;
  --text-60px: 60px;
  --text-82px: 82px;
  /* padding section */
  --p-50px: 50px;
  --p-100px: 100px;
  --p-0: 0px;

  /* paragraph-text-size */
  --para-16px: 16px;

  /* new added 11 july */
  --border-nav: #e5e5e5;
  --radius-10px: 10px;
  --radius-8px: 8px;
}

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

body {
  font-family: var(--inter);
  font-size: var(--para-16px);
  padding-top: 68px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--text-20px);
}

/* padding common classes */
.section-py-50 {
  padding-top: var(--p-50px);
  padding-bottom: var(--p-50px);
}

.section-pt-50 {
  padding-top: var(--p-50px);
}

.section-pb-50 {
  padding-bottom: var(--p-50px);
}

.section-py-100 {
  padding-top: var(--p-100px);
  padding-bottom: var(--p-100px);
}

.section-pt-100 {
  padding-top: var(--p-100px);
}

.section-pb-100 {
  padding-bottom: var(--p-100px);
}

.section-py-0 {
  padding-top: var(--p-0);
  padding-bottom: var(--p-0);
}

.section-pt-0 {
  padding-top: var(--p-0);
}

.section-pb-0 {
  padding-bottom: var(--p-0);
}

/* text-colors */
.text-primary-purple {
  color: var(--primary-purple);
}

.text-purple2 {
  color: var(--purple-2);
}

.text-white {
  color: var(--white);
}

.text-black {
  color: var(--black);
}

.text-red {
  color: var(--red);
}

.text-green {
  color: var(--green);
}

.text-grey-dark {
  color: var(--grey-dark);
}

.text-grey-mid {
  color: var(--grey-mid);
}

.text-grey-light {
  color: var(--grey-light);
}

/* bg colors */

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

.bg-purple2 {
  background-color: var(--purple-2);
}

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

.bg-white-100 {
  background-color: var(--white-100);
}

.bg-white-200 {
  background-color: var(--white-200);
}

.bg-black {
  background-color: var(--black);
}

.bg-red {
  background-color: var(--red);
}

.bg-green {
  background-color: var(--green);
}

.bg-grey-dark {
  background-color: var(--grey-dark);
}

.bg-grey-mid {
  background-color: var(--grey-mid);
}

.bg-grey-light {
  background-color: var(--grey-light);
}

/* text-align class */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* image calsses */

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

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

/* css khushbu starts */
.headerTop p {
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: -0.41px;
  color: var(--grey-dark);
  text-align: center;
  padding: 12px 0;
  background-color: var(--grey-bg2);
}

.headerMain {
  padding: 30px 0px;
}

/* Khushbu style*/

body.menu-open {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
  /* optional: disables scroll on touch devices */
}

/* width */
.scroll-design::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}

/* Track */
.scroll-design::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
.scroll-design::-webkit-scrollbar-thumb {
  background: var(--grey-mid);
}

.nav-bar1,
.nav-bar2,
.nav-bar3 {
  width: 27px;
  height: 3px;
  background-color: var(--grey-dark);
  margin: 6px 0;
  transition: 0.4s;
}

.change-nav .nav-bar1 {
  transform: translate(0, 7px) rotate(-45deg);
  -webkit-transform: translate(0, 7px) rotate(-45deg);
  -moz-transform: translate(0, 7px) rotate(-45deg);
  -ms-transform: translate(0, 7px) rotate(-45deg);
  -o-transform: translate(0, 7px) rotate(-45deg);
}

.change-nav .nav-bar2 {
  opacity: 0;
}

.change-nav .nav-bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

.container-bar-nav {
  display: inline-block;
  cursor: pointer;
}

header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  transition: transform 0.3s ease;
}

header.hide-header {
  transform: translateY(-100%);
}

.headerTop p {
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: -0.41px;
  color: var(--grey-dark);
  text-align: center;
  padding: 12px 0;
  background-color: var(--grey-bg2);
}

.headerMain {
  padding: 15px 0px;
}

.navbar {
  display: flex;
  gap: 26px;
  display: flex;
  align-items: center;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 15px;
}

.nav-links a,
.dropdown-toggle {
  text-decoration: none;
  display: flex;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--para-16px);
  line-height: 100%;
  letter-spacing: -0.41px;
}

.nav-links a:hover {
  color: var(--purple-2);
}

.dropdown-arrow {
  transition: transform 0.3s ease;
}

.dropdown-toggle.open .dropdown-arrow {
  transform: rotate(180deg);
}

/* 🔥 Animate dropdown */
.dropdown-menu {
  /* overflow: hidden;
  height: 0; */
  visibility: hidden;
  transition: height 0.3s ease;
  background: var(--white);
  border-radius: var(--radius-16px);
  position: absolute;
  top: 100%;
  left: 0px;
  right: 0;
  width: 100%;
  max-width: 1114px;
  margin: 0 auto;
  -webkit-border-radius: var(--radius-16px);
  -moz-border-radius: var(--radius-16px);
  -ms-border-radius: var(--radius-16px);
  -o-border-radius: var(--radius-16px);
  box-shadow: 0px 20px 20px 0px #00000014;
  border: 1px solid var(--border-nav);
}

.dropdown-menu.visible {
  visibility: visible;
}

.dropdown-menu li a {
  padding: 10px;
}

.menu-toggle {
  background: none;
  border: none;
  color: var(--black);
  font-size: 24px;
  display: none;
}

.menu-right-actions {
  margin-left: auto;
  display: flex;

  align-items: center;
}

.menu-right-actions div,
.menu-right-actions a {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-nav {
  border-radius: var(--radius-10px);
  -webkit-border-radius: var(--radius-10px);
  -moz-border-radius: var(--radius-10px);
  -ms-border-radius: var(--radius-10px);
  -o-border-radius: var(--radius-10px);
  color: var(--white);
  background-color: var(--purple-2);
  border: 1px solid var(--purple-2);
  font-weight: 700;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
}

.menu-right-actions .btn-nav:hover {
  background-color: var(--purple-bg-light);
  color: var(--purple-2);
  opacity: 1;
}

/* .search-nav {
  padding: 12px;
  background-color: var(--grey-bg);
  border-radius: var(--radius-10px);
  -webkit-border-radius: var(--radius-10px);
  -moz-border-radius: var(--radius-10px);
  -ms-border-radius: var(--radius-10px);
  -o-border-radius: var(--radius-10px);
} */

.smart-eco-dropdown .smart-eco-nav-link {
  display: flex;
  flex-grow: 1;
  max-width: 100%;
  gap: 12px;
  padding: 8px;
  align-items: flex-start;
  color: var(--black);
  background-color: var(--white);
  border-radius: var(--radius-8px);
  -webkit-border-radius: var(--radius-8px);
  -moz-border-radius: var(--radius-8px);
  -ms-border-radius: var(--radius-8px);
  -o-border-radius: var(--radius-8px);
}

.smart-eco-dropdown .smart-eco-nav-link:hover {
  color: var(--white);
  background-color: var(--purple-2);
}

.smart-eco-nav-link p {
  font-weight: 500;
  font-size: var(--text-16px);
  line-height: 150%;
  letter-spacing: -1.9%;
}

.smart-eco-nav-link span {
  font-weight: 400;
  font-size: var(--text-10px);
  line-height: 100%;
  letter-spacing: -1.1%;
}

.dropdown-toggle {
  padding: 0;
  justify-content: inherit;
}

.headerTop {
  display: none;
}

.logoContainer {
  min-width: 100px;
  max-width: 100px;
}

.menu-toggle {
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.menu-right-actions a span {
  display: none;
}

.navbar {
  padding-left: 0px;
  padding-right: 0px;
}

.menu-right-actions a span {
  display: none;
}

.navbar {
  gap: 10px;
}

.btn-nav {
  padding: 10px 15px;
}

.nav-links.show {
  max-height: calc(100dvh - 10px);
  min-height: calc(100dvh - 10px);
}

/*//////////////////////////////////// Responsive/////////////////////////////// */

@media (max-width: 1200px) {
  header {
    position: fixed;
    z-index: 100;
  }

  .nav-links {
    box-shadow: 5px 0px 30px 0px #0000001a;
    background-color: var(--white);
    z-index: 99;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    overflow-y: auto;
    padding: 30px 20px;
    transform: translateX(-110%);
    flex-direction: column;
    width: 99%;
    order: 4;
    -webkit-transform: translateX(-110%);
    -moz-transform: translateX(-110%);
    -ms-transform: translateX(-110%);
    -o-transform: translateX(-110%);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    border-top-right-radius: var(--radius-16px);
    border-bottom-right-radius: var(--radius-16px);
    max-height: calc(100dvh - 10px);
    min-height: calc(100dvh - 10px);
  }

  .nav-links.show {
    display: flex;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    height: 100%;
  }

  .nav-links:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url("images/mobile-menu-top-img.png");
    width: 109px;
    height: 109px;
    z-index: -1;
  }

  /* .nav-links:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    background: url("images/mobile-menu-bottom-img.png");
    width: 170px;
    height: 170px;
    z-index: -1;
  } */

  .nav-links:after {
    content: "";
    position: sticky;
    top: calc(100dvh - 170px);
    left: 100%;
    background: url(images/mobile-menu-bottom-img.png);
    width: 170px;
    height: 170px;
    z-index: -1;
    background-attachment: fixed;
    margin-right: -20px;
    margin-bottom: -30px;
    min-height: 170px;
    margin-top: -180px;
  }

  .dropdown-menu {
    position: static;
  }

  .dropdown-toggle {
    padding: 10px 0;
    justify-content: space-between;
    width: 100%;
  }

  .nav-links a,
  .dropdown-toggle {
    font-size: var(--text-18px);
  }

  .menu-right-actions {
    gap: 15px;
  }

  .btn-nav {
    padding: 10px 15px;
  }

  .dropdown-menu {
    border: 0px;
    box-shadow: none;
    background: transparent;
  }

  .smart-eco-dropdown .smart-eco-nav-link {
    background-color: #fff;
  }

  .dropdown-toggle.open {
    color: var(--purple-2);
  }

  .mobile-top-header-open {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .mobile-top-header-open .logo-open {
    max-width: 109px;
    height: auto;
    min-width: 109px;
  }
}

@media (max-width: 420px) {
  .menu-right-actions {
    gap: 10px;
  }

  .btn-nav {
    padding: 10px 10px;
  }
}

/* responsive with min width */

/* common */

@media screen and (min-width: 320px) {
  .container {
    padding: 0 10px;
  }
}

@media screen and (min-width: 639px) {
  .navbar {
    gap: 26px;
  }

  .menu-right-actions a span {
    display: block;
  }
  /* .smart-eco-dropdown {
    grid-template-columns: repeat(1, 1fr);
    padding: 0px;
  } */
}

@media screen and (min-width: 767px) {
  .nav-links.show {
    max-height: calc(100dvh - 10px);
    min-height: calc(100dvh - 10px);
  }

  .smart-eco-dropdown {
    gap: 40px;
  }

  .headerMain {
    padding: 30px 0px;
  }

  .headerTop {
    display: block;
  }

  .btn-nav {
    padding: 10px 26px;
  }

  .menu-right-actions a span {
    display: block;
  }

  .menu-right-actions {
    gap: 20px;
  }

  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .logoContainer {
    min-width: 140px;
    max-width: 140px;
    width: 100%;
    height: auto;
  }

  body {
    padding-top: 144px;
  }
}

@media screen and (min-width: 1199px) {
  .nav-links a,
  .dropdown-toggle {
    font-size: var(--text-14px);
  }
}

@media screen and (min-width: 1201px) {
  .menu-toggle {
    background: none;
    border: none;
    color: var(--black);
    font-size: 24px;
    display: none;
  }

  .mobile-top-header-open {
    display: none;
  }
  .smart-eco-dropdown {
    grid-template-columns: repeat(3, 1fr);
    padding: 40px;
    display: grid;
  }
}

@media screen and (min-width: 1300px) {
  .nav-links {
    gap: 26px;
  }
}

@media screen and (min-width: 1400px) {
  .nav-links a,
  .dropdown-toggle {
    font-size: var(--para-16px);
  }
}