/*
=============== 
Global Styles
===============
*/

/* موارد زیر خیلی مهم که همیشه بذاری */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {

    background: var(--clr-white);
    color: var(--clr-grey-1);
    line-height: 1.4;
    font-size: 1rem;  
}
ul {
    list-style-type: none;
}
a {
    text-decoration: none;  
    /* تکس دکوریتور وقتی نان باشد یعنی اینکه خط زیر یا همان آندرلاین برداشته میشه */
}
img {
    width: 100%;
    display: block;
}
/* =================================================== */

/* =================================================== */
/*
در این قسمت به نحوه تغییر فونت وب سایت میپردازیم. فونت ها را میتوانیم از طریق سایت گوگل فونتس برداریم. حتما قسمت فیلم آموزشی علی شیخ قسمت پراپرتی فونت-فمیلی 
روببین. نکته مهم اینکه در سایت گوگل فونتس به دو شیوه میشه فونت اضافه کرد یکی از طریق لینک که باید اونو در فایل اچ تی ام ال اضافه کنی یکی هم از طریق ایمپورت که
مثل پایین کافیه اونو در همین فایل سی اس اس اضافه کنیم
*/
/* در خط پایین فایل ایمپورت را اضافه میکنی و در قسمت پایین تر یعنی قسمت فونت-فمیلی اسم فونت ها را قرار میدهی پس کلاباید همین دو کار را انجام بدهی */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Inter+Tight&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Inter+Tight&family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Inter+Tight&family=Playfair+Display&family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Inter+Tight&family=Lora:wght@500&family=Playfair+Display&family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Inter+Tight&family=Lato&family=Lora:wght@500&family=Playfair+Display&family=Poppins&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Inter+Tight&family=Lato&family=Lora:wght@500&family=Playfair+Display&family=Poppins&family=Roboto&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Inter+Tight&family=Lato&family=Lora:wght@500&family=Merriweather&family=Playfair+Display&family=Poppins&family=Roboto&family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Inter+Tight&family=Lato&family=Lora:wght@500&family=Merriweather&family=Playfair+Display&family=Poppins&family=Roboto:wght@300;400&family=Ubuntu&display=swap');
/*
"-apple-system, BlinkMacSystemFont" => apple device   این فونت ها برای سیستم عامل اپل هستند
"Segoe UI" => windows system   این فونت برای سیستم عامل ویندوز هست
"Roboto" => android system   و این برای اندروید هست
*/
/* ==================================================================== */

.Contact-us{
    font-family: Arial, Helvetica, sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI',Roboto;
    color: black;
    font-size: 1.3rem;
    /* display: inline-block; */   /* نمایش اینلاین-بلاک باعث میشه که فقط داخل کادر رنگی شود نه تا آخر و این خیلی خوبه */

    background-color: #f0ead2;
    border-radius: 20px;
    border: 4px solid #ccc;
    padding: 8px 8px;
    margin-right: 10%;
    margin-left: 10%;
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 768px) {
    .Contact-us{
        font-size: 1rem;
        margin-right: 5%;
        margin-left: 5%;
        margin-top: 90px;
        margin-bottom: 5px;
        display: inline-block;
        padding: 6px 6px; 
        }
}
@media screen and (min-width: 768px) and (max-width: 1100px) {  
    .Contact-us{
        font-size: 1.25rem;
        margin-right: 10%;
        margin-left: 10%;
        margin-top: 90px;
        margin-bottom: 5px;
        display: inline-block;
        background-color: #f0ead2;
        border-radius: 20px;
        border: 4px solid #ccc;
        padding: 6px 6px; 
    }}

.Contact-email{
    color: red;
}


.footer_section{
  position: absolute;
  bottom: 15px;
  margin: auto;
  width: 100%;
}