/* =============================
   Reset & Base Styles
============================= */

/* Apply universal reset and font */
* {
    margin: 0;                               /* remove default margin */
    padding: 0;                              /* remove default padding */
    box-sizing: border-box;                  /* include padding/border in size */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* global font */
}

/* Base body styling */
body {
    background-color: #f0f2f5;               /* light grey background */
    color: #111;                             /* default text color */
    line-height: 1.6;                        /* line spacing for readability */
    min-height: 100vh;                       /* full viewport height */
}

/* =============================
   Header & Navbar
============================= */

/* Header container styling */
header {
    background: linear-gradient(135deg, #1e3c72, #2a5298, #00c6ff); /* gradient background */
    padding: 10px 20px;                     /* spacing inside header */
    position: sticky;                        /* stick to top on scroll */
    top: 0;                                  /* align at top */
    z-index: 999;                            /* ensure header is above content */
}

/* Navigation container layout */
.nav-container {
    display: flex;                           /* flex layout for children */
    justify-content: space-between;          /* space between logo and icons */
    align-items: center;                     /* vertical alignment */
}

/* =============================
   Logo Styling
============================= */

/* Logo image */
.main-nav .logo img {
    display: block;                           /* remove inline spacing */
    transition: transform 0.3s ease;          /* smooth hover effect */
}

/* Logo hover effect */
.main-nav .logo img:hover {
    transform: scale(1.35);                  /* subtle zoom on hover */
}



/* Hide text fallback logo if any */
.main-nav .logo span {
    display: none;                             /* hide span-based logo */
}

/* =============================
   Social Icons Styling
============================= */

/* Social icons container */
.nav-social {
    display: flex;                             /* horizontal layout */
    gap: 10px;                                 /* spacing between icons */
    position: absolute;                        /* position relative to header */
    top: 10px;                                 /* distance from top of header */
    right: 20px;                               /* distance from right of header */
}

/* =============================
   Hide text fallback if needed
============================= */

/* Hide any span-based logo text (if present) */
.main-nav .logo span {
    display: none;               /* prevents fallback text from showing */
}

/* =============================
   Social Icons in Navbar
============================= */

/* Container for social media icons */
.nav-social {
    display: flex;               /* align icons horizontally */
    align-items: center;         /* vertically center icons */
    gap: 10px;                   /* spacing between each icon */
}

/* Individual social links */
.nav-social a {
    color: #FFA500;              /* orange color for social icons */
    font-size: 18px;             /* size of social icon text */
    text-decoration: none;       /* remove underline */
}

/* Social icon hover effect */
.nav-social a:hover {
    color: #33FFF5;              /* bright aqua on hover */
}

/* =============================
   Hamburger Menu
============================= */

/* Hamburger menu icon styling */
.menu-toggle {
    display: none;               /* hide by default, only show on mobile */
    font-size: 28px;             /* icon size */
    cursor: pointer;             /* pointer cursor on hover */
    color: #FFA500;              /* orange color for icon */
}

/* =============================
   Sidebar / Mobile Menu
============================= */

/* Sidebar container */
.sidebar {
    position: fixed;                                     /* fixed to viewport */
    top: 0;                                              /* align to top */
    left: -100%;                                        /* hidden offscreen by default */
    width: 50%;                                         /* sidebar width */
    height: 100%;                                       /* full height */
    background: linear-gradient(135deg, #879eca, #064050, #00c6ff); /* gradient background */
    z-index: 1000;                                      /* above everything else */
    overflow-y: auto;                                   /* scroll if content exceeds height */
    transition: left 0.3s ease;                         /* smooth slide-in effect */
    padding: 20px;                                      /* inner spacing */
}

/* Active sidebar state */
.sidebar.active { 
    left: 0;                                            /* slide sidebar into view */
}

/* Sidebar close button */
.close-btn {
    font-size: 28px;                                    /* size of close icon */
    color: red;                                         /* red color for visibility */
    cursor: pointer;                                    /* pointer cursor on hover */
    text-align: right;                                  /* align to the right */
    margin-bottom: 20px;                                /* space below close button */
}

/* Sidebar links container */
.sidebar ul {
    list-style: none;                                   /* remove bullets */
    padding-left: 0;                                    /* remove default padding */
}

/* Individual sidebar links */
.sidebar ul li a {
    display: block;                                     /* make entire line clickable */
    padding: 12px 0;                                    /* vertical padding for spacing */
    text-decoration: none;                              /* remove underline */
    color: #000;                                        /* black text color */
}

/* Sidebar link hover effect */
.sidebar ul li a:hover { 
    color: #33FFF5;                                     /* bright aqua on hover */
}

/* Sidebar social icons container */
.sidebar .sidebar-social {
    display: flex;                                      /* horizontal layout */
    gap: 10px;                                          /* spacing between icons */
    margin-top: 20px;                                   /* spacing from links above */
}

/* Sidebar social icons links */
.sidebar .sidebar-social a {
    color: #FFA500;                                     /* orange color */
    font-size: 20px;                                    /* slightly larger size */
    flex-wrap: nowrap;      /* Don’t wrap on large screens */
    justify-content: flex-start; /* Align to left on large screens */
}

/* Sidebar social hover effect */
.sidebar .sidebar-social a:hover { 
    color: #33FFF5;                                     /* bright aqua on hover */
}


/* =============================
   Header & Navbar
============================= */

/* Header container */
header {
    position: relative;                                   /* relative for absolute children */
}

/* Main navigation bar */
.main-nav {
    display: flex;                                        /* horizontal flex layout */
    align-items: center;                                  /* vertical center */
    justify-content: space-between;                       /* logo left, links right */
    padding: 10px 20px;                                   /* spacing inside navbar */
    background-color: #ece7e7;                               /* white background */
    position: relative;   
   background-color:  #6992c0;  
   border-radius: 10px;                            /* relative for absolute children */
}

/* Logo image */
.logo img {
    height: 80px;                                        /* set logo height */
    width: auto;                                         /* maintain aspect ratio */
    border-radius: 10px;
}

/* Navigation links container */
.nav-links {
    display: flex;                                       /* horizontal layout */
    list-style: none;                                    /* remove bullets */
    gap: 10px;                                           /* spacing between links */
    margin: 0;                                           /* remove default margin */
    padding: 0;                                          /* remove default padding */
}

/* Individual navigation list item */
.nav-links li {
    position: relative;                                  /* for submenu positioning */
}

/* Navigation links */
.nav-links a {
    text-decoration: none;                               /* remove underline */
    color: #333;                                        /* dark text */
    padding: 5px 10px;                                   /* spacing around link */
}

/* Submenu container */
.has-submenu .submenu {
    display: none;                                       /* hide by default */
    position: absolute;                                  /* absolute relative to parent */
    top: 100%;                                           /* place below parent */
    left: 0;                                             /* align left */
    list-style: none;                                    /* remove bullets */
    background: #fff;                                    /* white background */
    padding: 10px;                                       /* inner spacing */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);              /* subtle shadow */
}

/* Show submenu on hover */
.has-submenu:hover .submenu {
    display: block;                                      /* reveal submenu */
}

/* Social icons in navbar */
.nav-social {
    display: flex;                                       /* horizontal layout */
    gap: 10px;                                           /* spacing between icons */
    position: absolute;                                  /* position relative to header */
    top: 10px;                                           /* distance from top */
    right: 20px;                                         /* distance from right */
}

/* =============================
   Carousel / Slider
============================= */

/* Main carousel container */
.carousel {
    width: 100%;                    /* full width of viewport */
    overflow: hidden;               /* hide slides outside viewport */
    background: linear-gradient(135deg, #FF4500, #cf663f,#f3a294); /* hot gradient */
    margin-bottom: 20px;            /* spacing below carousel */
    height: 75.59px;                /* fixed height */
    display: flex;                  /* flex for centering slides */
    align-items: center;            /* vertical center */
    justify-content: center;        /* horizontal center */
}

/* Slides container (the moving part) */
.carousel .slides {
    display: flex;                                  /* horizontal flex layout */
    width: calc(100% * 30);                         /* total width for 30 slides */
    animation: slideMove 30s linear infinite;       /* automatic sliding animation */
}

/* Individual slide */
.carousel .slide {
    width: calc(100% / 15);                         /* each slide = 1/15th of visible width */
    flex-shrink: 0;                                 /* prevent shrinking */
    display: flex;                                  /* center text inside */
    align-items: center;                            /* vertical center */
    justify-content: center;                        /* horizontal center */
    font-weight: bold;                              /* bold text */
    color: #333;                                    /* dark grey text color */
    text-align: center;                             /* center text */
    height: 75px;                                   /* slide height */
    white-space: nowrap;                            /* prevent line breaks */
}

/* Keyframes for automatic sliding animation */
@keyframes slideMove {
    0%      { transform: translateX(0%); }        /* start at first slide */
    3.333%  { transform: translateX(-3.333%); }   /* move 1 slide */
    6.666%  { transform: translateX(-6.666%); }
    10%     { transform: translateX(-10%); }
    13.333% { transform: translateX(-13.333%); }
    16.666% { transform: translateX(-16.666%); }
    20%     { transform: translateX(-20%); }
    23.333% { transform: translateX(-23.333%); }
    26.666% { transform: translateX(-26.666%); }
    30%     { transform: translateX(-30%); }
    33.333% { transform: translateX(-33.333%); }
    36.666% { transform: translateX(-36.666%); }
    40%     { transform: translateX(-40%); }
    43.333% { transform: translateX(-43.333%); }
    46.666% { transform: translateX(-46.666%); }
    50%     { transform: translateX(-50%); }      /* loop back after 15 slides */
}

/* =============================
   Explanation:
   - Each 6.666% corresponds to moving 1 of 15 slides
   - .carousel → visible area container
   - .slides → moving container
   - .slide → individual slide items
   - @keyframes slideMove → automatic sliding animation
============================= */

/* =============================
   Google Translate Centered
============================= */

/* Container for Google Translate element */
#google_translate_element {
    width: 100%;                 /* full width */
    display: flex;               /* flex to center items */
    justify-content: center;     /* horizontal center */
    align-items: center;         /* vertical center */
    margin: 10px 0;              /* spacing above and below */
}

/* Ensure select dropdown fits container */
#google_translate_element select { 
    max-width: 100%;             /* prevent overflow */
}

