/* 

# = id (only used on one element)   

. = class (used for multiple elements) 




*/




/**********  START OF BRAND GLOBAL VARIABLES **************/

:root {
  /* EastCoast WebCraft Brand Colors */
  --ecw-navy:       #005888;   /* primary blue — hero, headings, buttons */
  --ecw-dark:       #091a32;   /* deep navy — navbar, dark sections */
  --ecw-teal:       #009688;   /* secondary teal — accents, login button */
  --ecw-orange:     #ff5722;   /* CTA orange — quote button */
  --ecw-orange-dk:  #e64a19;   /* CTA orange hover */

  /* Typography */
  --font-family:    'Roboto', sans-serif;
  --font-size-base: 16px;
  --line-height:    1.6;

  /* Spacing */
  --padding-sm:  8px;
  --padding-md:  16px;
  --padding-lg:  24px;
  --radius:      0.75rem;

  /* Shadows */
  --shadow-sm:   0 2px 4px rgba(0,0,0,.08);
  --shadow-md:   0 4px 12px rgba(0,0,0,.12);
}

/*
ARCHIVED generic placeholder variables — replaced above with actual brand values:
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --accent-color: #e74c3c;
  --background-color: #f5f5f5;
  --text-color: #333333;
  --heading-color: #2c3e50;
  --link-color: #2980b9;
  --link-hover-color: #1abc9c;
  --button-bg-color: #3498db;
  --button-text-color: #ffffff;
  --border-color: #dcdcdc;
  --input-bg-color: #ffffff;
  --input-text-color: #333333;
  --font-family: 'Helvetica Neue', Arial, sans-serif;
  --font-size-base: 16px;
  --heading-font-size: 2em;
  --line-height: 1.5;
  --padding-small: 8px;
  --padding-medium: 16px;
  --padding-large: 24px;
  --card-bg-color: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --highlight-color: #ffeb3b;
  --disabled-color: #bdc3c7;
  --overlay-color: rgba(0, 0, 0, 0.5);
  --gradient-start-color: #8e44ad;
  --gradient-end-color: #3498db;
  --error-color: #e74c3c;
  --success-color: #2ecc71;
  --warning-color: #f39c12;
  --info-color: #3498db;
  --scrollbar-track-color: #ecf0f1;
  --scrollbar-thumb-color: #bdc3c7;
  --modal-bg-color: #ffffff;
  --card-border-radius: 8px;
  --container-max-width: 1200px;
  --grid-gap: 16px;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-size: var(--heading-font-size);
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
}

button {
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  padding: var(--padding-medium);
  border: 1px solid var(--border-color);
  border-radius: var(--card-border-radius);
  box-shadow: 0 2px 4px var(--shadow-color);
}

input[type="text"], textarea {
  background-color: var(--input-bg-color);
  color: var(--input-text-color);
  padding: var(--padding-small);
  border: 1px solid var(--border-color);
}

.card {
  background-color: var(--card-bg-color);
  border-radius: var(--card-border-radius);
  box-shadow: 0 2px 4px var(--shadow-color);
  padding: var(--padding-large);
  margin-bottom: var(--padding-medium);
}

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--padding-medium);
}

.highlight {
  background-color: var(--highlight-color);
}

.modal {
  background-color: var(--modal-bg-color);
  padding: var(--padding-large);
  box-shadow: 0 4px 8px var(--shadow-color);
}

.scrollbar {
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

.grid {
  display: grid;
  grid-gap: var(--grid-gap);
}
*/



/**********  END OF BRAND GLOBAL VARIABLES **************/





/* FONTS */
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}


/* <uniquifier>: Use a unique and descriptive class name
   <weight>: Use a value from 400 to 700*/

.lora-mod {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
}

/* END FONTS */


/* GLOBAL */

html {
    /* Offset all anchor jumps by navbar height so sections aren't hidden behind it */
    scroll-padding-top: 100px;
}

body {
    font-family: Roboto, sans-serif;
    margin: 0;
    padding-top: 90px;
}

/* Admin and portal pages use a sidebar layout — no fixed top navbar */
body.no-topnav {
    padding-top: 0;
}

/* When the admin bar is present, push the fixed navbar down below it */
body.ecw-admin-viewing .navbar.fixed-top {
    top: 32px;
}
body.ecw-admin-viewing {
    padding-top: 122px; /* 32px admin bar + 90px navbar */
}

h1, h2, h3 {
	color: #005bbb;
}


.second-bk{
	background-color: #009688;
	color: #091a32;
	font-weight: bold;
}




/* Call to Action button - Orange */
.cta-button {
    background-color: #ff5722;
    color:black;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 18px;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;
}

.cta-button:hover {
    background-color: #e64a19;
}

/* END GLOBAL */


/* LIGHT or DARK THEME PICKER BOTTOM RIGHT  - INCLUDED ONLY IN HEADER INCLUDE FILE*/
.btn-bd-primary {
	--bd-violet-bg:#712cf9;
	--bd-violet-rgb: 112.520718, 44.062154, 249.437846;

	--bs-btn-font-weight: 600;
	--bs-btn-color: var(--bs-white);
	--bs-btn-bg: var(--bd-violet-bg);
	--bs-btn-border-color: var(--bd-violet-bg);
	--bs-btn-hover-color: var(--bs-white);
	--bs-btn-hover-bg: #6528e0;
	--bs-btn-hover-border-color: #6528e0;
	--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
	--bs-btn-active-color: var(--bs-btn-hover-color);
	--bs-btn-active-bg: #5a23c8;
	--bs-btn-active-border-color: #5a23c8;
}
  .bd-mode-toggle {
	z-index: 1500;
  }

  .bd-mode-toggle .dropdown-menu .active .bi {
	display: block !important;
  }

