@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: "Montserrat";
}
html {
  scroll-behavior: smooth;
}
.flex {
  display: flex;
  gap: var(--gap, 5ex);
}
header {
  position: absolute;
  z-index: 99999;
  width: 100%;
  position: relative;
  background-color: #eaebed;
  justify-content: center;
  align-items: center;
}

header .inner {
  align-items: center;
  justify-content: space-between;
}
header .logo {
  margin: 1rem;
}

.logo h1 {
  color: black;
  height: 100%;
  font-size: 40px;
  font-family: "Montserrat";
  font-weight: 700;
  letter-spacing: 1px;
}
.logo h1 span.sub {
  font-size: 13.4px;
  margin-left: 40.8rem;
}
.mobile-nav-toggle {
  font-size: 30px;
  display: none;
}
header button:hover {
  cursor: pointer;
}
.primary-navigation {
  background: hsl(0 0% 100% / 0.8);
  backdrop-filter: blur(12px);
  padding: 1rem;
  margin-right: 1rem;
  border-radius: 11px;
}

nav li a {
  color: black;
  height: 100%;
  font-size: 16px;
  font-family: "Montserrat";
  font-weight: 600;
  transition: 0.5s;
}

nav li a:hover {
  letter-spacing: 2px;
  transition: 1s;
}
body {
  background-color: #f0f8ff;
  overflow: hidden;
}
body[nav-bar="true"] {
  overflow: hidden;
}
#popup {
  padding-top: 1rem;
  display: block;
  z-index: 999999999;
  overflow: scroll;
}
:root {
  --font-color: #555;
  --font-hover-color: orange;
}
.form-container {
  width: 50%;
  height: auto;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
  padding: 2em;
  background-color: #fff;
}
.form-group {
  margin-bottom: 1.5em;
  transition: all 0.3s;
}
.form-label {
  font-size: 0.75em;
  color: var(--font-color);
  display: block;
  opacity: 0;
  transition: all 0.3s;
  transform: translateX(-50px);
}
.form-control {
  box-shadow: none;
  border-radius: 0;
  border-color: #ccc;
  border-style: none none solid none;
  width: 100%;
  font-size: 1.25em;
  transition: all 0.6s;
}
.underline {
  text-decoration: underline;
}
p.form-control {
  border-style: none;
  font-size: 16px;
  color: rgb(51, 50, 50);
  transition: 0.5s;
}
.add_more:hover,
.add_less:hover {
  cursor: pointer;
  color: black;
  transition: 0.5s;
  letter-spacing: 1.5px;
}
.add_less {
  transition: 0.5s;
}
p span.add_more {
  float: right;
  transition: 0.5s;
}
option {
  color: black;
}
.form-control::placeholder,
select:invalid {
  color: #aaa;
}
.form-control:focus {
  box-shadow: none;
  border-color: var(--font-hover-color);
  outline: none;
}
.form-group:focus-within {
  transform: scale();
}
.p-2,
.r-2,
.p-3,
.r-3,
.p-4,
.r-4,
#add-more-2,
#add-more-3,
.add_less {
  display: none;
}
.form-control:invalid:focus {
  border-color: red;
}
.form-control:valid:focus {
  border-color: green;
}

.btn {
  background: #fff;
  border: 1px solid #aaa;
  letter-spacing: 2px;
  border-radius: 3px;
  font-weight: bold;
  color: var(--font-color);
  font-size: 1em;
  padding: 5px;
  text-transform: uppercase;
}
.btn:hover {
  background-color: rgba(29, 28, 28, 0.829);
  color: whitesmoke;
  cursor: pointer;
}
textarea {
  resize: none;
}
.popup-contact {
  margin-top: 1.6rem;
  letter-spacing: 1.2px;
  font-size: 18px;
  text-align: center;
}
.popup-contact a:hover {
  letter-spacing: 2px;
}
.bold {
  font-weight: bolder;
}
.focused > .form-label {
  opacity: 1;
  transform: translateX(0px);
}
.slider {
  position: relative;
  width: 100%;
  min-height: 500px;
  margin-top: 3rem;
  overflow: hidden;
}
.slider.left-right .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: circle(0% at 0 50%);
}
.slider.right-left .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: circle(0% at 100% 50%);
}
.slider.left-right .slide.active {
  clip-path: circle(150% at 0 50%);
  transition: 1s;
}

