html,
body {font-family: "Varela Round", sans-serif !important;    overflow-x: hidden;    font-size: 14px;}
body {margin: 0px;    line-height: 1.42857143;    color: #333;    background-color: #fff;}
header {background-color: #6F42C1;    color: white;    display: flex;    justify-content: space-between;  position: relative;  align-items: center;    padding: 10px 20px;}
#logo {font-size: 24px;    font-weight: bold;}
#logo a {color: #ffffff;    text-decoration: none;}

/* Dark Theme */
body.dark {background-color: #1a1a1a;    color: #ffffff;}
.switch {position: relative;    display: inline-block;    width: 40px;    height: 20px;}
.slider {position: absolute;    cursor: pointer;    top: 0;    left: 0;    right: 0;    bottom: 0;    background-color: #ccc;border-radius: 20px;transition: 0.4s;}
.slider:before {position: absolute;    content: "";    height: 16px;    width: 16px;    left: 2px;    bottom: 2px;    background-color: white;    border-radius: 50%;    transition: 0.4s;}
input[type="checkbox"] {    display: none;}
input[type="checkbox"]:checked + .slider {    background-color: #2196F3;}
input[type="checkbox"]:checked + .slider:before {    transform: translateX(20px);}

/* font + icon */

/* @font-face rule for icon font (e.g., Font Awesome) */
@font-face {font-family: "FontAwesome"; src: url("font/fontawesome-webfont.woff2") format("woff2"), url("font/fontawesome-webfont.woff") format("woff");    font-weight: normal;    font-style: normal;    font-display: swap;}
.fa { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal;    line-height: 1;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}
.fa-search::before {    content: "\f002";}
.fa-eye::before {    content: "\f06e";}
.fa-map-marker::before {    content: "\f041";}
.fa-arrow-up::before {    content: "\f062";}
.fa-comment::before {    content: "\f075";}
.fa-thumbs-up::before {    content: "\f087";}

/* @font-face rule for main text font (e.g., Varela Round) */

@font-face {font-family: "Varela Round"; src: url("font/varela-round.ttf") format("truetype");    font-weight: normal;    font-style: normal;    font-display: swap;}

/* ------------------------- menu ------------------------- */

nav ul {display: flex; gap: 0px; align-items: center; list-style: none; }
nav ul li { position: relative;}
nav ul li a { display: block; height: 15px; width: 115px; padding: 8px 0; text-align: center; font-size: 14px; text-decoration: none; color: #fff;  font-weight: bold; }
nav ul li:hover > a { color: #333333; background: url(../images/menu_hover.png) no-repeat top;    }

/* Dropdown list */
nav ul li ul { display: none; position: absolute; top: 100%; left: 0; background: #FD7E14;  flex-direction: column; min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   margin: 0;  padding: 0;   z-index: 999;    }
nav ul li:hover ul { display: flex;}
nav ul li ul li a { padding: 10px 15px; font-size: 14px; color: white;    }
nav ul li ul li a:hover {  color: #333333; background: url(../images/menu_hover.png) no-repeat top;    }
.current { color: #333333; background: url(../images/menu_hover.png) no-repeat top;}    
/* ------------------------- end of menu -------------------------  */

.btn-danger { background-color: #dc3545;    color: #fff;    padding: 10px 20px;    font-size: 18px;    border-radius: 4px;    border: none;}
.btn-lg { font-size: 20px; padding: 12px 24px;}
.btn-danger:hover {background-color: #c82333;}
.btn-lg:hover {font-size: 22px;}

.breadcrumb-wrap {margin-left: 40px;margin-top: 0px;margin-bottom: -10px;}
.breadcrumb-wrap > ul { list-style-type: none;  padding: 0; overflow: auto;}
.breadcrumb-wrap > ul > li { padding-left: 30px; position: relative; float: left; height: 28px; line-height: 28px; transition: all ease 0.2s; background-color: #f6f6f6;}
.breadcrumb-wrap > ul > li:not(:last-child) { padding-left: 25px;}
.breadcrumb-wrap > ul > li > a { color: #005882; display: block; position: relative;  text-align: center; padding: 0; text-decoration: none; transition: all ease 0.2s;}
.breadcrumb-wrap > ul > li.current, .breadcrumb-wrap > ul > li.current:after { background-color: #3b5998;}
.breadcrumb-wrap > ul > li.current > a { cursor: default; color: #fff;}
.breadcrumb-wrap > ul > li:after { content: "";  display: inline-block; width: 17px; height: 100%; background-color: #f6f6f6; border-top-right-radius: 15px;    border-bottom-right-radius: 15px;    position: absolute;    top: 0;    right: -20px; z-index: 110;    border-right: 3px solid #f6f6f6;    overflow: hidden;    transition: all ease 0.2s;}
.breadcrumb-wrap > ul > li > a > svg {    fill: #3b5998; vertical-align: middle; margin-right: 5px; margin-bottom: 4px; display: inline-block;}
.breadcrumb-wrap > ul > li:hover,.breadcrumb-wrap > ul > li:hover:after { background-color: #3b5998;}
.breadcrumb-wrap > ul > li:hover a { color: #fff;}
.breadcrumb-wrap > ul > li:hover > a > svg { fill: #fff;}

/* ------------------------- content ------------------------- */

.container{box-sizing: border-box;}
.sidebar { width: 28%;    padding: 10px;    float: left;    box-sizing: border-box;}
.content { width: 72%;    padding: 10px;    float: left;    box-sizing: border-box;}

.generat-btn { background-color: #fff; font-size: 16px; color: #000; padding: 8px 0px; width: 25%; float: left;    text-overflow: ellipsis;    overflow: hidden;    -webkit-line-clamp: 1;    display: block;    position: relative;    white-space: nowrap;    border-bottom: 1px solid #dddddd5e;    transition: 0.6s;}
.generat-btn:hover {    background-color: #3b5998;    color: #fff;}
.generat-btn i, ul > li > a > i { margin-left: 10px; margin-right: 10px; font-size: 16px;    color: #3b5998;    transition: 0.5s;} a.generat-btn {    text-decoration: none !important;}
.generat-btn:hover i { color: #fff;}

h2 {color: #3a5909; font-size: 20px; padding: 0 0 60px 20px; background: url(../images/header_bg.png) no-repeat bottom center;}
.text-center { text-align: center;}

#search-tools {   padding: 8px 12px;    border: 1px solid #d9534f6b;    width: 100%;}
#search-tools i { position: absolute;}
.search-box {   position: relative;}
.search-box i { position: absolute;    right: 15px;    color: #3b5998;    outline: 0;    font-size: 16px;    top: 8px;    transition: 0.3s;} input#search-tools:focus + .fa.fa-search {    color: #3b5998;}
.search-tools-wrap {    margin-left: 30px;    margin-top: 0px;    width: 80%;}
.search-tools-wrap > ul {    padding: 0;    border-top: 0;    max-height: 2000px;    overflow: auto;    display: -webkit-box;    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    flex-direction: column;    box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);}
.search-tools-wrap > ul > li:not(:last-child) {    border-bottom: 1px solid #e5e5e580;}
.search-tools-wrap > ul > li > a {    padding: 6px 10px;    display: inline-block;    font-size: 16px;    width: 100%;    line-height: 20px;    color: #000;    background-color: #fff;    position: relative;    transition: 0.5s;    text-decoration: none;}
.search-tools-wrap > ul > li > a > i {    margin-right: 10px;    font-weight: bold;    font-size: 20px;    color: #3b5998;   transition: 0.5s;}
.search-tools-wrap > ul > li.active > a > i {    color: #fff;}
.search-tools-wrap > ul > li > a:hover,li.cardsideber.active > a {    text-decoration: none;    color: #fff;    background-color: #284070;} li.cardsideber.active { order: -1;}
::-webkit-scrollbar {    width: 6px;    height: 5px;}
::-webkit-scrollbar-thumb {    background: #3b5998;}
::-webkit-scrollbar-thumb:hover {    background: #555;}

/* ------------------------- Main content -------------------------------*/

h1 {text-align: center;}
a { color: #337ab7; text-decoration: none;}

/* --------------- Circle Bar --------------- */

@keyframes progress {  0% { --percentage: 0; }  100% { --percentage: var(--value); }}
@property --percentage {  syntax: '<number>';  inherits: true;  initial-value: 0;}
.progress-wrap-circle {  display: flex;  flex-wrap: wrap;  justify-content: center;  gap: 30px;  padding: 40px;}
.progress-circle {  --percentage: 0;  --value: 70;  --primary: #f44336;  --secondary: #eee;  --size: 120px;
  width: var(--size);  aspect-ratio: 1;  border-radius: 50%;  position: relative;  display: grid;  place-items: center;
  animation: progress 3s ease-out forwards;}
.progress-circle::before {  content: "";  position: absolute;  inset: 0;
  background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
  mask: radial-gradient(white 55%, transparent 0);  -webkit-mask: radial-gradient(#0000 55%, #000 0);  border-radius: 50%;}

.progress-circle::after {  counter-reset: percentage var(--value);  content: counter(percentage) '%';  font: bold 18px sans-serif;  color: var(--primary);}
.label-circle {  text-align: center;  margin-top: 8px;  font-weight: 600;}

/* ---------------End of Circle Bar-------------- */

.timeline {  --col-gap: 6rem;  --row-gap: 6rem;  --line-w: 0.25rem;
  display: grid;  grid-template-columns: var(--line-w) 1fr;
  grid-auto-columns: max-content;  column-gap: var(--col-gap);  list-style: none;
  width: min(70rem, 90%);  margin-inline: auto;}

/* line */
.timeline::before {  content: "";  grid-column: 1;  grid-row: 1 / span 20;  background: rgb(225, 225, 225);  border-radius: calc(var(--line-w) / 2);}

/* row gaps */
.timeline li:not(:last-child) {  margin-bottom: var(--row-gap);}

/* card */
.timeline li {  grid-column: 2;  --inlineP: 1.5rem;
  margin-inline: var(--inlineP);  grid-row: span 2;  display: grid;
  grid-template-rows: min-content min-content min-content;}

/* date */
.timeline li .date {  --dateH: 3rem;
  height: var(--dateH);  margin-inline: calc(var(--inlineP) * -1);
  text-align: center;  background-color: var(--accent-color);
  color: white;  font-size: 1.25rem;  font-weight: 700;  display: grid;  place-content: center;
  position: relative;  border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);}

/* date flap */
.timeline li .date::before {  content: "";  width: var(--inlineP);  aspect-ratio: 1;
  background: var(--accent-color);  background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
  position: absolute;  top: 100%;  clip-path: polygon(0 0, 100% 0, 0 100%);  right: 0;}

/* circle */
.timeline li .date::after {  content: "";
  position: absolute;  width: 2rem;
  aspect-ratio: 1;  background: rgba(245, 245, 245);  border: 0.3rem solid var(--accent-color);
  border-radius: 50%;  top: 50%;  transform: translate(50%, -50%);  right: calc(100% + var(--col-gap) + var(--line-w) / 2);}

/* title and description */
.timeline li .title,
.timeline li .descr {  background: #fff;  position: relative;  padding-inline: 1.5rem;}
.timeline li .title {  overflow: hidden;  padding-block-start: 1.5rem;  padding-block-end: 1rem;  font-weight: 500;}
.timeline li .descr {  padding-block-end: 1.5rem;  font-weight: 300;}

/* shadows */
.timeline li .title::before,
.timeline li .descr::before {  content: "";  position: absolute;  width: 90%;  height: 0.5rem;  background: rgba(0, 0, 0, 0.5);  left: 50%;  border-radius: 50%;  filter: blur(4px);  transform: translate(-50%, 50%);}
.timeline li .title::before {  bottom: calc(100% + 0.125rem);}
.timeline li .descr::before {  z-index: -1;  bottom: 0.25rem;}

/* responsive layout */
@media (min-width: 40rem) {
  .timeline {    grid-template-columns: 1fr var(--line-w) 1fr;  }
  .timeline::before {    grid-column: 2;  }
  .timeline li:nth-child(odd) {    grid-column: 1;  }
  .timeline li:nth-child(even) {    grid-column: 3;  }
  .timeline li:nth-child(2) {    grid-row: 2 / 4;  }
  .timeline li:nth-child(odd) .date::before {    clip-path: polygon(0 0, 100% 0, 100% 100%);    left: 0;  }
  .timeline li:nth-child(odd) .date::after {    transform: translate(-50%, -50%);    left: calc(100% + var(--col-gap) + var(--line-w) / 2);  }
  .timeline li:nth-child(odd) .date {    border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;  }}

/* ---------------End of Timeline-------------- */


.App_card { width: 175px; height: 310px; display: inline-block; font-family: trebuchet ms;
        margin: 1px; text-align: center; box-shadow: 1px 2px 5px #ccc; border-radius: 10px; } 

.App_card img { width: 100%; height: 310px; border-radius: 10px; object-fit: cover; }
        
.App_zoom {transition: transform 1s;}
   .App_zoom:hover {-ms-transform: scale(1.20); 
         -webkit-transform: scale(1.20); transform: scale(1.20); }


/* end of content */

/* ------------------------- footer ------------------------- */

#footer { background-color: #333; color: white; text-align: center; padding: 30px 85px; clear: both;}
.footer-content { display: flex; justify-content: space-between; align-items: center;}
#footer hr { border: none; height: 1px; background-color: #7a7a7a; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);}
.footer-menu {  list-style-type: none;    padding: 0;    margin: 0;}
.footer-menu li { display: inline;    margin-right: 10px;}
.footer-menu li a {    text-decoration: none;    color: #7a7a7a;    font-weight: bold;}
.footer-menu li a:hover {    color: #007bff; /* Change color on hover */}
.copyright {color: #7a7a7a;}

#toTop { position: fixed; bottom: 20px; right: 5px; width: 30px; height: 30px; background-color: #3b5998; color: #fff;    text-align: center;    line-height: 30px;    cursor: pointer;    display: none; }
#toTop.show { display: block;}
#toTop i { font-size: 20px; text-align: center;  flex: 1;}

/* ------------------------- end of footer ------------------------- */

/* ------------------------- Media query for mobile devices ------------------------- */

@media (max-width: 768px) {
    header {flex-direction: column; text-align: center; }
    #menu { display: none;  flex-direction: column; align-items: center; gap: 10px; margin-top: 10px;}
    #menu-toggle { display: block; }
    #menu-toggle.clicked + #menu { display: flex; flex-direction: column; }
    .container,
    .sidebar,
    .content { width: 100%; }}
    
/* ------------------------- End of Mobile Devices ------------------------- */

/* ------------------------- Convertor ------------------------- */

.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 90px; margin-bottom: 30px; /* Gap between rows */}
.diagram-container {display: flex; align-items: center; }
.main-circle {width: 120px; height: 120px;
      background-color: #558b8f;      color: white;      border-radius: 50%;	  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
      display: flex;      justify-content: center;      align-items: center;      font-size: 16px;      font-weight: 600;
      text-align: center;      margin-right: 6px;  animation: popIn 0.6s ease-out forwards;    }

.lines-and-boxes {position: relative; }
.line { position: absolute; left: -6px; top: 50%; width: 40px; height: 2px; background-color: black; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);}
.boxes { display: flex; flex-direction: column; gap: 12px; margin-left: 40px; position: relative;}
.boxes::before { content: ""; position: absolute; left: -40px; top: 10px; bottom: 10px; width: 2px; background-color: black; }

.box { background-color: #b2dfdb;
      border: 2px solid #4db6ac;
      border-radius: 12px;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      padding: 12px 16px;
      min-width: 220px;
      font-size: 16px;
      position: relative;
      opacity: 0;
      transform: translateX(50px);
      animation: slideIn 0.5s forwards;
    }

.box::before {content: ""; position: absolute; left: -40px; top: 50%; width: 40px; height: 2px; background-color: black;    }
	
    @keyframes slideIn { to {opacity: 1; transform: translateX(0);}}
    @keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Box animation delays */
    .box.delay-1 { animation-delay: 0.5s; }
    .box.delay-2 { animation-delay: 1s; }
    .box.delay-3 { animation-delay: 1.5s; }
    .box.delay-4 { animation-delay: 2s; }
    .box.delay-5 { animation-delay: 2.5s; }
    .box.delay-6 { animation-delay: 3s; }
    .box.delay-7 { animation-delay: 3.5s; }
    .box.delay-8 { animation-delay: 4s; }
    .box.delay-9 { animation-delay: 4.5s; }


/* First column color */
.column:nth-child(1) .box:nth-child(1) { background-color: #fff8e1; }
.column:nth-child(1) .box:nth-child(2) { background-color: #ffecb3; }
.column:nth-child(1) .box:nth-child(3) { background-color: #ffe082; }
.column:nth-child(1) .box:nth-child(4) { background-color: #ffd54f; }
.column:nth-child(1) .box:nth-child(5) { background-color: #ffca28; }
.column:nth-child(1) .box:nth-child(6) { background-color: #ffc107; }
.column:nth-child(1) .box:nth-child(7) { background-color: #ffb300; }
.column:nth-child(1) .box:nth-child(8) { background-color: #ffa000; }
.column:nth-child(1) .box:nth-child(9) { background-color: #ff8f00; }

.column:nth-child(1) .box:hover {  background-color: #ffcc80; transform: translateX(0) scale(1.05);  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);}
.column:nth-child(1) .main-circle {  background-color: #f57f17; /* deep orange */}


/* Second column color */
.column:nth-child(2) .box:nth-child(1) { background-color: #ede7f6; }
.column:nth-child(2) .box:nth-child(2) { background-color: #d1c4e9; }
.column:nth-child(2) .box:nth-child(3) { background-color: #b39ddb; }
.column:nth-child(2) .box:nth-child(4) { background-color: #9575cd; }
.column:nth-child(2) .box:nth-child(5) { background-color: #7e57c2; }
.column:nth-child(2) .box:nth-child(6) { background-color: #673ab7; }
.column:nth-child(2) .box:nth-child(7) { background-color: #5e35b1; }
.column:nth-child(2) .box:nth-child(8) { background-color: #512da8; }
.column:nth-child(2) .box:nth-child(9) { background-color: #4527a0; }

.column:nth-child(2) .box:hover {  background-color: #d1c4e9; transform: translateX(0) scale(1.05);  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);}
.column:nth-child(2) .main-circle {  background-color: #7b1fa2; /* deep purple */}

/* Third column color */
.column:nth-child(3) .box:nth-child(1) { background-color: #e8f5e9; }
.column:nth-child(3) .box:nth-child(2) { background-color: #c8e6c9; }
.column:nth-child(3) .box:nth-child(3) { background-color: #a5d6a7; }
.column:nth-child(3) .box:nth-child(4) { background-color: #81c784; }
.column:nth-child(3) .box:nth-child(5) { background-color: #66bb6a; }
.column:nth-child(3) .box:nth-child(6) { background-color: #4caf50; }
.column:nth-child(3) .box:nth-child(7) { background-color: #43a047; }
.column:nth-child(3) .box:nth-child(8) { background-color: #388e3c; }
.column:nth-child(3) .box:nth-child(9) { background-color: #2e7d32; }

.column:nth-child(3) .box:hover {  background-color: #a5d6a7;transform: translateX(0) scale(1.05);  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);} 
.column:nth-child(3) .main-circle {  background-color: #2e7d32; /* dark green */}