/*
 Theme Name:     Amitraflex 
 Theme URI:      https://amitralabs.com/
 Description:    A Modern Design Multipurpose Ecommerce Child Theme for Divi with amazing Design & Functionalities like never before.
 Author:         Amitra Labs by Amit Kumar
 Author URI:     https://amitralabs.com/
 Template:       Divi
 Version:        1.0.3
*/

/**
 * ============================================================================
 * SECTION: CSS VARIABLES
 * ============================================================================
 * Purpose: Defines theme color scheme and reusable CSS custom properties
 * Usage: Use var(--amitraflex-primary) throughout the stylesheet
 * ============================================================================
 */

:root {
    --amitraflex-primary: #ff8057;
    --amitraflex-primary-rgb: 255, 128, 87;
    --amitraflex-black: #000000;
    --amitraflex-white: #ffffff;
    --amitraflex-success: #137118;
    --amitraflex-border: #eeeeee;
    --amitraflex-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/**
 * ============================================================================
 * END SECTION: CSS VARIABLES
 * ============================================================================
 */

/**
 * ============================================================================
 * SECTION: LOCAL FONTS
 * ============================================================================
 * Purpose: Local font declarations using Inter variable font
 * ============================================================================
 */

@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/**
 * ============================================================================
 * END SECTION: LOCAL FONTS
 * ============================================================================
 */

/**
 * ============================================================================
 * SECTION: GLOBAL TYPOGRAPHY
 * ============================================================================
 * Purpose: Sets default font family using local Inter font
 * ============================================================================
 */

body,
html {
    font-family: var(--amitraflex-font-family);
}

/**
 * ============================================================================
 * END SECTION: GLOBAL TYPOGRAPHY
 * ============================================================================
 */

/**
 * ============================================================================
 * SECTION: ACCESSIBILITY STYLES
 * ============================================================================
 * Purpose: Improves website accessibility for screen readers and keyboard users
 * Includes: Skip to content link, focus visible styles
 * ============================================================================
 */

.amitraflex-skip-link {
    position: absolute !important;
    top: -1000px !important;
    left: 1rem;
    background: var(--amitraflex-primary);
    color: var(--amitraflex-white);
    padding: 0.75rem 1rem;
    z-index: 999;
    border-radius: 4px;
    text-decoration: none;
    transition: top 0.3s ease, opacity 0.3s ease;
    opacity: 0 !important;
    pointer-events: none !important;
    /* Screen reader accessible hiding (WCAG compliant) */
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    visibility: hidden !important;
    display: block;
}

.amitraflex-skip-link:focus,
.amitraflex-skip-link:focus-visible {
    top: 1rem !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    /* Reset hiding methods when focused */
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--amitraflex-primary);
    outline-offset: 3px;
}

/* Enhanced focus styles for interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--amitraflex-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(var(--amitraflex-primary-rgb), 0.2);
}

/* Focus styles for icon-only buttons */
[aria-label]:focus-visible,
button[aria-label]:focus-visible,
a[aria-label]:focus-visible {
    outline: 2px solid var(--amitraflex-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(var(--amitraflex-primary-rgb), 0.2);
    border-radius: 4px;
}

/* Focus styles for custom dropdowns and modals */
.amitraflex-account-trigger:focus-visible,
.amitraflex-login-modal__close:focus-visible,
.amitraflex-account-nav__toggle:focus-visible {
    outline: 2px solid var(--amitraflex-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(var(--amitraflex-primary-rgb), 0.25);
}

/* Keyboard navigation indicator */
.amitraflex-account-dropdown__item:focus-visible,
.amitraflex-order-track:focus-visible {
    outline: 2px solid var(--amitraflex-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(var(--amitraflex-primary-rgb), 0.2);
}

/**
 * ============================================================================
 * END SECTION: ACCESSIBILITY STYLES
 * ============================================================================
 */

/**
 * ============================================================================
 * SECTION: HEADER ENHANCEMENTS
 * ============================================================================
 * Purpose: Custom header dropdown menu and enhanced mobile menu styling
 * Includes: Custom dropdown with animation, mobile menu enhancements
 * ============================================================================
 */

/* Custom Header Dropdown Menu */
.amitraflex-custom-dropdown-content {
    -webkit-animation: scale-in-tr 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-tr 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-tr {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
}

@keyframes scale-in-tr {
  0% {
    transform: scale(0);
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    transform: scale(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
}

/* Enhanced Mobile Menu Styling */
.et_mobile_menu {
    margin-top: 15px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.21) 0px 15px 30px;
}

.et_mobile_menu li a {
    padding: 13px 5%;
    margin: 10px 0;
}

/* Submenu Toggle Icon Styling */
.menu-closed {
    border-left: 1px solid var(--amitraflex-border);
}

#page-container span.menu-closed:before {
    content: "\22";
    display: block;
    color: var(--amitraflex-black);
    font-size: 14px;
    font-family: ETmodules;
    transition: .3s ease;
    background: rgba(var(--amitraflex-primary-rgb), 0.39);
    color: var(--amitraflex-primary);
    text-align: center;
    border-radius: 100px;
    width: 26px;
}

#page-container span.menu-closed.menu-open:before {
    content: "\22";
    transform: rotate(180deg);
    background: var(--amitraflex-primary);
    color: var(--amitraflex-white);
}

/* Desktop Dropdown Menu Enhancements */
.et-menu-nav .nav li li {
    padding: 0 !Important;
}

/* Change the width of the Sub Menu */
.et-menu-nav .nav li ul {
    width: 250px !Important;
}

/* Remove the default hover background for Dropdown Menu Link */
.et-menu-nav .nav ul li a:hover {
    background-color: transparent;
}

/* Add more padding and spacing around menu Item */
.et-menu-nav .et-menu li li a {
    padding: 10px 20px;
    margin: 3px 0;
}

/* Arrow line indicator for active Dropdown Menu link */
.et_pb_menu .nav li ul.sub-menu li.current-menu-item a:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    top: 0;
    bottom: 0;
    left: 0px;
    transition: all .2s ease-in-out;
    background: var(--amitraflex-primary) !important;
    width: 4px;
    border-radius: 0px 3px 3px 0px;
}

/* Line shows on Hover on Sub Menu Link */
.et-menu-nav .et-menu li li a:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    top: 0;
    bottom: 0;
    left: 0px;
    transition: all .2s ease-in-out;
    border-radius: 0px 3px 3px 0px;
}

.et-menu-nav .et-menu li li a:hover:before {
    background: var(--amitraflex-primary);
    width: 4px;
}

/* Dropdown Menu Entrance Animation */
.et-menu-nav .et-show-dropdown .sub-menu {
    -webkit-animation: fade-in-bottom 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-bottom 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* Dropdown Menu Box Shadow, Corner Radius and Exit Animation */
.et-menu-nav .sub-menu {
    box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.17) !IMPORTANT;
    border-radius: 8px;
    -webkit-animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* Desktop Dropdown Menu Arrow Indicator */
.et-menu-nav .sub-menu:after {
    content: '';
    display: block;
    position: absolute;
    left: 11%;
    top: -22px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--amitraflex-white);
    border-left: 10px solid transparent;
    z-index: 1;
}

/* Keyframes for Dropdown menu Entrance Animation */
@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Keyframes for Dropdown Menu Exit Animation */
@-webkit-keyframes fade-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}

@keyframes fade-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}

/* Mobile Menu Icon Rotation Animation */
.mobile_nav.opened .mobile_menu_bar:before {
    content: "\4d";
}

.mobile_menu_bar:before {
    transition: all .4s ease;
    transform: rotate(0deg);
    display: block;
}

/* Rotate the Divi Menu icon on click */
.mobile_nav.opened .mobile_menu_bar::before {
    transition: all .4s ease;
    transform: rotate(90deg);
    display: block;
}

/**
 * ============================================================================
 * END SECTION: HEADER ENHANCEMENTS
 * ============================================================================
 */

