/***************************************************************************** Admin Header ***************************************************************/
.admin-panel-header {
    margin-left: 200px;
    width: 85%;
    display: flex;
    justify-content: space-between;
    padding: 15px; /* Reduced padding for smaller height */
    background: #f8f9fa;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.admin-panel-header-container {
    display: flex;
    width: 30%;
    justify-content: space-between;
}

/* Individual Header Box */
.admin-panel-header-box {
    flex: 1;
    text-align: center;
    padding: 12px; /* Reduced padding for a smaller box */
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin: 0 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 78%;
}
.admin-panel-header-box h2{
    text-align: center;
}
/* Background Colors */
.admin-panel-header-total { background: #007bff; }
.admin-panel-header-approved { background: #28a745; }
.admin-panel-header-pending { background: #ff9800; }
.admin-panel-header-blocked { background: #dc3545; }

/* Text and Icon Styling */
.admin-panel-header-box p {
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px; /* Slightly reduced font size */
    font-weight: bold;
    color: white;
    margin-bottom: 8px; /* Adjusted spacing */
}

/* Removed the divider */

/* "More Info" Transparent Box */
.more-info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px; /* Reduced padding for a smaller box */
    background: rgba(255, 255, 255, 0.2); /* Transparent White */
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: 0.3s ease;
    font-size: 13px;
}

.more-info i {
    margin-left: 5px;
}

/* Hover Effect */
.admin-panel-header-box:hover .more-info {
    background: rgba(255, 255, 255, 0.4); /* Lighter Transparency on Hover */
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
    .admin-panel-header {
        margin-left: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }

    .admin-panel-header-container {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .admin-panel-header-box {
        width: 90%;
        margin: 10px 0;
    }
}
/*******************************************************************product**********************************************************************/
.admin_panel_add_product, .admin_panel_add_category {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: 50%;
    /*max-width: 600px;*/
    text-align: center;
    margin-left: 400px;
    margin-top: 20px;
}

.admin_panel_add_product h2, .admin_panel_add_category h2 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #333;
}

/* Form fields */
.admin_panel_add_product form, .admin_panel_add_category form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin_panel_add_product label, .admin_panel_add_category label {
    font-weight: bold;
    text-align: left;
}

.admin_panel_add_product input,
.admin_panel_add_category input,
.admin_panel_add_product select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

/* File input */
.admin_panel_add_product input[type="file"] {
    border: none;
    padding: 5px;
}

/* Submit button */
.admin_panel_add_product button,
.admin_panel_add_category button {
    background-color: #007bff;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s;
}

.admin_panel_add_product button:hover,
.admin_panel_add_category button:hover {
    background-color: #0056b3;
}

/* Success message */
.admin-panel-message {
    color: green;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .admin_panel_add_product, .admin_panel_add_category {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .admin_panel_add_product, .admin_panel_add_category {
        width: 90%;
        padding: 15px;
    }

    .admin_panel_add_product h2, .admin_panel_add_category h2 {
        font-size: 20px;
    }

    .admin_panel_add_product input,
    .admin_panel_add_category input,
    .admin_panel_add_product select {
        font-size: 14px;
        padding: 8px;
    }

    .admin_panel_add_product button,
    .admin_panel_add_category button {
        font-size: 14px;
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .admin-panel {
        padding: 10px;
    }

    .admin_panel_add_product, .admin_panel_add_category {
        width: 95%;
        padding: 10px;
    }

    .admin_panel_add_product h2, .admin_panel_add_category h2 {
        font-size: 18px;
    }

    .admin_panel_add_product input,
    .admin_panel_add_category input,
    .admin_panel_add_product select {
        font-size: 14px;
        padding: 7px;
    }

    .admin_panel_add_product button,
    .admin_panel_add_category button {
        font-size: 13px;
        padding: 7px;
    }
}

/*******************************************************************************************approved users*************************************************************************/


/***************************************************************************************/
.dashboard-section
{
    padding: 50px 0; 
    margin-top:120px;
    height:85vh;
}
.container-user
{
    display: flex;
}
.user_info
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width:50vw;
    /*background-color: red;*/
    height: 50vh;
    gap:25px;
    padding-left: 30px;
}
.div1-user_info
{
    display: flex;
}
.info
{
 padding-left: 30px;
 padding-top:50px;
}
  
       .progressbar {
            background: #d9d9d9;
            width: 90%;
            height: 13px; /* Reduced height */
            border-radius: 20px;
            overflow: hidden;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .bar {
        background: linear-gradient(90deg, #87CEFA, #00BFFF);
            color: white;
            height: 100%;
            width: 80%;
            text-align: right;
            font-size: 10px;
            font-weight: bold;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 5px;
            transition: width 0.5s ease-in-out;
        }
        .profile-btn{
    color: white;
    background-color: red;
    padding: 5px 12px; /* थोड़ा संतुलित padding */
    border-radius: 25px;
    border: none;
    font-size: 15px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease-in-out; /* Smooth transition */
}

.profile-btn:hover {
    background-color: #05c6ed;
    color: white;
    transform: translateY(-2px) scale(1.07); /* हल्का ऊपर उठने और zoom effect */
    opacity: 0.9; /* हल्का transparent effect */
}
.profile
{
    display: flex;
    justify-content: right;
    padding-right: 60px;
    gap: 10px;
}

@media (max-width: 1199px) {
    .user_info {
        width: 60vw;
        padding-left: 20px;
    }
    .info {
        padding-left: 20px;
    }
}

@media (max-width: 992px) {
    .container-user {
        flex-direction: column;
        align-items: center;
    }
    .dashboard-section
    {
        margin-bottom: 190px;
         /*align-items: center;*/
    }
    .user_info {
        width: 80vw;
        text-align: center;
        padding: 20px;
    }
    .profile {
        justify-content: center;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .user_info {
        width: 90vw;
    }
  
    .progressbar {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .user_info {
        width: 100%;
        padding: 15px;
    }
  
    .profile {
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }
    .profile-btn {
        font-size: 14px;
        padding: 6px 10px;
    }
}
@media (max-width: 445px) {
   
    .dashboard-section {
        margin-top: 60px;
        margin-bottom: 590px;
    }

    /* Circular Image */
    .user-img { 
        width: 100px;  
        height: 100px; 
        border-radius: 50%;
        object-fit: cover;/
        display: block;
        margin: 0 auto; 
    }

    .profile {
        flex-direction: row;
        align-items: center; 
        gap: 10px; 
        margin-bottom: 20px;
    }
    .div1-user_info
    {
        display: flex;
        flex-direction: column;
    }
    .info
    {
        margin-top: -30px;
    }
}





/*8888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888*/
 
  .horizontal-scroll {
    display: flex;
    overflow-x: auto;
    gap: 8px; 
    padding: 5px; 
    margin: 0 -5px;
    scroll-behavior: smooth;
  }

 
  .horizontal-scroll::-webkit-scrollbar {
    display: none;
  }
  .horizontal-scroll {
    -ms-overflow-style: none; 
    scrollbar-width: none;  
  }

  /* Ebook card styles */
  .ebook-card {
    width: 150px; 
    height: 240px; 
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px; /* Slightly smaller border-radius for a sharper look */
    text-align: center;
    padding: 8px; /* Reduced padding for a compact design */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .ebook-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  }

  /* Image container styling */
  .ebook-img-container {
    width: 90%;
    height: 180px; /* Reduced height for a smaller design */
    margin-bottom: 6px; /* Slightly tighter spacing */
    overflow: hidden;
    border-radius: 6px;
    background: #f9f9f9;
  }

  .ebook-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .ebook-img-container img:hover {
    transform: scale(1.05);
  }

  /* Title styling */
  .ebook-title {
    font-size: 0.9rem; 
    font-weight: bold;
    margin: 4px 0; 
    color: #333;
  }

  /* Description styling */
  .ebook-desc {
    font-size: 0.75rem;
    color: #555;
    margin-bottom: 5px;
    line-height: 1.3;
  }

  /* Category heading styling */
  .category-heading h2 {
    font-size: 1.4rem; 
    font-weight: bold;
    margin-bottom: 5px;
    color: #222;
  }

  .category-heading p {
    font-size: 0.8rem; 
    color: #555;
  }

/******************************************************************************************8externel css *********************************************************************************?
/* Label styling */
.field-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
}

/* Rounded inputs and selects */
.rounded-input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 25px;
  padding: 10px;
  background-color: #fff;
  transition: border-color 0.3s ease;
}

.rounded-input:focus {
  border-color: #ff7b00;
  outline: none;
  box-shadow: 0 0 5px rgba(255, 123, 0, 0.2);
}

/* Main button style (example) */
.main-button {
  background-color: #ff7b00;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.main-button:hover {
  background-color: #e66900;
}

.send-otp {
  background-color: #ff7b00;
  color: #fff;
  border: none;
  padding: 12px 34px;
  border-radius: 25px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.send-otp:hover {
  background-color: #e66900;
}
/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #03a4ed;
  color: #fff;
}

::-moz-selection {
  background: #03a4ed;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 700;
  letter-spacing: 0.25px;
  position: relative;
  z-index: 2;
  line-height: 44px;
}

.section-heading h2 em {
  font-style: normal;
  color: #03a4ed;
}

.section-heading h2 span {
  color: #fe3f40;
}

.main-blue-button a {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-red-button a {
  display: inline-block;
  background-color: #fe3f40;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

.main-white-button a {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #fe3f40;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #fe3f40!important;
}

.background-header .nav li a.active {
  color: #fe3f40!important;
}

.header-area {
  background-color: #fafafa;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo h4 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    color: #03a4ed;
    line-height: 100px;
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.logo h4 span {
  color: #fe3f40;
}

.background-header .main-nav .logo h4 {
  line-height: 80px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
  padding-left: 40px;
}

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a {
  color: #fff !important;
  padding: 0px 20px;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover,
.header-area .main-nav .nav li:last-child a.active {
  color: #fff !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li a {
  color: #2a2a2a;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #fe3f40!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #fe3f40!important;
  opacity: 1;
}

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover {
  background-color: #03a4ed;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #fe3f40!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #fe3f40;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #fe3f40!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #fe3f40!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #fe3f40;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #fe3f40;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 226px 0px 120px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  background-image: url(../images/baner-dec-left.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 100px;
  width: 193px;
  height: 467px;
}

.main-banner:before {
  content: '';
  background-image: url(../images/baner-dec-right.png);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 100px;
  width: 98px;
  height: 290px;
}

.main-banner .left-content {
  margin-right: 45px;
}

.main-banner .left-content h6 {
  text-transform: uppercase;
  font-size: 18px;
  color: #fe3f40;
  margin-bottom: 15px;
}

.main-banner .left-content h2 {
  font-size: 50px;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 72px;
}

.main-banner .left-content h2 em {
  color: #03a4ed;
  font-style: normal;
}

.main-banner .left-content h2 span {
  color: #fe3f40;
}

.main-banner .left-content p {
  margin: 20px 0px;
}

.main-banner .left-content form {
  margin-top: 30px;
  width: 470px;
  height: 66px;
  position: relative;
}

.main-banner .left-content form button {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 500;
  color: #fe3f40;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  outline: none;
  border: none;
}

.main-banner .left-content form input {
  width: 470px;
  height: 66px;
  background-color: #03a4ed;
  border-radius: 33px;
  border: none;
  outline: none;
  padding: 0px 25px;
  color: #fff;
  letter-spacing: 0.25px;
  font-size: 15px;
  font-weight: 300;
}

.main-banner .left-content form input::placeholder {
  color: #fff;
}



/* 
---------------------------------------------
About Us Style
--------------------------------------------- 
*/

#about {
  margin-top: 120px;
}

.about-us {
  background-image: url(../images/about-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 140px 0px 120px 0px;
}

.about-us .left-image {
  margin-right: 45px;
}

.about-us .services .item {
  margin-bottom: 30px;
}

.about-us .services .item .icon {
  float: left;
  margin-right: 25px;
}

.about-us .services .item .icon img {
  max-width: 70px;
}

.about-us .services .item h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.about-us .services .item p {
  color: #fff;
}


/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.our-services {
  margin-top: 0px;
  padding-top: 120px;
}

.our-services .left-image {
  margin-right: 45px;
}

.our-services .section-heading h2 {
  margin-right: 100px;
}

.our-services .section-heading p {
  margin-top: 30px;
  margin-bottom: 60px;
}

.our-services .progress-skill-bar {
  margin-bottom: 30px;
  position: relative;
  width: 100%;
}

.our-services .progress-skill-bar span {
  position: absolute;
  top: 0;
  font-size: 18px;
  font-weight: 600;
  color: #03a4ed;
}

.our-services .first-bar span {
  left: 69%;
}

.our-services .second-bar span {
  left: 81%;
}

.our-services .third-bar span {
  left: 88%;
}

.our-services .progress-skill-bar h4 {
  font-size: 18px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 14px;
}

.our-services .progress-skill-bar .full-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: #f7eff1;
  position: relative;
  z-index: 1;
}

.our-services .progress-skill-bar .filled-bar {
  background: rgb(255,77,30);
  background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);
  height: 6px;
  border-radius: 3px;
  margin-bottom: -6px;
  position: relative;
  z-index: 2;
}

.our-services .first-bar .filled-bar {
  width: 71%;
}

.our-services .second-bar .filled-bar {
  width: 83%;
}

.our-services .third-bar .filled-bar {
  width: 90%;
}


/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio {
  padding-top: 120px;
  margin-top: 0px;
}

.our-portfolio .section-heading h2 {
  text-align: center;
  margin: 0px 90px 0px 90px;
  margin-bottom: 120px;
  position: relative;
  z-index: 1;
}

.our-portfolio .item {
  position: relative;
}

.our-portfolio .item:hover .hidden-content {
  top: -100px;
  opacity: 1;
  visibility: visible;
}

.our-portfolio .item:hover .showed-content {
  top: 90px;
}

.our-portfolio .hidden-content {
  background: rgb(255,77,30);
  background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  opacity: 0;
  top: 0;
  visibility: hidden;
  position: absolute;
  z-index: 2;
  transition: all 0.5s;
}

.our-portfolio .hidden-content:after {
  width: 20px;
  height: 20px;
  position: absolute;
  background: rgb(255,77,30);
  content: '';
  left: 50%;
  bottom: -8px;
  margin-left: -5px;
  transform: rotate(45deg);
  background: linear-gradient(105deg, rgba(255,52,69,1) 0%, rgba(255,51,78,1) 100%);
  z-index: -1;
}

.our-portfolio .hidden-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

.our-portfolio .hidden-content p {
  color: #fff;
}

.our-portfolio .showed-content {
  top: 0px;
  position: relative;
  z-index: 3;
  background-color: #fff;
  text-align: center;
  padding: 50px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  transition: all 0.5s;
}

.our-portfolio .showed-content img {
  max-width: 100px;
}


/* 
---------------------------------------------
Blog
--------------------------------------------- 
*/

.our-blog {
  position: relative;
  margin-top: 80px;
  padding-top: 120px;
}

.our-blog .section-heading h2 {
  margin-right: 180px;
}

.our-blog .top-dec {
  text-align: right;
  margin-top: -80px;
}

.our-blog .top-dec img {
  max-width: 270px;
}

.our-blog .left-image {
  position: relative;
}

.our-blog .left-image img {
  border-radius: 20px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.our-blog .left-image .info {
  position: relative;
}

.our-blog .left-image .info .inner-content {
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 20px;
  margin-right: 75px;
  position: absolute;
  margin-top: -100px;
  padding: 30px;
}

.our-blog .left-image ul li {
  display: inline-block;
  font-size: 15px;
  color: #afafaf;
  font-weight: 300;
  margin-right: 20px;
}

.our-blog .left-image ul li:last-child {
  margin-right: 0px;
}

.our-blog .left-image ul li i {
  color: #ff4d61;
  font-size: 16px;
  margin-right: 8px;
}

.our-blog .left-image h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin: 20px 0px 15px 0px;
}

.our-blog .left-image .info .main-blue-button {
  position: absolute;
  bottom: -80px;
  left: 0;
}

.our-blog .right-list {
  margin-left: 30px;
}

.our-blog .right-list ul li {
  display: inline-flex;
  width: 100%;
  margin-bottom: 30px;
}

.our-blog .right-list .left-content {
  margin-right: 45px;
}

.our-blog .right-list .left-content span {
  font-size: 15px;
  color: #afafaf;
  font-weight: 300;
}

.our-blog .right-list .left-content span i {
  color: #ff4d61;
  font-size: 16px;
  margin-right: 8px;
}

.our-blog .right-list .left-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin: 20px 0px 15px 0px;
}


.our-blog .right-list .right-image img {
  width: 250px;
  border-radius: 20px;
}


/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  padding: 160px 0px;
  background-image: url(../images/contact-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.contact-us .section-heading h2,
.contact-us .section-heading h2 em,
.contact-us .section-heading h2 span {
  color: #fff;
}

.contact-us .section-heading p {
  color: #fff;
  margin-top: 30px;
}

.phone-info {
  margin-top: 40px;
}

.phone-info h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.phone-info h4 span i {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  background-color: #fff;
  border-radius: 50%;
  color: #ff3b2c;
  font-size: 22px;
  margin-left: 30px;
  margin-right: 15px;
}

.phone-info h4 span a {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

form#contact .contact-dec {
  position: absolute;
  right: -166px;
  bottom: 0;
}

form#contact .contact-dec img {
  max-width: 178px;
}

form#contact {
  margin-left: 30px;
  position: relative;
  background-color: #fff;
  padding: 60px 30px;
  border-radius: 20px;
}

form#contact input {
  width: 100%;
  height: 46px;
  border-radius: 33px;
  background-color: #d1f3ff;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  margin-bottom: 20px;
}

form#contact input::placeholder {
  color: #2a2a2a;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 180px;
  min-height: 140px;
  height: 140px;
  border-radius: 20px;
  background-color: #d1f3ff;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-bottom: 20px;
}

form#contact textarea::placeholder {
  color: #2a2a2a;
}

form#contact button {
  display: inline-block;
  background-color: #03a4ed;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: none;
  outline: none;
  transition: all .3s;
}

form#contact button:hover {
  background-color: #fe3f40;
}


/* 
---------------------------------------------
Footer Style
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 
*/

 .footer1-container1-h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin-top: 12px;
  font-size: 28px;
  text-align: center;
}

