.boldBody,.lightBody,.underground,strong{font-size:1.1em}.boldBody,b,strong{font-family:SansProBold,sans-serif}@font-face{font-family:SansPro;font-display:swap;src:url('https://d122f4822rob2u.cloudfront.net/fonts/SourceSansPro-Regular.ttf')}@font-face{font-family:SansProBold;font-display:swap;src:url('https://d122f4822rob2u.cloudfront.net/fonts/SourceSansPro-SemiBold.ttf')}@font-face{font-family:SansProLight;font-display:swap;src:url('https://d122f4822rob2u.cloudfront.net/fonts/SourceSansPro-ExtraLight.ttf')}@font-face{font-family:righteous;font-display:swap;src:url('https://d122f4822rob2u.cloudfront.net/fonts/Righteous-Regular.ttf')}@font-face{font-family:avenirBold;font-display:swap;src:url('https://d122f4822rob2u.cloudfront.net/fonts/Ubuntu-Medium.ttf')}.lightBody{font-family:SansProLight,sans-serif}.darkhover{-webkit-filter:brightness(100%);cursor:pointer}.darkhover:hover{-webkit-filter:brightness(80%);filter:brightness(80%);-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;-ms-transition:1s;transition:1s}.darkhover-selected{-webkit-filter:brightness(80%)}@media only screen and (max-width:500px){.save_menu{max-width:calc(100vw - 40px);overflow-x:auto}}@media only screen and (min-width:500px){.save_menu{max-width:400px;overflow-x:auto}}.underground{background-color:#191308;background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0)),url('images/index_background.svg');background-attachment:fixed;background-size:cover;height:100%;font-family:SansPro,sans-serif}.btn-primary.darkmenu.selected{border:2px solid #000;background-color:#e8c7de;color:#000}.btn-primary.darkmenu:hover{color:#000;background-color:#fff;border-color:#000}.btn-primary.darkmenu{background-color:#292b2c;border:1px solid grey}.btn-primary:focus,.btn-primary:hover{background-color:#1E40AF;}.selected,.selected1{background-color:#e5e4e4;border:3px solid #000}.btn-primary{color:#fff;background-color:#1D4ED8;border:1px solid #5256ba}.btn-primary:hover{border:1px solid black}.btn-primary:focus{border:1px solid black;}.btn-primary:disabled{background-color:#898989!important;border-color:#000;color:#fff}.btn-outline-light,.btn-outline-light:hover{border:1px solid #715bcc}.btn-outline-light:hover{background-color:#ebe8f8}.btn-outline-light:focus{color:#000!important}.font-primary{background-image:linear-gradient(to right,var(--tw-gradient-stops));color:transparent;background-clip:text;-webkit-background-clip:text;--tw-gradient-from:#9CACFF;--tw-gradient-to:rgb(214 173 255 / 0);--tw-gradient-stops:var(--tw-gradient-from),#D6ADFF,var(--tw-gradient-to);--tw-gradient-to:#D7B8FF}.font-primary-dark{color:#793ec7!important}.btn-primary.disabled{background-color:#585858!important;border:1px solid #000!important}.btn-primary.selected{background-color:#1E40AF;border-color:#000}footer{position:fixed;bottom:0;width:100%}.calculator_category,.navbar1{background:0 0}.curveborder{border-radius:10px}.fade-in-slow,.fade-in-slow2{-webkit-animation:.2s forwards fadein;animation:.2s forwards fadein;opacity:1}.fade-in-slow3,.fade-in-slow4{-webkit-animation:1s forwards fadein;animation:1s forwards fadein;opacity:1}@media only screen and (min-width:800px){.w400{font-weight:400;font-size:1.6em}}@media only screen and (max-width:800px){.w400{font-weight:400;font-size:1.2em}}.rotate{transition:.7s;-webkit-transition:.7s;-moz-transition:.7s;-ms-transition:.7s;-o-transition:.7s}.rotate-rotated{transition:.7s;-webkit-transition:.7s;-moz-transition:.7s;-ms-transition:.7s;-o-transition:.7s;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}.dropdown-menu{max-height:400px;overflow-y:auto}.bg-transparent{background-color:rgba(255,255,255,.1)!important}.fade_in_fast{-webkit-animation:.5s forwards fadein;animation:.5s forwards fadein;opacity:1}.fade_in_slow{-webkit-animation:2s forwards fadein;animation:2s forwards fadein;opacity:1}.primary_selected_discipline,.primary_selected_type,.primary_selected_type2{background-color:#e8c7de!important;color:#000!important}.menu_holder{visibility:hidden;position:fixed;top:70px;right:10px;z-index:5;width:150px;height:60px}.inline_menu{display:inline-block}.calculator_category:hover,.calculator_selected{background-color:#585c64}.index_title{font-family:avenirBold,sans-serif}.dropdown-menu-center{left:50%!important;right:auto!important;text-align:center!important;transform:translate(-50%,0)!important}.accordion-button-darkmode::after{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>")!important}.primary-darkmode{color:#b899e1;text-decoration:none}.primary-darkmode:hover{color:#e3d6f3;text-decoration:none}b{font-size:1em}.visually-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.text-grey{color:#d3d3d3}@media only screen and (min-width:1200px){.pt-10{padding-top:120px}}@media only screen and (max-width:1200px){.pt-10{padding-top:30px}}.fade-in-fast{-webkit-animation:.1s forwards fadein;animation:.1s forwards fadein;opacity:1}.dark_gradient{background:linear-gradient(#212529,70%,#141414)!important}.dark_gradient_inverse{background:linear-gradient(#141414,70%,#000)!important}.popover-header{color:#000}@keyframes fadein{0%,33%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadein{0%,33%{opacity:0}100%{opacity:1}}.canvas_align{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}.btn-outline-light.dimmed{border:#000;background-color:transparent}.btn-outline-light.dimmed:hover{background-color:#343a40;border:none;color:#fff!important}.btn-outline-light.dimmed.dropdown-toggle.show,.btn-outline-light.dimmed:active,.btn-outline-light.dimmed:focus{background-color:#343a40!important;border:none;color:#fff!important}.nav-link.show.btn{color:#fff!important}a{color:#793ec7}.bg_dark_gradient{background:#232525;background:linear-gradient(135deg,#232525 0,#272727 100%);border:1px solid #464646}.background1{background-color:#efefef;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ededed' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ebebeb' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23eaeaea' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23e8e8e8' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23E6E6E6' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23e2e2e2' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23dedede' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23d9d9d9' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23d5d5d5' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23D1D1D1' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");background-attachment:fixed;background-size:cover;height:100%}.light_gradient{background:linear-gradient(#828282,70%,#747474)!important}.light_gradient_inverse{background:linear-gradient(#747474,70%,#828282)!important}html{scroll-padding-top:90px;font-family:SansPro,sans-serif;font-size:1.1em}.font-primary-darker{background-image:linear-gradient(to right,var(--tw-gradient-stops));color:transparent;background-clip:text;-webkit-background-clip:text;--tw-gradient-from:#3556ff;--tw-gradient-to:rgb(214 173 255 / 0);--tw-gradient-stops:var(--tw-gradient-from),#a042ff,var(--tw-gradient-to);--tw-gradient-to:#994aff}

.marquee {
    --gap: 1rem;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
  }

  .text-primary {
    color: #1D4ED8 !important; /* mirror .btn-primary bg */
  }
  
  .marquee__content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    gap: var(--gap);
    animation: scroll 20s linear infinite; /* Apply animation */
  }

  .marquee__content2 {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    gap: var(--gap);
    animation: scroll 30s linear infinite; /* Apply animation */
  }

  .marquee__content img {
    width: 200px;
  }

  .marquee__content li{
    list-style: none;
  }

  .marquee__content2 img {
    width: 200px;
  }

  .marquee__content2 li{
    list-style: none;
  }

  @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }


.youtube {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (56.25% = 9/16 * 100) */
    height: 0;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.youtube2 {
  position: relative;
  padding-bottom: 65%; /* 16:9 aspect ratio (56.25% = 9/16 * 100) */
  height: 0;
}

.youtube2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767.98px) {
  .display-3 {
    font-size: calc(1.275rem + 3.3vw);
    font-weight: 300;
    line-height: 1.2;
  }
}

.btn-outline-dark:hover{
  background-color: #d6d7f2;
  color: black;
  border-color: black;
}

.laurel {
  display: table !important;
  position: relative;
  margin-bottom: 14px;
}

.laurel-text {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 10px;
  color: black;
  font-size: 13px;
  font-weight: bold;
  text-shadow: none;
}

.laurel-stars {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 27px;
}

.laurel-img {
  width: 170px;
}

.nav-link:hover{
  background-color: #eeefff !important; /* 50% transparent purple */
}

.navbar .nav-link.active {
  font-weight: normal !important; /* Prevent bold font on active link */
  background-color: #eeefff !important; /* 50% transparent purple */
}

.navbar .nav-item {
  font-weight: normal !important; /* Prevent bold font on active link */
}

.custom-underline {
  position: relative;
  display: inline-block;
}

.custom-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.1em; /* Adjust thickness to mimic marker width */
  transform: skewX(-15deg); /* Slant the underline */
  z-index: -1; /* Place it behind the text */
  border-radius: 5px; /* Adds a smoother edge */
  pointer-events: none; /* Ensure it doesn't interfere with clicks */
  background-image: linear-gradient(to right, #3556ff, #a042ff, #994aff); /* Your gradient colors */
}