/*For Link Animation - Add class to any module "link effect" to add this effect*/
.link-effect a, .woocommerce-error a, .woocommerce-info a, .woocommerce-message a{
  cursor: pointer;
  padding-bottom:5px;
  transition: all 0.2s linear;
  background: linear-gradient(to bottom, var(--amitraflex-primary) 0%, var(--amitraflex-primary) 98%); /*Change color of the underline from here*/
  background-size: 0px 2px;
  background-repeat: no-repeat;
  background-position: left 100%;
}
.link-effect a:hover, .woocommerce-error a:hover, .woocommerce-info a:hover, .woocommerce-message a:hover,
.link-effect-white a:hover {
  background-size: 100% 2px;
}
/*Link effect CSS ends*/

/*Link effect - white underline add this class "link-effect-white"*/
.link-effect-white a {
  cursor: pointer;
  padding-bottom:5px;
  transition: all 0.2s linear;
  background: linear-gradient(to bottom, var(--amitraflex-white) 0%, var(--amitraflex-white) 98%); /*Change color of the underline from here*/
  background-size: 0px 2px;
  background-repeat: no-repeat;
  background-position: left 100%;
}
/*END HERE*/

/**
 * ============================================================================
 * END SECTION: LINK EFFECT ANIMATIONS
 * ============================================================================
 */

/**
 * ============================================================================
 * SECTION: HOMEPAGE STYLES
 * ============================================================================
 * Purpose: Custom styles for homepage sections and modules
 * Includes: Button animations, blurb hover effects, testimonial carousel, features section
 * ============================================================================
 */

/*Stylings for the Homepage Starts here*/

/*This will fix the issue with the Buttom Module Animation*/
.et_pb_button_module_wrapper{
	transition:all .3s ease !Important;
}

/* Fix duplicate active color on Divi buttons - ensure only one active state applies */
.et_pb_button_module_wrapper .et_pb_button:active,
.et_pb_button_module_wrapper a.et_pb_button:active,
.et_pb_button:active {
	background-color: var(--amitraflex-primary) !important;
	color: var(--amitraflex-white) !important;
	opacity: 0.9 !important;
	transform: translateY(1px) !important;
	box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15) !important;
}

/* Prevent conflicting active states from parent theme or other sources */
.et_pb_button_module_wrapper .et_pb_button.et_pb_button:active,
.et_pb_button_module_wrapper a.et_pb_button.et_pb_button:active {
	background-color: var(--amitraflex-primary) !important;
	color: var(--amitraflex-white) !important;
}
/*To make any column vertically centered - Enable Equal Column height in the Row Settings*/
.et_pb_equal_columns>.et_pb_column{
	margin-top:auto;
	margin-bottom:auto;
}
/*To make buttons inline anywhere, add the class "inline-buttons-row" to the Row*/
.inline-buttons-row .et_pb_button_module_wrapper{
display:inline-block;
}
/*This will add hover transition to Blurb Module's Image*/
.et_pb_main_blurb_image{
	transition:.3s ease;
}
/*To push the Image a bit small on the Homepage*/
.service-card:hover .et_pb_main_blurb_image{
	transform:scale(0.90) !Important
}
/*The Features Section on the Homepage - Adding some Hover effect to blurb Image*/
.feature .et_pb_animation_off{
    background: var(--amitraflex-primary);
    padding: 10px;
    border-radius: 10px;
    transition:.3s ease;
}
.feature:hover .et_pb_animation_off{
	 box-shadow: 35px -15px 0px rgba(var(--amitraflex-primary-rgb), 0.12), -25px 15px 0px rgba(var(--amitraflex-primary-rgb), 0.12);
	 transform:scale(1.2)
}


/*Creating a Testimonial Carousel with Slider Module*/

/* 
 * NOTE: Image URLs are now set dynamically via PHP in functions.php
 * To customize, edit the 'amitraflex_testimonial_carousel_images' filter
 * or modify the inline styles output by amitraflex_testimonial_carousel_styles()
 * 
 * Example filter usage:
 * add_filter('amitraflex_testimonial_carousel_images', function($images) {
 *     return array(
 *         get_stylesheet_directory_uri() . '/assets/images/testimonial-1.jpg',
 *         get_stylesheet_directory_uri() . '/assets/images/testimonial-2.jpg',
 *         // ... more images
 *     );
 * });
 */