.footer1-container1,
.footer1-container2,
.footer1-container3 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.footer1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  height: auto;
  flex-wrap: wrap;
  /*padding:30px;*/
}

.footer-container1-img {
  width: 150px;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 220px;
  margin-bottom: 5px;
  flex-wrap: wrap;
  padding: 2px;
}

.footer-container2,
.footer-container3 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin-bottom: 5px;
  
}

.footer-container2 a,
.footer-container3 a {
  color: gray;
  font-size: 15px;
  text-decoration: none;
}
.footer-container1-para,
  .footer-container1-para1 {
    margin-bottom: 10px !important;
  }


/* Media Queries for responsiveness */

@media (max-width: 1010px) {
  .footer,
  .footer1 {
    flex-direction: column;
    gap: 0px;
    text-align: center;
  }

  .footer-container2,
  .footer-container3,
  .footer1-container2,
  .footer1-container3 {
    align-items: center;
  }
  .footer1-container1,
  .footer1-container2,
  .footer1-container3
  {
      margin-bottom: -40px !important;
  }
  .footer1-container3
  {
      margin-top: -40px !important;
  }

  .footer-container1-img {
    width: 150px;
  }

  .footer1-container1-h3 {
    font-size: 24px;
  }

  .footer {
    gap: 0px;
  }

  .footer-container1-para,
  .footer-container1-para1 {
    margin-bottom: 10px !important;
  }
  .footer1-container2,
  .footer1-container3 {
      margin-bottom: -30px !important;
  }
   .footer1-container3 {
      padding-bottom: 15px !important;
  }
}

