*{
    margin: 0%;
    padding: 0%;
}
body{
    font-family: "Lato", sans-serif !important;
}
$Playfair_ff: "Playfair Display", serif;
.playfair_ff{
    font-family: "Playfair Display", serif !important;
}
.Yrsa{
    font-family: "Yrsa", serif !important;
}
$Yrsa: "Yrsa", serif !important;
$lato: "Lato", sans-serif;
.white_f{
    color: #FFF;
}
.white_f2{
    color: #DDDDDD;
}
.red_f{
    color: #C42126 !important;
}
.blue_f{
    color: #26245F;
}
.dark_f2{
    color: #3C3C3C;
}
.dark_f{
    color: #424242;
}
p{
    color: #424242;
}
.blue_bg{
    background: #26245F;
}
.w_70{
    width: 70%;
}
a{
    text-decoration: none !important;
}
.justify_text{
    text-align: justify;
}
.section_title{
    gap: 3%;
    h2{
        font-size: 38px;
        font-family: $Playfair_ff;
    }
}
.menu_active{
    color: #26245F;
    border-bottom: 3px solid #C42126;
    font-weight: 700;
    
}

.Page_Heading{
    color: #26245F;
    font-size: 38px;
    font-weight: 700;
    font-family: $Yrsa;
}

%banner_coman{
    width: 100%;
    height: 70vh;
      .container {
          height: 100%;
          display: flex;
          align-items: center;
          h1{
              font-size: 60px;
              font-weight: 700;
              color: #FFF;
              font-family: $Playfair_ff;
          }
          h5{
              color: #FFF;
              font-size: 24px;
              font-weight: 700;
          }
      }
}
// HEADER MENU
nav{
    ul{
        li{
            span{
                color: #3C3C3C;
                font-size: 18px;
                font-weight: 400;
                position: relative;
            }
            span::before{
                content: '';
                position: absolute;
                bottom: -2px;
                left: 0;
                width: 0;
                height: 2px;
                background: #C42126; /* Tweak the color if needed */
                border-radius: 0;
                transition: all 0.5s ease-in-out;
            }
            span:hover::before {
                width: 100%;
                border-radius: 0%;
              }
        }
    }
} 
.heade_drop_menu{
    h3{
        color: #26245F;
        font-size: 18px;
        font-weight: 500;
        font-family: $lato;
    }
    ul{
        li{
            a{
                color: #787792;
                font-size: 14px;
            }
        }
    }
}

/* General Styles */
.navbar {
    background-color: #ffffff;
    // box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.navbar-brand img {
    height: 55px;
}

.menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    box-shadow: -4px 0 6px rgba(0, 0, 0, 0.1);
    transition: right 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.mobile_view_menu{
    ul{
        background: transparent !important;
        border: none !important;
        li{
            list-style: circle;
            list-style-type: disc;
        }
    }
}

.menu.show {
    right: 0;
}

.navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.navbar-nav li {
    margin: 0px 0;
}

.navbar-nav .nav-link {
    font-size: 18px;
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
    color: #c42126;
}

/* Hamburger Menu */
.navbar-toggler {
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 0 !important;
    z-index: 1001 ;
}
.navbar-toggler:focus{
    box-shadow: none !important;
}

.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 18px;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: #C42126;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.navbar-toggler.active .hamburger span:nth-child(1) {
    transform: rotate(45deg) translateY(10px);
}

.navbar-toggler.active .hamburger span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler.active .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translateY(-10px);
}

/* Responsive Adjustments */
@media (min-width: 992px) {
    .menu {
        position: static;
        width: auto;
        height: auto;
        display: flex;
        justify-content: flex-end;
        background: none;
        box-shadow: none;
    }

    .menu.show {
        right: auto;
    }

    .navbar-nav {
        display: flex;
        align-items: center;
    }

    .navbar-nav li {
        margin: 0 15px;
    }

    .navbar-toggler {
        display: none;
    }
}


// MAIN BANNER SECTION
.main_page_banner{
    // position: relative;
    // background: url('../img/shreeji_main_banner.webp');
    width: 100%;
    height: 100%;
    margin-top: -110px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .banner_video{
        position: relative;
        width: 100%;
        height: 100%;
        video{
            width: 100%;
        }
    }
    // .overlay {
    //     position: absolute;
    //     top: 0;
    //     left: 0;
    //     width: 100%;
    //     height: 100%;
    //     background: rgba(0, 0, 0, 0.4); /* dark overlay */
    //     z-index: 2;
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //     }
    //     .text-slider {
    //     color: #fff;
    //     font-size: 2.5rem;
    //     text-align: center;
    //     position: relative;
    //     height: 60px;
    //     overflow: hidden;
    //     }

    //     .slide {
    //     opacity: 0;
    //     transition: opacity 1s ease-in-out;
    //     position: absolute;
    //     width: 100%;
    //     }

    //     .slide.active {
    //     opacity: 1;
    //     }
    // .Custome_Banner_Slider{
    //     position: absolute;
    //     background-color: red;
    //     height: 300px;
    // }

    .banner-container{
        position: relative;
        width: 100%;
        height: 104vh;
        overflow: hidden;
        .bg-video {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4); /* dark overlay */
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .text-slider {
            color: #fff;
            font-weight: 700;
            font-size: 3.5rem;
            text-align: center;
            position: relative;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }

        .slide {
            opacity: 0;
            transition: opacity 1s ease-in-out;
            position: absolute;
            width: 100%;
        }

        .slide.active {
            opacity: 1;
        }
    }

    .container {
        position: relative;
        z-index: 1;
        h1{
            font-size: 54px;
            width: 80%;
        }
        
        p{
            font-size: 16px;
            width: 50%;
        }
        .Get_Started_custome_btn{
            color: #C42126;
            background: #FFF;
            font-size: 16px;
            font-weight: 700;
            border-radius: 10px;
            padding: 10px 20px;
            // font-family: $hanker_famili;
            border: 1px solid #C42126;
            transition: 0.8s;
        }
        .Get_Started_custome_btn:hover svg path,
        .Get_Started_custome_btn:hover{
            color: #FFF;
            background: #C42126;
            fill: #FFF;
        }
    }
}

