/*
Theme Name: PTR | Pro Tech Radar
Theme URI: https://protechradar.com
Author: PTR Team
Author URI: https://protechradar.com
Description: PTR | Pro Tech Radar is a sleek, modern, and fully responsive website theme designed specifically for gadget enthusiasts and tech reviewers. Featuring a clean layout, easy navigation, and customizable sections, PTR lets you showcase the latest tech reviews, unboxings, comparisons, and news with professional flair. Perfect for bloggers, influencers, and tech startups aiming to keep their audience up-to-date with cutting-edge gadgets and innovations.
Version: 1.0
Tags: Gadget Reviews,Tech Reviews,Latest Gadgets,Smartphone Reviews,Laptop Reviews,Wearable Tech,Consumer Electronics,Tech Unboxing,Product Comparisons,Tech News,Electronic Devices,Tech Tips,Device Performance,Camera Reviews,Gaming Gear Reviews,Smart Home Devices,Mobile Accessories,Tech Trends,Innovative Gadgets,Tech Insights
Text Domain: ptr
logo color:Blue (#007BFF) + Grey (#CED4DA) for PTR


*/

@import url('https://use.typekit.net/xyz123.css'); /* If using Adobe Fonts */
/*--------------------------------------------------------------
# Site Globle Colors change here
--------------------------------------------------------------*/
:root{
  --Background-color: #343a40;              /* Header & All Background (Obsidian Black) Color same  */
  --ft-Background-color: #343a40;
  --logo-color: #F2F2F2;                    /* Pearl White Color  */
  --tagline-color: #007BFF;                 /* Primary Accent (Cyber Blue) Color  */
  --navbar-color:#e9ecef;                   /* (Grey) Color */
  --text-color: #F2F2F2;                    /* Pearl White Color */
  --navbar-hover:#007BFF;                   /* Navbar Hover Primary Accent (Cyber Blue) Color */
  --icon-color-hover:#007BFF;               /* icon-color-hover Neon Mint Color */
  --hamburger-color: #F2F2F2;               /* Default white */
  --hamburger-active: #007BFF;              /* Active blue */
  --blk-text-color:#000;                    /* Black Color Nav Text */
  --white-text-color:#fff;
  --button-hover:#1c9c26;


  --header-width: 100%;                 /* Header and Footer width */
  --navbar-width: 98%;                        /* Navbar width */
  

  --font-family: 'Roboto', sans-serif ;


}




/*--------------------------------------------------------------
# Header (Responsive)
--------------------------------------------------------------*/
/* Hide Google Translate Toolbar */
#google_translate_element {
    display: none !important;
}

#wpadminbar {
    display: none !important;
}
html {
    margin-top: 0 !important;
}

/* ==============================
   Global Reset
============================== */
.site-header {
  width: 100%;
  background: var(--Background-color);  /* Dark header */
  color: #fff;
  padding: 10px 20px;
  position: fixed;
  top: 0;             /* Ensure it sticks to top */
  left: 0;            /* Ensure it starts from left */
  z-index: 1000;      /* Stay above other content */
}
.header-container {

  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* ==============================
   Branding (Logo + Site Info)
============================== */
.branding {
  display: flex;
  align-items: center;
  gap: 12px;
}

.branding img {
  max-height: 70px;
  border-radius: 50%;
  font-size: 70px;
  margin-right: 10px;
  margin-top: -2px;
  margin-left: -2rem;
}

.site-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.site-title {
  color: var(--logo-color);
  text-decoration: none;
  font-family: var(--font-family);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 4px;
  display: inline-block;
  position: relative;
  top: 8px;
}

.site-title a {
  color: #fff;
  text-decoration: none;
}

.site-tagline {
  font-size: 8.5px;
  font-weight: 700;
  padding-left: 10px;
  letter-spacing: 0.5rem;
  color: var(--tagline-color);
  line-height: 2;
  transform: scaleY(1.4);
  font-family: var(--font-family);
}

/* ==============================
   Icons (Dark/Light, Login, Search)
============================== */
.language-toggle-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  cursor: pointer;
  font-size: 24px;
  
  padding: 8px 12px;
  color: #fff;
}
.language-toggle-btn:hover {
  color: var(--hamburger-active);
}



.icons-container {
  display: flex;
  gap: 30px; /* Space between each icon item */
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff; /* Or any color you want */
  text-decoration: none;
  font-size: 14px;

}

.icon-item i {
  font-size: 24px;
  margin-bottom: 5px;
}

/* Optional: Remove link underline */
.icon-item span {
  text-decoration: none;
}

.icons-container a:hover i {
  color: #007BFF; /* Cyber Blue */
}
/* ================Search Bar============== */
.search-page {
  background-color: var(--navbar-color);
  color: #fff;
  padding: 40px 0;
  min-height: 80vh;
}

.search-title {
  color: var(--hamburger-active);
  text-align: center;
  margin-bottom: 30px;
}

.search-results {
  max-width: 800px;
  margin: 0 auto;
}

.search-item {
  background-color: #2a2a2a ;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  transition: 0.3s ease;
}
.icon-item{
  background: none;
  border: none;
}
.icon-item :hover{
  color: var(--hamburger-active);
}
.search-item-inner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.search-thumb img,
.result-thumbnail {
  width: 250px;
  height: 220px;
  border-radius: 5px;
}

.search-content {
  flex: 1;

}