@media (max-width: 480px) {
  .footer1-container1-h3 {
    font-size: 20px;
  }

  .footer-container2 a,
  .footer-container3 a {
    font-size: 14px;
  }

  .footer-container1-img {
    width: 120px;
  }

  .footer,
  .footer1 {
    gap: 20px;
  }

  .footer-container1-para,
  .footer-container1-para1 {
    margin-bottom: 10px;
  }
  .footer1-container2,
  .footer1-container3 {
      margin-bottom: -40px !important;
  }
  .footer1-container3 {
      padding-bottom: 20px !important;
  }
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1645px) {
  form#contact .contact-dec {
    display: none;
  }
}

@media (max-width: 992px) {
  .main-banner {
    padding-top: 196px;
  }
  .main-banner .left-content {
    margin-right: 0px;
    text-align: center;
    margin-bottom: 45px;
  }
  .main-banner:after {
    top: 76px;
    z-index: -1;
  }
  .main-banner .left-content form,
  .main-banner .left-content form input {
    width: 100%!important;
  }
  #about {
    margin-top: 0px;
  }
  .about-us {
    position: relative;
    background-image: none;
    padding: 0px;
  }
  .about-us .left-image {
    margin-right: 0px;
    position: absolute;
    bottom: -220px;
    right: 0;
  }
  .about-us .services {
    text-align: center;
  }
  .about-us .services .item  {
    background: rgb(255,77,30);
    background: linear-gradient(105deg, rgba(255,77,30,1) 0%, rgba(255,44,109,1) 100%);
    padding: 30px;
    border-radius: 20px;
    display: inline-block;
  }
  .about-us .services .item .right-text {
    text-align: left;
  }
  .our-services {
    margin-top: 200px;
  }
  .our-services .left-image {
    margin-right: 0px;
    margin-bottom: 45px;
  }
  .our-services .section-heading h2,
  .our-services .section-heading p {
    margin-right: 0px;
    text-align: center;
  }
  .our-portfolio .section-heading h2 {
    margin: 0px 0px 80px 0px;
  }
  .our-portfolio .item {
    margin-bottom: 15px;
  }
  .our-blog {
    margin-top: 0px;
  }
  .our-blog .top-dec {
    display: none;
  }
  .our-blog .section-heading h2 {
    margin-right: 0px;
    text-align: center;
    margin-bottom: 45px;
  }
  .our-blog .left-image .info .inner-content {
    position: relative;
    margin-right: 0px;
  }
  .our-blog .left-image .info .main-blue-button {
    position: relative;
    bottom: 0px;
    margin-top: 30px;
  }
  .our-blog .left-image {
    margin-bottom: 45px;
  }
  .contact-us {
    margin-top: 60px;
    padding: 120px 0px;
  }
  .contact-us .section-heading {
    text-align: center;
  }
  form#contact {
    margin-left: 0px;
    margin-top: 30px;
  }
  form#contact .contact-dec {
    display: none;
  }
  footer p {
    margin: 15px 0px 30px 0px;
  }
}

