/*------------------------------------------------------------------
[Table of contents]

1.  All Page default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Service Section
6.  Categories Section
7.  Instagram Section
8.  About Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/





/*----------------------------------------*/
/* Index Page CSS
/*----------------------------------------*/

/* Main title for index page for company name */
/* Company Name or H1 */
.responsive-title {
     font-size: 1.8rem;
}
@media (min-width: 768px) {
     .responsive-title {
         font-size: 2.5rem;
     }
}
@media (min-width: 1200px) {
     .responsive-title {
         font-size: 3.2rem;
     }
}


/* Main container for search input and dropdown */
/* Main container */
.search-bar-group {
  max-width: auto;
  margin: 0 auto;
  width: 100%;
  gap: 20px; /* 👈 Creates clean space between both bars */
}

/* Search bar + dropdown */
.search-input,
.search-select {
  flex: 1;
  min-width: 200px;
  height: 50px;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  transition: all 0.2s ease-in-out;
}

/* Focus effect */
.search-input:focus,
.search-select:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

/* Responsive behavior */
@media (max-width: 768px) {
  .search-bar-group {
    flex-direction: column;
    gap: 12px; /* slightly more space on mobile */
  }

  .search-input,
  .search-select {
    width: 100%;
  }
}


/*  Highlight Style for Featured Category (e.g., "Digital Marketing") */
.sidebar__item__categories ul li.featured a {
    border: 2px solid #f4952f;
    border-radius: 6px;
    padding: 5px 10px;
    font-weight: 600;
    color: #f4952f;
    transition: 0.3s;
}

.sidebar__item__categories ul li.featured a:hover {
    background: #f4952f;
    color: #fff;
}


/*<!-- CSS for two-corner design -->*/
 .corner-accent {
   position: relative;
   overflow: hidden;
 }
 .corner-accent::before,
 .corner-accent::after {
   content: "";
   position: absolute;
   width: 30px;   /* size of accent */
   height: 30px;
   z-index: 1;
 }
 .corner-accent::before {
   top: 0;
   left: 0;
   background-color: #f4952f; /* golden */
   border-bottom-right-radius: 8px;
 }
 .corner-accent::after {
   bottom: 0;
   right: 0;
   background-color: #1ABC9C; /* teal blue */
   border-top-left-radius: 8px;
}