.btn-primary.active{background-color:#1E40AF;border-color:#000}

/* Add these new styles */
#small-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

#small-marquee .marquee-content {
  display: inline-block;
  animation: marquee-scroll 20s linear infinite;
  padding-left: 100%;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Adjust badge spacing and appearance */
#small-marquee .badge {
  margin: 0 4px;
  white-space: nowrap;
}

/* Pause animation on hover */
#small-marquee:hover .marquee-content {
  animation-play-state: paused;
}

#bg_background {
    background-image: url('images/node-background.png');
    background-size: contain;      /* Fit image fully inside div */
    background-position: center;   /* Center the image */
    background-repeat: no-repeat;  /* Prevent tiling */

  }
  

  .check-list {
    list-style: none; /* Remove default bullets */
    margin: 0;
    padding: 0;
  }
  
  .check-list li {
    position: relative;
    margin-bottom: 0.5em;
    padding-left: 1.5em;      /* Space for the icon */
    line-height: 1.3;         /* Slightly increase line spacing */
  }
  
  /* Use Font Awesome’s “content” for the check icon */
  .check-list li::before {
    font-family: "Font Awesome 5 Free"; /* Adjust if you use another FA version/name */
    content: "\f00c";                  /* \f00c is the "check" icon */
    font-weight: 900;                  /* Solid icon weight (fa-solid) */
    color: #4CAF50;                    /* Green color—customize as needed */
    position: absolute;
    left: 0;
    top: 0;                            /* Align near the top of the line */
    font-size: 1.2em;                  /* Make the icon larger/bolder */
  }


/* HERO BACKGROUND */
#hero-image{
  position: relative;
  width: 100%;
  max-height: max(776px, 60vh);
  background-color: #ebebeb; /* or your site background; shows through the 50% image */
}

/* 50% transparent background image */
#hero-image::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("https://d122f4822rob2u.cloudfront.net/cad-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.08;              /* <-- 50% transparency */
  pointer-events: none;
}

/* Existing readability gradient stays on top of the image */
#hero-image::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Ensure inner content stays above both overlays */
#hero-image > *{ position: relative; z-index: 2; }

/* Spacing (unchanged) */
#hero-image.pt-10 { padding-top: 3rem !important; }
@media (min-width: 992px){
  #hero-image.pt-10 { padding-top: 4rem !important; }
}