.slider.right-left .slide.active {
  clip-path: circle(150% at 100% 50%);
  transition: 1s;
}
.slider .slide img {
  position: absolute;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider .slide .info {
  position: absolute;
  color: #222;
  background: rgba(255, 255, 255, 0.7);
  margin-top: 24%;
  margin-left: 35.7%;
  text-align: center;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 5px 25px rgb(1 1 1 / 25%);
}
.slider .slide .info h2 {
  font-size: 2rem;
  font-weight: bolder;
  font-family: Ubuntu;
}
.navigation {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transition: 0.5s;
}

.slider:hover .navigation {
  opacity: 1;
}

.prev-btn,
.next-btn {
  z-index: 999;
  font-size: 2em;
  color: #222;
  background: rgba(255, 255, 255, 0.7);
  padding: 10px;
  cursor: pointer;
}
.prev-btn {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.next-btn {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.navigation-visibility {
  z-index: 999;
  display: flex;
  justify-content: center;
}
.navigation-visibility .slide-icon {
  z-index: 999;
  background: rgba(255, 255, 255, 0.5);
  width: 20px;
  height: 10px;
  transform: translateY(-30px);
  margin: 0 6px;
  border-radius: 3px;
  box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
  cursor: pointer;
}
.navigation-visibility .slide-icon.active {
  background: rgba(255, 255, 255, 0.9);
}

.welcome h2 {
  text-align: center;
  margin-top: 3%;
  font-size: 44px;
  color: black;
  font-family: Ubuntu;
  letter-spacing: 2px;
  font-weight: bold;
}
.about {
  color: #222;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
  width: 75%;
  margin-inline: auto;
  margin-top: 2%;
  border-radius: 15px;
  box-shadow: 0 5px 25px rgb(1 1 1 / 25%);
}
.about p {
  font-size: 18px;
  padding-top: 15px;
  padding-inline: 20px;
  letter-spacing: 0.3px;
  font-weight: bold;
}
.papaimg {
  padding-top: 1rem;
}
.papaimg img {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
}
.about h4 {
  padding-top: 1.5rem;
  padding-bottom: 10px;
  letter-spacing: 2px;
}
.about a {
  color: black;
  font-size: 18px;
}
.about h3 {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}
.read-more,
.read-less {
  transition: 0.5s;
  text-decoration: underline;
  letter-spacing: 1.5px;
  cursor: pointer;
}
.read-more:hover,
.read-less:hover {
  letter-spacing: 4px;
  transition: 0.5s;
  font-weight: bolder;
}
.moretoread {
  padding-bottom: 1.2rem;
  position: relative;
  transition: 0.5s;
}
.moretoread[show="true"] {
  max-height: var(2px);
  width: 100%;
  opacity: 1;
}
:root {
  --transi-time: 2s;
}
.moretoread[show="false"] {
  -webkit-transition: all var(--transi-time);
  -moz-transition: all var(--transi-time);
  -ms-transition: all var(--transi-time);
  -o-transition: all var(--transi-time);
  transition: all var(--transi-time);

  max-height: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
}
.products h2 {
  text-align: center;
  margin-top: 3%;
  font-size: 42px;
  color: black;
  font-family: Ubuntu;
  letter-spacing: 2px;
  font-weight: 600;
}
.container {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 40px;
}
.container .card {
  width: 20rem;
  height: 24rem;
  background: rgba(255, 255, 255, 0.05);
  margin: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
}
.container .card .content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0.5;
  transition: 0.5s;
}
.container .card:hover {
  cursor: pointer;
}
.container .card:hover .content,
.container .card[show="true"] .content {
  opacity: 1;
  transform: translateY(-20px);
}
.container .card .content .imgBx {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 10px solid rgba(0, 0, 0, 0.25);
}
.container .card .content .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container .card .content .contentBx h3 {
  color: black;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  margin: 20px 0 10px;
  line-height: 1.1em;
  padding-inline: 10px;
}
.container .card .content .contentBx h3 span {
  font-size: 14px;
  font-weight: 600;
  text-transform: initial;
}
.container .card .sci {
  position: absolute;
  bottom: 50px;
  display: flex;
}
.container .card .sci li {
  list-style: none;
  transform: translateY(50px);
  transition: 0.5s;
  opacity: 0;
  transition-delay: calc(0.1s * var(--i));
}
.container .card .sci li[show="down"] .down-arrow {
  display: block;
}
.container .card .sci li[show="up"] .down-arrow {
  display: none;
}
.container .card .sci li[show="down"] .up-arrow {
  display: none;
}
.container .card .sci li[show="up"] .up-arrow {
  display: block;
}
.container .card .sci li i {
  font-size: 35px;
}
.container .card:hover .sci li,
.container .card[show="true"] .sci li {
  transform: translateY(40px);
  opacity: 1;
}
:root {
  --dropdown-height: 40rem;
}
.dropdownmenu {
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(25px);
  transition: 0.5s;
}

.dropdownmenu[show="true"] {
  max-height: var(--dropdown-height);
  width: 100%;
  opacity: 1;
}
:root {
  --transi-time: 0.3s;
}
.dropdownmenu[show="false"] {
  -webkit-transition: all var(--transi-time);
  -moz-transition: all var(--transi-time);
  -ms-transition: all var(--transi-time);
  -o-transition: all var(--transi-time);
  transition: all var(--transi-time);

  max-height: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
}
.dropdownmenu span {
  cursor: pointer;
  position: absolute;
  font-size: 38px;
  right: 1rem;
}
.n-prev-btn,
.n-next-btn {
  font-size: 3rem;
  cursor: pointer;
  opacity: 0;
  transition: 0.5s;
}
.dropdownmenu:hover .n-prev-btn,
.dropdownmenu:hover .n-next-btn {
  transition: 0.5s;
  opacity: 1;
}
.dropdownmenu h2 {
  text-transform: uppercase;
  text-decoration: underline;
  font-weight: 700;
  font-family: Roboto;
}
.dropdownmenu h3 {
  padding-left: 4rem;
  font-size: 27px;
  letter-spacing: 2px;
}
.image-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.islider1,
.islider2,
.islider3,
.islider4,
.islider5,
.islider6,
.islider7,
.islider8,
.islider9,
.islider10,
.islider11,
.islider12,
.islider13,
.islider14,
.islider15,
.islider16,
.islider17,
.islider18,
.islider19,
.islider20{
  position: relative;
  height: 12rem;
  width: 20rem;
  border-radius: 2rem;
  margin-inline: 2rem;
  overflow: hidden;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
}
.slider1_slide,
.slider2_slide,
.slider3_slide,
.slider4_slide,
.slider5_slide,
.slider6_slide,
.slider7_slide,
.slider8_slide,
.slider9_slide,
.slider10_slide,
.slider11_slide,
.slider12_slide,
.slider13_slide,
.slider14_slide,
.slider15_slide,
.slider16_slide
.slider17_slide,
.slider18_slide,
.slider19_slide,
.slider20_slide {
  position: absolute;
  width: 100%;
  height: 100%;
}
.l-r .slider1_slide,
.l-r .slider2_slide,
.l-r .slider3_slide,
.l-r .slider4_slide,
.l-r .slider5_slide,
.l-r .slider6_slide,
.l-r .slider7_slide,
.l-r .slider8_slide,
.l-r .slider9_slide,
.l-r .slider10_slide,
.l-r .slider11_slide,
.l-r .slider12_slide,
.l-r .slider13_slide,
.l-r .slider14_slide,
.l-r .slider15_slide,
.l-r .slider16_slide,
.l-r .slider17_slide,
.l-r .slider18_slide,
.l-r .slider19_slide,
.l-r .slider20_slide {
  clip-path: polygon(0% 0%, 0 0, 0 48%, 0 100%, 0% 100%);
}
.l-r .slider1_slide.active,
.l-r .slider2_slide.active,
.l-r .slider3_slide.active,
.l-r .slider4_slide.active,
.l-r .slider5_slide.active,
.l-r .slider6_slide.active,
.l-r .slider7_slide.active,
.l-r .slider8_slide.active,
.l-r .slider9_slide.active,
.l-r .slider10_slide.active,
.l-r .slider11_slide.active,
.l-r .slider12_slide.active,
.l-r .slider13_slide.active,
.l-r .slider14_slide.active,
.l-r .slider15_slide.active,
.l-r .slider16_slide.active,
.l-r .slider17_slide.active,
.l-r .slider18_slide.active,
.l-r .slider19_slide.active,
.l-r .slider20_slide.active {
  clip-path: polygon(0% 0%, 100% 0, 100% 48%, 100% 100%, 0 100%);
  transition: 0.5s;
}
.r-l .slider1_slide,
.r-l .slider2_slide,
.r-l .slider3_slide,
.r-l .slider4_slide,
.r-l .slider5_slide,
.r-l .slider6_slide,
.r-l .slider7_slide,
.r-l .slider8_slide,
.r-l .slider9_slide,
.r-l .slider10_slide,
.r-l .slider11_slide,
.r-l .slider12_slide,
.r-l .slider13_slide,
.r-l .slider14_slide,
.r-l .slider15_slide,
.r-l .slider16_slide,
.r-l .slider17_slide,
.r-l .slider18_slide,
.r-l .slider19_slide,
.r-l .slider20_slide {
  clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%, 100% 48%);
}
.r-l .slider1_slide.active,
.r-l .slider2_slide.active,
.r-l .slider3_slide.active,
.r-l .slider4_slide.active,
.r-l .slider5_slide.active,
.r-l .slider6_slide.active,
.r-l .slider7_slide.active,
.r-l .slider8_slide.active,
.r-l .slider9_slide.active,
.r-l .slider10_slide.active,
.r-l .slider11_slide.active,
.r-l .slider12_slide.slide.active,
.r-l .slider13_slide.active,
.r-l .slider14_slide.active,
.r-l .slider15_slide.active,
.r-l .slider16_slide.active,
.r-l .slider17_slide.active,
.r-l .slider18_slide.active,
.r-l .slider19_slide.active,
.r-l .slider20_slide.active {
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%, 100% 47%);
  transition: 0.5s;
}
.image-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.Images {
  cursor: pointer;
}
.modal {
  display: none;
  position: fixed;
  z-index: 99999999999999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
}

