@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anek+Malayalam:wght@400;500;600;700;800&display=swap");
.heading-secondary {
  @apply font-bold text-xl sm:text-3xl xl:text-4xl;
}
.heading-secondary--pink {
  @apply text-primary-200 ml-1;
}

.heading-tertiary {
  @apply text-dynamic-h3 font-semibold font-sans-poppins text-primary-300;
}

.heading__group {
  @apply flex items-center justify-center flex-row text-center gap-2 sm:flex-col;
}

.heading__icon {
  @apply text-primary-200 text-xl sm:text-4xl;
}

.btn {
  @apply transition duration-500;
}
.btn--hero {
  @apply rounded-full self-start px-2 sm:px-4 py-2 border-2 bg-primary-300 lg:w-36  text-white  hover:scale-[.9] inline-flex items-center justify-center transition duration-200;
}
.btn--primary {
  @apply text-xs uppercase block;
  @apply py-2 px-4;
  @apply bg-primary-300 text-white rounded-full transition-colors duration-300 hover:bg-primary-400;
}
.btn--filter {
  @apply py-2 px-6 sm:px-2 bg-transparent border-[2px] border-primary-200 text-primary-200 font-bold rounded-full hover:bg-primary-200 hover:text-white;
}
.btn--filter.active {
  @apply bg-primary-200 text-white;
}
.btn--filter-detail {
  @apply py-3 px-7 bg-primary-300 font-bold rounded-full hover:bg-primary-200 text-white leading-[44px];
}
.btn--quote {
  @apply font-sans-poppins font-bold text-xs py-2 px-4 block text-white rounded-full transition-colors duration-300 hover:bg-primary-400;
  @apply bg-primary-300 !important;
}

.footer {
  @apply bg-[#49A078] text-white;
}
.footer__container {
  @apply container py-8;
}
.footer a {
  @apply font-sans-Anek;
}
.footer__group-grid {
  @apply grid grid-flow-row sm:grid-cols-[2fr_1.5fr] xl:grid-cols-[4fr_3.5fr_3.5fr] 2xl:grid-flow-col gap-8 sm:gap-12;
}
.footer__col-1 {
  @apply break-all;
}
.footer__title {
  @apply font-bold font-sans-poppins mb-4;
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.563rem);
}
.footer__title i {
  @apply rotate-180;
}
.footer__title.active {
  @apply transition-all duration-300;
}
.footer__title--icon {
  @apply ml-4 sm:hidden;
}
.footer__list {
  @apply sm:max-h-max max-h-0 overflow-hidden transition-all duration-300;
}
.footer__list.active {
  @apply transition-all duration-300 sm:max-h-max max-h-[400px];
}
.footer__list.active i {
  @apply rotate-180;
}
.footer__contact {
  @apply flex items-center gap-4 my-4;
}
.footer__row {
  @apply flex flex-col;
}
.footer__icon {
  @apply text-xl sm:text-2xl;
}
.footer__li {
  @apply my-2;
}
.footer__bottom {
  @apply my-8;
}
.footer__copy {
  @apply text-center md:text-right;
}
.footer__agency {
  @apply font-bold;
}

