/*---------------------------------------------------- Fonts & Reset ----------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Heebo:wght@100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Prata&family=Rozha+One&display=swap');

* {
    box-sizing: border-box !important;
    transition: all 0.5s ease;
}
html {scroll-behavior: smooth;}
body {
    font-family: "Heebo", sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #666666;
    overflow-x: hidden;
}
a {text-decoration: none !important; outline: none; transition: all 0.3s ease-in-out;}
h1,h2,h3,h4,h5,h6 {margin: 0; color: #111; font-weight: normal; line-height: normal;}
h1 {font-size: 45px; line-height: 1.2; font-weight: 700;}
h2 {font-size: 26pt; font-weight: 700;}
h3 {font-size: 16px; font-weight: 400;}
h4 {font-size: 22px; font-weight: 700;}
h5 {font-size: 14px;}
h6 {font-size: 13px;}
p {margin: 0 0 20px; font-size: 15px; line-height: 24px; color: #110f0a;}
ul,li,ol {margin:0;padding:0;list-style:none;}

/*---------------------------------------------------- Header ----------------------------------------------------*/
.header_section {
    width: 100%;
    background-image: url(../images/render-blender-banner.jpg);
    background-size: cover;
    background-position: 20% center;
    float: left;
}
.navbar {display: block;}
nav.navbar.navbar-expand-lg.navbar-light.bg-light { background: transparent !important; }
.navbar-light .navbar-toggler { border-color: #000; }
.navbar-light .navbar-toggler-icon { color: #000; }
.nav-link:hover, .nav-link:focus { color: #F3792B; }
.logo {width: 80px; float: left; margin-top: -10px;}
.logo img {width: 100%;}
.navigation-bar {float:left;margin-left:20px;}
.nav-link {padding: 0 17px; font-size: 14pt; color: #fff; text-transform: uppercase;}

/*---------------------------------------------------- Hero Banner ----------------------------------------------------*/
.layout_padding {padding-top: 80px; padding-bottom: 0px;}
.banner_section {width: 100%; float: left; padding-bottom: 80px;}
.banner_render {color: #fff; font-size: 50pt; font-weight: 700; line-height: 1.2; padding-bottom: 0;}
.browse_text {color: #fff; font-size: 24px; margin-bottom: 20px; line-height: 1.5;}
.banner_bt {width: 100%; float: left; margin-top: 20px;}
.read_bt {width: 15%; min-width: 120px;}
.read_bt a {display: block; background: #F3792B; color: #fff; font-size: 17pt; border-radius: 5px; padding: 10px 0; text-align: center;}
.read_bt a:hover {background: #0e0e10; color: #fff;}
.sub_menu {width: 100%; float: left; margin-top: 30px;}
.sub_menu li {float: left; padding: 0 18px; font-size: 14pt; color: #fff; margin-top: 50px; font-weight: 400;}
.sub_menu li span {font-size: 24px; font-weight: bold; color: #F3792B; margin-left: -10px;}

/*---------------------------------------------------- About Section ----------------------------------------------------*/
.about_section {width: 100%; float: left; padding-bottom: 100px; background: #1b1b1b;}
.about_section h1 {color: #fff; font-weight: bold; padding-bottom: 20px;}
.about_section p {color: #fff; margin-bottom: 20px;}
.information_about {padding-top: 20px; padding-right:5%;}

/* --------------------------------------------------- Calculator / Pricing Section ------------------------------------ */
.pricing_section {
    background: #1b1b1b;
    padding: 80px 20px;
    text-align: center;
}

.calculator {
    background: #2f2f2f;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    max-width: 500px;
    margin: 0 auto;
}

.calculator h1 { margin-bottom: 30px; color: #F3792B; }

.calculator .form-group { margin-bottom: 20px; text-align: left; }
.calculator label { font-weight: 600; margin-bottom: 8px; display: block; color: #fff; }
.calculator input,
.calculator select {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: #3a3a3a;
    color: #fff;
    font-size: 1rem;
}
.calculator input:focus,
.calculator select:focus { box-shadow: 0 0 8px #F3792B; background: #4a4a4a; }

.custom-btn {
    display: block;
    width: 100%;
    background-color: #F3792B;
    padding: 14px 0;
    border-radius: 12px;
    font-weight: bold;
    color: #fff;
    transition: all 0.3s ease;
    text-align: center;
}
.custom-btn:hover { background-color: #d16620; transform: translateY(-2px); }

/* Result display */
#result { display: none; margin-top: 20px; font-size: 1.2rem; color: #ffd580; }

/*---------------------------------------------------- Specifications ----------------------------------------------------*/
.specifications_section {width:100%; float:left; padding:80px 0 120px; background: linear-gradient(180deg, #1b1b1b 0%, rgba(243,121,43,1) 100%);}
.specifications_section h2 {color:#fff; padding-bottom:10px;}
.specifications_section h1, .specifications_section h3 {color:#fff; text-align:center;}
.specifications_section p {color:#fff; margin-bottom:20px; max-width:95%; margin-left: auto; margin-right: auto;}
.read_cta {width:25%; min-width:200px; margin:20px auto 0;}
.read_cta a {display:block; background:#fff; color:#F3792B; font-size:17pt; border-radius:5px; padding:10px 0; text-align:center;}
.read_cta a:hover {background:#000; color:#fff;}

/*---------------------------------------------------- FAQ Section ----------------------------------------------------*/
.faq_section {width:100%; float:left; padding:80px 0; background:#110f0a;}
.faq_section .title h2 {color:#fff; text-align:center;}
.faq_section h3 {color:#fff; font-weight:900; margin-bottom:20px;}
.faq_section .card {background:#222; border:none; margin-bottom:15px;}
.faq_section .card-header h4 button {font-size:22px; color:#fff; text-align:left; width:100%;}
.faq_section .card button:hover {color:#F3792B;}
.faq_section .card.show {background:#444; color:#fff;}

/*---------------------------------------------------- CTA Section ----------------------------------------------------*/
.cta_section {width:100%; float:left; padding:80px 0; background-image:url("../images/cta-banner-img.jpg"); background-size:cover; background-position:center;}
.cta_section h2 {color:#fff;}
.cta_section p {color:#fff; max-width:80%;}
.cta_section h4 {color:#F3792B; text-transform:uppercase;}
.image_blender img {width:100%;}

/*---------------------------------------------------- Footer ----------------------------------------------------*/
.footer_section {width:100%; float:left; padding:80px 0; background:#2B2927;}
.footer_section .footer_logo {max-width:90px; margin-top:-110px;}
.footer_section h3, .footer_section p {color:#fff;}
.footer_section .contact {padding-left:40px;}
.copyright {background:#000; padding:20px; text-align:center; color:#ccc;}