/*Creating a Testimonial Carousel with Slider Module - size and position of images*/
.amitraflex-testimonial .et-pb-controllers a {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    margin: 0 15px;
    transition:.3s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*change opacity on hover*/
.amitraflex-testimonial .et-pb-controllers a:hover {
 opacity: 1;
 transform:scale(0.90)
}
/*make the active slide slightly bigger*/
.amitraflex-testimonial .et-pb-controllers .et-pb-active-control {
  width: 100px;
  height: 100px;
  margin-bottom: -5px;
  box-shadow:0px 1px 20px rgba(0, 0, 0, 0.17);
}

/*force off the text shadows*/
.amitraflex-testimonial .et_pb_slide_description {
text-shadow: none!important;
  margin-bottom: 20px!important;
}
/*change the slide description animation*/
.amitraflex-testimonial .et-pb-active-slide .et_pb_slide_description {
 animation-name: fadeIn;
}


@media (max-width: 980px) {
/*size and position of images - mobile*/
.amitraflex-testimonial .et-pb-controllers a {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  margin: 0 10px;
}
  /*make the active slide slightly bigger - mobile*/
.amitraflex-testimonial .et-pb-controllers .et-pb-active-control {
  width: 60px;
  height: 60px;
  margin-bottom: -5px;
  box-shadow:0px 1px 20px rgba(0, 0, 0, 0.17);
	}
  /*adjust image position - mobile*/
.amitraflex-testimonial .et-pb-controllers {
    bottom: 10%;
}
}

/*position the images - mobile*/
@media (max-width: 767px) {
.amitraflex-testimonial .et-pb-controllers {
  bottom: 20%;
}
/*position the images - mobile*/
.amitraflex-testimonial .et_pb_slide_description {
  margin-bottom: 50px!important;
}
}





/*Styling for the ""Homepage"" END here.*/




/*Stylings for the "Contact Page"" Starts here*/

/*Contact Info after the Hero Section*/

/*This is to add animation when hoverout of the card - exit*/
.amitraflex-view-button{
	opacity:0;
	-webkit-animation: fade-out-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: fade-out-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/*Animation when hover to card - entrance*/
.amitraflex-column:hover .amitraflex-view-button{
	opacity:1;
	-webkit-animation: fade-in-bottom 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/*The text before Contact Form*/
mark-shy-text{
	background: rgba(var(--amitraflex-primary-rgb), 0.1) !Important;
    color: var(--amitraflex-primary) !Important;
    padding: 10px 25px;
    border-radius: 100px;
	margin-bottom:10px;
	font-weight:bold;
}
/*FAQ Toggle Module - Desiging the Toggle Module*/
.amitraflex-faq .et_pb_toggle_title:before {
    content: "\4c" !IMPORTANT;
    font-weight: 900;
	transition:.3s ease;
}
/*Stylings for when the Toggle is open*/
.amitraflex-faq.et_pb_toggle_open .et_pb_toggle_title:before{
	transform: rotate(180deg);
	content: "\22" !IMPORTANT;
	color: var(--amitraflex-primary) !Important
}
/*Stylings for the Contact Page ENDs here*/



 


/*Stylings for the "About Us" Page Starts here*/

/*Styling for the text "Our History" in the About page.*/
mark-history{
  background:rgba(var(--amitraflex-primary-rgb), 0.23);
  color:var(--amitraflex-primary);
  padding:10px 20px;
  border-radius:100px;
}
/*Will make buttons centered after the Testimonial section on About Page*/
.row-after-testimonials{
	text-align:center;
}
/*Hides the member bio by default*/
.member-bio, .member-social-media-follow, .member-about-button{
	opacity:0;
}
/*To show member bio info when hover to member card*/
.member-card:hover .member-bio{
	opacity:1;
	-webkit-animation: fade-in-bottom 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/*This will add entrance animation to Social Follow Module when hover to member card*/
.member-card:hover .member-social-media-follow{
	opacity:1;
	-webkit-animation: fade-in-bottom 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/*This is to add entrance animation to the button in the member card*/
.member-card:hover .member-about-button{
	opacity:1;
	-webkit-animation: fade-in-bottom 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/*Styling for About Page Ends here*/


/*Styling for the Services Page Starts here*/

/*This will change text elements to white when hover over to service card*/
.service-card-2:hover .et_pb_blurb h4,
.service-card-2:hover .et_pb_blurb strong,
.service-card-2:hover .et_pb_blurb_description {
	color: var(--amitraflex-white) !important;
}
/*This will add a white background to blurb image when hover to service card*/
.service-card-2:hover .et_pb_main_blurb_image{
	background:var(--amitraflex-white);
    width:50px;
    padding:10px;
    border-radius:5px;
    box-shadow:0px 2px 10px rgba(0,0,0,0.36);
}

/*Amitraflex Custom Testimonial Styling*/

/*This will add an active state to active Testimonial image*/
.active-img{
	transform:scale(1.1);
	transition: all .3s ease;
}
/*To add an overlay to active Image in testimonial*/
.active-img:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 35%);
	z-index:10;
	border-radius:10px;
}
/*This will add border inside the image to active testimonial image*/
.active-img:after{
	content: '';
    position: absolute;
    width: 90%;
    height: 90%;
    border: 1px solid var(--amitraflex-white);
    z-index: 10;
    border-radius: 10px;
    left: 10px;
    top: 4.7%;
	transition: all .3s ease;
}
/*Adjusting for Mobile*/
@media only screen and ( max-width: 479px ) {
.active-img:after{
	display:none;
}
.active-img{
	transform:scale(1.05);
}
}
/*This will hide other testimonial content by default*/
.not-active-text{
	display:none !Important;
}
/*This will show the testimonoial content when switched to other testimonial item */
.active-text{
	display:block !Important;
	-webkit-animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/*Animation keyframes*/
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*Styling for the Single Service Page Starts here*/

/*Amitraflex Custom Progess Tabs*/

/*This will add an active state to the active Blurb Image */
.active-tab .et_pb_main_blurb_image {
    background: rgba(var(--amitraflex-primary-rgb), 0.18);
    border-radius: 10px;
}
/*This will change the H4 Color for the active tab item*/
.active-tab.et_pb_blurb h4 {
    color:var(--amitraflex-primary) !Important;
}
/*Ends here*/


/*Styling for Single Job Page starts here*/
.active-link-application:before{
	content:"";
	position:absolute;
    top:60px;
    left:-16px;
	display:block;
	width:135px;
	border-radius:3px 3px 0px 0px;
	background: var(--amitraflex-primary);
    border:2px solid var(--amitraflex-primary);
	transition:.3s ease;
}
.active-link:after{
	content:"";
	position:absolute;
    top:60px;
    left:-8px;
	display:block;
	width:135px;
	border-radius:3px 3px 0px 0px;
	background: var(--amitraflex-primary);
    border:2px solid var(--amitraflex-primary); 
	transition:.3s ease;
}
/*END HERE*/


/**
 * ============================================================================
 * END SECTION: SERVICES PAGE STYLES
 * ============================================================================
 */


/**
 * ============================================================================
 * SECTION: BLOG PAGE STYLES
 * ============================================================================
 * Purpose: Styles for blog listing, grid, and single post pages
 * Includes: Blog wrapped layout, list layout, grid layout, post meta, navigation
 * ============================================================================
 */

/*Styling for Blog - Advanced Page Starts here*/
/*Blog Wrapped Styling*/
/*move wrapped title, meta, and text up over the image*/
.amitraflex-blog-content{
	position: absolute;
	bottom: -10%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	padding: 30px;
	z-index: 1;
}
/*keep the moved items positioned with their parent items*/
.amitraflex-blog-latest .et_pb_blog_grid article {
	position: relative;
}
/*remove spacing around entire blog post*/
.amitraflex-blog-latest .et_pb_blog_grid .et_pb_post {
	padding: 0px;
}
/*remove negative margins on blog featured image*/
.amitraflex-blog-latest .et_pb_image_container {
	margin: 0;
}
/*remove the margin below the featured image frame*/
.amitraflex-blog-latest .et_pb_post .entry-featured-image-url {
	margin: 0;
}
/*Adds overlay to the Latest Post Featured Image*/
.amitraflex-blog-latest .entry-featured-image-url::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
}
@media only screen and ( max-width: 479px ) {
	.amitraflex-blog-content{
		bottom:-45%;
	}
}
/*Blog List layout Styling*/
/*add media query so changes only affect tablet and desktop*/
/*set the image width*/
.amitraflex-blog-list .entry-featured-image-url  {
width: 25%;
float: left;
margin-bottom: 0!important;
}
/*set the details width*/
.amitraflex-blog-list .entry-title,
.amitraflex-blog-list .post-meta,
.amitraflex-blog-list .post-content {
width: 75%;
float: left;
padding-left: 10px;
margin-top:-5px;
}
/*To reduce bottom margin of the list blog*/
.amitraflex-blog-list .et_pb_post {
margin-bottom: 27px;
	-webkit-animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/*Blog Grid layout Styling*/
/*make the parts of the blog post flexible*/
.amitraflex-blog-grid .et_pb_post {
	display: flex;
	flex-direction: column;
    position: relative;
}
/*featured image*/
.amitraflex-blog-grid .et_pb_image_container, .amitraflex-blog-grid .entry-featured-image-url {
	order: 2;
}
/* post title*/
.amitraflex-blog-grid .entry-title {
	order: 3;
}
/* post meta*/
.amitraflex-blog-grid .post-meta {
	order: 1;
    z-index: 1;
    margin: -10px 0px -13px -5px;
}
/*This will give Blog Post & Portfolio Meta Link button looks of Amitraflex Theme */
.amitraflex-blog-grid .post-meta a, .et_pb_portfolio_item .post-meta a{
	background: var(--amitraflex-primary);
    padding: 6px 15px;
    color: var(--amitraflex-white) !IMPORTANT;
    border-radius: 5px;
    margin-left: -10px;
    margin-right: 10px;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	transition:.2s ease;
	text-transform: uppercase;
    font-weight: bold;
    font-size: 10px;
}
/*Some adjustments for Meta links*/
.et_pb_portfolio_item .post-meta a{
    position: relative;
    left: 10px;
    top: 10px;
	margin-left: -6px !important;
    margin-right: 7px !important;
}
/*To add hover effect to meta links*/
.amitraflex-blog-grid .post-meta a:hover, .et_pb_portfolio_item .post-meta a:hover{
	box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.3);
}
/*To style the Post publish date for Blog Grid*/
.amitraflex-blog-grid .published{
    background: var(--amitraflex-white);
    position: absolute;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.10);
    top: 155px;
    right: -18px;
    font-weight: bold;
    color: var(--amitraflex-black);
    letter-spacing: 1px;
}
/*Reordering the Blog Post Content*/
/*excerpt and button*/
.amitraflex-blog-grid .post-content {
	order: 4;
}
/*For sidebar module*/
.amitraflex-sidebar .widget_categories ul li a{
	color:var(--amitraflex-black) !Important;
}
.amitraflex-sidebar .widget_categories ul li:hover a{
	color:var(--amitraflex-primary) !Important;
}
.amitraflex-sidebar .widget_categories ul li {
    margin-bottom: .5em;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--amitraflex-border);
    padding: 20px 20px;
	transition: .2s;
}
.amitraflex-sidebar .widget_categories ul li:hover {
    padding: 20px 40px;
}
.amitraflex-sidebar .widget_categories ul li a:before {
	font-family: 'ETmodules';
    content: "\24";
    font-size: 18px;
    position: absolute;
    opacity: 0;
    font-weight: 600;
    left: 0;
    transition: .1s;
}
.amitraflex-sidebar .widget_categories ul li:hover a:before {
    opacity: 1;
    left: 15px;
    transition: .3s;
	color: var(--amitraflex-primary);
}
/*ENDS HERE*/

/*Styling for Single Post page starts here*/

/*To add button looks to the Cateofy and Tags*/
.amitraflex-category a, .amitraflex-tags a{
    background: var(--amitraflex-primary);
	color:var(--amitraflex-white);
    padding: 6px 15px;
    border-radius: 5px;
    margin-left: -10px;
    margin-right: 20px;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);
	transition:.2s ease;
}
/*hover effect*/
.amitraflex-category a:hover, .amitraflex-tags a:hover{
	box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.3);
}
/*Adjusting the Tags positioning*/
.amitraflex-tags a{
	margin:0 0 0 10px !Important
}
/*Post Navigation Module on single post page styling*/
.nav-label{
    position: relative;
    top: 13px;
    left: -2px;
}
@media only screen and ( max-width: 479px ) {
.nav-label{
    top: 0px;
}
/*Adjusting the the Comments section styling for single post page*/
#respond .comment-form-comment {
    width: 100% !Important;
	margin-right:0px;
}
}
/*End adjusting indicator*/
/*To change the post of next label of post navigation module*/
.nav-next .nav-label{
	left:-10px;
}
/*Adjusting animation for tabs*/
.amitraflex-comments, .amitraflex-article{
	animation:.3s
}
/*Adding animation to the Comment form fields*/
#commentform input[type=email], #commentform input[type=text], #commentform input[type=url], #commentform textarea{
	transition:.3s ease !Important;
}
/*To make the Comment field half the width*/
#respond .comment-form-comment {
    width: 50%;
    float: left;
	margin-right:30px;
}
/*To make the Comment field fullwidth for logged in user*/
.logged-in #respond .comment-form-comment {
    width: 100% !Important;
	margin-right:0;
}
/*To change the height of the textarea - comment feild*/
#commentform textarea {
    height: 195px!important;
}
/*To adjust the "save info" text position*/
.comment-form-cookies-consent{
margin-top:15px;	
}
/*This will add active indicator to the "Read Article".*/
.active-link-read:after{
	content:"";
	position:absolute;
    top:60px;
    left:13px;
	display:block;
	width:135px;
	border-radius:3px 3px 0px 0px;
	background: var(--amitraflex-primary);
    border:2px solid var(--amitraflex-primary); 
	transition:.3s ease;
}
/*This will add active indicator to the "Discussion"*/
.active-link-discussion:after{
	content:"";
	position:absolute;
    top:60px;
    right:-11px;
	display:block;
	width:135px;
	border-radius:3px 3px 0px 0px;
	background: var(--amitraflex-primary);
    border:2px solid var(--amitraflex-primary); 
	transition:.3s ease;
}



