.title {
    color: #0f0080;
    font-family: sans-serif;
}
H1 {
    color: #4e82a4;
    font-family: sans-serif;
}
a {

    color: #4e82a4;        /* Change link colour */
    text-decoration: none; /* Remove underline */
        /* Make text bold */
}
.text-Refrences H2
{
  font-size: 1em; 
  margin-bottom: 0.5em;
color: #192026;   
}
.text-Refrences a 
{
     color: #172027;        /* Change link colour */
    text-decoration: none; /* Remove underline */
        /* Make text bold */
  font-size: 0.85em; 
}
.text-Refrences a:visited {

    color: #132f3b;        /* Change link colour */
    text-decoration: none; /* Remove underline */
      /* Make text bold */

}
a:visited {

    color: #255469;        /* Change link colour */
    text-decoration: none; /* Remove underline */
      /* Make text bold */

}
a:hover {

    color: #9cc3dd;        /* Change link colour */
    text-decoration: none; /* Remove underline */
       /* Make text bold */

}
body {
    color: #446c7e;
    font-family: sans-serif;
  background-image: url('images/BackDCut.svg');
  background-repeat: no-repeat;
  background-position: bottom left;
  background-color:#164255;
  background-size: 75%;/* or contain, depending on your design */
  background-attachment: fixed; /* keeps it static while scrolling */
}





header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* ensures it stays above other elements*/
  background: #164255; /* or any colour to avoid transparency issues */
}

/* For phones (max-width: 600px is a common breakpoint) */
@media (max-width: 600px) {
  .background-image {
    background: url('/images/PPTb-mobile.svg') no-repeat center center;
    background-size: cover;
  }
}


.container {
  display: flex;
  flex-direction: row;
}
#dicelogo {
  width: clamp(30px, 15vw, 100px);
}
#logotext {
  width: clamp(300px, 80vw, 1000px);
  
}
#flowchart{
  width: clamp(300px, 80vw, 500px);
}
  
.central-box {
  background: rgba(13, 48, 67, 0.62);
  padding: 20px 80px 60px;
  margin-left: 175px;
  margin-top: clamp(40px, 20vw, 150px); /* below header */
  width: calc(100vw - 140px); /* fixed width based on viewport */
  position: relative;
  z-index: 2;
  flex: none; /* stops flex sizing */
  flex-shrink: 0; /* prevents shrinking */
  box-sizing: border-box;
  min-height: calc(80vh - 80px); /* ensures it fills the viewport but grows if needed */
  height: auto;       /* allows dynamic resizing */
  overflow: visible;  /* prevents scrollbars unless content overflows */
}




.arrow-container {
    position: absolute;
    bottom: 20px; /* distance from bottom */
    left: 40%;
    transform: translateX(-50%); /* centre horizontally */
    display: flex;
    flex-direction: column; /* stack vertically */
    gap: 8px; /* space between buttons */
}

.arrow-btnu{
  
width: 50px; /* adjust size */
    height: 30px;
    background: url('images/Arowbu.svg') no-repeat center;
    background-size: contain;
    border: none;
    cursor: pointer;
}
/* Hover state */
.arrow-btnu:hover {
    background-image: url('images/Arowbuo.svg');
}
/* Active (click) state */
.arrow-btnu:active {
    background-image: url('images/Arowbuc.svg');
}
.arrow-btnuo{
width: 50px; /* adjust size */
    height: 60px;
    background: url('images/Arowu.svg') no-repeat center;
    background-size: contain;
    border: none;
    cursor: pointer;
}
/* Hover state */
.arrow-btnuo:hover {
    background-image: url('images/Arowuo.svg');
}
/* Active (click) state */
.arrow-btnuo:active {
    background-image: url('images/Arowuc.svg');
}
.arrow-btnd{ 
width: 50px; /* adjust size */
    height: 30px;
    background: url('images/Arowbd.svg') no-repeat center;
    background-size: contain;
    border: none;
    cursor: pointer;
}
/* Hover state */
.arrow-btnd:hover {
    background-image: url('images/Arowbdo.svg');
}
/* Active (click) state */
.arrow-btnd:active {
    background-image: url('images/Arowbdc.svg');
}
.arrow-btndo{ 
width: 50px; /* adjust size */
    height: 60px;
    background: url('images/Arowd.svg') no-repeat center;
    background-size: contain;
    border: none;
    cursor: pointer;
}
/* Hover state */
.arrow-btndo:hover {
    background-image: url('images/Arowdo.svg');
}
/* Active (click) state */
.arrow-btndo:active {
    background-image: url('images/Arowdc.svg');
}



