/* 

------------COLORS--------------
PRIMARY COLORS
Base: #339af0 (a vibrant blue that can be used for buttons, links, and highlights)
Tint: #d0ebff (a lighter version of the primary color for backgrounds and accents)
Shade: #1c7ed6 (a darker version of the primary color for hover states and emphasis)

SECONDARY COLORS
Base: #9775fa (a vibrant purple for secondary actions and highlights)
Tint: #e5dbff (a lighter version of the secondary color for backgrounds and accents)
Shade: #7048e8 (a darker version of the secondary color for hover states and emphasis)

TERTIARY COLOR
Base: #ff922b (a vibrant orange for tertiary actions and highlights)
Tint: #ffe5d0 (a lighter version of the tertiary color for backgrounds and accents)
Shade: #d9480f (a darker version of the tertiary color for hover states and emphasis)

GREY COLORS
Base: #495057 (a dark grey for body text and secondary elements)
Tint: #ced4da (a light grey for backgrounds and borders)
Shade: #212529 (a very dark grey for headings and primary text)
white: #ffffff (for backgrounds and text on dark backgrounds)
black: #000000 (for text on light backgrounds and accents)

------------BORDER RADIUS-------------- 
4px/8px/20px

------------SPACING SYSTEM-------------- 
4px/8px/12px/16px/20px/24px/32px/40px/48px/56px/64px/72px/80px/90px/100px/120px/140px/180px/220px/300px/380px/

*/

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

:root{
    /* -------FONT SIZE-------- */
    --text-sm:1.2rem;
    --text-btn:1.4rem;
    --text-md:1.4rem;
    --text-base:1.6rem;
    --text-paragraph:1.8rem;
    --text-h3:2.4rem;
    --text-h2:3.2rem;
    --text-h1:4.8rem;

    /* -------FONT WEIGHT-------- */


--font-weight-normal:400;
--font-weight-bold:700;

/* -------LINE HEIGHT-------- */

--line-height-tight:1.2;
--line-height-normal:1.5;

/* -------LETTER SPACING-------- */

--letter-spacing:-2px;

/* -------FONT FAMILY-------- */
--font-family:'Montserrat', sans-serif;

/* ------COLORS------- */

--primary-base:#339af0;
--primary-tint:#1F5E8E;
--border-color:#d0ebff;
--primary-shade:#2671AB;
--seconadry-base:#9775fa;
--secondary-tint:#e5dbff;
--ssecondary-shade:#7048e8;
--tertiary-base:#ff922b;
--tertiary-tint:#ffe5d0;
--tertiary-shade:#7048e8;
--grey-base:#495057;
--grey-tint:#ced4da;
--grey-shade:#212529;
--white:#ffffff;
--black:#000000;

/* ------BORDER RADIUS------- */
--border-radius-sm:4pc;
--border-radius-md:8px;
--border-radius-lg:16px;

/* -----MISCELLANOUS----- */
--nav-height:100px;

}


*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-normal);
    line-height:var(--line-height-tight);
    color:var(--grey-base);
    padding: 5rem 10rem;
}
.container{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}
h1,  h2{
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -3.6px;
    font-size:var(--text-h1);
    color: var(--grey-shade);
}
h2{
    letter-spacing: var(--letter-spacing);
    font-size:var(--text-h2);
}
p, a .small-text{
    font-size: var(--text-md);
    text-align: justify;
}
a{
    text-decoration: none;
    font-size: var(--text-btn);
    color: var(--primary-base);
    display: inline-block;
}
span{
    display: inline-block;
}
a:link, a:visited {
    color: var(--primary-base);
}
a:hover, a:active {
    color: var(--primary-shade);
}
ul{
  list-style: none;
  font-size:var(--text-md);
}
.small-text{
    font-size: var(--text-sm);
    /* ------------COMPONENT STYLES-------------- */
}
.btn {
    font-weight: var(--font-weight-normal);
    font-size: var(--text-btn);
    color: var(--white);
    padding:1.5rem 3rem;
    border-radius: var(--border-radius-md);

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

}
.btn-primary:hover, .btn-primary:active {
    color: var(--white);
    background-color: var(--primary-shade);
    transform: scale(1.05 1.05);
}
.btn-secondary:link, .btn-secondary:visited {
    color: var(--white);
    background-color:var(--primary-tint);
    transition:0.3s ease;
}
.btn-secondary:hover, .btn-secondary:active {
    color: var(--white);
    background-color: var(--seconadry-base);
    transform: scale(1.05 1.05);
}
.btn-primary-outline:link, .btn-primary-outline:visited {
    color:var(--border-color);
    background-color:var(--white);
    border: 2px solid var(--border-color);
    transition:0.3s ease;
}
.btn-primary-outline:hover, .btn-primary-outline:active {
    color:var(--primary-tint);
    background-color:var(--white);
    border: 2px solid var(--primary-tint);
    transform: scale(1.05 1.05);
}
.highlight{
    color: var(--white);
    padding: 0.5rem;
    border-radius: 4px;
}
.highlight-primary{
     color: var(--white);
     background-color: var(--primary-tint);
}
.highlight-secondary{
    background-color:var(--secondary-shade);
    margin-top: 1rem;
}
.highlight-tertiary{
    background-color:#d9480f;
}
.logo-md{
    max-width: 100px;
    width: 100%;
}
.logo-sm{
    max-width: 80px;
    width: 100%;
}
.chat-widget{
   width:7rem;
   height:7rem;
   background-color: var(--primary-shade);
   border-radius: 50%;
   display: flex;
   margin: 2rem auto;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
}