// ABOUT SHREEJI PROJECTS START
.About_Shreeji{
    .container{
        .Get_Started_custome_btn{
            color: #C42126;
            background: #FFF;
            font-size: 16px;
            font-weight: 700;
            border-radius: 10px;
            padding: 10px 20px;
            // font-family: $hanker_famili;
            border: 1px solid #C42126;
            transition: 0.8s;
        }
        .Get_Started_custome_btn:hover svg path,
        .Get_Started_custome_btn:hover{
            color: #FFF;
            background: #C42126;
            fill: #FFF;
        }
        .about_expect{
            border: 1px solid rgba(38, 36, 95, 0.8);
            border-radius: 5px;
        }
    }
}
// VECTORE PRODUCT SLIDER SECTION START
.Vectore_Slider{
    .swiper{
        p{
            font-size: 14px;
            text-transform: uppercase;
        }
    }
}
// OUR SERVICES SECTION START
.Our_Services{
    background: #222334;
    .service_part{
        width: 80%;
        margin: 0 auto;
        .svg_border{
            border: 1px solid #FFF;
            border-radius: 50%;
            height: 100px;
            width: 100px;
            padding: 26px;
        }
        h4{
            font-size: 22px;
            font-weight: 700;
        }
    }
    .Get_Started_custome_btn{
        color: #FFF;
        background: #222334;
        font-size: 16px;
        font-weight: 700;
        border-radius: 10px;
        padding: 10px 20px;
        // font-family: $hanker_famili;
        border: 1px solid #FFF;
        transition: 0.8s;
    }
    .Get_Started_custome_btn:hover svg path,
    .Get_Started_custome_btn:hover{
        color: #FFF;
        background: #C42126;
        fill: #FFF;
    }
}

// FEATURED SHREEJI MACHINES SECTION START
 .Featured_Shreeji {
    position: relative;

    .container {
        .custome_card {
            position: relative;
            border: 1px solid #26245F;
            border-radius: 5px;

            img {
                border-radius: 5px;
                transition: transform 0.5s ease-in-out;
            }

            .custome_btn_contain {
                position: absolute;
                background: #FFF;
                border-radius: 5px;
                border: 2px solid #FFF;
                z-index: 2;
                left: 50%;
                transform: translateX(-50%);
                width: 80%;
                bottom: -10%;
                transition: bottom 0.5s ease-in-out;

                .inner_blue_btn {
                    background: #26245F;
                    color: #FFF;
                    font-family: $Playfair_ff;
                    padding: 10px 10px;
                    border-radius: 5px;
                    font-size: 16px;
                    text-align: center;    
                    animation: mymove 5s infinite;
                }

                .contains {
                    position: relative;
                    max-height: 0;          /* Start with 0 height */
                    opacity: 0;              /* Hidden initially */
                    overflow: hidden;
                    visibility: hidden;      /* Visibility is hidden to prevent flickering */
                    background-color: #FFF;
                    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0s 0.5s; /* Delay visibility change */

                    p {
                        font-size: 14px;
                        color: #6D6D6D;
                        text-align: center;
                        margin-bottom: 0;
                    }
                }
            }

            &:hover {
                img {
                    transform: scale(1.05);
                }

                .custome_btn_contain {
                    bottom: 0;

                    .contains {
                        max-height: 200px;      /* Adjust this based on your content's actual height */
                        opacity: 1;
                        visibility: visible;    /* Visibility becomes visible */
                        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0s 0s; /* No delay for visibility on hover */
                    }
                }
            }
        }
        .Get_Started_custome_btn{
            color: #C42126;
            background: #FFF;
            font-size: 16px;
            font-weight: 700;
            border-radius: 10px;
            padding: 10px 20px;
            // font-family: $hanker_famili;
            border: 1px solid #C42126;
            transition: 0.8s;
        }
        .Get_Started_custome_btn:hover svg path,
        .Get_Started_custome_btn:hover{
            color: #FFF;
            background: #C42126;
            fill: #FFF;
        }
    }
}

