/* 

----------TYPOGTAPHY----------

FONT SIZES
12PX / 16PX / 20PX /24PX /32PX / 40PX/ 48PX /62PX /

FONT WEIGHTS
400 / 700

LINE HEIGHTS
1.2 / 1.5

LETTER SPASCING
0 / -2PX

FONT FAMILY
Poppins

----------COLORSv----------

PRIMARY
Base: #339af0 (Sky Blue)
Tint: #doebff (Arctic)
Shade: #1c7ed (Deep Sea)

SECINDARY
Base: #9775fa (lavendar)
Tint: #e5dbff (moonligh iris)
shade: #7048e8 ( velvet night)

TERTIATY
Base: #ff922b (pumpkin)
Tint: #ffe8cc (dawn)
Shade: #f76707 (lava)

GREY
Base: #495057 (slate)
tint: #f1f3f5 (pebble)
shade :#212529 (graphite)
white:#ffffff 
black:#000000

----------BORDER RADIUS----------

4PX / 8PX / 20PX

----------SPACING SYSTEM----------

5px / 10px /15px/20px /25px/ 30px/40px/50px/60px/70px/80px/90px/100px/125px/



*/

/* ---------------------GLOBAL STYLES ---------------------*/






:root {
/* FONT SIZE */
--text-sm:1.2rem;
--text-base:1.6rem;
--text-paragraph:2rem;
--text-h5:2.4rem;
--text-h4:3.2rem;
--text-h3:4rem;
--text-h2:4.8rem;
--text-h1:6.2rem;
/* FONT WEIGHT */
--font-weight-normal:400;
--font-weight-bold:700;

/* LINE HEIGHS */
--line-height-tight: 1.2;
--line-height-noraml: 1.5;
/* LETTER SPACING */
--letter-spacing-tight:-2px;
/* FONT FAMILY */
--font-family:'Poppins',sans-serif;

/* COLORS */
--primary-base:#339af0 ;
--primary-tine:  #93c6ef;
--primary-shade: #1c7ed6;
--secindary-base:#9775fa;
--secindary-tint:#e5dbff ;
--secindary-shade:#7048e8;
--tertiaty-base: #ff922b ;
--tertiaty-tint:#ffe8cc;
--tertiaty-shade: #f76707;
--grey-base: #495057;
--grey-tine: #f1f3f5;
--grey-shade: #212529;
--white: #ffffff;
--black:#000000 ;

/* MISCELL ANEOUS */
--nav-height: 300px;     /*   Update the value in the flexbox topic  */


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

/* حطينا 10 عشان لما بدي اكبر الخط من متصفح ما يتغير حجم الخط */
 html {
    font-size: 62.5%;    
       /* 10px / 16px = 62.5% */
 }


 body {

     font-family: 'Poppins',sans-serif;
      font-weight: 4oo;
            color:var(--grey-base);
            line-height: 1.5;
 }


/*استخدمنا 1200 لضمان عدم انتشارالمحتوى على نطاق واسع في الشاشات الاكبرر  */


.container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}
    h1,h2,h3,h4,h5 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    
    color: var(--grey-shade);
    }





    h1 {
    
        text-align: center;
        font-size: var(--text-h1);
        line-height: 1.2;
    
    }

    h2{
        font-size: var(--text-h2);
        /* text-align: center;
        line-height: 1.2; */
    } 

    h3{
        
        font-size: var(--text-h3);
        
        color: #212529;
    }

    h4{
        
        font-size: var(--text-h4);

    }


    h5{

        font-size: var(--text-h5);
   
    }
      

    p{
        font-size: var(--text-paragraph);
        
    }

    a{
    text-decoration: none;
        font-size: var(--text-base);
        display: inline-block;
        
    }
    a:link,a:visited, a:hover, a:active {
        color: var(--grey-base);
    }



    ul{
        list-style: none;
    }

    .span {
        display: inline-block;
    }
  
.Small-text {
    font-size: var(--text-sm);
}
/* ---------------------COMPONENTS ---------------------*/


.btn {      /*ضفناها هنا عشان هان بتعامل مع كل بنية الازرار    TRANSITION ما  */
    font-size: var(--text-base);     
    padding: 1.5rem 3rem; 
    text-decoration: none;
     /* font-weight: 4oo; */
     border-radius: 8px;
}