.chat-icon{
    width: 3rem;
    height: 3rem;
}

/* ------------SECTION------------- */

 .navbar{
    height: var(--nav-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
 .nav-links{
    display: flex;
    gap: 2rem;
 }
/*-----INTRO STYLES----- */ 

.intro, .hero-heading{
    height: calc(100vh-var(--nav-height));
    min-height: 100px;
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.hero-heading{
     text-align: center;
}
.hero-paragraph{
  font-size: var(--text-paragraph);
  margin-bottom: 3rem;
  padding: 2rem 4rem;
  text-align: justify;
}
/*-----FEATURE STYLES----- */

.project-img {
    max-width: 400px;
    width: 100%;
}
.product-philosophy, .cs{
    text-align: center;
    max-width: 120px;
    width: 100%;
    padding: 0;
    border-radius:4px;
}
.contact{
    text-align: center;
    margin-bottom: 2rem;
}
.submit, .reset{
    color: var(--black);
}
    /*-----FOOTER STYLES----- */
.footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.footer-links{
    display: flex;
    gap: 1rem;
}
.social-icons{
    width: 20px;
}
.social-links{
    display: flex;
    gap: 1rem;
}   
.heading2{
    text-align: center;
    margin-bottom: 10px;
}
.divider{
    display: grid;
    justify-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    grid-template-columns:repeat(3, 1fr);
    gap:2rem;
    justify-items: center;
    align-items: center;
}
.hero-paragraph-project{
    font-size: var(--text-md);
    margin-top: 1rem;
    color: var(--grey-tint);
    text-align: justify;
}
.bambi, .route, .jupcard{
   width: 100%;
   max-width: 400px;
   object-fit: cover;
   display: block;
   
}
.pro-phy, .what-i-work-on, .beyond-design, .core-strengths{
    margin-bottom: 2rem;
    gap: 1rem;
    width: 100%;
    max-width: 1200px;
    align-items: center;
}
.strengths-list{
    gap: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
}
.phylosophy-list{
    gap: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grid{
    display: grid;
    text-align: center;
    gap: 1rem;
    justify-items: center;
    flex-direction: column;
    padding: 20px 40px;
    color: var(--grey-shade);
    align-items: center;
    min-height: 240px;
    padding: 1rem;
    margin: 1rem 1rem;
    border: 1px solid var(--grey-base);
    border-radius: 4px;
}
.grid:hover{
    background-color: var(--primary-tint);
    color: var(--white);
}
.toheeb, .about-content{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 1200px;
    justify-content: center;
    text-align: justify;
}
.contact-info-content{
    display: grid;
    align-items: center;
    width: 100%;
    max-width: 800px;
    justify-content: center;
    text-align: justify;
    grid-template-columns: 1fr;
}
.form-group{
    margin-bottom: 1rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    align-content: center;
}
label, input, textarea{
    width: 100%;
}
input, textarea{
    padding: 0.5rem;
    border: 1px solid var(--grey-tint);
    border-radius: 4px;
    font-size: var(--text-md);
}
.form-button{
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}