/**** Index ****/
.background-index {
    position           : absolute;
    top                : 0;
    left               : 0;
    width              : 100%;
    min-height         : 100vh;
    background         : url(../img/background.webp);
    background-size    : cover;
    background-position: top;
    background-repeat  : no-repeat;
    z-index            : -1;
}

.index {
    width                : 100%;
    min-height           : 100vh;
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, auto));
    align-items          : center;
    gap                  : 1.5rem;
}

.index__jumbotron {
    height         : 100%;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
}

.index__jumbotron-title {
    margin-top: 4rem;
}

.index__jumbotron-logo {
    width: var(--width-logo);
}

.index__jumbotron-isologo {
    width: var(--width-isologo);
}

.index__jumbotron-subtitle {
    color      : var(--font-color-secondary);
    line-height: 31px;
    text-shadow: 6px 9px 66px black;
}

.index__jumbotron-btn {
    width     : 22.2rem;
    margin-top: 2rem;
}

/**** Service ****/

.service {
    padding: 3rem 0 5rem;
    color  : var(--font-color-main);
}

.heading {
    text-align: center;
    padding   : 0 0 3rem;
}

.service__container {
    flex-wrap: wrap;
    gap      : 1.5rem;
}

.service__container-card {
    width          : 100%;
    min-height     : 300px;
    flex           : 1 1 30rem;
    position       : relative;
    overflow       : hidden;
    box-shadow     : 0 .5rem 1rem rgba(0, 0, 0, .1);
    border         : .2rem solid rgba(7, 45, 96, .3);
    cursor         : pointer;
    border-radius  : .5rem;
    justify-content: center;
    align-items    : center;
}

.service__container-card .info {
    width          : 100%;
    height         : 100%;
    position       : absolute;
    top            : -200%;
    left           : 0;
    padding        : 0 .8rem;
    transition     : .5s top ease-out;
    display        : flex;
    flex-direction : column;
    justify-content: center;
}

.service__container-card .info h3 {
    text-align: center;
}

.service__container-card .info p {
    font-size: var(--font-size-textsnd);
    color    : #666;
    padding  : .5rem;
}

.service__container-card .card {
    text-align: center;
    background: #FFF;
    padding   : 2rem 1rem;
    transition: .4s all ease-out;
}

.service__container-card .card i {
    font-size: 6rem;
    margin   : 1.5rem 0;
}

.service__container-card:hover .info {
    background-color: #FFF;
    top             : 0;
}

.service__container-card:hover .card {
    transform: translateY(200%);
}

/**** img scroller ****/

.carousel{
    position: relative;
    width: 100%;
    height: 80vh;
    margin: 0 auto;
}

.carousel__image{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.carousel__track-container{
    /* background-color: lightgreen; */
    height: 100%;
    position: relative;
    overflow: hidden;
}

.carousel__track{
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    height: 100%;
    transition: transform 250ms ease-in;
}

.carousel__slide{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.carousel__button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 100;
}

.carousel__button-right{
    right: -40px;
}

.carousel__button-left{
    left: -40px;
}

.carousel__button i{
    font-size: 3rem;
}

.is-hidden{
    display: none;
}

/**** clients ****/

.clients {
    padding: 6rem 0 3rem;
    color  : var(--font-color-main);
}

/**** contact ****/

.contact {
    padding: 6rem 0 3rem;
    color  : var(--font-color-main);
}

.contact__info {
    padding      : 2rem;
    box-shadow   : 0 .5rem 1rem rgba(0, 0, 0, .1);
    flex-wrap    : wrap;
    gap          : 10rem;
    border-radius: .5rem;
}

.contact__info-map {
    flex: 1 1 30rem;
}

.contact__info-map iframe {
    width        : 100%;
    height       : 70%;
    border-radius: .5rem;
}

.contact__info-address {
    padding: 0 5rem;
}

.contact__info-address p>i {
    text-align: center;
    padding   : 1rem;
}

.contact__info-form {
    flex      : 1 1 50rem;
    padding   : 5rem 1rem 1rem;
    text-align: center;
}

.contact__info-inputs {
    width          : 100%;
    flex-direction : column;
    justify-content: space-between;
    flex-wrap      : wrap;
}

.contact__info-input {
    width         : 100%;
    padding       : 1rem;
    margin        : 1rem 0;
    font-size     : var(--font-size-text);
    color         : var(--font-color-main);
    border        : none;
    border-bottom : .2rem solid var(--secondary-color);
    outline       : none;
    text-transform: capitalize;
}

.contact__info-form>textarea {
    width        : 100%;
    font-size    : var(--font-size-text);
    font-weight  : var(--font-weight-medium);
    color        : var(--font-color-main);
    resize       : none;
    border       : .2rem solid var(--secondary-color);
    border-radius: 2rem;
}

.contact__info-form>.btn {
    font-family   : 'Poppins', sans-serif;
    font-size     : var(--font-size-text);
    width         : 320px;
    font-weight   : var(--font-weight-medium);
    text-transform: uppercase;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    font-family: 'Poppins', sans-serif;
    font-size  : var(--font-size-text);
    font-weight: var(--font-weight-medium);
    color      : var(--font-color-secondary);
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    font-family: 'Poppins', sans-serif;
    font-size  : var(--font-size-text);
    font-weight: var(--font-weight-medium);
    /* Firefox 18- */
    color      : var(--secondary-color);
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    font-family: 'Poppins', sans-serif;
    font-size  : var(--font-size-text);
    font-weight: var(--font-weight-medium);
    /* Firefox 19+ */
    color      : var(--secondary-color);
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    font-family: 'Poppins', sans-serif;
    font-size  : var(--font-size-text);
    font-weight: var(--font-weight-medium);
    color      : var(--secondary-color);
}

input::placeholder,
textarea::placeholder {
    font-family: 'Poppins', sans-serif;
    font-size  : var(--font-size-text);
    font-weight: var(--font-weight-medium);
    color      : var(--secondary-color);
}

input[type=submit] {
    cursor: pointer;
}

.contact__info-input:focus {
    border-bottom: 2px solid var(--main-color);
}

.contact__info-form>textarea:focus {
    border: 2px solid var(--main-color);
}