.btn-primary:link,.btn-primary:visited {
color:var(--white) ;
background-color:var(--primary-base);
 border: 2px solid  var(--primary-base) ;
 transition: 0.5s;
}

.btn-primary:hover,.btn-primary:active {
color: var(--white);
 background-color: var(--primary-shade) ;
  border: 2px solid   var(--primary-shade);
  transform: scale(1.05,1.05) ;
   box-shadow: 0px 3px 6px var(--grey-base);
}



.btn-primary-outline:link , .btn-primary-outline:visited {
    color: var(--primary-base);
    background-color: var(--white);
    border: 2px solid  var(--primary-base) ;
     transition: 0.5s;
}
.btn-primary-outline:hover, .btn-primary-outline:active {
    color: var(--primary-shade) ;
    background-color: var(--white);
    border: 2px solid   var(--primary-shade);
     transform: scale(1.05,1.05) ;
      box-shadow: 0px 3px 6px var(--grey-base);
}



.btn-secondary:link , .btn-secondary:visited {
 background-color: var(--secindary-base);
 color: var(--white);
 border: 2px solid var(--secindary-base);
  transition: 0.5s;
}

.btn-secondary:hover , .btn-secondary :active {
 background-color:   var(--secindary-shade);
 color: white;
 border: 2px solid  var(--secindary-shade);
  transform: scale(1.05,1.05) ;
  box-shadow: 0px 3px 6px var(--grey-base);
}




.hightlight {
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 4px;
} 
.hightlight-primary {
    background-color: var(--primary-base);

}

.hightlight-secondary {
    background-color: var(--secindary-base);
    /* padding: 5px; */
}
.hightlight-tertiary {
    background-color:var(--tertiaty-base);
    padding: 5px;
}

.logo-md {
    width: 100px;
}

.logo-sm {
    width: 80px;
}
.chat-container {
    height: 7rem;
    width: 7rem;
    background-color: var(--primary-tine);
    border-radius: 50% ;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
}
.chat-icon {
    width: 5rem;
    height: 5rem;
    color: var(--primary-base);
}

.beta {
    position: relative;
}

.beta::after {
    content: 'beta' ;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.2rem;
    background-color: var(--tertiaty-base);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    color: var(--white);
    transform: translate(70%, -70%);
}

/* ---------------------SECTIONS ---------------------*/

/* -----HERO SECTION----- */
/* ------NAVBAR----- */

.navbar {
    height: var(--nav-height);
   display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-btn-container {
    display: flex;
    gap:2rem;
}
/* -----HERO SECTION----- */

.hero-section {
   height:calc(100vh - var(--nav-height));
    /* text-align: center; */
    margin-bottom: 10rem;
     min-height: 400px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
}






.hero-heading {
    margin-bottom: 1rem;
    /* padding: 1px; */
    text-align: center;
}

.hero-paragraph {
    margin-bottom: 5rem;
    text-align: center;
}

.hero-btn-container{

    display: flex;
    gap:2rem;
}




/* -----FEATURES SECTION----- */
.features-section {
    margin-bottom: 30rem;
}


.features-main-heading {
    text-align: center;
    margin-bottom: 8remx;
} 

.features-grid-container {
    display:grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 15rem;
    column-gap: 5rem;
    justify-items: center;
    align-items: center;
}

.features-img-swap-order {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}

.features-headings {
    margin-bottom: 2rem;
}

.features-img {
    width: 100%;
    max-width: 400px;
}
/* -----CTA SECTION----- */

.cta-section {
     
     /* height: 300px; */
     margin-bottom: 30rem;
     display:flex;
     justify-content: center;
}

.cta-card {
   text-align: center;
    background-color: var(--primary-base); 
   max-width: 1000px;
   padding: 10rem 20rem;
    border-radius: 20px;
    
}

.cta-heading {
    margin-bottom: 3rem;
    color: var(--white) ;
}

/* -----FOOTER----- */

.footer {
     
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:1rem;
}

.social-icons-container {
    display: flex;
    gap:1.5rem;
}
.footer-links-container {
    display: flex;
    gap:1rem;
}

.social-icons {
    width: 20px;
}

.heart-icon {
    color: var(--secindary-base);
}