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

body{
    background:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
}

.hero{
    width:100%;
}

.hero-image{
    width:100%;
    display:block;
    height:auto;
}

/* ===========================
   `Language Switcher
=========================== */

.language-switcher{
    position:absolute;
    top:28px;
    right:38px;
    z-index:999;
}

#languageBtn{
    background:rgba(255,255,255,.95);
    border:none;
    padding:8px 16px;
    border-radius:28px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
}

#languageBtn:hover{
    background:#ffffff;
}

.language-menu{
    position:absolute;
    top:48px;
    right:0;
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    overflow:hidden;
    min-width:190px;

    display:block;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:all .25s ease;
}

.language-menu.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.lang-item{
    padding:14px 18px;
    cursor:pointer;
    transition:.25s;
    font-size:15px;
}

.lang-item:hover{
    background:#f3f3f3;
}

/* Hero Search */

.hero-search{

    position:absolute;

    top:355px;

    left:275px;

    width:820px;

    z-index:999;

}

#aiSearch{

    width:100%;

    height:58px;

    border:none;

    outline:none;

    background:transparent;

    font-size:20px;

    color:#333;

    padding:0 20px;

}

#aiSearch::placeholder{

    color:#777;

}

.hero{
    width:100%;
    position:relative;
}

.hero-search{

    position:absolute;

    top:72.5%;
    left:4.2%;

    width:36.8%;
    height:7%;

    z-index:900;
}

#aiSearch{

    width:100%;
    height:100%;

    background:transparent;

    border:none;
    outline:none;

    font-size:22px;

    color:#333;

    padding-left:35px;
    padding-right:20px;

    font-family:inherit;
}

#aiSearch::placeholder{

    color:#8a8a8a;

}   

/* Search Button */


#conversationBox{

    position:absolute;

    top:73%;

    right:4%;

    width:32%;

    display:none;

    z-index:950;

}

.ai-card{

    background:#ffffff;

    border-radius:18px;

    padding:22px;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}

.ai-card h3{

    margin-bottom:12px;

}

.ai-card p{

    line-height:1.6;

}


/* ===========================
   AI Search Bar
=========================== */

.search-container{

    position:absolute;

    top:50%;
    left:4%;

    width:52%;
    height:60px;

    display:flex;
    align-items:center;

    background:#ffffff;

    border:2px solid #E6E6E6;

    border-radius:40px;

    box-shadow:0 10px 30px rgba(0,0,0,.10);

    overflow:hidden;

    z-index:999;

}

#aiSearch{

    flex:1;

    height:100%;

    border:none;
    outline:none;

    font-size:18px;

    padding:0 25px;

    background:transparent;

}

#aiSearch::placeholder{

    color:#888;

}

#micBtn,
#searchBtn{

    width:56px;
    height:56px;

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:22px;

}

#searchBtn{

    margin-right:6px;

    border-radius:50%;

}

#searchBtn:hover{

    background:#6C4CF1;

    color:#fff;

}

#micBtn:hover{

    color:#6C4CF1;

}