@media (max-width: 767px) {
  .about-us .left-image {
    bottom: -280px;
  }
  .our-blog .right-list {
    margin-left: 0px;
  }
  .our-blog .right-list ul li {
    display: inline-block;
    margin-top: 0px;
    padding-top: 30px;
    border-top: 1px solid #eee;
  }
  .our-blog .right-list .left-content {
    margin-right: 0px;
    width: 100%;
    margin-bottom: 15px;
  }
  .our-blog .right-list .right-image,
  .our-blog .right-list .right-image img {
    width: 100%;
  }
  .phone-info h4 span {
    display: block;
    margin-top: 15px;
  }
  .phone-info h4 span i {
    margin-left: 0px;
  }
}

/* ***********************************************************************admin login*******************************************
/* Admin Panel Login Page Styling */
.admin-panel-login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4; /* Light gray background */
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Login Container */
.admin-panel_login-container {
    background: #fff;
    padding: 30px;
    width: 350px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-radius: 8px;
}

/* Title */
.admin-panel_login-container h2 {
    margin-bottom: 20px;
    font-size: 22px;
    color: #333;
}

/* Input Fields */
.admin-panel-login-form input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* Login Button */
.admin-panel-login-form button {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.admin-panel-login-form button:hover {
    background-color: #0056b3;
}

/* Error Message */
.admin-panel_error-message {
    color: red;
    font-size: 14px;
    margin-top: 10px;
}

/* Back to Home Link */
.admin-panel-login-form a {
    display: block;
    margin-top: 10px;
    text-decoration: none;
    color: #007bff;
}

.admin-panel-login-form a:hover {
    text-decoration: underline;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    .admin-panel_login-container {
        width: 90%; /* Make form wider on small screens */
        padding: 20px;
    }
    
    .admin-panel-login-form input, 
    .admin-panel-login-form button {
        padding: 10px;
        font-size: 14px;
    }
}
/**************************************************************************admin panel********************************************************************/
.admin-panel-admin-panel{
    margin-left: 250px;
    /* text-align: center; */
}
.admin-panel-admin-panel h1{
    margin-top: 70px;
    text-align: center;
    margin-left: 190px; 
    font-size: 25px; 
}
.admin-panel-admin-panel p{
    text-align: center;
    margin-left: 190px;  
    font-size: 18px;
}
@media screen and (max-width: 768px) {
    .admin-panel-admin-panel {
        margin-left: 0; /* Remove left margin for full width */
        padding: 10px; /* Add some padding for better spacing */
        text-align: center; /* Center align content */
    }

    .admin-panel-admin-panel h1 {
        margin-left: 0; /* Remove extra margin */
        font-size: 22px; /* Adjust font size for smaller screens */
        margin-top: 80px; /* Reduce top margin */
    }

    .admin-panel-admin-panel p {
        margin-left: 0; /* Remove extra margin */
        font-size: 16px; /* Slightly reduce font size */
    }
}

 /* ***********************************************sidebar******************************************************** */

/* Hamburger Menu Styles */
.admin-panel-hamburger-menu {
    display: none;
    cursor: pointer;
    position: fixed;
    top: 20px;
    left:10px;
    z-index: 1000;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.admin-panel-hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #ff6600;
    transition: all 0.3s ease-in-out;
}

.admin-panel-admin-img  {
    text-align: center; /* Center the content */
    font-size: 60px;
}
/* Sidebar Styles */
.admin-panel-sidebar {
    width: 200px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: #ea3535;
    color: #ffffff;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    z-index: 999;
    overflow-y: auto; 
}

.admin-panel-sidebar a {
    text-decoration: none;
    color: #ffffff;
}

.admin-panel-sidebar h1 {
    font-size: 22px;
    text-align: center;
}
.admin-panel-sidebar h1:hover{
    color: black;
}

.admin-panel-sidebar h5{
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #495057;
}
.admin-panel-sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.admin-panel-sidebar ul li {
    margin: 15px 0;
}
.admin-panel-sidebar ul li a {
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    padding: 7px;
    display: flex; /* Use flexbox for icon and text alignment */
    align-items: center; /* Vertically align icon and text */
    border-radius: 5px;
    transition: background 0.3s, color 0.3s;
}

.admin-panel-sidebar ul li a i {
    margin-right: 15px; /* Space between the icon and the text */
    font-size: 20px; /* Adjust icon size */
    color: #ffffff; /* Icon color */
   transition: color 0.3s ease-in-out; /* Smooth color change on hover */
}

.admin-panel-sidebar ul li a:hover {
    background-color: #FF6454;
    color: #d4d4d4;
}

.admin-panel-sidebar ul li a:hover i {
    color: #d4d4d4; /* Change icon color on hover */
}

@media screen and (max-width: 768px) {
    .admin-panel-hamburger-menu{
        display: block;
    }

    .admin-panel-sidebar {
        transform: translateX(-100%);
        width: 250px;
    }

    .admin-panel-sidebar.active {
        transform: translateX(0);
    }

    /* Hamburger menu active state */
    .admin-panel-hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .admin-panel-hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .admin-panel-hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    /* Overlay when sidebar is active */
    .admin-panel::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out;
    }

    .admin-panel.admin-panel-sidebar-active::after {
        opacity: 1;
        visibility: visible;
    }
}

