/* --------------------------------------------------- 
                  General & Typography
   --------------------------------------------------- */
*, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; }
html { scroll-behavior: smooth; }

body { background-color: #F6F4F2; font-family: 'Roboto', sans-serif; overflow-x: hidden; }

h1 { font-size: 68px; line-height: 78px; font-weight: 700; }
h1, h2, h3, h4, h5, h6 { color: #212530; }
h2 { margin-bottom: 25px; width: 65%; font-size: 57px; line-height: 70px; font-weight: 600; text-align: center; }
h3 { font-size: 36px; line-height: 45px; font-weight: 700; }
h4 { font-size: 26px; line-height: 34px; font-weight: 700; }
h5 { font-size: 19px; line-height: 27px; font-weight: 300; }
h6 { color: rgb(100, 100, 100); font-size: 14px; line-height: 19px; font-weight: 400; }
p { font-size: 18px; line-height: 29px; }

.subheading { margin-bottom: 60px; width: 55%; text-align: center; }

a { color: rgb(255, 255, 255); text-decoration: none; } li { margin: 5px 0; font-size: 18px; line-height: 28px; font-weight: 500; list-style: none; }

.shadow-block { background-color: #212530; border-radius: 15px; box-shadow: 16px 16px 0px rgba(28, 31, 38, 0.5); }

@media only screen and (max-width: 980px) {
    h1 { font-size: 45px; line-height: 55px; }
    h2 { width: 95%; font-size: 39px; line-height: 49px; }
    .subheading { width: 95%; }
    p { font-size: 17px; line-height: 28px; }
}

/* --------------------------------------------------- 
                     Layouts
   --------------------------------------------------- */
.section-container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; width: 90%; max-width: 1500px; }

.content-wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; max-width: 1500px; }

.content-block { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }

@media only screen and (max-width: 980px) {
    .section-container { width: 95%; }

    .content-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .content-wrapper-one { display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; }
}

/* --------------------------------------------------- 
                    Buttons
   --------------------------------------------------- */
.btn { padding: 16px 26px; color: #212530; font-size: 18px; font-weight: 500; text-align: center; border-radius: 3px; transition: all .3s; }

.blue-btn { color: #ffffff; background-color: #212530; border: 2px solid #212530; }
.blue-btn:hover { color: #212530; background-color: #ffffff; border: 2px solid #ffffff; }

.orange-btn { margin-top: 35px; color: #ffffff; background-color: #FE7450; border: 2px solid #FE7450; }
.orange-btn:hover { color: #FE7450; background-color: #ffffff; border: 2px solid #ffffff; }

.orange-outline-btn { color: #FE7450; background-color: transparent; border: 2px solid #FE7450; }
.orange-outline-btn:hover { color: #FE7450; background-color: #ffffff; border: 2px solid #ffffff; }

.white-outline-btn { color: #ffffff; background-color: transparent; border: 2px solid #ffffff; }
.white-outline-btn:hover { color: #212530; background-color: #ffffff; border: 2px solid #ffffff; }

.white-btn { color: #212530; background-color: white; border: 2px solid #ffffff; }
.white-btn:hover { color: #ffffff; background-color: #212530; border: 2px solid #212530; }

@media only screen and (max-width: 980px) {
    .btn { padding: 12px 0; width: 95%; }
 }


 /* --------------------------------------------------- 
                      Home Page
   --------------------------------------------------- */

.fixed-nav { position: fixed; width: 90%; top: 15px; left: 5%; transition: top 0.3s; background: #212530; box-shadow: 12px 12px 0px rgba(28, 31, 38, 0.5); border-radius: 10px; z-index:9999; }
.nav-logo { height: 70px; width: auto; }
.nav-items a { margin: 0 20px; color: white; font-size: 17px; }
.fixed-nav .btn { margin: 0 0 0 20px; }

.navbar { display: none; }

@media only screen and (max-width: 980px) {
   .fixed-nav { display: none; }
   
   .navbar { position: fixed; z-index:9999; top: 0; left: 0; display: block; width: 100%; background-color: rgb(246, 244, 242); box-shadow: 0 1px 4px rgb(146 161 176 / 15%); }
    
   .nav-container { display: flex; justify-content: space-between; align-items: center; height: 62px; }
   .navbar .nav-container li { list-style: none; }
   .navbar .nav-container a { text-decoration: none; color: #0e2431; font-weight: 500; font-size: 1.2rem; padding: 0.7rem; }
   .navbar .nav-container a:hover{ font-weight: bolder; }
   .nav-container { display: block; position: relative; height: 60px; }
   .nav-container .checkbox { position: absolute; display: block; height: 32px; width: 32px; top: 20px; left: 20px; z-index: 5; opacity: 0; cursor: pointer; }
   .nav-container .hamburger-lines { display: block; height: 26px; width: 32px; position: absolute; top: 17px; left: 20px; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
   .nav-container .hamburger-lines .line { display: block; height: 4px; width: 100%; border-radius: 10px; background: #0e2431; }
   .nav-container .hamburger-lines .line1 { transform-origin: 0% 0%; transition: transform 0.4s ease-in-out; }
   .nav-container .hamburger-lines .line2 { transition: transform 0.2s ease-in-out; }
   .nav-container .hamburger-lines .line3 { transform-origin: 0% 100%; transition: transform 0.4s ease-in-out; }
    
   .navbar .menu-items { display: flex; flex-direction: column; padding-top: 120px; height: 100vh; width: 100%; transform: translate(-150%); background-color: rgb(246, 244, 242); transition: transform 0.5s ease-in-out; text-align: center; }
   .navbar .menu-items li { margin: 15px 0; padding: 10px 0; font-size: 1.5rem; font-weight: 500; }
    
   .nav-logo { position: absolute; top: 0px; right: 15px; height: 55px; }
    
   .nav-container input[type="checkbox"]:checked ~ .menu-items { transform: translateX(0); }
   .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 { transform: rotate(45deg); }
   .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 { transform: scaleY(0); }
   .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 { transform: rotate(-45deg); }
   .nav-container input[type="checkbox"]:checked ~ .logo{ display: none; }
}


/* Hero */
.hero-container { padding: 250px 0 40px 0; }
.hero-container h1 { width: 70%; text-align: center; }
.hero-container p { margin: 30px 0 40px 0; width: 60%; text-align: center; }
.hero-container .btn { margin-top: 0; }

@media only screen and (min-width: 1370px) {
   .hero-container h1 { width: 62%; }
   .hero-container p { width: 50%; }
}

@media only screen and (max-width: 980px) {
   .hero-container { padding-top: 170px; }
   .hero-container h1, .hero-container p { width: 95%; }
}


/* Intro */
.intro-container { display: flex; flex-wrap: wrap; padding: 100px 0; }
.intro-top-wrapper { align-items: flex-start; justify-content: space-around; }

.intro-left { width: 45%; height: 100%; position: sticky; top: 20px; }
.intro-left video { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 5px 20px rgb(20, 20, 20); }

.intro-right { width: 45%; }
.intro-right h2 { width: 100%; text-align: left; }
.intro-card { position: relative; margin-bottom: 55px; padding: 55px 0; width: 100%; }
.intro-card img { height: 55px; width: auto; border-radius:5px; }
.intro-card .section-container { align-items: flex-start; width: 85%; }
.intro-card h3 { margin: 50px 0 35px 0; color: white; }
.intro-card p { color: rgb(240, 240, 240); }

@media only screen and (max-width: 980px) {
   .intro-left { margin: 20px 0 50px 0; width: 100%; height: 100%; position: static; top: 0px; }
   .intro-left video { box-shadow: none; }
   .intro-right { width: 100%; } 
   .intro-card { margin: 35px 0; }
}


/* Testimonial */
.testimonial-container { position: relative; margin: 100px auto; padding: 45px 0; }
.testimonial-container .section-container { align-items: flex-start; width: 85%; }
.testimonial-container p { z-index: 2; margin: 5px 0; color: rgb(240, 240, 240); font-size: 25px; line-height: 38px; font-weight: 400; }
.testimonial-info { justify-content: start; margin-top: 20px; }
.testimonial-info img { margin-right: 20px; height: 50px; width: 50px; border-radius: 200px; box-shadow: 0 5px 20px rgb(20, 20, 20); }
.testimonial-info h5 { color: rgb(250, 250, 250); font-size: 17px; }
.testimonial-quote { z-index: 1; position: absolute; top: 25px; right: 35px; height: 140px; width: auto; opacity: .75; }

@media only screen and (max-width: 980px) {
   .testimonial-container { padding: 75px 0 55px 0; }
   .testimonial-info { flex-direction: row; margin-top: 35px; }
}


/* Portfolio */
.portfolio-container { padding: 80px 0; }
.portfolio-wrapper { margin: 40px 0; padding: 10px 0; width: 100%; background-color: white; box-shadow: 16px 16px 0px rgb(180, 180, 180); border-radius: 15px; }
.portfolio-wrapper .section-container { align-items: flex-start; width: 85%; }
.portfolio-info { width: 55%; }
.portfolio-info h3 { margin: 20px 0 30px 0; }
.portfolio-info .btn { margin-top: 10px; }

.portfolio-img { width: 40%; box-shadow: 10px 10px 0px rgb(238, 238, 238); border-radius: 15px; }

@media only screen and (max-width: 980px) {
   .portfolio-wrapper { padding: 50px 0; }
   .portfolio-info { margin-bottom: 20px; width: 100%; }
   .portfolio-info .btn { margin-top: 10px; } 
   .portfolio-img { width: 100%; }
}


/* About */
.about-container { padding: 110px 0 90px 0; }

.about-text-block { align-items: center; width: 100%; }
.about-text-block .btn { margin-top: 35px; }

.about-top-wrapper { align-items: stretch; margin-top:25px; }
.about-wrapper { justify-content: start; margin: 25px 0; padding: 40px 0; width: 48%; }
.about-wrapper .section-container { align-items: flex-start; width: 85%; }
.about-wrapper img { height: 55px; width: auto; border-radius:5px; }
.about-wrapper h4 { margin: 35px 0 20px 0; color: white; }
.about-wrapper p { color: rgb(235, 235, 235);  }

@media only screen and (max-width: 980px) {
   .about-wrapper { width: 100%; }
}


/* CTA */
.cta-container { padding: 100px 0; }
.cta-container .btn { margin-top: 35px; }


/* --------------------------------------------------- 
                 Services/Portfolio Pages
   -------------------------------------------------- */

/* Services */   
.small-container { align-items: flex-start; width: 65%; padding: 80px 0; }
.small-container h2 { width: 100%; text-align: left; }
#services-container { padding: 65px 0; }
.services-page-intro-top-wrapper { align-items: center; }

@media only screen and (max-width: 980px) {
   .small-container { width: 90%; }
}


/* Pricing */
.pricing-container { padding: 100px 0; }

.pricing-top-wrapper { align-items: flex-start }

.pricing-wrapper { position: relative; justify-content: start; padding: 45px 0 65px 0; width: 47%; color: white; }
.pricing-wrapper .section-container { align-items: flex-start; width: 85%; }

.pricing-header-img { height: 55px; width: auto; border-radius: 5px; }
.pricing-wrapper h4 { margin: 35px 0 20px 0; color: white; text-align: left; }
.pricing-wrapper h2 { margin-top: 35px; width: 100%; color: white; text-align: left; }
.pricing-span { font-size: 20px; font-weight: 400; }

.price-details-wrapper { margin-top: 20px; }
.price-detail { flex-direction: row; justify-content: start; flex-wrap: nowrap; margin: 12px 0; }
.price-detail img { margin-right: 15px; height: 25px; width: auto; }

@media only screen and (max-width: 980px) {
   .pricing-wrapper { margin: 30px 0; width: 100%; }
}


/* Portfolio */
.portfolio-hero-text-wrapper { align-items: flex-start; width: 55%; }
.portfolio-hero-text-wrapper h1, .portfolio-hero-text-wrapper p { width: 100%; text-align: left; }

.portfolio-hero-img { width: 45%; height: auto; box-shadow: 0px 5px 20px rgb(200, 200, 200); border-radius: 10px; }

@media only screen and (min-width: 1350px) {
   .portfolio-hero-text-wrapper { width: 45%; }
}

@media only screen and (max-width: 980px) {
   .portfolio-hero-text-wrapper, .portfolio-hero-img { margin: 10px 0; width: 95%; }
}

.portfolio-img-wrapper { flex-direction: row; justify-content: space-between; margin: 40px 0; }
.portfolio-img { margin: 15px 0; box-shadow: 0px 5px 20px rgb(200, 200, 200); border-radius: 10px; }
.portfolio-img-full { width: 100%; height: auto; }
.portfolio-img-half { width: 48%; height: auto; }
.portfolio-img-third { width: 31%; height: auto; }

.portfolio-btn-wrapper { justify-content: start; margin-top: 45px; }
.portfolio-btn-wrapper .btn { margin: 0 25px 0 0; }

@media only screen and (max-width: 980px) {
   .portfolio-img-third { width: 48%; }
   .portfolio-btn-wrapper { justify-content: center; }
   .portfolio-btn-wrapper .btn { margin: 10px 0px; }
}
 

/* Contact */
.form-container { padding: 10px 0 100px 0; }
.form-wrapper { justify-content: center; align-items: center; padding: 50px 0; width: 65%; }
.form-wrapper .section-container { flex-direction: row; justify-content: space-between; flex-wrap: wrap; width: 85%; }
.form-input-wrapper { margin: 15px 0; width: 48%; }
.form-input-message-wrapper { margin: 15px 0;  width: 100%; }
.form-wrapper label { color: white; font-size: 20px; }
.form-input { margin-top: 12px; padding: 10px 15px; width: 85%; color: white; font-family: 'Roboto', sans-serif; font-size: 17px; background-color: #323847; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 2px; }
.form-message-input { padding: 20px 0px 20px 15px; width: 96%; min-height: 80px; resize: vertical; }
.form-message-input::placeholder { color: rgb(150, 150, 150);  }

@media only screen and (max-width: 980px) {
   .form-wrapper { width: 95%; }
   .form-input-wrapper { width: 100%; }
   .form-message-input { width: 90%; }
}


/* Footer */
footer { padding: 60px 0 25px 0; }
.copyright { margin: 5px 0; text-align: center; }