.bi {
	vertical-align: -.125em;
	fill: currentColor;
}

/* END LIGHT or DARK THEME PICKER BOTTOM RIGHT */






/******** HOME PAGE ********/

/* Hero Section on Home Page */
.cta-button {
    background-color: #ff5722;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 18px;
    border-radius: 5px;
}

.icon-square {
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
}

.feature-icon {
  width: 4rem;
  height: 4rem;
  border-radius: .75rem;
}

.feature-icon-small {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .75rem;
}

.services-card-container{
	padding: 1.25em;
}

.services-card{
	background-color:lightblue;
	padding: 1em;
  border-radius: .75rem;
}

.services-card h3{
	color: #005888;
}

.services-card p{
	color: #333333;

}
.services-card a{
	margin-left:2.5em;
}



/******** END HOME PAGE ********/







/******** SERVICES PAGE ********/



#services {
    padding: 50px 0;
}

#services h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;
}

#services p {
    font-size: 18px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.service-list {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}

.service-item {
    background-color: #f4f4f4;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
    flex: 1 1 calc(33% - 40px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	color: black;
}

.service-item h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.service-item p {
    font-size: 16px;
    line-height: 1.5;
}


/******** END SERVICES PAGE ********/




/******** ABOUT US PAGE ********/

#about {
    padding: 50px 0;
}

#about h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;
}

#about p {
    font-size: 18px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.mission, .team, .story .about{
    margin-bottom: 10px;
    text-align: center;
}

.mission h3, .team h3, .story h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.principles{
    margin-bottom: 40px;
    text-align: left;
}


.team {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.team-member {
    margin: 20px;
    max-width: 300px;
    text-align: center;
}

.team-member img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
}

.team-member h4 {
    font-size: 20px;
    margin-top: 15px;
}

.team-member p {
    font-size: 16px;
    margin-top: 10px;
}


/******** END ABOUT US PAGE ********/



/********  PORTFOLIO PAGE ********/


#portfolio {
    padding: 50px 0;
}

#portfolio h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;
}

#portfolio p {
    font-size: 18px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.portfolio-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.portfolio-item {
    margin-bottom: 30px;
    width: calc(45% - 20px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.portfolio-item img {
    max-width: 100%;
    height: auto;
    display: block;
}

.portfolio-item h3 {
    font-size: 24px;
    margin: 15px;
}

.portfolio-item p {
    font-size: 16px;
    line-height: 1.5;
    margin: 15px;
}

.portfolio-item a {
    color: #ff5722;
    text-decoration: none;
    font-weight: bold;
}

/******** END PORTFOLIO PAGE ********/



/******** BLOG PAGE ********/
#blog {
    padding: 50px 0;
}

#blog h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;
}

#blog p {
    font-size: 18px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
}


.blog-list {
/*    display: flex;
    flex-wrap: wrap;
*/
    justify-content: space-around;
}

.blog-post {
    margin-bottom: 30px;
    /*width: calc(45% - 20px);*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
}

.blog-post img {
    max-width: 100%;
    height: auto;
    display: block;
}

.blog-post h3 {
    font-size: 24px;
    margin: 15px;
}

.blog-post h3 a {
    text-decoration: none;
    color: #333;
}

.blog-post p {
    font-size: 16px;
    line-height: 1.5;
    margin: 15px;
}

.blog-post p a {
    color: #ff5722;
    text-decoration: none;
    font-weight: bold;
}


/******** END BLOG PAGE ********/


/******** CONTACT PAGE ********/
#contact {
    padding: 50px 0;
}

#contact h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;
}

#contact p {
    font-size: 18px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.contact-details {
    display: flex;
    justify-content: space-around;
    margin-bottom: 40px;
}

.contact-item {
    text-align: center;
    flex: 1;
    margin: 0 20px;
}

.contact-item h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.contact-item p {
    font-size: 18px;
}

.contact-item a {
    color: #ff5722;
    text-decoration: none;
    font-weight: bold;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form label {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact-form button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #ff5722;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #e64a19;
}


/******** END CONTACT PAGE ********/


/********  PRICING  PAGE ********/

#hosting, #web-design, #seo-services, #maintenance, #additional-services {
    padding: 50px 0;
}

#hosting h2, #web-design h2, #seo-services h2, #maintenance h2, #additional-services h2 {
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;
}

#hosting p, #web-design p, #seo-services p, #maintenance p, #additional-services p {
    font-size: 18px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.pricing-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.pricing-item {
    background-color: #f4f4f4;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
    flex: 1 1 calc(30% - 40px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.pricing-item h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.pricing-item p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.pricing-item ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 20px;
}

.pricing-item ul li {
    font-size: 16px;
    margin-bottom: 10px;
}

.price {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}




/******** END PRICING PAGE ********/



/* CHEATSHEET STYLES - IN TEMPLATE PAGE */

.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	user-select: none;
}

.b-example-divider {
	width: 100%;
	height: 3rem;
	background-color: rgba(0, 0, 0, .1);
	border: solid rgba(0, 0, 0, .15);
	border-width: 1px 0;
	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
	flex-shrink: 0;
	width: 1.5rem;
	height: 100vh;
}


@media (min-width: 768px) {
	.bd-placeholder-img-lg {
	  font-size: 3.5rem;
	}
}


/******** END CHEATSHEET PAGE ********/