/* --- CSS Variables --- */
:root {
    --primary: #6e6e6e;
    --secondary: #232323;
    --white: #fff;
    --black: #000;
    --accent: #f45b1e;
    --accent2: #c10fff;
    --nav-link: #1e2126;
    --secondary-font: "Jost", sans-serif;
    --primary-font: "Jost", sans-serif;
    --section-padding: 80px;
    --pt: 80px;
    --pb: 80px;
    --pt-half: 40px;
    --pb-half: 40px;
}

/* --- Typography --- */
* {margin: 0;padding: 0;box-sizing: border-box;}
*:last-child {margin-bottom: 0;}
body {font-family: var(--primary-font);color: var(--primary);line-height: 1.6;font-size: 16px;}
b,strong {font-weight: 700;}
p a:hover {color: var(--accent2);}
h1,.h1,
h2,.h2,
h3,.h3,
h4,.h4,
h5,.h5,
h6,.h6 {font-family: var(--secondary-font);font-weight: 500;color: var(--secondary);line-height: 1.2;margin-bottom: 20px;}
p,li {margin-bottom: 20px;}
h1,
.h1 {font-size: 60px;font-weight: 400;}
h2,.h2 {font-size: 45px;}
h3,.h3 {font-size: 35px;}
h4,.h4 {font-size: 22px;}
h5,.h5 {font-size: 20px;}
h6,.h6 {font-size: 18px;}
.container {max-width: 1170px;margin: 0 auto;padding: 0 15px;width: 100%;}
img {max-width: 100%;height: auto;vertical-align: bottom;}
li {list-style: none;}
a {text-decoration: none;transition: 0.3s all;display: inline-block;color: var(--accent);}

