@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root { --color1: #ee6351; --color2: #e56f60; }

html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { background:#072032; font-family: 'Public Sans'; color: #333; font-size: 19px; }

h1 { letter-spacing: 0.1px; font-size: 2.2em; font-weight: 700; margin-bottom: 1rem; }
h2 { font-size: 2.1em; font-weight: 700; margin-bottom: 1.5rem; }
h3 { font-size: 1.4em; font-weight: 500;  margin-bottom: 0.5rem; }

a { color: #000; }
a:hover { color: var(--color1); }
.bold { font-weight: bold; }
.uppercase { text-transform: uppercase; }
.small { font-size: 0.7em; }
.btn { font-weight: normal!important; }
.fluid { width: 100%; }
.pl { padding-left: 3rem; }
.pr { padding-right: 3rem; }
.nomargin { margin: 0!important; }
.mr-1 { margin-right: 1rem; }
.mr-2 { margin-right: 2rem; }
.mb-1 { margin-bottom: 1rem!important; }
.mb-2 { margin-bottom: 2rem!important; }
.mb-3 { margin-bottom: 3rem!important; }
.text-left { text-align: left!important; }
.text-right { text-align: right!important; }
.only-xs { display: none; }
.border { border:1px solid #3a526a; }
.btn { padding: 0.5rem 0.8rem;} 
.btn:first-child:active { background: var(--color2); border-color:var(--color2); }
.btn-primary { border-color: var(--color1); background: var(--color1); color: #FFF; font-size: 1.1em; letter-spacing: 0.5px; }
.btn-primary:hover, .btn-primary:active, .btn-primary:visited { border-color: var(--color2); background: var(--color2); color: #FFF; }
.btn-secondary { background: none; border-color:#fff; color: #fff!important; }
.btn-secondary:hover, .btn-primary:active { background: #FFF; border-color:#FFF; color: #000!important; }
.btn-secondary i { margin-right: 0.4rem; }

/* Container */
.container { max-width: 1200px; }

/* Header */
.navbar { background: #072032; border-top: 4px solid var(--color1); padding: 0.5rem 0; }
.navbar-brand { margin: 0; }
.navbar-brand img { height: 60px; }
.navbar-brand img:hover { opacity: 0.8; }
.navbar .btn { font-size: 0.9em; font-weight: 600!important; }

/* Section */
section { padding-top: 3.5rem; }
section img { border-radius:15px; }

/* Box */
.box { background: #FFF; border-radius: 15px; padding: 2rem; margin-bottom: 3rem; }

/* Hero */
#hero { text-align: center; color: #FFF; }
#hero h1 { margin-bottom: 2rem; }
.review1 { text-align: right; }
.review2 { color: #FFF; font-size: 0.9em; text-align: left; }
.review2 img { vertical-align: middle; border-radius:0; }

/* Services */
#services h2 { font-size: 1.5em; color: #333; text-align: center; margin-bottom: 2rem; }
.service_detail { background: #FFF; border-radius: 15px; padding: 2rem; margin-bottom: 2rem; }
.service_detail img { margin-bottom: 1rem; }

/* Why */
#why { text-align: center; }
#why h2 { font-size: 2.1em; color: #FFF; text-align: center; margin-bottom: 3rem; }
.why_detail { position: relative; background: #FFF; border-radius: 15px; padding: 2rem 1rem; margin-bottom: 2rem; }
.why_detail h3 { font-size: 1.4em; margin: 0; }
.why_detail p { color: #757575; margin: 0; }
#why i { font-size: 5em; color: var(--color1); padding: 2rem 0; }

/* Reviews */
#reviews h2 { color: #FFF; text-align: center; margin-bottom: 3rem; }

/* FAQ */
#faq { margin-bottom: 4rem; }
#faq h2 { color: #FFF; text-align: center; }
.accordion-button { font-size: 1.1em; }

/* Contact */
#contact { background: var(--color1); padding: 3rem; margin-top: 4rem; color: #FFF; }
#contact h2 { text-align: left; margin-bottom: 2.5rem; }
#contact a { color: #FFF; } 
#contact #form { background: #FFF; border-radius: 15px; padding: 1.5rem; }
#contact #form p { text-align: center; color:#1e1e20; font-size: 0.8em; margin: 1rem 0 0; }
#contact .form-control { padding: 0.6rem 1rem; font-size: 1em; color: #333; }

/* Mentions */
#mentions { font-size: 0.7em; color: #333; }

/* Footer */
footer { color:#FFF; font-size: 0.8em; margin-top: 1rem; }
.footer_detail { padding: 2rem 3rem; }
.footer_detail b { text-transform: uppercase; font-size: 1.2em; font-weight: 500; }
.footer_detail a { color:#FFF; text-decoration: none; }
.footer_detail a:hover { color: var(--color1); }
.footer_detail ul { list-style: none; padding: 0; margin: 0; }
.footer_detail ul li { margin-bottom: 0.5rem; }
.footer_detail ul li:last-child { margin: 0; }
.footer_detail .logo { margin-bottom: 2rem; }
.footer_detail .logo:hover { opacity: 0.8; }
.footer_detail .btn { font-size: 0.9em; width: 100%; }
.footer_detail .btn-primary { border-color: #FFF; background: #FFF; color: #333; }
.footer_detail .btn-primary:hover, .footer_detail .btn-primary:active { border-color: var(--color1)!important; background: var(--color1)!important; color: #FFF!important; }
#legal { border-top:1px solid #666; padding: 1rem; margin: 0; color: #FFF; font-size:0.9em; letter-spacing: 0.1px; }
#legal a { color: var(--color1); text-decoration: none; } 

/* Mobile */
@media only screen and (max-width: 768px) {

    body { font-size: 17px; }
	.hidden-xs { display:none; }
    .only-xs { display: block; }
    .margin-xs { margin-bottom: 2rem!important; }
    .mb-3 { margin-bottom: 2rem!important; }

    .navbar-brand img { height: 40px; }
    .navbar .btn { font-size: 0.8em; }

    h2 { font-size: 1.6em; margin-bottom: 1rem; }
    section { padding-top: 3rem; }
    .why_detail { margin-bottom: 1rem; }
    .why_detail.last { margin-bottom: 2rem; }
    #contact { padding: 2rem; }
    label, form-control, .form-select { font-size: 1.1em; }

    .footer_detail { padding: 0 1rem; }
    .footer_detail .logo { margin-bottom: 1rem; }
    #legal { margin-top: 1rem; }
}