/*Styling for Single Project Page*/
/*To style the scrollbar for Highlights section - You can add class "highlighs-section" to any section, row etc to style the Scrollbar*/
.highlights-section ::-webkit-scrollbar {
	width: 10px;
    height: 10px;
}
.highlights-section ::-webkit-scrollbar-thumb {
	background-color: #d8d3d3;
	border-radius: 100px
}
/*End styling scrollbar*/
/*Animation for the text shown on hover for image*/
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

/*END HERE*/


/*Styling for Portfolio Page*/
/*To style the Portfolio Gird for both Portfolio Modules*/
.amitraflex-portfolio .et_pb_portfolio_item, .amitraflex-portfolio-2 .et_pb_grid_item{
    margin-right: 30px !IMPORTANT;
	border-radius:10px;
	box-shadow:0px 5px 20px rgb(0 0 0 / 6%);
	padding: 0 0 40px 0;
	transition:.2s ease;
	background: var(--amitraflex-white);
}
/*Potfolio Modules 3 Column Width Settings*/
@media only screen and ( min-width: 768px ) {
.amitraflex-portfolio .et_pb_grid_item, .amitraflex-portfolio-2 .et_pb_grid_item {
width: 30.333% !important;
margin: 0 3.5% 3.5% 0 !important;
}
.amitraflex-portfolio .et_pb_grid_item:nth-child(3n), .amitraflex-portfolio-2 .et_pb_grid_item:nth-child(3n) {
margin-right: 0 !important;
}
.amitraflex-portfolio .et_pb_grid_item:nth-child(3n+1), .amitraflex-portfolio-2 .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
.amitraflex-portfolio .et_pb_grid_item:nth-child(4n+1), .amitraflex-portfolio-2 .et_pb_grid_item:nth-child(4n+1) {
clear: unset !important;
}
}
/*Adjusting the Portfolio for different screen sizes*/
@media only screen and ( max-width: 479px ) {
.amitraflex-portfolio .et_pb_portfolio_item, .amitraflex-portfolio-2 .et_pb_grid_item{
	width: 91%!important;
}
}
@media only screen and ( min-width: 480px ) and ( max-width: 555px ) {
.amitraflex-portfolio .et_pb_portfolio_item, .amitraflex-portfolio-2 .et_pb_grid_item{
	width: 43%!important;
}
}
@media only screen and ( min-width: 556px ) and ( max-width: 666px ) {
.amitraflex-portfolio .et_pb_portfolio_item, .amitraflex-portfolio-2 .et_pb_grid_item{
	width: 44%!important;
}
}
@media only screen and ( min-width: 667px ) and ( max-width: 767px ) {
.amitraflex-portfolio .et_pb_portfolio_item, .amitraflex-portfolio-2 .et_pb_grid_item{
	width: 45%!important;
}
}
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
.amitraflex-portfolio .et_pb_portfolio_item, .amitraflex-portfolio-2 .et_pb_grid_item{
	width: 45%!important;
}
}
/*To add hover effect to Portfolio Grid*/
.amitraflex-portfolio .et_pb_portfolio_item:hover, .amitraflex-portfolio-2 .et_pb_grid_item:hover{
	box-shadow:0px 10px 50px rgb(0 0 0 / 15%);
	transform:translate(0%,-3%)
}
/*To add button on Hover for Portfolio Grid*/
.amitraflex-portfolio .et_portfolio_image:hover:before, .amitraflex-portfolio-2 .et_portfolio_image:hover:before{
	content: "View Details";
    position: absolute;
    top: 45%;
    left: 32%;
    z-index: 2;
    background: var(--amitraflex-white);
    border-radius: 100px;
    padding: 10px 20px;
    color: var(--amitraflex-black);
    font-weight: bold;
    box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.29);
	-webkit-animation: fade-in-bottom 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/*Adjusting the Portfolio Filter buttons for Mobile*/
@media only screen and  (max-width: 767px){
.et_pb_filterable_portfolio .et_pb_portfolio_filters li {
    width: auto !Important;
}
.et_pb_portfolio_filters li a {
	padding: 7px 10px !important;
    margin: 0 5px !IMPORTANT;
    font-size: 10px !Important;
}
}
/*Styling the Portfolio Filter buttons*/
.et_pb_portfolio_filters li a {
    color: var(--amitraflex-primary) !Important;
    border: 2px solid var(--amitraflex-primary) !Important;
    border-radius: 5px !important;
    padding: 13px 25px !Important;
	margin: 0 7px !Important;
	transition:.3s ease;
	margin-bottom:10px !Important;
}
/*Hover for portflio buttons*/
.et_pb_portfolio_filters li a:hover {
   background-color: rgba(var(--amitraflex-primary-rgb), 0.1) !Important;
}
/*For active Portfolio Filter Button*/
.et_pb_portfolio_filters li a.active {
    background: var(--amitraflex-primary);
    border-radius: 5px;
    color: var(--amitraflex-white) !Important;
    border: 2px solid var(--amitraflex-primary);
    box-shadow: 0px 5px 13px rgb(0 0 0 / 20%);
}
/*Styling the Portfolio Pagination*/
.et_pb_portofolio_pagination{
	border:none !important;
}
.et_pb_portofolio_pagination a {
    font-weight: 700;
    font-size: 15px;
    color: var(--amitraflex-black)!important;
    padding: 10px 15px;
    border: 2px solid var(--amitraflex-primary);
    border-radius: 5px;
	transition:.3s ease;
}
.et_pb_portofolio_pagination ul li a.active{
    background: var(--amitraflex-primary);
    color: var(--amitraflex-white) !IMPORTANT;
}
/*END HERE*/


