@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Tajawal:wght@400;700&display=swap');

:root {
    /* --primaryColor: #1db8f8;
    --middleColor: #393E46;
    --helperColor: #39395b;
    --lightHelper: #1C1C35;
    --hrColor: #A9B5DF;
    --transparentColor: rgba(0, 0, 0, 0.699);
    --shadow: rgba(189, 188, 188, 0.514); */
    --body-bg: #F5F5F5;
    --primary-color: #1db8f8;
    --primary-color-shadow: rgba(28, 185, 247, 0.3);
    --primary-hover: #52c2f1;
    --primary-reverse: #FFF;
    --primary-light: #71B4E8;
    --primary-offwhite: rgba(#71B4E8, .1);
    --secondary-color: #39395b;
    --secondary-hover: #1c1c35;
    --secondary-reverse: #FFF;
    --component-active-bg: var(--primary-color);
    --gray-color:#868e96;
    /* --------------------------------- */
    --whatsappColor: #25D366;
    --white: #ffff;
    --blue: #1877F2;
    --green: #25D366;
    --gray: #f8f8f8;
    --info-color: #17c0db;
    --dark-color: #343a40;
    --success-color: #22b544;
    --danger-color: #de3131;
    --warning-color: #f4bb0e;
    --container-width: 1340px;
    --header-height: 90px;
    /* ------------------------------------- */
    --component-shadow: none;
    --component-background: var(--white);
    --component-color: #343a40;
    --component-padding: 15px;
    --medium-weight: 500;
    --forms-height-small: 35px;
    --forms-radius: 5px;
    --strong-weight: 700;
    

}
body::-webkit-scrollbar {
    width: 8px
  }
  
  body::-webkit-scrollbar-track {
    background-color: transparent
  }
  
  body::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    background-image: linear-gradient(0deg, var(--primary-color) 0%, var(--secondary-hover) 100%);
    border-radius: 5px
  }
  

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Cairo', 'Tajawal', sans-serif;
}

a {
    text-decoration: none;
    transition: all 0.5s;
    color: inherit;

}

ul {
    list-style: none;
}

img {
    border-style: none;
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}
.section{
    height: 1800px;
}
.container {
    padding: 0 15px;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    position: relative;
}