@charset "utf-8";
/* Custom Styles for FPS website created by Aftersite Web Design */

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');
a { transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; outline: none; color: #27495e; font-weight: 600;}
a:hover { color: #a2cc3a;}
a:focus { outline: none;}

/* GENERAL */
body { font-family: 'Source Sans Pro', sans-serif; color: #27495e; font-size: 1.1rem; font-weight: 300; overflow-x: hidden;}
h1,h2,h3,h4,h5,h6 { font-weight: 400; padding: 0; margin: 0 0 20px 0;}
p { padding: 0; margin: 0 0 30px 0;}
strong { font-weight: 600;}
.padY120 { padding: 80px 0;}
.padY100 { padding: 100px 0;}
.padY90 { padding: 90px 0;}
.padY30 { padding: 30px 0;}
.padXY30 { padding: 30px;}
.bordered-img { position: relative;}
.bordered-img .border { position: absolute; top: 0; left: 0; margin: 30px; width: calc( 100% - 60px ); height: calc( 100% - 60px ); border: 1px solid #fff;}
.grey-bg { background-color: #f4f5f3;}
.text-pad { padding: 30px;}
#success { display: none;}
.error { color: red;}

header a { text-decoration: none;}

#hero { padding: 0;}
#hero .carousel-item { position: relative;}
#hero .carousel-item .container-fluid { position: absolute; top: 0; left: 0;}
#hero .carousel-item .blue-box { background-color: rgba(39,73,94,0.85); color: #fff; padding: 30px; border-radius: 4px;}
#hero .carousel-item h1 { font-size: 2.6rem;}
#hero .carousel-item p { font-size: 1.3rem;}
.carousel-indicators [data-bs-target] { width: 10px; height: 10px; background-color: transparent; border: 2px solid #fff; border-radius: 50%; opacity: 1; margin: 0 10px;}
.carousel-indicators .active { background-color: #a2cc3a; border: 2px solid #a2cc3a; opacity: 1;}

#banner { padding: 0; position: relative;}
#banner .container-fluid { position: absolute; top: 0; left: 0;}
#banner .blue-box { background-color: rgba(39,73,94,0.85); color: #fff; padding: 30px; border-radius: 4px; display: inline-block; margin-bottom: 120px;}
#banner h1 { font-size: 3rem; margin: 0;}

#content ul { padding: 0; margin: 0 0 30px 20px;}
#content .client-logo { border: 1px solid #27495e; margin-bottom: 30px;}

#service-jumps p { font-weight: 300;}

#testimonial { background-image: url("../images/quote-bg.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover;}
#testimonial p { font-size: 1.2rem;}

#welcome h1 { font-size: 3rem;}
#welcome p { font-weight: 300;}
#welcome .text { padding: 90px 60px 60px 60px; margin: 55px 0; border-left: 1px solid #8d9fa8;}

.accordion-button { color: #27495e; font-weight: 600; font-size: 1.1rem; background-color: #f4f5f3; border-color: #f4f5f3; border-radius: 0 !important;}
.accordion-button:not(.collapsed) { color: #27495e; background-color: #f4f5f3;}
.accordion-button::after { content: "\f0d7"; color: #27495e; top: 10px; right: 15px; position: absolute; font-family: 'Font Awesome 5 Free'; background-image: none; font-size: 1.6rem;}
.accordion-button:not(.collapsed)::after { transform: none; background-image: none; content: "\f0d8";}
.accordion-item { margin-bottom: 1px;}
.accordion-collapse { border-color: #f4f5f3;}

form { background-color: #fff; padding: 30px;}
.form-control { border-radius: 0;}

footer { background-color: #27495e; color: #fff; font-size: 1rem; font-weight: 300;}
footer a { color: #fff; font-weight: 300; text-decoration: none;}
footer span { font-size: 1.8rem;}

/* Navbar Styles */
.navbar-nav .nav-item .nav-link { color: #474747; font-size: 1rem; padding: .5rem .75rem; border: 1px solid #fff;}
.navbar-nav .nav-item .nav-link:hover, .navbar-nav .nav-item .nav-link.active { color: #9bcb3d;}
.navbar-nav .nav-item .nav-link.show { border: 1px solid; border-color: #c1c1c0 #c1c1c0 #fff #c1c1c0; z-index: 11; position: relative; color: #9bcb3d;}
.dropdown-menu { border-color: #c1c1c0; border-radius: 0; padding: 0 .75rem; z-index: 10;}
.dropdown-menu .dropdown-item { padding: .5rem 0rem; border-bottom: 1px solid #c1c1c0;}
.dropdown-menu .dropdown-item.last { border-bottom: none;}
.dropdown-menu .dropdown-item:hover { background-color: transparent; color: #9bcb3d;}
.dropdown-menu[data-bs-popper] { margin-top: -1px;}
.dropdown-toggle::after { border: none; font-family: 'Font Awesome 5 Free'; content: "\f107"; vertical-align: 0;}
.navbar-toggler { border: none;}
#telephone { display: none;}

.btn-primary { background-color: #a2cc3a; border-color: #a2cc3a; text-transform: uppercase; letter-spacing: 1px; padding: 7px 40px;}
.btn-primary:hover { background-color: #27495e; border-color: #27495e;}
#hero .btn-primary:hover { background-color: #f4f5f3; border-color: #f4f5f3; color: #474747;}

/* RESPONSIVE AMENDED STYLES */
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    .navbar-nav .nav-item .nav-link { font-size: .9rem;}
}

@media only screen and (max-width: 1024px) {
    .mb-5 { margin-bottom: 1rem !important;}
    .navbar-nav { padding-top: 1rem;}
    .navbar-nav .nav-item .nav-link { padding: .5rem 0rem; border: 1px solid #fff; border-top-color: #f4f5f3;} 
    .navbar-nav .nav-item .nav-link.show { border: 1px solid; border-color: #fff; border-bottom-color: #f4f5f3; color: #474747;}
    .dropdown-toggle::after { border: 1px solid #f4f5f3; padding: 0 6px; color: #687c89; float: right;}
    .dropdown-toggle.show::after { content: "\f106";}
    .dropdown-menu { border-color: #fff; border-radius: 0; padding: 0 .75rem; z-index: 10;}
    .dropdown-menu .dropdown-item { padding: .4rem 0rem; border-bottom: 1px solid #fff; font-weight: 600;}
    #telephone { display: inline-block; border-right: 1px solid #27495e; margin-right: 15px; padding-right: 15px;}
    #telephone #numeric { margin-right: 10px;}
    .accordion-button { padding: 1rem 3rem 1rem 1.25rem;}
}

/* #Tablet (Landscape)
================================================== */
/* Note: Design for a width of 1024px */
@media only screen and (min-width: 960px) and (max-width: 1024px) {
    .padY120, .padY90, .padY100 { padding: 60px 0;}
    .navbar-brand img { max-height: 65px;}
    #hero .carousel-item .blue-box { padding: 15px 30px;}
    #hero .carousel-item h1 { font-size: 2.1rem;}
    #hero .carousel-item p { font-size: 1.1rem;}
    .carousel-control-next, .carousel-control-prev { width: 5%;}
    #service-jumps .padXY30 { padding: 30px 0;}
    #welcome h1 { font-size: 2.5rem;}
    #welcome .text { padding: 60px 30px 30px 30px; margin: 30px 0;}
    footer { font-size: .9rem;}
    #banner .blue-box { margin-bottom: 60px;}
    #banner h1 { font-size: 2.5rem;}
}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .padY120, .padY90, .padY100 { padding: 40px 0;}
    .navbar-brand img { max-height: 50px;}
    #hero .carousel-item .blue-box { padding: 15px 30px;}
    #hero .carousel-item h1 { font-size: 1.8rem; margin: 0 0 10px 0;}
    #hero .carousel-item p { font-size: 1.1rem; margin: 0 0 10px 0; line-height: 1.4rem;}
    .carousel-control-next, .carousel-control-prev { width: 5%;}
    #service-jumps .padXY30 { padding: 30px 0;}
    #service-jumps p, .btn-primary { font-size: .9rem;}
    #welcome h1 { font-size: 2.25rem;}
    #welcome .text { padding: 30px 30px 0px 30px; margin: 30px 0;}
    footer { font-size: .9rem;}
    #banner .blue-box { margin-bottom: 30px; padding: 15px 30px;}
    #banner h1 { font-size: 2rem;}
}

/* #Mobile (Both)
================================================== */
/* Note: Landscape and portrait */
@media only screen and (max-width: 767px) {
    .mobMB15 { margin-bottom: 15px;}
    .padY120 { padding: 30px 0;}
    .padY100 { padding: 30px 0;}
    .padY90 { padding: 30px 0;}
    .text-pad { padding: 30px 30px 0 30px;}
    .navbar-brand img { max-height: 40px;}
    #telephone #numeric { display: none;}
    #hero .carousel-item .container-fluid { position: static; top: 0; left: 0; background-color: rgba(39,73,94,1);}
    #hero .carousel-item .blue-box { text-align: center; padding: 30px 30px 50px 30px; border-radius: 0;}
    #hero .carousel-item h1 { font-size: 1.8rem; margin: 0 0 10px 0;}
    #hero .carousel-item p { font-size: 1.1rem; margin: 0 0 10px 0; line-height: 1.4rem;}
    #hero .carousel-item .btn { padding: 7px 30px;}
    #service-jumps .padXY30 { padding: 15px 0 30px 0;}
    #welcome .grey-bg { background-color: #fff;}
    #welcome h1 { font-size: 2.25rem;}
    #welcome .text { padding: 0px 30px 0px 30px; margin: 0; border-left: none;}
    footer, footer .text-end { text-align: center !important;}
    #banner .container-fluid { position: static; top: 0; left: 0; background-color: rgba(39,73,94,1);}
    #banner .blue-box { text-align: center; padding: 12px 0px; border-radius: 0; width: 100%; margin-bottom: 3px;}
    #banner h1 { font-size: 1.6rem; text-align: center;}
    #banner .h-100 { height: 60px !important;}
    .btn-primary { padding: 7px 30px;}
    .accordion-button::after { top: 12px;}
}

/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}
	
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
 
}

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}