@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background: white;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.4;
}

.container {
  width: auto !important; /* */
  max-width: 1100px;  /* or whatever upper limit you want */
  min-width: 360px;   /* prevents layout from collapsing too much */
  margin: 0 auto;     /* centers the container */

  padding-left: clamp(1rem, 5vw, 10rem);
  padding-right: clamp(1rem, 5vw, 10rem);
  padding-top: 0;
  padding-bottom: 1rem;
}
.container-menu {
  padding: 0 0.25rem !important;
}

.gradient-bg {
	background-image: url(images/background_grad.png);
	background-repeat: no-repeat; 
	height: 92px;
	text-indent: 0px;
  background-size: 100% 100%;
  text-align: center;
}

.indented {
	margin-left: 1.5rem;
}

.php-form h2 {
	margin-bottom: 0;
}
.php-form table, .php-form table td, .php-form table p {
	line-height: 1.3;
	font-size: 0.9rem;
	padding: 0.25rem;
	margin: 0;
}

#logo {
	float: right;
	padding:  0;
	height: 72px;
}

.top-lines-text-container {
	padding-left: clamp(0px, (100vw - 600px) * 0.72, 142px);
}

#codoncode {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;	/* Fixed! */
	font-weight: bold;
	padding-top: 8px;
	padding-bottom: 6px;
}

#better_software {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px; /* Fixed! */
	font-style: italic;
	margin-left: 2px;
}

/* Changes for narrow screens and windows */
@media (max-width: 600px) {
	#codoncode { 
		font-size: 28px;	
		padding-top: 9px;
	}
	#better_software { 
		font-size: 19px; 
	} 
}
@media (max-width: 540px) {
	#codoncode { 
		font-size: 24px;	
		padding-top: 12px;
	}
	#better_software { font-size: 17px; }
}
@media (max-width: 449px) {
	#codoncode { 
		text-align: left;
		font-size: 20px;	
	}
	#better_software { 
		text-align: left;
		font-size: 14px; 
	}
}
@media (max-width: 399px) {
	#codoncode { font-size: 16px; }
}
@media (max-width: 359px) {
	#codoncode { padding-top: 4px; }
}

#screenshot {
	float: right;
	padding: 10px;
}

.nounder a:link, .nounder a:visited {
	color: #002;
	text-decoration: none;
}

.nounder a:hover, .nounder a:active {
	color: #00D;
	text-decoration: underline;
}


.intextlink {
	color: #080899;
	text-decoration: none;
}
.intextlink:hover, .intextlink:active {
	color: #0000ff;
	text-decoration: underline;
}


/*** Top section  ***/
.intro-vertical {
  /* max-width: 750px; */
  margin: 2rem auto;
  text-align: center;
  padding: 0 0.5rem;
}

.intro-vertical h1 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: #222;
  line-height: 1.3;
  text-align: center;
}

.intro-blurb, .intro-blurb p {
  font-size: 1.125rem !important;
  color: #444;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.intro-blurb-left {
  text-align: center;
}

.intro-media img,
.intro-media video {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1rem auto;
  display: block;
}

/*** PDF display ***/
.pdf_div {
	position: relative; 
	padding-bottom: 75%; 
	height: 0; 
	overflow: hidden;
}
.pdf_iframe {
	position: absolute; 
	top: 0; left: 0; 
	width: 100%; 
	height: 100%; 
	border: none;
}
.pdf_bottom_line {
	text-align: center; margin: 2rem;
}


/*** Tab navigation style ***/
.tab-nav {
  display: flex;
  flex-wrap: wrap;           /* Allows wrapping on narrow screens */
  justify-content: center;
  gap: 1.3rem;               /* Always shows a gap between tabs */
  padding: 1rem 0;
  border-top: 1px solid #ccc;
  font-family: sans-serif;
  /* background-color: #f0f0f0; /* Light gray background */
}

.tab-nav .tab {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: #111111;
  font-weight: 600;         /* Bolder */
  font-size: 0.95rem;      
  transition: color 0.2s ease;
  white-space: nowrap;
}

.tab-nav .tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 105%;               /* Slightly wider than text */
  height: 3px;
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

.tab-nav .tab:hover {
  color: #0066cc;
}

.tab-nav .tab:hover::after {
  background-color: #0066cc;
}