/* =============================
   Desktop Navigation Menu
============================= */

/* Main navigation container */
.main-nav ul {
    display: flex;               /* horizontal menu layout */
    flex-wrap: wrap;             /* wrap menu items on smaller screens */
    gap: 5px;                    /* spacing between menu items */
    list-style: none;            /* remove bullets */
    font-size: 14px;             /* menu text size */
    margin: 0;                   /* reset default margin */
    padding: 3px;                /* small padding */
}

/* Each menu item */
.main-nav ul li {
    position: relative;          /* required for submenu positioning */
}

/* Main menu links */
.main-nav ul li a {
    text-decoration: none;       /* remove underline */
    color: #ded7d7;              /* light grey text color */
    font-weight: bold;           /* bold font */
    padding: 5px 7px;            /* spacing inside link */
    display: block;              /* full clickable area */
    transition: color 0.3s ease, background 0.3s ease; /* smooth hover transition */
}

/* Hover effect for main menu links */
.main-nav ul li:hover > a {
    color: #FFA500;              /* orange on hover */
}

/* Submenu container */
.main-nav ul li .submenu {
    display: none;               /* hidden by default */
    position: absolute;          /* absolute positioning below parent */
    top: 100%;                   /* directly below parent menu */
    left: 0;                     /* align left */
    background: #959292;         /* dark grey background */
    padding: 2px 0;              /* vertical padding */
    border-radius: 5px;          /* rounded corners */
    min-width: 180px;            /* minimum width */
    z-index: 999;                /* above other elements */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* subtle shadow */
}

/* Submenu items */
.main-nav ul li .submenu li {
    padding: 0;                  /* reset padding */
}

