/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

@import url(typography.css);
@import url(button.css);
@import url(responsive.css);

:root {
    --font-defaul: "Nunito Sans", sans-serif;

    --dark: #102226;
    --gray: #5c5c5c;
    --border-color: #e3e3e3;
    --primary-color: #c1031a;
    --bg-gray: #ededed;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	min-height: 100%;
	font-weight: 400;
	font-style: normal;
	font-family: var(--font-defaul);
	font-size: 14px;
	line-height: 1.3;
    color: var(--dark);
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	max-width: 100%;
	border: none;
}
a {
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
	    -ms-transition: all .3s ease-in-out;
	     -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
}
a:hover , a:active , a:focus {
	text-decoration: none;
}
a:focus , input:focus , textarea:focus {
	outline: none;
}
*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Bootstrap Container */
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1304px;
    }
}

main {
    padding-top: 97px; /* 97px = height of header */
}

/* Header */
header {
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    position: absolute;
    width: 100%;
    top: 0;
}
    
    .logo {
        font-weight: 600;
        font-size: 24px;
        color: var(--dark);
        gap: 12px;
    }

        .logo img {
            max-width: 43px;
        }

        .logo span {
            margin-top: 10px;
            font-weight: 600;
        }

    header nav .nav-link {
        padding: 8px 16px;
        font-size: 14px;
        color: var(--gray);
        font-weight: 500;
        border: 1px solid transparent;
    }

        header nav .nav-link:hover {
            border-color: #dde3e4;
        }

    header .navbar-nav {
        padding-right: 40px;
    }

    header.fixed {
        position: fixed;
        background-color: #fff;
    }

        header.fixed .navbar-nav {
            padding-right: 0;
        }

/* Hero section */
.hero-section-description {
    padding-top: 50px;
    padding-bottom: 63px;
    gap: 56px;
}