.sidebar {
  width: 140px;
  background: rgba(24, 78, 97, 0.82);
  padding: 20px 20px;
  border-radius: 0 0 0 0;
  min-width: 140px;
  max-width: 140px;
  box-shadow: 0;
  position: fixed;
  margin-top: clamp(40px, 20vw, 150px); 
  height: 100vh;
  z-index: 3;
  display: flex; 
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar ul li {
  margin-bottom: 24px;
}

.sidebar ul li a {
  color: #538a9f;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: color 0.2s;
}

.sidebar ul li a:hover {
  color: #9dd5e2;
}


.sidebar a.active {
  color: #9dd5e2;
  font-weight: bold;
}




td, th {
    text-align: center;              /* Centres text horizontally */
    vertical-align: middle;          /* Centres content vertically */
  }

  img {
    display: block;                  /* Removes inline spacing */
    margin: 0 auto;                  /* Centres image horizontally */
  }


/*Tabel*/

.bodyTabel{
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-family: Arial, sans-serif;
}

.bodyTabel th,.bodyTabel td {
  border: 1px solid #113443;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.bodyTabel th {
  background-color: rgba(13, 48, 67, 0.62);
  font-weight: bold;
}


.responsive-table {
  width: clamp(320px, 90%, 700px);
  table-layout: fixed;  
  min-width: 320px; /* extra safety */
  border-spacing: 0 12px; /* 12px vertical space between rows */
}

.responsive-table img {
  width: 100%;          /* fills the cell width */
  max-width: 120px;     /* sets a maximum size */
  height: auto;         /* maintains aspect ratio */
  object-fit: contain;  /* ensures the whole image fits without cropping */
  display: block;       /* removes inline spacing */
  margin: 0 auto; 
   /* keeps aspect ratio */
}

/*Footer 


.footer-panel {
  position: fixed;       /* Keeps it visible at the bottom 
  bottom: 0;
  left: 0;
  width: 100%;
  background: #0d3043;   /* Dark background for contrast 
  color: #fff;
  /*padding: 10px;
  text-align: center;
  z-index: 1001;         /* Higher than header/sidebar 
}


.footer-toggle {
  background: none;
  border: none;
  color: #81b0c9;
  font-size: 1.2em;
  cursor: pointer;
  align-items: flex-start;
  display: flex;          /* Ensures flexible layout 
  flex-direction: column; /* Stack elements vertically 
}



.footer-links {
  display: none; /* hidden by default 
  margin-top: 10px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin: 8px 0;
}

.footer-links a {
  color: #9dd5e2;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}
*/

.section {
    display: none;
}
.section.active {
    display: block;
}

/*section for the buisnes sheet */

.canvas {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 2fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
}
.box {
    border: 2px solid #333;
    padding: 10px;
    background: #f9f9f9;
    min-height: 100px;
}
.title {
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center;
}
.key-partners { grid-column: 1 / 2; grid-row: 1 / 3; }
.key-activities { grid-column: 2 / 3; grid-row: 1 / 2; }
.value-propositions { grid-column: 3 / 4; grid-row: 1 / 3; }
.customer-relationships { grid-column: 4 / 5; grid-row: 1 / 2; }
.customer-segments { grid-column: 4 / 5; grid-row: 2 / 3; }
.key-resources { grid-column: 2 / 3; grid-row: 2 / 3; }
.channels { grid-column: 3 / 4; grid-row: 3 / 4; }
.cost-structure { grid-column: 1 / 3; grid-row: 3 / 4; }
.revenue-streams { grid-column: 3 / 5; grid-row: 3 / 4; }