/* Submenu links */
.main-nav ul li .submenu li a {
    padding: 10px 15px;          /* spacing inside submenu link */
    color: #fff;                 /* white text */
    display: block;              /* full clickable area */
    white-space: nowrap;         /* prevent wrapping */
    transition: background 0.3s ease, color 0.3s ease; /* smooth hover effect */
}

/* Submenu hover effect */
.main-nav ul li .submenu li a:hover {
    background: #FFA500;         /* orange background on hover */
    color: #000;                 /* black text on hover */
}

/* Show submenu on hover */
.main-nav ul li:hover .submenu {
    display: block;              /* make submenu visible */
}

/* Optional arrow for submenu items */
.main-nav ul li.has-submenu > a::after {
    content: " ▼";               /* downward arrow */
    font-size: 0.7em;            /* smaller arrow */
}





/* =============================
   Latest Technology Animated Text
============================= */

/* Wrapper container for latest tech heading */
.latest-tech-wrap {
    background: linear-gradient(135deg, rgb(180, 211, 234), rgb(9, 54, 105)); /* gradient background */
    padding: 15px 0;                  /* vertical padding */
    text-align: center;               /* center content horizontally */
    border-radius: 5px;               /* rounded corners */
    box-shadow: 10px 18px 20px rgba(0, 0, 0, 0.6); /* dark shadow with opacity */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth hover/interaction transitions */
}

/* Text inside wrapper */
.latest-tech {
    font-size: 2em;                    /* large font size */
    font-weight: bold;                  /* bold text */
    letter-spacing: 2px;                /* spacing between letters */
}

/* Individual letters for gradient animation */
.latest-tech span {
    display: inline-block;             /* required for animation */
    background: linear-gradient(90deg, dodgerblue, yellow, black, dodgerblue); /* moving gradient */
    -webkit-background-clip: text;     /* clip gradient to text */
    -webkit-text-fill-color: transparent; /* make text transparent to show gradient */
    background-size: 300% 100%;        /* large gradient for animation effect */
    animation: gradientShift 3s linear infinite; /* continuous animation */
}

/* Staggered animation delay for each letter */
.latest-tech span:nth-child(1)  { animation-delay: 0s; }
.latest-tech span:nth-child(2)  { animation-delay: 0.1s; }
.latest-tech span:nth-child(3)  { animation-delay: 0.2s; }
.latest-tech span:nth-child(4)  { animation-delay: 0.3s; }
.latest-tech span:nth-child(5)  { animation-delay: 0.4s; }
.latest-tech span:nth-child(6)  { animation-delay: 0.5s; }
.latest-tech span:nth-child(7)  { animation-delay: 0.6s; }
.latest-tech span:nth-child(8)  { animation-delay: 0.7s; }
.latest-tech span:nth-child(9)  { animation-delay: 0.8s; }
.latest-tech span:nth-child(10) { animation-delay: 0.9s; }
.latest-tech span:nth-child(11) { animation-delay: 1s; }
.latest-tech span:nth-child(12) { animation-delay: 1.1s; }
.latest-tech span:nth-child(13) { animation-delay: 1.2s; }
.latest-tech span:nth-child(14) { animation-delay: 1.3s; }
.latest-tech span:nth-child(15) { animation-delay: 1.4s; }
.latest-tech span:nth-child(16) { animation-delay: 1.5s; }
.latest-tech span:nth-child(17) { animation-delay: 1.6s; }
.latest-tech span:nth-child(18) { animation-delay: 1.7s; }

/* Keyframes for smooth gradient movement across letters */
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }      /* start position */
    50%  { background-position: 100% 50%; }    /* middle position */
    100% { background-position: 0% 50%; }      /* loop back */
}

/* =============================
   Hot Moving Text Animation
============================= */