/*--- buttons ----*/
a.btn svg {width: 21px;height: 21px;object-fit: contain;}
a.btn {display: inline-flex;align-items: center;justify-content: center;gap: 5px;font-size: 14px;font-weight: 500;color: var(--black);text-transform: uppercase;padding: 12px 24px;line-height: 1;border: 1px solid #000;transition: 0.5s;text-align: center;}
a.btn:hover,
a.btn:focus,
a.btn:active {transform: scale(0.9);}

/* --- Utility Classes --- */
.section-padding {padding: var(--section-padding) 0;}
.pt {padding-top: var(--pt);}
.pb {padding-bottom: var(--pb);}
.pt-half {padding-top: var(--pt-half);}
.pb-half {padding-bottom: var(--pb-half);}
span.subtitle {font-size: 15px;font-weight: 500;text-transform: uppercase;color: var(--accent);line-height: 30px;display: inline-flex;align-items: center;}
span.subtitle svg {margin-right: 5px;width: 15px;height: 15px;object-fit: contain;}
main {min-height: calc(100vh - 220px);}

/*--- scroll to top ----*/
button#scrollToTop {border-radius: 50%;background-color: var(--accent);border: 0;width: 31.5px;height: 31.5px;cursor: pointer;position: fixed;z-index: 99;right: 30px;bottom: 30px;transition: 0.3s;align-items: center;justify-content: center;}
button#scrollToTop svg {margin-left: 0px;vertical-align: middle;transform: translate(0, -20%) rotate(180deg);width: 1.6em;height: .6em;fill: var(--white);}
button#scrollToTop:hover {background-color: #FB4700;}

/* --- Header & Footer --- */
header {padding: 12px 0;}
.header-wrapper {display: flex;align-items: center;justify-content: space-between;}
.header-left a {max-width: 228px;}
.header-left img {max-width: 228px;}
nav.header-nav {margin-left: 30px;}
header ul.nav-list {display: flex;gap: 20px;}
header ul li {margin: 0;}
header ul li a {padding: 13px 0;color: var(--nav-link);line-height: 1.334;font-size: 15px;text-transform: capitalize;}
header ul li a.active {color: var(--accent);}
header ul li a:hover {color: var(--accent);}
.header-right {display: flex;gap: 20px;}
.header-right .contact-box {display: flex;align-items: center;gap: 10px;padding: 0;}
.contact-box .icon {max-width: 27px;}
header .contact-info span {font-size: 14px;display: block;line-height: 1.3;}
header .contact-info a {font-size: 15px;color: #222;font-weight: 500;}
header .contact-info a:hover {color: var(--accent);}

/*---- mobile header ----*/
.menu-toggle {flex-direction: column;justify-content: center;cursor: pointer;width: 25px;height: 25px;gap: 5px;}
.menu-toggle span {display: block;height: 3px;width: 100%;background: var(--black);border-radius: 2px;transition: 0.3s;}

/*--- footer ----*/
footer {background-color: #222;color: #fff;padding: 30px 0 0;text-align: center;}
ul.footer-menu {display: flex;gap: 25px;align-items: center;}
ul.footer-menu li {margin: 0;}
ul.footer-menu li a {font-size: 15px;color: var(--white);}
ul.footer-menu li a:hover {color: var(--accent);}
.footer-top {display: flex;align-items: center;justify-content: space-between;gap: 40px;padding: 13px 0;border-top: 1px solid #D5D5D5;border-bottom: 1px solid #D5D5D5;}
.footer-social a {border: 1px solid #69727d;display: inline-flex;width: 34px;height: 34px;border-radius: 50%;align-items: center;justify-content: center;transition-duration: .3s;transition-property: transform;}
.footer-social a svg {width: 17px;height: 17px;fill: var(--white);}
.footer-social a:hover,
.footer-social a:focus,
.footer-social a:active {border-color: var(--accent);background-color: var(--accent);opacity: .9;transform: scale(.9);}
ul.footer-menu li a.active {color: var(--accent);}
.footer-bottom {padding: 15px 0;}
.footer-bottom p {font-size: 15px;line-height: 1.2;}

/*---- responsive ----*/
@media(max-width: 1199px) {
    :root {
        --pt: 60px;
        --pb: 60px;
        --pt-half: 30px;
        --pb-half: 30px;
    }
    /*-- typography --*/
    h1,.h1 {font-size: 50px;}
    h2,.h2 {font-size: 40px;}
    h3,.h3 {font-size: 30px;}
    h4,.h4 {font-size: 22px;}

    /*---- header ----*/
    .menu-toggle {display: flex !important;order: 3;}
    nav.header-nav {position: fixed;margin: 0;width: 300px;background-color: var(--accent);height: 100%;top: 0;right: 0;padding: 30px;display: none; z-index: 9;}
    .menu-open nav.header-nav {display: block;}
    nav.header-nav ul.nav-list {flex-direction: column;margin-top: 70px;gap: 0;}
    header ul li a {padding: 15px;margin: 0;color: var(--white);font-weight: 500;}
    header ul li a.active,
    header ul li a:hover,
    header ul li a:focus {color: var(--black);}
    .toggle-close {display: block !important;height: 50px;text-align: right;margin-right: -20px;margin-top: -20px;}
    .toggle-close svg {fill: var(--white);width: 50px;height: 50px;cursor: pointer;}
    .header-right {order: 2;}
    body {position: relative;}
    body::before {content: '';display: block;position: absolute;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);left: 0;top: 0;transition: 0.3s;opacity: 0;visibility: hidden; z-index: 2;}
    body.menu-open::before {opacity: 1;visibility: visible;}

    /*---- footer ----*/
    .footer-top {flex-wrap: wrap;justify-content: center;gap: 20px;}
}

@media(max-width: 991px) {
    :root {
        --section-padding: 60px;
    }

    /*---- header -----*/
    .header-left a {max-width: 200px;}
    .header-left img {max-width: 100%;}
    br {display: none;}
}

@media(max-width: 767px) {
    :root {
        --section-padding: 40px;
        --pt: 40px;
        --pb: 40px;
        --pt-half: 20px;
        --pb-half: 20px;
    }

    /*-- typography --*/
    h1,.h1 {font-size: 42px;}
    h2,.h2 {font-size: 32px;}
    h3,.h3 {font-size: 26px;}
    h4,.h4 {font-size: 20px;}

    /*--- header -----*/
    .header-right {display: none;}
    .header-left img {width: 70%;}

    /*--- footer ----*/
    ul.footer-menu {flex-wrap: wrap;justify-content: center;gap: 10px 20px;}
}