@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base{
    html,body{
        @apply font-CormorantFont;
    }
    .container{
        @apply px-3;
    }
}
@layer components{
    /* ----------------------------------header-------------------------- */
    .main-header{
        @apply bg-white header-shadow;
    }
    .theme-black{
        @apply bg-theme-black;
    }
    .main-header {
        @apply sticky top-0 w-full z-50;
    }
    .main-header .header-logo-img a img{
        @apply mx-auto max-w-[140px] md:max-w-[150px] lg:max-w-[170px] xl:max-w-[190px] 2xl:max-w-[219px] w-full;
    } 
    .main-header .header-logo-img{
        @apply pt-[40px] pb-3 2xl:py-5 flex items-center justify-between md:justify-center;
    }
    nav.header-nav-menu ul{
        @apply flex flex-col md:flex-row items-start md:items-center justify-center gap-3 md:gap-6 lg:gap-[26px] xl:gap-[28px] 2xl:gap-[30px]    
    }
    .header-logo-img a{
        @apply block;
    }
    nav.header-nav-menu ul li a{
        @apply text-base 2xl:text-lg lg:leading-[21px] xl:leading-[23px] 2xl:leading-[25px] font-RobotoFont font-normal pb-2 block;
    }
    nav.header-nav-menu ul li a:hover{
        @apply text-golden-yellow;
    }
    .theme-black nav.header-nav-menu ul li a{
        @apply md:text-white;
    }
    .theme-black nav.header-nav-menu ul li a:hover{
        @apply text-golden-yellow
    }
    .admin-cart img{
        @apply max-w-[18px] 2xl:max-w-[20px] w-full;
    }
    .admin-cart{
        @apply flex items-center gap-5 absolute bottom-2 right-5 top-4 md:top-5 h-[30px];
    }
    .main-header .container{
        @apply relative;
    }
    .admin-cart .user-cart p{
        @apply text-white text-[26px] absolute top-[-30px] right-[-10px];
    }
    .admin-cart .user-cart{
        @apply relative;
    }
    .burger-menu{
        @apply md:hidden;
    }
    .main-header .header-logo-img .burger-menu img{
        @apply max-w-[30px] w-full;
    }
    .header-nav-menu{
        @apply hidden md:block;
    }
    .mobile-menu{
        @apply hidden fixed top-0 right-0 bg-white h-[100vh] overflow-auto w-[270px] shadow-box;
    }
    .mobile-menu.open{
        @apply block z-50;
    }
    .mobile-menu .header-nav-menu{
        @apply block;
    }
    .mobile-menu .header-nav-menu ul li a{
        @apply text-black;
    }
    .mobile-menu .header-nav-menu ul{
        @apply p-5;
    }
    .cross-icon{
        @apply m-5;
    }
    .cross-icon img{
        @apply ml-auto;
    }
    .header-nav-menu ul li.active a{
        @apply text-golden-yellow;
    }
    .theme-black nav.header-nav-menu ul li.active a{
        @apply text-golden-yellow;
    }
    /* ---------------------------------header ends---------------------- */
    /* --------------------------------index.html------------------------- */
    .home-slider{
        @apply h-full w-full flex items-center md:items-start;
    }
    .home-slider .mySwiper .swiper-slide{
        @apply max-w-[280px] lg:max-w-[320px] xl:max-w-[390px] 2xl:max-w-[475px] w-full h-auto;
    }
    .home-slider .mySwiper .swiper-slide img{
        @apply h-auto lg:max-w-[360px]  xl:max-w-[400px] 2xl:max-w-[475px] w-full object-cover
    }
    .home-slider{
        @apply py-11;
    }
    /* --------------------------------index.html ends-------------------- */
    /* --------------------------------acknowledgment starts-------------- */
    .acknow-popup{
        @apply fixed z-[60]  w-full h-[100vh] overflow-auto top-0 flex items-center;
    }
    .ack-content{
        @apply max-w-[600px] sm:max-w-[650px] md:max-w-[700px] lg:max-w-[800px] xl:max-w-[970px] 2xl:max-w-[1114px] w-full bg-white relative;
    }
    .ack-content{
        @apply mx-auto px-5 sm:px-6 md:px-7 lg:px-8 xl:px-10 2xl:px-[57px] py-8 lg:py-10 xl:py-[50px] 2xl:py-[68px];
    }
    .ack-border{
        @apply px-8 sm:px-10 md:px-12 lg:px-14 xl:px-16 2xl:px-20 py-5 sm:py-6 md:py-7 lg:py-8 xl:py-10 2xl:py-[53px] border border-black;
    }
    .ack-cross{
        @apply absolute top-2 lg:top-[15px] xl:top-[18px] 2xl:top-[22px] right-2 lg:right-[15px] xl:right-[18px] 2xl:right-[22px];
    }
    .ack-content .ack-border h2{
        @apply uppercase font-medium text-xl sm:text-[22px] md:text-[24px] lg:text-[28px] xl:text-[32px] 2xl:text-[40px] leading-6 sm:leading-8 md:leading-10 lg:leading-[50px] xl:leading-[60px] 2xl:leading-[72px] text-center pb-3 xl:pb-4 2xl:pb-5;
    }
    .ack-content .ack-border p{
        @apply font-RobotoFont font-light text-base lg:text-[17px] xl:text-[19px] 2xl:text-[21px] lg:leading-[27px] xl:leading-[29px] 2xl:leading-[31px] text-center pb-5 sm:pb-6 md:pb-8 lg:pb-10 xl:pb-12 2xl:pb-14;
    } 
    .ack-content .ack-border img{
        @apply mx-auto max-w-[120px] md:max-w-[130px] lg:max-w-[140px] xl:max-w-[160px] 2xl:max-w-[182px] w-full;
    }
    .acknow-popup.close-acknow{
        @apply hidden;
    }
    .ack-border{
        @apply relative;
    }
    .ack-border:after{
        @apply absolute content-[""] top-1/2 -translate-y-1/2 left-[-2px] border-l-4 border-white h-[60%];
    }
    .ack-border:before{
        @apply absolute content-[""] top-1/2 -translate-y-1/2 right-[-2px] border-r-4 border-white h-[60%];
    }
    /*---------------------------------- acknowledgment ends-------------- */
    /* ------------------------------------footer starts------------------ */
    .footer-main .container.footer-container{
        @apply max-w-[1804px] w-full pt-[129px];
    }
    .footer-slider{
        @apply pb-[90px] sm:pb-[110px] md:pb-[130px] lg:pb-[150px] xl:pb-[170px] 2xl:pb-[195px];
    }
    footer.footer-main{
        @apply bg-no-repeat bg-bottom;
    } 
    .mySwiperFooter .swiper-slide.insta-border{
        @apply w-full h-full sm:max-w-[259px] border-[0.5px] border-black flex items-center justify-center;
    }
    .mySwiperFooter{
        @apply px-4;
    }
    .mySwiperFooter .swiper-slide img,.mySwiperFooter .swiper-slide.insta-border{
        @apply h-[185px] xs:h-[224px] sm:h-[189px] md:h-[170px] xl:h-[231px] 2xl:h-[259px] object-cover w-full;
    }
    .insta-link p{
        @apply font-RobotoFont text-base 2xl:text-lg text-center lg:leading-[17px] xl:leading-[19px] 2xl:leading-[21.09px] text-theme-black;
    }
    .insta-link h6 a{
        @apply text-lg xl:text-[20px] 2xl:text-[25px] font-medium leading-[30.28px] text-center;
    }
    .insta-link h6{
        @apply text-center mt-2;
    }
    .insta-link h6 a:hover{
        @apply text-golden-yellow;
    }
    .mySwiperFooter .swiper-slide{
        @apply relative;
    }
    .mySwiperFooter .swiper-slide:hover .insta-hover{
        @apply flex;
    }
    .mySwiperFooter .swiper-slide .insta-hover{
        @apply absolute top-0 left-0 w-full h-full bg-black/[50%] hidden items-center justify-center;
    }
    .mySwiperFooter .swiper-slide .insta-hover img{
        @apply h-[95px] w-[95px] p-[31px] border border-white rounded-[50%]; 
    }
    .footer-content-sizer{
        @apply max-w-[475px] sm:max-w-[640px] md:max-w-[740px] lg:max-w-[900px] xl:max-w-[1050px] 2xl:max-w-[1232px] w-full mx-auto flex flex-wrap flex-col xs:flex-row md:items-center justify-between pb-7 sm:pb-8 md:pb-10 lg:pb-[50px] xl:pb-[60px] 2xl:pb-[77px] gap-5 sm:gap-6 md:gap-0;
    }
    .footer-contact{
        @apply flex flex-col order-3 md:order-2 xs:flex-row  flex-wrap items-start max-w-[640px] sm:justify-center md:max-w-[502px] lg:max-w-[620px] xl:max-w-[670px] 2xl:max-w-[756px] w-full gap-5 sm:gap-6 md:gap-3 lg:gap-8 xl:gap-10 2xl:gap-[53px];
    }
    .shotkit-logo{
        @apply order-2 md:order-3
    }
    .social-icons{
        @apply flex items-center gap-[17px] lg:pt-[6px] 2xl:pt-[9px]
    }
    .footer-contact p{
        @apply text-base 2xl:text-lg text-theme-black font-RobotoFont font-normal lg:leading-[36px] 2xl:leading-[45px];
    }
    .footer-contact p a{
        @apply block;
    }
    .copyright{
        @apply bg-black text-white py-1 md:py-[6px] lg:py-2 xl:py-[10px] 2xl:py-3;
    }
    .copyright p{
        @apply font-RobotoFont text-sm xl:text-base 2xl:text-lg text-center leading-[21.09px]
    }
    .copyright p a:hover{
        @apply text-golden-yellow;
    }
    .footer-container a:hover{
        @apply text-golden-yellow
    }
    .footer-logo img{
        @apply w-full max-w-[140px] md:max-w-[150px] lg:max-w-[170px] xl:max-w-[190px] 2xl:max-w-[219px];
    }
    .shotkit-logo img{
        @apply max-w-[70px] xl:max-w-[78px] 2xl:max-w-[88px] w-full;
    }
    /* ------------------------------------footer ends-------------------- */
    /* ------------------------------------about.html--------------------- */
    .get-in-touch .container{
        @apply py-14 sm:py-16 md:py-20 lg:py-[90px] xl:py-[100px] 2xl:py-[123px] max-w-[1000px] xl:max-w-[1100px] 2xl:max-w-[1234px] text-white;
    }
    .get-in-touch .container h2{
        @apply font-RobotoFont text-base lg:text-lg xl:text-xl 2xl:text-[22px] lg:leading-[21px] xl:leading-[23px] 2xl:leading-[25.78px];
    }
    .get-touch-divider{
        @apply flex flex-wrap justify-between;
    }
    .get-touch-content h3{
        @apply font-medium text-2xl sm:text-3xl md:text-4xl lg:text-[44px] xl:text-[52px] 2xl:text-[60px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px] pt-3 md:pt-4 lg:pt-5 xl:pt-6 2xl:pt-[27px] pb-4 sm:pb-5 md:pb-6 lg:pb-7 xl:pb-8 2xl:pb-9 uppercase;
    }
    .get-touch-content{
        @apply max-w-[479px] md:max-w-[350px] lg:max-w-[383px] xl:max-w-[424px] 2xl:max-w-[479px] w-full;
    }
    .get-touch-content p{
        @apply text-[17px] lg:text-[19px] xl:text-[21px] 2xl:text-[23px] leading-[23px] lg:leading-[25px] xl:leading-[26px] 2xl:leading-[28px];
    }
    .get-touch-form label{
        @apply text-2xl w-full mt-3 lg:mt-0 block sm:text-3xl md:text-4xl lg:text-[44px] xl:text-[52px] 2xl:text-[60px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px] font-semibold pb-5 sm:pb-[28px] md:pb-[33px] lg:pb-[43px] xl:pb-[53px] 2xl:pb-[63px]
    }
    .get-touch-form{
        @apply pt-10 md:pt-4 lg:pt-5 xl:pt-6 2xl:pt-[27px] max-w-[489px] md:max-w-[350px] lg:max-w-[400px] xl:max-w-[430px] 2xl:max-w-[489px] w-full;
    }
    .get-touch-form form textarea{
        @apply w-full border-b border-[#888888] bg-transparent text-base xl:text-lg 2xl:text-xl h-[60px] px-3;
    }
    .get-touch-form form input{
        @apply w-full border-b border-[#888888] bg-transparent text-base xl:text-lg 2xl:text-xl h-[40px] px-3;
    }
    .get-touch-form form textarea:focus-visible ,.get-touch-form form input:focus-visible{
        @apply outline-none;
    }
    .get-touch-form h4.message-spacing{
        @apply pb-5 sm:pb-6 md:pb-7 lg:pb-8 xl:pb-9 2xl:pb-10
    }
    .get-touch-form form button{
        @apply border border-white text-sm 2xl:text-base font-RobotoFont tracking-[2px] 2xl:tracking-[3px] px-8 lg:px-10 xl:px-[50px] 2xl:px-[55px] py-[10px] xl:py-3 2xl:py-[13.5px] mt-6 sm:mt-8 md:mt-10 lg:mt-[50px] xl:mt-[60px] 2xl:mt-[70px];
    }
    .get-touch-form form button:hover{
        @apply bg-white ease-linear duration-500 text-black;
    }
    /* mailing list starts */
    .mailing-list .container h3{
        @apply font-medium text-2xl text-center sm:text-3xl md:text-4xl lg:text-[44px] xl:text-[52px] 2xl:text-[60px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px];
    }
    .mailing-list .container{
        @apply  my-10 sm:my-12 md:my-14 lg:my-16 xl:my-20 2xl:my-[92px];
    }
    .mailing-list .container .mail-sizer{
        @apply max-w-[900px] lg:max-w-[1000px] xl:max-w-[1100px] 2xl:max-w-[1234px] w-full mx-auto py-[100px] sm:py-[120px] md:py-[140px] lg:py-[160px] xl:py-[180px] 2xl:py-[205px] px-3;
    }
    .mailing-list .container h5{
        @apply font-medium text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] text-center pt-[24px] pb-[62px];
    }
    .mailing-buttons button{
        @apply text-sm 2xl:text-base text-white bg-theme-black leading-[16px] 2xl:leading-[18.75px] tracking-[2px] 2xl:tracking-[3px] uppercase font-RobotoFont max-w-[300px] md:max-w-[320px] lg:max-w-[350px] xl:max-w-[370px] 2xl:max-w-[394px] w-full py-[14px] lg:py-[16px] xl:py-[18px] 2xl:py-[20.5px]
    }
    .mailing-buttons input{
        @apply text-sm text-center bg-[#F4F4F4] 2xl:text-base leading-[16px] 2xl:leading-[18.75px] tracking-[2px] 2xl:tracking-[3px] uppercase font-RobotoFont max-w-[300px] md:max-w-[320px] lg:max-w-[350px] xl:max-w-[370px] 2xl:max-w-[394px] w-full py-[14px] lg:py-[16px] xl:py-[18px] 2xl:py-[20.5px] px-3;
    }
    .mailing-buttons input::placeholder{
        @apply text-black;
    }
    .mailing-buttons input:focus-visible{
        @apply outline-none;
    }
    .mailing-buttons{
        @apply flex items-center justify-center gap-3 flex-col sm:flex-row;
    }
    .mailing-buttons button:hover{
        @apply bg-golden-yellow ease-linear duration-500;
    }
    .mailing-list .container .mail-sizer{
        @apply relative;
    }
    .mailing-list .container .mail-sizer:after{
        @apply content-[""] -z-10 absolute border-l border-black h-[170px] md:h-[190px] lg:h-[210px] xl:h-[230px] 2xl:h-[254px] w-[210px] md:w-[230px] lg:w-[250px] xl:w-[270px] 2xl:w-[294px] border-t top-0 left-0;
    }
    .mailing-list .container .mail-sizer:before{
        @apply content-[""] -z-10 absolute border-r border-black h-[170px] md:h-[190px] lg:h-[210px] xl:h-[230px] 2xl:h-[254px] w-[210px] md:w-[230px] lg:w-[250px] xl:w-[270px] 2xl:w-[294px] border-b bottom-0 right-0;
    }
    /* mailing list ends */
    /* about ian starts */
    .about-ian .container .about-ian-sizer{
        @apply max-w-[740px] xl:max-w-[800px] 2xl:max-w-[908px] w-full mx-auto py-10 sm:py-12 md:py-14 lg:py-16 xl:py-20 2xl:py-[105px] border border-black relative px-3;
    }
    .about-ian .container .about-ian-sizer:after{
        @apply absolute content-[""] top-1/2 -translate-y-1/2 left-[-2px] border-l-4 border-white h-[55%];
    }
    .about-ian .container .about-ian-sizer:before{
        @apply absolute content-[""] top-1/2 -translate-y-1/2 right-[-2px] border-r-4 border-white h-[55%];
    }
    .about-ian{
        @apply my-10 sm:my-12 md:my-14 lg:my-16 xl:my-20 2xl:my-[100px]
    }
    .about-ian .container .about-ian-sizer h3{
        @apply text-2xl sm:text-3xl md:text-4xl lg:text-[44px] xl:text-[52px] 2xl:text-[60px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px] font-medium text-center pb-3 sm:pb-[14px] md:pb-[18px] lg:pb-[22px] xl:pb-[25px] 2xl:pb-[31px];
    }
    .about-ian .container .about-ian-sizer h5{
        @apply text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] text-center pb-5 sm:pb-6 md:pb-7 lg:pb-8 xl:pb-9 2xl:pb-11;
    }
    .about-ian .container .about-ian-sizer p{
        @apply text-base 2xl:text-lg lg:leading-[24px] xl:leading-[26px] 2xl:leading-[28px] font-RobotoFont font-light text-center max-w-[651px] xl:max-w-[647px] 2xl:max-w-[768px] mx-auto pb-1 lg:pb-[6px] xl:pb-2 2xl:pb-[10px];
    }
    .about-ian .container .about-ian-sizer a{
        @apply block font-RobotoFont font-light relative text-base 2xl:text-xl lg:leading-[19px] xl:leading-[21px] 2xl:leading-[23.44px] xl:tracking-[2px] 2xl:tracking-[3px] max-w-max mx-auto mt-4 sm:mt-5 md:mt-6 lg:mt-7 xl:mt-8 2xl:mt-10;
    }
    .about-ian .container .about-ian-sizer a:hover:after{
        @apply content-[""] absolute border-b w-full bottom-0 left-0 ;
    }
    .to-top{
        @apply h-[36px] xl:h-[40px] 2xl:h-[46px] w-[36px] xl:w-[40px] 2xl:w-[46px] bg-theme-black fixed flex items-center justify-center bottom-[74px] right-[52px] z-40;
    }
    .to-top img{
        @apply max-w-[18px] xl:max-w-[20px] 2xl:max-w-[22px] w-full;
    }
    /* about ian ends */
    /* ---------------------------------about.html ends------------------- */
    /* ------------------------------contact.html starts------------------ */
    .contact-us .container .contact-content h3{
        @apply text-[28px] md:text-[32px] uppercase lg:text-[40px] xl:text-[48px] 2xl:text-[54px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px] text-center pb-1 xl:pb-[6px] 2xl:pb-2 font-medium;
    }
    .contact-us .container .contact-content p{
        @apply text-[17px] lg:text-[19px] xl:text-[21px] 2xl:text-[23px] leading-[23px] lg:leading-[25px] xl:leading-[26px] 2xl:leading-[28px] text-center max-w-[852px] xl:max-w-[934px] 2xl:max-w-[1033px] w-full mx-auto;
    }
    .contact-us{
        @apply mt-5 sm:mt-6 md:mt-8 lg:mt-10 xl:mt-[48px] 2xl:mt-[54px] mb-8 sm:mb-10 md:mb-12 lg:mb-14 xl:mb-16 2xl:mb-[72px];
    }
    .ian-contact{
        @apply mt-10 sm:mt-12 md:mt-14 lg:mt-16 xl:mt-[75px] 2xl:mt-[85px] max-w-[400px] lg:max-w-[450px] xl:max-w-[490px] 2xl:max-w-[543px] w-full mx-auto relative py-5 sm:py-6 md:py-7 lg:py-8 xl:py-10 2xl:py-12 px-8 sm:px-10 md:px-12 lg:px-14 xl:px-16 2xl:px-[72px];
    }
    .ian-contact:after{
        @apply content-[""] -z-10 absolute border-l border-black h-[70px] md:h-[80px] lg:h-[90px] xl:h-[100px] 2xl:h-[115.21px] w-[70px] md:w-[80px] lg:w-[90px] xl:w-[100px] 2xl:w-[115.21px] border-t top-0 left-0;
    }
    .ian-contact:before{
        @apply content-[""] -z-10 absolute border-r border-black  h-[70px] md:h-[80px] lg:h-[90px] xl:h-[100px] 2xl:h-[115.21px] w-[70px] md:w-[80px] lg:w-[90px] xl:w-[100px] 2xl:w-[115.21px] border-b bottom-0 right-0;
    }
    .contact-us .container .contact-content .ian-contact h4{
        @apply font-medium uppercase text-xl sm:text-[22px] md:text-[24px] lg:text-[28px] xl:text-[32px] 2xl:text-[40px] leading-6 sm:leading-8 md:leading-10 lg:leading-[50px] xl:leading-[60px] 2xl:leading-[72px] text-center;
    }
    .contact-us .container .contact-content .ian-contact p{
        @apply text-base xl:text-lg 2xl:text-xl lg:leading-[24px] xl:leading-[26px] 2xl:leading-[28px] text-center pb-1 md:pb-[6px] lg:pb-2 xl:pb-[10px] 2xl:pb-3;
    }
    .contact-us .container .contact-content .ian-contact a{
        @apply block font-RobotoFont text-lg leading-[21.09px] text-center max-w-max mx-auto mb-1
    }
    .contact-us .container .contact-content .ian-contact a:hover{
        @apply text-golden-yellow ease-linear duration-500;
    }
    /* contact form */
    .contact-form-main .container h3{
        @apply font-medium uppercase text-xl sm:text-[22px] md:text-[24px] lg:text-[28px] xl:text-[32px] 2xl:text-[40px] leading-6 sm:leading-8 md:leading-10 lg:leading-[50px] xl:leading-[60px] 2xl:leading-[72px] text-center mb-5 sm:mb-6 md:mb-8 lg:mb-10 xl:mb-[50px] 2xl:mb-[60px];
    }
    .contact-form-main .container form{
        @apply max-w-[680px] lg:max-w-[750px] xl:max-w-[850px] 2xl:max-w-[992px] w-full mx-auto;
    }
    .contact-form-main .container form label{
        @apply font-RobotoFont text-base 2xl:text-lg lg:leading-[17px] xl:leading-[19px] 2xl:leading-[21.09px] pb-[11px] block text-start;
    }
    .contact-form-main .container form input,.contact-form-main .container form textarea,.contact-form-main .container form select{
        @apply bg-[#FAFAFA] border border-[#B8B8B8] w-full px-3 py-[5px] lg:py-[7px] xl:py-[9px] 2xl:py-[11px] text-base 2xl:text-lg font-RobotoFont;
    }
    .contact-form-main .container form input:focus-visible,.contact-form-main .container form textarea:focus-visible,.contact-form-main .container form select:focus-visible{
        @apply outline-none;
    }
    .contact-form-main .container form{
        @apply flex flex-wrap justify-between gap-x-4 md:gap-x-[18px] lg:gap-x-[22px] xl:gap-x-[26px] 2xl:gap-x-[30px] gap-y-6 lg:gap-y-8 xl:gap-y-10 2xl:gap-y-11;
    }
    .contact-form-main .container form .form-text{
        @apply w-full;
    }
    .contact-form-main .container form .form-text.half-width{
        @apply sm:max-w-[calc(100%/2-15px)]
    }
    .contact-form-main .container form textarea{
        @apply h-10 md:h-12 lg:h-14 xl:h-16 2xl:h-20
    }
    .contact-form-main .container form input[type="checkbox"]{
        @apply h-[20px] xl:h-[22px] 2xl:h-[24px] w-[20px] xl:w-[22px] 2xl:w-[24px] 
    }
    .checkbox-select{
        @apply flex gap-5 items-center;
    }
    .form-text.check-submit{
        @apply flex items-center justify-between flex-wrap gap-5;
    }
    .form-text.check-submit button{
        @apply font-RobotoFont text-sm 2xl:text-base leading-[16px] 2xl:leading-[18.75px] tracking-[2px] 2xl:tracking-[3px] uppercase border border-black py-[10px] xl:py-3 2xl:py-[13.5px] px-10 lg:px-[45px] xl:px-[50px] 2xl:px-[55px];
    }
    .form-text.check-submit button:hover{
        @apply bg-black ease-linear duration-500 text-white;
    }
    .form-text.check-submit .checkbox-select label{
        @apply pb-0;
    }
    /* -----------------------------contact.html ends--------------------- */
    /* ------------------------lessons starts------------------------------ */
    .lessons{
        @apply fixed top-0 w-full h-[100vh] overflow-y-auto left-0 bg-theme-black/[70%] z-[60] hidden;
    }
    .lessons.show-lesson{
        @apply block;
    }
    .position-center{
        @apply flex items-start pt-10 justify-center h-full w-full;
    }
    .lessons .lessons-sizer.container{
        @apply max-w-[600px] relative md:max-w-[700px] lg:max-w-[1000px] xl:max-w-[1250px] 2xl:max-w-[1428px] w-full bg-white py-5 sm:py-6 md:py-7 lg:py-8 xl:py-10 2xl:py-11 px-3 sm:px-12  md:px-16 lg:px-20 xl:px-[100px] 2xl:px-[133.99px];
    }
    .lesson-close{
        @apply absolute right-5 xl:right-6 2xl:right-8 top-5 xl:top-6 2xl:top-8;
    }
    .lesson-close a{
        @apply block max-w-max;
    }
    .lessons-position:after{
        @apply absolute content-[""] top-1/2 -translate-y-1/2 left-[-2px] border-l-4 border-white h-[55%];
    }
    .lessons-position:before{
        @apply absolute content-[""] top-1/2 -translate-y-1/2 right-[-2px] border-r-4 border-white h-[55%];
    }
    .lessons-position{
        @apply border py-3 md:py-4 lg:py-5 xl:py-6 2xl:py-[33px] px-5 sm:px-7 md:px-[35px] lg:px-[45px] xl:px-[55px] 2xl:px-[65px] relative;
    }
    .lessons .lessons-sizer .lessons-position h3{
        @apply font-medium text-2xl sm:text-3xl md:text-4xl lg:text-[44px] xl:text-[52px] 2xl:text-[60px] lg:leading-[40px] xl:leading-[46px] 2xl:leading-[50px] pt-5 md:pt-6 lg:pt-7 xl:pt-8 2xl:pt-9 pb-4 md:pb-5 lg:pb-6 xl:pb-7 2xl:pb-[30px] text-center;
    }
    .lessons .lessons-sizer .lessons-position h4{
        @apply text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] text-center pb-2 lg:pb-[10px] xl:pb-3 2xl:pb-[14px];
    }
    .lessons .lessons-sizer .lessons-position h5{
        @apply text-[22px] md:text-[24px] lg:text-[26px] italic xl:text-3xl 2xl:text-[34px] leading-[26px] md:leading-[28px] lg:leading-[30px] xl:leading-[35px] 2xl:leading-[41.17px] text-center;
    }
    .lessons .lessons-sizer .lessons-position p{
        @apply font-RobotoFont font-light text-lg leading-[28px] text-center py-3 md:py-4 lg:py-[18px] xl:py-5 2xl:py-[22px];
    }
    .course-timing{
        @apply flex flex-wrap items-center justify-center gap-5 sm:gap-6 md:gap-8 lg:gap-10 xl:gap-[55px] 2xl:gap-[65px]
    }
    .lessons .lessons-sizer .lessons-position .course-timing p{
        @apply pt-0 pb-1 xl:pb-[6px] 2xl:pb-2 text-center text-base 2xl:text-lg lg:leading-4 xl:leading-5 2xl:leading-[22px] border-b border-black mb-2 md:mb-[10px] lg:mb-3 xl:mb-[14px] 2xl:mb-4 font-RobotoFont font-normal;
    }
    .lessons .lessons-sizer .lessons-position .course-timing ul li{
        @apply pb-1 text-center text-base 2xl:text-lg lg:leading-4 xl:leading-5 2xl:leading-[22px] font-RobotoFont;
    }
    .lessons .lessons-sizer .lessons-position .course-timing div{
        @apply max-w-[218px] w-full;
    }
    .lessons .lessons-sizer .lessons-position h6{
        @apply text-lg xl:text-[20px] 2xl:text-[25px] font-medium lg:leading-[26px] xl:leading-[28px] 2xl:leading-[30.28px] text-center pt-4 sm:pt-5 md:pt-6 lg:pt-7 xl:pt-8 2xl:pt-[37px] pb-3 lg:pb-4 xl:pb-5 2xl:pb-6
    }
    .lessons .lessons-sizer .lessons-position .lessons-logo a{
        @apply max-w-max block mx-auto;
    }
    .lessons .lessons-sizer .lessons-position .lessons-logo a img{
        @apply max-w-[120px] lg:max-w-[140px] xl:max-w-[160px] 2xl:max-w-[182px];
    }
    /* -----------------------lessons-ends--------------------------------- */
    /* ------------------------my work starts------------------------------ */
    .my-work{
        @apply py-8 sm:py-10 md:py-[50px] lg:py-[60px] xl:py-[70px] 2xl:py-[86px]
    }
    .my-work .work-sizer.container{
        @apply md:max-w-[700px] lg:max-w-[900px] xl:max-w-[1112px] 2xl:max-w-[1250px] w-full mx-auto;
    }
    .my-work .work-sizer.container h3{
        @apply font-medium text-center text-2xl uppercase sm:text-3xl md:text-4xl lg:text-[44px] xl:text-[52px] 2xl:text-[60px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px] pb-1 lg:pb-2 xl:pb-3 2xl:pb-4;
    }
    .my-work .work-sizer.container h5{
        @apply text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] text-center font-medium max-w-[700px] xl:max-w-[735px] 2xl:max-w-[821px] w-full mx-auto pb-4 sm:pb-5 md:pb-6 lg:pb-7 xl:pb-8 2xl:pb-[38px];
    }
    .my-work .work-sizer.container p{
        @apply font-RobotoFont font-light text-base 2xl:text-lg lg:leading-[22px] xl:leading-[24px] 2xl:leading-[28px] text-center pb-2;
    }
    .portfolio-sec{
        @apply pb-10 sm:pb-12 md:pb-14 lg:pb-16 xl:pb-20 2xl:pb-[102px];
    }
    .portfolio-sizer.container{
        @apply max-w-[800px] xl:max-w-[853px] 2xl:max-w-[953px] mx-auto w-full;
    }
    .portfolio-sizer.container h3{
        @apply uppercase font-medium text-xl sm:text-[22px] md:text-[24px] lg:text-[28px] xl:text-[32px] 2xl:text-[40px] leading-6 sm:leading-8 md:leading-10 lg:leading-[50px] xl:leading-[60px] 2xl:leading-[72px] text-center pb-1;
    }
    .portfolio-sizer.container h5{
        @apply font-medium text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] text-center pb-2 sm:pb-3 md:pb-4 lg:pb-5 xl:pb-6 2xl:pb-8;
    }
    .portfolio-sizer.container p{
        @apply font-RobotoFont font-light text-base 2xl:text-lg lg:leading-[22px] xl:leading-[24px] 2xl:leading-[28px] text-center pb-5 sm:pb-6 md:pb-8 lg:pb-10 xl:pb-[55px] 2xl:pb-[65px];
    }
    .portfolio-sizer.container a{
        @apply block font-RobotoFont text-sm 2xl:text-base text-white mx-auto max-w-max px-7 md:px-8 lg:px-10 xl:px-[50px] 2xl:px-[59px] py-3 xl:py-4 2xl:py-5 bg-theme-black tracking-[1px] xl:tracking-[2px] 2xl:tracking-[3px] leading-normal;
    }
    .portfolio-sizer.container a:hover{
        @apply bg-golden-yellow ease-linear duration-500;
    }
    .work-cards .work-cards-divider{
        @apply grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 xl:gap-5 2xl:gap-6 justify-items-center max-w-[475px] sm:max-w-[640px] md:max-w-full mx-auto;
    }
    .work-content a img{
        @apply max-w-[190px] xs:max-w-[170px] lg:max-w-[191px] xl:max-w-[234px] 2xl:max-w-[290px] w-full h-[190px] xs:h-[170px] lg:h-[191px] xl:h-[234px] 2xl:h-[290px] object-cover;
    }
    .work-content{
        @apply max-w-[190px] xs:max-w-[170px] lg:max-w-[191px] xl:max-w-[234px] 2xl:max-w-[290px] w-full;
    }
    .work-content a{
        @apply block;
    }
    .work-cards{
        @apply px-3 md:px-4 lg:px-5 xl:px-[24px] 2xl:px-[30px]
    }
    .work-content a p{
        @apply font-semibold text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] text-center py-2 xl:py-[10px] 2xl:py-3;
    }
    .work-content:hover{
        @apply card-shadow ease-linear duration-500;
    }
    /* --------------------------------my work ends------------------------ */
    /* --------------------------------my work portfolio------------------- */
    .work-portfolio-sizer h3{
        @apply text-[28px] md:text-[32px] uppercase lg:text-[40px] xl:text-[48px] 2xl:text-[54px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px] text-center font-medium pt-5 sm:pt-6 md:pt-7 lg:pt-8 xl:pt-10 2xl:pt-11 pb-10 sm:pb-12 md:pb-14 lg:pb-16 xl:pb-20 2xl:pb-[100px];
    }
    .work-portfolio-sizer .work-pcontent h5{
        @apply font-medium text-center text-2xl sm:text-3xl md:text-4xl lg:text-[44px] xl:text-[52px] 2xl:text-[60px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px] pb-3 sm:pb-4 md:pb-5 lg:pb-6 xl:pb-7 2xl:pb-[34px];
    }
    .work-portfolio-sizer .work-pcontent h6{
        @apply font-RobotoFont text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] text-center pb-2 xl:pb-3 2xl:pb-4;
    }
    .work-portfolio-sizer .work-pcontent p{
        @apply text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] text-center font-medium max-w-[800px] lg:max-w-[900px] xl:max-w-[977px] 2xl:max-w-[1107px] w-full mx-auto;
    }
    .container.port-sizer{
        @apply max-w-[475px] md:max-w-[768px] lg:max-w-[1000px] xl:max-w-[1100px] 2xl:max-w-[1234px] w-full;
    }
    .flex-divider{
        @apply pt-5 sm:pt-6 md:pt-8 lg:pt-10 xl:pt-[55px] 2xl:pt-[65px] pb-12 sm:pb-14 md:pb-16 lg:pb-20 xl:pb-[90px] 2xl:pb-[110px];
    }
    .portfolio-content{
        @apply max-w-[293px] xl:max-w-[333px] 2xl:max-w-[364px] w-full ;
    }
    .portfolio-content h3{
        @apply font-light text-lg md:text-[22px] lg:text-[26px] xl:text-3xl 2xl:text-[35px] font-RobotoFont;
    }
    .portfolio-content h5{
        @apply font-light font-RobotoFont text-base md:text-lg lg:text-xl xl:text-[22px] 2xl:text-[25px] lg:leading-8 xl:leading-10 2xl:leading-[45px] pt-2 md:pt-3 lg:pt-4 xl:pt-5 2xl:pt-6 pb-4 md:pb-[18px] lg:pb-[22px] xl:pb-[26px] 2xl:pb-[30px];
    }
    .portfolio-content p{
        @apply font-RobotoFont font-light text-base xl:text-lg 2xl:text-xl lg:leading-[22px] xl:leading-[25px] 2xl:leading-[27px] pb-5 sm:pb-6 md:pb-7 lg:pb-8 xl:pb-10 2xl:pb-12;
    }
    .portfolio-content a{
        @apply py-[10px] font-RobotoFont block max-w-max xl:py-3 2xl:py-[13.5px] px-5 sm:px-[22px] md:px-[26px] lg:px-[30px] xl:px-[34px] 2xl:px-[38px] uppercase text-base leading-[18.75px] bg-theme-black tracking-[1px] xl:tracking-[2px] 2xl:tracking-[3px] text-white;
    }
    .portfolio-content a:hover{
        @apply bg-golden-yellow text-black ease-linear duration-500;
    }
    .portfolio-image img{
        @apply max-w-[500px] lg:max-w-[620px] xl:max-w-[690px] 2xl:max-w-[803px] w-full;
    }
    .flex-grid-content{
        @apply flex flex-wrap md:flex-nowrap items-center justify-between pb-5 sm:pb-6 md:pb-8 lg:pb-10 xl:pb-[50px] 2xl:pb-[60px] gap-5;
    }
    .flex-grid-content:last-child{
        @apply pb-0;
    }
    .flex-divider .flex-grid-content:nth-child(even){
        @apply md:flex-row-reverse;
    }
    .enquire .container .enquire-sizer{
        @apply max-w-[1000px] xl:max-w-[1100px] 2xl:max-w-[1234px] w-full mx-auto flex items-center justify-between flex-wrap gap-5;
    }
    .enquire{
        @apply bg-theme-black text-white py-10 sm:py-12 md:py-14 lg:py-16 xl:py-20 2xl:py-[100px];
    }
    .enquire .enquire-sizer h3{
        @apply font-medium text-2xl sm:text-3xl md:text-4xl lg:text-[44px] xl:text-[52px] 2xl:text-[60px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px] md:max-w-[458px] lg:max-w-[522px] xl:max-w-[620px] 2xl:max-w-[748px];
    }
    .enquire .enquire-sizer a{
        @apply text-sm 2xl:text-base font-RobotoFont lg:leading-[15px] xl:leading-[16px] 2xl:leading-[18.75px] border border-white py-[10px] xl:py-3 2xl:py-[13.5px] px-5 lg:px-[22px] xl:px-[25px] 2xl:px-[27px] uppercase tracking-[1px] xl:tracking-[2px] 2xl:tracking-[3px];
    }
    .enquire .enquire-sizer a:hover{
        @apply bg-white text-black ease-linear duration-1000;
    }
    /* --------------------------------my work portfolio------------------- */
    /* -----------------------------------single product------------------- */
    .breadcrumb-sec{
        @apply bg-black text-white font-RobotoFont text-sm xl:text-base 2xl:text-lg;
    }
    .breadcrumb-sec a,.breadcrumb-sec p{
        @apply block text-[#B8B8B8];
    }
    .breadcrumb-sec p:last-child a{
        @apply text-white;
    }
    .breadcrumb-sec .container{
        @apply flex flex-wrap items-center py-3 lg:py-4 xl:py-5 2xl:py-6 gap-2 lg:max-w-[1000px] xl:max-w-[1100px] 2xl:max-w-[1234px];
    }
    /* similar products */  
    .similar-products .similar-pro-sizer{
        @apply max-w-[1000px] xl:max-w-[1100px] 2xl:max-w-[1234px] mx-auto;
    }
    .similar-products .similar-pro-sizer h3{
        @apply font-medium text-white mx-auto text-2xl text-center uppercase sm:text-3xl md:text-4xl lg:text-[44px] xl:text-[52px] 2xl:text-[60px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px] w-full max-w-[815px] pb-5 sm:pb-6 md:pb-8 lg:pb-10 xl:pb-[50px] 2xl:pb-[64px];
    }
    .similar-products{
        @apply py-8 sm:py-10 md:py-12 lg:py-14 xl:py-16 2xl:py-20 bg-black
    }
    .single-pro-grid{
        @apply grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3  lg:grid-cols-6 gap-4 justify-items-center;
    }
    .single-pro-content a img{
        @apply mx-auto w-full;
    }
    .single-pro-content{
        @apply max-w-[184px] w-full;
    }
    .single-pro-content:hover{
        @apply card-shadow-w ease-linear duration-500;
    }
    .single-pro-content a {
        @apply block mx-auto;
    }
    .single-pro-content a p{
        @apply text-sm lg:text-base 2xl:text-lg lg:leading-[17px] xl:leading-[19px] 2xl:leading-[21.8px] text-center bg-white py-2 lg:py-[10px] xl:py-3 2xl:py-[14px] font-semibold;
    }
    .single-products{
        @apply pt-5 sm:pt-6 md:pt-8 lg:pt-10 xl:pt-[57px] 2xl:pt-[67px] pb-10 sm:pb-12 md:pb-14 lg:pb-16 xl:pb-20 2xl:pb-[103px];
    }
    .single-pro-slider{
        @apply max-w-[660px] lg:max-w-[440px] xl:max-w-[590px] 2xl:max-w-[660px] mx-auto w-full;
    }
    .mySwiperThumb{
        @apply px-8 sm:px-14 md:px-20 lg:px-14 xl:px-16 2xl:px-20 w-full mx-auto mt-3 sm:mt-4 md:mt-5 lg:mt-6 xl:mt-[28px] 2xl:mt-[33px] relative;
    }
    .mySwiperThumb .swiper-slide.swiper-slide-thumb-active{
        @apply border-2 border-golden-yellow p-1;
    }
    .single-products .container{
        @apply lg:max-w-[1000px] xl:max-w-[1100px] 2xl:max-w-[1234px]
    }
    .swiper-button-next-thumb{
        @apply sm:absolute right-0 top-0 bg-[#F4F4F4] flex items-center justify-center w-[50px] md:w-[65px] xl:w-[45px] 2xl:w-[55px] h-[50px] sm:h-[121px] lg:h-[80px] xl:h-[111.5px] 2xl:h-[120px];
    }
    .swiper-button-prev-thumb{
        @apply sm:absolute left-0 top-0 bg-[#F4F4F4] flex items-center justify-center w-[50px] md:w-[65px] xl:w-[45px] 2xl:w-[55px] h-[50px] sm:h-[121px] lg:h-[80px] xl:h-[111.5px] 2xl:h-[120px];
    }
    .swiper-btns{
        @apply flex flex-row-reverse items-center justify-center gap-5 mt-5;
    }
    .single-pro-data{
        @apply max-w-[660px] lg:max-w-[390px] xl:max-w-[400px] 2xl:max-w-[471px] w-full mx-auto;
    }
    .single-pro-data h3{
        @apply font-semibold text-lg md:text-[22px] lg:text-[26px] xl:text-3xl 2xl:text-[35px] lg:leading-[32px] xl:leading-[35px] 2xl:leading-[42.39px] pb-2 lg:pb-[10px] xl:pb-3 2xl:pb-[15px];
    }
    .single-pro-data h5{
        @apply text-base xl:text-lg 2xl:text-xl lg:leading-[19px] xl:leading-[21px] 2xl:leading-[23.44px] font-RobotoFont pb-2 xl:pb-[9px] 2xl:pb-[11px];
    }
    .single-pro-sizer{
        @apply flex flex-wrap gap-5 items-start justify-between;
    }
    .review-sec{
        @apply flex items-center gap-3 py-3;
    }
    .single-pro-data .review-sec h5{
        @apply pb-0;
    }
    .fa-star.checked{
        @apply text-golden-yellow;
    }
    .single-pro-data p{
        @apply font-light font-RobotoFont text-base lg:text-[17px] xl:text-[19px] 2xl:text-[21px] lg:leading-[27px] xl:leading-[29px] 2xl:leading-[31px] pb-4 sm:pb-[18px] md:pb-[22px] lg:pb-[25px] xl:pb-[29px] 2xl:pb-[33px];
    }
    .single-pro-data h6{
        @apply font-RobotoFont font-medium text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] pb-4 sm:pb-[18px] md:pb-[22px] lg:pb-[25px] xl:pb-[29px] 2xl:pb-[33px];
    }
    .single-pro-data ul li{
        @apply font-RobotoFont text-base xl:text-lg 2xl:text-xl lg:leading-[19px] xl:leading-[21px] 2xl:leading-[23.44px] font-light pb-2;
    }
    .single-pro-data ul li::marker{
        @apply text-golden-yellow w-[20px] h-[20px];
    }
    .single-pro-data ul{
        @apply list-disc ml-5 mb-6 sm:mb-8 md:mb-10 lg:mb-[50px] xl:mb-[60px] 2xl:mb-[70px];
    }
    .single-pro-data .add-cart-btns button{
        @apply max-w-[220px] border border-black lg:max-w-[230px] py-3 xl:py-4 2xl:py-5 xl:max-w-[250px] 2xl:max-w-[285px] w-full text-center text-sm 2xl:text-base lg:leading-[14px] xl:leading-4 2xl:leading-[18.75px] font-RobotoFont tracking-[1px] xl:tracking-[2px] 2xl:tracking-[3px] mb-[18px]
    }
    .single-pro-data .add-cart-btns button:first-child{
        @apply bg-theme-black text-white;
    }
    .single-pro-data .add-cart-btns button:first-child:hover{
        @apply bg-golden-yellow ease-linear duration-500 border-golden-yellow;
    }
    .single-pro-data .add-cart-btns button:last-child:hover{
        @apply bg-golden-yellow ease-linear duration-500 text-white border-golden-yellow;
    }
    /* similar products ends */
    /* product description */
    .product-desc-sizer{
        @apply  max-w-[1000px] xl:max-w-[1100px] 2xl:max-w-[1234px] mx-auto lg:px-5;
    }
    .hide{
        @apply hidden;
    }
    .desc-tabs-area{
        @apply grid grid-cols-1 sm:grid-cols-3;
    }
    .desc-tabs-area h3{
        @apply text-base 2xl:text-xl border-b-0 sm:border-b lg:leading-[19px] xl:leading-[21px] border-r 2xl:leading-[23.44px] font-RobotoFont text-center border border-black sm:border-r-0 text-[#888888];
    }
    .desc-tabs-area h3:last-child{
        @apply border-r border-black;
    }
    .desc-tabs-area h3:last-child{
        @apply border-b;
    }
    .desc-tabs-area h3 a{
        @apply w-full block py-4 lg:py-5 xl:py-[23px] 2xl:py-[27px];
    }
    .desc-content-area{
        @apply px-5 sm:px-8 md:px-10 lg:px-[50px] xl:px-[60px] 2xl:px-[73px] py-4 md:py-5 lg:py-6 xl:py-7 2xl:py-[33px] border border-black border-t-0;
    }
    .desc-tabs-area .approach-tab-grid.approach-tab-active-grid{
        @apply text-black;
    }
    .product-desc{
        @apply mb-10 sm:mb-12 md:mb-14 lg:mb-16 xl:mb-20 2xl:mb-[103px];
    }
    .desc-content-area h3{
        @apply font-semibold text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] text-start pb-2 xl:pb-3 2xl:pb-4 uppercase;
    }
    .desc-content-area .desc-content-para p{
        @apply text-base 2xl:text-lg lg:leading-4 xl:leading-5 2xl:leading-6 pb-2 font-RobotoFont;
    }
    .desc-content-area .desc-content-para{
        @apply pb-2 lg:pb-[10px] xl:pb-3 2xl:pb-[14px]
    }
    .desc-content-area .material-data p{
        @apply text-sm xl:text-base 2xl:text-lg font-RobotoFont;
    }
    .shipping-content h3{
        @apply font-semibold text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] uppercase text-start pb-2 xl:pb-3 2xl:pb-4;
    }
    .ship-price{
        @apply flex items-center justify-between pb-2 lg:pb-[9px] xl:pb-[11px] 2xl:pb-[13px];
    }
    .shipping-content h5{
        @apply text-sm xl:text-base 2xl:text-lg font-semibold leading-4 xl:leading-5 2xl:leading-6 font-RobotoFont pb-2 lg:pb-[10px] xl:pb-3 2xl:pb-[14px];
    }
    .shipping-content p{
        @apply text-sm xl:text-base 2xl:text-lg font-RobotoFont lg:leading-4 xl:leading-5 2xl:leading-6 pb-3 lg:pb-4 xl:pb-5 2xl:pb-[25px] font-light;
    }
    .shipping-content .ship-price h5{
        @apply pb-0;
    }
    .shipping-content ul li p{
        @apply pb-0;
    }
    .shipping-content ul li{
        @apply flex items-center justify-between;
    }
    .shipping-content{
        @apply max-w-[492px] md:max-w-[300px] lg:max-w-[400px] xl:max-w-[440px] 2xl:max-w-[492px] w-full relative;
    }
    .shipping-content:after{
        @apply md:absolute md:border-l border-black top-0 right-[-30px] h-full content-[""];
    }
    .shipping-returns h3{
        @apply font-semibold text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] uppercase text-start pb-2 xl:pb-3 2xl:pb-4;
    }
    .shipping-returns p{
        @apply text-sm xl:text-base 2xl:text-lg font-RobotoFont lg:leading-4 xl:leading-5 2xl:leading-6 pb-3 lg:pb-4 xl:pb-5 2xl:pb-[25px] font-light;
    }
    .shipping-returns p a{
        @apply text-golden-yellow;
    }
    .shipping-returns{
        @apply max-w-[496px] md:max-w-[300px] lg:max-w-[400px] xl:max-w-[440px] 2xl:max-w-[496px] w-full;
    }
    .shipping-divider{
        @apply md:flex justify-between;
    }
    .changecont{
        @apply mt-3 md:mt-4 lg:mt-5 xl:mt-6 2xl:mt-[27px] uppercase font-RobotoFont text-sm 2xl:text-base tracking-[1px] xl:tracking-[2px] 2xl:tracking-[3px]
    }
    .review-comments{
        @apply flex items-center gap-1 pb-4 sm:pb-5 md:pb-6 lg:pb-7 xl:pb-8 2xl:pb-10;
    }
    .review-comments h5{
        @apply font-RobotoFont text-base xl:text-lg 2xl:text-xl lg:leading-[19px] xl:leading-[21px] 2xl:leading-[23.4px];
    }
    .review-logo-head{
        @apply flex items-center justify-between;
    }
    .review-logo-head h6{
        @apply text-sm xl:text-base 2xl:text-lg lg:leading-4 xl:leading-5 2xl:leading-6 font-RobotoFont text-black;
    }
    .review-logo-head h6 span{
        @apply text-[#888888];
    }
    .review-logo-head{
        @apply pb-2 xl:pb-[10px] 2xl:pb-3 lg:leading-4 xl:leading-5 2xl:leading-6;
    }
    .review-comment-data{
        @apply text-sm xl:text-base 2xl:text-lg
    }
    .comment-area{
        @apply flex items-start gap-3 2xl:gap-4;
    }
    .comment-datas .comment-area{
        @apply border-b-[0.5px] border-[#B8B8B8] py-3 lg:py-4 xl:py-5 2xl:py-6;
    }
    .comment-datas .comment-area:last-child{
        @apply border-b-0;
    }
    .view-all-btn button{
        @apply font-RobotoFont text-sm 2xl:text-base py-2 xl:py-3 2xl:py-4 px-6 md:px-7 lg:px-8 xl:px-[38px] 2xl:px-[46px] uppercase border border-black tracking-[1px] xl:tracking-[2px] 2xl:tracking-[3px];
    }
    .view-all-btn button:hover{
        @apply text-white bg-theme-black ease-linear duration-500;
    }
    .view-all-btn{
        @apply text-right border-b-[0.5px] border-[#B8B8B8] pb-5 md:pb-6 lg:pb-7 xl:pb-[32px] 2xl:pb-[46px] mb-3 md:mb-4 lg:mb-5 xl:mb-6 2xl:mb-[30px];
    }
    .check-star{
        @apply bg-transparent mt-5 sm:mt-[22px] md:mt-[26px] lg:mt-[30px] xl:mt-[34px] 2xl:mt-[38px] mb-2 sm:mb-3 md:mb-4 lg:mb-5 xl:mb-6 2xl:mb-7;
    }
    .para-review{
        @apply font-RobotoFont text-sm xl:text-base 2xl:text-lg leading-3 lg:leading-4 xl:leading-5 2xl:leading-6 font-light;
    }
    .check-star span{
        @apply text-[25px] text-[#888888];
    }
    .submit-btn{
        @apply text-left pb-5 md:pb-6 lg:pb-7 xl:pb-[32px] 2xl:pb-[46px] mt-10 sm:mt-12 md:mt-14 lg:mt-16 xl:mt-20 2xl:mt-[54px];
    }
    .submit-btn button{
        @apply font-RobotoFont text-sm 2xl:text-base py-2 xl:py-3 2xl:py-4 px-7 md:px-8 lg:px-9 xl:px-[45.5px] 2xl:px-[53.5px] uppercase border border-black tracking-[1px] xl:tracking-[2px] 2xl:tracking-[3px];
    }
    .submit-btn button:hover{
        @apply text-white bg-theme-black ease-linear duration-500;
    }
    .review-form textarea,.review-form input{
        @apply w-full border border-[#888888] px-3 xl:px-4 2xl:px-[18px] py-3 xl:py-4 2xl:py-[18px] mb-3 xl:mb-4 2xl:mb-[18px] font-RobotoFont placeholder-[#111111];
    }
    .review-form textarea{
        @apply h-[130px] md:h-[150px] lg:h-[170px] xl:h-[190px] 2xl:h-[214px]
    }
    .review-form textarea:focus-visible,.review-form input:focus-visible{
        @apply outline-none;
    }
    .checkbox-form{
        @apply flex items-center gap-2 xl:gap-[11px] 2xl:gap-[13px];
    }
    .checkbox-form input{
        @apply w-5 h-5 mb-0;
    }
    .checkbox-form p{
        @apply font-RobotoFont text-sm xl:text-base 2xl:text-lg leading-3 lg:leading-4 xl:leading-5 2xl:leading-6;
    }
    .shopping-cart{
        @apply max-w-[450px] xl:max-w-[480px] 2xl:max-w-[520px] w-full bg-white z-50 fixed top-0 right-0 h-[100vh] header-shadow overflow-auto hidden;  
    }
    .shopping-cart.show-cart{
        @apply block;
    }
    .shopping-cart .shopping-slide{
        @apply pt-3 lg:pt-4 xl:pt-5 2xl:pt-6 pl-4 md:pl-[18px] lg:pl-[22px] xl:pl-[26px] 2xl:pl-[29px] pr-4 sm:pr-5 md:pr-6 lg:pr-7 xl:pr-8 2xl:pr-10;
    }
    .shopping-cart .check-total{
        @apply pt-3 lg:pt-4 xl:pt-5 bg-[#FAFAFA] mt-10 sm:mt-14 md:mt-20 lg:mt-[110px] xl:mt-[130px] 2xl:mt-[145px];
    }
    .cart-close{
        @apply mb-4 sm:mb-5 md:mb-6 lg:mb-8 xl:mb-10 2xl:mb-[56px];
    }
    .cart-grid{
        @apply flex items-start gap-[14px];
    }
    .shopping-cart h3{
        @apply font-bold text-lg xl:text-[20px] 2xl:text-[25px] lg:leading-[17px] xl:leading-[19px] 2xl:leading-[21px] pb-4 sm:pb-5 md:pb-6 lg:pb-8 xl:pb-10 2xl:pb-[56px]
    }
    .shopping-cart .cart-content h5{
        @apply text-base xl:text-lg 2xl:text-xl lg:leading-5 xl:leading-6 2xl:leading-7 font-bold;
    }
    .shopping-cart .cart-content p{
        @apply font-RobotoFont font-light lg:text-sm xl:text-base 2xl:text-lg lg:leading-5 xl:leading-6 2xl:leading-7;  
    }
    .price-width{
        @apply flex items-center justify-between;
    }
    .shopping-cart .cart-content h6{
        @apply font-RobotoFont text-sm xl:text-base 2xl:text-lg lg:leading-3 xl:leading-4 2xl:leading-5 font-medium;
    }
    .shopping-cart .cart-content{
        @apply w-full;
    }
    .cart-content a{
        @apply font-RobotoFont font-light text-sm xl:text-base 2xl:text-lg mt-3 xl:mt-4 2xl:mt-5 mb-2 xl:mb-3 2xl:mb-4 block;
    }
    .area-location select{
        @apply font-RobotoFont text-sm xl:text-base 2xl:text-lg leading-4 lg:leading-5 xl:leading-6 2xl:leading-7 py-2 px-3 w-full max-w-[213px] bg-[#FAFAFA] border border-[#B8B8B8];
    }
    .area-location select:focus-visible{
        @apply outline-none;
    }
    .area-location {
        @apply flex items-center justify-between mt-2 mb-3 md:mb-4 lg:mb-5 xl:mb-6 2xl:mb-7;
    }
    .dispatch{
        @apply max-w-[247px] w-full;
    }
    .dispatch p{
        @apply font-RobotoFont font-light text-base xl:text-lg 2xl:text-xl lg:leading-[19px] xl:leading-[21px] 2xl:leading-[23.44px];
    }
    .shopping-cart .check-total .total-amount {
        @apply flex items-center justify-between 2xl:pt-6 pl-4 md:pl-[18px] lg:pl-[22px] xl:pl-[26px] 2xl:pl-[29px] pr-4 sm:pr-5 md:pr-6 lg:pr-7 xl:pr-8 2xl:pr-10 border-[#C4C4C4] border-b;
    }
    .shopping-cart .check-total .total-amount h3{
        @apply pb-3 xl:pb-4 2xl:pb-5 font-RobotoFont;
    }
    .shopping-cart .check-total .total-amount h3 span{
        @apply text-base xl:text-lg 2xl:text-xl;
    }
    .checkout-btn button{
        @apply max-w-[170px] font-RobotoFont lg:max-w-[180px] xl:max-w-[190px] 2xl:max-w-[209px] w-full text-sm 2xl:text-base leading-[18.75px] tracking-[1px] xl:tracking-[2px] 2xl:tracking-[3px] py-[10.5px] text-center border border-black;
    } 
    .checkout-btn {
        @apply flex gap-3 items-center justify-between pl-4 md:pl-[18px] lg:pl-[22px] xl:pl-[26px] 2xl:pl-[29px] pr-4 sm:pr-5 md:pr-6 lg:pr-7 xl:pr-8 2xl:pr-10 pt-4 md:pt-5 lg:pt-6 xl:pt-7 2xl:pt-[32px] pb-6 sm:pb-8 md:pb-10 lg:pb-[54px] xl:pb-[64px] 2xl:pb-[74px];
    }
    /* product description ends */
    /* ----------------------------------single product ends--------------- */
    /* ---------------------------------sales.html------------------------- */
    .sales-area .sales-sizer{
        @apply max-w-[1000px] xl:max-w-[1100px] 2xl:max-w-[1234px] w-full mx-auto;
    }
    .sales-area{
        @apply py-10 sm:py-12 md:py-14 lg:py-16 xl:py-20 2xl:py-[90px]
    }
    .sales-area .sales-sizer h3{
        @apply font-medium text-lg text-center md:text-[22px] lg:text-[26px] xl:text-3xl 2xl:text-[35px] lg:leading-[32px] xl:leading-[35px] 2xl:leading-[42.39px] pb-2 xl:pb-[10px] 2xl:pb-3;
    }
    .sales-area .sales-sizer h4{
        @apply  font-medium text-2xl sm:text-3xl md:text-4xl lg:text-[44px] xl:text-[52px] 2xl:text-[60px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px] text-center pb-3 md:pb-4 lg:pb-5 xl:pb-6 2xl:pb-7;
    }
    .sales-area .sales-sizer p{
        @apply text-center font-medium text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px];
    }
    .image-grid-divider{
        @apply grid grid-cols-1  sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-5 lg:gap-6 xl:gap-7 2xl:gap-8 pt-6 sm:pt-8 md:pt-10 lg:pt-[50px] xl:pt-[60px] 2xl:pt-[71px];
    }
    .image-grid-divider .sales-image-content{
        @apply p-3 lg:p-4 xl:p-[19px] 2xl:p-[21px] card-shadow-sales max-w-[390px] mx-auto;
    }
    .image-grid-divider .sales-image-content:hover{
        @apply card-shadow ease-linear duration-500;
    }
    .image-grid-divider .sales-image-content h5{
        @apply font-semibold text-base lg:text-lg xl:text-xl 2xl:text-[24px] lg:leading-[23px] xl:leading-[25px] 2xl:leading-[29px] pt-2 sm:pt-3 md:pt-4 lg:pt-5 xl:pt-6 2xl:pt-[27px];
    }
    .image-grid-divider .sales-image-content h5.paraspace{
        @apply pt-1 text-[#B8B8B8] pb-3 xl:pb-4 2xl:pb-5;
    }
    .pricecart{
        @apply flex items-center justify-between;
    }
    .wishcart{
        @apply flex items-center gap-[25px];
    }
    .view-all-btn-sales a{
        @apply font-RobotoFont ml-auto block mt-5 max-w-max text-sm 2xl:text-base py-2 xl:py-3 2xl:py-4 px-6 md:px-7 lg:px-8 xl:px-[38px] 2xl:px-[46px] uppercase border border-black tracking-[1px] xl:tracking-[2px] 2xl:tracking-[3px];
    }
    .view-all-btn-sales a:hover{
        @apply text-white bg-theme-black ease-linear duration-500;
    }
    .filter-area{
        @apply mt-5 relative sm:mt-6 md:mt-8 lg:mt-10 xl:mt-[50px] 2xl:mt-[60px] py-[6px] xl:py-2 2xl:py-[10px] border-t border-b border-[#CCCCCC] text-[#CCCCCC] font-RobotoFont;
    }
    .shop-filter{
        @apply flex items-center gap-5 sm:gap-6 md:gap-8 lg:gap-10 xl:gap-12 2xl:gap-[61px] justify-between sm:justify-center;
    }
    .filter-area .filter{
        @apply sm:absolute top-[6px] xl:top-[8px] 2xl:top-[10px] right-0 text-center;
    }
    .filter-area a:hover,.filter-area button:hover{
        @apply text-black;
    }
    .pagination{
        @apply flex flex-wrap items-center justify-center gap-1 mt-12 sm:mt-14 md:mt-16 lg:mt-20 xl:mt-[100px] 2xl:mt-[114px];
    }
    .pagination p a{
        @apply  w-[40px] h-[40px] flex items-center justify-center font-RobotoFont text-base xl:text-lg 2xl:text-xl;
    }
    .sales-area .sales-sizer .pagination p{
        @apply font-RobotoFont text-base xl:text-lg 2xl:text-xl;
    }
    .pagination p.active{
        @apply bg-theme-black text-white;
    }
    /* ---------------------------------sales.htmlends--------------------- */
    /* -------------------------more-about.html------------------------ */
    .abouut-ian-more h2{
        @apply pt-4 sm:pt-5 md:pt-6 lg:pt-8 xl:pt-10 2xl:pt-[50px] uppercase text-2xl sm:text-3xl md:text-4xl lg:text-[44px] xl:text-[52px] 2xl:text-[60px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px] font-medium text-center ;
    }
    .mailing-list.more-sales .mail-sizer p{
        @apply font-RobotoFont pb-1 lg:pb-2 max-w-[600px] lg:max-w-[700px] xl:max-w-[800px] 2xl:max-w-[920px] text-center mx-auto w-full text-sm xl:text-base 2xl:text-lg font-light lg:leading-5 xl:leading-6 2xl:leading-7;
    }
    .mailing-list.more-sales .mail-sizer h3{
        @apply pb-4 sm:pb-5 md:pb-6 lg:pb-7 xl:pb-8 2xl:pb-10;
    }
    .mailing-list.more-sales .mail-sizer{
        @apply py-12 sm:py-14 md:py-16 lg:py-20 xl:py-[110px] 2xl:py-[138px]
    }
    .pro-role .role-sizer h3{
        @apply uppercase text-2xl sm:text-3xl md:text-4xl lg:text-[42px] xl:text-[48px] 2xl:text-[54px] lg:leading-[52px] xl:leading-[62px] 2xl:leading-[72px] font-medium text-center pb-3 sm:pb-4 md:pb-5 lg:pb-6 xl:pb-7 2xl:pb-[31px]
    }
    .pro-role .role-sizer h5{
        @apply text-center font-RobotoFont text-lg md:text-[22px] lg:text-[24px] xl:text-[26px] 2xl:text-3xl lg:leading-[28px] xl:leading-[32px] 2xl:leading-[36.66px] pb-4 md:pb-[18px] lg:pb-[22px] xl:pb-[26px] 2xl:pb-[30px];
    }
    .pro-role{
        @apply py-10 sm:py-12 md:py-14 lg:py-16 xl:py-20 2xl:py-[100px];
    }
    .role-main-logo a{
        @apply max-w-max mx-auto block;
    }
    .education-div{
        @apply grid grid-cols-2 gap-x-2 xl:gap-x-3 2xl:gap-x-4;
    }
    .education-div p{
        @apply font-RobotoFont text-base lg:text-lg xl:text-xl 2xl:text-[22px] lg:leading-[30px] xl:leading-[32px] 2xl:leading-[34px]
    }
    .education-div p:nth-child(odd){
        @apply text-right;
    }
    .education-div p:nth-child(even){
        @apply font-light;
    }
    .education h4{
        @apply font-medium text-xl sm:text-[22px] md:text-[24px] lg:text-[28px] xl:text-[32px] 2xl:text-[40px] lg:leading-8 xl:leading-9 2xl:leading-10 border-b max-w-max mx-auto mb-4 sm:mb-5 md:mb-6 lg:mb-7 xl:mb-8 2xl:mb-10;
    }
    .education{
        @apply pt-8 sm:pt-10 md:pt-12 lg:pt-14 xl:pt-16 2xl:pt-[77px]
    }
    .exhibition h4{
        @apply font-medium text-xl sm:text-[22px] md:text-[24px] lg:text-[28px] xl:text-[32px] 2xl:text-[40px] lg:leading-8 xl:leading-9 2xl:leading-10 border-b max-w-max mx-auto mb-6 sm:mb-8 md:mb-10 lg:mb-[50px] xl:mb-[60px] 2xl:mb-[70px];
    }
    .exhibition{
        @apply mt-8 sm:mt-10 md:mt-12 lg:mt-14 xl:mt-16 2xl:mt-20;
    }
    .pro-role .role-sizer{
        @apply max-w-[1000px] xl:max-w-[1100px] 2xl:max-w-[1234px] w-full mx-auto;
    }
    .exhi-year h6{
        @apply w-[120px] font-RobotoFont md:w-[140px] lg:w-[150px] xl:w-[160px] 2xl:w-[180px] h-[120px] md:h-[140px] lg:h-[150px] xl:h-[160px] 2xl:h-[180px] bg-theme-black text-white flex items-center justify-center text-3xl sm:text-[32px] md:text-[36px] lg:text-[40px] xl:text-[47px] 2xl:text-[57px] font-medium lg:leading-8 xl:leading-9 2xl:leading-10 rounded-[50%];
    }
    .exhi-year{
        @apply flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 md:gap-5 lg:gap-6 xl:gap-8 2xl:gap-10 mb-6 sm:mb-7 md:mb-8 lg:mb-9 xl:mb-10 2xl:mb-[45px]
    }
    .exhi-year .exhi-content p{
        @apply text-base lg:text-lg xl:text-xl 2xl:text-[22px] lg:leading-[30px] xl:leading-[32px] 2xl:leading-[34px] font-RobotoFont;
    }
    .exhi-year .exhi-content p span{
        @apply font-light;
    }
    .year-awards .exhi-year:nth-child(even){
        @apply md:ml-[150px] lg:ml-[170px] xl:ml-[190px] 2xl:ml-[220px]
    }
    .exhi-content{
        @apply sm:max-w-[400px] md:max-w-[500px] lg:max-w-[750px] xl:max-w-max w-full;
    }
    .year-awards .exhi-year:nth-child(even) .exhi-content{
        @apply md:max-w-[400px] lg:max-w-[650px] xl:max-w-[700px] 2xl:max-w-[778px] w-full;
    }
    .role-main-logo a img{
        @apply w-full mx-auto max-w-[140px] md:max-w-[150px] lg:max-w-[170px] xl:max-w-[190px] 2xl:max-w-[219px];
    }
    .follow-insta h6{
        @apply font-RobotoFont font-light text-base lg:text-lg xl:text-xl 2xl:text-[22px] text-center pb-3 xl:pb-4 2xl:pb-5 pt-5 sm:pt-6 md:pt-7 lg:pt-8 xl:pt-10 2xl:pt-[55px];
    }
    .follow-insta a{
        @apply block mx-auto max-w-max;
    }
    .follow-insta a img{
        @apply w-full max-w-[150px] md:max-w-[160px] lg:max-w-[180px] xl:max-w-[200px] 2xl:max-w-[232px]
    }
    .sales-image-content a img{
        @apply h-[260px] md:h-[230px] lg:h-[280px] xl:h-[300px] 2xl:h-[348px] object-cover w-full max-w-[220px] md:max-w-full;
    }
    .sales-image-content  .wishcart a img{
        @apply h-[22px];
    }
    .mailClass input{
        @apply lg:hidden;
    }
    .mailClass:hover input{
        @apply lg:block lg:ease-linear lg:duration-500;
    }
    .mailClass:hover label{
        @apply lg:mt-3 xl:mt-4 2xl:mt-5 lg:text-3xl xl:text-[35px] 2xl:text-[40px] lg:ease-linear lg:duration-700 lg:pb-[10px] xl:pb-[15px] 2xl:pb-[20px] lg:leading-[40px] xl:leading-[45px] 2xl:leading-[50px];
    }
    .mailClass:hover label:first-child{
        @apply mt-0;
    }
    /* -------------------------more-about.html ends-------------------- */
}
@layer utilities{
    .shadow-box{
        box-shadow: 0px 46px 28px rgb(0 0 0 / 25%);
    }
    .header-shadow{
        filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.15));
    }
    .card-shadow{
        box-shadow: 0px 7px 14px rgba(0, 0, 0, 0.2);
    }
    .card-shadow-sales{
        box-shadow: 0px 7px 14px rgba(0, 0, 0, 0.08);
    }
    .card-shadow-w{
        box-shadow: 0px 7px 14px rgb(255 255 255 / 43%);
    }
    .sales-card-shadow{
        filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.15));
    }
}

/* ---------------animation css---------------- */
.mobile-menu.close-animation.open{
    animation: animate-shutter-close 0.7s ease-in;
}
.mobile-menu.open{
    animation: animate-shutter 0.7s ease-in;
}
.ack-content{
    animation: animate-spin 0.7s ease-in;
}
.close-ack-ani{
    animation: animate-spin-reverse 0.7s ease-in;
}
.mySwiperFooter .swiper-slide:hover .insta-hover{
    animation: animate-slow-load 0.5s ease-in;
}
.about-ian .container .about-ian-sizer a:hover:after{
    animation: animate-increase-width 0.5s ease-in;
}
.lessons.show-lesson{
    animation: animate-full-screen 1s ease-in;
}
.lessons.show-lesson.lessoncloseani{
    animation: animate-full-screen-close 1s ease-in;
}
.shopping-cart.show-cart{
    animation: animate-shutter-cart 0.7s ease-in;
}
.shopping-cart.cart-animation{
    animation: animate-shutter-close-cart 0.7s ease-in;
}
@keyframes animate-shutter-cart {
    0%{
        opacity: 0;
        clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%);

    }
    25%{
        opacity: 0;
    }
    100%{
        opacity: 1;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
    }
}
@keyframes animate-shutter-close-cart {
    0%{
        opacity: 1;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
    }
    25%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%);
    }
}
@keyframes animate-full-screen-close {
    0%{
        opacity: 1;
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    }
    30%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    }
}
@keyframes animate-full-screen {
    0%{
        opacity: 0;
        clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    }
    30%{
        opacity: 0;
    }
    100%{
        clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
        opacity: 1;
    }
}
@keyframes animate-increase-width {
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}
@keyframes animate-slow-load {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes animate-spin-reverse {
    0%{
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
        opacity: 1;
    }
    20%{
        opacity: 1;
    }
    90%{
        clip-path: polygon(49% 25%, 75% 50%, 50% 75%, 25% 50%);
    }
    100%{
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        opacity: 0;
    }
}
@keyframes animate-spin {
    0%{
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        opacity: 0;
    }
    10%{
        clip-path: polygon(49% 25%, 75% 50%, 50% 75%, 25% 50%);
    }
    100%{
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
        opacity: 1;
    }
}
@keyframes animate-shutter {
    0%{
        width: 0px;
        opacity: 0;
    }
    40%{
        opacity: 0;
    }
    100%{
        width: 270px;
        opacity: 1;
    }
}
@keyframes animate-shutter-close {
    0%{
        width: 270px;
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        width: 0px;
        opacity: 0;
    }
}
/* ---------------animation css ends---------------- */