.hero-section-image {
    max-width: 580px;
    background-color: var(--bg-gray);
    margin-top: -97px; /* 97px - height of header */
    height: calc(100% + 97px);
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.hero-info {
    box-shadow: 0 42px 72px -23px #75726829;
    border-radius: 6px;
    bottom: 60px;
    left: -120px;
    padding: 24px 32px;
    gap: 24px;
    color: var(--dark);
}

    .hero-info h3 , .table-title {
        font-size: 20px;
        line-height: 29px;
        letter-spacing: -0.7px;
        font-weight: 600;
    }

    .hero-info p {
        font-size: 14px;
        color: var(--gray);
    }

/* Partners section */
.partners {
    padding-top: 40px;
    padding-bottom: 40px;
}

    .partner-item {
        padding: 6px;
        width: 100%;
        max-width: 180px;
        max-height: 80px;
        color: #000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .partner-item p {
            font-size: 15px;
        }

/* Feature item */
.feature-item {
    height: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    border-top: 1px solid var(--border-color);
    gap: 14px;
}

    .feature-icon {
        max-width: 55px;
        max-height: 55px;
    }

    .feature-title , .review-from {
        font-size: 22px;
        line-height: 29px;
        letter-spacing: -0.6px;
        font-weight: 600;
        color: var(--dark);
    }

/* CTA section */
.cta {
    padding-top: 47px;
    padding-bottom: 47px;
}

/* Wrap region */
.wrap-region {
    border: 1px solid var(--border-color);
}

    .map-description {
        padding-left: 40px;
    }

    .map-image {
        max-width: 352px;
    }

/* Reviews */
.reviews {
    padding-top: 80px;
    padding-bottom: 80px;
}

    .review-item {
        max-width: 400px;
        padding: 32px;
        gap: 32px;
        border: 1px solid #dce2e4;
    }

        .review-name {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            line-height: 24px;
            font-weight: 600;
        }

    .separate-line {
        height: 1px;
        background-color: #dce2e4;
    }

/* FAQ */
.faq {
    padding-top: 60px;
    padding-bottom: 60px;
}

    .wrap-faq {
        max-width: 1000px;
    }

/* Accordion */
.accordion {
    border: 1px solid var(--bg-gray);
    padding: 0 20px;
    border-radius: 6px;
}

    .accordion-item:not(:last-child) {
        border: none;
        border-bottom: 1px solid var(--bg-gray);
    }

        .accordion-item:last-child {
            border: none;
        }

        .accordion-button:not(.collapsed) {
            background-color: transparent;
            box-shadow: none;
            color: var(--dark);
        }

            .accordion-button {
                padding: 20px 0 20px 40px;
                outline: none !important;
                box-shadow: none !important;
            }

                .accordion-item h4 {
                    font-size: 17px;
                    font-weight: 600;
                    letter-spacing: -0.8px;
                    line-height: 23px;
                }

                    .accordion-button:after , .accordion-button:before {
                        content: "";
                        position: absolute;
                        left: 0;
                        width: 16px;
                        height: 2px;
                        background-color: var(--primary-color);
                    }

                        .accordion-button:before {
                            transform: rotate(90deg);
                        }

                        .accordion-button:not(.collapsed):after {
                            opacity: 0.3;
                            transform: rotate(45deg);
                        }

                        .accordion-button:not(.collapsed):before {
                            opacity: 0.3;
                            transform: rotate(135deg);
                        }

            .accordion-body {
                padding: 0 0 20px 40px;
                font-size: 16px;
                color: var(--gray);
                line-height: 150%;
                letter-spacing: -0.5px;
            }

/* Footer */
footer {
    padding: 32px 0 22px 0;
    border-top: 1px solid var(--border-color);
}

    footer .logo {
        font-size: 19px;
    }

        footer h3 {
            font-size: 20px;
            line-height: 29px;
            margin-bottom: 10px;
        }

        footer p {
            font-size: 14px;
        }

        footer a {
            color: var(--gray);
        }

/* Catalog page */
.catalog-card {
    padding: 38px 27px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    gap: 24px;
    margin-bottom: 24px;
    min-height: 323px;
    justify-content: center;
    text-align: center;
}

    .catalog-card-img {
        max-width: 115px;
        max-height: 83px;
    }

    .catalog-card a {
        font-size: 16px;
    }

/* About us */
.hero-about-us .hero-section-image {
    max-height: 623px;
}

    .number-item {
        width: 100%;
        max-width: 33.3%;
        padding: 20px;
        gap: 19px;
        border: 1px solid var(--border-color);
    }

/* Contact page */
.contact-card {
    padding: 28px 20px;
    border: 1px solid var(--border-color);
    gap: 19px;
    min-height: 284px;
    justify-content: center;
    text-align: center;
    max-width: 50%;
    flex: 1;
}

    .contact-card a {
        font-size: 20px;
        font-weight: 600;
    }

/* Catalog page Table */
.table {
    border-color: var(--bg-gray);
    border-spacing: 0 8px;
    border-collapse: separate;
}

    .table thead tr th {
        background-color: var(--bg-gray);
        font-weight: 700;
    }

    .table tbody tr th ,
    .table tbody tr td {
        border-top: 1px solid var(--bg-gray);
    }

    .table th,
    .table td {
        width: 170px;
        height: 45px;
        padding-top: 0;
        padding-bottom: 0;
        text-align: center;
        vertical-align: middle;
    }

    .table tbody tr th {
        font-weight: 600;
        height: auto;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: left;
    }

        .table tbody tr td:last-child {
            background-color: #fae6e8;
        }

        .table a:hover {
            color: var(--dark) !important;
        }

.catalog-info {
    margin-top: 52px;
    padding: 38px 27px;
    border-radius: 6px;
    box-shadow: 0 42px 72px -23px #75726829;
    border: 1px solid var(--bg-gray);
    gap: 24px;
    text-align: center;
}

    .catalog-info-icon {
        max-width: 80px;
        max-height: 80px;
    }

.bottom-bar {
    padding: 10px;
    background-color: #fae6e8;
}

    .bottom-bar p {
        font-size: 11px;
        line-height: 1.4em;
        font-weight: 600;
        color: var(--dark);
    }

    .bottom-bar a {
        flex-shrink: 0;
    }

.border-bottom {
    border-bottom: 1px solid var(--border-color) !important;
}

.text-danger {
    color: var(--primary-color) !important;
}

.text-dark {
    color: var(--dark) !important;
}

.title {
    margin-bottom: 64px;
}

.gap-40 {
    gap: 40px;
}

.gap-30 {
    gap: 30px;
}

.gap-25 {
    gap: 25px
}

.gap-10 {
    gap: 10px;
}

.gap-y-30 {
    column-gap: 30px;
}

.text-section ul li {
    margin-bottom: 0;
    list-style-type: disc;
}

    .text-section ul p {
        margin-bottom: 0;
    }

.text-section a {
    color: var(--primary-color)
}

@media screen and (min-width: 992px) {

    header.fixed .header-action-btn {
        display: block !important;
    }
    
}

@media screen and (max-width: 992px) {

    main {
        padding-top: 0;
    }

    header {
        position: sticky !important;
        top: 0;
        background-color: #fff;
    }

        header nav .nav-link {
            border-bottom: 1px solid var(--border-color);
        }

    h1 {
        font-size: 24px;
        line-height: 33px;
        letter-spacing: -1.6px;
    }

    .hero-section-description {
        padding-top: 30px;
        padding-bottom: 30px;
        gap: 19px;
    }

    .btn-xl {
        font-size: 16px;
    }

    .hero-section-image {
        max-width: 100%;
        margin-top: 0;
        height: auto;
        max-height: auto;
    }

        .hero-about-us .hero-section-image {
            max-height: none;
        }

    .hero-info {
        left: 50%;
        margin-left: -25%;
        bottom: 30px;
    }

    h3 {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -1px;
    }

    .feature-title, .review-from {
        font-size: 24px;
        line-height: 29px;
    }

    .map-description {
        padding: 70px 20px 30px 20px;
    }

        .map-description h3 {
            font-size: 24px;
        }

    .review-item {
        margin: 0 auto 40px auto;
    }

    .gap-md-20 {
        gap: 20px;
    }

    .number-section .gap-40 {
        gap: 25px;
    }

        .number-item {
            max-width: 100%;
        }

    .catalog-info {
        margin-top: 0;
        margin-bottom: 30px;
    }

}

@media screen and (max-width: 768px) {

    .table {
        font-size: 12px;
    }

        .table thead {
            position: sticky;
            top: 97px;
        }

    .catalog-info {
        padding: 24px 24px 24px 96px;
        gap: 10px;
    }

        .catalog-info-icon {
            max-width: 44px;
            max-height: 44px;
            position: absolute;
            top: 50%;
            left: 24px;
            transform: translateY(-50%);
        }

    footer {
        padding-bottom: 100px;
    }

    .contact-card {
        max-width: 100%;
    }
    
}

@media screen and (max-width: 576px) {

    .hero-info {
        padding: 18px 16px;
        gap: 12px;
        left: 3%;
        right: 3%;
        margin-left: 0;
    }

    .reviews {
        padding-bottom: 0;
    }

    header .navbar-nav {
        padding-right: 0;
    }

    .catalog-card {
        padding: 15px;
        min-height: auto;
        gap: 10px;
        text-align: left;
        align-items: start;
        padding-left: 110px;
        position: relative;
    }

        .catalog-card p {
            font-size: 14px;
        }

        .catalog-card-img {
            width: 65px;
            height: 35px;
            position: absolute;
            left: 15px;
            text-align: center;
        }

            .catalog-card-img img {
                max-width: 65px;
                max-height: 35px;
            }

    .fs-md-20 {
        font-size: 20px;
    }

    .fs-md-16 {
        font-size: 16px;
        line-height: 1.3em;
    }

    .fs-md-14 {
        font-size: 14px;
    }

    .table.padding-sm-0 th , .table.padding-sm-0 td {
        padding-left: 0;
        padding-right: 0;
    }

    .table.nowrap th {
        white-space: nowrap;
    }

    .table thead {
        top: 87px;
    }

}

@media screen and (max-width: 480px) {
    
    .table {
        letter-spacing: -0.4px;
    }

}