/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/**
 * copyright 2021 @codewithsadee 
 */





/*-----------------------------------*\
  #VARIABLE
\*-----------------------------------*/

/**
 * import variable css file
 */

 @import url(./variable.css);





 /*-----------------------------------*\
   #RESET
 \*-----------------------------------*/
 
 *, *::before, *::after {
   margin:  0;
   padding: 0;
   box-sizing: border-box;
 }
 
 li { list-style: none; }
 
 a {
   text-decoration: none;
   color: inherit;
 }
 
 button {
   font: inherit;
   border: none;
   background: none;
   cursor: pointer;
 }
 
 input, textarea { font: inherit; }
 
 img, ion-icon { display: block; }
 
 a, span { display: inline-block;
  color: rgba(0, 0, 0, 1);
   /* margin-left: 20px;  */
  }
 
 html {
   font-family: 'Jost', sans-serif;
   scroll-behavior: smooth;
 }
 header button span {
     color: var(--gainsboro);
 }
 
 
 
 
 
 /*-----------------------------------*\
   #MAIN STYLE
 \*-----------------------------------*/
 
 /**
  * main container 
  */
 
 .container {
   /* max-width: 1440px; */
   margin: auto;
   background: var(--eerie-black-dark);
   overflow: hidden;
 }
 
 header {
   position: relative;
   overflow: hidden;
 }
 .highlight {
    font-style: italic;
    color: #555;
    margin: 2em 0;
    padding: 0.5em 0;
    border-left: 4px solid #007acc;
    background-color: #f9f9f9;
}
 
 /**
  * navbar style
  */
 
 .menu-open-btn {
  position: fixed;
  top: 0  ;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-5);
  color: var(--gainsboro);
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.326);
  backdrop-filter: blur(15px);