.contact-us {
  @apply py-12 bg-primary-100;
}
.contact-us__container {
  @apply container;
}
.contact-us__containt-title {
  @apply text-center;
}
.contact-us__title {
  @apply text-primary-300 font-sans-poppins font-bold mb-8 lg:mb-4;
  font-size: clamp(1.438rem, 1.4vw + 1.2rem, 2.813rem);
}
.contact-us__p {
  @apply font-sans-Anek mb-8 lg:mb-16;
  font-size: clamp(0.875rem, 0.5vw + 0.8rem, 1.375rem);
}
.contact-us__form-group {
  @apply grid px-4 gap-4 lg:w-[80%] xl:w-[70%] 2xl:w-[60%] lg:mx-auto lg:grid-cols-2;
}
.contact-us__label {
  @apply text-primary-300 font-sans-Anek text-[25px] font-semibold;
}
.contact-us__input {
  @apply w-full py-4 my-2 text-base bg-white border-2 rounded-lg px-7 border-primary-300 placeholder:text-[#4E4E4E] font-sans-Anek;
}
.contact-us__input--message {
  @apply pb-24 pt-4;
}
.contact-us__button {
  @apply flex justify-center my-8;
}
.contact-us__submit {
  @apply px-12 py-3 font-bold text-white rounded-full  font-sans-poppins;
  @apply bg-primary-300 hover:bg-primary-400 !important;
}

.social-networks {
  @apply z-20 w-20 h-20 fixed hover:scale-[1.1] transition duration-500  md:bottom-32 lg:bottom-5  lg:right-20 hidden lg:flex items-center justify-center  rounded-full bg-primary-300;
}
.social-networks__link {
  @apply text-4xl text-white;
}

.header {
  @apply fixed w-full top-0 left-0 z-50;
  @apply bg-primary-100 text-primary-300 font-sans-poppins font-semibold shadow-lg;
}
.header__inner {
  @apply container h-20 flex justify-between items-center;
}
.header__logo {
  @apply flex font-bold items-center gap-2 text-xs lg:text-base;
}
.header__logo img {
  @apply w-10;
}
.header__icon {
  @apply justify-self-end lg:hidden;
}
.header__icon i {
  @apply text-2xl;
}
.header__arrow {
  @apply transition-transform duration-300;
}
.header__arrow.active {
  @apply rotate-180;
}
.header__item--submenu .header__link {
  @apply inline-flex items-center justify-center lg:justify-between gap-2;
}
.header__item--group {
  @apply flex gap-4;
}
.header__item--group .header__link {
  @apply text-white bg-primary-300;
  @apply w-8 h-8 rounded-full flex justify-center items-center;
  @apply transition-colors duration-300;
}
.header__item--group .header__link:hover {
  @apply bg-primary-300/80;
}
.header__link {
  @apply text-xs uppercase block cursor-pointer;
  @apply relative py-2 px-4;
  @apply after:absolute after:bottom-1 after:left-4 after:right-4 after:h-[2px] after:bg-primary-300 after:scale-x-0 after:origin-left after:transition-transform after:duration-300;
}
.header__link:hover, .header__link.active {
  @apply after:transition-transform after:duration-300 after:scale-x-100;
}
.header__link--sub {
  @apply block py-2 px-4;
  @apply text-white text-sm font-semibold normal-case rounded-lg transition-all duration-300;
}
.header__link--sub:hover {
  @apply text-primary-300 bg-primary-100;
}

.nav-desktop {
  @apply hidden lg:flex;
}
.nav-desktop .header__list {
  @apply flex flex-row justify-center items-center h-full gap-6;
}
.nav-desktop .header__list--submenu {
  @apply max-h-0 transition-all duration-300;
  @apply overflow-hidden bg-primary-300 rounded-lg;
  @apply absolute top-8 left-0;
  @apply grid grid-cols-[max-content_max-content] gap-4;
}
.nav-desktop .header__list--submenu.active {
  @apply p-4 max-h-[600px] !important;
}
.nav-desktop .header__item--submenu {
  @apply relative w-full;
}

.nav-mobile {
  @apply col-span-2 text-center;
  @apply opacity-0 invisible pointer-events-none transition-all duration-300;
  @apply absolute top-20 left-0 w-full h-[calc(100vh-80px)];
  @apply bg-primary-100;
  @apply lg:hidden;
}
.nav-mobile.active {
  @apply opacity-100 visible pointer-events-auto;
}
.nav-mobile .header__list {
  @apply flex flex-col justify-center items-center h-full gap-6;
}
.nav-mobile .header__list--submenu {
  @apply max-h-0 transition-all duration-300;
  @apply overflow-y-scroll bg-primary-300 rounded-lg;
}
.nav-mobile .header__list--submenu .header__link {
  @apply text-white text-xs font-semibold normal-case rounded-lg transition-all duration-300;
}
.nav-mobile .header__list--submenu .header__link:hover {
  @apply text-primary-300 bg-primary-100;
}
.nav-mobile .header__list--submenu.active {
  @apply p-4;
}
.nav-mobile .header__item--submenu {
  @apply w-[80%];
}

.card-national-shipping {
  @apply bg-primary-300 rounded-lg p-8 text-white flex flex-col lg:py-0 xl:py-16 lg:px-12 xl:px-24 gap-6 w-full h-full lg:justify-center 2xl:px-32 relative;
  overflow-wrap: anywhere;
}
.card-national-shipping__item {
  @apply flex gap-4;
}
.card-national-shipping__description {
  @apply flex flex-col;
}
.card-national-shipping__icon {
  @apply text-dynamic-icon-card-national-shipping translate-y-2 sm:translate-y-0 md:translate-y-1 lg:translate-y-0;
}
.card-national-shipping__list {
  @apply flex flex-col gap-5 lg:gap-9 lg:mt-10;
}
.card-national-shipping__span, .card-national-shipping__sublist, .card-national-shipping__description {
  @apply text-dynamic-national-shipping-des font-sans-Anek;
}
.card-national-shipping__subitem-title {
  @apply font-semibold;
}
.card-national-shipping__figure {
  @apply hidden xl:block absolute right-3 top-[35%] -translate-y-1/2 w-[40%] 2xl:w-[35%];
}
.card-national-shipping__figure--2 {
  @apply w-[30%];
}
.card-national-shipping__figure--3 {
  @apply top-[63%];
}

.accordion {
  @apply bg-white text-primary-600 p-4 lg:p-6 rounded-xl lg:rounded-lg font-sans-Anek h-fit;
}
.accordion__heading {
  @apply flex items-center cursor-pointer gap-4 transition-all duration-300 font-medium;
}
.accordion__heading i {
  @apply w-9 h-9 text-2xl lg:w-10 lg:h-10 flex items-center justify-center  bg-primary-200 rounded-full text-white;
}
.accordion__title {
  @apply text-lg lg:text-2xl;
}
.accordion__content {
  @apply transition-all duration-300 overflow-hidden max-h-0 lg:text-lg;
}
.accordion__content a {
  @apply hover:text-primary-300 font-medium transition-colors duration-300;
}
.accordion__list li {
  @apply before:content-["-"] before:mr-1;
}
.accordion.active .accordion__content {
  @apply max-h-[700px] pt-2;
}
.accordion.active .accordion__heading {
  @apply transition-all duration-300;
}
.accordion.active .accordion__heading i {
  @apply rotate-180;
}

.card-product {
  @apply bg-white p-8;
  @apply max-w-[380px];
  @apply shadow-[10px_10px_50px_rgba(175,175,175,0.25)] rounded-xl;
  @apply grid gap-8;
}
.card-product__grid {
  @apply grid justify-center gap-8 container lg:grid lg:grid-cols-3 xl:grid-cols-4 pt-8;
}
.card-product__title {
  @apply font-bold lg:font-semibold text-primary-300 lg:text-primary-600 text-lg lg:text-2xl;
}
.card-product__figure img {
  @apply w-full max-h-[180px] object-contain;
}
.card-product__btn {
  @apply mx-auto;
}

.section-header {
  @apply mt-20 bg-primary-100;
}
.section-header__inner {
  @apply container py-12 lg:grid lg:grid-cols-2 lg:gap-16 lg:px-24 lg:py-16 lg:items-center;
}
.section-header__content {
  @apply text-center lg:text-left;
}
.section-header__title {
  @apply font-sans-poppins font-semibold text-2xl text-primary-300 mb-4 lg:font-bold lg:text-4xl 2xl:text-5xl lg:mb-6 2xl:mb-8;
}
.section-header__text {
  @apply font-sans-Anek text-lg lg:text-base;
}
.section-header__showcase {
  @apply hidden lg:block w-full;
}
.section-header__showcase iframe, .section-header__showcase img {
  @apply w-full h-full lg:min-h-[300px];
}

.section-filters {
  @apply py-12;
}
.section-filters__inner {
  @apply container sm:hidden;
}
.section-filters__tab-wrapper {
  @apply mx-auto;
}
.section-filters__tabs {
  @apply container hidden sm:flex sm:justify-center sm:gap-4 sm:flex-wrap;
}

.swiper--home-hero .swiper-pagination-hero {
  @apply flex gap-2 justify-center;
}
.swiper--home-hero .swiper-pagination-bullet {
  @apply bg-primary-300 w-2 md:w-3 lg:h-4 h-2 md:h-3 lg:w-4;
}
.swiper--home-hero .swiper-pagination-bullet-active {
  @apply bg-primary-300 w-2 md:w-3 lg:h-4 h-2 md:h-3 lg:w-4;
}
.swiper--home-hero .swiper-button-prev,
.swiper--home-hero .swiper-button-next {
  @apply hidden lg:grid place-items-center bg-primary-300 text-white rounded-full transition-all duration-200 z-20 hover:scale-[1.2];
}
.swiper--home-hero .swiper-button-prev::after,
.swiper--home-hero .swiper-button-next::after {
  @apply font-bold  text-2xl;
}
.swiper--home-hero .swiper-button-prev {
  @apply after:content-["prev"];
}
.swiper--home-hero .swiper-button-next {
  @apply after:content-["next"];
}
.swiper--home-hero .swiper-button-prev,
.swiper--home-hero .swiper-button-next {
  @apply w-20 h-20;
}
.swiper--home-hero .swiper-button-prev {
  @apply md:ml-6;
}
.swiper--home-hero .swiper-button-next {
  @apply md:mr-6;
}
.swiper--articlesMerchan {
  @apply w-full h-full lg:hidden container;
}
.swiper--articlesMerchan .swiper-slide {
  @apply max-w-[300px] flex justify-center items-center m-auto;
  height: calc((100% - 30px) / 2) !important;
}
.swiper--articlesMerchan .swiper-wrapper {
  @apply h-[950px];
}
.swiper--articlesMerchan .swiper-slide img {
  @apply block max-w-[300px] h-full object-cover;
}
.swiper.swiper--national-shipping {
  @apply pb-12;
}
.swiper--national-shipping {
  @apply w-full h-full rounded-lg grid;
}
.swiper--national-shipping .swiper-pagination-fraction,
.swiper--national-shipping .swiper-pagination-custom,
.swiper--national-shipping .swiper-horizontal > .swiper-pagination-bullets,
.swiper--national-shipping .swiper-pagination-bullets.swiper-pagination-horizontal {
  @apply bottom-0;
}
.swiper--national-shipping .swiper-pagination-bullet-active {
  @apply bg-primary-300;
}
.swiper--national-shipping .swiper-pagination-bullet {
  @apply w-3 h-3 lg:w-5 lg:h-5;
}
.swiper--filter .swiper-button-prev::after,
.swiper--filter .swiper-button-next::after {
  @apply font-bold  text-sm bg-primary-200 w-8 h-8   text-white flex justify-center items-center  rounded-full;
}
.swiper--product-details .swiper-slide {
  @apply flex justify-center items-center rounded-3xl h-full shadow-articles;
}
.swiper--product-details .swiper-slide img {
  @apply block  h-full object-contain m-auto;
}
.swiper--product-details .swiper-wrapper {
  @apply h-[400px] py-5;
}
.swiper--product-details .swiper-button-prev,
.swiper--product-details .swiper-button-next {
  @apply grid place-items-center bg-primary-300 text-white rounded-full transition-all duration-200 z-20  hover:scale-[1.2];
}
.swiper--product-details .swiper-button-prev::after,
.swiper--product-details .swiper-button-next::after {
  @apply font-bold  text-lg;
}
.swiper--product-details .swiper-button-prev {
  @apply after:content-["prev"];
}
.swiper--product-details .swiper-button-next {
  @apply after:content-["next"];
}
.swiper--product-details .swiper-button-prev,
.swiper--product-details .swiper-button-next {
  @apply w-10 h-10 lg:w-12 lg:h-12;
}
.swiper--what-we-offer {
  @apply mb-20;
}
.swiper--what-we-offer .swiper-slide {
  @apply flex justify-center items-center  rounded-xl h-full shadow-articles px-4;
}
.swiper--what-we-offer .swiper-slide img {
  @apply block  h-full object-contain m-auto;
}
.swiper--what-we-offer .product-wrapper {
  @apply flex flex-col justify-around h-full;
}
.swiper--what-we-offer .product-wrapper__title {
  @apply font-semibold text-primary-300 font-sans-Anek text-[30px];
}
.swiper--what-we-offer .swiper-wrapper {
  @apply h-[350px] py-5;
}
.swiper--what-we-offer .swiper-button-prev,
.swiper--what-we-offer .swiper-button-next {
  @apply grid place-items-center bg-primary-100 text-primary-300 rounded-full transition-all duration-200 z-20  hover:scale-[1.2];
}
.swiper--what-we-offer .swiper-button-prev::after,
.swiper--what-we-offer .swiper-button-next::after {
  @apply font-bold  text-lg;
}
.swiper--what-we-offer .swiper-button-prev {
  @apply after:content-["prev"];
}
.swiper--what-we-offer .swiper-button-next {
  @apply after:content-["next"];
}
.swiper--what-we-offer .swiper-button-prev,
.swiper--what-we-offer .swiper-button-next {
  @apply w-10 h-10 lg:w-12 lg:h-12;
}

.swiper-meet-us {
  @apply mt-8 text-left bg-white rounded-lg shadow-xl lg:hidden shadow-neutral-400;
}
.swiper-meet-us__card {
  @apply flex flex-col gap-2 px-12 py-8  max-w-[650px];
}
.swiper-meet-us__title {
  @apply text-[30px] font-semibold text-primary-300 font-sans-poppins;
}

@tailwind base;
@tailwind components;
@tailwind utilities;
body {
  @apply bg-[#f5f5f5];
}/*# sourceMappingURL=products.css.map */