/*CSS for Showcase Page*/
/*To hide the "View Demo" text by default*/
.demo-text{
  opacity:0;
}
/*To show it on hover*/
.image:hover .demo-text{
  opacity:1;
  transition: .2s ease;
}
mark-showcase{
  background: rgba(var(--amitraflex-primary-rgb), 0.2);
  padding:9px 30px;
  border-radius:100px;
  color:var(--amitraflex-primary);
}
mark1-showcase{
  background: var(--amitraflex-primary);
  padding:9px 30px;
  border-radius:100px;
  color:var(--amitraflex-white);
}
/*To add a close Icon when clicked on the Info Floating Icon on SHowcase Page*/
.open:before{
  content:"\4d";
  position:absolute;
  font-family:ETMOdules;
  z-index:999;
  background:var(--amitraflex-white);
  padding:5px;
  font-size:30px;
  right:8px;
  color:var(--amitraflex-primary);
  font-weight:bold;
}
/*To Style the Video Play Button*/
.et_pb_video_play:before {
  font-family: ETmodules;
  content: "\45";
  background: var(--amitraflex-white);
  color: var(--amitraflex-primary);
  font-size:60px;
  padding: 20px;
  border-radius:100px;
  box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.47), 0px 2px 20px rgba(0,0,0,0.28); 
  transition:.3s ease;
}
/*Hover animation for the play button*/
.et_pb_video_play:hover:before {
  transform:scale(1.1) !Important;
  box-shadow: 0px 0px 0px 20px rgba(255,255,255,0.47), 0px 2px 40px rgba(0,0,0,0.28);  
}


#page-container {
    overflow-x: hidden;
 }
/*Styliing the Woo Notices all over the site*/
.woocommerce-error, .woocommerce-info, .woocommerce-message, .som-password-sent-message {
    background: var(--amitraflex-white) !important;
    box-shadow: 1px 10px 40px -15px rgba(25, 25, 26, 0.17)!important;
    color: var(--amitraflex-black) !IMPORTANT;
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 2px solid var(--amitraflex-border) !important;
    border-radius: 6px;
}
/*Forgot Password Page - Notice message*/
.som-password-sent-message{
    padding: 15px;
    padding-bottom: 15px !IMPORTANT;
}
/*Changing the link color in the notice*/
.woocommerce .woocommerce-error a, .woocommerce .woocommerce-info a, .woocommerce .woocommerce-message a{
    color: var(--amitraflex-primary)!important;
}
/**
 * ============================================================================
 * END SECTION: BLOG PAGE STYLES
 * ============================================================================
 */

/**
 * ============================================================================
 * SECTION: WOOCOMMERCE SHOP & PRODUCT STYLES
 * ============================================================================
 * Purpose: Styles for WooCommerce shop pages, product listings, and product pages
 * Includes: Add to cart buttons, star ratings, product cards, filters, pagination
 * ============================================================================
 */

/*This will remove the Hover Icon from Shop Module Add to Cart buttons*/
.woocommerce a.button.add_to_cart_button:after, a.button.product_type_simple:after, a.button.product_type_grouped:after, a.button.product_type_external:after{
	display:none;
}
/*To Style the Add to Cart button in the Shop Module*/
.et_pb_shop a.button.add_to_cart_button, .et_pb_shop a.button.product_type_simple, .et_pb_shop a.button.product_type_grouped, .et_pb_shop a.button.product_type_external{
    background: var(--amitraflex-primary);
    padding: 6px 15px;
    color: var(--amitraflex-white) !IMPORTANT;
    border-radius: 5px;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2);
	transition:.2s ease;
	text-transform: uppercase;
    font-weight: bold;
    font-size: 13px;

}
/*Hover Styling for the Shop Module Add to Cart button*/
.et_pb_shop a.button.add_to_cart_button:hover, .et_pb_shop a.button.product_type_simple:hover, .et_pb_shop a.button.product_type_grouped:hover, .et_pb_shop a.button.product_type_external:hover{
	background: var(--amitraflex-primary);
	box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.3);
	transform:translate(0%,-7%)
}
/*To hide the View Cart button in Shop Module when product is added to cart*/
.woocommerce a.added_to_cart{
	display:none;
}
/*To style the Star Rating on the Shop Module*/
.et_pb_shop .star-rating{
   background:var(--amitraflex-white);
   position:absolute;
   top:10px;
   right:10px;
   border-radius:100px;
   display:block;
   width:90px !Important;
   height:20px;
   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.13);
}
/*Tweaks for Star Rating on Shop Module*/
.et_pb_shop .star-rating:before{
	margin-left: 12px !important;
    margin-top: 3px !Important;
}
.et_pb_shop .star-rating>span:before{
    margin-left: 12px !important;
    margin-top: 3px !Important;
}

/*This will add hover effect to Shop Module Product Card*/
.et_pb_shop li.product:hover{
	transform:scale(1.05);
	box-shadow:0px 10px 40px var(--amitraflex-border);
}
/*To add transition to the hover effect*/
.et_pb_shop li.product{
    transition:.2s ease;
	padding:15px !important;
	border-radius:7px;
}

/*Styling for the Homepage*/

/*This will hide the content in normal state for Essential Collection content*/
.amitraflex-collection-card-content{
	opacity:0;
}
/*This will show the content on hover for essential collection cards*/
.amitraflex-collection-card:hover .amitraflex-collection-card-content{
	opacity:1;
	-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/*Styling for the Active Testimonial Tab on Homepage*/
.active-testimonial-tab {
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.11);
    background: var(--amitraflex-white);
    transition: .2s ease;
}
/*Content Animation for the Tabbed Testimonial on Homepage*/
.amitraflex-tab-testimonials-content-1, .amitraflex-tab-testimonials-content-2, .amitraflex-tab-testimonials-content-3{
	-webkit-animation: fade-in-bottom 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/*Styling for Shop Page*/
/*Adjusting the Checkbox in the Filter Category checkbox*/
.wpf_item input[type="checkbox"] {
    border: 2px solid #555555 !important;
	border-radius: 100px !important;
}
/*Styling the Icon on the Checked checkboxin Filter*/
.wpf_item input[type="checkbox"]:checked:before{
    content: "\4e" !IMPORTANT;
    font-family: 'ETmodules' !Important;
    font-size: 12px;
    position: relative;
    top: .2px;
    left: -.5px;
    font-weight: 900;
}
/*This will change the price range color*/ 
.wpf_slider.ui-slider .ui-widget-header {
    background: var(--amitraflex-primary) !important;
}
/*This wil adjust the Color filter*/
.wpf_color_icons li label{
	color: transparent !important;
    width: 30px !IMPORTANT;
    height: 30px !important;
    display: block;
    border-radius: 100px !important;
}
/*Styling the Item count in the Filter*/
.wpf_item_count {
    background: var(--amitraflex-primary) !Important;
    color: var(--amitraflex-white) !important;
    top: -47px;
    right: -26px;
    border-radius: 100%;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.16);
    font-weight: 800;
    font-size: 9px;
}

/*Styling the Woo Pagination*/

/*This will remove the border from the pagination*/
.woocommerce nav.woocommerce-pagination ul{
	border:none !important
}
/*Adjusting the page numbers in the pagination*/
.page-numbers{
	padding: 10px 14px !important;
	font-weight: 700 !Important;
}
/*Styling the page numbers in the pagination*/
nav.woocommerce-pagination ul li{
	border:none !important;
	background: rgba(var(--amitraflex-primary-rgb), 0.12);
    color: var(--amitraflex-primary);
    margin: 0 5px !Important;
    border-radius: 100px;
    font-family: var(--amitraflex-font-family);
	transition:.2s ease;
}
/*Hover Styling the page numbers in the pagination*/
nav.woocommerce-pagination ul li:hover{
	transform:scale(1.05) !important
}
/*Hover Styling the page numbers Link in the pagination*/
nav.woocommerce-pagination ul li a:hover{
	background: rgba(var(--amitraflex-primary-rgb), 0.12) !important;
    color: var(--amitraflex-primary) !important;
}
/*Styling the Current page number in the pagination*/
nav.woocommerce-pagination ul li span.current{
	background: var(--amitraflex-primary) !Important;
    color: var(--amitraflex-white) !important;
}
/*/*Adjusting the Prev and Next Arrow in the pagination*/
.page-numbers .next, .page-numbers .prev {
    padding: 10px 10px !important;
}

