.contactbar { background-color: #4d0079; }


.headkey {background-color: #4d0079; font-size: 20px; font-weight:bold; color: #fff; padding-left: 10px; padding-right: 1px; padding-top:2px; padding-bottom: 2px;}
.headkey:hover {background-color: #4d0079; font-size: 20px; font-weight:bold; color: #03fcf9; padding-left: 10px; padding-right: 1px; padding-top:2px; padding-bottom: 2px;}



/* ARTICLE NAVIGATION STARTS */
#articlebar { display: block; margin: auto; padding: 0px; width: auto;}
	
#articlebar ul.articlemenu { list-style: none outside none; margin: 10px 30px; padding: 0px;}
	
#articlebar ul.articlemenu li {border: 0px solid #ffffff; margin-bottom: 12px;}
	
#articlebar ul.articlemenu a 
{   background-color: #c5fcfc;
    border-left: 0px solid #0096ff;
	border-right: 3px solid #0096ff;
    border-top: 0px solid #0096ff;
    border-bottom: 3px solid #0096ff;
    border-radius: 20px;
    color: #0202db;
    display: block;
	font-size: 16px;
    font-weight: bold;
    height: auto;
    padding: 10px 10px 15px 20px;
    text-align: start;
    text-decoration: none;
    align-items:normal;}
    
	
* html body #articlebar ul.articlemenu a {height: 40px; text-indent: 15px;}
	
#articlebar ul.articlemenu a:hover 
{   background-color: #0202db;
	font-weight:bold;
    color: #ffffff;
    padding: 10px 10px 15px 20px;
	border-left: 0px solid #c5fcfc;
	border-right: 3px solid #c5fcfc;
    border-top: 0px solid #c5fcfc;
    border-bottom: 3px solid #c5fcfc;}
    
/* ARTICLE NAVIGATION ENDS */



/* CLASS NAVIGATION STARTS */
#cbar { display:block; margin: auto; padding: 0px; width: auto;}
	
#cbar ul.cmenu { list-style: none outside none; margin: 10px 10px; padding: 0px 0px;}
	
#cbar ul.cmenu li { border: 0px solid #ffffff; border-radius: 50px; margin-bottom: 15px;}
	
#cbar ul.cmenu a 
{   background-color: #c5fcfc;
    border-left: 10px solid #0096ff;
	border-right: 10px solid #0096ff;
    border-top: 0px solid #0096ff;
    border-bottom: 0px solid #0096ff;
    border-radius: 30px 5px 30px 5px;
    color: #0202db;
    display: block;
	font-size: 18px;
    font-weight: bold;
    height: auto;
    padding: 10px 10px 15px 10px;
    text-align: center;
    text-decoration: none;
    align-items:normal;}
   	
* html body #cbar ul.cmenu a { height: 40px; text-indent: 15px;}
	
#cbar ul.cmenu a:hover 
{   background-color: #0202db;
	font-weight:bold;
    color: #ffffff;
    padding: 10px 10px 15px 10px;
	border-left: 10px solid #f0ffff;
	border-right: 10px solid #f0ffff;
    border-top: 0px solid #f0ffff;
	border-bottom: 0px solid #f0ffff;}
/* CLASS NAVIGATION ENDS */
   


/* CONTENT TEXT */
.ctext {font-size: 17px; color: #3a3a3a; padding-left:18px; padding-right:18px; line-height:27px; text-align:left; margin-bottom:14px; letter-spacing:0.1px;}
.cbtext {font-size: 16px; color: #333333; font-weight:bold; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}

.ctext-r {font-size: 18px; color: #ff0000; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}
.ctext-g {font-size: 18px; color: #009900; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}
.ctext-b {font-size: 18px; color: #1111ff; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}
.ctext-m {font-size: 18px; color: #e400e4; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}
.ctext-v {font-size: 18px; color: #7900ac; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}
.ctext-c {font-size: 18px; color: #ae3900; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}

.cbtext-r {font-size: 17px; color: #ff0000; font-weight:bold; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}
.cbtext-g {font-size: 17px; color: #009900; font-weight:bold; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}
.cbtext-b {font-size: 17px; color: #1111ff; font-weight:bold; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}
.cbtext-m {font-size: 17px; color: #e400e4; font-weight:bold; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}
.cbtext-v {font-size: 17px; color: #7900ac; font-weight:bold; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}
.cbtext-c {font-size: 17px; color: #ae3900; font-weight:bold; padding-left:12px; padding-right:1px; line-height:20px; text-align:justify;}


/* SPAN TEXT */
.stext {font-size: 16px; color: #333333; line-height:20px; text-align:justify;}
.sbtext {font-size: 16px; color: #333333; font-weight:bold; line-height:23px; text-align:justify;}

.stext-r {font-size: 16px; color: #ff0000; line-height:20px; text-align:justify;}
.stext-g {font-size: 16px; color: #009900; line-height:20px; text-align:justify;}
.stext-b {font-size: 16px; color: #1111ff; line-height:20px; text-align:justify;}
.stext-m {font-size: 16px; color: #e400e4; line-height:20px; text-align:justify;}
.stext-v {font-size: 16px; color: #7900ac; line-height:20px; text-align:justify;}
.stext-c {font-size: 16px; color: #ae3900; line-height:20px; text-align:justify;}

.sbtext-r {font-size: 18px; color: #ff0000; font-weight:bold; line-height:23px; text-align:justify;}
.sbtext-g {font-size: 18px; color: #009900; font-weight:bold; line-height:23px; text-align:justify;}
.sbtext-b {font-size: 18px; color: #1111ff; font-weight:bold; line-height:23px; text-align:justify;}
.sbtext-m {font-size: 18px; color: #e400e4; font-weight:bold; line-height:23px; text-align:justify;}
.sbtext-v {font-size: 18px; color: #7900ac; font-weight:bold; line-height:23px; text-align:justify;}
.sbtext-c {font-size: 18px; color: #ae3900; font-weight:bold; line-height:23px; text-align:justify;}


/* HEAD TEXT */
.htext {font-size: 23x; color: #333333; line-height:23px; text-align:justify;}
.shtext {font-size: 23px; color: #333333; font-weight:bold; line-height:23px; text-align:justify;}

.htext-r1 {font-size: 27px; color: #ff0000; font-weight:bold; line-height:40px; text-align:justify;}
.htext-r2 {font-size: 25px; color: #ff0000; font-weight:bold; line-height:37px; text-align:justify;}
.htext-r3 {font-size: 23px; color: #ff0000; font-weight:bold; line-height:35px; text-align:justify;}
.htext-r4 {font-size: 21px; color: #ff0000; font-weight:bold; line-height:22px; text-align:justify;}
.htext-r5 {font-size: 19px; color: #ff0000; font-weight:bold; line-height:30px; text-align:justify;}
.htext-r6 {font-size: 17px; color: #ff0000; font-weight:bold; line-height:27px; text-align:justify;}

.htext-g1 {font-size: 27px; color: #009900; font-weight:bold; line-height:40px; text-align:justify;}
.htext-g2 {font-size: 25px; color: #009900; font-weight:bold; line-height:37px; text-align:justify;}
.htext-g3 {font-size: 23px; color: #009900; font-weight:bold; line-height:35px; text-align:justify;}
.htext-g4 {font-size: 21px; color: #009900; font-weight:bold; line-height:32px; text-align:justify;}
.htext-g5 {font-size: 19px; color: #009900; font-weight:bold; line-height:30px; text-align:justify;}
.htext-g6 {font-size: 17px; color: #009900; font-weight:bold; line-height:27px; text-align:justify;}

.htext-b1 {font-size: 27px; color: #4040fd; font-weight:bold; line-height:40px; text-align:justify;}
.htext-b2 {font-size: 25px; color: #4040fd; font-weight:bold; line-height:37px; text-align:justify;}
.htext-b3 {font-size: 23px; color: #4040fd; font-weight:bold; line-height:39px; text-align:justify;}
.htext-b4 {font-size: 21px; color: #4040fd; font-weight:bold; line-height:32px; text-align:justify;}
.htext-b5 {font-size: 19px; color: #4040fd; font-weight:bold; line-height:30px; text-align:justify;}
.htext-b6 {font-size: 17px; color: #4040fd; font-weight:bold; line-height:27px; text-align:justify;}

.htext-m1 {font-size: 27px; color: #e400e4; font-weight:bold; line-height:40px; text-align:justify;}
.htext-m2 {font-size: 25px; color: #e400e4; font-weight:bold; line-height:37px; text-align:justify;}
.htext-m3 {font-size: 23px; color: #e400e4; font-weight:bold; line-height:35px; text-align:justify;}
.htext-m4 {font-size: 21px; color: #e400e4; font-weight:bold; line-height:32px; text-align:justify;}
.htext-m5 {font-size: 19px; color: #e400e4; font-weight:bold; line-height:30px; text-align:justify;}
.htext-m6 {font-size: 17px; color: #e400e4; font-weight:bold; line-height:27px; text-align:justify;}

.htext-v1 {font-size: 27px; color: #7900ac; font-weight:bold; line-height:40px; text-align:justify;}
.htext-v2 {font-size: 25px; color: #7900ac; font-weight:bold; line-height:37px; text-align:justify;}
.htext-v3 {font-size: 23px; color: #7900ac; font-weight:bold; line-height:35px; text-align:justify;}
.htext-v4 {font-size: 21px; color: #7900ac; font-weight:bold; line-height:32px; text-align:justify;}
.htext-v5 {font-size: 19px; color: #7900ac; font-weight:bold; line-height:30px; text-align:justify;}
.htext-v6 {font-size: 17px; color: #7900ac; font-weight:bold; line-height:27px; text-align:justify;}

.htext-c1 {font-size: 27px; color: #ae3900; font-weight:bold; line-height:40px; text-align:justify;}
.htext-c2 {font-size: 25px; color: #ae3900; font-weight:bold; line-height:37px; text-align:justify;}
.htext-c3 {font-size: 23px; color: #ae3900; font-weight:bold; line-height:35px; text-align:justify;}
.htext-c4 {font-size: 21px; color: #ae3900; font-weight:bold; line-height:32px; text-align:justify;}
.htext-c5 {font-size: 19px; color: #ae3900; font-weight:bold; line-height:30px; text-align:justify;}
.htext-c6 {font-size: 17px; color: #ae3900; font-weight:bold; line-height:27px; text-align:justify;}



.secondgen {width: 400px; height: 250px; background-color:#fff; border-radius: 15px; box-shadow: snow 5px; transition: 0.5s;}
.secondgen:hover {transform:translateY(10px)}


.accordion-item { color: #333333; background-color:#fff; font-size: 17px; font-weight:inherit; line-height: 22px; margin-block: 10px; border: #0989f1 3px solid;}


.accordion-button
{   background-color: #0989f1 !important;
    color: #fff !important;
    position: relative;
    box-shadow: none !important; font-size: 17px; font-weight: bold; }


.accordion-button:hover{ background: #0434af !important; }

.accordion-button:focus{ background: #0434af !important; }




.card-box {
    background-color: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    width: 300px;
    height: 350px;
    box-shadow: 4px 4px 12px #e5e5e7;
}

.card-image {
    border-radius: 30px;
    padding: 15px;
    margin-top: 5px;

}

.card-content {
    margin-left: 10px;
}

.card-head {
    text-align: center;
    color: #0202db;
    font-size: 24px;
}

.card-line {
    line-height: 21px;
    color: #333333;    
    font-size: 16px;
}




.bttn { 
    text-align: center;
    background-color: #017de6;
    color: #fff;
    font-weight: 500;
    font-size: 19px;
    padding: 7px 15px;
    border-radius: 10px;
    text-decoration: none;
}

.click-margin { margin: 20px;}






/* ============================================
   ARTICLE PAGE ADDITIONS
   Replace the previous art- section entirely
   with this updated version in ownstyle.css
   ============================================ */

/* QUOTE BLOCK */
.art-quote {
  background-color: #fdf6f0;
  border-left: 5px solid #7900ac;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 17px;
  font-style: italic;
  color: #3a3a3a;
  line-height: 28px;
}

/* SUBHEADING - smaller than H1 title */
.art-subhead {
  font-size: 19px;
  color: #7900ac;
  font-weight: bold;
  line-height: 28px;
  margin-top: 28px;
  margin-bottom: 10px;
  padding-left: 18px;
  padding-right: 18px;
  text-align: left;
}

/* QUALITIES BOX */
.art-qualities-box {
  background-color: #f4f4f4;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  padding: 16px 18px;
  margin: 16px 0;
}

/* QUALITIES TITLE - green color to differentiate from purple headings */
.art-qualities-title {
  font-size: 17px;
  font-weight: bold;
  color: #007700;
  margin-bottom: 10px;
}

/* QUALITIES LIST */
.art-qualities-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.art-qualities-list li {
  font-size: 17px;
  color: #333333;
  padding: 6px 0 6px 26px;
  position: relative;
  border-bottom: 1px solid #e5e5e5;
  line-height: 24px;
  text-align: left;
}

.art-qualities-list li:last-child {
  border-bottom: none;
}

.art-qualities-list li::before {
  content: "\2714";
  position: absolute;
  left: 0;
  color: #007700;
  font-weight: bold;
  font-size: 15px;
}

/* CASE STUDY BOX - light blue to differentiate from qualities box */
.art-case-box {
  background-color: #f0f7ff;
  border: 1px solid #c8dff5;
  border-radius: 6px;
  padding: 18px 20px;
  margin: 20px 0;
}

/* CASE STUDY TITLE - blue color */
.art-case-title {
  font-size: 17px;
  font-weight: bold;
  color: #0055aa;
  margin-bottom: 14px;
}

/* CTA BOX */
.art-cta-box {
  background: linear-gradient(135deg, #4d0079 0%, #2d0a52 100%);
  padding: 30px 24px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(77,0,121,0.3);
}

.art-cta-text {
  color: #ffffff;
  font-size: 17px;
  line-height: 27px;
  margin-bottom: 14px;
  font-family: 'PT Serif', serif;
}

.art-cta-btn {
  display: inline-block;
  background: linear-gradient(90deg, #c8940c, #e6b93a);
  color: #2d0a52;
  font-weight: 800;
  font-size: 17px;
  padding: 13px 34px;
  border-radius: 50px;
  text-decoration: none;
  margin-top: 10px;
  box-shadow: 0 6px 16px rgba(200,148,12,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.art-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(200,148,12,0.5);
  color: #2d0a52;
}

/* PREMIUM H1 BADGE — golden pill, not full-width */
.art-h1-wrap {
  text-align: center;
  padding: 20px 18px 8px 18px;
}

.art-h1-banner {
  display: inline-block;
  max-width: 100%;
  padding: 12px 22px;
  background: linear-gradient(90deg, #c8940c, #e6b93a);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(200,148,12,0.35);
}

.art-h1-title {
  color: #2d0a52;
  font-family: 'PT Serif', serif;
  font-weight: 700;
  font-size: 0.68rem;
  white-space: nowrap;
  margin: 0;
  letter-spacing: 0;
  line-height: 1.3;
}

@media (min-width: 341px) {
  .art-h1-title {
    font-size: 0.8rem;
  }
}

@media (min-width: 381px) {
  .art-h1-title {
    font-size: 0.95rem;
  }
}

@media (min-width: 481px) {
  .art-h1-title {
    font-size: 1.15rem;
  }
}

@media (min-width: 768px) {
  .art-h1-title {
    font-size: 1.4rem;
  }
}

@media (min-width: 992px) {
  .art-h1-title {
    font-size: 1.65rem;
  }
}

/* INTERNAL LINKS BOX */
.art-links-box {
  background-color: #f0f0f0;
  border-left: 5px solid #7900ac;
  border-radius: 6px;
  padding: 16px 20px;
  margin: 20px 0;
}

.art-link {
  color: #7900ac;
  font-weight: bold;
  text-decoration: none;
}

.art-link:hover {
  color: #4d0079;
  text-decoration: underline;
}

/* H1 SIZE MODIFIER — for shorter titles that need a bigger badge (page-specific, additive class) */
.art-h1-title-lg {
  font-size: 1rem;
  white-space: normal;
}

@media (min-width: 341px) {
  .art-h1-title-lg { font-size: 1.15rem; }
}

@media (min-width: 381px) {
  .art-h1-title-lg { font-size: 1.35rem; }
}

@media (min-width: 481px) {
  .art-h1-title-lg { font-size: 1.6rem; }
}

@media (min-width: 768px) {
  .art-h1-title-lg { font-size: 2rem; }
}

@media (min-width: 992px) {
  .art-h1-title-lg { font-size: 2.3rem; }
}

/* H1 SUBTITLE — separate clean line below the golden badge, not part of it */
.art-h1-subtitle {
  display: block;
  text-align: center;
  color: #7900ac;
  font-family: 'PT Serif', serif;
  font-weight: 700;
  margin-top: 14px;
  padding: 0 18px;
  font-size: 0.85rem;
  line-height: 1.4;
}

@media (min-width: 341px) {
  .art-h1-subtitle { font-size: 0.95rem; }
}

@media (min-width: 381px) {
  .art-h1-subtitle { font-size: 1.05rem; }
}

@media (min-width: 481px) {
  .art-h1-subtitle { font-size: 1.15rem; }
}

@media (min-width: 768px) {
  .art-h1-subtitle { font-size: 1.3rem; }
}

@media (min-width: 992px) {
  .art-h1-subtitle { font-size: 1.45rem; }
}