.search-content h3 a {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

.search-content p {
  color: #fff;
  margin: 10px 0;
}

.search-read-more {
  display: inline-block;
  position: relative;
  top: 1.3rem;  /* Adjust this value to move it further down */
  padding: 8px 16px;
  background-color: var(--hamburger-active);
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}



.pagination {
  text-align: center;
  margin-top: 20px;
}

.pagination a {
  color: #3DFFB5;
  text-decoration: none;
  margin: 0 5px;
}

.pagination a:hover {
  color: #007BFF;
}

/* ================Navbar (Desktop)============== */
/* ===== Tablet Styles (768px - 1024px) ===== */
@media (max-width: 1024px) {
  .site-header {
    padding: 8px 12px;
  }

  .site-title {
    font-size: 24px;
  }

  .site-tagline {
    font-size: 14px;
  }
}


/* Mobile Responsive Header */
/* Mobile View */
@media (max-width: 768px) {

  .site-header {
    padding: 8px 16px;  /* Slightly smaller padding on mobile */
  }

  

  .site-header .container {
    flex-direction: column;
    align-items: center;  /* Center items in the header */
  }

  .site-title {
    font-size: 20px;
    margin-bottom: 5px;
    margin-top: 0.5rem;
  }

  .site-tagline {
    font-size: 10px;
    letter-spacing: 6px;
  }

  .logo {
    flex-shrink: 0;
  }

  .logo img {
    font-size: 50px;
    height: 50px;
    width: auto;
    margin-left: 1rem;
    margin-top: 0.5rem;
  }

  /* Search Bar */
  .search-item-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
  }

  /* Icons */
  .icons-container {
    gap: 15px;  /* Reduced gap on mobile */
    padding: 0;
    margin: 0;
  }

  /* Smaller adjustments for better mobile layout */
  .icon-item i {
    font-size: 18px;  /* Slightly reduce icon size on mobile */
  }

  .icon-item span {
    font-size: 14px;  /* Adjust font size for mobile */
    margin-left: 5px;  /* Reduce margin for mobile */
  }

  
}


/* Mobile Small Screen */
@media (max-width: 480px) {
  .bi-sun, 
  .bi-person-circle, 
  .bi-moon {
    font-size: 16px;
    padding: 6px;
  }

  .bi-search {
    font-size: 14px;
    padding: 10px;
    margin-right: -15px;
  }
}

/* Reset link styles */
a {
  text-decoration: none;
  color: inherit;
}

/* Icon Styles */
.bi-sun, 
.bi-person-circle, 
.bi-moon, 
.bi-search {
  font-size: 16px;
  color: #fff;
  padding: 3px;
  margin-right: 6px;

}

/* Search Form Alignment */
.d-flex {
  display: flex;
  align-items: center;
}






/*--------------------------------------------------------------
# Navbar (Mobile-First Responsive)
--------------------------------------------------------------*/
#site-navigation {
  background-color: var(--navbar-color);
  padding: 10px 20px;
}

#site-navigation ul {
  display: flex;              /* Put items in a row */
  flex-direction: row;        /* Horizontal layout */
  justify-content: center;    /* Center items horizontally */
  align-items: center;        /* Align items vertically */
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;          /* ❗ Prevent wrapping to new line */
}

#site-navigation li {
  margin: 0 15px;             /* Space between items */
}

#site-navigation a {
  text-decoration: none;
  color: black;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

#site-navigation a:hover {
  color: var(--hamburger-active);
}
/* Safely remove dropdown arrows added with ::after */
.main-navigation .menu-item-has-children > a::after {
    content: none !important;
    background: none !important;
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Hamburger Button */
.mobile-nav-toggle {
  display: none;
  border: none;
  background: none;
  cursor: pointer;
  position: absolute;
  top: 22px;
  right: 20px;
  z-index: 1001;
}

.mobile-nav-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  margin: 6px 0;
  background-color: white;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-nav-toggle.active span {
  background-color: var(--icon-color-hover);
}

.mobile-nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.mobile-nav-toggle.active span:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Styles */
@media (max-width: 768px) {
    
  .navbar {
    overflow: visible;
  }
  .navbar-nav .dropdown-menu {
    position: absolute;
    z-index: 9999;
    width: 100%;
    padding-top: 10px;
    margin-top: 5px;
  }

  .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .navbar {
    display: none !important;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    flex-direction: column;
    align-items: center;
    background: var(--navbar-color, #fff);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;

    /* ✅ Make it scrollable inside */
    max-height: 70vh;
    overflow-y: auto;
  }

  .navbar.mobile-active {
    display: flex !important;
  }

  .navbar ul {
    flex-direction: column;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
  }

  .navbar li {
    margin: 10px 0;
  }

  .navbar a {
    display: inline-block !important;
    position: relative;
    padding: 10px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    color: black;
    text-decoration: none;
  }

  .navbar li {
    text-align: center; /* ✅ Centers inline-block */
  }

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



  /* ✅ Optional: Nice custom scrollbars */
  .navbar::-webkit-scrollbar {
    width: 6px;
  }

  .navbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }

  .navbar::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  /* Prevent body scroll when menu is open (optional) */
  body.menu-open {
    overflow: hidden;
  }

}


/*--------------------------------------------------------------
# Slider Start
----------------------------------------- ---------------------*/
body {
      
      margin: 30px;
      
    }

  header{
    position: fixed;
    top: 5.1%;
    z-index: 999;

  }



/* Carousel container */
.hero-section{
  position: relative;
  top: 8.9em;
}

#carouselExampleCaptions {
  max-width: 1500px;
  position: relative;
  top: 2rem;
  width: 100%;
  margin: 0px auto;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  background-color: #f9f9f9;
}