@media screen and (max-width: 480px) {

    .admin-panel-sidebar {
        width: 230px;
    }

    .admin-panel-sidebar h2 {
        font-size: 20px;
    }

    .admin-panel-sidebar ul li a {
        font-size: 16px;
        padding: 8px 12px;
    }
}
/* ***********************************************************add books******************************************** */
.admin-panel-add-books {
    /*width: 25%;*/
    margin-left: 250px;
    /*margin-top: 70px;*/
}

.admin-panel-add-books h1 {
    margin-top: 50px;
    margin-left: 5px;
    font-size: 25px;
}

/* Form Styles */
.admin-panel-add-books form {
    margin-top: 30px;
    font-size: 14px;
    background-color: #f1f1f1;
    /* border-radius: 10px; */
    box-shadow: 0 8px 15px rgba(255, 95, 99, 0.4);
    width: 95%;
    padding: 20px;
}

.admin-panel-add-books form label {
    display: block;
    /* margin-top: 8px; */
    font-size: 14px;
    margin-bottom: 5px;
    color: #34495e;
}

.admin-panel-add-books select {
    width: 98%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 14px;
    color: #333;
    outline: none;
    appearance: none;
    cursor: pointer;
}

.admin-panel-add-books select:hover {
    border-color: #888;
}