/*Styling for Buttons All over the site*/
.amitraflex-login-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
    pointer-events: none;
}

.amitraflex-login-modal.is-visible {
    display: flex;
}

.amitraflex-login-modal__overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}

.amitraflex-login-modal__panel {
    position: relative;
    width: min(340px, calc(100% - 1.5rem));
    background: #1f1f22;
    color: var(--amitraflex-white);
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(15, 15, 18, 0.4);
    margin: 5.5rem 1rem 1rem;
    pointer-events: auto;
    animation: amitraflex-login-slide-in 0.28s ease-out;
    overflow: hidden;
}

@keyframes amitraflex-login-slide-in {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.amitraflex-login-modal__header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.amitraflex-login-modal__header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.amitraflex-login-modal__google-icon {
    flex-shrink: 0;
}

.amitraflex-login-modal__header-text {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amitraflex-login-modal__close {
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 12px rgba(0, 0, 0, 0.18);
}

.amitraflex-login-modal__close-icon {
    width: 14px;
    height: 14px;
    position: relative;
}

.amitraflex-login-modal__close-icon::before,
.amitraflex-login-modal__close-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transform-origin: center;
}

.amitraflex-login-modal__close-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.amitraflex-login-modal__close-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.amitraflex-login-modal__close:hover,
.amitraflex-login-modal__close:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    color: var(--amitraflex-white);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.amitraflex-login-modal__content {
    padding: 16px;
    display: grid;
    gap: 16px;
}

.amitraflex-login-modal__account-info {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.amitraflex-login-modal__account-info.is-visible {
    display: flex;
}

.amitraflex-login-modal__account-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5B77FF 0%, #8E67FF 100%);
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--amitraflex-white);
    overflow: hidden;
}

.amitraflex-login-modal__account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.amitraflex-login-modal__account-details {
    min-width: 0;
}

.amitraflex-login-modal__account-name {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--amitraflex-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amitraflex-login-modal__account-email {
    font-size: 12px;
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amitraflex-login-modal__cta .nsl-container {
    width: 100%;
}

.amitraflex-login-modal__cta .nsl-button {
    width: 100%;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    min-height: 44px;
    background: #1a73e8;
    color: var(--amitraflex-white);
    border: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.amitraflex-login-modal__cta .nsl-button:hover {
    background: #1765cc;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(26, 115, 232, 0.3);
}

.amitraflex-login-modal__cta .nsl-button:active {
    background: #1557b0;
    transform: translateY(0);
    box-shadow: none;
}

.amitraflex-login-modal__disclaimer {
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    text-align: center;
}

.amitraflex-login-modal__disclaimer a {
    color: #8ab4f8;
    text-decoration: none;
}

.amitraflex-login-modal__disclaimer a:hover {
    text-decoration: underline;
}

.amitraflex-login-modal-open {
    /* Scrolling enabled - no overflow restriction */
    scroll-behavior: auto;
}

/* ------------------------------------------------------------------ */
/* Account bubble avatar (Divi header trigger) */
/* FULLY ADAPTIVE - automatically matches any Divi icon/blurb size */
/* Works with: 30px, 50px, 100px, 150px or any custom size */
.logged-in .amitraflex-account-trigger {
    /* 
     * --avatar-size is automatically set by JavaScript based on Divi icon size
     * Fallback: 40px if JS hasn't run yet
     */
    --avatar-size: 40px;
    
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Fully adaptive size - inherits from Divi settings via JS */
    width: var(--avatar-size) !important;
    height: var(--avatar-size) !important;
    min-width: var(--avatar-size) !important;
    min-height: var(--avatar-size) !important;
    max-width: var(--avatar-size) !important;
    max-height: var(--avatar-size) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    background: rgba(31, 31, 34, 0.65) !important;
    border: 2px solid rgba(255, 255, 255, 0.55) !important;
    overflow: hidden !important;
    line-height: 1 !important;
    font-size: 0 !important;
    
    /* Perfect center alignment */
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
    color: transparent !important;
}

/* Divi Icon module - adaptive */
.logged-in .et_pb_icon.amitraflex-account-trigger {
    text-align: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* Divi Blurb module - adaptive */
.logged-in .et_pb_blurb.amitraflex-account-trigger,
.logged-in .et_pb_blurb .amitraflex-account-trigger {
    text-align: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* Hide ALL inner Divi elements - complete takeover */
.logged-in .amitraflex-account-trigger .et_pb_icon_wrap,
.logged-in .amitraflex-account-trigger .et-pb-icon,
.logged-in .amitraflex-account-trigger .et_pb_blurb_content,
.logged-in .amitraflex-account-trigger .et_pb_main_blurb_image,
.logged-in .amitraflex-account-trigger .et-pb-icon-circle,
.logged-in .amitraflex-account-trigger .et-pb-icon-circle-inner,
.logged-in .amitraflex-account-trigger img,
.logged-in .amitraflex-account-trigger > *:not(.amitraflex-account-dropdown) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hover state */
.logged-in .amitraflex-account-trigger:hover {
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 8px 18px rgba(15, 15, 18, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
}

/* Avatar image via pseudo-element */
.logged-in .amitraflex-account-trigger::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    z-index: 1 !important;
    transition: background-image 0.2s ease, background-color 0.2s ease !important;
}

.amitraflex-account-dropdown {
    position: absolute;
    top: calc(100% + 22px);
    right: 0;
    min-width: 200px;
    background: linear-gradient(160deg, rgba(var(--amitraflex-primary-rgb), 0.94) 0%, rgba(255, 120, 84, 0.92) 60%, rgba(31, 31, 34, 0.92) 100%);
    color: var(--amitraflex-white);
    border-radius: 12px;
    box-shadow: 0 20px 42px rgba(15, 15, 18, 0.3);
    padding: 10px 0;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 9999;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .amitraflex-account-dropdown {
        margin-right: 20px;
        min-width: 180px;
    }
}


.logged-in .amitraflex-account-trigger-wrapper {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

.logged-in .amitraflex-account-trigger-wrapper:hover .amitraflex-account-dropdown,
.amitraflex-account-dropdown.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.amitraflex-account-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: linear-gradient(160deg, rgba(var(--amitraflex-primary-rgb), 0.94) 0%, rgba(255, 120, 84, 0.92) 60%, rgba(31, 31, 34, 0.92) 100%);
    transform: rotate(45deg);
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.08);
}

.amitraflex-account-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease, transform 0.2s ease;
    position: relative;
}

.amitraflex-account-dropdown__item:hover,
.amitraflex-account-dropdown__item:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: var(--amitraflex-white);
    padding-left: 24px;
    transform: translateX(2px);
}

.amitraflex-account-dropdown__item::before {
    content: '';
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
}

.amitraflex-account-dropdown__item--logout {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 6px;
    padding-top: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.amitraflex-account-dropdown__greeting {
    padding: 12px 20px 10px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 6px;
}

.amitraflex-account-dropdown__item--dashboard::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3zm10 0h8v5h-8V3zM3 13h8v8H3v-8zm10-3h8v11h-8V10z' fill='%23fff'/%3E%3C/svg%3E");
}

.amitraflex-account-dropdown__item--orders::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 6V5a5 5 0 0110 0v1h3v15H4V6h3zm2-1a3 3 0 016 0h-6zm-1 3v11h10V8h-2v1a1 1 0 11-2 0V8h-4v1a1 1 0 11-2 0V8H8z' fill='%23fff'/%3E%3C/svg%3E");
}

.amitraflex-account-dropdown__item--track::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 4.42 7 13 7 13s7-8.58 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z' fill='%23fff'/%3E%3C/svg%3E");
}

.amitraflex-account-dropdown__item--logout::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3h2v4h-2V5H5v14h5v-2h2v4H3V3h7zm6.293 5.293L17.586 9H11v2h6.586l-1.293 1.293 1.414 1.414L22.414 10l-4.707-4.707-1.414 1.414z' fill='%23fff'/%3E%3C/svg%3E");
}

