/*




 FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

 line-heigt :
 default   1
 small:1.05
 medium:1.2
 paragraph default :1.6


 letter spacing 
 -0.5px
 0.75px

  font-weight-
  700
  600
  500
  400


  color---<
  Brand color: #e67e22;
  text color :#373434;
  background-color:#fdf2e9;

titnts:#fdf2e9;
#fae5d3
light grays for testimonial-name:#6F6F6F;
    shades:#cf711f
    accents:
    Greys

  shadows-->

    

  border-radius->9px 50%


  whiteSpace->


  SPACING SYSTEM (px)
  2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
  
  */


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

body {
    line-height: 1;
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
    color: #555;
    /* it is only work when there nothing absolute positioned relative to body  */
    overflow-x: hidden;
}

html {
    /* font-size: 10px; */
    /* percentage of user browser font-size:  setting ; */
    /* my browser font size is 16px it's mean that 1rem = 16px bellow here i convert 100% mean 16px so 10px = browser 62.5% now 1rem = 10px */
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-margin-top: 6rem;
    /* scroll-behavior: smooth; */
}

/* ***************************************** */
/* Genarel reusable section  */

.grid {
    display: grid;
    row-gap: 9.6rem;
    column-gap: 6.4rem;

    
}
/* .grid:last-child{
    margin-bottom:0;
     
} */
.grid:not(:last-child){
    margin-bottom: 9.6rem;
   
   
}

.grid--2-cols {
    grid-template-columns: repeat(2, 1fr);
    
}
.grid--3-cols {
    grid-template-columns: repeat(3, 1fr);
    
}
.grid--4-cols {
    grid-template-columns: repeat(4, 1fr);
}

.grid--5-cols {
    grid-template-columns: repeat(5, 1fr);
    
}
.set-grid-v{
    align-items: center;

}


.container {
    /* u can use 114rem */
    max-width: 120rem;
    margin: 0 auto;
    padding: 0 3.2rem;

}

.heading-primary,
.heading-secondary,
.heading-tartiary{
    color: #333;
    letter-spacing: -0.5px;
    font-weight: 700;

}

.heading-primary {
    font-size: 5.2rem;
    line-height: 1.05;
    margin-bottom: 3.2rem;

}

.heading-secondary {
    font-size: 4.4rem;
    line-height: 1.1;
    margin-bottom: 9.6rem;
}

.heading-tartiary {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 3.2rem;
}
.subheading {
    display: block;
    /* because span is an inline element */
    font-size: 1.6rem;
    /* font-weight:  we dont want a big text so 500 is just good; */
    font-weight: 500;
    color: #cf711f;
    text-transform: uppercase;
    margin-bottom: 1.6rem;
    letter-spacing: 0.75px;

}



.btn,
.btn:link,
.btn:visited {
    font-size: 2rem;
    text-decoration: none;
    /* in inline element i cant use width ,padding and so many things . then you should use display:  inline-block; */
    display: inline-block;
    padding: 1.6rem 3.2rem;
    border-radius: 9px;
    transition: all 0.5s;
    border: none;
    font-family: inherit;
    cursor: pointer;

}

.btn--full:link,
.btn--full:visited {
    cursor: pointer;
    font-weight: 500;
    background-color: #e67e22;
    color: white;

}

.btn--full:hover,
.btn--full:active {
    cursor: pointer;
    background-color: #cf711f;


}

.btn--outline:link,
.btn--outline:visited {
    background-color: white;
    cursor: pointer;
    color: #343a40;
}

.btn--outline:hover,
.btn--outline:active {
    background-color: #f1efef;
    cursor: pointer;
    /* here if we use border property then all the hero section content are do jump therefor we should use box shadow property */

    /* border: 2px solid white; */

    /* value of box-shadow: (x y blur radius and color) ; */
    box-shadow: inset 0 0 0 3px white;

}
*:focus{
    transition: 0.1s;
    /* outline: none;
    outline: 5px solid orangered;
    outline-offset: 10px; */
    box-shadow:0  0 0 0.8rem rgba(255, 68, 0, 0.397);
}

.margin-right-sm {
    margin-right: 1.6rem !important;
}
.margin-bottom-md{
    margin-bottom: 4.8rem;
}

.center-text{
    text-align: center;
}

 strong{
    font-weight: 500;
 }