.admin-panel-add-books select:focus {
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.admin-panel-add-books option {
    padding: 10px;
    font-size: 14px;
    color: #333;
}

.admin-panel-add-books form input[type="text"],
.admin-panel-add-books form input[type="file"],
.admin-panel-add-books form input[type="number"] {
    width: 95%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid #bdc3c7;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}

.admin-panel-add-books .btn {
    width: 98%;
    padding: 12px;
    margin-top: 10px;
    background-color: #FF5F63 ;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.admin-panel-add-books .btn:hover{
    background-color: #FF3641;
}
.admin-panel-add-books .message {
    font-size: 14px;
    color: green;
    margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
    .admin-panel-add-books {
        margin-left: 0; /* Remove left margin for full width */
        width: 100%;
        padding: 10px;
    }

    .admin-panel-add-books h1 {
        font-size: 22px;
        text-align: left;
        margin-top: 75px;
    }

    .admin-panel-add-books form {
        width: 100%;
        padding: 15px;
        font-size: 12px;
    }

    .admin-panel-add-books form input[type="text"],
    .admin-panel-add-books form input[type="file"],
    .admin-panel-add-books form input[type="number"],
    .admin-panel-add-books select {
        width: 100%;
        font-size: 12px;
        padding: 10px;
    }

    .admin-panel-add-books .btn {
        width: 100%;
        font-size: 14px;
        padding: 10px;
    }
}


/* *******************************************************manage books****************************************** */
.admin-panel-manage-books {
    margin-top: 32px;
    font-size: 14px;
    /*width: 100%;*/
    margin-left: 200px;
    padding: 20px;
}

.admin-panel-manage-books h1 {
    margin-left: 5px;
    color: black;
    margin-bottom: 20px;
    font-size: 25px;
}

.admin-panel-manage-books .message {
    text-align: center;
    color: #ff6600;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Table Styles */
.admin-panel-manage-books table {
    width: 100%;
    border-collapse: collapse;
    /* margin-top: 20px; */
}

.admin-panel-manage-books thead {
    background-color: #FF5F63;
    color: #fff;
}

.admin-panel-manage-books thead th {
    padding: 12px;
    text-align: left;
}

.admin-panel-manage-books tbody tr {
    border-bottom: 1px solid #ddd;
}

.admin-panel-manage-books tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

.admin-panel-manage-books td {
    padding: 12px;
    vertical-align: middle;
}

.admin-panel-manage-books td img {
    border-radius: 5px;
}

/* Actions (Edit & Delete) */
.admin-panel-manage-books td form {
    display: inline-block;
}

.admin-panel-manage-books td a {
    text-decoration: none;
    color: #EA3535;
    font-weight: bold;
    margin-left: 10px;
}

.admin-panel-manage-books td a:hover {
    text-decoration: underline;
}

/* Buttons */
.admin-panel-manage-books button {
    background-color: #EA3535;
    color: white;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.admin-panel-manage-books button:hover {
    background-color: #FF5F63;
}

.admin-panel-manage-books form {
    display: flex;
    flex-direction: column;
}

/* Input Fields */
.admin-panel-manage-books input[type="text"] {
    padding: 8px;
    width: 80px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 5px;
}

.admin-panel-manage-books input[type="text"]:focus {
    border-color: #f44336;
    outline: none;
}
/* Responsive Table - Horizontal Scroll for Small Screens */
@media screen and (max-width: 768px) {
    .admin-panel-manage-books {
        margin-top: 70px;
        margin-left: 0;
        padding: 10px;
        font-size: 12px;
    }

    /* Wrap the table inside a scrollable container */
    .admin-panel-manage-books table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    .admin-panel-manage-books thead,
    .admin-panel-manage-books tbody,
    .admin-panel-manage-books tr,
    .admin-panel-manage-books th,
    .admin-panel-manage-books td {
        display: revert; /* Resetting to table behavior */
    }

    /* Ensure the table container has horizontal scrolling */
    .admin-panel-manage-books table {
        overflow-x: auto;
        display: block;
    }

    /* Hide overflow on body to prevent layout shifting */
    body {
        overflow-x: hidden;
    }
}


/***********************************************************************************alerts***************************************************/
.alert-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border: 3px solid;
    border-image: linear-gradient(to right, yellow, orange) 1;
    width: 450px;
}
.alert-container img {
    width: 50px;
    height: auto;
}
.alert-container p {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
}
.alert-container button {
    background: orange;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

/* New class specifically for confirmation alerts */
.confirm-alert {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.confirm-alert .btn-container {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.confirm-alert button {
    padding: 8px 15px;
    font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .alert-container {
        width: 90%;
        padding: 15px;
    }
    .alert-container p {
        font-size: 16px;
    }
    .alert-container button {
        font-size: 14px;
        padding: 8px 15px;
    }
}
/*************************************************************new*********************************************/
/* Admin Panel Alert Styling */
.admin-panel-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    display: none; /* Hidden by default */
    z-index: 9999;
    min-width: 300px;
    max-width: 500px;
}

/* Success and Error Colors */
.admin-panel-alert.success {
    background-color: #28a745; /* Green */
}

.admin-panel-alert.error {
    background-color: #dc3545; /* Red */
}

/* Fade-In and Fade-Out */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translate(-50%, -60%); }
    10% { opacity: 1; transform: translate(-50%, -50%); }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -60%); }
}

/**********************************************************************view users****************************************************/
.admin-panel-view-users {
    margin-top: -30px;
    flex-grow: 1;
    padding: 20px;
    margin-left: 200px; /* Adjusted for sidebar */
}

/* Heading Styles */
.admin-panel-view-users h2 {
    color: #343a40;
    /*text-align: center;*/
    margin-left: 200px;
    margin-bottom: 20px;
}

/* Table Styling */
.admin-panel-view-users table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    /*border-radius: 8px;*/
    /*overflow: hidden;*/
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-panel-view-users th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.admin-panel-view-users th {
    background: #FF5F63;
    color: white;
    font-weight: bold;
}

.admin-panel-view-users td {
    color: #333;
}

/* Alternate Row Colors */
.admin-panel-view-users tbody tr:nth-child(even) {
    background: #f2f2f2;
}


@media screen and (max-width: 768px) {
    .admin-panel-view-users {
        /*margin-top: 1px;*/
        margin-left: 0; /* Remove left margin for full width */
        padding: 10px; /* Reduce padding for small screens */
        overflow-x: auto; /* Enable horizontal scrolling */
    }
    .admin-panel-view-users h2{
        text-align: left;
    }

    .admin-panel-view-users table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap; /* Keep content in a single row */
    }

    .admin-panel-view-users th, 
    .admin-panel-view-users td {
        padding: 10px;
        font-size: 14px; /* Adjust font size for small screens */
    }
}
/*******************************************************************************************action button**************************************/
    .status-btn {
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: bold;
            display: inline-block;
            gap: 40px;
        }
        .approved { background-color: #28a745; color: white; }
        .rejected { background-color: #dc3545; color: white; margin-top : 10px }
        .blocked { background-color: #ff5f63; color: white;margin-top : 10px  }
        .delete-btn { background-color: #6c757d; color: white; margin-top : 10px }
        .toggle-btn { background-color: #007bff; color: white; margin-top : 10px }
        
/******************************************************************noti&event***************************************************/
.admin-panel-add-notification {
    margin-top: 35px;
    margin-left: 250px;
    width: 78%;
    /*margin: auto;*/
    padding: 20px;
    border: 1px solid #ddd;
    background: #fff;
box-shadow: 0 8px 15px rgba(255, 95, 99, 0.4);
/*border-radius: 8px;*/
}

.admin-panel h2 {
    /*text-align: left;*/
    margin-top: 50px;
     margin-left: 250px;
    color: #333;
}

.admin-panel-add-notification input, textarea, select {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.admin-panel-add-notification button {
    width: 100%;
    padding: 10px;
    background-color: #FF5F63;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.admin-panel-add-notification button:hover {
    background-color: #EA3535;
}

.admin-panel-add-notification.success-message {
    color: green;
    font-weight: bold;
    text-align: center;
}
@media screen and (max-width: 768px) {
     .admin-panel h2 {
        margin-left:10px;
        /*padding: 10px;*/
        /*margin-top: 100px;*/
        font-size: 20px; /* Adjust font size */
    }
    .admin-panel-add-notification {
        margin-top: 30px;
        margin-bottom: 50px;
        margin-left: 10px; /* Adjust margin for centering */
        width: 95%; /* Increase width for small screens */
        padding: 10px; /* Reduce padding */
    }

   

    .admin-panel-add-notification input, 
    .admin-panel-add-notification textarea, 
    .admin-panel-add-notification select {
        font-size: 14px; /* Adjust font size for readability */
    }

    .admin-panel-add-notification button {
        font-size: 14px;
        padding: 8px;
    }
}

/**************************************************************************manage noi and events*****************************************************/
/* Ensure Table Layout is Consistent */
.admin-panel-manage-notification{
    margin-left:210px;
}
.admin-panel-manage-notification h2{
    text-align: left;
    margin-left: 320px;
}
.admin-panel-manage-notification h2,h3{
    padding: 20px;
}
.admin-panel-manage-notification table {
    width: 99%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
box-shadow: 0 8px 15px rgba(255, 95, 99, 0.1);
    table-layout: fixed; /* Fix column width */
    /*padding: 70px;*/
}
.admin-panel-manage-notification th{
    background-color: #FF5F63
}
/* Wrap Long Text Instead of Scrolling */
.admin-panel-manage-notification th,
.admin-panel-manage-notification td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
    word-wrap: break-word; 
    overflow-wrap: break-word; /* Ensure text wraps in all cases */
    white-space: normal; /* Allow multi-line text */
}

/* Ensure Consistent Column Sizes */
.admin-panel-manage-notification th:nth-child(1),
.admin-panel-manage-notification td:nth-child(1) {
    width: 20%; /* Adjust based on your design */
}

.admin-panel-manage-notification th:nth-child(2),
.admin-panel-manage-notification td:nth-child(2) {
    width: 50%; /* Description column */
}

.admin-panel-manage-notification th:nth-child(3),
.admin-panel-manage-notification td:nth-child(3) {
    width: 15%;
}

.admin-panel-manage-notification th:nth-child(4),
.admin-panel-manage-notification td:nth-child(4) {
    width: 15%;
}

/* Responsive Adjustments for Small Screens */
@media screen and (max-width: 768px) {
    .admin-panel h2{
        margin-top:70px ;
        margin-left: 10px;
    }
    .admin-panel-manage-notification {
        width: 100%;
        max-width: 100%;
        padding: 10px;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .admin-panel-manage-notification h2, 
    .admin-panel-manage-notification h3 {
        font-size: 18px;
        text-align: center;
        margin-bottom: 10px;
        padding: 10px;
    }

    /* Adjust Table Layout for Small Screens */
    .admin-panel-manage-notification table {
        table-layout: auto; /* Let it adjust for smaller screens */
    }

    .admin-panel-manage-notification th, 
    .admin-panel-manage-notification td {
        font-size: 12px;
        padding: 8px;
        text-align: center;
    }

    /* Reduce Column Width for Mobile */
    .admin-panel-manage-notification th:nth-child(1),
    .admin-panel-manage-notification td:nth-child(1) {
        width: 25%;
    }

    .admin-panel-manage-notification th:nth-child(2),
    .admin-panel-manage-notification td:nth-child(2) {
        width: 40%;
    }

    .admin-panel-manage-notification th:nth-child(3),
    .admin-panel-manage-notification td:nth-child(3),
    .admin-panel-manage-notification th:nth-child(4),
    .admin-panel-manage-notification td:nth-child(4) {
        width: 17.5%;
    }
}


/*****************************************************************************manage course*************************************************************/


/* Admin Panel Container */
.admin-panel-manage-students {
    margin-left: 200px;
    padding: 20px;
    max-width: 95%;
    /*margin: auto;*/
    background: white;
    border-radius: 10px;
    /*box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);*/
}

/* Headings */
.admin-panel-manage-students h2 {
    margin-top: 30px;
    text-align: left;
    color: #333;
    margin-bottom: 20px;
}

/* Table Styling */
.admin-panel-manage-students table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    /*border-radius: 8px;*/
    overflow: hidden;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.admin-panel-manage-students th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

.admin-panel-manage-students th {
    background-color: #FF5F63;
    color: #333;
}

.admin-panel-manage-students td {
    background-color: #ffffff;
}
@media screen and (max-width: 768px) {
    .admin-panel-manage-students {
        margin-top: 50px;
        margin-left: 0; /* Remove left margin for full width */
        padding: 10px; /* Reduce padding */
        overflow-x: auto; /* Enable horizontal scrolling */
    }
    .admin-panel-manage-students h2{
        margin-left: 7px;
    }
    .admin-panel-manage-students table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap; /* Prevent stacking */
    }

    .admin-panel-manage-students th, 
    .admin-panel-manage-students td {
        padding: 10px;
        font-size: 14px; /* Adjust font size */
    }
}


/*-- Shop now CSS Styling --*/
.our-products-section {
  margin-bottom: 100px; 
}
.slider-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: flex;
}

.slider-track {
  display: flex;
  animation: slideLeft 30s linear infinite;
  gap: 15px;
}

.category-product-card {
  
  flex: 0 0 8%; /* Show 6 cards at a time */
  background: white;
  border: 3px solid #ddd;
  border-radius: 15px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
  text-align: center;
  padding: 8px; /* Increased padding for better spacing */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effect */
}

.category-product-card:hover {
  transform: translateY(-10px); /* Lift effect on hover */
  box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.15); /* Darker shadow on hover */
}

.category-product-card img {
  width: 80%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 15px; /* Space between image and text */
}

.category-product-card h5 {
  font-size: 16px; /* Slightly larger text */
  color: #333; /* Darker text color */
  font-weight: bold;
  margin-bottom: 10px; /* Space between text and button */
}

.shop-now-button a {
  margin-top: 12px; /* More space above the button */
  display: inline-block;
  background-color: #ff4747; /* Brighter red for button */
  color: white;
  padding: 12px 20px; /* Larger padding for a more prominent button */
  border-radius: 25px;
  text-decoration: none;
  font-size: 16px; /* Larger font size */
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.shop-now-button a:hover {
  background-color: #05c6ed;
  transform: scale(1.1); /* Slight scale effect on hover */
}

/* Animation for Sliding */
@keyframes slideLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Featured Products Section */


/* Product Card Styling */
.product-card {
  flex: 0 0 16.6%; /* Show 6 cards in one row */
  background: white;
  border: 2px solid #ddd;
  border-radius: 15px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
  text-align: center;
  padding: 20px; /* Increased padding for better spacing */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effect */
}

.product-card:hover {
  transform: translateY(-10px); /* Lift effect on hover */
  box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.15); /* Darker shadow on hover */
}

.product-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 15px; /* Space between image and text */
}

.product-card h5 {
  font-size: 16px; /* Slightly larger text */
  color: #333; /* Darker text color */
  font-weight: bold;
  margin-bottom: 10px; /* Space between text and button */
}

/* Shop Now Button */
.shop-now-button a {
  margin-top: 12px;
  display: inline-block;
  background-color: #ff4747; /* Brighter red for button */
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.shop-now-button a:hover {
  background-color: #05c6ed;
  transform: scale(1.1); /* Slight scale effect on hover */
}

/* Price Styling */
.product-price {
  font-size: 18px;
  color: #e63946; /* Red color for pricing */
  font-weight: bold;
  margin: 10px 0; /* Adds space above and below price */
}

/* Category Tabs Styling */
.category-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-button {
  padding: 10px 20px;
  border: none;
  background-color: #ddd;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  transition: 0.3s;
}

.tab-button.active, .tab-button:hover {
  background-color: #ff4747;
  color: white;
}

/* Hide other category products initially */
.category-products {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Show only the active category */
.category-products.active {
  display: flex;
}