.amitraflex-account-dropdown__item--logout:hover {
    background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 600px) {
    .amitraflex-login-modal {
        align-items: flex-end;
        justify-content: center;
    }

    .amitraflex-login-modal__panel {
        width: calc(100% - 1.5rem);
        margin: 0 0 1rem;
        border-radius: 18px;
        animation: amitraflex-login-slide-up 0.28s ease-out;
    }

    @keyframes amitraflex-login-slide-up {
        from {
            opacity: 0;
            transform: translateY(18px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .amitraflex-login-modal__content {
        padding: 16px;
        gap: 14px;
    }
}

/**
 * ============================================================================
 * SECTION: BUTTON STYLES (GLOBAL)
 * ============================================================================
 * Purpose: Global button styling applied across the entire site
 * Includes: Button colors, hover effects, padding, border radius, transitions
 * ============================================================================
 */

.woocommerce-form-login .woocommerce-form-login__submit, .woocommerce-form-register__submit, a.button.view, a.wshkcomment, #reset-pass-submit, .amitraflex-wishlist .button, .tinvwl_added_to_wishlist.tinv-modal button.button, .woocommerce #review_form #respond .form-submit input, .dgwt-wcas-pd-addtc-form .button{
	background: var(--amitraflex-primary);
    color: var(--amitraflex-white) !important;
    padding: 8px 20px !important;
    border-radius: 5px!important;
    box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 20%) !important;
    transition: .2s ease !important;
    font-size: 13px!important;
    text-transform: uppercase;
    font-weight: 700!important;
}
/*Hover styling for all the Buttons*/
.woocommerce-form-login .woocommerce-form-login__submit:hover, .woocommerce-form-register__submit:hover, a.button.view:hover, a.wshkcomment:hover, #reset-pass-submit:hover, .amitraflex-wishlist .button:hover, .tinvwl_added_to_wishlist.tinv-modal button.button:hover, .woocommerce #review_form #respond .form-submit input:hover, .dgwt-wcas-pd-addtc-form .button:hover{
	background: var(--amitraflex-primary);
    padding: 8px 20px;
    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
	transform:translate(0%,-5%)
}
/*To remove the hover icon on all buttons*/
.woocommerce-form-login .woocommerce-form-login__submit:after, a.button.view:after, a.wshkcomment:after, .amitraflex-wishlist .button:after, .woocommerce-form-register__submit:after, .tinvwl_added_to_wishlist.tinv-modal button.button:after, .dgwt-wcas-pd-addtc-form .button:after{
    display:none !important;
}
.select2-dropdown {
	border: 2px solid var(--amitraflex-border);
}
.select2-results__option[aria-selected], .select2-results__option[data-selected] {
    margin: 0 10px;
    padding: 10px;
	border-radius: 5px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--amitraflex-primary);
}
/**
 * ============================================================================
 * END SECTION: BUTTON STYLES (GLOBAL)
 * ============================================================================
 */

/**
 * ============================================================================
 * SECTION: FORM INPUT & FIELD STYLES
 * ============================================================================
 * Purpose: Styles for form inputs, textareas, labels, checkboxes across the site
 * Includes: WooCommerce form fields, input styling, label styling, checkbox customization
 * ============================================================================
 */

/*Styling Woo Input Feilds*/
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
    border-radius: 5px;
    border: 2px solid var(--amitraflex-border);
	transition:.2s ease;
	background:transparent;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, input.text, input.title, input[type=email], input[type=password], input[type=tel], input[type=text], select, textarea {
    padding: 15px;
    width: 100%;
}
/*Hover styling for the Inpurt Feilds*/
.woocommerce form .form-row input.input-text:hover, .woocommerce form .form-row textarea:hover, input.text:hover, input[type=email]:hover, input[type=password]:hover, input[type=tel]:hover, input[type=text]:hover, select:hover, textarea:hover{
    border: 2px solid #2558ab;
}
/*Styling for Labels on Input Fields*/
.woocommerce form .form-row label, label{
    color: rgba(0, 0, 0, 0.39) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    font-weight: 700;
}
/*Styling the Woo Checkbox*/
.woocommerce form .form-row label.checkbox input, .woocommerce-form-login input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none!important;
    display: inline-block!important;
    position: relative;
    background-color: #E8EBEB;
    color: #19191a;
    top: 0;
    vertical-align: middle;
    height: 22px;
    width: 22px;
    box-shadow: 0 0 1px #19191a;
    border-radius: 50px;
    cursor: pointer;
    margin: 0px 7px 0 0;
    outline: none;
    transition: all .2s ease-in-out;
}
/*Hover effect for the Woo Checkbox*/
.woocommerce form .form-row label.checkbox input:hover, .woocommerce-form-login input[type=checkbox]:hover {
    transform:scale(1.15) !important
}
/*Adding tick Icon when checkbox is checked*/
.woocommerce form .form-row label.checkbox input:checked::before, .woocommerce-form-login input[type=checkbox]:checked:before {
	content: '\4e'!IMPORTANT;
    position: absolute;
    font-size: 14px!important;
    font-family: 'ETmodules';
    font-weight: 700;
    left: 3.5px;
    top: 5px;
	animation:.2s;
}
.woocommerce table.shop_table th {
    text-transform: uppercase !important;
    font-size: 12px !important;
    color: #9C9C9C !important;
}

/**
 * ============================================================================
 * SECTION: SINGLE PRODUCT PAGE STYLES
 * ============================================================================
 * Purpose: Styles specific to individual product pages
 * Includes: Product images, variation buttons, tabs, reviews, form fields
 * ============================================================================
 */

/*Styling for Single Product Page*/
/*Adds White background to the Product Main Image*/
.woocommerce div.product div.images .woocommerce-product-gallery__image {
    background: var(--amitraflex-white) !important;
}
/*Adds white background to gallery images*/
.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
    background: var(--amitraflex-white);
}
/*Adds Padding  to gallery images*/
.woocommerce div.product div.images img {
    padding: 20px;
}
/*Styling the Reset variation button*/
.reset_variations {
    float: left !important;
    margin: 2em 0 1em 0 !important;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 4px;
	transition:.2s ease !important;
}
/*Hover Styling the Reset variation button*/
.reset_variations:hover{
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.12);
	transform:scale(1.1)
}
/*Adjustments & Styling to the Tabs On Product Page*/
.et_pb_tabs_controls li, ul.et_pb_tabs_controls:after, .et_pb_tabs, .et_pb_wc_tabs{
	border:none;
}
ul.et_pb_tabs_controls {
    background-color: transparent;
	margin-bottom: 25px;
}
.et_pb_tabs_controls li{
    border: none;
    margin: 10px;
}
/*Styling for the Tab Items*/
.et_pb_tabs_controls li a{
    padding: 13px 25px;
    border-radius: 5px;
	transition:.2s ease;
}
/*Hover background color for the Tab Item*/
.et_pb_tabs_controls li a:hover{
    background:var(--amitraflex-border);
}
/*Styling Active Tab */
.et_pb_tab_active  {
    box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.13);
    border-radius: 5px !IMPORTANT;
	transition:.2s ease;
	transform:scale(1.1)
}
/*Adjusting the Active tab hover effect.*/
.et_pb_tab_active a:hover{
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.07);
}
/*Some adjustments to the tabs*/
.et_pb_all_tabs {
    border-radius: 10px;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.12);
}
/*Styling the Reviews on Product Page*/
.woocommerce-page #reviews #comments ol.commentlist li {
    margin: 10px;
    padding-top: 70px;
    padding-bottom: 5px;
    width: 45%;
	margin-bottom: 40px!important;
    display: inline-grid;
    padding-left: 5px;
    padding-right: 20px;
    border-radius: 10px;
	box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.26);
    transition: .2s ease;	
}
/*Hover effect to the Reviews on Product Page*/
.woocommerce-page #reviews #comments ol.commentlist li:hover {
transform: scale(1.03);
}
/*Styling the Avatar Image on Reviews on Product Page*/
.woocommerce #reviews #comments ol.commentlist li img.avatar{
    border-radius: 100px;
    margin: 10px;
	position: relative;
    margin-top: -105px;
	border: 8px solid var(--amitraflex-white);
	box-shadow: 0px 19px 10px rgba(0, 0, 0, 0.12);
}
/*Adjustments to the Tabs*/
.woocommerce-page #reviews #comments ol.commentlist li .comment-text {
    margin: 15px 0 0 10px !important;
}
/*Changing the colors of Star Rating*/
.woocommerce .star-rating span::before {
    color: var(--amitraflex-primary) !IMPORTANT;
}
.woocommerce #review_form #respond p {
    margin: 0px 5px 10px 0px;
}
/*Styling the "Text area" field*/
.woocommerce #review_form #respond textarea, #commentform input[type="email"], #commentform input[type="text"], #commentform input[type="url"], #commentform textarea {
    font-size: 14px;
    line-height: 1.7em;
    color: var(--amitraflex-black);
    font-weight: 600;background: var(--amitraflex-white);
    border: 2px solid var(--amitraflex-border);
}
/*Styling the Reply Title*/
.comment-reply-title{
	font-size: 25px;
    font-weight: 700;
    color: var(--amitraflex-black);
}