/* Moving text container */
.moving-text {
    font-weight: bold;                             /* bold text */
    font-size: 1.3em;                              /* slightly larger than normal */
    letter-spacing: 1px;                           /* small letter spacing */
    display: block;                                /* block element to center */
    margin: 0 auto;                                /* center block horizontally */
    text-align: center;                            /* center text */
    animation: hotMove 10s linear infinite;        /* continuous gradient animation */
    background: linear-gradient(90deg, #FF5733, #33FF57, #3357FF, #FF33A8, #33FFF5, #FF8C33); /* gradient colors */
    -webkit-background-clip: text;                 /* clip gradient to text */
    -webkit-text-fill-color: transparent;          /* make text show gradient */
    background-size: 400% 100%;                    /* larger gradient for smooth movement */
}

/* Keyframes for gradient movement in hot text */
@keyframes hotMove {
    0%   { background-position: 0% 50%; }         /* start position */
    50%  { background-position: 100% 50%; }       /* middle */
    100% { background-position: 0% 50%; }         /* loop back */
}

/* =============================
   Cards Grid
============================= */

/* Container for cards */
.cards-grid {
    display: flex;                     /* flex layout */
    flex-wrap: wrap;                   /* wrap cards to next line if needed */
    justify-content: center;           /* center horizontally */
    gap: 12px;                         /* spacing between cards */
    margin: 20px auto;                 /* vertical spacing and center */
}

/* Individual card styling */
.cards-grid .card {
    background: linear-gradient(135deg, #FF4500, #FF6347); /* hot gradient background */
    color: #fff;                        /* white text */
    padding: 8px 15px;                  /* inner spacing */
    border-radius: 20px;                /* pill-shaped corners */
    font-weight: bold;                   /* bold text */
    font-size: 0.9em;                    /* smaller text size */
    text-align: center;                  /* center text */
    min-width: auto;                     /* shrink to content */
    max-width: 150px;                    /* limit width */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* hover transition */
    cursor: pointer;                     /* pointer on hover */
}

/* Card hover effect */
.cards-grid .card:hover {
    transform: scale(1.1);               /* grow slightly */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* subtle shadow */
}

/* Links inside cards */
.card a {
    text-decoration: none;               /* remove underline */
    color: #333;                         /* dark link color */
    font-weight: bold;                    /* bold text */
}

/* Slight lift on hover for all cards */
.card:hover { 
    transform: translateY(-5px);         /* lift up slightly */
}

/* Ensure consistent line height inside cards */
.card * { 
    line-height: 1.2;                     /* tighter line height */
}





/* =============================
   Featured Cards Section
============================= */

/* Container for featured cards */
.featured-cards {
    padding: 20px;                     /* inner spacing */
    background: #f8f8f8;               /* light grey background */
}

/* Section heading */
.featured-cards h2 {
    text-align: center;                /* center heading */
    font-size: 2em;                    /* large heading */
    color: #FFA500;                    /* orange text */
    margin-bottom: 15px;               /* spacing below heading */
}

/* Grid container for cards */
.featured-cards .cards-grid {
    display: flex;                     /* flex layout */
    flex-wrap: wrap;                   /* wrap cards */
    justify-content: center;           /* center cards horizontally */
    gap: 15px;                         /* space between cards */
}

/* =============================
   Feature Section (3 features)
============================= */

/* Featured cards section adjustments */
.featured-cards {
    padding: 30px 15px;                /* larger padding */
    background-color: #fdfdfd;         /* light background */
}

/* Section heading adjustments */
.featured-cards h2 {
    text-align: center;                /* center heading */
    font-size: 2em;                    /* large font */
    color: #FFA500;                    /* orange text */
    margin-bottom: 25px;               /* spacing below heading */
}

/* Cards grid layout adjustments */
.featured-cards .cards-grid {
    display: flex;                     /* flex layout */
    flex-wrap: wrap;                   /* wrap cards to next line */
    justify-content: center;           /* center horizontally */
    gap: 20px;                         /* spacing between cards */
}

/* Individual card styling */
.featured-cards .card {
    background: #ffffff;               /* white background */
   /*   flex: 1 1 250px;                  flexible width with base 250px */
    max-width: 320px;                  /* maximum width */
    min-width: 250px;                  /* minimum width */
    padding: 20px;                     /* inner spacing */
    border-radius: 8px;                /* slightly rounded corners */
    box-shadow: 0 2px 8px rgba(0,0,0,2.15); /* subtle shadow */
    text-align: center;                /* center content */
    transition: transform 0.3s ease;   /* smooth hover effect */
}

/* Card links */
.featured-cards .card a {
    text-decoration: none;             /* remove underline */
    color: #0077cc;                    /* link color */
    font-weight: bold;                 /* bold text */
}

/* Card hover effect */
.featured-cards .card:hover {
    transform: translateY(-5px);       /* lift card on hover */
}



/* =============================
   Feature Section (3 features)
============================= */

/* Container for feature cards */
.feature-section {
    display: flex;                      /* horizontal flex layout */
    flex-wrap: wrap;                    /* allow wrapping on smaller screens */
    justify-content: center;            /* center cards horizontally */
    gap: 25px;                          /* spacing between cards */
    padding: 30px 15px;                 /* vertical and horizontal padding */
    background-color: #f8f9fa;          /* slightly different light background */
}

/* Individual feature card */
.feature-card {
    background: #ffffff;                /* white background */
    flex: 1 1 280px;                    /* flexible width, base 280px */
    max-width: 320px;                   /* maximum width */
    padding: 20px;                      /* inner spacing */
    border-radius: 8px;                 /* rounded corners */
    box-shadow: 0 2px 8px rgba(0,0,0,2.15); /* subtle shadow */
    text-align: center;                 /* center content */
    transition: transform 0.3s ease;    /* smooth hover effect */
}

/* Feature card title */
.feature-card h3 {
    margin-bottom: 10px;                /* spacing below heading */
    color: #FFA500;                     /* orange color */
}

/* Feature card description */
.feature-card p {
    font-size: 0.95em;                  /* slightly smaller text */
    margin-bottom: 15px;                /* spacing below paragraph */
}

/* Feature card button link */
.feature-card .btn-link {
    text-decoration: none;              /* remove underline */
    font-weight: bold;                  /* bold text */
    color: #0077cc;                     /* blue link color */
}

/* Hover effect for button link */
.feature-card .btn-link:hover {
    text-decoration: underline;         /* underline on hover */
}



/* Description clamp */
    .featured-cards .card p {
        font-size: 12px;
        line-height: 1.3;
        color: #555;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }


   

/* =============================
   Latest Articles Section
============================= */

/* Container for articles */
.articles-section {
    background-color: #f9f9f9;          /* light background */
    padding: 30px 15px;                 /* spacing inside section */
}

/* Section heading */
.articles-section h2 {
    text-align: center;                 /* center heading */
    color: #FFA500;                     /* orange heading */
    margin-bottom: 20px;                /* spacing below heading */
}

/* Grid container for article cards */
.articles-grid {
    display: flex;                      /* flex layout */
    flex-wrap: wrap;                    /* allow wrapping */
    justify-content: center;            /* center cards horizontally */
    gap: 25px;                          /* spacing between cards */
    margin: 0 auto;                     /* center container */
}

/* Individual article card */
.article-card {
    background: #fff;                   /* white background */
    flex: 1 1 300px;                    /* flexible width, base 300px */
    max-width: 320px;                   /* maximum width */
    min-width: 250px;                   /* minimum width */
    padding: 20px;                      /* inner spacing */
    border-radius: 8px;                 /* rounded corners */
    box-shadow: 0 2px 8px rgba(0,0,0,2.15); /* subtle shadow */
    text-align: left;                   /* left-align text */
}

/* "Read All Articles" link below grid */
.articles-section .read-all {
    display: inline-block;              /* inline-block for spacing */
    margin-top: 15px;                   /* spacing above link */
    text-align: center;                 /* center horizontally */
    font-weight: bold;                  /* bold text */
    color: #0077cc;                     /* blue color */
    text-decoration: none;              /* remove underline */
}

/* Hover effect for "Read All Articles" */
.articles-section .read-all:hover { 
    text-decoration: underline;         /* underline on hover */
}

/* =============================
   What Learners Say Section (Testimonials)
============================= */

/* Testimonials container */
.testimonials-section {
    background-color: #f1f1f1;          /* light background */
    padding: 30px 15px;                 /* spacing inside section */
}

/* Section heading */
.testimonials-section h2 {
    text-align: center;                 /* center heading */
    color: #FFA500;                     /* orange heading */
    margin-bottom: 20px;                /* spacing below heading */
}

/* Grid container for testimonial cards */
.testimonials-grid {
    display: flex;                      /* horizontal flex layout */
    flex-wrap: wrap;                    /* wrap cards on smaller screens */
    justify-content: center;            /* center horizontally */
    gap: 25px;                          /* spacing between cards */
    margin: 0 auto;                     /* center container */
}

/* Individual testimonial card */
.testimonial-card {
    background: #fff;                   /* white background */
    flex: 1 1 300px;                    /* flexible width, base 300px */
    max-width: 320px;                   /* max width */
    min-width: 250px;                   /* min width */
    padding: 20px;                      /* inner spacing */
    border-radius: 8px;                 /* rounded corners */
    box-shadow: 0 2px 8px rgba(0,0,0,2.15); /* subtle shadow */
    text-align: center;                 /* center content */
}

/* Star ratings */
.stars { 
    color: #ffa500;                     /* orange stars */
    font-size: 1.2em;                   /* slightly larger */
    margin-bottom: 10px;                /* spacing below stars */
}

/* Author name */
.author { 
    display: block;                      /* block for spacing */
    margin-top: 10px;                    /* spacing above name */
    font-weight: bold;                   /* bold text */
}

/* "Read All Reviews" link below grid */
.testimonials-section .read-all {
    display: inline-block;              /* inline-block */
    margin-top: 15px;                   /* spacing above link */
    font-weight: bold;                  /* bold text */
    color: #0077cc;                     /* blue color */
    text-decoration: none;              /* remove underline */
}

/* Hover effect for "Read All Reviews" */
.testimonials-section .read-all:hover { 
    text-decoration: underline;         /* underline on hover */
}



/* =============================
   About Easy Tutor Guide Section
============================= */



/* About section heading */
.about-content h3 {
    font-size: 2em;                                      /* large heading */
    margin-bottom: 15px;                                 /* spacing below heading */
    font-weight: bold;                                   /* bold font */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);           /* subtle shadow for contrast */
}

/* About section paragraph */
.about-content p {
    font-size: 1.1em;                                    /* slightly larger text */
    margin-bottom: 20px;                                 /* spacing below paragraph */
    line-height: 1.6;                                    /* comfortable line spacing */
}

/* About section button link */
.about-content .btn-link {
    display: inline-block;                               /* inline block for padding */
    padding: 10px 20px;                                  /* inner padding */
    background-color: #fff;                               /* white button background */
    color: #FF4500;                                      /* orange text */
    font-weight: bold;                                    /* bold text */
    border-radius: 8px;                                   /* rounded button */
    text-decoration: none;                                /* remove underline */
    transition: all 0.3s ease;                            /* smooth hover transition */
}

/* Hover effect for About button */
.about-content .btn-link:hover {
    background-color: #ffd1c1;                            /* slightly different background on hover */
    color: #FF4500;                                       /* maintain orange text */
}




/* =============================
   Footer Section
============================= */

/* Footer container */
footer {
    background: linear-gradient(135deg, #1e3c72, #2a5298, #00c6ff); /* gradient background */
    padding: 20px;                    /* spacing inside footer */
    text-align: center;               /* center all text */
    color: #fff;                      /* white text color */
}

/* Footer menu links container */
.footer-menu {
    display: flex;                    /* horizontal layout */
    flex-wrap: wrap;                  /* wrap on small screens */
    justify-content: center;          /* center links horizontally */
    gap: 15px;                        /* space between links */
    margin-bottom: 10px;              /* spacing below menu */
}

/* Footer menu links */
.footer-menu a {
    color: #FFA500;                   /* orange link color */
    text-decoration: none;            /* remove underline */
}

/* Hover effect for footer menu links */
.footer-menu a:hover { 
    color: #33FFF5;                   /* cyan hover color */
}

/* Footer social icons container */
.footer-social {
    display: flex;                    /* horizontal layout */
    justify-content: center;          /* center icons */
    gap: 10px;                        /* space between icons */
    margin-bottom: 10px;              /* spacing below icons */
}

/* Footer social links */
.footer-social a {
    color: #fff;                      /* white color */
    font-size: 18px;                  /* icon size */
}

/* Hover effect for footer social links */
.footer-social a:hover { 
    color: #FFA500;                   /* orange on hover */
}

/* =============================
   Go To Top Button
============================= */

/* Button hidden by default */
#goTopBtn {
    display: none;                    /* hidden until scrolled */
    position: fixed;                  /* fixed to viewport */
    bottom: 25px;                     /* distance from bottom */
    right: 25px;                      /* distance from right */
    background: #FFA500;              /* orange background */
    color: #fff;                       /* white text */
    border: none;                      /* remove border */
    padding: 10px 12px;                /* inner padding */
    border-radius: 50%;                /* circular button */
    cursor: pointer;                   /* pointer on hover */
    z-index: 999;                      /* above all content */
}

/* Hover effect for Go To Top button */
#goTopBtn:hover { 
    background: #33FFF5;              /* cyan background on hover */
}









/* =============================
   Responsive: Small Devices
============================= */
@media (max-width: 768px) {

    /* Hide only the menu links on mobile */
    .nav-links {
        display: none !important;                        /* hides text menu items */
    }

    /* Keep logo visible */
    .main-nav .logo {
        display: block;                                  /* show logo */
    }


    

    /* Keep social icons visible */
    .nav-social {
        display: flex;                                   /* show social icons */
        position: absolute;                              /* position relative to header */
        top: 10px;                                       /* align vertically */
        right: 20px;                                     /* align horizontally */
    }

    /* Show hamburger menu icon */
    .menu-toggle {
        display: block;                                  /* display menu toggle */
    }

    /* Remove extra padding/margin from navbar */
    .main-nav {
        padding: 0 10px;                                 /* reduced padding */
        height: auto;                                    /* let height fit content */
    }


    /* Grid of featured tutorial cards */
    .featured-cards .cards-grid {
        flex-direction: column;      /* stack cards vertically */
        align-items: center;         /* center cards horizontally */
        gap: 10px;                   /* smaller gap on mobile */
    }

    /* Individual featured card adjustments */
  
      
    .featured-cards .card {
        width: 92% !important;
        height: 110px !important;     /* 🔒 fixed height */
        padding: 12px !important;
        overflow: hidden;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }

    .featured-cards .card a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        width: 100%;
    }

    /* Title font + style */
    .featured-cards .card h4 {
        font-family: "Poppins", Arial, sans-serif;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Description clamp */
    .featured-cards .card p {
        font-size: 12px;
        line-height: 1.3;
        color: #555;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Cards grid adjustments */
    .cards-grid { 
        flex-direction: row;               /* horizontal row layout */
        align-items: center;                /* vertical alignment */
        gap: 3px;                           /* smaller spacing */
    }

    /* Hide social icons on small screens */
    .nav-social { 
        display: none;                      /* hide navbar social icons */
    }


}

/* Container for About section */
.about-section {
    max-width: 90%;
    padding: 50px 20px;                                   /* vertical & horizontal padding */
    text-align: center;                                   /* center all text */
    color: #fff;                                         /* white text */
    border-radius: 12px;                                 /* rounded corners */
    margin: 30px auto;                                   /* center block with margin */
}

/* Container for About section */
.about-page {
    max-width: 90%;
    padding: 50px 20px;                                   /* vertical & horizontal padding */
    text-align: center;                                   /* center all text */
    color: #fff;                                         /* white text */
    border-radius: 12px;                                 /* rounded corners */
    margin: 30px auto;                                   /* center block with margin */
}
/* =============================
   Responsive Adjustments
============================= */
@media (max-width: 992px) {

    /* Stack article and testimonial cards vertically on tablets/small screens */
    .articles-grid,
    .testimonials-grid {
        flex-direction: column;          /* vertical stack */
        align-items: center;             /* center horizontally */
    }

    /* Make individual cards full width on small screens */
    .article-card,
    .testimonial-card {
        width: 90%;                       /* almost full width */
        max-width: none;                  /* remove max width limit */
    }


    /* Hide all menu <ul> inside main-nav */
    .main-nav ul {
        display: none !important;       /* hide desktop menu entirely */
        margin: 0;                      /* reset margin */
        padding: 0;                     /* reset padding */
        list-style: none;               /* remove bullets */
    }

    /* Keep logo visible on small screens */
    .main-nav .logo {
        display: block;                 /* ensure logo shows */
    }


   
    
    /* Keep social icons visible on small screens */
    .nav-social {
        display: flex;                  /* horizontal layout */
        position: absolute;             /* position relative to header */
        top: 10px;                      /* distance from top of header */
        right: 20px;                    /* distance from right edge */
    }

    /* Show hamburger menu icon */
    .menu-toggle {
        display: block;                 /* show hamburger */
    }

    /* Remove extra padding/margin from nav to prevent white bar */
    .main-nav {
        padding: 0 10px;                /* small horizontal padding */
        height: auto;                   /* height adjusts to content */
    }


    /* Header layout adjustments */
    header {
        display: flex;                 /* horizontal layout */
        align-items: center;           /* vertically center content */
        justify-content: space-between;/* space between logo and icons */
        padding: 10px 15px;            /* inner padding */
        background: linear-gradient(135deg, #000912, #0f5aa4, #adcbe8); /* dark blue gradient */
    }


    /* Remove desktop nav completely to remove white bar */
    .main-nav {
        display: none !important;      /* hide entire desktop navigation */
    }

    /* Fix icon alignment */
    .menu-toggle i,
    .nav-social i {
        position: relative;             /* relative to parent */
        top: -1px;                      /* slight vertical adjustment */
    }

    /* Ensure no absolute positioning interferes */
    .nav-social,
    .menu-toggle {
        position: relative;             /* reset from absolute */
        top: auto;                       /* default vertical */
        right: auto;                     /* default horizontal */
    }

     /* Wrapper for social + hamburger icons */
    .nav-social {
        display: flex;                  /* horizontal layout */
        align-items: center;            /* vertical alignment */
        gap: 10px;                      /* spacing between social icons */
        margin-right: 35px;             /* push from right edge */
        position: relative;             /* reset from absolute */
    }

    
    /* Hamburger menu adjustments */
    .menu-toggle {
        display: block;                 /* show hamburger */
        margin-left: 10px;              /* small gap from social icons */
        position: relative;             /* reset from absolute */
        top: auto;
        right: auto;
    }

    


    /* Hide main menu links but keep logo & social icons */
    .main-nav > ul {
        display: none !important;                       /* force hide desktop menu */
    }


    /* Keep logo visible */
    .main-nav .logo {
        display: block;
    }

    /* Keep social icons visible on small screens */
    .nav-social {
        display: flex;                                  /* show social icons */
    }

    /* Show hamburger menu icon */
    .menu-toggle {
        display: block;                                 /* display hamburger on mobile */
    }
}


/* =============================
   Responsive:  Devices
============================= */
/* Desktop-only logo positioning */
@media (min-width: 993px) {
    .main-nav .logo {
        display: block;                       /* ensure logo is shown */
        text-align: center;                   /* center horizontally */
        margin-bottom: 5px;                   /* spacing below logo */
    }
}


/********************************/
.about-section {
    padding: 60px 20px;
    background: linear-gradient(135deg, #e0f7fa, #fff);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #111;
    background: linear-gradient(135deg, #FF4500, #f3a294); /* hot gradient */

}

.about-container {
    max-width: 1000px;
    margin: 0 auto;
}

.about-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: left;
    color: #0d47a1; /* dark blue modern tone */
    border-left: 6px solid #1976d2; /* subtle accent line */
    padding-left: 15px;
}

.about-intro {
    font-size: 1.2rem;
    margin-bottom: 40px;
    line-height: 1.8;
    color: #333;
}

.about-heading {
    font-size: 2rem;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 15px;
    text-align: left;
    color: #1565c0;
}

.about-text {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 25px;
    color: #444;
}

/* BLOG PAGE */
.blog-page {
    padding: 60px 20px;
    background: linear-gradient(135deg, #f0f2f5, #fff);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #111;
}

.blog-page .container {
    max-width: 900px;
    margin: 0 auto;
}

.blog-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: left;
    color: #0d47a1;
    border-left: 6px solid #1976d2;
    padding-left: 15px;
}

.blog-post {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.blog-post .post-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1565c0;
}

.blog-post .post-date {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 12px;
}

.blog-post .post-excerpt {
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
}


/* BLOG POST  1*/
.blog-post1, .blog-post2, .blog-post3 {
    padding: 60px 20px;
    background: #f9f9f9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #111;
}

.blog-post1 .container, .blog-post2 .container, .blog-post3 .container {
    max-width: 800px;
    margin: 0 auto;
}

.blog-post1 .post-title, .blog-post2 .post-title, .blog-post3 .post-title  {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0d47a1;
    margin-bottom: 10px;
    text-align: left;
    border-left: 6px solid #1976d2;
    padding-left: 12px;
}

.blog-post1 .post-date, .blog-post2 .post-date, .blog-post3 .post-date {
    font-size: 0.95rem;
    color: #777;
    margin-bottom: 30px;
}

.blog-post1 .post-content p, .blog-post2 .post-content p, .blog-post3 .post-content p  {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #444;
}


/* FAQ SECTION */
.faq-page {
    padding: 60px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f9f9f9;
    color: #111;
}

.faq-page .container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #0d47a1;
    margin-bottom: 40px;
    border-left: 6px solid #1976d2;
    padding-left: 12px;
    text-align: left;
}

.faq-section {
    margin-bottom: 40px;
}

.faq-section-title {
    font-size: 2rem;
    font-weight: 600;
    color: #1565c0;
    margin-bottom: 20px;
    border-left: 4px solid #42a5f5;
    padding-left: 10px;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-question {
    font-size: 1.2rem;
    font-weight: 600;
    color: #0d47a1;
    margin-bottom: 8px;
}

.faq-answer {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
}


/* Contact Page */

.contact-page {
    padding: 60px 20px;
    background-color: #f9f9f9;
}

.contact-page .contact-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: left; /* modern left-aligned style */
}

.contact-page .contact-description {
    font-size: 1.1rem;
    margin-bottom: 40px;
    color: #555;
}

.contact-form {
    max-width: 700px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form label {
    font-weight: 600;
    margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    width: 100%;
}

.contact-form button {
    padding: 14px 20px;
    background: linear-gradient(90deg, #1e3c72, #2a5298);
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-form button:hover {
    background: linear-gradient(90deg, #2a5298, #1e3c72);
}

.contact-success {
    margin-top: 20px;
    color: green;
    font-weight: bold;
}

.contact-error {
    margin-top: 20px;
    color: red;
    font-weight: bold;
}


/* Privacy */

 /* Privacy Policy Specific Styles */
 .privacy {
    max-width: 900px;
    margin: 50px auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    line-height: 1.8;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.privacy h1,
.privacy h2,
.privacy h3 {
    color: #FFA500;  
    margin-bottom: 15px;
}

.privacy h1 {
    font-size: 2.2rem;
    text-align: left;
}

.privacy h2 {
    font-size: 1.5rem;
    margin-top: 30px;
}

.privacy p {
    color: #333;
    margin-bottom: 15px;
}

.privacy a {
    color: #007BFF;
    text-decoration: none;
}

.privacy a:hover {
    text-decoration: underline;
}



/* =============================
   Terms of Service Section
============================= */

.terms {
    max-width: 900px;                       /* readable content width */
    margin: 40px auto;                      /* center section */
    padding: 35px 25px;                     /* inner spacing */
    background: #ffffff;                   /* clean white background */
    border-radius: 12px;                   /* smooth rounded corners */
    box-shadow: 0 4px 18px rgba(0,0,0,0.08); /* subtle modern shadow */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #222;                            /* strong readability */
    line-height: 1.7;
}

/* Main title */
.terms h1 {
    font-size: 2.4em;
    margin-bottom: 10px;
    color: #1e3c72;                         /* brand blue */
    text-align: left;
}

/* Section headings */
.terms h2 {
    font-size: 1.4em;
    margin-top: 28px;
    margin-bottom: 10px;
    color: #FFA500;                         /* accent orange */
}

/* Paragraphs */
.terms p {
    font-size: 1.05em;
    margin-bottom: 14px;
    color: #333;
}

/* Links */
.terms a {
    color: #0077cc;
    text-decoration: none;
    font-weight: 600;
}

.terms a:hover {
    text-decoration: underline;
}

/* Emphasis text */
.terms strong {
    color: #000;
}


.review {
    padding: 60px 20px;
    background: #f9fafb;
    color: #111;
  }
  
  .review-container {
    max-width: 900px;
    margin: auto;
  }
  
  .review h1 {
    font-size: 2.5rem;
    text-align: left;
    margin-bottom: 10px;
  }
  
  .review-intro {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 40px;
  }
  
  /* Summary */
  .review-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 50px;
  }
  
  .rating-score {
    font-size: 3rem;
    font-weight: bold;
    color: #2563eb;
  }
  
  .rating-details .stars {
    font-size: 1.4rem;
    color: #f59e0b;
  }
  
  .rating-details p {
    color: #666;
    font-size: 0.95rem;
  }
  
  /* Review Items */
  .review-item {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  }
  
  .review-item h2 {
    font-size: 1.2rem;
    margin-bottom: 5px;
  }
  
  .review-item .stars {
    color: #f59e0b;
    margin-bottom: 10px;
  }
  
  .review-text {
    color: #444;
    line-height: 1.7;
    margin-bottom: 15px;
  }
  
  .review-meta {
    font-size: 0.9rem;
    color: #777;
    display: flex;
    justify-content: space-between;
  }
  
/* ================== Responsive for Small Devices ================== */
/* Responsive for mobile */
@media (max-width: 768px) {
    .about-title {
        font-size: 2.2rem;
    }
    .about-heading {
        font-size: 1.5rem;
    }
    .about-intro, .about-text {
        font-size: 0.95rem;
    }

/* Blog page */
    .blog-title {
        font-size: 2.2rem;
    }
    .blog-post .post-title {
        font-size: 1.4rem;
    }
    .blog-post .post-excerpt {
        font-size: 0.95rem;
    }


    /* BLOG POST 1 */
    .blog-post1 .post-title,  .blog-post2 .post-title, .blog-post3 .post-title {
        font-size: 2rem;
    }
    .blog-post1 .post-content p,  .blog-post2 .post-content p, .blog-post3 .post-content p {
        font-size: 1rem;
    }


    /*FAQ */
    .faq-title {
        font-size: 2rem;
    }
    .faq-section-title {
        font-size: 1.6rem;
    }
    .faq-question {
        font-size: 1.1rem;
    }
    .faq-answer {
        font-size: 1rem;
    }

    /* Contact Page */
    .contact-page {
        padding: 40px 15px;
    }

    .contact-page .contact-title {
        font-size: 2rem;
    }

    .contact-page .contact-description {
        font-size: 1rem;
    }

    .contact-form {
        gap: 15px;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 0.95rem;
        padding: 10px;
    }

    .contact-form button {
        font-size: 0.95rem;
        padding: 12px 16px;
    }

    /* privacy*/
    .privacy {
        padding: 20px;
        margin: 20px;
    }

    .privacy h1 {
        font-size: 1.8rem;
    }

    .privacy h2 {
        font-size: 1.3rem;
    }


    .terms {
        margin: 20px 12px;
        padding: 22px 18px;
    }

    .terms h1 {
        font-size: 1.9em;
    }

    .terms h2 {
        font-size: 1.2em;
    }

    .terms p {
        font-size: 0.95em;
    }

    .review h1 {
        font-size: 2rem;
      }
    
      .review-summary {
        flex-direction: column;
        align-items: flex-start;
      }
    
      .rating-score {
        font-size: 2.5rem;
      }

      /* Social Icon onside bar */
      .sidebar-social {
        flex-wrap: wrap;        /* Allow icons to move to next line */
        justify-content: center; /* Center icons if they wrap */
        gap: 8px;               /* Adjust spacing for small screens */
    }

    /* Optional: make icons slightly bigger for touch devices */
    .sidebar-social a i {
        font-size: 22px;        /* Increase icon size if needed */
    }
}


/***********************kiiuyi*/

.blog-page {
    padding: 60px 20px;
    background: #f8fafc;
  }
  
  .blog-container {
    max-width: 1000px;
    margin: auto;
  }
  
  .blog-page h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
  }
  
  .blog-intro {
    color: #555;
    margin-bottom: 30px;
  }
  
  /* Controls */
  .blog-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
  }
  
  .blog-controls input,
  .blog-controls select {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 1rem;
    width: 100%;
  }
  
  /* Blog Posts */
  .blog-list {
    display: grid;
    gap: 25px;
  }
  
  .blog-post {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
  }
  
  .blog-post:hover {
    transform: translateY(-5px);
  }
  
  .blog-post h2 {
    font-size: 1.4rem;
    margin-bottom: 5px;
  }
  
  .blog-date {
    font-size: 0.9rem;
    color: #777;
  }
  
  .blog-excerpt {
    margin: 15px 0;
    color: #444;
  }
  
  .blog-full {
    display: none;
    color: #444;
    margin-bottom: 15px;
  }
  
  .read-more {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .read-more:hover {
    background: #1e4fd6;
  }
  
  /* Mobile */
  @media (max-width: 600px) {
    .blog-controls {
      flex-direction: column;
    }
  
    .blog-page h1 {
      font-size: 2rem;
    }
  }
  /*klklkk*/
  .blog-page {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
}

.blog-page h1 {
    text-align: left;
    font-size: 36px;
    color: #222;
    margin-bottom: 20px;
}

.blog-submit {
    background: #f7f7f7;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 40px;
}

.blog-submit input, .blog-submit textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.blog-submit button {
    padding: 12px 25px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 8px;
    cursor: pointer;
}

.blog-submit button:hover {
    background-color: #0056b3;
}

.blog-list .blog-post {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

.blog-list .blog-post h2 {
    font-size: 28px;
    color: #333;
    margin-bottom: 10px;
}

.blog-date {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

.success-msg {
    padding: 10px;
    background-color: #d4edda;
    color: #155724;
    border-radius: 8px;
    margin-bottom: 15px;
}



  /* ================= TRICKS CSS ================= */
  
/* =========================
   Tricks Section Styling
========================= */
.tricks {
    max-width: 900px;          /* Limit content width */
    margin: 0 auto;            /* Center section horizontally */
    padding: 20px;
    text-align: center;        /* Center heading, input, pagination */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.tricks h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

#tricks-search {
    width: 80%;               /* Wide search box */
    max-width: 400px;
    padding: 10px 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    text-align: center;       /* Center placeholder text */
    transition: all 0.3s ease;
}

#tricks-search:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

.tricks-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.trick-card {
    width: 90%;
    max-width: 700px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: left;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.trick-card:hover {
    transform: translateY(-2px);
}

.trick-title {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.trick-title h4 {
    margin: 0;
    font-size: 1.1rem;
}

.trick-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;
}

.trick-solution {
    margin-top: 10px;
    font-size: 0.95rem;
    line-height: 1.4;
    display: none; /* Hidden by default, show on click */
}

.read-more {
    color: #007bff;
    cursor: pointer;
    font-weight: bold;
    margin-left: 5px;
}

#load-more-btn {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    background-color: #007bff;
    color: #fff;
    transition: background-color 0.3s ease;
}

#load-more-btn:hover {
    background-color: #0056b3;
}

.tricks-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-top: 15px;
}

.page-btn {
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #007bff;
    background-color: #fff;
    color: #007bff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-btn:hover {
    background-color: #007bff;
    color: #fff;
}

.page-btn.active {
    background-color: #007bff;
    color: #fff;
}

@media (max-width: 600px) {
    .trick-image {
        width: 35px;
        height: 35px;
    }

    #tricks-search {
        width: 90%;
    }

    .trick-card {
        width: 95%;
    }
}