@media (max-width: 600px) {
  .tab-nav {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .tab-nav .tab {
    font-size: 1.1rem;
  }
}


/*** Detail section style ***/
.feature-section {
  /* max-width: 750px; */
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: sans-serif;
}

.feature-section h2 {
  font-size: 1.5rem;
  color: #222;
  margin-bottom: 1rem;
  line-height: 1.3;
  text-align: left; /* Change to center if you prefer */
}
.subsection h3 {
  font-size: 1.25rem;       /* Slightly smaller than H2 */
  font-weight: 600;
  color: #222;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  text-align: left;         /* Change to center if needed */
}
.subsection-image {
  position: relative; /* Required for positioning the overlay */
  max-width: 100%;
  padding: 0.5rem; /* or use 8px if you prefer */
  box-sizing: border-box;
}
.subsection-image img {
  max-width: 90%;
  width: auto;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px; /* optional */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* soft shadow */
  }

.detail-link {
  text-decoration: none !important;
  font-weight: normal !important;
  color: #0066cc !important; /* Or another softer link color */
  font-size: 1rem;
  display: inline-block;
  margin-top: 0.5rem;
}


.detail-link:hover {
  color: #004a99 !important; /* Darker on hover, but still subtle */
  text-decoration: underline !important;
}

.detail-link::after {
  content: " >";
}


/* Responsive 2-column layout using equal-width columns */
.responsive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* default: 2 columns */
  gap: 20px;
}

@media (max-width: 700px) {
  .responsive-grid {
    grid-template-columns: 1fr;  /* mobile: 1 column */
  }
}

.cell {
  background-color: #f9f9f9;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: left; 
  align-items: start;
  font-size: 1rem; /* ~16px */
  line-height: 1.3;
}

.cell ul, li {
  font-size: 1rem; /* ~16px */
}

.cell ul ul {
  margin-left: 0.5em;
  list-style-type: circle;
  font-size: 1rem; /* ~16px */
}


/* Responsive 2-column layouts for showing images next to text; see new30.htm */
.flex2col {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 2px clamp(10px, 2vw,30px);
  margin-top: 2rem;
  margin-bottom: 2rem;
  grid-template-rows: auto 1fr;
}

.flex2col-img-left {
	grid-template-areas: 
		"fl2image fl2header"
		"fl2image fl2text";
}

.flex2col-img-right {
	grid-template-areas: 
		"fl2header fl2image"
		"fl2text fl2image";
}

.flex2col-33 {  grid-template-columns: 1fr 2fr; }
.flex2col-40 {  grid-template-columns: 2fr 3fr; }
.flex2col-60 {  grid-template-columns: 3fr 2fr; }
.flex2col-67 {  grid-template-columns: 2fr 1fr; }


.flex2col-header {
	grid-area: fl2header;
}
.flex2col-header h2 {
	margin: 0.25rem;
}
.flex2col-text {
	grid-area: fl2text;
}

.flex2col-image {
	grid-area: fl2image;
	align-self: center;
/* 	padding-top: 0.5rem; */
}

/* mobile: 1 column */
@media (max-width: 700px) {
  .flex2col, .flex2col-33, .flex2col-40, .flex2col-60, .flex2col-67 {
    grid-template-columns: 1fr;  
  }
	.flex2col-img-right, .flex2col-img-left {
		grid-template-areas: 
			"fl2header"
			"fl2image"
			"fl2text";
	}
}


/* Generic responsive flex container, see microbial-biotechnology.htm */
.flex-container {
	display: flex; 
	flex-wrap: wrap;
}
.flex-column {
	flex: 1 1 300px; 
	min-width: 200px;
	box-sizing: border-box;
	padding: 5px;
}

  /*Two column layout with light gray background where each column contains an image and text side by side*/
  .two-col-image-and-text-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
  }

  .two-col-image-and-text {
    flex: 1 1 45%; /* 2 columns side by side */
    min-width: 450px;
  }
  
  .two-col-text-content h3 {
    margin: 0 0 0.5em 0;
  }
  
  .two-col-text-content {
    display: flex;
    flex-direction: column;
  }

  .two-col-image-and-text-content-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }

  .two-col-image-and-text-content-row img {
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px; /* round the image */
  }

  /* Responsive behavior */
  @media (max-width: 850px) {
    .two-col-image-and-text-layout {
      flex-direction: column;
    }

    .two-col-image-and-text-content-row {
      flex-direction: row;
    }
  }


  /*Responsive three column layout with light gray background where each column contains an icon (48x48px), a header and a short description underneath each other*/
.icon-3col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  margin-top: 40px;
}

.icon-3col-item {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.icon-3col-item img {
  width:100%; 
  height:auto; 
  min-width:48px;
  max-width:48px;
}

.icon-3col-item h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.icon-3col-item p {
  font-size: 0.95rem;
  color: #555;
}



/*  Overlay images style */
.image-float2-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
}