/**************************************************
* About Notes Time
**************************************************/
.about-slide {
    max-width: 1250px;
    background: #fff;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
/* TOP SECTION */
.top-section {
    background: #2c3e50;
    padding: 10px 20px;
    color: #fff;
}
.top-section h2 { font-size: 32px; font-weight: 700; }
.top-section p { max-width: 90%; margin: 12px auto; opacity: 0.85; }
/* COLOR LINE */
.color-line { display: flex; gap: 6px; margin-top: 15px; }
.color-line span { width: 40px; height: 4px; border-radius: 5px; }
/* ICON SECTION */
.icon-item { margin-top: 30px; }
.circle-border {
    width: 110px; height: 110px;
    border: 6px solid #000;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    margin: auto;
}
.circle-border img { width: 55px; height: 55px; }





/****************************************************
* Company Overview — Main Container
****************************************************/
.workstation-slide {
    margin: 36px auto;
    background: #fff;
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
    min-height: 440px;
}
/****************************************************
* LEFT PANEL — Icon Section
****************************************************/
.slide-left {
    width: 48%;
    background: #42566f;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
/* Icon Circle */
.icon-circle {
    width: 260px;
    height: 260px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    overflow: hidden;
}
.icon-circle img,
.icon-circle svg {
    width: 72%;
    height: 72%;
    object-fit: contain;
    display: block;
}
/****************************************************
* Divider Line
****************************************************/
.divider {
    width: 1px;
    background: rgba(0,0,0,0.06);
}
/****************************************************
* RIGHT PANEL — Text Content Section
****************************************************/
.slide-right {
    width: 52%;
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Small Heading */
.eyebrow {
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* Title */
.company-overview-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111827;
}
/* Lead Paragraph */
.workstation-slide .lead {
    font-size: 15px;
    color: #374151;
    margin-bottom: 18px;
    line-height: 1.6;
}
/* Regular Paragraphs */
.company-overview-text {
    color: #374151;
    margin-bottom: 12px;
    line-height: 1.6;
    font-size: 14px;
}
/****************************************************
* CTA Buttons
****************************************************/
.cta {
    margin-top: 18px;
    display: flex;
    gap: 12px;
}
.btn-primary {
    background: #0f172a;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}
.btn-secondary {
    background: #e5e7eb;
    color: #111827;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}
/****************************************************
* Decorative Bars
****************************************************/
.decor-bars {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}
.decor-bars .bar {
    height: 6px;
    border-radius: 3px;
    background: #c94b4b;
    width: 140px;
}
.decor-bars .gray {
    background: #e5e7eb;
    width: 100px;
}
/****************************************************
* Responsive Layout
****************************************************/
@media (max-width: 980px) {
    .workstation-slide {
        flex-direction: column;
        max-width: 94%;
    }
    .slide-left,
    .slide-right {
        width: 100%;
        padding: 28px;
    }
    .icon-circle {
        width: 220px;
        height: 220px;
    }
    .divider {
        display: none;
    }
}





















/**************************************************
* Founder Story CONTAINER
**************************************************/
.engineering-slide {
    margin: 40px auto;
    background: #fff;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.15);
}
/**************************************************
* LEFT WHITE CARD
**************************************************/
.eng-left {
    background: #f9fafb;
}
.eng-card {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.icon-box {
    width: 65px;
    height: 65px;
    background: #1f7ea5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
/**************************************************
* RIGHT GRADIENT SECTION
**************************************************/
.eng-right {
    padding: 40px;
    color: #fff;
    background: linear-gradient(90deg, #b83232, #225a7f);
    background-size: cover;
}
.caption-group {
    margin-top: 40px;
}
.cap-item img {
    width: 45px;
    margin-bottom: 8px;
}
.cap-item {
    text-align: center;
}
/**************************************************
* MILESTONE SECTION
**************************************************/
.milestone-container {
    background: #fff;
    padding: 35px;
    border-radius: 10px;
}
.ms-left-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}
.ms-row {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.ms-tag {
    font-weight: bold;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    width: 200px;          /* 🎯 FIXED equal width for all labels */
    text-align: center;
    margin-right: 20px;
    font-size: 15px;
}
/* Pre-defined colors */
.ms-tag.blue { background:#0aa2ff; }
.ms-tag.purple { background:#8b5cf6; }
.ms-tag.green { background:#22c55e; }
.ms-tag.red { background:#ef4444; }
.ms-tag.orange { background:#f97316; }
.ms-tag.yellow { background:#eab308; }
.ms-tag.darkred { background:#dc2626; }
/**************************************************
* TEXT
**************************************************/
.ms-text {
    font-size: 14px;
    color: #444;
    margin: 0;
}
/**************************************************
* RESPONSIVE
**************************************************/
@media (max-width: 992px) {
    .ms-row {
        flex-direction: column;
        text-align: center;
    }
    .ms-tag {
        margin-right: 0;
        margin-bottom: 10px;
    }
}










/****************************************************
* FOUNDER MILESTONES PPT-LIKE SECTION (BOOTSTRAP FRIENDLY)
****************************************************/
.milestone-container {
    background: #fff;
    padding: 30px 20px;
    border-radius: 10px;
}
/* LEFT SIDE IMAGE + TITLE */
.ms-left img {
    width: 100%;
    max-height: 350px;    /* FULL SIZED IMAGE FIX */
    object-fit: cover;
    margin-bottom: 20px;
}
.ms-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
    color: #000;
}
/* RIGHT SIDE */
.ms-right .ms-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
/* TAG BUTTONS – SAME WIDTH FOR ALL */
.ms-tag {
    font-weight: bold;
    color: #fff;
    padding: 12px 18px;
    border-radius: 6px;
    width: 200px;                 /* 🔥 Equal fixed width */
    text-align: center;
    margin-right: 20px;
    font-size: 15px;
    flex-shrink: 0;               /* Prevent shrinking */
}
.ms-text {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin: 0;
}
/****************************************************
* RESPONSIVE
****************************************************/
@media (max-width: 992px) { 
    .ms-left {
        text-align: center;
        margin-bottom: 25px;
    }
}
@media (max-width: 768px) { 
    .ms-right .ms-row {
        flex-direction: column;
        text-align: center;
    }
    .ms-tag {
        margin-right: 0;
        margin-bottom: 10px;
    }
}






/************************************************************
* SECTION 01 : VISION & MISSION POWERPOINT TEMPLATE STYLE
************************************************************/
/* CONTAINER */
.vm-container {
    display: flex;
    width: 100%;
    background: #fff;
    border: 1px solid #eee;
}
/* LEFT SIDE */
.vm-left {
    width: 40%;
    position: relative;
    overflow: hidden;
}
.vm-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* WHITE OVERLAY */
.vm-left::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
}
/* LEFT TEXT */
.vm-left-text {
    position: absolute;
    top: 5%;
    left: 8%;
    z-index: 2;
}
.vm-left-text h3 {
    font-size: 42px;
    font-weight: 700;
    color: #1ABC9C;
}
.vm-arrow {
    font-size: 40px;
    color: #1ABC9C;
}
.vm-left-text p {
    width: 100%;
    font-size: 15px;
    line-height: 1.6;
}
/* RIGHT SIDE */
.vm-right {
    width: 60%;
    padding: 30px;
}
.vm-title {
    font-size: 28px;
    border-left: 5px solid #1ABC9C;
    padding-left: 10px;
    margin-bottom: 15px;
}
.vm-desc {
    font-size: 15px;
    color: #444;
    margin-bottom: 35px;
    width: 95%;
    line-height: 1.6;
}
/* RED STRIP */
.vm-red-strip {
    background: #1ABC9C;
    color: white;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    border-radius: 6px;
}
.vm-red-strip h4 {
    font-size: 20px;
    margin-bottom: 8px;
}
.vm-red-strip p {
    font-size: 14px;
    line-height: 1.6;
}
/* RESPONSIVE */
@media (max-width: 900px) {
    .vm-container {
        flex-direction: column;
    }
    .vm-left, .vm-right {
        width: 100%;
    }
    .vm-left-text h3 {
        font-size: 30px;
    }
    .vm-left-text p {
        width: 90%;
    }
    .vm-red-strip {
        flex-direction: column;
    }
}


/*******************************************************
* SECTION 02 : CORE VALUES SECTION (LEFT & RIGHT BOX)
*******************************************************/
.core-values-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 40px;
    font-family: "Segoe UI", sans-serif;
}

/* ---------- LEFT SECTION ---------- */
.values-left {
    width: 60%;
}
.title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 25px;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}
.value-box h4 {
    color: #f4952f;
    font-size: 18px;
    margin-bottom: 8px;
}
.value-box p {
    font-size: 14px;
    color: #555;
    line-height: 1.4;
}
/* ---------- RIGHT SECTION ---------- */
.values-right {
    width: 40%;
    background: #1ABC9C;
    padding: 30px;
    border-radius: 4px;
    position: relative;
    color: #fff;
}
.quote-box {
    margin-bottom: 25px;
}
.quote-text {
    font-size: 15px;
    line-height: 1.6;
    font-style: italic;
}
.image-box {
    text-align: center;
}
.image-box img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .core-values-container {
        flex-direction: column;
    }
    .values-left, .values-right {
        width: 100%;
    }
}

























/*----------------------------------------*/
/* About Notes Page CSS
/*----------------------------------------*/





/*----------------------------------------*/
/* Gallery Notes Page CSS
/*----------------------------------------*/





/*----------------------------------------*/
/* Main and End Notes Page CSS
/*----------------------------------------*/

/* ---------------------------------------------------------
   Copy Code Container – UI Styling (Star Digital Software)
   ---------------------------------------------------------
   Description:
   Provides styling for the auto-generated code block wrapper
   and the "Copy code" button.

   Features:
   ✔ Dark-themed code container
   ✔ Responsive layout with padding & rounded edges
   ✔ Floating copy button with hover effect
   ✔ Smooth UI integration for blog/tutorial pages
--------------------------------------------------------- */
/* copy-code-container */
.copy-code-container {
    position: relative;
    background: #f4952f;
    color: #1ABC9C;
    padding: 1rem;
    border-radius: 10px;
    margin: 20px 0;
    border: 1px solid #333;
}
.copy-code-container pre {
    margin: 0;
    overflow-x: auto;
}
.copy-code-container-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: 0.2s;
}
.copy-code-container-btn:hover {
    background: #333;
}



/*  Floating Sidebar Button — visible on all mobile & tablet screens */
 .floating-sidebar-btn {
  position: fixed;
  top: 12%;               /* Adjusted for better placement on smaller screens */
  right: 18px;
  background-color: #f4952f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 1100;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Hover / tap feedback */
.floating-sidebar-btn:hover,
.floating-sidebar-btn:active {
  background-color: #d87f1d;
  transform: scale(1.08);
}

/* Fully block / hide on desktop (≥1200px) */
@media (min-width: 1200px) {
  .floating-sidebar-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Adjust sizing for smaller phones */
@media (max-width: 575.98px) {
  .floating-sidebar-btn {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    top: 10%;
    right: 14px;
  }
}

/* Adjust for tablets (medium screens) */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .floating-sidebar-btn {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
    top: 12%;
    right: 18px;
  }
}


/* ---------- Utility ---------- */
.d-none { display: none !important; }

/* Overlay for mobile */
#sidebarOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1040;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
#sidebarOverlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Row wrapper ---------- */
.row-sticky-sidebar { position: relative; }
.row-sticky-sidebar .col-lg-3 { position: relative; }

/* ---------- Sidebar ---------- */
#courseSidebar {
  position: absolute;
  top: 0;
  width: 100%;
  background: #fff;
  border-right: 1px solid #eee;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  border-radius: 8px;
  padding: 1rem;
  z-index: 1050;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: box-shadow .15s ease;
}
#courseSidebar.fixed {
  position: fixed !important;
  top: 70px; /* match header height */
  z-index: 1040;
  width: inherit;
}

/* ---------- Sidebar links ---------- */
.sidebar-link {
  padding: 8px 10px;
  border-left: 4px solid transparent;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  transition: all 0.22s ease;
  color: #343a40;
  text-decoration: none;
}
.sidebar-link:hover {
  color: #f4952f;
  background-color: #fdf5ef;
}
.active-module {
  color: #f4952f !important;
  border-left: 4px solid #f4952f;
  background-color: #fff3e6;
}

/* ---------- Subtopic Animation ---------- */
.sub-topic-list { padding-left: 0; margin: 0; list-style: none; }
.sub-topic-list li {
  padding: 6px 0 6px 12px;
  font-size: .95rem;
  color: #6c757d;
}
.sub-topic-list.animate-subtopics li {
  opacity: 0;
  transform: translateX(-18px);
  animation: slideIn .28s forwards;
}
@keyframes slideIn {
  to { opacity: 1; transform: translateX(0); }
}


/* ---------- Active subtopic link styling ---------- */
/* Subtopic Links */
.subtopic-link {
  display: block;
  padding: 6px 12px;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.25s ease;
}

/* Hover */
.subtopic-link:hover {
  color: #1ABC9C;
  background-color: #fdf5ef;
}

/* Active (clicked) */
.subtopic-link.active {
  color: #fff !important;
  background-color: #1ABC9C !important;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(244, 149, 47, 0.3);
}


/* ---------- Scrollbar ---------- */
#courseSidebar {
  scrollbar-width: thin;
  scrollbar-color: #f4952f #f9f9f9;
}
#courseSidebar::-webkit-scrollbar { width: 6px; }
#courseSidebar::-webkit-scrollbar-thumb {
  background-color: #f4952f;
  border-radius: 10px;
}
#courseSidebar::-webkit-scrollbar-track {
  background-color: #f9f9f9;
}

/* ---------- Buttons ---------- */
#openSidebar {
  background-color: #f4952f;
  color: #fff;
  font-weight: 700;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  width: 100%;
}
#closeSidebar {
  background: #fff;
  border: 1px solid #ddd;
  color: #000;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* ---------- Borders ---------- */
.sidebar ul > li {
  border-bottom: 3px solid #e6e6e6;
  margin-bottom: 5px;
}

/* ---------- Disable Scroll when Sidebar Active ---------- */
body.no-scroll { overflow: hidden; }

/* ---------- Right Content ---------- */
.content-area { padding: 20px; }

/* ---------- Mobile Slide-In ---------- */
@media (max-width: 991.98px) {
  #courseSidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 340px;
    height: 100vh;
    transform: translateX(0);
    transition: left .28s ease;
    z-index: 1060;
    border-radius: 0;
    max-height: 100vh;
  }
  #courseSidebar.active { left: 0; }
  #sidebarOverlay { z-index: 1055; }
  .content-area { margin-left: 0; padding: 15px; }
}



/*  Main Content Column (col-lg-7) */
.main-content{
  padding-left: 25px;
}
 .main-content .section-heading {
  font-weight: 600;
  color: #f4952f; /* Unique accent color */
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.3;
  margin-bottom: 1rem;
  text-align: center; /* Ensures center alignment */
  transition: color 0.3s ease;
}

/* Responsive font sizing */
@media (min-width: 1200px) {
  .main-content .section-heading {
    font-size: 2.2rem; /* Large screens */
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .main-content .section-heading {
    font-size: 2rem;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .main-content .section-heading {
    font-size: 1.75rem;
  }
}

@media (max-width: 767px) {
  .main-content .section-heading {
    font-size: 1.5rem;
  }
}

/* Optional hover accent effect */
.main-content .section-heading:hover {
  color: #ff8c1a;
}


/* Headings */
.main-content .section h3 {
  color:  #1ABC9C;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin-bottom: 0.75rem;
  font-weight: 700;
}

/* Paragraphs */
.main-content .section p {
  line-height: 1.7;
  margin-left: 1rem;
  margin-bottom: 0.75rem;
}

/* Lists */
.main-content .section ul, .section ol{
  margin-left: 2rem;
  margin-bottom: 1rem;
  list-style-type: disc;
}

.main-content .section li {
  margin-bottom: 0.4rem;
}

/* Links */
.main-content .section a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.main-content .section a:hover {
  text-decoration: underline;
}

/* Underline emphasis */
.main-content .section u {
  text-underline-offset: 4px;
}