/*
 ----------------------------- 
 PVII Typecrafters
 by Project Seven Development
 www.projectseven.com
 -----------------------------
*/

* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
body {
	display: flex;
	flex-direction: column;
	font-size: 100%;
	font-family: 'Lato', sans-serif;
	/*font-family: 'Open Sans', sans-serif;*/
	/*font-family: Raleway, Verdana, Geneva, sans-serif*/
	/*font-family:Arial, Helvetica, sans-serif;*/
	/*background-image: url(img/logo.png);*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: rgba(255,255,255,0.95);
}
/*
********************************************************
       BACKGROUND IMAGE FOR SMALL PHONES
	   Turn off fixed and make smaller
********************************************************
*/
@media only screen and (min-width: 0px) and (max-width: 768px) {
	body {background-attachment: scroll; background-size: 50%;}
}

p strong {
	font-size: 112%;
	font-family: Arial, Helvetica, sans-serif;
}
code {
	font-family: "Courier New", Courier, monospace;
}
h1, h2, h3, h4, .dropcap {
	/*font-family: Lato, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	font-family: 'Red Rose', sans-serif;
	/*font-family: 'Red Rose', cursive;*/
	/*font-family: open sans v16 latin regular, Verdana, Geneva, sans-serif;*/
	/*font-family: Buda, Verdana, Geneva, sans-serif*/
	
}

/*AMM Menu Exception Rules*/
.p7AMM.root-hover-mint ul a:hover,
.p7AMM.root-hover-mint ul a:focus,
.p7AMM.root-hover-mint ul a.amm-trigger.open {
	background-color: rgb(76,182,159);
	color: #FFF;
}
.p7HMY .hmy-section .p7AMM li a,
.p7HMY .hmy-section .p7AMM.amm-responsive .amm-toolbar a {
	transition: all linear .2s;
}
.amm-fixed {
	padding: 10px 10px 0px 10px;
	background-color: rgb(34,34,34);
	border-bottom: 1px solid rgba(0,0,0,1.0);
	background: linear-gradient(90deg, rgba(34,34,34,1) 50%, rgba(34,34,34,0.85));
}

.hmy-content-wrapper.logo .hmy-content {
	padding: 20px 0px 0px 0px;
	font-size: 200%;
}
.hmy-content-wrapper.nav .hmy-content,
.hmy-content-wrapper.extra .hmy-content {
	padding: 0px 0px;
	font-size: 80%;
}
.hmy-content-wrapper.tagline .hmy-content {
	padding: 30px 10px 0px 0px;
}
span.dropcap {
	float: left;
	font-size: 5em;
	margin-right: 10px;
	padding: 0 .1em 0 0;
	display: block;
	line-height: 0.55em;
	color: #000000;
	border-right: 1px dotted #000000;
}


.hmy-content-wrapper.logo .hmy-content h1 {
	font-size: 110%;
	/*font-size: 130%;*/
	font-family: 'Red Rose', sans-serif;
	/*font-family: "Tahoma, Geneva", sans-serif;*/
	font-weight:bold;
  /*font-weight: normal;*/
  /*font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;*/
  /*font-family: Buda, Verdana, Geneva, sans-serif;*/
}
.content {
	flex: 1 0 auto;
	padding: 0px 10px;
}
.footer {
	flex-shrink: 0;
	margin-top: 48px;
}
h1 {
	margin: 0px;
}
.blurb-black {
	padding: 20px;
	background-color: #181818;
	color: #FFF;
	border-radius: 5px;
	font-size: 1.15rem;
}
.hmy-section h1 {
	font-size: 1.75rem;
}
.hmy-section h2 {
	font-size: 1.75rem;
}
.hmy-section h3 {
	font-size: 1.55rem;
	color:#0068ff;
}
.hmy-section h4, .hmy-section h5 {
	font-size: 1.35rem;
	/*font-size: 1.45rem;*/
}
.top-margin-36 {margin-top: 36px;}
.top-margin-24 {margin-top: 24px;}
.top-margin-12 {margin-top: 12px;}
.top-margin-2 {margin-top: 2px;}
.top-padding-10 {padding-top: 10px;}
.top-padding-20 {padding-top: 20px;}
.top-padding-30 {padding-top: 30px;}

.big {
	font-size: 110%;
	/*font-size: 130%;*/
	color:#0068ff;
}
.bleed {
	opacity: .65;
}




/*rizwan css start*/

.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.staff-card {
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.staff-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 10px;
}

.staff-card p {
  font-size: 15px;
  color: #333;
}

.static-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.blue-btn {
  background-color: #0068ff;
  color: white;
  border: none;
  padding: 12px 15px;
  font-size: 16px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
}

.blue-btn:hover {
  background-color: #0056cc;
}


.white-facebook-icon {
  color: white;
  background-color: #0068ff; /* optional blue background */
  padding: 10px;
  border-radius: 50%;
  font-size: 20px;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 20px;
}


.dDVKBq {
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    color: #0068ff !important;
    text-wrap: balance;
    line-height: 1.32;
}



/*rizwan css end*/

/*
*************************************************************************
  RESET HARMONY LINK STYLES TO COMPLETE THE REASSIGNMENT
  COPY LINK RULES BELOW TO HARMONY CSS FILE, REPLACING THE DEFAULTS
  This will auto style all links in paragraphs. For text links outside
  paragraphs, assign the text-link class directly to the link's
  <a> tag: <a class="text-link"...>
*************************************************************************
*/
.p7HMY .hmy-section p a {border-bottom: 1px dotted;
    
    color:black;
    font-weight:bold;
}
.p7HMY .hmy-section p a:hover {
	border-bottom: 1px solid;
	font-family: Arial, Helvetica, sans-serif;
}
.p7HMY .hmy-section a.text-link {border-bottom: 1px dotted;}
.p7HMY .hmy-section a.text-link:hover {border-bottom: 1px solid;}

/*
************************************************************
 SET A HARMONY COLUMN TO STICKY ASSIGN CLASS "STICKY" AS A 
           SECTION USER CLASS IN HARMNONY UI
************************************************************
*/
.sticky .hmy-content {
	position: -webkit-sticky;
	position: sticky;
	top: 140px;
}
/* Turn off Sticky for small screens */
@media only screen and (min-width: 0px) and (max-width: 768px) {
	.sticky .hmy-content {position: static;}
}

/*
****************************************************************
  You can add the user class "top-bottom-padding-48" in the
  Harmony UI to a column that you want to have more "height"
  We use it on the first column of the Calendar of Events.
****************************************************************
*/
.hmy-content-wrapper.bam-bg.top-bottom-padding-48 .hmy-content {padding: 48px 24px;}

/*
************************************
  A Special Rule to Set off some
  Text in small, spaced font.
************************************
*/
.note,
.note.red,
.note.blue {
	font-size: 65%;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	font-weight: bold;
}
.note {
	color: #FFF;
}
.note.red {
	color: #F33;
}
.note.blue {
	color: #6699CC;
}
.note.black {
	color: #000;
}

/*
****************************************************************
      UTILITY CLASS TO ASSIGN TO IMAGES MAKING THEM
	  ROUNDED, WITH A BORDER, AND SEMI-TRANSPARENT
****************************************************************
*/
img.rounded-transparent {
	border-radius: 5px;
	opacity: .77;
	border: 1px solid;
	transition: all linear .5s;
}
img.rounded-transparent:hover {
	opacity: 1;
}
img.rounded-transparent-zoom {
	border-radius: 5px;
	opacity: .77;
	transform: scale(1);
	border: 1px solid;
	transition: all linear 5s;
}
img.rounded-transparent-zoom:hover {
	opacity: 1;
	transform: scale(1.5);
}

/*
*************************************************************
                      SOCIAL ICONS
*************************************************************
*/
.social-icons img {
	filter: grayscale(1);
	opacity: .5;
	transition: all linear .5s;
	max-width: 32px;
}
.social-icons img:hover {
	filter: grayscale(0);
	opacity: 1;
}
ul.social-icons {
	margin: 10px 0px 0px 0px;
	padding: 0px;
}
.social-icons li {
	list-style-type: none;
	display: inline-block;
}
.hmy-content-wrapper.social .hmy-content {
	padding: 10px 25px;
	background:#0068ff;
}
.hmy-content-wrapper.copyright .hmy-content {
	padding: 0px 24px 10px 24px;
	background:#0068ff;
}
.hmy-content-wrapper.copyright .hmy-content p {
	margin: 0px;
	font-size: 60%;
	text-transform: uppercase;
	letter-spacing: .5em;
}


/*
****************************************************************
   "grail-layout" is a user class assigned to the main
   layout grid in layout 1. "order-0" to "order-3" are
   user classes assigned to the Harmony sections in that
   grid to express the default order of the columns. 
   We use a media query to rearrange the display order
   of the columns for small screens so that the main content
   column comes first.
****************************************************************
*/
@media only screen and (min-width: 0px) and (max-width: 768px) {
.grail-layout .order-0 {order: 1;}
.grail-layout .order-1 {order: 3;}
.grail-layout .order-2 {order: 2;}
.grail-layout .order-3 {order: 4;}
}
/*Utility Rules for Grail Layout*/
.grail-layout .hmy-content-wrapper.main-content .hmy-content {
	padding-top: 28px;
}
/*
****************************************************************
   "sidebar-left" is a user class assigned to the main
   layout grid in layout 4. "order-0" to "order-2" are
   user classes assigned to the Harmony sections in that
   grid to express the default order of the columns. 
   We use a media query to rearrange the display order
   of the columns for small screens so that the main content
   column comes first.
****************************************************************
*/
@media only screen and (min-width: 0px) and (max-width: 768px) {
.sidebar-left .order-0 {order: 1;}
.sidebar-left .order-1 {order: 3;}
.sidebar-left .order-2 {order: 2;}
}

/*
*****************************************************************
    .calendar-grid .sidebar-right mixed-bag single-column
	                 -------------
	Layout 2, Layout 5, Layout 6, an Layout 7 each have 
	relevant user classes assignd to their content grids.
	You can use these class names to create special rules
	that will affect only specific layouts.
*****************************************************************
*/


/* buda-300 - latin */
@font-face {
  font-family: 'Buda';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/buda-v8-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Buda Light'), local('Buda-Light'),
url('fonts/buda-v8-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/buda-v8-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/buda-v8-latin-300.woff') format('woff'), /* Modern Browsers */
url('fonts/buda-v8-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/buda-v8-latin-300.svg#Buda') format('svg'); /* Legacy iOS */
}

/* raleway-300 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/raleway-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Raleway Light'), local('Raleway-Light'),
url('fonts/raleway-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/raleway-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/raleway-v12-latin-300.woff') format('woff'), /* Modern Browsers */
url('fonts/raleway-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/raleway-v12-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* elsie-regular - latin */
@font-face {
  font-family: 'Elsie';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/elsie-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Elsie Regular'), local('Elsie-Regular'),
url('fonts/elsie-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/elsie-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/elsie-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/elsie-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/elsie-v7-latin-regular.svg#Elsie') format('svg'); /* Legacy iOS */
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
	.p7dmm-fixed:before {display: none;}
	.hmy-content-wrapper .hmy-content.hmy-right {text-align: left;}
	 body {font-size: 100%;}
	 /*body {font-size: 90%;}*/
	.p7HMY .hmy-section {flex-basis: 100% !important;}
	.p7HMY .hmy-section .hmy-content-wrapper {border-radius: 0px !important; border: none !important;}
	.p7HMY.hmy-legacy .hmy-section {float: none !important; width: 100% !important;}
	.logo, .order-1, .order-3 {display:none;}
}