/*
    --- 01 TYPOGRAPHY SYSTEM

    - Font sizes (px)
    10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

    - Font weights
    Default: 400
    Medium: 500
    Semi-bold: 600
    Bold: 700

    - Line heights
    Default: 1
    Small: 1.05
    Medium: 1.2
    Paragraph default: 1.6

    - Letter spacing
    -1.5px

    --- 02 COLORS

    - Primary: #e67e22
    - Tints: 
    - #b8651b
    - #cf711f
    - #fdf2e9

    - Shades: 


    - Accents:
    - Greys :
    - #555
    - #333
    - #222
    - #888

    --- 05 SHADOWS

    - 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
    - 0 2.4rem 4.8rem rgba(0, 0, 0, 0.3)

    --- 06 BORDER-RADIUS

    Default: 9px
    Medium: 12px

    --- 07 WHITESPACE

    - Spacing system (px)
    2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

/* html */
/* ======================= */
html {
    font-size: 62.5%;
}

/* ======================= */
/* universal Selector */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Font Size : 62.5% = 1rem = 10px */
}

/* ======================= */
/* body Selector */
body {
    font-family: 'Rubik',sans-serif;
    color: #333;
    line-height: 1;
    font-weight: 400;
}

/* ======================= */
/* Reuseable Classes */

.mb-sm {

}
.mb-md {
    margin-bottom: 4.8rem;
}
.mb-lg {
    margin-bottom: 6.8rem;
}

.mt-sm {
    margin-top: 2.4rem;
}
.mt-md {
    margin-top: 4.8rem;
}
.mt-lg {
    margin-top: 6.8rem;
}

/*
    Note: for Every orange button 
*/

.btn:active {
    outline: 8px solid rgba(230, 126, 34, 0.3);
}

/* ======================= */
/* header Section */
/* done : I have done header section completely but maybe i will add few things in it */
.header {
    background-color: #fdf2e9;
    width: 100%;
    height: 9.6rem;
    padding: 0 4.8rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* header Logo */
.logo {
    height: 2.2rem; /* = 220px */
}

/* header navigation */
.main-nav {
    /* width: 35%; */
}

.nav-items {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Note: nv = nav-list but in short cut alos i can use it on cta so nav and cta have same size and some styling and ajastment*/
.nav-shared a {
    font-weight: 500;
    font-size: 1.8rem;
    text-decoration: none;
}

.nav-shared{
    margin-right: 2.4rem;
}

.nav-shared:last-child {
    margin-right: 0;
}

.nav-item {
    color: #333;
    transition: color 0.3s;
}

.nav-item:hover {
    color: #cf711f;
}

.nav-cta{
    background-color: #e67e22;
    padding: 1.2rem 2.4rem;
    border-radius: 12px;
    color: #fff;
    transition: background-color .3s ease;
}

.nav-cta:hover {
    background-color: #b8651b;
}

/* ======================= */
/* Hero Section */
/* Done: i have refectore it and done it completely */
.hero-section {
    background-color: #fdf2e9;
    padding: 4.8rem 0 9.6rem 0;
}

.hero {
    margin: 0 auto;
    max-width: 130rem; 
    padding: 0 3.2rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 9.6rem;
}

.hero-title {
    font-size: 5.2rem;
}

.hero-description {
    font-size: 2rem;
    line-height: 1.5;
    color: #555;
}

.hero-btn {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.btn-start:link, .btn-start:visited, .hero-btn-secondary {
    font-size: 2rem;
    font-weight: 500;
    text-decoration: none;
    
    padding: 1.6rem 3.2rem;
    border-radius: 12px;
}

.btn-start {
    background-color: #e67e22;
    color: #fff;
    transition: background .3s ease;
}

.btn-start:hover {
    background-color: #cf711f;
}


.hero-btn-secondary {
    background-color: #fff;
    color: #333;
    transition: background .3s ease;
}

.hero-btn-secondary:hover {
    background: none;
    outline: 3px solid #fff;
}

.hero-image {
    width: 100%;
}

.customers {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}

.customers-text {
    font-size: 1.8rem;
    font-weight: 500;
}

.customers-text span{
    color: #e67e22;
}

.customer-images {
    display: flex;
    justify-content: center;
    align-items: center;
}

.customer-images img {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    margin-right: -1.6rem;
    border: 3px solid #fff ;
}

.customer-images img:first-child {
    border: none;
}

/* ======================= */
/* featured-section */
/* Todo :  refectoring the code*/
.featured-section {
    padding: 4.2rem 0;
}

.featured-container {
    width: 118rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.featured-text {
    color: #888;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 500;
}

.featured-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.featured-logos img {
    width: 17rem;
    /* filter: invert(59%) sepia(0%) saturate(507%) hue-rotate(181deg) brightness(91%) contrast(93%); */
    filter: grayscale(100%) brightness(0);
    opacity: 0.5;
}



/* REVIEW: أحتاج أراجع الكود لاحقًا */

/* NOTE: معلومة مهمة */

/* IDEA: فكرة للمستقبل */

/* FIX: فيه مشكلة أو Bug */

/* REMOVE: كود قديم لازم ينحذف */

/* IMPORTANT: انتبه لهذا الجزء */

/* QUESTION: شيء ما فهمته */