/*Styling for FAQ Page*/
/*Adds active indication to Tabs on FAQ Page*/
.amitraflex-active-faq{
	box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.04);
    transform: scale(1.1);
	border-radius:10px;
}
/*Changes Heading Styles on Active Tab on FAQ Page*/
.amitraflex-active-faq h3{
	color:var(--amitraflex-primary) !important;
	font-weight:700 !important;
	transition:.2s ease;
}


/*To add the New symbol on the Menu Item*/
@media only screen and ( min-width: 1100px ) { 
.amitraflex-new-icon:before{
    content: "New";
    position: absolute;
    top: 14px;
    font-size: 10px;
    right: -20px;
    background: var(--amitraflex-primary);
    color: var(--amitraflex-white);
    padding: 0px 3px 11px 3px;
    height: 15px;
    width: 35px;
    text-align: center;
    transform: scale(.8);
    font-weight: 800;
    text-transform: uppercase;
	border-radius: 3px;
}
.main:before{
    right: -3px;
    padding: 3px 3px 3px 3px;
    text-align: center;
    transform: scale(.7);
}
}
/*To add Updated Text to Menu Item in Green color*/
.updated-text:before{
	content:"Updated" !important;
	width: 55px;
    background: green;
}
/*Creating a Pages toggle on Showcase Page*/
.all-pages, .the-new{
	color:rgba(0, 0, 0, 0.48) !important;
}
.all-pages:hover, .the-new:hover{
	color:rgba(0, 0, 0, 0.48) !important;
	background:var(--amitraflex-primary) !important;
}
.active-pages-toggle{
	background:var(--amitraflex-primary) !important;
	color:var(--amitraflex-white) !important;
	box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.36);
}

/**
 * ============================================================================
 * END SECTION: FORM INPUT & FIELD STYLES
 * ============================================================================
 */

/*Fixing Mega Menu*/

.et-menu-nav li.mega-menu>ul:after{
display:none;
}
.et-menu-nav li.mega-menu>ul{
width:100% !important;
}
.et-menu-nav li.mega-menu.mega-menu-parent li>.sub-menu:after{
display:none;
}
.et-menu-nav li.mega-menu.mega-menu-parent li>.sub-menu {
box-shadow: none !important;
background:transparent !important;
}

/*Fixing Issue with Content Switches*/
.monthly-button, .featured-button {
	z-index:20;
}

/* Active button state styling */
.recent-button.active-blog,
.featured-button.active-blog {
	background-color: #ff6b35 !important; /* Orange background for active */
	color: #ffffff !important; /* White text */
	border-color: #ff6b35 !important;
	font-weight: 600 !important;
	transform: scale(1.05); /* Slightly larger */
	box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
}

/* Inactive button state - subtle styling */
.recent-button,
.featured-button {
	background-color: transparent !important;
	color: #333333 !important;
	border: 2px solid #e0e0e0 !important;
	transition: all 0.3s ease !important;
	cursor: pointer;
}

/* Hover state for non-active buttons */
.recent-button:not(.active-blog):hover,
.featured-button:not(.active-blog):hover {
	background-color: #f5f5f5 !important;
	border-color: #ff6b35 !important;
	color: #ff6b35 !important;
}


/*Make the Product Full-width on mobile -- Change the width to 50% and Margin-Right to 0% If you want to have 2 columns on mobile for Shop Module */ 
@media only screen and ( max-width: 479px ) {
.et_pb_shop ul.products.columns-1 li.product, .et_pb_shop ul.products.columns-2 li.product, .et_pb_shop ul.products.columns-3 li.product, .et_pb_shop ul.products.columns-4 li.product, .et_pb_shop ul.products.columns-5 li.product, .et_pb_shop ul.products.columns-6 li.product {
    width: 50% !important;
    margin-right: 0 !important;
}
}




/* General WooCommerce table styling */
.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th {
    border-top: 1px solid rgba(238, 238, 238, 0.48) !important;
}


/*To make the Mobile Menu Scrollable*/
.et_pb_menu .et_mobile_menu {
    height: auto;
    overflow: auto;
}

.woocommerce table.shop_table td {
    padding-top: 20px !important;
}


.et_pb_shop .et_overlay{
	display:none;
}

/*Fixing Sub Sub Menu not working correctly*/

.nav li li ul {
    left: 200px;
}


/* WooCommerce Sale Badge Enhancements */
.sale-icon:before {
    font-family: "ETmodules" !important;
    content: "\e018";
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.woocommerce-page ul.products li.product span.onsale,
.woocommerce ul.products li.product span.onsale {
    padding: 0 10px !important;
    font-size: 14px;
    background: var(--amitraflex-success) !important;
}

.woocommerce-page ul.products li.product span.onsale.sold-out,
.woocommerce ul.products li.product span.onsale.sold-out,
.woocommerce span.onsale.sold-out {
    background: var(--amitraflex-black) !important;
    color: var(--amitraflex-white) !important;
}

/* Responsive Column Helpers */
@media only screen and (max-width: 479px) {
    .two-columns .et_pb_column,
    .three-columns .et_pb_column {
        width: 50% !important;
    }

    .four-columns .et_pb_column {
        width: 25% !important;
    }
}

@media only screen and (max-width: 980px) {
    .two-columns .et_pb_column {
        width: 50% !important;
    }

    .three-columns .et_pb_column {
        width: 33.33% !important;
    }

    .four-columns .et_pb_column {
        width: 25% !important;
    }
}

.two-columns .et_pb_column {
    padding-right: 2px;
    padding-left: 2px;
}

/* Adjust social login alignment */
div.nsl-container[data-align="left"] {
    text-align: center;
}

/**
 * ============================================================================
 * SECTION: SHIPROCKET INTEGRATION STYLES
 * ============================================================================
 * Purpose: Styles for Shiprocket pincode checker widget and shipping methods
 * ============================================================================
 */

input#shiprocket_pincode_check {
    padding: 15px;
    width: 200px;
    border: 1px solid #2ea3f2;
}

button#check_pincode {
    background-color: #2ea3f2;
    color: var(--amitraflex-white);
    padding: 10px;
    margin-left: 10px;
    border-radius: 20px;
    border-width: 2px;
    border-color: rgba(186, 217, 255, 1);
    border-style: solid;
    border-image: none;
    font-weight: 600;
}

div#pincode_response {
    margin-top: 10px;
    margin-bottom: 10px;
}

div#pincode_response strong {
    color: var(--amitraflex-primary);
}

/* Shipping Rate Result */
.woocommerce ul#shipping_method {
    margin-left: -150px;
}

@media only screen and (max-width: 479px) {
    .woocommerce ul#shipping_method {
        list-style: none outside;
        margin-left: -50px;
    }
}

/**
 * ============================================================================
 * END SECTION: SHIPROCKET INTEGRATION STYLES
 * ============================================================================
 */


/**
 * ============================================================================
 * END OF AMITRAFLEX THEME STYLES
 * ============================================================================
 */