@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* font-family: 'Bitter', serif; */

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 2rem 13rem;
}

/* ARROW NAVBAR  */

.arrowUlIndex {
    font-size: 32px;
    position: absolute;
    left: 0; 
    top: 139px;
    color: royalblue;
}

.arrowUlOurServices {
    font-size: 32px;
    position: absolute;
    left: 0; 
    top: 183px;
    color: cadetblue;
}

.arrowUlProducts {
    font-size: 32px;
    position: absolute;
    left: 0; 
    top: 228px;
    color: indianred;
}

.arrowUlContactUs {
    font-size: 32px;
    position: absolute;
    left: 0; 
    top: 270px;
    color: darkseagreen;
}

/* Titles: */

.titleContact{
    color: darkseagreen;
}
.titleProducts{
    color: indianred;
}
.titleOurServices{
    color: cadetblue;
}
.titleAboutUs{
    color: royalblue;
}

/* GENERAL OF ALL PAGES */

/* LEFT COLUMN  */

.generalContainer {
    display: flex;
    flex-direction: row;
}

.leftColumn {
    width: 32%;
}

.navBar{
    position: relative;
}
.containerLogo {
    display: flex;
    justify-content: center;
}

.logo {
    width: 14rem;
}

.separatorUl {
    width: 350px;
}

.navList {
    display: flex;
    flex-direction:column;
    list-style: none;
    font-family: 'Bitter', serif;
    font-size: 37px;
    font-weight: 800;
    margin-left: 3.3rem;
}

.navListAnchor {
    text-decoration: none;
    cursor: pointer;
    color: #746f72;
}

.navListAboutUs, .aboutUsHv:hover {
    color: royalblue;
}

.navListOurServices, .ourServicesHv:hover {
    color: cadetblue;
}

.navListProducts, .productsHv:hover {
    color: indianred;
}

.navListContactUs, .contactUsHv:hover {
    color: darkseagreen;
}

.containerIcons {
    display: flex;
    flex-direction: column;
}

.worldMap {
    width: 20rem;
    margin-top: 1rem;
}
.textMb {
    margin-top: 0.5rem;
}
.textMt {
    margin-top: 1rem;
}
.officeInfo{
    margin-left: 0.5rem;
}

/* RIGHT COLUMN  */

.rightColumn {
    width: 70%;
    margin-left: 1rem;
}

.rightSection {
    margin-top: 5rem;
    margin-left: 2rem;
}

.titles {
    font-size: 60px;
    font-family: 'Bitter', serif;
    font-weight: 800;
    margin-left: 0.5rem;
}

.rightSection_Img {
    width: 40rem;
    margin-bottom: 1rem;
}

.ourServices__img, .products__img {
    width: 100%;
    height: 18rem;
}

.textContainer {
    width: 58%;
    margin-left: 0.2rem;
}

.text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.listOurServices {
    margin-left: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

/* CONTACT US */

.containerAddressContactUs {
    margin-left: 1rem;
    position: relative;
}

.textContactUs {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin-top: 1rem;
}

.containerForm {
    display: flex;
    margin-top: 1rem;
    margin-left: 1rem;
}

.containerFormLeft {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.containerFormRight {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.labelForm {
    width: 100%;
    margin-bottom: 0.1rem;
    font-family: 'Bitter', serif;
    font-weight: 500;
    font-size: 13px;
}

.inputForm, .buttonSend {
    width: 80%;
    background-color: lightgray;
    border: none;
    height: auto;
    margin-bottom: 0.5rem;
    padding: 0.2rem;
    border-radius: 5px;
}

.inputForm:focus {
    outline: none;
    font-family: 'Bitter', serif;
}

.buttonSend {
    background-color: darkseagreen;
    padding: 1rem;
    margin-top: 2.1rem;
    margin-left: 2px;
    cursor: pointer;
}

.buttonSend:hover {
    background-color: seagreen;
    transition: 0.8s;
}

.textAreaForm {
    height: 5rem;
    resize: none;
}
.sectionDirecciones{
    display: flex;
    justify-content: space-between;
    width: 80%;
}
.hidden{
    visibility: hidden;
}
/* MEDIA QUERYS CELULARES */

@media only screen and (max-width: 700px) {
    body{
        margin: 0;
    }
    .generalContainer {
        flex-direction: column;
    }
    .leftColumn {
        width: 100%;
    }
    .logo {
        margin-top: 1.5rem;
    }
    .separatorUl {
        display: none;
    }
    .navList {
        font-size: 30px;
        margin: 0;
        margin-top: 2rem;
    }
    .navList li {
        text-align: center;
    }
    .containerArrowUl {
        display: none;
    }
    .sectionWorldMap, .containerContactUsResponsive {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1.5rem;
    }

    .containerIcons {
        align-items: center;
    }
    .worldMap {
        width: 20rem;
        margin-top: 1.5rem;
    }
    .rightColumn{
        margin: 0;
        width: 100%;
    }
    .rightSection {
        margin: 0;
        margin-top: 1.5rem;
    }
    .titles {
        font-size: 55px;
        margin: 0;
        text-align: center;
    }
    .rightSection_Img, .ourServices__img, .products__img {
        width: 20rem;
        position: relative;
        left: 50%;
        transform: translate(-50%);
        margin-top: 1.5rem;    
    }
    .ourServices__img, .products__img {
        height: 12rem;
    }

    .textContainer {
        width: 100%;
        margin: 2rem 0;
    }
    .text {
        padding: 10px;
    }
    .textMb {
        text-align: center;
    }
    .listOurServices {
        width: 80%;
        padding: 1rem;
    }
    .containerImg {
        display: none;
    }
    .textContactUs {
        text-align: center;
        margin: 0;
    }
    .labelForm {
        font-size: 12px;
    }    
}

/* MEDIA QUERYS TABLET */

@media (min-width:701px) and (max-width: 1400px) {
    body{
        margin: 2rem 3rem;
    }
    .separatorUl {
        display: none;
    }
    .navList {
        font-size: 30px;
        margin: 0;
        margin-top: 2rem;
    }
    .navList li {
        text-align: center;
    }
    .containerArrowUl {
        display: none;
    }
    .sectionWorldMap, .containerContactUsResponsive {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1.5rem;
    }
    .containerIcons {
        align-items: center;
        width: 110%;
    }
    .worldMap {
        width: 20rem;
        margin-top: 1.5rem;
    }
    .rightColumn{
        margin-left: 4rem;
    }
    .rightSection {
        margin: 0;
        margin-top: 1.5rem;
    }
    .titles {
        margin: 0;
        text-align: center;
    }
    .rightSection_Img, .ourServices__img, .products__img {
        width: 100%;
        position: relative;
        left: 50%;
        transform: translate(-50%);
        margin-top: 1.5rem;    
    }
    .textContainer {
        width: 100%;
        margin: 2rem 0;
    }
    .textMb {
        text-align: center;
    }
    .listOurServices {
        width: 80%;
        padding: 1rem;
    }
    .containerImg {
        display: none;
    }
    .textContactUs {
        text-align: center;
        margin: 0;
    }
    .labelForm {
        font-size: 15px;
    } 
}

@media (min-width:701px) and (max-width: 1000px)  {
    .products__img, .ourServices__img {
        height: 12rem;
    }
}

@media (min-width:1001px) and (max-width: 1400px)  {
    .products__img, .ourServices__img {
        height: 15rem;
    }
}