padding: 16px;
 }
 
 .menu-open-btn ion-icon {
   color: var(--white);
   font-size: 28px;
 }
 
 .nav {
   background: #e9e1c5;
   position: fixed;
   top:    0;
   right: -100%;
   height: 100vh;
   /* width:  100%; */
   padding: 100px 20px;
   display:         flex;
   flex-direction:  column;
   justify-content: center;
   align-items:     start;
   overflow: hidden;
   transition: 0.75s ease;
   z-index: 10;
 }
 
 .nav.active { right: 0; }
 
 .menu-close-btn {
   position: absolute;
   top:   20px;
   right: 20px;
   border: 1px solid transparent;
   color: var(--battleship-gray);
   transition: var(--default-transition);
 }
 
 .menu-close-btn:hover {
   color: var(--liver-chestunut);
   border-color: var(--liver-chestunut);
 }
 
 .menu-close-btn ion-icon {
   font-size: 32px;
   --ionicon-stroke-width: 20px;
   transform: scale(1.5);
   transition: var(--default-transition);
 }
 
 .menu-close-btn:hover ion-icon { transform: scale(1); }
 
 .nav-heading {
   font-size: var(--fs-5);
   color: var(--battleship-gray);
   font-weight: 800;
   text-transform: uppercase;
   margin-bottom: 25px;
 }
 
 .nav ul { margin-bottom: 40px; }
 
 .nav-item {
   transform: translateY(50px);
   transition: 1s ease;
   opacity: 0;
 }
 
 .nav-item:not(:last-child) { margin-bottom: 5px; }
 
 .nav.active .nav-item {
   transform: translateY(0);
   opacity: 1;
   transition-delay: 0.5s;
 }
 
 .nav-link {
   color: var(--battleship-gray);
   font-size: var(--fs-4);
   transition: var(--default-transition);
 }
 
 .nav-link:hover { color: var(--liver-chestunut); }
 
 .nav-footer {
   transform: translateY(50px);
   transition: 1s ease;
   opacity: 0;
 }
 
 .nav.active .nav-footer {
   transform: translateY(0);
   opacity: 1;
   transition-delay: 1s;
 }
 
 .social-link {
   display:     flex;
   align-items: center;
   flex-wrap:   wrap;
   gap: 10px;
 }
 
 .social-link a {
   padding: 10px;
   background: hsla(0, 0%, 100%, 0.05);
   transition: var(--default-transition);
 }
 
 .social-link a:hover { background: hsla(0, 0%, 100%, 0.1); }
 
 .social-link ion-icon {
   color: var(--battleship-gray);
   font-size: 20px;
 }
 
 .nav-footer p {
   font-size: var(--fs-5);
   color: var(--battleship-gray);
 }
 
 
 .link-underline {
  border-bottom: 2px solid white;
   transition: var(--default-transition);
 }
 
 .link-underline:hover { border-color: hsla(100, 100%, 100%, 0.4); }
 
 
 /*-----------------------------------*\
   #HEADER INTRO
 \*-----------------------------------*/
 
 .intro { text-align: center; }
 
 .intro-profile {
   position: relative;
   padding: 40px;
   margin-bottom: 30px;
 }
 
 .intro-border {
   position: absolute;
   border: 1px solid var(--white);
   transition: var(--default-transition);
   pointer-events: none;
 }
 
 .intro-border.one { inset:  0   20px; }
 .intro-border.two { inset: 20px  0  ; }
 
 .intro:hover .intro-border { border: 1px solid var(--white); }
 
 .intro-profile .img-box {
  margin-top: 15px;
    margin-bottom: 30px;
    margin-left: 15px;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro-profile .intro-img {
    object-fit: cover;
    border: 2px solid hsla(0,0%,100%,0.15);
    box-shadow: none;
}
.intro-profile p {
   font-size: var(--fs-5);
   text-transform: uppercase;
   font-weight: 500;
   color: var(--battleship-gray);
   margin-bottom: 10px;
 }
 
 .intro-profile .profile-name {
   display:         flex;
   justify-content: space-around;
   align-items:     center;
   font-size: 30px;
   margin-bottom: 20px;
 }
 
 .profile-name span { color: var(--may-green); }
 
 .intro-link {
   display:         flex;
   justify-content: center;
   align-items:     center;
   gap: 10px;
   color: var(--battleship-gray);
   font-size: var(--fs-5);
 }
 
 .intro-link:hover { color: var(--gainsboro); }
 
 .intro-link .circle {
   padding: 5px;
   border-radius: 50%;
   background: var(--may-green);
 }
 
 .intro-link span {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 

 
 @media (max-width: 1024px) {
    .intro-profile {
        padding: 20px;
    }
    .profile-name {
        font-size: 1.5rem;
    }
    .intro-profile p, .intro-link {
        font-size: 1rem;
    }
}
@media (max-width: 768px) {
    .intro-profile {
        padding: 10px;
    }
    .profile-name {
        font-size: 1.1rem;
    }
    .intro-profile p, .intro-link {
        font-size: 0.95rem;
    }
    .intro-profile .intro-img {
        /* rien, taille naturelle */
    }
}
@media (max-width: 480px) {
    .intro-profile {
        padding: 5px;
    }
    .profile-name {
        font-size: 0.95rem;
    }
    .intro-profile p, .intro-link {
        font-size: 0.85rem;
    }
    .intro-profile .intro-img {
        /* rien, taille naturelle */
    }
}
 
 
 /* supprime la section dans header en petit et tablette format */
@media (max-width: 1022px) {
  .intro.section-padding,
  #intro-section {
    display: none !important;
  }
}
 
 
 /*-----------------------------------*\
   #REPEATED ELEMENT STYLE
 \*-----------------------------------*/
 
 .section-padding { padding: 80px 10px; }
 
 .section-subtitle {
   color: var(--liver-chestunut);
   font-size: var(--fs-5);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 50px;
 }
 
 .section-title {
   position: relative;
  font-weight: 500;
  color: black;
   font-size: var(--fs-1);
   padding-bottom: 15px;
   margin-bottom: 35px;
 }
 
 .section-title::after {
  content: '';
  position: absolute;
  background: white;
  height: 30px;
  width: 10px;
  z-index: 0;
  transform: rotate(45deg);
  top: -8px;
  left: -10px;
 }

 
 .section-desc {
   color: var(--battleship-gray);
   font-size: var(--fs-4);
   margin-bottom:2rem;
 }





 
 
 /* Responsive harmonisation titres et textes */
@media (max-width: 1024px) {
    .section-title {
        font-size: 2rem;
    }
    .section-subtitle {
        font-size: 1.1rem;
    }
    .section-desc {
        font-size: 1.05rem;
    }
}
@media (max-width: 768px) {
    .section-title {
        font-size: 1.5rem;
    }
    .section-subtitle {
        font-size: 1rem;
    }
    .section-desc {
        font-size: 1rem;
    }
}
@media (max-width: 480px) {
    .section-title {
        font-size: 1.2rem;
    }
    .section-subtitle {
        font-size: 0.95rem;
    }
    .section-desc {
        font-size: 0.95rem;
    }
}
 
 /* HOME */
 .big-text{
  margin-bottom: 30px;
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
  color: var(--battleship-gray);
 }
 .square{
  border: 2px solid var(--battleship-gray);
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  color: var(--battleship-gray);
  display: flex ;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  transition: var(--default-transition);
cursor: unset;
 }
 .float{
  display: block;
  position: relative;
  
 }
 .top-image{
  padding-bottom: 20px;
    border-bottom: 1px solid var(--battleship-gray);
  left: 160px;
  bottom: 80px;
 }
 .bottom-image{
  right: 160px;
  top: 20px;
 }
 @media (max-width: 480px) {
  .top-image{
    left: 60px;
    bottom: 70px;
   }
   .bottom-image{
    right: 40px;
    top: 20px;
   }
 }
 
 
 /*-----------------------------------*\
   #ABOUT
 \*-----------------------------------*/
 
 .about-table {
   width: 100%;
   border-collapse: collapse;
   text-align: left;
   font-size: var(--fs-5);
   margin-bottom: 40px;
   margin-top:    80px;
 }
 
 .about-table tr {
   display:        flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .about-table tr:not(:last-child) { margin-bottom: 20px; }
 
 .about-table th {
   color: var(--battleship-gray);
   font-weight: 500;
   text-transform: uppercase;
 }
 
 /* .about-table td { color: var(--gainsboro); } */
 
 .download-cv {
   border: 2px solid var(--battleship-gray);
   width: 100%;
   padding: 60px 0;
   color: var(--battleship-gray);
   display:         flex;
   flex-direction:  column;
   justify-content: center;
   align-items: center;
   gap: 10px;
   transition: var(--default-transition);
 }
 
 .download-cv:hover { border-color: var(--liver-chestunut); }
 
 .download-cv ion-icon {
   font-size: 60px;
   --ionicon-stroke-width: 25px;
   color: var(--battleship-gray);
 }
 
 .download-cv span {
   font-size: var(--fs-5);
   font-weight: 500;
   text-transform: uppercase;
 }
 
 /**
  * tab navigation 
  */
 
 .about-tab { margin-top: 80px; }
 
 .tab-nav {
   display:         flex;
   justify-content: start;
   align-items:     center;
   flex-wrap:       wrap;
   gap: 20px 0;
   margin-bottom: 40px;
 }
 
 .tab-nav li { position: relative; }
 
 .tab-nav li:not(:last-child) { padding-right: 80px; }
 
 .tab-nav li:not(:last-child)::after {
   content: '';
   position: absolute;
   background: var(--battleship-gray);   
   width: 40px;
   height: 2px;
   top:   55%;
   right: 20px;
 }
 
 .tab-nav li .tab-button {
   color: var(--battleship-gray);
   font-size: var(--fs-2);
   border-bottom: 1px solid transparent;
 }
 
 .tab-nav li .tab-button.active {
   color: var(--liver-chestunut);
   border-color: var(--liver-chestunut);
 }
 
 /**
  * tab content
  */
 
 .tab-content { display: none; }
 
 .tab-content.active {
   display: block;
   animation: fade 0.75s ease forwards;
   opacity: 0;
 }
 
 @keyframes fade {
 
   0%   { opacity: 0; }
   100% { opacity: 1; }
 
 }
 
 .content-card {
   position: relative;
   background: var(--smoky-black);
   border: 1px solid var(--eerie-black);
   padding: 40px;
   margin-bottom: 20px;
 }
 
 .content-card::before {
   content: '';
   position: absolute;
   background: var(--battleship-gray);
   width:  3px;
   height: 50px;
   top:   50%;
   left: -1px;
   transform: translateY(-50%);
 }
 
 .content-card .card-head {
   display:        flex;
   align-items:    start;
   flex-direction: column;
   gap: 5px;
   margin-bottom: 15px;
 }
 
 .content-card .card-head h4 {
   color: var(--gainsboro);
   font-size: var(--fs-5);
   font-weight: 400;
   text-transform: uppercase;
 }
 
 .content-card .card-head p { color: var(--battleship-gray); }
 
 .content-card .card-body h3 {
   color: var(--gainsboro);
   font-size: var(--fs-3);
   font-weight: 400;
   margin-bottom: 18px;
 }
 
 .content-card .card-body p {
   color: var(--battleship-gray);
   font-size: var(--fs-5);
 }
 
 /**
  * skill tab 
  */
 
 .skill-box { margin-bottom: 30px; }
 
 .skill-name {
   color: var(--battleship-gray);
   font-size: var(--fs-5);
   font-weight: 400;
   margin-bottom: 10px;
 }
 
 .progress-bar {
   position: relative;
   width: 100%;
   height: 1px;
 }
 
 .progress {
   height: 1px;
   background: var(--liver-chestunut);
   transform: scale(0);
   transform-origin: left;
   animation: scaleUp 3s cubic-bezier(.165, .84, .44, 1) forwards;
 }
 
 @keyframes scaleUp {
   
   0%   { transform: scale(0); }
   100% { transform: scale(1); }
 
 }
 
 .progress-rate {
   position: absolute;
   background: hsla(0, 0%, 100%, 0.05);
   color: var(--liver-chestunut);
   font-size: var(--fs-6);
   bottom: calc(100% + 10px);
   transform: translateX(-50%);
   padding: 2px 8px;
 }
 
 .progress-rate::after {
   content: '';
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(45deg);
   border: 3px solid transparent;
   border-color: transparent
                 hsla(0, 0%, 100%, 0.05)
                 hsla(0, 0%, 100%, 0.05)
                 transparent;
 }
 
 .skill-text {
   max-width: 500px;
   color: var(--battleship-gray);
   font-size: var(--fs-5);
   margin-top: 40px;
 }
 
 
 
 
 
 /*-----------------------------------*\
   #PORTFOLIO
 \*-----------------------------------*/
 
 #events .wrapper {
   display:         flex;
   justify-content: space-between;
   align-items:     center;
   gap: 30px;
   padding-right: 15px;
 }
 
 #events .wrapper .section-title { margin-bottom: 0; }
 
 .btn-group {
   display:     flex;
   align-items: center;
   gap: 25px;
 }
 
 .btn-group button { position: relative; }
 
 .btn-group .arrow {
   position: relative;
   width: 25px;
   height: 1px;
   background: var(--battleship-gray);
   border-color: var(--battleship-gray);
   transition: var(--default-transition);
 }
 
 .btn-group .arrow .arrow-head-left,
 .btn-group .arrow .arrow-head-right {
   position: absolute;
   top: -7px;
   left: 1px;
   width:  15px;
   height: 15px;
   border-width: 0 0 1px 1px;
   border-style: solid;
   border-color: inherit;
   transform: rotate(45deg);
 }
 
 .btn-group .arrow .arrow-head-right {
   left: 8px;
   border-width: 1px 1px 0 0;
 }
 
 .btn-group button:hover .arrow {
   background: var(--liver-chestunut);
   border-color: var(--liver-chestunut);
 }
 
 .btn-group button::after {
   content: '';
   position: absolute;
   inset: -15px -5px;
   border: 1px solid transparent;
   transition: var(--default-transition);
 }
 
 .btn-group button:hover::after {
   inset: -25px -15px;
   border-color: var(--liver-chestunut);
 }
 
 .portfolio-carousel {
   position: relative;
   margin-top: 80px;
   overflow: hidden;
 }
 
 .portfolio-carousel-inner {
   width: 500%;
   display:         flex;
   justify-content: start;
   align-items:     start;
   gap: 10px;
   transition: 0.75s ease;
 }
 
 .portfolio-carousel-card { width: 100%; }
 
 .portfolio-carousel-card .card-head {
   width: 100%;
   aspect-ratio: 4/3;
   height: auto;
   overflow: hidden;
   margin-bottom: 30px;
 }
 
 .portfolio-carousel-card .card-head img {
   width:  100%;
   height: 100%;
   object-fit: cover;
 }
 
 .portfolio-carousel-card .card-body p {
   color: var(--battleship-gray);
   font-size: var(--fs-5);
   margin-bottom: 5px;
 }
 
 .portfolio-carousel-card .card-body a {
   font-size: var(--fs-3);
   font-weight: 400;
   display: inline-block;
   transition: var(--default-transition);
 }
 
 .portfolio-carousel-card .card-body a:hover { color: var(--liver-chestunut); }
 
 
 
 
 
 /*-----------------------------------*\
   #SERVICE
 \*-----------------------------------*/
 
 .service-card {
   background: var(--smoky-black);
   border: 1px solid var(--eerie-black);
   margin-bottom: 20px;
 }
 
 .service-card .card-body {
   position: relative;
   padding: 40px;
 }
 
 .service-card .card-body::after {
   content: '';
   position: absolute;
   background: var(--battleship-gray);
   width:  3px;
   height: 50px;
   top: 50%;
   left: -1px;
   transform: translateY(-50%);
 }
 
 .service-card .card-body h3 {
   color: var(--gainsboro);
   font-size: var(--fs-3);
   font-weight: 400;
   margin-bottom: 18px;
 }
 
 .service-card .card-body p {
   color: var(--battleship-gray);
   font-size: var(--fs-5);
 }
 
 .service-card .card-footer {
   border-top: 1px solid hsla(100, 100%, 100%, 0.5);
   padding: 20px 40px;
 }
 
 .service-card .card-footer span { color: var(--battleship-gray); }
 
 .service-card .card-footer div {
   color: var(--liver-chestunut);
   font-size: var(--fs-3);
   font-weight: 500;
 }
 
 
 
 
 
 /*-----------------------------------*\
   #CUSTOMERS
 \*-----------------------------------*/
 
 #customers .wrapper {
   display: grid;
   grid-template-columns: 1fr;
   gap: 10px;
   margin-bottom: 100px;
   padding-top:   30px;
 }
 
 #customers .wrapper .img-box {
   background: var(--smoky-black);
   height: 200px;
   display:         flex;
   justify-content: center;
   align-items:     center;
   transition: var(--default-transition);
 }
 
 #customers .wrapper .img-box:hover { background: var(--eerie-black); }
 
 /**
  * testimonials 
  */
 
 .testimonials-content { width: 100%; }
 
 .testimonials-content p {
   color: var(--battleship-gray);
   font-size: var(--fs-4);
   margin-bottom: 50px;
 }
 
 .testimonials-content .title {
   font-size: var(--fs-2);
   font-weight: 400;
   margin-bottom: 10px;
 }
 
 .testimonials-content .subtitle {
   color: var(--battleship-gray);
   font-size: var(--fs-5);
   font-weight: 400;
   text-transform: uppercase;
 }
 
 
 
 
 
 /*-----------------------------------*\
   #NEWS & TIPS
 \*-----------------------------------*/
 
 .article-grid {
   margin-bottom: 80px;
   display: grid;
   grid-template-columns: 1fr;
   gap: 40px;
 }
 
 /* .article-box { cursor: pointer; } */
 
 .article-box .img-box {
   width: 100%;
   aspect-ratio: 4/3;
   height: auto;
   overflow: hidden;
   margin-bottom: 25px;
 }
 
 .article-box .img-box img {
   width:  100%;
   height: 100%;
   object-fit: cover;
 }
 
 .article-box .publish-date {
   color: var(--battleship-gray);
   font-size: var(--fs-6);
   text-transform: uppercase;
 }
 
 .article-box .article-name {
   color: var(--gainsboro);
   font-size: var(--fs-5);
   font-weight: 400;
   transition: var(--default-transition);
 }
 
 .article-box .article-name:hover { color: var(--liver-chestunut); }
 
 .load-more {
   border: 2px solid white;
   padding: 20px;
   width: 100%;
   text-align: center;
   color: var(--battleship-gray);
   font-size: var(--fs-5);
   font-weight: 500;
   text-transform: uppercase;
   transition: var(--default-transition);
 }
 
 .load-more:hover {
   border-color: var(--liver-chestunut);
   color: var(--liver-chestunut);
 }
 
 
 
 
 
 /*-----------------------------------*\
   #CONTACT
 \*-----------------------------------*/
 
 .contact-form {
   display:        flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 80px;
 }
 
 .contact-form .wrapper {
   display:        flex;
   flex-direction: column;
   gap: 10px;
 }
 
 .contact-form label {
   display: inline-block;
   background: #e9e1c5;
   color: var(--liver-chestunut);
   transform: translate(10px, 10px);
   padding: 0 10px;
 }
 
 .contact-form :is(input, textarea) {
   display: block;
   width: 100%;
   padding: 20px;
   background: transparent;
   border: 1px solid var(--battleship-gray);
   color: black;
   letter-spacing: 0.5px;
   outline: none;
   transition: var(--default-transition);
 }
 
 .contact-form textarea {
   max-height: 400px;
   resize: vertical;
 }
 
 .contact-form :is(input, textarea):hover { border-color: var(--battleship-gray); }
 
 .contact-form :is(input, textarea):focus { border-color: var(--liver-chestunut); }
 
 .contact-form button {
   color: var(--battleship-gray);
   font-size: var(--fs-5);
   font-weight: 600;
   text-transform: uppercase;
   border: 2px solid white;
   width: 100%;
   text-align: center;
   padding: 15px;
   margin-top: 20px;
   transition: var(--default-transition);
 }
 
 .contact-form button:hover {
   color: var(--liver-chestunut);
   border-color: var(--liver-chestunut);
 }
 
 /**
  * contact info 
  */
 
 .address, .phone, .email { margin-bottom: 50px; }
 
 :is(.address, .phone) h4 {
   color: var(--battleship-gray);
   font-size: var(--fs-6);
   font-weight: 400;
   text-transform: uppercase;
   margin-bottom: 10px;
 }
 
 .address address,
 .phone a {
   font-size: var(--fs-3);
   font-style: normal;
   transition: var(--default-transition);
 }
 
 .phone a:hover { color: var(--liver-chestunut); }
 
 .email a {
   font-size: var(--fs-5);
 }
 
 
 
 
 
 /*-----------------------------------*\
   #FOOTER
 \*-----------------------------------*/
 
 .footer {
   position: relative;
   padding: 50px 10px;
   border-top: 1px solid white;
 }
 
 .go-top {
   position: absolute;
   background: #e9e1c5;
   top:   0;
   right: 5%;
   width: 70px;
   transform: translateY(-50%);
   display:         flex;
   justify-content: center;
   align-items:     center;
 }
 
 .go-top .arrow {
   position: relative;
   width:  1px;
   height: 25px;
   background: var(--battleship-gray);
   border-color: var(--battleship-gray);
   transition: var(--default-transition);
 }
 
 .go-top:hover .arrow {
   background: var(--liver-chestunut);
   border: var(--liver-chestunut);
 }
 
 .go-top .arrow-head {
   position: absolute;
   top:   1px;
   left: -7px;
   width:  15px;
   height: 15px;
   border-width: 1px 0 0 1px;
   border-style: solid;
   border-color: inherit;
   transform: rotate(45deg);
 }
 
 .go-top::after {
   content: '';
   position: absolute;
   top:  50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 20px;
   border: 1px solid transparent;
   transition: var(--default-transition);
 }
 
 .go-top:hover::after {
   border-color: var(--liver-chestunut);
   padding: 25px;
 }
 
 .footer .copyright {
   color: var(--battleship-gray);
   font-size: var(--fs-5);
 }