/* Carousel images */
#carouselExampleCaptions .carousel-item img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: brightness(1);
}

#carouselExampleCaptions .carousel-item:hover img {
  transform: scale(1.03);
}

/* Captions */
#carouselExampleCaptions .carousel-caption {
  padding: 20px 25px;
  border-radius: 10px;
  bottom: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.35);
  
}

#carouselExampleCaptions .carousel-caption h5 {
  font-size: 2rem;
  font-weight: bold;
  color: #000;
  
}

#carouselExampleCaptions .carousel-caption p {
  font-size: 1rem;
  color: #000;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Indicators */
#carouselExampleCaptions .carousel-indicators button {
  width: 32px;
  height: 5px;
  background-color: #adb5bd;
  opacity: 0.7;
}

#carouselExampleCaptions .carousel-indicators .active {
  background-color: #007BFF;
  opacity: 1;
}

/* Prev/Next arrows */
#carouselExampleCaptions .carousel-control-prev-icon,
#carouselExampleCaptions .carousel-control-next-icon {
  background-color: #007BFF;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-color 0.3s ease, filter 0.3s ease;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: #fca311;
}




/*--------------------------------------------------------------
# Slider Ends
--------------------------------------------------------------*/

/* TechRadar Category Grid */
.Tech_container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0rem;
  position: relative;
  top: 11rem;
  
  
}
.dynamic-heading {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  margin-left: 15px;

}
.dynamic-subheading {
  font-size: 25px;
  margin-bottom: 2rem;
  color: #555;
  margin-left: 15px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* 8 icons per row */
  gap: 1.5rem;
}

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 120px;
  cursor: pointer;
  user-select: none;
}
.icon-box {
  font-size: 48px;
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease;
}
.category:hover .icon-box {
  transform: scale(1.1);
  color: #007BFF;
}
.category-label {
  text-align: center;
  font-weight: 600;
}
.category-label:hover {
  color: #007BFF;
  text-decoration: underline;
}

/* Tablet view (≤1024px) */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    padding: 0 1rem;
  }
  .category-label {
    font-size: 14px; /* smaller than default */
  }
  .icon-box {
    font-size: 36px; /* smaller than 48px on desktop */
  }

  .Tech_container {
    padding: 0 1rem;
    top: -4rem;
  }

  .dynamic-heading {
    font-size: 2rem; /* smaller than 2.5rem */
  }
  .dynamic-subheading {
    font-size: 20px; /* smaller than 25px */
  }
  .dynamic-heading,
  .dynamic-subheading {
    margin-left: 0;
    text-align: center;
  }
}

/* Mobile view (≤767px) */
@media (max-width: 767px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    padding: 0 1rem;
  }
  .category-label {
    font-size: 13px; /* even smaller on mobile */
  }
  .icon-box {
    font-size: 32px; /* even smaller on mobile */
  }

  .category {
    max-width: 100px;
  }

  .Tech_container {
    padding: 0 1rem;
    top: 1rem;
  }

  .dynamic-heading {
    font-size: 1.8rem; /* even smaller */
  }
  .dynamic-subheading {
    font-size: 18px; /* even smaller */
  }
  .dynamic-heading,
  .dynamic-subheading {
    margin-left: 0;
    text-align: center;
  }
}

/*-------------------Cards Container---------------------*/
/* Ensuring all cards have the same height and top rounded corners */
.container{
  margin-top: 13rem; /* Creates spacing above all cards */
}

.card {
    height: 500px;
    display: flex;
    position: relative;
    margin-bottom: 2rem;   /* Reduce spacing below cards */
    flex-direction: column;
    justify-content: space-between;
    border-radius: 20px 55px 20px 20px !important;
    overflow: hidden;
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  }



.card-img-top {
    height: 180px; /* Fixed image height */
    object-fit: cover; /* Ensures the image covers the entire space without distortion */
    border-radius: 0 0 55px 0;

}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1; /* Ensures body takes up remaining space */
    padding: 10px;

}

.card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center; /* Center align title */
}

.card-text {
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
    text-align: justify; /* Keeps the text aligned evenly */
    height: 60px; /* Fixed height to make sure all descriptions align properly */
    overflow: hidden; /* Hides any content that overflows the height */
}

/* Average rating stars */
.star {
    font-size: 24px;
    color: #ccc;
    margin: 0 2px;
}

.star.filled {
    color: gold;
}

.star.empty {
    color: #ccc;
}

/* User rating form stars */
.star-input {
    display: none;
}

.star-label {
    font-size: 32px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.3s;
    margin: 0 2px;
}

.star-label:hover,
.star-label:hover ~ .star-label {
    color: #FFD700;
}

/* Highlight selected stars */
.star-input:checked ~ .star-label {
    color: gold;
}

/* Align stars nicely */
.stars-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.btn-primary {
    align-self: center; /* Center align button */
    margin-top: auto; /* Pushes the button to the bottom */
    padding: 10px 20px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 5px; /* Slight rounding for a premium feel */
}

/* Button hover effect */
.btn.btn-primary:hover {
    background-color: #0056b3;  /* Darker blue on hover */
    cursor: pointer;
}

/* Responsive: Ensure the layout works well on smaller screens */
@media (max-width: 768px) {

    .container{
        margin-top: 4rem !important; /* Creates spacing above all cards */
    }   

    .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        
    }
}

