* {
    font-family: 'Poppins';
}
body {
    /* overflow-x: scroll !important; */
    background: rgb(37, 34, 49)  url('/resource/global_images/svg/doodles/circuit2.svg') no-repeat top / cover;
}
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 110px;
}

/* ANIMATION */

@keyframes status {
    0% {
        opacity: 0;
        pointer-events: all;
    }
    8% {
        opacity: 1;
        pointer-events: all;
    }
    90% {
        opacity: 1;
        pointer-events: all;
    }
    100% {
        opacity: 0;
        pointer-events: none;
    }
}

/* title */
#title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    font-weight: 700;
    text-align: center;

    width: 100%;
    max-width: 92vw;
    background-color: whitesmoke;
    border-radius: 0 0 .8rem .8rem;
    box-shadow: 0 2em 3em var(--shadow-better);
}
#title span {
    font-size: 4em;
    padding: 0 2rem;
    border-radius: 0 0 .3em .3em;
    background: var(--yellow-gradient);
}#title-child {
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 2em;
    
    height: --tcheight;
    padding: 2em; /** padding-bottom: 0; */
    border-radius: 0 0 .8rem .8rem;
    color: var(--medium-grey);
    
    overflow: hidden;
    /* transition: 1s ease; */
    z-index: 1;
}
#title-child.hide { 
    height: calc(80px + 2em);
}
/* #title-child:hover { height: 60px; } */
#title-child button {
    min-height: 50px;
    max-height: 50.1px;
    width: 100%;

    background-color: var(--medium-grey);
    color: white;
    font-size: 60px;
    border-radius: .1em;
    transition: .2s ease;

    display: flex; justify-content: center; align-items: center;
} #title-child button:hover {background-color: #5a5663;} #title-child button:active {
    background-color: #4a4554;
}

/* base */
.page-cont {
    display: grid;
    /* place-items: center; */
    /* grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); */
    gap: 40px;
    padding-block: 40px;
    padding-inline: 3vw;
}
.page-cont section {
    width: 60rem;
    max-width: 90vw;
}


/* Contact Form */

.email-form {
    background: var(--blue-gradient);
    padding: 15px;
    border-radius: 10px;
    height: max-content;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    box-shadow: 0 0 0 0 var(--shadow) ;
    transition: box-shadow 400ms ease;
}
.email-form:focus-within {
    box-shadow: 0 11px 12px -2px var(--shadow-better) ;
}

/* form */
#form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* header */
.email-form-header {
    display: flex;
    justify-content: space-between;
    padding-inline: 5px;
}

/* inputs */
.form-cont div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* padding: 5px; */
    gap: .6em;
}
form div input, textarea {
    font-size: 1.4rem !important;
    padding: .3rem;
    border-radius: .2em;
    border: none;
    transition: outline .3s ease;
}
form div input:focus-within, textarea:focus-within {
    outline: 4px solid rgb(165, 188, 243);
}
.form-cont div input {
    color: #323232;
}

/* message */
.form-message textarea {
    color: #323232;
    resize: none;
    width: 100%;
    height: 180px;
}

/* button */
.form-cont button {
    border: none;
    border-radius: .3em;
    padding: .2em;
    color: white;
    font-family: 'Poppins';
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    background-color: var(--medium-grey);
    cursor: pointer;
    transition: background-color 200ms ease;
    min-height: 2em;
    width: 100%;
}
.form-submit:hover {
    background-color: #46424d;
}

/* tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    aspect-ratio: 1;
}
  /* tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 280px;
    height: auto;
    padding: 6px;
    background-color: white;
    color: rgba(22, 22, 22, 0.8);
    box-shadow: 0 5px 6px 1px var(--shadow-better);
    font-weight: 600;
    text-align: center;
    border-radius: 6px;

    position: absolute;
    right: 110%;
    z-index: 1;
  }
    .tooltip img {
        aspect-ratio: 1;
        height: 2em;
    }
    .tooltip:hover img {
        opacity: 0.8;
    }
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

/* status */
#swal2-title, #swal2-html-container {
    font-family: 'Poppins';
}


/* Contact Inofrmation */

.information-cont {
    background-color: #39373d;
    color: white;
    padding: 20px;
    border-radius: 10px;
    padding-bottom: 0px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    box-shadow: 0 0 0 0 var(--shadow);
    transition: box-shadow 400ms ease;
}
.information-cont:hover {
    box-shadow: 0px 11px 12px -2px var(--shadow-better);
}

.information-cont {
    display: grid;
    gap: 20px;
    padding: 20px;
}

#inf-child-cont {
    display: grid;
    grid-template-columns: 1fr 66px;
    height: 90px;
    
    padding: 12px;
    border-radius: 4px;
    transition: background-color .3s ease;
}
#inf-child-cont:hover #inf-link {
    visibility: visible;
}

#inf-link {
    visibility: hidden;

    background: url(/resource/global_images/socialmedia/external-link-white.png);
    background-position: center;
    background-size: 35px;
    background-repeat: no-repeat;
    position: relative;
    background-color: rgb(0,0,0,.0);
    transition: background-color .2s ease;
    border-radius: 8px;
}
#inf-link:hover {
    background-color: rgb(0,0,0,.3);
}
#inf-link a span {
    position: absolute;
    height: 100%;
    width: 100%;
}

/* email div */
.email {background-color: hsl(1, 92%, 61%);}
.email:hover {background-color: rgb(255, 49, 13);}
/* phone number div */
.phone {background-color: rgb(105, 216, 91);}
.phone:hover {background-color: rgb(30, 255, 0);}
/* address div */
.address {background-color: rgb(165, 70, 255);}
.address:hover {background-color: rgb(132, 0, 255);}

/*
.contact-main-cont {
    display: flex;
}

.contact-email-cont {
    display: grid;
    background-color: #ff6f65;
    border-radius: 6px;
    padding: 20px;
    margin: 30px;
    margin-bottom: 0%;
    transition: background-color 400ms ease;
}

.contact-email-cont p {
    color: #fff;
    text-decoration: none;
    font-family: 'Adobe Clean';
    font-size: 20px;
}
.contact-email-cont a {
    color: #fff;
    text-decoration: none;
    font-family: 'Adobe Clean';
    font-size: 40px;
}

.contact-email-cont:hover {
    background-color: #ff3123;
}

.contact-whatsapp-cont {
    background-color: #71f781;
    border-radius: 6px;
    padding: 20px;
    margin: 30px;
    margin-bottom: 0%;
    transition: background-color 400ms ease;
}
.contact-whatsapp-cont:hover {
    background-color: #1bce30;
}

.contact-whatsapp-cont p {
    color: #fff;
    text-decoration: none;
    font-family: 'Adobe Clean';
    font-size: 20px;
}
.contact-whatsapp-cont a {
    color: #fff;
    text-decoration: none;
    font-family: 'Adobe Clean';
    font-size: 40px;
}

.contact-address-cont {
    background-color: #ccc;
    border-radius: 6px;
    padding: 20px;
    margin: 30px;
    transition: background-color 400ms ease;
}
.contact-address-cont:hover {
    background-color: #fff;
}
.contact-address-cont p, h4 {
    color: #404040;

}
.contact-address-cont h4 {
    font-size: 40px;
}
.contact-address-cont p {
    font-size: 20px;
}
*/