/* =========================================
   1. NAVY BLUE BANNER SECTION (TOP)
   ========================================= */
   /* div ko opr lekr gai li ko  */
   .rts-single-wized .wized-body {
    margin-top: 0px;
}
.research-banner-section {
    padding: 80px 0 80px 0 !important;
    margin-bottom: 80px !important;
    width: 100%;
    height: auto;
    display: block;
    
    /* Image fix */
    background-image: url('../images/about/service.jpg'); /* Path check karlein */
    background-size: cover;      /* Puri width/height cover karne ke liye */
    background-position: center;  /* Image center mein rahe */
    background-repeat: no-repeat;
    
    /* Agar image dark karni ho taake text nazar aaye */
    background-color: #0d121d; 
}
.research-title {
    color: #ffffff !important;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
    text-transform: 'camel';

    text-align: center;
}

/* Main category naem Title ka size change */
.category-main-title {
    font-size: 28px !important;
    font-weight: 700;
    color: #333;
    /* text-transform: uppercase; */
    margin-bottom: 10px;
}



.research-breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    
}

.research-breadcrumb a {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: 0.3s;
}

.research-breadcrumb .divider {
    color: #ffffff;
    font-size: 12px;
}

.research-breadcrumb .current-page {
    color: #4dbce9 !important; /* Light blue color */
}

.research-breadcrumb a:hover {
    opacity: 0.8;
}

/* =========================================
   2. SIDEBAR STYLING (LEFT)
   ========================================= */
.custom-sidebar-style .single-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-sidebar-style .single-categories li {
    background-color: #F2F2F2 !important; /* Grey background */
    margin-bottom: 5px;
    position: relative;
    transition: 0.3s;
}

.custom-sidebar-style .single-categories li a {
    display: block;
    padding: 15px 20px;
    color: #333 !important;
    text-decoration: none;
    font-weight: 500;
}

/* Sidebar Active State (Blue) */
/* .custom-sidebar-style .single-categories li.active {
    background-color: #4dbce9 !important;
} */


.custom-sidebar-style .single-categories li.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 6px;
    background-color: #0056b3; 
}
 

/* .custom-sidebar-style .single-categories li.active a {
    color: white !important;
} */
/* Sab options ka default style */
.single-categories li a {
    display: block;
    padding: 12px 20px;
    background-color: #f1f1f1; /* Sab ka default grey background */
    color: #333;
    text-decoration: none;
    transition: 0.3s;
    margin-bottom: 2px;
}

/* Hover effect (Optional: sirf thoda sa dark grey) */
.single-categories li a:hover {
    background-color: #e2e2e2;
     /* background-color: #00AEEF !important; 
    color: #ffffff !important;    */
}


/* ACTIVE Class: Jab click ho to ye apply hoga */
.single-categories li.active a {
    background-color: #00AEEF !important; 
    color: #ffffff !important;             
}
/* =========================================
   3. CONTENT AREA & CARDS (RIGHT & BOTTOM)
   ========================================= */
.rts-service-details-area-main-bottom {
    margin-bottom: 190px !important; /* Footer se pehle ka gap */
}

.content-right-area {
    padding-left: 30px; /* Sidebar se distance */
    padding-top: 10px;
    margin-bottom: 50px; /* Bottom spacing */
}

.blue-link-text {
    color: #008CBA;
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
    display: block;
}

.blue-link-text:hover {
    text-decoration: underline;
}


.black-link-text {
    color: #02080a;
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
    display: block;
}

.black-link-text:hover {
    text-decoration: underline;
}

/* Individual card margin agar zarorat ho */
.trade-report-card {
    margin-bottom: 40px;
}






/* =========================================
   4. MOBILE & TABLET RESPONSIVENESS
   ========================================= */

/* Tablets aur Choti Screens ke liye (Max width 991px) */
@media (max-width: 991px) {
    .research-banner-section {
        padding: 60px 0 !important; /* Banner ki height thodi kam */
        margin-bottom: 40px !important;
    }

    .research-title {
        font-size: 28px; /* Title thoda chota */
    }

    .content-right-area {
        padding-left: 0; /* Mobile par sidebar upar chala jayega, isliye left padding khatam */
        margin-top: 30px;
        margin-bottom: 80px;
    }

    .rts-service-details-area-main-bottom {
        margin-bottom: 100px !important; /* Bottom space mobile par thodi kam */
    }
}

/* Mobile Phones ke liye (Max width 575px) */
@media (max-width: 575px) {
    .research-title {
        font-size: 22px; /* Mazeed chota title */
        letter-spacing: 1px;
    }

    .research-banner-section {
        padding: 50px 15px !important;
    }

    .custom-sidebar-style .single-categories li a {
        padding: 12px 15px; /* Buttons thode compress */
        font-size: 14px;
    }

    /* Cards ko mobile par center karne ke liye */
    .trade-report-card {
        text-align: center;
        margin-bottom: 30px;
    }

    .blue-link-text {
        font-size: 12px;
    }
}



/* Card Title styling */
.blue-link-text span:first-child {
    color: #008CBA !important; /* Blue for Organization/Date */
    font-weight: 600;
}

.blue-link-text span:last-child {
    color: #000000 !important; /* Black for the main Title line */
    margin-top: 4px;
}

/* Container jo image ko hold karta hai */
/* .image-box {
    width: 100%;
    
    aspect-ratio: 3 / 4; 
    overflow: hidden;
    background-color: #f8f9fa; 
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
} */

/* Sirf 575px se niche wali screens ke liye */
@media (max-width: 575px) {
    
    /* 1. Card ka upar uthna (Lift effect) aur shadow khatam */
    .trade-report-card, 
    .trade-report-card:hover {
        transform: none !important;
        box-shadow: none !important;
        transition: none !important;
    }

    /* 2. Image ka zoom-in effect khatam */
    .trade-report-card:hover .image-box img {
        transform: none !important;
        transition: none !important;
    }

    
}
/* Image ko pura frame cover karwana */
.image-box img {
    width: 100% !important;
    height: 100% !important;
    
    /* YEH DO LINES MAIN HAIN: Isse gaps khatam ho jayenge */
    object-fit: cover !important; 
    object-position: top center; /* Report ka ooper wala hissa pehle dikhayega */
    
    transition: transform 0.3s ease; /* Hover effect ke liye */
}

/* Jab mouse image par jaye to thora zoom ho (Premium Look) */
.trade-report-card:hover .image-box img {
    transform: scale(1.05);
}

/* Card ki overall styling */
.trade-report-card {
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    transition: box-shadow 0.3s ease;
}









/* chnages */
/* Container for text */
.trade-report-card .text-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 1. Name (Blue Style) */
.report-name-blue {
    color: #00aaff !important; /* Sky Blue color */
    font-size: 13px;
    text-decoration: none;
    display: block;
}

/* 2. Title (Black Style) */
.report-title-black {
    
    font-size: 12px;
  
    text-decoration: none;
    display: block;
    line-height: 1.3;
}
.report-name-blue:hover{
     text-decoration: underline !important;
}

.report-title-black:hover {
    text-decoration: underline !important;
    
}

/* 1. Hover state: Background black aur text white */
.single-categories li a:hover {
    background-color: #000000 !important; /* Background black */
    color: #ffffff !important;           /* Text white */
}

/* 2. Hover state: Arrow (i tag) ka color white */
.single-categories li a:hover i {
    color: #ffffff !important;           /* Arrow white */
}