@media (max-width: 480px) {
    .col-md-3 {
        flex: 0 0 100%;  /* 1 card per row on smaller screens */
        max-width: 100%;
       
    }
}






/*----------------template Inner Page start------------------*/

 .middle-right{
  background-color: #dee2e6;
  margin-top: 4em;
  padding: 4rem;
  font-size: 18px;
  color: #000;
  text-decoration: none;
}
.page-status h1{
  padding: 1em;
  font-size: 20px;
}



/*--------- template Inner Page End----------*/

/*--------- Contact Section Styles ----------*/
.contact-page-wrapper {
  background-color: #dee2e6;
  position: relative;
  top:0;
  bottom: 0;
  padding-top: 1px;
  min-height: 190vh;
}


.container h2{
  display: flex;
  justify-content: center;
  color: #000;

}
.form-box{
  margin: 0em;
  height: auto;
 
}

.form-group{
  position: relative;
  left: 10em;
  max-width: 750px;
  height: auto;
  margin: 10px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  display: flex;
}

.form-group .form-group {
  margin-bottom: 20px;
}

.form-group label {
  width: 25%;
  margin: auto;
  padding: auto;
  font-weight: 600;
  display: block;
  
}
.required {
  color: red;
  font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 15px;
}
.g-recaptcha {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

#submitBtn {
  display: block;
  margin: 0 auto;
}

 .btn-submit {
  background-color: #007BFF;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
 
}

.form-group .btn-submit:hover {
  background-color: #0056b3;
}

.form-errors {
  background-color: #ffe0e0;
  color: #a10000;
  border: 1px solid #ffb3b3;
  padding: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  font-size: 15px;
}

.form-errors ul {
  margin: 0;
  padding-left: 20px;
}

.form-errors li {
  list-style: disc;
}


@media (max-width: 600px) {
  .form-group {
    padding: 20px;
  }
}


/*--------- Contact Section Styles END ----------*/
/*--------------------------------------------------------------
# Main Container
--------------------------------------------------------------*/


.middle-container {
  margin-top: 5rem;
  margin-left: 0.3rem;
  display: flex;
  flex-wrap: nowrap; /* ab wrap nahi hoga, teeno ek line me rahenge */
  justify-content: space-between;
  padding: 1rem 0; /* sirf upar niche ka padding */
  gap: 0.5rem; /* bas yaha gap add kar diya */
}

.box {
  flex: 1;
  background-color: var(--main-container);
  border-radius: 20px;
  padding: 1rem;
  margin: 1; /* columns ke beech ka margin hata diya */
}

/* Left Sidebar */
#left-sidebar {
  flex: 1 1 25%;
  max-width: 25%;
  margin-left: 0; /* -0.9rem hata diya */
}

/* Main Content */
#main-container {
  flex: 1 1 50%;  /* thoda bada middle wala */
  max-width: 50%;
}

/* Right Sidebar */
#right-sidebar {
  flex: 1 1 25%;
  max-width: 25%;
}

.l-sidebar-heading,
.main-container-heading,
.r-sidebar-heading {
  font-size: 12px !important;
  margin: 0 auto;              /* equal margin */
  padding: 0 1rem;             /* horizontal padding same */
  height: 60px;                /* fixed equal height */
  display: flex;               /* text ko center karne ke liye */
  align-items: center;         /* vertical center */
  justify-content: center;     /* horizontal center */
  color: var(--navbar-hover);
  background-color: var(--primary-color);
  border-radius: 65px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}
  .main-container-heading,{
    width: 100%;
  }



//* Responsive Columns for Tablets and Phones */
@media (max-width: 1024px) {
  #left-sidebar, #main-container, #right-sidebar {
    max-width: 100%;
    flex: 1 1 100%;
  }
}

/* Responsive Columns for Tablets and Phones */
@media (max-width: 768px) {
  .container {
    display: flex;
    justify-content: center;
    gap: 5px; /* dono column ke beech chhota gap */
    max-width: 95%; /* header se thoda chhota */
    margin: 0 auto; /* center me */
  }

  .column {
    flex: 1; /* equal width */
    border-radius: 10px;
    padding: 10px;
  }

  .middle-container {
    flex-wrap: wrap;       /* ab columns wrap ho sakenge */
   
  }

  /* Left aur Right sidebar ek line me (50% + 50%) */
  #left-sidebar, 
  #right-sidebar {
    flex: 1 1 52%;
    max-width: 52%;
    gap: 0rem;
  }

  /* Main container niche full width */
  #main-container {
    flex: 1 1 auto;
    max-width: 103%;     /* header ke andar fit ho, halka sa chhota */
    margin-top: 25%; 
    margin-left: -0.8rem; /* left-right auto = center */
    order: 2;
    border: 0.3px solid black
  }

  /* Sidebars upar */
  #left-sidebar {
    order: 1;
    margin-left: -14.2rem;
    margin-top: -2.3rem;
    border: 0.3px solid black;
  }
  #right-sidebar {
    order: 1;
    margin-left: 13.1rem;
    margin-top: -20.9rem;
    border: 0.3px solid black;
  }
  .l-sidebar-heading,
  .main-container-heading,
  .r-sidebar-heading {
    margin: 0 auto;   /* centers horizontally */
    width: fit-content; /
    display: flex;
    align-items: center;     /* svg + text vertical center */
    justify-content: center; /* dono ko center me rakhe */
    gap: 2px;                /* svg aur text ka gap bahut kam */
    white-space: nowrap;
    line-height: 1;          /* text ka vertical spacing fix */
    font-size: 11px;         /* chhota font for mobile */
    height: 40px;            /* thoda chhota box for balance */
     
  }



  .l-sidebar-heading svg,
  .main-container-heading svg,
  .r-sidebar-heading svg {
    width: 14px;             /* chhota size mobile ke liye */
    height: 14px;
    flex-shrink: 0;
    display: block;          /* inline ke default alignment se bachne ke liye */
  }