/* Callout bubble */
.callout {
  position: fixed;              /* stays over the canvas */
  z-index: 9999;
  padding: .6rem .6rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: .5rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  font: 15px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* no wrap */
  white-space: nowrap;
  /* align text start */

  /* Key change: anchor the bubble’s BOTTOM-CENTER to (left, top) */
  transform: translate(-50%, -100%);

  /* dynamic vars set from JS */
  --stem: 0px;       /* height of the vertical line */
  --tip: 10px;       /* size of the arrow tip */
}

/* The vertical stem that stretches down from the bubble */
.callout::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;                             /* start at bubble bottom edge */
  transform: translateX(-50%);
  width: 2px;                            /* stem thickness */
  height: var(--stem);
  background: rgba(0,0,0,.22);           /* subtle */
  box-shadow: 0 0 1px rgba(0,0,0,.1);
  pointer-events: none;                  /* clicks go through */
}

/* Arrow tip at the end of the stem (a rotated square = crisp arrow) */
/* Arrow tip at the end of the stem */
.callout::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + var(--stem));         /* sits at the stem’s end */
  transform: translate(-50%, -1px) rotate(45deg);

  /* smaller size */
  width: 6px;   /* was var(--tip) ≈ 10px */
  height: 6px;

  /* solid red diamond */
  background: white;

  /* optional: remove borders/shadow for a clean shape */
  border: none;
  box-shadow: none;

  pointer-events: none;
}


/* Optional: when we need to flip the callout below the target */
.callout.flip {
  transform: translate(-50%, 0%);        /* anchor TOP-CENTER to (left, top) */
}
.callout.flip::before {
  top: auto;
  bottom: 100%;
}
.callout.flip::after {
  top: auto;
  bottom: calc(100% + var(--stem));
  transform: translate(-50%, 2px) rotate(225deg);
}

#compare-civils-chatgpt .py-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  #compare-civils-chatgpt .py-7 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }

  #compare-civils-chatgpt .bg-gradient-primary {
    background-image: linear-gradient(135deg, #6C63FF 0%, #B388FF 100%);
  }
  #compare-civils-chatgpt .bg-gradient-dark {
    background-image: linear-gradient(135deg, #111 0%, #444 100%);
  }
  #compare-civils-chatgpt .brand-dot {
    width: 36px; height: 36px; border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  }

  #compare-civils-chatgpt .table > :not(caption) > * > * {
    padding-top: .95rem; padding-bottom: .95rem;
  }

  #compare-civils-chatgpt .table-section td {
    background: rgba(0,0,0,.02);
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: 600;
  }
  #compare-civils-chatgpt .section-label::before{
    content: "";
    display: inline-block;
    width: .5rem; height: .5rem;
    background: #6c63ff; border-radius: 50%;
    margin-right: .5rem; vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(108,99,255,.15);
  }

  /* Subtle “soft” badges using Bootstrap vars where available */
  #compare-civils-chatgpt .bg-primary-subtle { background-color: rgba(13,110,253,.12) !important; color: #0d6efd !important; }
  #compare-civils-chatgpt .bg-success-subtle { background-color: rgba(25,135,84,.12) !important; color: #198754 !important; }
  #compare-civils-chatgpt .bg-secondary-subtle { background-color: rgba(108,117,125,.12) !important; color: #6c757d !important; }
  #compare-civils-chatgpt .bg-dark-subtle { background-color: rgba(33,37,41,.08) !important; color: #212529 !important; }
  #compare-civils-chatgpt .bg-body-tertiary { background-color: rgba(0,0,0,.03) !important; }

  
/* Customize Plyr theme colors */
:root {
  --plyr-color-main: #1E40AF; /* primary accent color */
}

/* Optional: fine-tune hover/active states for consistency */
.plyr--full-ui input[type=range]::-webkit-slider-thumb {
  background: #1E40AF;
}

.plyr--full-ui input[type=range]::-moz-range-thumb {
  background: #1E40AF;
}

.plyr__control.plyr__control--overlaid {
  background: rgba(30, 64, 175, 0.85);
}

.plyr__control:hover,
.plyr__control[aria-expanded="true"] {
  background: #1E40AF;
}