

   .farg1 { color: #613f75ff } /* banner */
    .farg1-bg { background-color: #613f75ff; color: white }
 
    .farg2 { color: #a7d5c8 }
    .farg2-bg { background-color: #a7d5c8; color: #333333 }
    
    .farg3 { color: #19535F }
    .farg3-bg { background-color: #19535F; color: white }
    
    .farg4 { color: #e3ebedff } /* top */
    .farg4-bg { background-color: #e3ebedff; color: black }
    
    .farg5 { color: #220c10ff } /* footer */
    .farg5-bg { background-color: #220c10ff; color: white }


    body { font-family:"Inter";
    		margin: 0;
  			padding-top: 4rem;}
    h1, h2, h3, h4, h5 { font-family:"Work sans";}
    
    .tryBtn { background-image: none; background: #ec6e93; color: white; font-weight:bold }
	.tryBtn:hover, tryBtn:active { background: #ca5e7d; color: white; font-weight:bold }
	
	a { font-weight: bold; color:white}
	
	.myheader .navbar-nav a.nav-link  { font-size: 14px; color:black;}
	
	.puff { font-size: 1.1em; line-height:2rem; }
	
	ul.bullets { list-style-type: circle; text-align: left }
	
	.tictaclogo { width:180px }
    @media (max-width: 577px) {
        	.tictaclogo { width:80px }
      }

 	.affsyst { font-family:"Inter"; font-size:1.2rem; }
	@media (max-width: 577px) {
	       .affsyst { font-size:18px; }
	      }
	      
 	.statement { font-family:"Inter"; font-size:1.2rem; }
	@media (max-width: 577px) {
	        .statement { font-size:16px; }
	      }
      
	.statementLogo { text-align: left; max-width:100% !important; }

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
	 margin-top: 1rem;
  	margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 2rem;
  z-index: 10;
}
	@media (max-width: 577px) {
	        .carousel-caption { left: 0; right:0 }
	      }
	      
/* Declare heights because of positioning of img element */
.carousel-item {
  height: 36rem;
}


/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 32px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
  }
}