.l-sidebar-heading svg{
  margin-top: 2px;
}

}

.post-box {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    margin-top: 3px;
    border-radius: 8px;
    background-color: var(--single-page-container);
}

.pagination {
    text-align: center;
    margin: 30px 0;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    border: 1px solid #0073aa;
    border-radius: 5px;
    text-decoration: none;
    color: var(--pagination-color);
    transition: 0.3s;
}

.pagination a:hover {
    background-color: var(--pagination-color);
    color: var(--navbar-hover);
}

.pagination .current {
    background-color: var(--pagination-color);
    color: var(--navbar-hover);
    font-weight: bold;
}

.post-thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 50px;
    margin-bottom: 10px;
}

.read-more {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background: var(--hamburger-active);
    color: var(--white-text-color);
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
}

.read-more:hover {
    background:var(--button-hover) ;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

.responsive-img {
    width: 50%;
    height: auto;
    max-width: 600px; /* agar max chahiye */
    margin: 0 auto;   /* center align */
    display: block;
   
}


/*--------------------------------------------------------------
# Main Container Ends
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Single Page
--------------------------------------------------------------*/
/* Thumbnail image */
.post-thumbnail {
    margin-bottom: 15px;   /* Thumbnail और Title के बीच normal gap */
}
  /* post-breadcrumb */
.post-breadcrumb{
  margin-top: 2%;
  text-align: left;   /* हमेशा बायीं ओर दिखे */
  margin-bottom: 5px;
  font-size: 14px;
  color: #777;
}


/* Title */
.post-title {
    margin-top: 3%;         /* Thumbnail से ऊपर extra gap नहीं */
    margin-bottom: 5px;    /* Title और Author के बीच छोटा gap */
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    color: var(--blk-text-color)!important;
}

/* Author + Date info */
.post-meta {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
    padding-bottom: 8px;       /* text और line में थोड़ा gap */
    border-bottom: 1px solid #ddd;  /* हल्की horizontal line */
}

#site-content{
  margin-top: 10.1rem;
  align-items: center;
  width: 100%;
  border: 1px solid black;
  background-color:var(--site-content-color);
  border-radius: 20px;

}
.post-title,
.post-meta,
.post-content{
  text-align: left !important;
  color: var(--blk-text-color)!important;
}


.home-thumb {
    border-radius: 5px;
    margin-bottom: 10px;
    width: 100%;
    height: auto;
}

.single-thumb {
    border-radius: 10px;
    margin: 1rem;
    width: 90%;
    height: auto;
    align-items: center;

}
.content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px; /* spacing between sidebar and content */
    margin: 1rem;
}

.sidebar-left {
    width: 25%; /* adjust as needed */
    background-color: #f5f5f5;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 20px;
}

.main-content {
    width: 75%;
    padding-left: 2.5rem; 
    padding-right: 2.5rem;
    padding-bottom: 2.5rem;
    box-sizing: border-box;
    background: #f9f9f9;
    border-radius: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers child items horizontally */
}


.back-btn {
    display: inline-block;
    position: absolute; 
    top: 60px;
    left: 50%;
    padding: 12px 24px;
    background: var(--button-hover);
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transform: translateX(-50%);
    cursor: pointer;

}

.back-btn:hover {
    background: var(--hamburger-active);
   
}

  /* Back-btn - Prev-btn - Next Post Button */

.post-navigation-wrapper {
    position: relative;
    width: 100%;
    height: 100px; /* Enough space for all buttons */
    margin-top: 50px;
}

.post-navigation {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Shared styles for buttons */
.post-navigation a {
    padding: 10px 20px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
}

//* Left align Prev */
.prev-btn {
    background-color: var(--hamburger-active);
    left: 0;
    top: 0;
}

/* Right align Next */
.next-btn {
    background-color: var(--hamburger-active);
    right: 0;
    top: 0;
}


/* Common button style */
.prev-btn,
.next-btn{
    display: inline-block;
    padding: 8px 20px;
    font-size: 15px;
    background-color: var(--hamburger-active);
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease;

}

/* Hover effect */
.prev-btn:hover,
.next-btn:hover {
    background-color: var(--button-hover);
    transform: translateY(-2px);
}

.social-share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.share-btn,.bi-share-fill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 4px;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  
}

.share-btn i,.bi-share-fill {
  font-size: 16px;
}