// WATER BOTTLE MACHIN SECTION START
.Water_Bottle{
    background: url('../img/water_bottel_section_bg.webp');
    position: relative;
    .container{
        .round_border{
            position: relative;
            border: 2px dashed #FFF;
            border-radius: 50%;
            .bg_red_background{
                position: absolute;
                background: #C42126;
                border-radius: 50%;
                height: 120px;
                width: 120px;
                padding: 35px;
                right: 14%;
            }
            .video_play_btn{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                svg{
                    height: 90px;
                    width: 90px;
                }
            }
            .video_play_btn:hover svg path{
                fill: #C42126;
            }
        }
        ul{
            padding-left: 0px;
            li{
                list-style-type: none;
                font-size: 18px;
            }
        }
        .youtube_slider{
            width: 90%;
        }
        .left_right_arrow{
            top: 50%;
            width: 98%;
            .arrow_bg{
                background: #C42126;
                width: 49px;
                padding: 12px;
            }
            .swiper-button-next:after, .swiper-button-prev:after {
                display: none !important;
            }
        }
    }
}

// .FULL SERVICE SECTION START
.Full_Service{
    background: #F4F4F4;
    .container{
        h3{
            font-size: 18px;
        }
    }
}

// WHY CHOOSE SHREEJI PROJECTS SECTION START
.Why_choose_shreeji{
    .left_part{
        background: url('../img/left_part_bg.png');
        width: 100%;
        // height: 100vh;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        .Get_Started_custome_btn{
            color: #FFF;
            background: transparent;
            font-size: 16px;
            font-weight: 700;
            border-radius: 10px;
            padding: 10px 20px;
            // font-family: $hanker_famili;
            border: 1px solid #FFF;
            transition: 0.8s;
        }
        .Get_Started_custome_btn:hover svg path,
        .Get_Started_custome_btn:hover{
            color: #FFF;
            background: #C42126;
            fill: #FFF;
        }
    }
    .center_part{
        background: #E9E9E9;
        h3{
            font-size: 38px;
        }
        span{
            font-size: 18px;
            font-weight: 700;
        }
    }
}

// TRUSTED BY BRANDS SECTION START
.Trusted_Brand{
    .container{
        .mid_section{
            position: relative;
            h4{
                position: relative;
                color: #000;
                font-size: 22px;
                font-weight: 700;
                border-left: 2px solid #000;
                border-right: 2px solid #000;
                z-index: 1;
                background-color: #FFF;
            }
        }
        .mid_section::before{
            position: absolute;
            content: '';
            bottom: 0%;
            top: 50%;
            width: 100%;
            height: 2px;
            background: #000;
        }
        .what_our_clients_says{
            .left_part{
                background: #26245F;
                position: relative;
                text-align: center;
                // padding: 50px 35px;
                .round_vector{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 80%;
                }
                h5{
                    font-size: 20px;
                }
            }
            .right_part{
                .user_round_img{
                    height: 80px;
                    width: 80px;
                    border-radius: 50%;
                    border: 1px solid #989898;
                    overflow: hidden;
                }
                h4{
                    font-size: 20px;
                }
            }
        }
    }

    img{
        height: 70px;
    }
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: #C42126 !important;
}
// OUR RECENT PROJECT SCETION START 
.Recent_Project{
    .img_hover{
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        img{
            display: block;
            width: 100%;
            height: auto;
        }
        .overlay {
            position: absolute;
            /* top: 0; */
            bottom: 21px;
            left: 18px;
            /* right: -18px; */
            height: 65px;
            width: 91%;
            /* text-align: center; */
            opacity: 0;
            transition: 0.5s ease;
            background-color: #FFF;
            display: flex;
            align-items: center;
            border-radius: 5px;
            .text {
                h5{
                    color: #000;
                    font-size: 18px;
                }
              }
          }
    }
    .img_hover:hover .overlay {
        opacity: 1;
    }
}

// .GET IN TOUCH SECTION START
.Get_in_Touch{
    background: #222334;
    position: relative;
    overflow: hidden;
    padding: 82px 15px;
    .left_img{
        position: absolute;
        top: 0%;
    }
    .container{
        position: relative;
        z-index: 1;
        p{
            width: 50%;
        }
        .Get_Started_custome_btn{
            color: #FFF;
            background: transparent;
            font-size: 16px;
            font-weight: 700;
            border-radius: 10px;
            padding: 10px 20px;
            // font-family: $hanker_famili;
            border: 1px solid #FFF;
            transition: 0.8s;
        }
        .Get_Started_custome_btn:hover svg path,
        .Get_Started_custome_btn:hover{
            color: #FFF;
            background: #C42126;
            fill: #FFF;
        }
    }
}

