/* 
*Copyright 2022 Thanura Silva.
*All rights reserved
*This project is licensed under MIT License.
*Please find the License file in the root directory.
*
*style.css
*
*Author - Thanura Silva <thanuras.dep8@gmail.com>
*/

/* ==Base Styles */



:root{
    font-size: 14px;
}
* {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
.clearfix{
    clear: both;
}
.small{
    font-size: 13px;
}
a {
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

/* ==Site-wide | layout */

/* ==Header  */
header{
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding: 6px;
    align-items: center;

}
header a{
    color: rgba(0,0,0,0.87);
    font-family: Arial, sans-serif;
    
}
header #sign-in{
    background: #1a73e8;
    width: 80px;
    height: 36px;
    border: transparent;
    border-radius: 4px;
    margin: 0 8px;
    padding: 10px 15px;
    color: white;
    text-align: center;
   
}
header #sign-in:hover{
    box-shadow: 0 1px 2px 0 rgb(66 133 244 / 30%), 0 1px 3px 1px rgb(66 133 244 / 15%);
    text-decoration: none;
    background: #2b7de9;
}
header #btn-for-apps{
    border-radius: 100%;
    width: 40px;
    height: 40px;
    padding: 8px;
    cursor: pointer;
}
header #btn-for-apps:hover{
    background-color:rgba(60,64,67,0.08);
   
}
header #btn-for-apps svg{
    fill:  #5f6368;
}

/* ==Main */

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
    justify-content: center;
}

main #logo-wrapper {
    margin-top: 180px;
    height: 110px;
    display: flex;
    align-items: center;
    
}
main #form-wrapper{
    width: 100%;
    padding: 20px;
}

main form #search-wrapper{
    display: flex;
    max-width: 582px;
    width: 100%;
    height: 44px;
    margin: auto;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    align-items: center;

}
main form #search-wrapper:hover{
   box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
   border-color: rgba(223,225,229,0);

}
main form #search-wrapper #icon-search{
   padding: 0 14px;
 
}

main form #search-wrapper svg{
    width: 20px;
    height: 20px;
    fill: #9aa0a6;
}


main form #search-wrapper input{
    width: 100%;
    margin-right: 10px;
    border: none;
    outline: none;

  }

main form #button-wrapper{
    padding-top: 18px;
    text-align: center;
}
main form button{
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    color: #3c4043;
    font-family: arial,sans-serif;
    font-size: 14px;
    margin: 11px 4px;
    padding: 0 16px;
    line-height: 27px;
    height: 36px;
    min-width: 54px;
    text-align: center;
    cursor: pointer;
    user-select: none
}
main form button:hover{
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    color: #202124;
}
main #offer-wrapper{
    font-size: 13px
}

main #offer-wrapper a{
    padding: 0 2px;
}
/* ==Footer */
footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    color: #70757a;
    background-color:#f2f2f2 ;
}


footer #country{
    padding: 15px 30px;
    font-size: 15px;
    border-bottom: 1px solid #dadce0;
    font-family: Arial, sans-serif;
}
footer #links{
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
footer #links > div{
    display: flex;
    justify-content: center;
}
footer #links > div:first-child{
    flex-wrap: wrap;
}
footer #links > div a{
    padding: 15px;
    color: inherit;
    font-family: Arial, sans-serif;
}


/* ==Key Frames */

/* ==Media Queries */
@media all and (max-width: 419px){
    header{
        justify-content: center;
    }
 }
 
 @media all and (max-width: 664px){
     footer #links{
        justify-content: center;
     }
 }
 
 @media all and (max-width: 1200px){
    footer #links > div{
        justify-content: space-evenly;
    }
}