/* Colors */
.share-btn.facebook   {border:1px solid #1877F2; }
.share-btn.twitter    {border:1px solid #1da1f2; }
.share-btn.whatsapp   {border:1px solid #25d366; }
.share-btn.telegram   {border:1px solid #0088cc; }
.share-btn.instagram  {border:1px solid #e4405f; }

/* Colors */
.share-btn.facebook:hover { background: var(--primary-color);color: #000; }
.share-btn.twitter:hover  { background: var(--primary-color);color: #000; }
.share-btn.whatsapp:hover { background: var(--primary-color);color: #000; }
.share-btn.telegram:hover { background: var(--primary-color);color: #000; }
.share-btn.instagram:hover{ background: var(--primary-color);color: #000; }




/* ✅ Mobile Responsive adjustment (optional) */
@media screen and (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;

    }

    .sidebar-left, .main-content {
        width: 100%;
    }
    .main-content{
      background: #f9f9f9;

    }
    .home-thumb ,.single-thumb{
      border-radius: 20px;

    }
    .post-navigation {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .prev-btn{
        width: 65%;
        height: 100%;
        font-size: 11px;
        
    }
    
    .back-btn {
        padding: 2;
        width: 55%;
        height: auto;
        text-align: center;
        font-size: 11px;
    }
    .next-btn{

        text-align: center;
        width: 100%;
        height: auto;
        font-size: 11px;
    }

  .social-share {
    flex-direction: column;
  }
  .share-btn {
    width: 100%;
    justify-content: center;
  }
}

/*----------------Category Page ---------------*/

/* Flex container for layout */
.content-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Space between main content and sidebar */
}

/* MAIN CONTENT STYLES */
.main-content {
    flex: 1; /* Main content takes up the remaining space */
}


.post-breadcrumb{
  font-size: 1.3rem;
  position: relative;
  left: -22.5rem;
  
}

.post-breadcrumb a{
  text-decoration: none;
}


/* Post Item Layout (Thumbnail on Left, Title/Content on Right) */
.post-item {
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    color: #fff;
    text-decoration: none;

}

/* Thumbnail Image Styling */
.post-thumbnail img {
    max-width: 240px; /* Thumbnail size */
    height: 223px;
    border-radius: 8px;
    margin-bottom: -1em;
    
}

/* Post Content Styling (Title and Excerpt) */

.post-content {
    flex-grow: 1;
    font-size: 1.2rem;
    color: var(--button-hover);
}
.category-post-title{
    position: relative;
    top: -3rem;
    color: var(--button-hover);
}
/* Post Title Styling */
.post-title {
    color: var(--button-hover);
    margin: 0 0 10px 0;
    
}
.post-title a{
  text-decoration: none;
  color: var(--white-text-color);
}
.post-title a:hover{
    color: none; /* Keeps the color same as the normal state */
    text-decoration: none;
}

/* Excerpt Styling */
.post-excerpt {
    color: var(--white-text-color);
    margin: 0 0 15px 0;
}

/* Read More Button Styling */
.read-more-btn {
    background-color: var(--button-hover);
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em;
    transition: background-color 0.3s;
}

.read-more-btn:hover {
    background-color: var(--hamburger-active);
}

/* Sidebar Styling */
.sidebar-right {
    width: 25%; /* Sidebar width */
}

/* Responsive Layout for smaller screens */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }

    .sidebar-right {
        width: 100%;
    }

    .post-item {
        flex-direction: column;
    }

    .post-thumbnail img {
        max-width: 100%;
    }
}








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

.site-footer {
    position: relative;
    width: 100%;
    left: 0px;
    margin: 0 auto;
    background: var(--ft-Background-color);
    color: #fff;
    font-family: sans-serif;
    border-radius: 20px 20px 0px 0px;
    
}


.footer-middle {
    align-items: center;
    padding: 30px 20px;
    width: 79.5rem;
    margin-left: 18px;
    
    
}

.footer-logo {
    display: inline-block;
    margin-bottom: 10px;
    margin-left: -1rem;
}
.footer-logo img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-top: -1rem;
    margin-right: 15px;
    
}

#footer-title {
  color: var(--text-color);
  text-decoration: none;
  font-family: var(--font-family);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 4px;
  display: inline-block;
  position: relative;
  top: 8px;
           
}
.site-footer-tagline {
  font-size: 8.5px;
  font-weight: 700;
  padding-left: 10px;
  letter-spacing: 0.5rem;
  color: var(--tagline-color);
  line-height: 2;
  transform: scaleY(1.4);
  font-family: var(--font-family);
}

/* brand colors */
a.instagram i { color: #E4405F; }   /* Instagram */
a.facebook i  { color: #1877F2; }   /* Facebook */
a.twitter i   { color: #000000; }   /* Twitter/X */
a.whatsapp i  { color: #25D366; }   /* WhatsApp */
a.telegram i  { color: #0088cc; }   /* Telegram */
a.youtube i   { color: #FF0000; }   /* YouTube */


/* Social icons styles */
.social-icons {
    margin-left: 42.8rem;
    margin-top: -4.5rem;
    list-style: none;
    gap: 3em;
    display: flex;
    justify-content: center;
}
.social-icons li{
   gap: 14em;
}


.social-icons a:hover {
    transform: scale(1.1);
}

/* Footer Navigation Links */
.footer-nav {
    list-style: none;
    padding: 0;
    margin-left: 50.4rem;
    margin-bottom: 0px;
    display: flex; /* Add this */
    gap: 4.5rem;     /* Add gap here */
    
}

.footer-nav a {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
}

.footer-nav a:hover {
    color: var(--hamburger-active);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #ccc;
    padding: 30px;
    margin-bottom: 0rem;
    margin-left: 0px;

}

.footer-bottom ul {
  margin-bottom: -2rem;
  padding-left: 20px;

}
.footer-bottom p {
  margin-bottom: -2rem;
  padding-left: 10px;
}

#footer-title-name{
  color: var(--hamburger-active) !important;
  text-decoration: none;
  margin: 5px;
}
.legal-links {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    margin-top: -1rem;
    
    
}

.legal-links li {
    margin: 0;
    padding: 0;
}

.legal-links a {
    color: #ccc;
    text-decoration: none;
}

.legal-links a:hover {
    color: var(--hamburger-active);
}


/* Mobile View Responsive Footer */

@media (max-width: 768px) {

  .site-footer {
    width: 100% !important;
    margin-left: 0px;
  }
  .footer-top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    text-align: center;
  }

  .footer-column {
    width: 100%;
  }

  .footer-column ul li {
    display: block;
    margin: 8px 0;
  }

  /* 🔹 Mobile पर h4 के दोनों side की horizontal lines हटाओ */
  .footer-column h4::before,
  .footer-column h4::after {
    display: none !important;
    content: none !important;
  }

  /* --- Footer Middle --- */
  .footer-middle {
    width: 100%;
    margin-left: 0;
    text-align: center;
    padding: 20px 10px;
  }

  .img-logo {
    display: inline-block;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 0.6rem;
    
  }

  #footer-title {
    font-size: 20px;
    margin-bottom: 5px;
    margin-top: -1.5rem;
  }

  .site-footer-tagline {
  font-size: 10px;
    letter-spacing: 6px;
}
  
  .social-icons i{
    font-size: 18px;
    margin: 0;
  }
  .social-icons {
      display: flex;
      justify-content: center;   /* center me align */
      align-items: center;
      gap: 1.2rem;                 /* icons ke beech spacing */
      margin: 20px auto 0 -30px;  /* auto se left-right center */
      flex-wrap: wrap;           /* chhoti screen par neeche line me aa jaye */
  }
  
  /* Footer Nav - Mobile */
  .footer-nav {
      display: flex;
      justify-content: center;   /* center me align karega */
      gap: 4rem;                 /* links ke beech space */
      margin: 5px 0 0 0;        /* margin-left hata diya */
      flex-wrap: wrap;           /* jagah kam ho to neeche line me aa jaye */
      
  }

  .footer-nav li {
      display: inline-block;     /* sab ek row me rahenge */
  }

  .footer-nav a {
      color: #ccc;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.3s;
  }

  .footer-nav a:hover {
      color: #fff;
  }

  /* --- Footer Bottom --- */
  .footer-bottom {
    flex-direction: column;   /* 🔹 नीचे-नीचे लाओ */
    text-align: center;
    gap: 15px;
    margin-bottom: 0;
    margin-top: -20px;
    
  }
  .footer-bottom p{
    letter-spacing: 2px;
  }
  .legal-links {
      display: flex;
      flex-direction: row;       /* sab ek row me */
      gap: 15px;                 /* words ke beech gap */
      margin-top: -30px;
      flex-wrap: wrap;
      
  }

  .legal-links li {
      list-style: none;
      letter-spacing: 1.5px;
  }

  .legal-links a {
      color: #ccc;
      text-decoration: none;
      font-size: 12px;
  }

  .legal-links a:hover {
      color: var(--hamburger-active);
  }
}


/*--------------------------------------------------------------
# Footer Ends
--------------------------------------------------------------*/

.bi-arrow-up-short{
  margin-left: 840px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  margin: 0;
}


.back-to-top{
  margin-left: -550px;
  margin-top: 140px;
  
}

#scrollTopBtn {
  position: fixed;
  bottom: 74px;
  right: 20px;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background-color: var(--navbar-hover);
  color: black;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}





@media (max-width: 991px) {
  .middle-container {
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }

  #left-sidebar,
  #main-container,
  #right-sidebar {
    width: 95vw;
    margin-bottom: 20px;
  }

  .main-container-heading,
  .l-sidebar-heading,
  .r-sidebar-heading {
    width: 90%;
    font-size: 20px;
    letter-spacing: 2px;
  }
}


@media (max-width: 768px) {
  .match-card {
    width: 75vw; /* Make match cards take more space on smaller screens */
  }
}


@media (max-width: 991px) {
  .navbar {
    display: none;
  }

  .navbar-mobile {
    display: block;
  }
}


@media screen and (max-width: 1024px) {
  .main-content {
    grid-template-columns: 1fr;
  }
}





/* ===============================
   आपकी Light Mode CSS (default)
   =============================== */



/* ---------------------------------
   🌙 DARK MODE OVERRIDES (Toggle)
   --------------------------------- */

/* Navbar Dark */
body.dark .navbar {
  background: #1f1f1f;
  color: #fff;
}

/* Links */
body.dark a {
  color: #fff;
}
body.dark a:hover {
  color: #000;
}

/* Footer */
body.dark .site-footer {
  background: #0d0d0d;
  color: #cccccc;
}

/* Cards / Sections */
body.dark .match-card,
body.dark .post-box,
body.dark .box {
  background-color: #1c1c1c;
  color: #fff;
  border: 1px solid #333;
}



/* ===============================
   🌙 DARK MODE OVERRIDES
   =============================== */

body.dark {
  background: #121212;
  color: #e0e0e0;
}

/* Content wrappers */
body.dark #site-content {
  background: #1e1e1e;
  border: 1px solid #333;
}
body.dark .content-wrapper {
  background: transparent;
}

/* Sidebar */
body.dark .sidebar-left {
  background-color: #222;
  color: #ddd;
}

/* Main Content */
body.dark .main-content {
  background: #1c1c1c;
  color: #e0e0e0;
}

/* Title */
body.dark .post-title {
  color: #fff;
}

/* Meta */
body.dark .post-meta {
  color: #bbb;
  border-bottom: 1px solid #444;
}

/* Breadcrumb */
body.dark .post-breadcrumb {
  color: #fff;
}
body.dark .post-breadcrumb a {
  color: #fff;
}

/* Buttons */
body.dark .prev-btn,
body.dark .next-btn,
body.dark .back-btn {
  background-color: #072ac8;
  color: #fff;
}
body.dark .prev-btn:hover,
body.dark .next-btn:hover,
body.dark .back-btn:hover {
  background-color: var(--primary-color);
}

/* Social share */
body.dark .share-btn {
  color: #ddd;
  border-color: #555;
}
body.dark .share-btn:hover {
  
  /* Colors */
.share-btn.facebook   {border:1px solid #1877F2; }
.share-btn.twitter    {border:1px solid #1da1f2; }
.share-btn.whatsapp   {border:1px solid #25d366; }
.share-btn.telegram   {border:1px solid #0088cc; }
.share-btn.instagram  {border:1px solid #e4405f; }
}


/*---------------- login page/Sign In ----------------------*/
.container-fluid {
  margin-top: 7.3em;
  margin-bottom: -4em;
}

.card0 {
  box-shadow: 0px 4px 8px 0px #757575;
  border-radius: 0px;
}

.card2 {
  margin: 20px 20px;

}

.mm {
  padding: 0px;
  background-color: var(--navbar-color);
  margin-bottom: -1rem;
}

.px-3 {
  width: 110%;
  margin: 0px;
}

.image {
  width: 110%;
  height: auto;
  padding-top: 1.4rem;
  border-radius: 40px;
}

.border-line {
  border-right: 1px solid #EEEEEE;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.row h6 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  margin-top: 2rem;
  gap: 5rem;
}

.social-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.google-login-btn,
.facebook-login-btn,
.twitter-login-btn,
.microsoft-login-btn {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}

.google-login-btn:hover,
.facebook-login-btn:hover,
.twitter-login-btn:hover,
.microsoft-login-btn:hover {
  background-color: var(--navbar-color);
}

svg {
  width: 40px;
  height: 40px;
}

.or {
  width: 30%;
  font-weight: bold;
}

.text-center {
  font-size: 20px !important;
}

::placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder {
  color: #BDBDBD;
  opacity: 1;
  font-weight: 300;
}

input,
textarea {
  padding: 10px 12px;
  border: 1px solid lightgrey;
  border-radius: 2px;
  margin-bottom: 5px;
  margin-top: 2px;
  width: 100%;
  box-sizing: border-box;
  color: #2C3E50;
  font-size: 14px;
  letter-spacing: 1px;
}

input:focus,
textarea:focus,
button:focus {
  box-shadow: none !important;
  border: 1px solid #304FFE;
  outline-width: 0;
}

a {
  color: inherit;
  cursor: pointer;
}


.login-remember label { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  white-space: nowrap; 
} 
.login-remember { 
  text-align: left; 
  margin: 0; 
  padding: 0; 
} 
.login-remember input[type="checkbox"] { 
  margin: 0; 
  vertical-align: middle; 
}

#wp-submit {
  background-color: var(--hamburger-active) !important;
  border: none;
  color: #fff;
  font-size: 16px;
  padding: 10px 20px;
  width: 100%;
  cursor: pointer;
}
/* ------------------ Mobile & Tablet View (max-width: 991px) ------------------ */
@media screen and (max-width: 991px) {
  
  .container-class {
  overflow: hidden;
  border-radius: 40px; /* same as image */
}

  .image {
  width: 100%;       /* full width of container */
  max-width: 600px;  /* optional max width */
  height: 300px;     /* fixed height for object-fit to work */
  margin: 0 auto;    /* center horizontally */
  display: block;    /* better for images */
  padding: 0;
  object-fit: contain; /* scale image to fit container without cropping */
  border-radius: 40px;
}


  .border-line {
    border-right: none;
  }
  
  .card2 {
    margin: 30px 15px;
  }
  .row img{
    margin-left: -8px;
  }
  .row h6 {
    font-size: 28px;
    margin-top: 1.5rem;
    gap: 3rem;
    text-align: center;
  }

  .social-buttons {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .google-login-btn,
  .facebook-login-btn,
  .twitter-login-btn,
  .microsoft-login-btn {
    width: 50px;
    height: 50px;
  }

  svg {
    width: 30px;
    height: 30px;
  }

  .custom-login-container {
    margin: 1rem auto;
    padding: 10px 10px;
    width: 100%;
    max-width: 500px;
    height: auto;
    background-size: cover;
    overflow: hidden;
  }

  .login-box {
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 100%;
    box-shadow: none;
  }

  .login-form {
    padding: 10px;
    background-image: none;
  }

  .login-form input[type="text"],
  .login-form input[type="password"],
  .login-form input[type="submit"] {
    font-size: 14px;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
  }

  .forgot-link {
    margin-top: 1.5rem;
    font-size: 13px;
    text-align: center;
    color: #0056ff !important;
  }

  .forgot-link:hover {
    color: var(--primary-color);
  }

  .signup-text {
    margin-top: 1rem;
    font-size: 13px;
    text-align: center;
  }

  .login-divider {
    padding: 10px 0;
    margin: 1.5rem auto;
    text-align: center;
    font-weight: bold;
    color: #000;
    width: 100%;
  }

  .login-divider::before,
  .login-divider::after {
    content: '';
    display: block;
    height: 1px;
    background-color: #ccc;
    margin: 10px auto;
    width: 70%;
  }
}