// FAQ SECTION START
.Faq_Section{
    .faq_part{
        background: url('../img/faqs_bg.png');
        width: 100%;
        height: 100%;   
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        .faq_width{
            width: 80%;
            margin-left: auto;
            details {
                border: 1px solid rgba(112,112,112,0.1);
                border-radius: 4px;
                padding: 0.5em 0.5em 0;
                margin-bottom:10px;
                cursor:pointer;
              }
              
              summary {
                font-weight: 600;
                margin: -0.5em -0.5em 0;
                padding: 0.8em;
                list-style-type:"+";
                list-style:none;
                display:flex;
                justify-content:space-between;
                align-items:center;
                background: #222334;
                color: #FFF;
              }
              
              details[open] {
                padding: 0.5em; 
                border:none;
                background-color: #FFF;
                border: 1px solid;
              }
              
              summary::marker{
                color: #0000ff;
                font-size: 1.2em;
                margin-right:20px;
              }
              
            //   details:hover{
            //      background-color:	 rgba(173,216,230,0.5);
            //   }
              
              details summary::after{
                content: "+";
                float: right;
                font-size: 1.2em;
                color: #FFF;
                background: red;
                height: 20px;
                width: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              
              details[open] summary::after{
                content:"-";
                float:right;
                font-size:1.5em;
                color:#FFF;
              }
        }
    }
    .location_detail{
        background: #222334;
        .Get_Started_custome_btn{
            color: #FFF;
            background: transparent;
            font-size: 16px;
            font-weight: 700;
            border-radius: 10px;
            padding: 10px 20px;
            // font-family: $hanker_famili;
            border: 1px solid #FFF;
            transition: 0.8s;
        }
        .Get_Started_custome_btn:hover svg path,
        .Get_Started_custome_btn:hover{
            color: #FFF;
            background: #C42126;
            fill: #FFF;
        }
    }
}

// FOOTER SECTION START 
footer{
    background: #222334;
    .container{
        .social_icon{
            width: 40px;
            height: 40px;
            border: 1px solid;
            background: transparent;
        }
        .social_icon:hover{
            background: #FFF;
        }
        .social_icon:hover svg path{
            fill: #222334;
        }

        h4{
            font-size: 18px;
        }
        p{
            color: #C3C3C3;
            a:hover{
              color: #FFF;  
              transform: scale(1.05);
            }
        }
        a{
            color: #C3C3C3;
            p:hover{
                color: #FFF;  
            }
        }
    }
    .footer_bottom{
        color: #C3C3C3;
        border-top: 1px solid #C3C3C3;
    }
}

// ABOUT PAGE START 
.page_banner{
    background: url('../img/about_page_banner.webp');
    @extend %banner_coman;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.Awaeds_winning{
    .container{
        .center_div{
            background: url('../img/vector_img.png');
            width: 200px;
            height: 230px;
            right: -12%;
            bottom: -13%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            h3{
                font-size: 32px;
                font-family: $Playfair_ff;
            }
        }
        .right_part{
            // margin-left: 70px;
            gap: 10%;
            .custome_li{
                color: #6D6D6D;
                font-size: 20px;
                font-weight: 700;
                border-bottom: 1px solid #E4E4E4;
                margin: 16px 0px;
            }
        }
    }
}

// PRODUCT PAGE START 
.Product_page_banner{
    background: url('../img/product_paage_banner.webp');
    @extend %banner_coman;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
// SERVICES PAGE START 
.service_page_banner{
    background: url('../img/service_page_banner.webp');
    @extend %banner_coman;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
// CONTACT US PAGE START 
.contact_page_banner{
    background: url('../img/contact_page_banner.webp');
    @extend %banner_coman;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.Become_Partner_banner{
    background: url('../img/Become_Partner_banner_image.webp');
    @extend %banner_coman;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.Main_Products {
    position: relative;

    .container {
        .product_images{
            width: 80%;
            margin: 0 auto;
        }
        .left_right_arrow{
            top: 57%;
            width: 99%;
            .arrow_bg{
                // background: #C42126;
                width: 49px;
                padding: 12px;
            }
            .swiper-button-next:after, .swiper-button-prev:after {
                display: none !important;
            }
        }
        .custome_card {
            position: relative;
            border: 1px solid #26245F;
            border-radius: 5px;

            img {
                border-radius: 5px;
                transition: transform 0.5s ease-in-out;
            }

            .custome_btn_contain {
                position: absolute;
                background: #FFF;
                border-radius: 5px;
                border: 2px solid #FFF;
                z-index: 2;
                left: 50%;
                transform: translateX(-50%);
                width: 80%;
                bottom: -10%;
                transition: bottom 0.5s ease-in-out;

                .inner_blue_btn {
                    background: #26245F;
                    color: #FFF;
                    font-family: $Playfair_ff;
                    padding: 10px 10px;
                    border-radius: 5px;
                    font-size: 16px;
                    text-align: center;    
                    animation: mymove 5s infinite;
                }

                .contains {
                    position: relative;
                    max-height: 0;          /* Start with 0 height */
                    opacity: 0;              /* Hidden initially */
                    overflow: hidden;
                    visibility: hidden;      /* Visibility is hidden to prevent flickering */
                    background-color: #FFF;
                    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0s 0.5s; /* Delay visibility change */

                    p {
                        font-size: 14px;
                        color: #6D6D6D;
                        text-align: center;
                        margin-bottom: 0;
                    }
                }
            }

            &:hover {
                img {
                    transform: scale(1.05);
                }

                .custome_btn_contain {
                    bottom: 0;

                    .contains {
                        max-height: 200px;      /* Adjust this based on your content's actual height */
                        opacity: 1;
                        visibility: visible;    /* Visibility becomes visible */
                        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0s 0s; /* No delay for visibility on hover */
                    }
                }
            }
        }
        .Get_Started_custome_btn{
            color: #C42126;
            background: #FFF;
            font-size: 16px;
            font-weight: 700;
            border-radius: 10px;
            padding: 10px 20px;
            // font-family: $hanker_famili;
            border: 1px solid #C42126;
            transition: 0.8s;
        }
        .Get_Started_custome_btn:hover svg path,
        .Get_Started_custome_btn:hover{
            color: #FFF;
            background: #C42126;
            fill: #FFF;
        }

        .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
            color: var(--bs-nav-pills-link-active-color);
            background-color: #26245F ;
            font-size: 22px;
            font-weight: 700;
            border-radius: 50px;
        }
        .nav-pills .nav-link {
            border-radius: var(--bs-nav-pills-border-radius);
            color: #26245F;
            font-size: 22px;
            font-weight: 700;
        }
    }
}

.All_service_page{
    .service_part{
        width: 100%;
        margin: 0 auto;
        .svg_border{
            border: 1px solid #26245F;
            border-radius: 50%;
            height: 100px;
            width: 100px;
            padding: 26px;
        }
        h4{
            font-size: 20px;
            font-weight: 700;
        }
    }
}

.lets_talk{
    .faq_part{
        background: url('../img/faqs_bg.png');
        width: 100%;
        height: 100%;   
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        .faq_width{
            width: 80%;
            margin-left: auto;
            
        }
    }
    .Get_Started_custome_btn{
        color: #C42126;
        background: #FFF;
        font-size: 16px;
        font-weight: 700;
        border-radius: 10px;
        padding: 10px 20px;
        // font-family: $hanker_famili;
        border: 1px solid #C42126;
        transition: 0.8s;
    }
    .Get_Started_custome_btn:hover svg path,
    .Get_Started_custome_btn:hover{
        color: #FFF;
        background: #C42126;
        fill: #FFF;
    }
    .location_detail{
        background: #222334;
        .Get_Started_custome_btn{
            color: #FFF;
            background: transparent;
            font-size: 16px;
            font-weight: 700;
            border-radius: 10px;
            padding: 10px 20px;
            // font-family: $hanker_famili;
            border: 1px solid #FFF;
            transition: 0.8s;
        }
        .Get_Started_custome_btn:hover svg path,
        .Get_Started_custome_btn:hover{
            color: #FFF;
            background: #C42126;
            fill: #FFF;
        }
    }
}

.Open_Page_Model{
    .Get_Started_custome_btn{
        color: #C42126;
        background: #FFF;
        font-size: 16px;
        font-weight: 700;
        border-radius: 10px;
        padding: 10px 20px;
        // font-family: $hanker_famili;
        border: 1px solid #C42126;
        transition: 0.8s;
    }
    .Get_Started_custome_btn:hover svg path,
    .Get_Started_custome_btn:hover{
        color: #FFF;
        background: #C42126;
        fill: #FFF;
    }
    .location_detail{
        background: #222334;
        .Get_Started_custome_btn{
            color: #FFF;
            background: transparent;
            font-size: 16px;
            font-weight: 700;
            border-radius: 10px;
            padding: 10px 20px;
            // font-family: $hanker_famili;
            border: 1px solid #FFF;
            transition: 0.8s;
        }
    }
    .Get_Started_custome_btn:hover svg path,
    .Get_Started_custome_btn:hover{
        color: #FFF;
        background: #C42126;
        fill: #FFF;
    }
}

.Years_Experience{
    .year_count{
        border: 2px solid #C42126;
        height: 250px;
        width: 250px;
        border-radius: 50%;
        h2{
            font-size: 140px;
            font-weight: bolder;
            font-family: $Playfair_ff;
            position: relative;
            top: -9%;
            background-image: url('../img/text_bg_imag.png');
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;

        }
        h2{
            
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                text-align: center;
                text-transform: uppercase;
                font: 14vmax / 0.85 Playfair Display, serif;
            
        }
    }
    .tears_text{
        h2{
            font-family: $Playfair_ff;
            font-size: 75px;
            font-weight: 900;
            // .combined {
            //     -webkit-text-stroke: 3px #C42126;
            //     color: white;
            //     font-family: $lato;
            // }
        }
        img{
            max-width: 391px !important; 
            margin-left: 20px;
        }
    }
}

.Why_Choose_Us{
    .container{
        .mission_vision_tab{
            .nav-tabs .nav-link {
                margin-bottom: calc(-1* var(--bs-nav-tabs-border-width));
                border: none !important;
                border-top-left-radius: var(--bs-nav-tabs-border-radius);
                border-top-right-radius: var(--bs-nav-tabs-border-radius);
                color:#9A9A9A;
                font-weight: 700;
                font-size: 20px;
            }
            .nav-tabs .nav-link.active svg path,
            .nav-tabs .nav-link.active {
                 color: #26245F; 
                 fill: #26245F;
                 font-size: 20px;
                 font-weight: 700;
                 background-color: transparent !important; 
                 border-top: none !important;
                 border-left: none !important;
                 border-right: none !important;
                 border-bottom: 2px solid #C42126 !important; 
            }
        }
    }
}

.Products_Count{
    .year_count{
        border: 2px solid #C42126;
        height: 250px;
        width: 250px;
        border-radius: 50%;
        h2{
            font-size: 140px;
            font-weight: bolder;
            font-family: $Playfair_ff;
            position: relative;
            top: -4%;
            background-image: url('../img/text_bg_imag.png');
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }
        h2{
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            text-align: center;
            text-transform: uppercase;
            font: 117px / 1.85 Playfair Display, serif;
        }
    }
    .tears_text{
        h2{
            font-family: $Playfair_ff;
            font-size: 75px;
            font-weight: 900;
            // .combined {
            //     -webkit-text-stroke: 3px #C42126;
            //     color: white;
            //     font-family: $Playfair_ff;
            // }
        }
        img{
            max-width: 391px !important; 
            // margin-left: 20px;
        }
    }
}

.About_Company{
    background: #222334;
    .container{
        .service_part{
            width: 80%;
            margin: 0 auto;
            .svg_border{
                border: 1px solid #FFF;
                border-radius: 50%;
                height: 100px;
                width: 100px;
                padding: 26px;
                justify-content: center;
            }
            h4{
                font-size: 22px;
                font-weight: 700;
                position: relative;
            }
            h4::after{
                content: "";
                position: absolute;
                height: 3px;
                background: #C42126;
                // width: 50px;
                left: 0%;
                bottom: -23%;
                width: 100px;
            }
            
        }
    }
}

.Client_Logo {
    .hover_logo {
        position: relative;
        
        img {
            height: 100px;
            filter: grayscale(1);
            -webkit-filter: grayscale(1); /* For WebKit browsers */
            transition: all 0.5s ease-in-out;
        }
    }

    .hover_logo:hover img {
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        transform: scale(1.01);
    }

    .hover_logo::before,
    .hover_logo::after {
        content: '';
        position: absolute;
        height: 0px;
        width: 0px;
        border: 2px solid #FFF;
        transition: all 0.5s ease-in-out;
    }

    .hover_logo::before {
        border-left-color: #FFF;
        border-top-color: #FFF;
        left: 0;
        top: 0;
    }

    .hover_logo::after {
        border-right-color: #FFF;
        border-bottom-color: #FFF;
        right: 0;
        bottom: 0;
    }

    .hover_logo:hover::before {
        border-left-color: #C42126; 
        border-top-color: #C42126;
        height: 25px;
        width: 25px;
    }

    .hover_logo:hover::after {
        border-right-color: #C42126; 
        border-bottom-color: #C42126;
        height: 25px;
        width: 25px;
    }
}

.Peoduct_Delevery{
    h4{
        font-size: 22px;
    }
    .Get_Started_custome_btn{
        color: #C42126;
        background: #FFF;
        font-size: 16px;
        font-weight: 700;
        border-radius: 10px;
        padding: 10px 20px;
        // font-family: $hanker_famili;
        border: 1px solid #C42126;
        transition: 0.8s;
    }
    .Get_Started_custome_btn:hover svg path,
    .Get_Started_custome_btn:hover{
        color: #FFF;
        background: #C42126;
        fill: #FFF;
    }
    .table>:not(caption)>*>* {
        padding: .5rem .5rem;
        color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
        background-color: rgba(250, 250, 250, 1) !important;
        border-bottom-width: var(--bs-border-width);
        box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
    }
}

.Explore_More{
    .custome_card {
        position: relative;
        border: 1px solid #26245F;
        border-radius: 5px;

        img {
            border-radius: 5px;
            transition: transform 0.5s ease-in-out;
        }

        .custome_btn_contain {
            position: absolute;
            background: #FFF;
            border-radius: 5px;
            border: 2px solid #FFF;
            z-index: 2;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            bottom: -10%;
            transition: bottom 0.5s ease-in-out;

            .inner_blue_btn {
                background: #26245F;
                color: #FFF;
                font-family: $Playfair_ff;
                padding: 10px 10px;
                border-radius: 5px;
                font-size: 16px;
                text-align: center;    
                animation: mymove 5s infinite;
            }

            .contains {
                position: relative;
                max-height: 0;          /* Start with 0 height */
                opacity: 0;              /* Hidden initially */
                overflow: hidden;
                visibility: hidden;      /* Visibility is hidden to prevent flickering */
                background-color: #FFF;
                transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0s 0.5s; /* Delay visibility change */

                p {
                    font-size: 14px;
                    color: #6D6D6D;
                    text-align: center;
                    margin-bottom: 0;
                }
            }
        }

        &:hover {
            img {
                transform: scale(1.05);
            }

            .custome_btn_contain {
                bottom: 0;

                .contains {
                    max-height: 200px;      /* Adjust this based on your content's actual height */
                    opacity: 1;
                    visibility: visible;    /* Visibility becomes visible */
                    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0s 0s; /* No delay for visibility on hover */
                }
            }
        }
    }
}

.custome_iamintrestede_model{
    .model_bg{
        h3{
            font-size: 24px;
            font-family: $Playfair_ff;
        }
        .product_image{
            // width: 60%;
            margin: 0px auto;
        }
        form{
            background: #F9F9F9;
            h4{
                font-family: $Playfair_ff;
            }
            .Get_Started_custome_btn{
                color: #C42126;
                background: #FFF;
                font-size: 16px;
                font-weight: 700;
                border-radius: 7px;
                padding: 10px 20px;
                // font-family: $hanker_famili;
                border: 1px solid #C42126;
                transition: 0.8s;
            }
            .Get_Started_custome_btn:hover svg path,
            .Get_Started_custome_btn:hover{
                color: #FFF;
                background: #C42126;
                fill: #FFF;
            }
            .form-control{
                border: none !important;
                // background: transparent !important;
                border-radius: 0px !important;
            }
        }
    }
}

.Our_Sales_Executive{
    .custome_card{
        border-radius: 5px;
        box-shadow: 3px 4px 20px -2px rgba(0, 0, 0, 0.15);
        padding: 15px;
        .icon_bg{
            background-color: #F4F4F4;
            border-radius: 50%;
            height: 90px;
            width: 90px;
            display: flex;
            justify-content: center;
            align-items: center;
            svg{
                width: 30px;
            }
        }
        .line_up{
            margin: 0px 26px;
            width: 0px;
            background-color: #C42126;
            height: 89px;
            border: 0.3px solid #C42126;
        }
        .num_email{
            .text_style{
                font-size: 20px;
                color: #26245F;
                font-weight: 700;
            }
        }
    }
}


.custome_Table{
    thead{
        tr{
            th{
                text-align: center;
                font-size: 16px;
                font-weight: 700;
                color: #FFF;
                background-color: #26245F;
            }
        }
    }
    tr{
        th{
            text-align: center;
        }
        td{
            text-align: center;
        }
    }
}

// Product Pages New Design Css Start 31-7-2025

.MainProduct_list_page{
    background-image: url('../img/mainproductpagebg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .Custome_DP_Card{
        position: relative;
        border: 2px solid #E5E4E4;
        border-radius: 5px;
        background-color: #FFF;
        box-shadow: 6px 8px 13px rgba(0, 0, 0, 0.1);
        padding: 30px;
        transition: 0.8s;
        height: 100%;
        p{
            color: #4A4A4B;
            font-family: $Yrsa;
            font-size: 20px;
            font-weight: 500;
        }
        .butoon_Position{
            position: absolute;
            bottom: -20px;
            .Get_Started_custome_btn{
                color: #C42126;
                background: #FFF;
                font-size: 16px;
                font-weight: 700;
                border-radius: 5px;
                padding: 10px 20px;
                // font-family: $hanker_famili;
                border: 1px solid #C42126;
                transition: 0.8s;
            }
            // &:hover{
            //     color: #FFF;
            //     background: #1D76BB;
            //     border: 1px solid #1D76BB;
            //     svg{
            //         path{
            //             fill: #FFF;
            //         }
            //     }
            // }
        }
        &:hover{
            border: 2px solid #1D76BB;
            p{
                color: #1D76BB;
            }
            .Get_Started_custome_btn{
                color: #FFF;
                background: #1D76BB;
                border: 1px solid #1D76BB;
                svg{
                    path{
                        fill: #FFF;
                    }
                }
            }
        }
    }
}

.Similar_name_Sec{
    .container{
        border-top: 1px solid #949494;
        ul{
            li{
                color: #878787;
                font-size: 14px;
            }
        }
    }
}

.Product_Details_Page_Sec{
    background-image: url('../img/product_detail_contain_page_bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;

    .Slider_Box{
        box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.15);
        padding: 20px;
        border-radius: 5px;
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #444;
          display: flex;
          justify-content: center;
          align-items: center;
        }
    
        .swiper-slide img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
    
        .swiper {
          width: 100%;
          height: 300px !important;
          margin-left: auto;
          margin-right: auto;
        }
    
        .swiper-slide {
          background-size: cover;
          background-position: center;
        }
    
        .mySwiper2 {
          height: 90%;
          width: 100%;
        }
    
        .mySwiper {
          height: 10% !important;
          box-sizing: border-box;
          padding: 10px 0;
        }
    
        .mySwiper .swiper-slide {
          width: 25%;
          height: 100%;
          opacity: 0.4;
        }
    
        .mySwiper .swiper-slide-thumb-active {
          opacity: 1;
        }
    
        .swiper-slide img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
    }

    .Get_Started_custome_btn{
        color: #C42126;
        background: #FFF;
        font-size: 16px;
        font-weight: 700;
        border-radius: 10px;
        padding: 10px 20px;
        // font-family: $hanker_famili;
        border: 1px solid #C42126;
        transition: 0.8s;
        justify-content: center;
        &:hover{
            color: #FFF;
            background: #C42126;
            svg{
                path{
                    fill: #FFF;
                }
            }
        }
    }
    .Product_Key_Features{
        .Custome_feacher_Card{
            border: 1px solid #26245F;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
            border-radius: 2px;
            padding: 30px;
            text-align: center;
        }
    }

    .Technical_Specification{
        table {
          width: 100%;
          border-collapse: collapse;
          text-align: center;
        }
        th, td {
          border: 1px solid #ccc;
          padding: 10px;
        }
        th {
          background-color: #2F2350;
          color: white;
        }
        td:first-child {
          font-weight: bold;
        }
        td:nth-child(2) {
          color: #C42126;
          text-align: center;
        }
        tr:nth-child(even) {
          background-color: #F9F9F9;
        }
    }

    .Product_Faq_Sec{
        details {
            border: 1px solid rgba(112,112,112,0.1);
            border-radius: 4px;
            padding: 0.5em 0.5em 0;
            margin-bottom:10px;
            cursor:pointer;
          }
          
          summary {
            font-weight: 600;
            margin: -0.5em -0.5em 0;
            padding: 0.8em;
            list-style-type:"+";
            list-style:none;
            display:flex;
            justify-content:space-between;
            align-items:center;
            background: #222334;
            color: #FFF;
          }
          
          details[open] {
            padding: 0.5em; 
            border:none;
            background-color: #FFF;
            border: 1px solid;
          }
          
          summary::marker{
            color: #0000ff;
            font-size: 1.2em;
            margin-right:20px;
          }
          
        //   details:hover{
        //      background-color:	 rgba(173,216,230,0.5);
        //   }
          
          details summary::after{
            content: "+";
            float: right;
            font-size: 1.2em;
            color: #FFF;
            background: red;
            height: 20px;
            width: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          details[open] summary::after{
            content:"-";
            float:right;
            font-size:1.5em;
            color:#FFF;
          }
    }
    .Product_Related_Products{
        position: relative;
        .Custome_DP_Card{
            position: relative;
            border: 2px solid #E5E4E4;
            border-radius: 5px;
            background-color: #FFF;
            box-shadow: 6px 8px 13px rgba(0, 0, 0, 0.1);
            padding: 30px;
            transition: 0.8s;
            height: 100%;
            p{
                color: #4A4A4B;
                font-family: $Yrsa;
                font-size: 20px;
                font-weight: 500;
            }
            .butoon_Position{
                position: absolute;
                bottom: -20px;
                .Get_Started_custome_btn{
                    color: #C42126;
                    background: #FFF;
                    font-size: 16px;
                    font-weight: 700;
                    border-radius: 5px;
                    padding: 10px 20px;
                    // font-family: $hanker_famili;
                    border: 1px solid #C42126;
                    transition: 0.8s;
                }
                // &:hover{
                //     color: #FFF;
                //     background: #1D76BB;
                //     border: 1px solid #1D76BB;
                //     svg{
                //         path{
                //             fill: #FFF;
                //         }
                //     }
                // }
            }
            &:hover{
                border: 2px solid #1D76BB;
                p{
                    color: #1D76BB;
                }
                .Get_Started_custome_btn{
                    color: #FFF;
                    background: #1D76BB;
                    border: 1px solid #1D76BB;
                    svg{
                        path{
                            fill: #FFF;
                        }
                    }
                }
            }
        }
    }

}

.Partner_with_us{
    p{
        border-left: 2px solid #C42126;
        padding: 0px 10px;
    }
}

.Opportunities_section{
    position: relative;
    background-color: #26245F;
    .Custome_Card{
        text-align: center;
        border: 1px solid #FFF;
        border-radius: 2px;
        padding: 30px;
        h4{
            color: #FFF;
            font-size: 20px;
            font-weight: 700;
        }
        p{
            color: #FFF;
            font-size: 16px;
        }
    }
    .Get_Started_custome_btn{
        color: #C42126;
        background: #FFF;
        font-size: 16px;
        font-weight: 700;
        border-radius: 10px;
        padding: 10px 20px;
        // font-family: $hanker_famili;
        border: 1px solid #C42126;
        transition: 0.8s;
    }
    .Get_Started_custome_btn:hover svg path,
    .Get_Started_custome_btn:hover{
        color: #FFF;
        background: #C42126;
        fill: #FFF;
    }
}

.Partnership_Inquiry_Form{
    form{
        .input_Field{
            border: 1px solid #26245F;
            padding: 7px 15px;
            font-size: 16px;
            color: #6D6D6D;
        }
        .Get_Started_custome_btn{
            color: #C42126;
            background: #FFF;
            font-size: 16px;
            font-weight: 700;
            border-radius: 10px;
            padding: 10px 20px;
            // font-family: $hanker_famili;
            border: 1px solid #C42126;
            transition: 0.8s;
        }
        .Get_Started_custome_btn:hover svg path,
        .Get_Started_custome_btn:hover{
            color: #FFF;
            background: #C42126;
            fill: #FFF;
        }
    }
}