/* ----> Global Default <---- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body, a, p, div, section, input, textarea, select, option, head, nav, h1, h2, h3, h4, h5, h6, span, label {
    font-family: "ITC Eras Book Regular", Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: var(--text-none);
    line-height: 1.2;
}

.outline {outline: 1px dashed var(--danger);}

/* -----> Utilities <----- */

.primary-bg {background-color: #171c22;}

.space-xs {padding: var(--space-xs);}
.space-sm {padding: var(--space-sm);}
.space-md {padding: var(--space-md);}
.space-lg {padding: var(--space-lg);}
.space-xl {padding: var(--space-xl);}

.txt-aln-center {text-align: var(--align-center);}

.txt-capitalized {text-transform: var(--text-capitalize);}

.col-6 {width: var(--col-6);}
.col-7 {width: var(--col-7);}
.col-8 {width: var(--col-8);}
.col-12 {width: var(--col-12);}

.font-w-md { font-weight: var(--font-medium);}
.font-w-b { font-weight: var(--font-bold);}

.txt-clr-light {color: var(--light);}
.txt-clr-info {color: var(--accent-info);}

.txt-clr-gray-200 {color: var(--gray-200);}
.txt-clr-gray-300 {color: var(--gray-300);}
.txt-clr-gray-400 {color: var(--gray-400);}
.txt-clr-gray-500 {color: var(--gray-500);}
.txt-clr-gray-600 {color: var(--gray-600);}
.txt-clr-gray-700 {color: var(--gray-700);}
.txt-clr-gray-800 {color: var(--gray-800);}
.txt-clr-gray-900 {color: var(--gray-900);}

.m-auto {margin: 0 auto;}

.padding-sm {padding: var(--space-sm);}
.padding-md {padding: var(--space-md);}
.padding-lg {padding: var(--space-lg);}
.padding-xl {padding: var(--space-xl);}

.card {
    background: var(--light);
    border-radius: var(--border-radius-md);
    border: solid 1px var(--gray-300);
    box-shadow: var(--shadow-lg);
    min-height: 15.625em;
}

.card__service {
    text-align: var(--align-center);
}

.card__service > h3 {
    border-bottom: solid 1px var(--gray-300);
    padding: var(--space-md);
}

.card__service > ul {
    list-style-position: inside;
    padding: var(--space-md);
    list-style-image: url('../images/checked.png');
}

.card__service > ul li {padding: var(--space-sm); text-align: left;}

/* ----> Box Model Default <---- */

.container {display: var(--display-flex); flex-direction: var(--flex-column);}
.container__item {width: var(--col-12);}
section.wrapper{gap: var(--space-xl);}

@media screen and (min-width: 48em) {.container { flex-direction: var(--flex-row);}}
.container__wrap,
section.wrapper {width: var(--col-11); margin: 0 auto;}

@media screen and (min-width: 64em) {
    
   div.hero-container > div.container__wrap {width: 64em; margin: 0 auto;}
   section.wrapper {width: 64em; margin: 0 auto; align-items: var(--align-center);}

}

/* ----> Hero Background <---- */

.hero-container {
    width: 100%;
    background-size: cover;  
    background-position: center;  
    background-repeat: no-repeat; 
}

.hero-container-img{background-image: url("../images/hero-background.jpg"); background-attachment: fixed;}
.testimonial-img{background-image: url("../images/contact-background.png");}

header > div.container {flex-direction: var(--flex-row); align-items: var(--align-center);}

header > div.container > div.logo img {min-width: 150px; max-width: 100px;}

header > div.container > div.menu div{text-align: var(--text-right);}

header > div.container > div.menu div img{width: var(--text-4xl);cursor: pointer; margin-top: var(--space-lg)}

.menu__list { display: var(--display-none);}
.menu__list-is-open { display: block; }

.menu__list-is-open--ui {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--col-12);
    height: 100vh;
    background: var(--light);
}

.menu__list-is-open--ui > div.menu__list-item:first-child {margin-top: var(--col-3);}

.menu__list-is-open--ui > div.menu__list-item:last-child span{
    position: absolute;
    top: 3em;
    right: 1.4em;
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    border: solid 1px var(--gray-600);
    width: 1.7em;
    height: 1.7em;
    border-radius: var(--col-12);
    background-color: var(--dark);
    color: var(--light);
    font-weight: var(--font-medium);
    text-align: var(--align-center);
}

.menu__list-is-open--ui > div.menu__list-item {
    padding: var(--space-md);
    font-size: var(--text-xl);
    text-transform: var(--text-capitalize); 
    width: var(--col-12);
    text-align: var(--align-center) !important;
}

.menu__list-is-open--ui > div.menu__list-item a {color: var(--dark);font-weight: var(--font-bold);}

@media screen and (min-width: 64em) {
    
    header > div.container > div.menu div.menu__icon{display: var(--display-none);}

    .menu__list { 
        display: var(--display-flex); 
        text-transform: var(--text-capitalize); 
        gap: var(--space-lg);
        justify-content: var(--justify-end);
        margin-top: var(--space-xl);
    }

    .menu__list-item:last-child { display: var(--display-none); }

    .menu__list-item a {
        text-decoration: var(--text-none);
        color: var(--light);
        font-weight: var(--font-bold);
    }

}

section.hero h1, h3 {color: var(--light)}

section.hero div.hero__item {
    flex-direction: var(--flex-row);
    gap: var(--space-md);
    margin: 0 auto;
}

section.hero div.hero__item img {width: var(--col-10);min-width: 5em;}
section.hero div.hero__item-item div:first-child {width: var(--col-7);}

@media screen and (min-width: 64em) {
    
    section.hero h1 {font-size: var(--text-4xl);}
    section.hero div.hero__item {gap: var(--space-xl); padding: 0 9.375em;}
    section.hero div.hero__item-item div:first-child {width: var(--col-6);}

}

.call-to-action__item {
    background: var(--success);
    padding: var(--space-md) 5.7em;
    border-radius: var(--space-sm);
    box-shadow: var(--shadow-lg);
}

.our-company section img {width: 3em;}
.features-services {background: #edf2fb;}

/* ----> Testimonial Carousel <---- */

.testimonial-carousel {
    max-width: var(--col-8);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.carousel-track {display: flex;transition: transform 0.7s ease-in-out;}

.testimonial {
    min-width: 100%;
    padding: var(--space-xl);
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.testimonial.active {opacity: 1;transform: translateX(0);}

.quote {
    font-size: 1.2rem;
    font-style: italic;
    margin-bottom: 2em;
}

.author {font-weight: bold;}

.company {color: var(--gray-500);font-size: 0.9rem;}

.controls {margin-top: 20px;}

.controls button {
    background: var(--gray-900);
    color: var(--light);
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    margin: 0 5px;
}

.controls button:hover {background: #555;}

/*------> Footer <---- */

.footer {
    align-items: var(--align-start) !important;
}