.modal-content,
.form-container {
  margin: auto;
  display: block;
  border-radius: 1rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  object-fit: cover;
}
.modal-content {
  height: 28rem;
  width: 40rem;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.warp {
  flex-wrap: wrap;
}
.dropdown-form{
  background: rgba(248, 244, 188, 0.445);
}
.dropdown-form input {
  width: 30%;
  height: 2rem;
  margin-top:1rem;
  margin-left: 4.5rem;
  margin-bottom: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  border-color: #ccc;
  border-style: none none solid none;
  font-size: 1.25em;
  transition: all 0.6s;
}
.dropdown-form input::placeholder {
  color: #aaa;
}
.dropdown-form input:focus {
  box-shadow: none;
  outline: none;
}
.dropdown-form input:invalid:focus {
  border-color: red;
}
.dropdown-form input:valid:focus {
  border-color: green;
}
.dropdown-form button{
  margin-left:5rem;
  background: #fff;
  border: 1px solid #aaa;
  letter-spacing: 2px;
  border-radius: 3px;
  font-weight: bold;
  color: var(--font-color);
  font-size: 1em;
  padding: 5px;
  text-transform: uppercase;
}
.dropdown-form button:hover {
  background-color: rgba(29, 28, 28, 0.829);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  color: whitesmoke;
  cursor: pointer;
}
.dropdown-product{
  display:none;
}

footer {
  margin-top: 5%;
  background-color: #eaebed;
  width: 100%;
}
.center {
  position: relative;
  justify-content: center;
}
footer h3 {
  padding-top: 1rem;
  color: black;
  font-weight: bolder;
}
footer li,
a {
  padding-top: 10px;
  color: black;
  transition: 0.5s;
}
.footer_info:hover {
  letter-spacing: 1px;
  transition: 0.5s;
}
footer p {
  padding-top: 1rem;
  text-align: center;
}

::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
}
::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 0.25em;
}
::-webkit-scrollbar-thumb {
  border-radius: 11px;
  background: rgba(26, 24, 24, 0.5);
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(0 0 100% / 0.15);
}
@media only screen and (max-device-width: 60rem) {
  .form-container {
    width: 85%;
    margin-top: 55%;
  }
  .form-control {
    font-size: 32px;
  }
  .logo h1 {
    font-size: 34px;
    line-height: 28px;
  }
  .logo h1 span.name::after {
    content: "\a";
  }
  .logo h1 span.sub {
    margin-left: 34rem;
  }
  .primary-navigation {
    --gap: 2rem;
    position: fixed;
    z-index: 1000;
    inset: 0 0 0 0%;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 100%;
    flex-direction: column;
    padding: min(30rem, 10rem) 15rem;

    transform: translateX(129%);
    transition: transform 350ms ease-in-out;
  }
  .primary-navigation[data-visible="true"] {
    transform: translateX(29%);
  }
  .mobile-nav-toggle {
    padding-left: 18%;
    display: block;
    z-index: 1001;
  }
  .mobile-nav-toggle[aria-expanded="false"] .closeit {
    display: none;
  }
  .mobile-nav-toggle[aria-expanded="true"] .closeit {
    display: block;
  }
  .mobile-nav-toggle[aria-expanded="true"] .open {
    display: none;
  }
  nav li a {
    font-size: 32px;
  }
  .slider .navigation {
    opacity: 1;
  }
  .slider .slide .info {
    margin-top: 39%;
    margin-left: 30%;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
  }
  .slider .slide .info h2 {
    font-size: 10rem;
    font-weight: bolder;
    font-family: Ubuntu;
  }
  .container .card:hover .content,
  .container .card[show="false"] .content {
    opacity: 1;
    transform: translateY(-20px);
  }
  #d-menu-1,
  #d-menu-2 {
    position: absolute;
    z-index: 2;
    transform: translateY(-56rem);
  }
  #card-3[godown="true"],
  #card-4[godown="true"] {
    margin-top: 29rem;
  }
  .islider3,
  .islider4,
  .islider7,
  .islider8,
  .islider11,
  .islider12,
  .islider15,
  .islider16 {
    display: none;
  }
  .dropdownmenu .n-prev-btn,
  .dropdownmenu .n-next-btn {
    opacity: 1;
  }
  .modal-content {
    width: 100%;
  }
  .container .card .sci li {
    transform: translateY(40px);
    opacity: 1;
  }
  .slider .slide .info h2 {
    font-size: 1.8em;
    line-height: 40px;
  }

  .slider .slide .info p {
    font-size: 0.9em;
  }
  .slider {
    width: 100%;
  }

  .slider .slide .info {
    margin-right: auto;
  }
  footer p {
    padding-top: 1.3rem;
    font-size: 6px;
    text-align: center;
  }
}