/*
Theme Name: Fuel-Child-Theme
Author: 
Description: Your description goes here
Version: 1.0
Template: fuel

This is the child theme for Fuel theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/


    body{
    	overflow-x:hidden;
    }
    svg.wc-block-mini-cart__icon {
        font-size: 20px;
    }
    .left-footer-side p {
        margin: 14px auto !important;
    }
    .right-footer-side ul li {
        background: #3B5998;
        border-radius: 0px;
    }
    .right-footer-side ul li a {
        padding: 10px;
    }
    .right-footer-side ul li a svg {
        font-size: 30px;
        color: #fff !important;
    }
    .footer-secondnd-copyright p {
        padding: 20px 30px;
    }
    .cards-categories .wp-block-column {
        background: #fff;
        padding: 10px;
        border-radius: 12px;
        border: 1px solid var(--wp--preset--color--septenary);
        box-shadow: 0 3px 10px 0 rgb(15 16 18 / 10%), 0 12px 30px 0 rgb(15 16 18 / 10%);
    }
    .cards-categories .wp-block-column h3 a {
        font-size: 20px;
        font-weight: 500;
    }
    .cards-categories .wp-block-column h3 {
         margin:10px auto !important;
    }
    .cards-categories .wp-block-column img{
    		border-radius:10px;
    }
    footer{
    margin:0px !important;}
    .wp-block-navigation__responsive-container.is-menu-open{
    	width:20%;
      padding-left:20px;
    }
    .sub-menu-header ul:hover , .sub-menu-header ul {
        padding-top: 0px !important;
        margin-top: 10px !important;
        box-shadow:none !important;
        transform:translate(0) !important;
    }
    .wp-block-navigation__responsive-container-close {
        position: absolute;
        right: 10px;
        top: 20px;
        z-index: 2;
    }
    .sub-menu-header .wp-block-navigation-submenu__toggle {
        display: block !important;
        position: absolute;
        right: 0;
        top: 16px;
    }
    .wp-block-navigation__responsive-container.hidden-by-default{
    	scrollbar-width: none;
    }
    ul.wp-block-navigation__container.has-tiny-font-size.is-responsive.items-justified-left.is-style-default.wp-block-navigation.has-tiny-font-size{
    	width: 90%;
    }
    .sub-menu-header  ul.wp-block-navigation__submenu-container.sub-menu-header.wp-block-navigation-submenu{
        display:none !important;
    }
    .sub-menu-header  ul.wp-block-navigation__submenu-container.sub-menu-header.wp-block-navigation-submenu.sumenu-feild-itemsi-menu{
    display:block !important;}

    ul.wp-block-navigation__container.has-tiny-font-size.is-responsive.items-justified-left.is-style-default.wp-block-navigation.has-tiny-font-size , ul.wp-block-navigation__container.has-tiny-font-size.is-responsive.items-justified-left.is-style-default.wp-block-navigation.has-tiny-font-size .wp-block-navigation-item{
    	width: 90% !important;
    }
    .header-display-main-menu-desktop nav ul li button.wp-block-navigation__submenu-icon {
        right: -25px;
    }
    .sub-menu-header .wp-block-navigation-submenu__toggle svg {
        stroke: currentColor;
        font-size: 17px;
        height: 16px;
        width: 16px;
    }
    @media  (max-width: 1366px) {
    .header_menu  .sub-menu-header .wp-block-navigation-submenu__toggle{
        top: 15px;
    }
    }
    @media  (max-width: 1280px) {
    .wp-block-navigation__responsive-container.is-menu-open{
    	width:35%;
    }
    }
    @media  (max-width: 1100px) {
    .header_menu  .sub-menu-header .wp-block-navigation-submenu__toggle{
        top: 12px;
    }
    .header-display-main-menu-desktop nav ul {
        gap: 50px;
    }
    header .header_menu  nav ul{
     gap:50px;
    }
    }
    @media  (max-width: 992px) {
    .wp-block-navigation__responsive-container.is-menu-open{
    	width:50%;
    }
    }
    @media  (max-width: 660px) {
    .wp-block-navigation__responsive-container.is-menu-open{
    	width:80%;
    }
    }
    @media  (min-width: 962px) {
        .header-main-nav-menu-hide-dektop {
            display: none;
        }
    }
    @media  (max-width: 962px) {
        .header-display-main-menu-desktop {
            display: none;
        }
    }



        .calculator-container {
            background: rgba(255, 255, 255, 0.95);
            max-width: 50%;
            width: 100%;
            padding: 0 0 25px 0;
        }                                                   
        .calculator-container  h1 {
            text-align: center;
            color: #333;
            margin-bottom: 25px;
            font-size: 2.2em;
            font-weight: 700;
            background:#000;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            /*background: #999999;*/
            background-clip: text;
            margin-top: 0;
        }

        .calculator-container  .form-group {
            margin-bottom: 25px;
        }

        .calculator-container  label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
            font-size: 1.1em;
        }

        .calculator-container select {
            width: 100%;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: white;
            appearance: auto;
        }

        .calculator-container input {
            width: 89%;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: white;
        }
        .calculator-container input:focus, .calculator-container select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            transform: scale(1.02);
        }

        .calculator-container input:hover,.calculator-container select:hover {
            border-color: #667eea;
        }

        .calculator-container .calculate-btn {
            width: 100%;
            padding: 18px;
            /* background: linear-gradient(135deg, #c8e6c9 0%, #ffe0b2 100%); */
            background-color: #000;
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .calculator-container .calculate-btn:hover {
            transform: translateY(-2px);
            /*box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);*/
        }

        .calculator-container .calculate-btn:active {
            transform: translateY(0);
        }

        .calculator-container .result {
            margin-top: 30px;
            padding: 25px;
            background: #999999;
            border-radius: 15px;
            color: white;
            font-weight: 600;
            text-align: center;
            box-shadow: 0 10px 25px rgba(240, 147, 251, 0.3);
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
        }

        .calculator-container .result.show {
            opacity: 1;
            transform: translateY(0);
        }

        .calculator-container .result h3 {
            margin-bottom: 15px;
            font-size: 1.4em;
        }

        .calculator-container .result-details {
            background: rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 10px;
            margin-top: 15px;
        }

        .calculator-container .result-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 1.1em;
        }

        .calculator-container .result-item:last-child {
            margin-bottom: 0;
            font-weight: 700;
            font-size: 1.3em;
            border-top: 2px solid rgba(255, 255, 255, 0.3);
            padding-top: 15px;
            margin-top: 15px;
        }

        .calculator-container .input-group {
            display: flex;
            gap: 15px;
        }

        .calculator-container .input-group .form-group {
            flex: 1;
        }

        .calculator-container .product-info {
            background: rgba(102, 126, 234, 0.1);
            padding: 15px;
            border-radius: 10px;
            margin-top: 15px;
            font-size: 0.9em;
            color: #555;
        }

        @media (max-width: 600px) {
            .calculator-container {
                width: 100%;
                /*padding: 20px;*/
                max-width: 100%;
            }
            
            .calculator-container .input-group {
                flex-direction: column;
                gap: 0;
            }
            
            .calculator-container h1 {
                font-size: 1.8em;
            }
        }