.left-img80 {
  width: 80% !important;
  height: auto;
  display: block;
}

.right-img60 {
  position: absolute;
  top: 20%;
  right: 0;
  width: auto !important;
  height: 60% !important;
}

.right-img80 {
  position: absolute;
  top: 10%;
  right: 0;
  width: auto !important;
  height: 80% !important;
}


/* Call to action button, e.g. "Free Trial" */
.cta-button, .cta-button a {
  background-color: #000088; 
  color: white !important;
  padding: 12px 40px;
  font-size: 16px;
  border: none;
  border-radius: 999px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  text-decoration: none !important;       /* no underline by default */
  display: inline-block;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, text-decoration 0.2s;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 30px; /*  vertical space before image */
}

.cta-button:hover {
  background-color: #0000CC;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35); /* slightly stronger on hover */ 
  text-decoration: underline !important;  /* underline on hover */
}

.price-button {
  background-color: #EEE; 
  color: #222 !important;
}

.price-button:hover {
  background-color: #DDF; 
}


/* Containers for CTA buttons at top and bottom */
#bottomlinks .cta-button,
#bottomlinks .price-button {
	margin-top: 20px;
	margin-bottom: 20px;
}

.trial-footer {
	margin: 0 auto;     /* centers the container */
	padding: 0;
}

.trial-footer p {
	padding-top: 22px;
	padding-bottom: 10px !important;
	margin-bottom: 6px !important;
}

.trial-footer-double-font {
	font-size:2em;
}

.showcase_testimonial {
	background-color:#DDD;
	border-color:#000;
	border-width:thin;
	border-style:outset;
	text-align:center;
	width:clamp(300px, 80%, 400px);
	padding: 0.3rem;
	margin:0 auto;
}
.showcase_testimonial_bottom {
	text-align:center;
	font-size:smaller;
	width: 300px;
	margin: 0.25rem auto;
}

/* details and summary are used for collapsible items (e.g. the FAQ section) */
details {
  font-size: 1rem;
  list-style-position: outside;
  margin: 6px 4px 4px 6px; /* t, r, b, l */
  border-bottom: 1px solid #aaa;
}

details > summary {
  font-weight: bold;
  padding: 0.5em 0.5em 0.5em 0.5em;
}

details > p {
  padding: 0em 0.5em 0.5em 0.5em;
}

details > summary:hover {
  box-shadow: 0.3em 0.3em 0.4em #999;
}

details > summary:focus {
  outline: dotted thin;
}

details[open] summary {
	box-shadow: 0.3em 0.3em 0.4em #999;
}

/* Tutorial videos */
.video-container {
  max-width: 1280px !important;	/* Allow videos wider than the 1100px width */
  margin: 0 auto;
  padding: 1rem !important;
}

.video-container video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1.6;
}


.video-container  h1 {
	/* font-size: clamp(1.25rem, 4vw, 2.5rem); */
	text-align: center;
}
/* Captions (subtitles) */
video::cue {
  color: white;
  background: rgba(55, 55, 55, 0.8);
  font-size: clamp(0.9rem, 2.5vw, 2rem);
}

.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* Internal navigation links (near top of page) */
.internal-nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.internal-nav li {
  margin: 0.3em 0;
}

.internal-nav a {
  text-decoration: none;
  color: #005fa3;
  font-weight: 500;
  transition: all 0.2s ease;
}

.internal-nav a:hover {
  color: #003d73;
  border-bottom: 1px solid #003d73;
  padding-bottom: 1px;
  text-decoration: none;
  cursor: pointer;
}

/* Learning center links at bottom */
.lc-bnav h2,  .lc-bnav h3 {
	margin-bottom: 0.5rem;
}
.lc-bnav p {
	margin: 0.5rem 0;
}
.lc-bnav div {
	margin-top: 1.25rem;
}

.tutorial-data-box {
    background-color: #e6f7ff; /* Light blue background */
    border: 1px solid #91d5ff; /* Slightly darker blue border */
    border-left: 5px solid #1890ff; /* Prominent blue left border */
    padding: 15px;
    margin-bottom: 20px;
}

.tutorial-data-box h4 {
    color: #1890ff; /* Blue for the heading */
    margin-top: 0;
    margin-bottom: 10px;
}

.tutorial-data-box p {
    margin-bottom: 0;
    line-height: 1.5;
}

.tutorial-data-box a {
    color: #1890ff; /* Blue for links */
    text-decoration: none;
    font-weight: bold;
}

.tutorial-data-box a:hover {
    text-decoration: underline;
}

.tutorial-data-box code {
    background-color: #f0f8ff; /* Very light blue for code snippets */
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
}