:root{
    --primary-color-100: #BAD7F4;
    --primary-color-200: #A3C9F0;
    --primary-color-300: #74AFE8;
    --primary-color-400: #4694E1;
    --primary-color-500: #1878D9;
    --primary-color-600: #1361AE;
    --primary-color-700: #0E4982;
    --primary-color-800: #0A3057;
    --primary-color-900: #072441;

    --secondary-color-100: #EEF1F5;
    --secondary-color-200: #CCD6E1;
    --secondary-color-300: #99ACC4;
    --secondary-color-400: #7791B0;
    --secondary-color-500: #55759C;
    --secondary-color-600: #445E7D;
    --secondary-color-700: #33465E;
    --secondary-color-800: #222F3E;
    --secondary-color-900: #11171F ;

    --neutral-color-100: #FFFFFF;
    --neutral-color-200: #F9FAFB;
    --neutral-color-300: #F3F4F6;
    --neutral-color-400: #E5E7EB;
    --neutral-color-500: #D2D5DA;
    --neutral-color-600: #4B5563;
    --neutral-color-700: #374151;
    --neutral-color-800: #1F2937;
    --neutral-color-900: #0A0E17;

    --status-success-light: #beebcc;
    --status-success-main: #00bc55;
    --status-success-dark: #00691E;

    --status-fail-light: #fccdd3;
    --status-fail-main: #ef443c;
    --status-fail-dark: #b21f21;

    --font-size-headline-h1 : 1.25rem;
    --font-size-headline-h2: 1.135rem;
    --font-size-title-xl : 1.25rem;
    --font-size-title-lg : 1rem;
    --font-size-body: 0.75rem;

    --breakpoint-s-phone: 576px;
    --breakpoint-phone:768px;
    --breakpoing-tablet:960px;
    --breakpoint-desktop:1200px;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



@font-face {
    font-family: 'Peyda';
    src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Thin.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-ExtraLight.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Light.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Regular.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Medium.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-SemiBold.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Bold.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-ExtraBold.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Black.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-ExtraBlack.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-ExtraBlack.woff') format('woff');
    font-weight: 950;
    font-style: normal;
    font-display: swap;
}





html{
    direction: rtl;
    text-align: right;
    font-family: 'Peyda';
    overflow-x: hidden;
    width: 100%;
    font-size: 14px;
}

body{
  font-family: 'Peyda';
  font-weight: 400;
  font-style: normal;
}

h1,h2,h3,h4,h5,h6,p,span,a,button,input,textarea,select,div,section,ul,ol,li{
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
}

@media (min-width: 576px) {  
    html{
        font-size: 14.7px;
    }
}

@media (min-width: 768px) {
    html{
        font-size: 15.1px;
    }
}

@media (min-width: 960px) {
  :root{
      --font-size-headline-h1 : 2.375rem;
      --font-size-headline-h2: 2rem;
      --font-size-title-xl : 2.125rem;
      --font-size-title-lg : 1.5rem;
      --font-size-body: 1.125rem;
  }
    
  html{
    font-size: 15.4px;
  }
}

@media (min-width: 1200px) {
  html{
    font-size: 16px;
  }
}


a{
    text-decoration: none;
    color: var(--neutral-color-900);
}

ul,ol{
    padding: 0;
    list-style: none;
}

button{
    background-color: transparent;
    border-radius: 0.375rem;
    border: 0;
    cursor: pointer;
}

img{
    width: 100%;
}

button.primary-button{
    background-color: var(--primary-color-500);
    color: var(--neutral-color-100);
    padding: 0.825rem 2.5rem;
    font-weight: 700;
    border: 1px solid var(--primary-color-500);
    transition: background 0.2s, color 0.2s;
}

button.primary-button:hover{
  background-color: transparent;
  color: var(--primary-color-500);
  border: 1px solid var(--primary-color-500);
}

button.secondary-button{
  border: 1px solid var(--primary-color-500);
  color: var(--primary-color-500);
  padding: 0.75rem 2.5rem;
  font-weight: 600;
  font-size: 0.75rem;
  transition: background 0.2s, color 0.2s;
}

button.secondary-button:hover{
  background-color: var(--primary-color-500);
  color: var(--neutral-color-100);
}

svg{
    vertical-align: middle;
}

/* START HEADER  */

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

header .logo{
  width: 9rem;
}

header .menu .menu-list{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

header .menu .menu-list li a{
    font-size: 1rem;
    font-weight: 400;
    line-height: 140%;
}

header .menu .menu-item.dropdown {
  position: relative;
}

header .menu .menu-list .menu-item.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--neutral-color-100);
  min-width: 15em;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  z-index: 1000;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 0.5rem 0;
}

header .menu .menu-list .menu-item.dropdown:hover .dropdown-menu,
header .menu .menu-list .menu-item.dropdown:focus-within .dropdown-menu {
  display: block;
}

header .menu .menu-list .dropdown-menu .dropdown-item a {
  display: block;
  padding: 0.75rem 1.5rem;
  color: var(--neutral-color-900);
  text-decoration: none;
  transition: background 0.2s;
}

header .menu .menu-list .dropdown-menu .dropdown-item a:hover {
  background: var(--neutral-color-300);
  color: var(--primary-color-500);
}

header .portal a.primary-button{
  display: flex;
  background-color: var(--primary-color-500);
  padding: 0.5rem 1.5rem;
  color: var(--neutral-color-100);
  border-radius: 0.375rem;
}

header .portal a.primary-button svg{
  margin-left: 0.5rem;
  vertical-align: middle;
}

header .portal a.primary-button span:last-child{
  line-height: 1.75rem;
}

header .menu-toggler{
  display: none;
}

.d-mobile {
  display: none;
}

@media (max-width : 567px){

}
@media (max-width:768px){

}

@media (max-width: 960px){

  header .menu{
      position: absolute;
      right: 0;
      top: 6rem;
      width: 100%;
      background-color: white;
      box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
      padding: 0;
      height: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
      z-index: 1000;
  }

  header .menu.open{
      padding: 1rem 0;
      height: auto;
      max-height:80rem;
  }

  header .menu .menu-list{
      flex-direction: column;
      align-items: start;
      padding: 0 1.5rem;
  }

  header .menu-toggler{
      display: block;
  }
  
  header .portal{
      display: none;
  }

  header .portal.d-mobile{
      display: block;
      width: max-content;
      margin: 2rem auto 0;
  }

  header .menu .menu-list .menu-item a{
      display:block;
      text-align: right;
  }

  header .menu .menu-list .menu-item.dropdown .dropdown-menu{
      position: relative;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
      padding: 0;
      box-shadow: none;
      text-align: right;
  }
  header .menu .menu-list .menu-item.dropdown.open .dropdown-menu {
        max-height: 35rem;
        padding: 0.5rem 0;
  }

}

@media (max-width: 1200px){

}

/* END HEADER  */

/* Start Hero */

#hero{
    position: relative;
    text-align: center;
    background: transparent url('../images/hero-bg.png') center center/cover no-repeat;
    padding: 3rem 0;
}



#hero h1{
 font-size: var(--font-size-headline-h1);
 color: var(--primary-color-500);
 font-weight: 800;
}

#hero h2{
  font-size: var(--font-size-headline-h2);
  color: var(--primary-color-500);
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

#hero img{
  max-width: 70rem;
}

@media (max-width : 576px){

}

@media (max-width: 768px){

}

@media (max-width:960px){

}

@media (max-width: 1200px){

}

/* End Hero */


/* START ABOUT SECTION  */

#about{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

#about .video{
  max-width: 42%;
  min-width: 42%;

}

#about video{
  height: 22rem;
  border-radius: 0.5rem;
  overflow: hidden;
  object-fit: cover;
}

#about .video-container{
    position: relative;
}

#about .video-container .custom-play-btn{
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: transparent;
    border: 0;
    transform: translate(-50%, -50%);
}

#about .video-container .custom-play-btn svg{
    fill: var(--neutral-color-100);
    width: 6.25rem;
    height: 6.25rem;
    stroke: none;
}

#about .content h3{
    font-size: var(--font-size-title-lg);
    color: var(--primary-color-500);
    font-weight: 700;
}

#about .content ul{
    list-style: square;
    font-size: var(--font-size-body);
    font-weight: 200;
    margin: 1.5rem 0;
    padding-right: 1rem;
    line-height: 140%;
}

#about .content ul li{
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 140%;
    margin: 0.5rem;
}


@media (max-width: 567px){
    #about{
        flex-direction: column;
    }
    #about .content ul li{
        font-size: 1rem;
    }

    #about .video{
      max-width: 100%;
    }
    #about video{
        height: 14rem;
    }
    #about .video-container .custom-play-btn svg,#about .video-container .custom-play-btn svg path{
        width: 3.5rem;
        height: 3.5rem;
    }
}

@media (min-width:567px) and (max-width:960px){
  #about video{
    height: 14em;
  }
}

/* END ABOUT SECTION  */

/* START STATISTICS SECTION  */

#statistics .box{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}

#statistics .box .box-item{
    text-align: center;
    border-left: 1px solid var(--secondary-color-200);
}

#statistics .box .box-item:nth-child(4n) {
    border:none;
}

#statistics .box .box-item .number{
    font-size: var(--font-size-title-xl);
    font-weight: 700;
    color:var(--secondary-color-600);
}

#statistics .box .box-item .label {
    font-size: var(--font-size-title-lg);
    font-weight: 500;
    color:var(--secondary-color-600);
}

@media (min-width: 567px) and (max-width:960px){
  #statistics .box{
    grid-template-columns: 1fr 1fr;
  }

  #statistics .box .box-item{
    border-bottom: 1px solid var(--secondary-color-200);
    border-left: unset;
    padding: 1rem;
  }
}

@media (max-width: 567px){
    #statistics .box{
        grid-template-columns: 1fr;
        padding: 0 6rem;
        gap: 1rem;
    }

    #statistics .box .box-item{
         border-bottom: 1px solid var(--secondary-color-200);
         border-left: unset;
         padding: 1rem;
    }
}

/* END STATISTIC SECTION  */

/* START PRODUCTS SECTION  */

#products .products-section {
    margin: 2rem 0;
    direction: rtl;
}
  

#products .products-grid {
    display: flex;
    gap: 2rem;
}
  
#products .products-grid .products-list {
    background: var(--neutral-color-100);
    border-radius: 1em;
    box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
    padding: 2rem 1.5rem;
    min-width: 30rem;
    max-width: 30rem;
}
  
#products .products-grid .products-list .products-title {
    font-size: var(--font-size-title-lg);
    color: var(--primary-color-500);
    margin-bottom: 1.5rem;
    text-align: right;
    font-weight: 700;
}
  
#products .products-grid .products-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
  
#products .products-grid .products-list ul .product-tab {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    color: var(--neutral-color-900);
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    text-align: right;
    position: relative;
    box-shadow: 2px 4px 10px 0px rgba(28, 28, 28, 0.04);
}
  
#products .products-grid .products-list ul .product-tab.active,
#products .products-grid .products-list ul .product-tab:hover {
    background: var(--primary-color-500);
    color: var(--neutral-color-100);
    box-shadow: 2px 4px 40px 0 rgba(19, 84, 177, 0.24);
}

#products .products-grid .products-details {
    flex: 1;
    border-radius: 1rem;
    min-height: 33rem;
    box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
    overflow: hidden;
}
  
#products .products-grid .products-details .product-detail {
    background: var(--neutral-color-100);
    padding: 2rem;
    display: none;
    animation: fadeIn 0.3s;
    text-align: right;
}

#products .products-grid .products-details .product-detail p{
    text-align: justify;
    line-height: 140%;
    margin-bottom: 1.5rem;
    font-weight: 300;
    font-size: 1rem;
}

#products .products-grid .products-details .product-detail h3{
    font-size: var(--font-size-title-lg);
    font-weight: 600;
    margin-bottom: 1rem;
}

#products .products-grid .products-details .product-detail .list{
    margin-bottom: 2rem;
}

#products .products-grid .products-details .product-detail .list .list-item{
    margin-bottom: 1rem;
}

#products .products-grid .products-details .product-detail .list .list-item .icon svg {
    fill: var(--primary-color-500);
    stroke: var(--neutral-color-100);
    font-size: 1.5rem;
}

#products .products-grid .products-details .product-detail .list .list-item span:last-child{
    font-size: 1rem;
    font-weight: 300;
    line-height: 140%;
}

#products .products-grid .products-details .product-detail.active {
    display: block;
}
  
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px);}
    to { opacity: 1; transform: translateY(0);}
}
  
@media (max-width: 960px) {:root{
    --primary-color-100: #BAD7F4;
    --primary-color-200: #A3C9F0;
    --primary-color-300: #74AFE8;
    --primary-color-400: #4694E1;
    --primary-color-500: #1878D9;
    --primary-color-600: #1361AE;
    --primary-color-700: #0E4982;
    --primary-color-800: #0A3057;
    --primary-color-900: #072441;

    --secondary-color-100: #EEF1F5;
    --secondary-color-200: #CCD6E1;
    --secondary-color-300: #99ACC4;
    --secondary-color-400: #7791B0;
    --secondary-color-500: #55759C;
    --secondary-color-600: #445E7D;
    --secondary-color-700: #33465E;
    --secondary-color-800: #222F3E;
    --secondary-color-900: #11171F ;

    --neutral-color-100: #FFFFFF;
    --neutral-color-200: #F9FAFB;
    --neutral-color-300: #F3F4F6;
    --neutral-color-400: #E5E7EB;
    --neutral-color-500: #D2D5DA;
    --neutral-color-600: #4B5563;
    --neutral-color-700: #374151;
    --neutral-color-800: #1F2937;
    --neutral-color-900: #0A0E17;

    --status-success-light: #beebcc;
    --status-success-main: #00bc55;
    --status-success-dark: #00691E;

    --status-fail-light: #fccdd3;
    --status-fail-main: #ef443c;
    --status-fail-dark: #b21f21;

    --font-size-headline-h1 : 1.25rem;
    --font-size-headline-h2: 1.135rem;
    --font-size-title-xl : 1.25rem;
    --font-size-title-lg : 1rem;
    --font-size-body: 0.75rem;

    --breakpoint-s-phone: 576px;
    --breakpoint-phone:768px;
    --breakpoing-tablet:960px;
    --breakpoint-desktop:1200px;
}
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }



    @font-face {
        font-family: 'Peyda';
        src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Thin.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Thin.woff') format('woff');
        font-weight: 100;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Peyda';
        src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-ExtraLight.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-ExtraLight.woff') format('woff');
        font-weight: 200;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Peyda';
        src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Light.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Light.woff') format('woff');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Peyda';
        src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Regular.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Regular.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Peyda';
        src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Medium.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Medium.woff') format('woff');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Peyda';
        src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-SemiBold.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-SemiBold.woff') format('woff');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Peyda';
        src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Bold.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Bold.woff') format('woff');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Peyda';
        src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-ExtraBold.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-ExtraBold.woff') format('woff');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Peyda';
        src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Black.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Black.woff') format('woff');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Peyda';
        src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-ExtraBlack.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-ExtraBlack.woff') format('woff');
        font-weight: 950;
        font-style: normal;
        font-display: swap;
    }





    html{
        direction: rtl;
        text-align: right;
        font-family: 'Peyda';
        overflow-x: hidden;
        width: 100%;
        font-size: 14px;
    }

    body{
        font-family: 'Peyda';
        font-weight: 400;
        font-style: normal;
    }

    h1,h2,h3,h4,h5,h6,p,span,a,button,input,textarea,select,div,section,ul,ol,li{
        font-family: inherit;
        font-weight: inherit;
        font-style: inherit;
    }

    @media (min-width: 576px) {
        html{
            font-size: 14.7px;
        }
    }

    @media (min-width: 768px) {
        html{
            font-size: 15.1px;
        }
    }

    @media (min-width: 960px) {
        :root{
            --font-size-headline-h1 : 2.375rem;
            --font-size-headline-h2: 2rem;
            --font-size-title-xl : 2.125rem;
            --font-size-title-lg : 1.5rem;
            --font-size-body: 1.125rem;
        }

        html{
            font-size: 15.4px;
        }
    }

    @media (min-width: 1200px) {
        html{
            font-size: 16px;
        }
    }


    a{
        text-decoration: none;
        color: var(--neutral-color-900);
    }

    ul,ol{
        padding: 0;
        list-style: none;
    }

    button{
        background-color: transparent;
        border-radius: 0.375rem;
        border: 0;
        cursor: pointer;
    }

    img{
        width: 100%;
    }

    button.primary-button{
        background-color: var(--primary-color-500);
        color: var(--neutral-color-100);
        padding: 0.825rem 2.5rem;
        font-weight: 600;
        border: 1px solid var(--primary-color-500);
        transition: background 0.2s, color 0.2s;
    }

    button.primary-button:hover{
        background-color: transparent;
        color: var(--primary-color-500);
        border: 1px solid var(--primary-color-500);
    }

    button.secondary-button{
        border: 1px solid var(--primary-color-500);
        color: var(--primary-color-500);
        padding: 0.75rem 2.5rem;
        font-weight: 600;
        font-size: 0.75rem;
        transition: background 0.2s, color 0.2s;
    }

    button.secondary-button:hover{
        background-color: var(--primary-color-500);
        color: var(--neutral-color-100);
    }

    svg{
        vertical-align: middle;
    }

    /* START HEADER  */

    header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
    }

    header .logo{
        width: 9rem;
    }

    header .menu .menu-list{
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
    }

    header .menu .menu-list li a{
        font-size: 1rem;
        font-weight: 400;
        line-height: 140%;
    }

    header .menu .menu-item.dropdown {
        position: relative;
    }

    header .menu .menu-list .menu-item.dropdown .dropdown-menu {
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        background: var(--neutral-color-100);
        min-width: 15em;
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
        z-index: 1000;
        border-radius: 0 0 0.5rem 0.5rem;
        padding: 0.5rem 0;
    }

    header .menu .menu-list .menu-item.dropdown:hover .dropdown-menu,
    header .menu .menu-list .menu-item.dropdown:focus-within .dropdown-menu {
        display: block;
    }

    header .menu .menu-list .dropdown-menu .dropdown-item a {
        display: block;
        padding: 0.75rem 1.5rem;
        color: var(--neutral-color-900);
        text-decoration: none;
        transition: background 0.2s;
    }

    header .menu .menu-list .dropdown-menu .dropdown-item a:hover {
        background: var(--neutral-color-300);
        color: var(--primary-color-500);
    }

    header .portal a.primary-button{
        display: flex;
        background-color: var(--primary-color-500);
        padding: 0.5rem 1.5rem;
        color: var(--neutral-color-100);
        border-radius: 0.375rem;
    }

    header .portal a.primary-button svg{
        margin-left: 0.5rem;
        vertical-align: middle;
    }

    header .portal a.primary-button span:last-child{
        line-height: 1.75rem;
    }

    header .menu-toggler{
        display: none;
    }

    .d-mobile {
        display: none;
    }

    @media (max-width : 567px){

    }
    @media (max-width:768px){

    }

    @media (max-width: 960px){

        header .menu{
            position: absolute;
            right: 0;
            top: 6rem;
            width: 100%;
            background-color: white;
            box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
            padding: 0;
            height: 0;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
            z-index: 1000;
        }

        header .menu.open{
            padding: 1rem 0;
            height: auto;
            max-height:80rem;
        }

        header .menu .menu-list{
            flex-direction: column;
            align-items: start;
            padding: 0 1.5rem;
        }

        header .menu-toggler{
            display: block;
        }

        header .portal{
            display: none;
        }

        header .portal.d-mobile{
            display: block;
            width: max-content;
            margin: 2rem auto 0;
        }

        header .menu .menu-list .menu-item a{
            display:block;
            text-align: right;
        }

        header .menu .menu-list .menu-item.dropdown .dropdown-menu{
            position: relative;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
            padding: 0;
            box-shadow: none;
            text-align: right;
        }
        header .menu .menu-list .menu-item.dropdown.open .dropdown-menu {
            max-height: 35rem;
            padding: 0.5rem 0;
        }

    }

    @media (max-width: 1200px){

    }

    /* END HEADER  */

    /* Start Hero */

    #hero{
        position: relative;
        text-align: center;
        background: transparent url('../images/hero-bg.png') center center/cover no-repeat;
        padding: 3rem 0;
    }



    #hero h1{
        font-size: var(--font-size-headline-h1);
        color: var(--primary-color-500);
        font-weight: 800;
    }

    #hero h2{
        font-size: var(--font-size-headline-h2);
        color: var(--primary-color-500);
        font-weight: 600;
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }

    #hero img{
        max-width: 54rem;
    }

    @media (max-width : 576px){

    }

    @media (max-width: 768px){

    }

    @media (max-width:960px){

    }

    @media (max-width: 1200px){

    }

    /* End Hero */


    /* START ABOUT SECTION  */

    #about{
        display: flex;
        justify-content: space-between;
        gap: 2rem;
    }

    #about .video{
        max-width: 42%;
        min-width: 42%;

    }

    #about video{
        height: 22rem;
        border-radius: 0.5rem;
        overflow: hidden;
        object-fit: cover;
    }

    #about .video-container{
        position: relative;
    }

    #about .video-container .custom-play-btn{
        position: absolute;
        left: 50%;
        top: 50%;
        background-color: transparent;
        border: 0;
        transform: translate(-50%, -50%);
    }

    #about .video-container .custom-play-btn svg{
        fill: var(--neutral-color-100);
        width: 6.25rem;
        height: 6.25rem;
        stroke: none;
    }

    #about .content h3{
        font-size: var(--font-size-title-lg);
        color: var(--primary-color-500);
        font-weight: 700;
    }

    #about .content ul{
        list-style: square;
        font-size: var(--font-size-body);
        font-weight: 200;
        margin: 1.5rem 0;
        padding-right: 1rem;
        line-height: 140%;
    }

    #about .content ul li{
        font-size: 1.125rem;
        font-weight: 200;
        line-height: 140%;
        margin: 0.5rem;
    }


    @media (max-width: 567px){
        #about{
            flex-direction: column;
        }
        #about .content ul li{
            font-size: 1rem;
        }

        #about .video{
            max-width: 100%;
        }
        #about video{
            height: 14rem;
        }
        #about .video-container .custom-play-btn svg,#about .video-container .custom-play-btn svg path{
            width: 3.5rem;
            height: 3.5rem;
        }
    }

    @media (min-width:567px) and (max-width:960px){
        #about video{
            height: 14em;
        }
    }

    /* END ABOUT SECTION  */

    /* START STATISTICS SECTION  */

    #statistics .box{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 1rem;
        grid-row-gap: 1rem;
    }

    #statistics .box .box-item{
        text-align: center;
        border-left: 1px solid var(--secondary-color-200);
    }

    #statistics .box .box-item:nth-child(4n) {
        border:none;
    }

    #statistics .box .box-item .number{
        font-size: var(--font-size-title-xl);
        font-weight: 700;
        color:var(--secondary-color-600);
    }

    #statistics .box .box-item .label {
        font-size: var(--font-size-title-lg);
        font-weight: 500;
        color:var(--secondary-color-600);
    }

    @media (min-width: 567px) and (max-width:960px){
        #statistics .box{
            grid-template-columns: 1fr 1fr;
        }

        #statistics .box .box-item{
            border-bottom: 1px solid var(--secondary-color-200);
            border-left: unset;
            padding: 1rem;
        }
    }

    @media (max-width: 567px){
        #statistics .box{
            grid-template-columns: 1fr;
            padding: 0 6rem;
            gap: 1rem;
        }

        #statistics .box .box-item{
            border-bottom: 1px solid var(--secondary-color-200);
            border-left: unset;
            padding: 1rem;
        }
    }

    /* END STATISTIC SECTION  */

    /* START PRODUCTS SECTION  */

    #products .products-section {
        margin: 2rem 0;
        direction: rtl;
    }


    #products .products-grid {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
    }

    #products .products-grid .products-list {
        background: var(--neutral-color-100);
        border-radius: 1em;
        box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
        padding: 2rem 1.5rem;
        min-width: 30rem;
        max-width: 30rem;
    }

    #products .products-grid .products-list .products-title {
        font-size: var(--font-size-title-lg);
        color: var(--primary-color-500);
        margin-bottom: 1.5rem;
        text-align: right;
        font-weight: 700;
    }

    #products .products-grid .products-list ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #products .products-grid .products-list ul .product-tab {
        display: flex;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        margin-bottom: 1rem;
        border-radius: 0.5rem;
        cursor: pointer;
        color: var(--neutral-color-900);
        font-weight: 500;
        transition: background 0.2s, color 0.2s;
        text-align: right;
        position: relative;
        box-shadow: 2px 4px 10px 0px rgba(28, 28, 28, 0.04);
    }

    #products .products-grid .products-list ul .product-tab.active,
    #products .products-grid .products-list ul .product-tab:hover {
        background: var(--primary-color-500);
        color: var(--neutral-color-100);
        box-shadow: 2px 4px 40px 0 rgba(19, 84, 177, 0.24);
    }

    #products .products-grid .products-details {
        flex: 1;
        border-radius: 1rem;
        min-height: 18.75rem;
        text-align: left;
        box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
        overflow: hidden;
    }

    #products .products-grid .products-details .product-detail {
        background: var(--neutral-color-100);
        box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
        padding: 2rem;
        display: none;
        animation: fadeIn 0.3s;
        text-align: right;
    }

    #products .products-grid .products-details .product-detail p{
        text-align: justify;
        line-height: 140%;
        margin-bottom: 1.5rem;
        font-weight: 300;
        font-size: 1rem;
    }

    #products .products-grid .products-details .product-detail h3{
        font-size: var(--font-size-title-lg);
        font-weight: 600;
        margin-bottom: 1rem;
    }

    #products .products-grid .products-details .product-detail .list{
        margin-bottom: 2rem;
    }

    #products .products-grid .products-details .product-detail .list .list-item{
        margin-bottom: 1rem;
    }

    #products .products-grid .products-details .product-detail .list .list-item .icon svg {
        fill: var(--primary-color-500);
        stroke: var(--neutral-color-100);
        font-size: 1.5rem;
    }

    #products .products-grid .products-details .product-detail .list .list-item span:last-child{
        font-size: 1rem;
        font-weight: 300;
        line-height: 140%;
    }

    #products .products-grid .products-details .product-detail.active {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px);}
        to { opacity: 1; transform: translateY(0);}
    }

    @media (max-width: 960px) {
        #products .products-grid .products-list .products-title{
            font-size: calc(var(--font-size-title-lg) + 0.25rem);
        }
        #products .products-grid {
            flex-direction: column;
            gap: 1rem ;
        }

        #products .products-grid .products-list {
            max-width: 100%;
            min-width: 100%;
            width: 100%;
            padding: 0;
            box-shadow: none;
        }
        #products .products-grid .products-details{
            padding: 0;
        }

        #products .products-grid .products-details .product-detail{
            padding: 1rem 1.5rem;
            font-size: var(--font-size-body);
        }

        #products .products-grid .products-list ul .product-tab{
            box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
        }
    }

    /* END PRODUCTS SECTION  */

    /* START BANNER SECTION  */

    #banner {
        background: #55759C;
        background: linear-gradient(90deg, rgba(85, 117, 156, 1) 0%, rgba(85, 117, 156, 1) 60%, rgba(68, 94, 125, 1) 71%, rgba(68, 94, 125, 1) 85%, rgba(43, 60, 79, 1) 100%);
        border-radius: 1.5rem;
        padding: 3rem 3.25rem;
        box-shadow: 0 0.25rem 2rem rgba(0,0,0,0.08);
    }

    #banner .banner__container {
        display: flex;
        align-items: center;
        gap: 2.5rem;
    }

    #banner .banner__container .banner__content {
        flex: 1.8;
        color: var(--neutral-color-100);
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #banner .banner__container .banner__content .banner__logo {
        width: 7.5rem;
        margin-bottom: 1.5rem;
    }

    #banner .banner__container .banner__content .banner__title {
        font-size: var(--font-size-title-lg);
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        color: var(--neutral-color-100);
    }

    #banner .banner__container .banner__content .banner__subtitle {
        font-size: calc( var(--font-size-title-lg) - 0.125rem);
        font-weight: 600;
        margin: 0 0 1.5rem 0;
        color: var(--neutral-color-100);
    }

    #banner .banner__container .banner__content .banner__list {
        list-style: disc inside;
        color: #f3f6fa;
        font-size: 1rem;
        padding-right: 1rem;
        margin: 0;
    }

    #banner .banner__container .banner__content .banner__list li {
        margin-bottom: 0.5rem;
        position: relative;
        list-style: square;
        font-weight: 200;
    }

    #banner .banner__container .banner__image {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: -6rem;
    }

    #banner .banner__container .banner__image img {
        max-width: 100%;
        border-radius: 1rem;
        padding: 0.5rem;
        margin: -6rem 0;
    }

    @media (max-width: 960px) {
        #banner .banner__container {
            flex-direction: column-reverse;
            padding: 0 1rem;
        }
        #banner .banner__image, .banner__content {
            width: 100%;
            flex: unset;
        }

        #banner {
            padding: 1.5rem 0.5rem;
            background: linear-gradient(180deg, rgba(85, 117, 156, 1) 0%, rgba(85, 117, 156, 1) 30%, rgba(68, 94, 125, 1) 50%, rgba(68, 94, 125, 1) 60%, rgba(43, 60, 79, 1) 100%);
        }

        #banner .banner__container .banner__image,#banner .banner__container .banner__image img{
            margin: 0 0 -2rem 0;
            padding: 0;
        }

        #banner .banner__container .banner__content .banner__logo{
            margin-bottom: 2rem;
        }

        #banner .banner__container .banner__content .banner__title{
            margin-bottom: 1rem;
        }

        #banner .banner__container .banner__content .banner__subtitle{
            margin-bottom: 1.5rem;
        }

        #banner .banner__container .banner__content .banner__list{
            font-size: 0.75rem;
        }

    }

    /* END BANNER SECTION  */

    /* START PARTNERS SECTION  */

    #partners {
        text-align: center;
    }

    #partners .partners__title {
        color: var(--primary-color-500);
        font-size: var(--font-size-title-lg);
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    #partners .partners__title .line {
        display: inline-block;
        height: 0.125rem;
        width: 2.5rem;
        background: var(--primary-color-500);
    }

    #partners .partners__logos {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        padding: 1rem 0;
        scrollbar-width: thin;
    }

    #partners .partners__logos .partners__logos-item{
        height: 6rem;
        width: 12em;
        transition: transform 0.2s;
    }

    #partners .partners__logos .partners__logos-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    #partners .partners__logos img:hover {
        transform: scale(1.07);
    }

    @media (max-width: 960px) {

        #partners .partners__logos img {
            min-width: 7.5rem;
            height: 3.75rem;
        }

        #partners .partners__title{
            gap: 0.5rem;
        }

    }

    /* END PARTNERS SECTION  */

    /* START BLOG SECTION  */
    #blog{
        width: 100%;
        overflow: hidden;
    }

    #blog .blog__header {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2rem;
    }

    #blog .blog__header .blog__title {
        color: var(--primary-color-500);
        font-size: var(--font-size-title-lg);
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    #blog .blog__header .blog__title .line {
        display: inline-block;
        height: 0.125rem;
        width: 2.5rem;
        background: var(--primary-color-500);
    }

    #blog .blog__all-link {
        color: var(--primary-color-500);
        font-size: 1rem;
        text-decoration: none;
        font-weight: 400;
        transition: color 0.2s;
        display: block;
        text-align: left;
        margin-bottom: 1rem;
    }

    #blog .blog__all-link:hover {
        color: var(--primary-color-700);
        font-weight: 500;
    }

    #blog .blog__articles{
        padding: 1rem 0;
    }
    #blog .blog__articles .blog__card {
        background: var(--neutral-color-100);
        border-radius: 0.375rem;
        box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: box-shadow 0.2s;
    }

    #blog .blog__articles .blog__card .blog__card:hover {
        box-shadow: 0 0.25rem 1.5rem rgba(24,120,217,0.10);
    }

    #blog .blog__articles .blog__card .blog__image {
        width: 100%;
        height: 11.25rem;
        object-fit: cover;
    }

    #blog .blog__articles .blog__card .blog__card-content {
        padding: 1.2rem 1.5rem 1rem 1.5rem;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 12rem;
        max-height: 12rem;
    }

    #blog .blog__articles .blog__card .blog__card-content .blog__card-title {
        text-wrap: auto;
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 0.375rem;
    }

    #blog .blog__articles .blog__card .blog__card-content .blog__card-desc {
        color: var(--neutral-color-600);
        font-size: 0.75rem;
        margin-bottom: 1.5rem;
    }

    #blog .blog__articles .blog__card .blog__card-content .blog__card-meta {
        display: flex;
        gap: 1.5rem;
        color: var(--neutral-color-600);
        font-size: 0.75rem;
        margin-top: auto;
        align-items: center;
    }

    #blog .blog__articles .blog__card .blog__card-content .blog__card-meta .time-to-read svg,
    #blog .blog__articles .blog__card .blog__card-content .blog__card-meta .read-count svg{
        margin-left: 0.25rem;
        font-size: 1.25rem;
    }

    @media (max-width: 960px) {
        #blog .blog__articles {
            display: block;
        }

        #blog .blog__articles .blog__card {
            display: inline-block;
            margin-left: 1rem;
        }

        #blog .blog__all-link{
            font-size: var(--font-size-body);
        }

    }
    /* END BLOG SECTION  */

    /* START FOOTER SECTION  */

    .footer {
        background: rgba(85, 117, 156, 0.1);
        /* margin-top: 3rem; */
        font-size: 1rem;
    }
    .footer__container {
        max-width: 82.5rem;
        margin: 0 auto;
    }

    .footer__main {
        max-width: 82.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2rem 2rem 1rem 2rem;
        flex-wrap: wrap;
        margin: 0 auto;
    }

    .footer__cta{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 2em;
    }

    .footer__cta svg{
        fill: var(--neutral-color-900);
        stroke: var(--neutral-color-100);
        font-size: 1.25rem;
        stroke-width: 1px;
    }

    .phone-numbers{
        display: flex;
        align-items: center;
        gap: 2rem;
        margin-bottom: 1rem;
    }

    .footer__logo img {
        max-width: 10rem;
        max-height: 4rem;
    }

    .footer__info {
        display: grid;
        grid-template-columns: 5fr 1fr;
        gap: 1.5rem;
        width: 100%;
    }

    .footer__info .top-bar{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .footer__nav {
        display: flex;
        gap: 1.5rem;
        font-weight: 500;
        color: #222;
        margin-bottom: 1rem;
        flex-wrap: wrap;
        min-height: 4rem;
        align-items: center;
    }

    .footer__nav a {
        color: #222;
        text-decoration: none;
        transition: color 0.2s;
    }
    .footer__nav a:hover {
        color: var(--primary-color-500);
    }

    .footer__nav span {
        color: #d2d5da;
        font-size: 1.2rem;
    }

    .footer__contacts {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        font-weight: 600;
        align-items: flex-start;
    }

    .footer__contact-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var( --neutral-color-700);
        font-size: 1rem;
        font-weight: 500;
    }

    .footer__icon {
        display: flex;
        align-items: center;
    }

    .footer__icon svg{
        width: 1.5rem;
        height: 1.5rem;
        fill: var(--secondary-color-700);
        stroke: var(--neutral-color-100);
    }

    .footer__contact-item a{
        float: left;
        margin-right: 0.5em;
    }

    .footer__bottom {
        background: var(--secondary-color-700);
        color: var(--neutral-color-100);
        width: 100%;
        text-align: center;
        padding: 1rem 2rem;
        flex-wrap: wrap;
    }

    .footer__social-box{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    .footer__social-list {
        display: flex;
        gap: 1.5rem;
    }

    .footer__social-description{
        font-size: 0.75rem;
    }

    .footer__social a {
        color: var(--neutral-color-100);
        opacity: 0.85;
        transition: opacity 0.2s;
        display: flex;
        align-items: center;
    }

    .footer__social a:hover {
        opacity: 1;
    }

    .footer__copyright {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--neutral-color-100);
    }
    @media (max-width: 960px) {
        .footer__main {
            flex-direction: column;
            align-items: center;
            padding: 2rem 1rem 1rem 1rem;
            gap: 2rem;
        }

        .footer__info {
            grid-template-columns: 2fr 1fr;
            align-items: center;
            text-align: center;
        }



        .footer__contacts {
            align-items: start;
        }

        .footer__bottom {
            flex-direction: column;
            gap: 1rem;
            padding: 1rem 0.5rem;
        }

        .footer__nav{
            gap: 0.5rem;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .phone-numbers{
            flex-direction: column;
            justify-content: start;
            align-items: start;
            font-size: 0.875rem;
            gap: 1rem;
        }

        .footer__contact-item{
            font-size: 0.875rem;
            font-weight: 300;
            text-align: right;
        }

        .footer__cta{
            flex-direction: column;
            align-items: start;
        }

        .footer__logo img{
            margin-top: 1rem;
        }
        .footer__social-box{
            margin: 1.5rem auto 0 auto;
        }

        .footer__copyright{
            font-size: 0.75rem;
        }


    }
    @media (max-width:567px){
        .footer__info {
            grid-template-columns: 1fr;
            align-items: center;
            text-align: center;
        }
        .footer__info .top-bar{
            flex-direction: column;
            gap: 0;
        }
        .footer__nav a{
            font-size: 0.875rem;
            font-weight: 500;
        }

    }



    /* END FOOTER SECTION  */



    /* =========================
       ABOUT PAGE (BEM, scoped)
    ========================= */

    /* Section title */
    .about__section-title{
        font-size: clamp(1.25rem, 1.2rem + 0.8vw, var(--font-size-title-lg));
        color: var(--primary-color-500);
        font-weight: 700;
        margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
    }

    /* ----------------- Hero ----------------- */
    .about__hero{
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: clamp(1rem, 2.5vw, 2rem);
        align-items: center;
        background:
                radial-gradient(120rem 80rem at 120% -10%, rgba(24,120,217,0.05) 0%, rgba(24,120,217,0) 60%),
                radial-gradient(60rem 40rem at -30% 120%, rgba(68,94,125,0.06) 0%, rgba(68,94,125,0) 60%);
        border-radius: 1rem;
        padding: clamp(1rem, 2.5vw, 2rem);
    }

    .about__hero-media{ width: 100%; }
    .about__hero-video{
        width: 100%;
        height: clamp(13rem, 18vw, 22rem);
        border-radius: 0.75rem;
        object-fit: cover;
        box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.08);
    }

    .about__hero-content{ display: flex; flex-direction: column; gap: clamp(0.75rem, 1.5vw, 1rem); }
    .about__hero-title{
        font-size: clamp(1.5rem, 1.2rem + 1.8vw, var(--font-size-headline-h2));
        color: var(--primary-color-500);
        font-weight: 800;
        margin: 0;
    }
    .about__hero-subtitle{
        font-size: clamp(1rem, .9rem + 1vw, var(--font-size-title-lg));
        color: var(--secondary-color-700);
        font-weight: 700;
        margin: 0;
    }
    .about__hero-text{
        color: var(--secondary-color-700);
        line-height: 1.95;
        text-align: justify;
        font-weight: 300;
        margin: 0;
    }

    .about__hero-cta{ display: flex; gap: 0.75rem; }

    /* ----------------- Timeline ----------------- */
    .about__timeline{ display: grid; gap: 1rem; }
    .about__timeline-rail{
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(14rem, 1fr);
        gap: 1rem;
        overflow-x: auto;
        padding: 0.5rem 0.25rem 0.75rem;
        scrollbar-width: thin;
    }

    .about__timeline-step{
        background: var(--neutral-color-100);
        border: 1px solid var(--neutral-color-400);
        border-radius: 0.75rem;
        padding: 1rem;
        text-align: center;
        box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.05);
    }

    .about__timeline-badge{
        display: inline-block;
        background: var(--primary-color-500);
        color: var(--neutral-color-100);
        padding: 0.25rem 0.75rem;
        border-radius: 100rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .about__timeline-caption{
        font-weight: 300;
        color: var(--secondary-color-700);
        font-size: clamp(.8rem, .75rem + .2vw, 1rem);
    }

    /* ----------------- Solutions ----------------- */
    .about__solutions{ display: grid; gap: 1.25rem; }
    .about__solutions-grid{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: clamp(0.75rem, 1.5vw, 1rem);
    }

    .about__solution-card{
        background: var(--neutral-color-100);
        border: 1px solid var(--neutral-color-400);
        border-radius: 0.75rem;
        padding: clamp(0.75rem, 1.5vw, 1rem);
        box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.05);
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
        outline: none;
    }

    .about__solution-card:hover,
    .about__solution-card:focus{
        transform: translateY(-2px);
        box-shadow: 0 0.25rem 1rem rgba(24,120,217,.12);
        border-color: var(--primary-color-300);
    }

    .about__solution-media{
        height: 5.25rem;
        border-radius: 0.5rem;
        background: linear-gradient(135deg, #e9f2fd 0%, #f5f8fc 100%);
        margin-bottom: 0.75rem;
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
    }

    .about__solution-image{ width: 100%; height: 100%; object-fit: cover; }
    .about__solution-title{ font-weight: 700; margin: 0 0 0.25rem; color: var(--secondary-color-800); }
    .about__solution-desc{ font-weight: 300; color: var(--secondary-color-700); margin: 0; line-height: 1.7; }

    /* ----------------- Achievements ----------------- */
    .about__achievements{ display: grid; gap: 1.25rem; }
    .about__achievements-grid{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: clamp(0.75rem, 1.5vw, 1rem);
    }

    .about__achievement-card{
        background: var(--neutral-color-100);
        border: 1px solid var(--neutral-color-400);
        border-radius: 0.75rem;
        padding: clamp(1rem, 1.5vw, 1.25rem);
        text-align: center;
        box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.05);
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
        outline: none;
    }

    .about__achievement-card:hover,
    .about__achievement-card:focus{
        transform: translateY(-2px);
        box-shadow: 0 0.25rem 1rem rgba(24,120,217,.12);
        border-color: var(--primary-color-300);
    }

    .about__achievement-icon{
        width: 3rem; height: 3rem; margin: 0 auto 0.5rem;
        border-radius: 0.5rem; background: #eef4fd; object-fit: cover;
    }

    .about__achievement-number{ color: var(--secondary-color-700); font-weight: 800; font-size: clamp(1rem, .9rem + .6vw, var(--font-size-title-lg)); margin: 0 0 .25rem; }
    .about__achievement-text{ color: var(--secondary-color-700); font-weight: 300; margin: 0; }

    /* ----------------- KPIs band ----------------- */
    .about__kpis{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        border: 1px solid var(--neutral-color-400);
        border-radius: 1rem;
        overflow: hidden;
        background: var(--neutral-color-100);
    }

    .about__kpi{
        text-align: center;
        padding: clamp(1rem, 1.5vw, 1.25rem);
        border-left: 1px solid var(--neutral-color-400);
        background: linear-gradient(180deg, #fafbfd 0%, #f6f8fb 100%);
    }

    .about__kpi:last-child{ border-left: none; }
    .about__kpi-number{ display: block; color: var(--secondary-color-600); font-weight: 800; font-size: clamp(1.1rem, 1rem + .9vw, var(--font-size-title-lg)); }
    .about__kpi-label{ display: block; color: var(--secondary-color-700); font-weight: 300; font-size: clamp(.8rem, .75rem + .2vw, 1rem); }

    /* ----------------- Vision ----------------- */
    .about__vision{
        display: grid;
        grid-template-columns: 7fr 5fr;
        gap: clamp(1rem, 2.5vw, 2rem);
        align-items: center;
        padding-top: clamp(0.5rem, 1vw, 1rem);
    }

    .about__vision-text{ color: var(--secondary-color-700); line-height: 1.95; text-align: justify; font-weight: 300; margin: 0 0 1rem; }
    .about__vision-list{ list-style: square; padding-right: 1rem; color: var(--secondary-color-700); font-weight: 300; margin: 0; }
    .about__vision-image{
        width: 100%;
        border-radius: 0.75rem;
        box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.08);
        display: block;
    }

    /* =========================
       Responsive Breakpoints
       ========================= */

    /* 1440px - desktop */
    @media (max-width: 1440px){
        .about__hero{ grid-template-columns: 1fr 1.2fr; }
    }

    /* 1200px - large laptop */
    @media (max-width: 1200px){
        .about__solutions-grid,
        .about__achievements-grid { grid-template-columns: repeat(3,1fr); }
    }

    /* 992px - tablet */
    @media (max-width: 992px){
        .about__hero{ grid-template-columns: 1fr; }
        .about__hero-video{ height: clamp(12rem, 26vw, 15rem); }
        .about__vision{ grid-template-columns: 1fr; }
        .about__kpis{ grid-template-columns: repeat(2,1fr); }
        .about__kpi{ border-left: none; border-bottom: 1px solid var(--neutral-color-400); }
        .about__kpi:nth-child(odd){ border-inline-end: 1px solid var(--neutral-color-400); }
    }

    /* 768px - small tablet */
    @media (max-width: 768px){
        .about__solutions-grid,
        .about__achievements-grid { grid-template-columns: repeat(2,1fr); }
    }

    /* 480px - mobile */
    @media (max-width: 480px){
        .about{ gap: 2rem; }
        .about__solutions-grid,
        .about__achievements-grid { grid-template-columns: 1fr; }
        .about__kpis{ grid-template-columns: 1fr; }
        .about__kpi{ border: none; border-bottom: 1px solid var(--neutral-color-400); }
        .about__kpi:last-child{ border-bottom: none; }
    }

    .shape1,
    .shape2,
    .shape3 {
        position: absolute;
        z-index: -1;
        pointer-events: none;

    }

    .shape1 img,
    .shape2 img,
    .shape3 img {
        width: 100%;
        height: auto;
        display: block;
    }

    .shape1 {
        left: 0;
        top: 140%;
    }

    .shape2 {
        right: 0;
        top: 100%;
    }

    .shape3 {
        left: 0;
        top: 240%;
    }

    @media (max-width: 768px) {
        .shape1,
        .shape2,
        .shape3 {
            display: none;
        }:root{
             --primary-color-100: #BAD7F4;
             --primary-color-200: #A3C9F0;
             --primary-color-300: #74AFE8;
             --primary-color-400: #4694E1;
             --primary-color-500: #1878D9;
             --primary-color-600: #1361AE;
             --primary-color-700: #0E4982;
             --primary-color-800: #0A3057;
             --primary-color-900: #072441;

             --secondary-color-100: #EEF1F5;
             --secondary-color-200: #CCD6E1;
             --secondary-color-300: #99ACC4;
             --secondary-color-400: #7791B0;
             --secondary-color-500: #55759C;
             --secondary-color-600: #445E7D;
             --secondary-color-700: #33465E;
             --secondary-color-800: #222F3E;
             --secondary-color-900: #11171F ;

             --neutral-color-100: #FFFFFF;
             --neutral-color-200: #F9FAFB;
             --neutral-color-300: #F3F4F6;
             --neutral-color-400: #E5E7EB;
             --neutral-color-500: #D2D5DA;
             --neutral-color-600: #4B5563;
             --neutral-color-700: #374151;
             --neutral-color-800: #1F2937;
             --neutral-color-900: #0A0E17;

             --status-success-light: #beebcc;
             --status-success-main: #00bc55;
             --status-success-dark: #00691E;

             --status-fail-light: #fccdd3;
             --status-fail-main: #ef443c;
             --status-fail-dark: #b21f21;

             --font-size-headline-h1 : 1.25rem;
             --font-size-headline-h2: 1.135rem;
             --font-size-title-xl : 1.25rem;
             --font-size-title-lg : 1rem;
             --font-size-body: 0.75rem;

             --breakpoint-s-phone: 576px;
             --breakpoint-phone:768px;
             --breakpoing-tablet:960px;
             --breakpoint-desktop:1200px;
         }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }



        @font-face {
            font-family: 'Peyda';
            src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Thin.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Thin.woff') format('woff');
            font-weight: 100;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Peyda';
            src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-ExtraLight.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-ExtraLight.woff') format('woff');
            font-weight: 200;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Peyda';
            src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Light.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Light.woff') format('woff');
            font-weight: 300;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Peyda';
            src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Regular.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Regular.woff') format('woff');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Peyda';
            src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Medium.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Medium.woff') format('woff');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Peyda';
            src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-SemiBold.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-SemiBold.woff') format('woff');
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Peyda';
            src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Bold.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Bold.woff') format('woff');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Peyda';
            src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-ExtraBold.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-ExtraBold.woff') format('woff');
            font-weight: 800;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Peyda';
            src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-Black.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-Black.woff') format('woff');
            font-weight: 900;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Peyda';
            src: url('../fonts/Peyda/woff2/PeydaFaNumWeb-ExtraBlack.woff2') format('woff2'), url('../fonts/Peyda/woff/PeydaFaNumWeb-ExtraBlack.woff') format('woff');
            font-weight: 950;
            font-style: normal;
            font-display: swap;
        }





        html{
            direction: rtl;
            text-align: right;
            font-family: 'Peyda';
            overflow-x: hidden;
            width: 100%;
            font-size: 14px;
        }

        body{
            font-family: 'Peyda';
            font-weight: 400;
            font-style: normal;
        }

        h1,h2,h3,h4,h5,h6,p,span,a,button,input,textarea,select,div,section,ul,ol,li{
            font-family: inherit;
            font-weight: inherit;
            font-style: inherit;
        }

        @media (min-width: 576px) {
            html{
                font-size: 14.7px;
            }
        }

        @media (min-width: 768px) {
            html{
                font-size: 15.1px;
            }
        }

        @media (min-width: 960px) {
            :root{
                --font-size-headline-h1 : 2.375rem;
                --font-size-headline-h2: 2rem;
                --font-size-title-xl : 2.125rem;
                --font-size-title-lg : 1.5rem;
                --font-size-body: 1.125rem;
            }

            html{
                font-size: 15.4px;
            }
        }

        @media (min-width: 1200px) {
            html{
                font-size: 16px;
            }
        }


        a{
            text-decoration: none;
            color: var(--neutral-color-900);
        }

        ul,ol{
            padding: 0;
            list-style: none;
        }

        button{
            background-color: transparent;
            border-radius: 0.375rem;
            border: 0;
            cursor: pointer;
        }

        img{
            width: 100%;
        }

        button.primary-button{
            background-color: var(--primary-color-500);
            color: var(--neutral-color-100);
            padding: 0.825rem 2.5rem;
            font-weight: 700;
            font-size: 0.75rem;
            border: 1px solid var(--primary-color-500);
            transition: background 0.2s, color 0.2s;
        }

        button.primary-button:hover{
            background-color: transparent;
            color: var(--primary-color-500);
            border: 1px solid var(--primary-color-500);
        }

        button.secondary-button{
            border: 1px solid var(--primary-color-500);
            color: var(--primary-color-500);
            padding: 0.75rem 2.5rem;
            font-weight: 600;
            font-size: 0.75rem;
            transition: background 0.2s, color 0.2s;
        }

        button.secondary-button:hover{
            background-color: var(--primary-color-500);
            color: var(--neutral-color-100);
        }

        svg{
            vertical-align: middle;
        }

        /* START HEADER  */

        header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
        }

        header .logo{
            width: 9rem;
        }

        header .menu .menu-list{
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 2rem;
        }

        header .menu .menu-list li a{
            font-size: 1rem;
            font-weight: 400;
            line-height: 140%;
        }

        header .menu .menu-item.dropdown {
            position: relative;
        }

        header .menu .menu-list .menu-item.dropdown .dropdown-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background: var(--neutral-color-100);
            min-width: 15em;
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
            z-index: 1000;
            border-radius: 0 0 0.5rem 0.5rem;
            padding: 0.5rem 0;
        }

        header .menu .menu-list .menu-item.dropdown:hover .dropdown-menu,
        header .menu .menu-list .menu-item.dropdown:focus-within .dropdown-menu {
            display: block;
        }

        header .menu .menu-list .dropdown-menu .dropdown-item a {
            display: block;
            padding: 0.75rem 1.5rem;
            color: var(--neutral-color-900);
            text-decoration: none;
            transition: background 0.2s;
        }

        header .menu .menu-list .dropdown-menu .dropdown-item a:hover {
            background: var(--neutral-color-300);
            color: var(--primary-color-500);
        }

        header .portal a.primary-button{
            display: flex;
            background-color: var(--primary-color-500);
            padding: 0.5rem 1.5rem;
            color: var(--neutral-color-100);
            border-radius: 0.375rem;
        }

        header .portal a.primary-button svg{
            margin-left: 0.5rem;
            vertical-align: middle;
        }

        header .portal a.primary-button span:last-child{
            line-height: 1.75rem;
        }

        header .menu-toggler{
            display: none;
        }

        .d-mobile {
            display: none;
        }

        @media (max-width : 567px){

        }
        @media (max-width:768px){

        }

        @media (max-width: 960px){

            header .menu{
                position: absolute;
                right: 0;
                top: 6rem;
                width: 100%;
                background-color: white;
                box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
                padding: 0;
                height: 0;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
                z-index: 1000;
            }

            header .menu.open{
                padding: 1rem 0;
                height: auto;
                max-height:80rem;
            }

            header .menu .menu-list{
                flex-direction: column;
                align-items: start;
                padding: 0 1.5rem;
            }

            header .menu-toggler{
                display: block;
            }

            header .portal{
                display: none;
            }

            header .portal.d-mobile{
                display: block;
                width: max-content;
                margin: 2rem auto 0;
            }

            header .menu .menu-list .menu-item a{
                display:block;
                text-align: right;
            }

            header .menu .menu-list .menu-item.dropdown .dropdown-menu{
                position: relative;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
                padding: 0;
                box-shadow: none;
                text-align: right;
            }
            header .menu .menu-list .menu-item.dropdown.open .dropdown-menu {
                max-height: 35rem;
                padding: 0.5rem 0;
            }

        }

        @media (max-width: 1200px){

        }

        /* END HEADER  */

        /* Start Hero */

        #hero{
            position: relative;
            text-align: center;
            background: transparent url('../images/hero-bg.png') center center/cover no-repeat;
            padding: 3rem 0;
        }



        #hero h1{
            font-size: var(--font-size-headline-h1);
            color: var(--primary-color-500);
            font-weight: 800;
        }

        #hero h2{
            font-size: var(--font-size-headline-h2);
            color: var(--primary-color-500);
            font-weight: 600;
            margin-top: 0.5rem;
            margin-bottom: 1rem;
        }

        #hero img{
            max-width: 54rem;
        }

        @media (max-width : 576px){

        }

        @media (max-width: 768px){

        }

        @media (max-width:960px){

        }

        @media (max-width: 1200px){

        }

        /* End Hero */


        /* START ABOUT SECTION  */

        #about{
            display: flex;
            justify-content: space-between;
            gap: 2rem;
        }

        #about .video{
            max-width: 42%;
            min-width: 42%;

        }

        #about video{
            height: 22rem;
            border-radius: 0.5rem;
            overflow: hidden;
            object-fit: cover;
        }

        #about .video-container{
            position: relative;
        }

        #about .video-container .custom-play-btn{
            position: absolute;
            left: 50%;
            top: 50%;
            background-color: transparent;
            border: 0;
            transform: translate(-50%, -50%);
        }

        #about .video-container .custom-play-btn svg{
            fill: var(--neutral-color-100);
            width: 6.25rem;
            height: 6.25rem;
            stroke: none;
        }

        #about .content h3{
            font-size: var(--font-size-title-lg);
            color: var(--primary-color-500);
            font-weight: 700;
        }

        #about .content ul{
            list-style: square;
            font-size: var(--font-size-body);
            font-weight: 200;
            margin: 1.5rem 0;
            padding-right: 1rem;
            line-height: 140%;
        }

        #about .content ul li{
            font-size: 1.125rem;
            font-weight: 200;
            line-height: 140%;
            margin: 0.5rem;
        }


        @media (max-width: 567px){
            #about{
                flex-direction: column;
            }
            #about .content ul li{
                font-size: 1rem;
            }

            #about .video{
                max-width: 100%;
            }
            #about video{
                height: 14rem;
            }
            #about .video-container .custom-play-btn svg,#about .video-container .custom-play-btn svg path{
                width: 3.5rem;
                height: 3.5rem;
            }
        }

        @media (min-width:567px) and (max-width:960px){
            #about video{
                height: 14em;
            }
        }

        /* END ABOUT SECTION  */

        /* START STATISTICS SECTION  */

        #statistics .box{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-column-gap: 1rem;
            grid-row-gap: 1rem;
        }

        #statistics .box .box-item{
            text-align: center;
            border-left: 1px solid var(--secondary-color-200);
        }

        #statistics .box .box-item:nth-child(4n) {
            border:none;
        }

        #statistics .box .box-item .number{
            font-size: var(--font-size-title-xl);
            font-weight: 700;
            color:var(--secondary-color-600);
        }

        #statistics .box .box-item .label {
            font-size: var(--font-size-title-lg);
            font-weight: 500;
            color:var(--secondary-color-600);
        }

        @media (min-width: 567px) and (max-width:960px){
            #statistics .box{
                grid-template-columns: 1fr 1fr;
            }

            #statistics .box .box-item{
                border-bottom: 1px solid var(--secondary-color-200);
                border-left: unset;
                padding: 1rem;
            }
        }

        @media (max-width: 567px){
            #statistics .box{
                grid-template-columns: 1fr;
                padding: 0 6rem;
                gap: 1rem;
            }

            #statistics .box .box-item{
                border-bottom: 1px solid var(--secondary-color-200);
                border-left: unset;
                padding: 1rem;
            }
        }

        /* END STATISTIC SECTION  */

        /* START PRODUCTS SECTION  */

        #products .products-section {
            margin: 2rem 0;
            direction: rtl;
        }


        #products .products-grid {
            display: flex;
            gap: 2rem;
            align-items: flex-start;
        }

        #products .products-grid .products-list {
            background: var(--neutral-color-100);
            border-radius: 1em;
            box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
            padding: 2rem 1.5rem;
            min-width: 30rem;
            max-width: 30rem;
        }

        #products .products-grid .products-list .products-title {
            font-size: var(--font-size-title-lg);
            color: var(--primary-color-500);
            margin-bottom: 1.5rem;
            text-align: right;
            font-weight: 700;
        }

        #products .products-grid .products-list ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #products .products-grid .products-list ul .product-tab {
            display: flex;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            margin-bottom: 1rem;
            border-radius: 0.5rem;
            cursor: pointer;
            color: var(--neutral-color-900);
            font-weight: 500;
            transition: background 0.2s, color 0.2s;
            text-align: right;
            position: relative;
            box-shadow: 2px 4px 10px 0px rgba(28, 28, 28, 0.04);
        }

        #products .products-grid .products-list ul .product-tab.active,
        #products .products-grid .products-list ul .product-tab:hover {
            background: var(--primary-color-500);
            color: var(--neutral-color-100);
            box-shadow: 2px 4px 40px 0 rgba(19, 84, 177, 0.24);
        }

        #products .products-grid .products-details {
            flex: 1;
            border-radius: 1rem;
            min-height: 18.75rem;
            text-align: left;
            box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
            overflow: hidden;
        }

        #products .products-grid .products-details .product-detail {
            background: var(--neutral-color-100);
            box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
            padding: 2rem;
            display: none;
            animation: fadeIn 0.3s;
            text-align: right;
        }

        #products .products-grid .products-details > img{
            max-width: 20rem;
        }

        #products .products-grid .products-details .product-detail p{
            text-align: justify;
            line-height: 140%;
            margin-bottom: 1.5rem;
            font-weight: 300;
            font-size: 1rem;
        }

        #products .products-grid .products-details .product-detail h3{
            font-size: var(--font-size-title-lg);
            font-weight: 600;
            margin-bottom: 1rem;
        }

        #products .products-grid .products-details .product-detail .list{
            margin-bottom: 2rem;
        }

        #products .products-grid .products-details .product-detail .list .list-item{
            margin-bottom: 1rem;
        }

        #products .products-grid .products-details .product-detail .list .list-item .icon svg {
            fill: var(--primary-color-500);
            stroke: var(--neutral-color-100);
            font-size: 1.5rem;
        }

        #products .products-grid .products-details .product-detail .list .list-item span:last-child{
            font-size: 1rem;
            font-weight: 300;
            line-height: 140%;
        }

        #products .products-grid .products-details .product-detail.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px);}
            to { opacity: 1; transform: translateY(0);}
        }

        @media (max-width: 960px) {
            #products .products-grid .products-list .products-title{
                font-size: calc(var(--font-size-title-lg) + 0.25rem);
            }
            #products .products-grid {
                flex-direction: column;
                gap: 1rem ;
            }

            #products .products-grid .products-list {
                max-width: 100%;
                min-width: 100%;
                width: 100%;
                padding: 0;
                box-shadow: none;
            }
            #products .products-grid .products-details{
                padding: 0;
            }

            #products .products-grid .products-details .product-detail{
                padding: 1rem 1.5rem;
                font-size: var(--font-size-body);
            }

            #products .products-grid .products-list ul .product-tab{
                box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
            }
        }

        /* END PRODUCTS SECTION  */

        /* START BANNER SECTION  */

        #banner {
            background: #55759C;
            background: linear-gradient(90deg, rgba(85, 117, 156, 1) 0%, rgba(85, 117, 156, 1) 60%, rgba(68, 94, 125, 1) 71%, rgba(68, 94, 125, 1) 85%, rgba(43, 60, 79, 1) 100%);
            border-radius: 1.5rem;
            padding: 3rem 3.25rem;
            box-shadow: 0 0.25rem 2rem rgba(0,0,0,0.08);
        }

        #banner .banner__container {
            display: flex;
            align-items: center;
            gap: 2.5rem;
        }

        #banner .banner__container .banner__content {
            flex: 1.8;
            color: var(--neutral-color-100);
            text-align: right;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        #banner .banner__container .banner__content .banner__logo {
            width: 7.5rem;
            margin-bottom: 1.5rem;
        }

        #banner .banner__container .banner__content .banner__title {
            font-size: var(--font-size-title-lg);
            font-weight: 700;
            margin: 0 0 0.5rem 0;
            color: var(--neutral-color-100);
        }

        #banner .banner__container .banner__content .banner__subtitle {
            font-size: calc( var(--font-size-title-lg) - 0.125rem);
            font-weight: 600;
            margin: 0 0 1.5rem 0;
            color: var(--neutral-color-100);
        }

        #banner .banner__container .banner__content .banner__list {
            list-style: disc inside;
            color: #f3f6fa;
            font-size: 1rem;
            padding-right: 1rem;
            margin: 0;
        }

        #banner .banner__container .banner__content .banner__list li {
            margin-bottom: 0.5rem;
            position: relative;
            list-style: square;
            font-weight: 200;
        }

        #banner .banner__container .banner__image {
            flex: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: -6rem;
        }

        #banner .banner__container .banner__image img {
            max-width: 100%;
            border-radius: 1rem;
            padding: 0.5rem;
            margin: -6rem 0;
        }

        @media (max-width: 960px) {
            #banner .banner__container {
                flex-direction: column-reverse;
                padding: 0 1rem;
            }
            #banner .banner__image, .banner__content {
                width: 100%;
                flex: unset;
            }

            #banner {
                padding: 1.5rem 0.5rem;
                background: linear-gradient(180deg, rgba(85, 117, 156, 1) 0%, rgba(85, 117, 156, 1) 30%, rgba(68, 94, 125, 1) 50%, rgba(68, 94, 125, 1) 60%, rgba(43, 60, 79, 1) 100%);
            }

            #banner .banner__container .banner__image,#banner .banner__container .banner__image img{
                margin: 0 0 -2rem 0;
                padding: 0;
            }

            #banner .banner__container .banner__content .banner__logo{
                margin-bottom: 2rem;
            }

            #banner .banner__container .banner__content .banner__title{
                margin-bottom: 1rem;
            }

            #banner .banner__container .banner__content .banner__subtitle{
                margin-bottom: 1.5rem;
            }

            #banner .banner__container .banner__content .banner__list{
                font-size: 0.75rem;
            }

        }

        /* END BANNER SECTION  */

        /* START PARTNERS SECTION  */

        #partners {
            text-align: center;
        }

        #partners .partners__title {
            color: var(--primary-color-500);
            font-size: var(--font-size-title-lg);
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        #partners .partners__title .line {
            display: inline-block;
            height: 0.125rem;
            width: 2.5rem;
            background: var(--primary-color-500);
        }

        #partners .partners__logos {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2.5rem;
            padding: 1rem 0;
            scrollbar-width: thin;
        }

        #partners .partners__logos .partners__logos-item{
            height: 6rem;
            width: 12em;
            transition: transform 0.2s;
        }

        #partners .partners__logos .partners__logos-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        #partners .partners__logos img:hover {
            transform: scale(1.07);
        }

        @media (max-width: 960px) {

            #partners .partners__logos img {
                min-width: 7.5rem;
                height: 3.75rem;
            }

            #partners .partners__title{
                gap: 0.5rem;
            }

        }

        /* END PARTNERS SECTION  */

        /* START BLOG SECTION  */
        #blog{
            width: 100%;
            overflow: hidden;
        }

        #blog .blog__header {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 2rem;
        }

        #blog .blog__header .blog__title {
            color: var(--primary-color-500);
            font-size: var(--font-size-title-lg);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        #blog .blog__header .blog__title .line {
            display: inline-block;
            height: 0.125rem;
            width: 2.5rem;
            background: var(--primary-color-500);
        }

        #blog .blog__all-link {
            color: var(--primary-color-500);
            font-size: 1rem;
            text-decoration: none;
            font-weight: 400;
            transition: color 0.2s;
            display: block;
            text-align: left;
            margin-bottom: 1rem;
        }

        #blog .blog__all-link:hover {
            color: var(--primary-color-700);
            font-weight: 500;
        }

        #blog .blog__articles{
            padding: 1rem 0;
        }
        #blog .blog__articles .blog__card {
            background: var(--neutral-color-100);
            border-radius: 0.375rem;
            box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: box-shadow 0.2s;
        }

        #blog .blog__articles .blog__card .blog__card:hover {
            box-shadow: 0 0.25rem 1.5rem rgba(24,120,217,0.10);
        }

        #blog .blog__articles .blog__card .blog__image {
            width: 100%;
            height: 11.25rem;
            object-fit: cover;
        }

        #blog .blog__articles .blog__card .blog__card-content {
            padding: 1.2rem 1.5rem 1rem 1.5rem;
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 10rem;
        }

        #blog .blog__articles .blog__card .blog__card-content .blog__card-title {
            text-wrap: auto;
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0.375rem;
        }

        #blog .blog__articles .blog__card .blog__card-content .blog__card-desc {
            color: var(--neutral-color-600);
            font-size: 0.75rem;
            margin-bottom: 1.5rem;
        }

        #blog .blog__articles .blog__card .blog__card-content .blog__card-meta {
            display: flex;
            gap: 1.5rem;
            color: var(--neutral-color-600);
            font-size: 0.75rem;
            margin-top: auto;
            align-items: center;
        }

        #blog .blog__articles .blog__card .blog__card-content .blog__card-meta .time-to-read svg,
        #blog .blog__articles .blog__card .blog__card-content .blog__card-meta .read-count svg{
            margin-left: 0.25rem;
            font-size: 1.25rem;
        }

        @media (max-width: 960px) {
            #blog .blog__articles {
                display: block;
            }

            #blog .blog__articles .blog__card {
                display: inline-block;
                margin-left: 1rem;
            }

            #blog .blog__all-link{
                font-size: var(--font-size-body);
            }

        }
        /* END BLOG SECTION  */

        /* START FOOTER SECTION  */

        .footer {
            background: rgba(85, 117, 156, 0.1);
            /* margin-top: 3rem; */
            font-size: 1rem;
        }
        .footer__container {
            max-width: 82.5rem;
            margin: 0 auto;
        }

        .footer__main {
            max-width: 82.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 2rem 2rem 1rem 2rem;
            flex-wrap: wrap;
            margin: 0 auto;
        }

        .footer__cta{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: 2em;
        }

        .footer__cta svg{
            fill: var(--neutral-color-900);
            stroke: var(--neutral-color-100);
            font-size: 1.25rem;
            stroke-width: 1px;
        }

        .phone-numbers{
            display: flex;
            align-items: center;
            gap: 2rem;
            margin-bottom: 1rem;
        }

        .footer__logo img {
            max-width: 10rem;
            max-height: 4rem;
        }

        .footer__info {
            display: grid;
            grid-template-columns: 5fr 1fr;
            gap: 1.5rem;
            width: 100%;
        }

        .footer__info .top-bar{
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .footer__nav {
            display: flex;
            gap: 1.5rem;
            font-weight: 500;
            color: #222;
            margin-bottom: 1rem;
            flex-wrap: wrap;
            min-height: 4rem;
            align-items: center;
        }

        .footer__nav a {
            color: #222;
            text-decoration: none;
            transition: color 0.2s;
        }
        .footer__nav a:hover {
            color: var(--primary-color-500);
        }

        .footer__nav span {
            color: #d2d5da;
            font-size: 1.2rem;
        }

        .footer__contacts {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            font-weight: 600;
            align-items: flex-start;
        }

        .footer__contact-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var( --neutral-color-700);
            font-size: 1rem;
            font-weight: 500;
        }

        .footer__icon {
            display: flex;
            align-items: center;
        }

        .footer__icon svg{
            width: 1.5rem;
            height: 1.5rem;
            fill: var(--secondary-color-700);
            stroke: var(--neutral-color-100);
        }

        .footer__contact-item a{
            float: left;
            margin-right: 0.5em;
        }

        .footer__bottom {
            background: var(--secondary-color-700);
            color: var(--neutral-color-100);
            width: 100%;
            text-align: center;
            padding: 1rem 2rem;
            flex-wrap: wrap;
        }

        .footer__social-box{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }
        .footer__social-list {
            display: flex;
            gap: 1.5rem;
        }

        .footer__social-description{
            font-size: 0.75rem;
        }

        .footer__social a {
            color: var(--neutral-color-100);
            opacity: 0.85;
            transition: opacity 0.2s;
            display: flex;
            align-items: center;
        }

        .footer__social a:hover {
            opacity: 1;
        }

        .footer__copyright {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--neutral-color-100);
        }
        @media (max-width: 960px) {
            .footer__main {
                flex-direction: column;
                align-items: center;
                padding: 2rem 1rem 1rem 1rem;
                gap: 2rem;
            }

            .footer__info {
                grid-template-columns: 2fr 1fr;
                align-items: center;
                text-align: center;
            }



            .footer__contacts {
                align-items: start;
            }

            .footer__bottom {
                flex-direction: column;
                gap: 1rem;
                padding: 1rem 0.5rem;
            }

            .footer__nav{
                gap: 0.5rem;
                font-size: 0.75rem;
                font-weight: 600;
            }

            .phone-numbers{
                flex-direction: column;
                justify-content: start;
                align-items: start;
                font-size: 0.875rem;
                gap: 1rem;
            }

            .footer__contact-item{
                font-size: 0.875rem;
                font-weight: 300;
                text-align: right;
            }

            .footer__cta{
                flex-direction: column;
                align-items: start;
            }

            .footer__logo img{
                margin-top: 1rem;
            }
            .footer__social-box{
                margin: 1.5rem auto 0 auto;
            }

            .footer__copyright{
                font-size: 0.75rem;
            }


        }
        @media (max-width:567px){
            .footer__info {
                grid-template-columns: 1fr;
                align-items: center;
                text-align: center;
            }
            .footer__info .top-bar{
                flex-direction: column;
                gap: 0;
            }
            .footer__nav a{
                font-size: 0.875rem;
                font-weight: 500;
            }

        }



        /* END FOOTER SECTION  */



        /* =========================
           ABOUT PAGE (BEM, scoped)
        ========================= */

        /* Section title */
        .about__section-title{
            font-size: clamp(1.25rem, 1.2rem + 0.8vw, var(--font-size-title-lg));
            color: var(--primary-color-500);
            font-weight: 700;
            margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
        }

        /* ----------------- Hero ----------------- */
        .about__hero{
            display: grid;
            grid-template-columns: 5fr 7fr;
            gap: clamp(1rem, 2.5vw, 2rem);
            align-items: center;
            background:
                    radial-gradient(120rem 80rem at 120% -10%, rgba(24,120,217,0.05) 0%, rgba(24,120,217,0) 60%),
                    radial-gradient(60rem 40rem at -30% 120%, rgba(68,94,125,0.06) 0%, rgba(68,94,125,0) 60%);
            border-radius: 1rem;
            padding: clamp(1rem, 2.5vw, 2rem);
        }

        .about__hero-media{ width: 100%; }
        .about__hero-video{
            width: 100%;
            height: clamp(13rem, 18vw, 22rem);
            border-radius: 0.75rem;
            object-fit: cover;
            box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.08);
        }

        .about__hero-content{ display: flex; flex-direction: column; gap: clamp(0.75rem, 1.5vw, 1rem); }
        .about__hero-title{
            font-size: clamp(1.5rem, 1.2rem + 1.8vw, var(--font-size-headline-h2));
            color: var(--primary-color-500);
            font-weight: 800;
            margin: 0;
        }
        .about__hero-subtitle{
            font-size: clamp(1rem, .9rem + 1vw, var(--font-size-title-lg));
            color: var(--secondary-color-700);
            font-weight: 700;
            margin: 0;
        }
        .about__hero-text{
            color: var(--secondary-color-700);
            line-height: 1.95;
            text-align: justify;
            font-weight: 300;
            margin: 0;
        }

        .about__hero-cta{ display: flex; gap: 0.75rem; }

        /* ----------------- Timeline ----------------- */
        .about__timeline{ display: grid; gap: 1rem; }
        .about__timeline-rail{
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: minmax(14rem, 1fr);
            gap: 1rem;
            overflow-x: auto;
            padding: 0.5rem 0.25rem 0.75rem;
            scrollbar-width: thin;
        }

        .about__timeline-step{
            background: var(--neutral-color-100);
            border: 1px solid var(--neutral-color-400);
            border-radius: 0.75rem;
            padding: 1rem;
            text-align: center;
            box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.05);
        }

        .about__timeline-badge{
            display: inline-block;
            background: var(--primary-color-500);
            color: var(--neutral-color-100);
            padding: 0.25rem 0.75rem;
            border-radius: 100rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .about__timeline-caption{
            font-weight: 300;
            color: var(--secondary-color-700);
            font-size: clamp(.8rem, .75rem + .2vw, 1rem);
        }

        /* ----------------- Solutions ----------------- */
        .about__solutions{ display: grid; gap: 1.25rem; }
        .about__solutions-grid{
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: clamp(0.75rem, 1.5vw, 1rem);
        }

        .about__solution-card{
            background: var(--neutral-color-100);
            border: 1px solid var(--neutral-color-400);
            border-radius: 0.75rem;
            padding: clamp(0.75rem, 1.5vw, 1rem);
            box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.05);
            transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
            outline: none;
        }

        .about__solution-card:hover,
        .about__solution-card:focus{
            transform: translateY(-2px);
            box-shadow: 0 0.25rem 1rem rgba(24,120,217,.12);
            border-color: var(--primary-color-300);
        }

        .about__solution-media{
            height: 5.25rem;
            border-radius: 0.5rem;
            background: linear-gradient(135deg, #e9f2fd 0%, #f5f8fc 100%);
            margin-bottom: 0.75rem;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }

        .about__solution-image{ width: 100%; height: 100%; object-fit: cover; }
        .about__solution-title{ font-weight: 700; margin: 0 0 0.25rem; color: var(--secondary-color-800); }
        .about__solution-desc{ font-weight: 300; color: var(--secondary-color-700); margin: 0; line-height: 1.7; }

        /* ----------------- Achievements ----------------- */
        .about__achievements{ display: grid; gap: 1.25rem; }
        .about__achievements-grid{
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: clamp(0.75rem, 1.5vw, 1rem);
        }

        .about__achievement-card{
            background: var(--neutral-color-100);
            border: 1px solid var(--neutral-color-400);
            border-radius: 0.75rem;
            padding: clamp(1rem, 1.5vw, 1.25rem);
            text-align: center;
            box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.05);
            transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
            outline: none;
        }

        .about__achievement-card:hover,
        .about__achievement-card:focus{
            transform: translateY(-2px);
            box-shadow: 0 0.25rem 1rem rgba(24,120,217,.12);
            border-color: var(--primary-color-300);
        }

        .about__achievement-icon{
            width: 3rem; height: 3rem; margin: 0 auto 0.5rem;
            border-radius: 0.5rem; background: #eef4fd; object-fit: cover;
        }

        .about__achievement-number{ color: var(--secondary-color-700); font-weight: 800; font-size: clamp(1rem, .9rem + .6vw, var(--font-size-title-lg)); margin: 0 0 .25rem; }
        .about__achievement-text{ color: var(--secondary-color-700); font-weight: 300; margin: 0; }

        /* ----------------- KPIs band ----------------- */
        .about__kpis{
            display: grid;
            grid-template-columns: repeat(4,1fr);
            border: 1px solid var(--neutral-color-400);
            border-radius: 1rem;
            overflow: hidden;
            background: var(--neutral-color-100);
        }

        .about__kpi{
            text-align: center;
            padding: clamp(1rem, 1.5vw, 1.25rem);
            border-left: 1px solid var(--neutral-color-400);
            background: linear-gradient(180deg, #fafbfd 0%, #f6f8fb 100%);
        }

        .about__kpi:last-child{ border-left: none; }
        .about__kpi-number{ display: block; color: var(--secondary-color-600); font-weight: 800; font-size: clamp(1.1rem, 1rem + .9vw, var(--font-size-title-lg)); }
        .about__kpi-label{ display: block; color: var(--secondary-color-700); font-weight: 300; font-size: clamp(.8rem, .75rem + .2vw, 1rem); }

        /* ----------------- Vision ----------------- */
        .about__vision{
            display: grid;
            grid-template-columns: 7fr 5fr;
            gap: clamp(1rem, 2.5vw, 2rem);
            align-items: center;
            padding-top: clamp(0.5rem, 1vw, 1rem);
        }

        .about__vision-text{ color: var(--secondary-color-700); line-height: 1.95; text-align: justify; font-weight: 300; margin: 0 0 1rem; }
        .about__vision-list{ list-style: square; padding-right: 1rem; color: var(--secondary-color-700); font-weight: 300; margin: 0; }
        .about__vision-image{
            width: 100%;
            border-radius: 0.75rem;
            box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.08);
            display: block;
        }

        /* =========================
           Responsive Breakpoints
           ========================= */

        /* 1440px - desktop */
        @media (max-width: 1440px){
            .about__hero{ grid-template-columns: 1fr 1.2fr; }
        }

        /* 1200px - large laptop */
        @media (max-width: 1200px){
            .about__solutions-grid,
            .about__achievements-grid { grid-template-columns: repeat(3,1fr); }
        }

        /* 992px - tablet */
        @media (max-width: 992px){
            .about__hero{ grid-template-columns: 1fr; }
            .about__hero-video{ height: clamp(12rem, 26vw, 15rem); }
            .about__vision{ grid-template-columns: 1fr; }
            .about__kpis{ grid-template-columns: repeat(2,1fr); }
            .about__kpi{ border-left: none; border-bottom: 1px solid var(--neutral-color-400); }
            .about__kpi:nth-child(odd){ border-inline-end: 1px solid var(--neutral-color-400); }
        }

        /* 768px - small tablet */
        @media (max-width: 768px){
            .about__solutions-grid,
            .about__achievements-grid { grid-template-columns: repeat(2,1fr); }
        }

        /* 480px - mobile */
        @media (max-width: 480px){
            .about{ gap: 2rem; }
            .about__solutions-grid,
            .about__achievements-grid { grid-template-columns: 1fr; }
            .about__kpis{ grid-template-columns: 1fr; }
            .about__kpi{ border: none; border-bottom: 1px solid var(--neutral-color-400); }
            .about__kpi:last-child{ border-bottom: none; }
        }

        .shape1,
        .shape2,
        .shape3 {
            position: absolute;
            z-index: -1;
            pointer-events: none;

        }

        .shape1 img,
        .shape2 img,
        .shape3 img {
            width: 100%;
            height: auto;
            display: block;
        }

        .shape1 {
            left: 0;
            top: 140%;
        }

        .shape2 {
            right: 0;
            top: 100%;
        }

        .shape3 {
            left: 0;
            top: 240%;
        }

        @media (max-width: 768px) {
            .shape1,
            .shape2,
            .shape3 {
                display: none;
            }
        }

    }

    #products .products-grid .products-list .products-title{
        font-size: calc(var(--font-size-title-lg) + 0.25rem);
    }
    #products .products-grid {
      flex-direction: column;
      gap: 1rem ;
    }

    #products .products-grid .products-list {
        max-width: 100%;
        min-width: 100%;
        width: 100%;
        padding: 0;
        box-shadow: none;
    }
    #products .products-grid .products-details{
      padding: 0;
    }

    #products .products-grid .products-details .product-detail{
      padding: 1rem 1.5rem;
      font-size: var(--font-size-body);
    }

    #products .products-grid .products-list ul .product-tab{
      box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
    }
}

/* END PRODUCTS SECTION  */

/* START BANNER SECTION  */

#banner {
    background: #55759C;
    background: linear-gradient(90deg, rgba(85, 117, 156, 1) 0%, rgba(85, 117, 156, 1) 60%, rgba(68, 94, 125, 1) 71%, rgba(68, 94, 125, 1) 85%, rgba(43, 60, 79, 1) 100%);
    border-radius: 1.5rem;
    padding: 3rem 3.25rem;
    box-shadow: 0 0.25rem 2rem rgba(0,0,0,0.08);
}

#banner .banner__container {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

#banner .banner__container .banner__content {
  flex: 1.8;
  color: var(--neutral-color-100);
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#banner .banner__container .banner__content .banner__logo {
  width: 7.5rem;
  margin-bottom: 1.5rem;
}

#banner .banner__container .banner__content .banner__title {
  font-size: var(--font-size-title-lg);
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--neutral-color-100);
}

#banner .banner__container .banner__content .banner__subtitle {
  font-size: calc( var(--font-size-title-lg) - 0.125rem);
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: var(--neutral-color-100);
}

#banner .banner__container .banner__content .banner__list {
  list-style: disc inside;
  color: #f3f6fa;
  font-size: 1rem;
  padding-right: 1rem;
  margin: 0;
}

#banner .banner__container .banner__content .banner__list li {
  margin-bottom: 0.5rem;
  position: relative;
  list-style: square;
  font-weight: 200;
}

#banner .banner__container .banner__image {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -6rem;
}

#banner .banner__container .banner__image img {
  max-width: 100%;
  border-radius: 1rem;
  padding: 0.5rem;
  margin: -6rem 0;
}

@media (max-width: 960px) {
    #banner .banner__container {
    flex-direction: column-reverse;
    padding: 0 1rem;
  }
  #banner .banner__image, .banner__content {
    width: 100%;
    flex: unset;
  }

  #banner {
    padding: 1.5rem 0.5rem;
    background: linear-gradient(180deg, rgba(85, 117, 156, 1) 0%, rgba(85, 117, 156, 1) 30%, rgba(68, 94, 125, 1) 50%, rgba(68, 94, 125, 1) 60%, rgba(43, 60, 79, 1) 100%);
  }

  #banner .banner__container .banner__image,#banner .banner__container .banner__image img{
    margin: 0 0 -2rem 0;
    padding: 0;
  }

  #banner .banner__container .banner__content .banner__logo{
    margin-bottom: 2rem;
  }

  #banner .banner__container .banner__content .banner__title{
    margin-bottom: 1rem;
  }

  #banner .banner__container .banner__content .banner__subtitle{
    margin-bottom: 1.5rem;
  }

  #banner .banner__container .banner__content .banner__list{
    font-size: 0.75rem;
  }

}

/* END BANNER SECTION  */

/* START PARTNERS SECTION  */

#partners {
  text-align: center;
}

#partners .partners__title {
  color: var(--primary-color-500);
  font-size: var(--font-size-title-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

#partners .partners__title .line {
  display: inline-block;
  height: 0.125rem;
  width: 2.5rem;
  background: var(--primary-color-500);
}

#partners .partners__logos {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem 0;
  scrollbar-width: thin;
}

#partners .partners__logos .partners__logos-item{
  height: 6rem;
  width: 12em;
  transition: transform 0.2s;
}

#partners .partners__logos .partners__logos-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#partners .partners__logos img:hover {
  transform: scale(1.07);
}

@media (max-width: 960px) {

  #partners .partners__logos img {
    min-width: 7.5rem;
    height: 3.75rem;
  }

  #partners .partners__title{
    gap: 0.5rem;
  }

}
 
/* END PARTNERS SECTION  */

/* START BLOG SECTION  */
#blog{
    width: 100%;
    overflow: hidden;
}

#blog .blog__header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

#blog .blog__header .blog__title {
  color: var(--primary-color-500);
  font-size: var(--font-size-title-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 1rem;
}

#blog .blog__header .blog__title .line {
  display: inline-block;
  height: 0.125rem;
  width: 2.5rem;
  background: var(--primary-color-500);
}

#blog .blog__all-link {
  color: var(--primary-color-500);
  font-size: 1rem;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s;
  display: block;
  text-align: left;
  margin-bottom: 1rem;
}

#blog .blog__all-link:hover {
  color: var(--primary-color-700);
  font-weight: 500;
}

#blog .blog__articles{
    padding: 1rem 0;    
}
#blog .blog__articles .blog__card {
  background: var(--neutral-color-100);
  border-radius: 0.375rem;
  box-shadow: 0 0.125rem 1rem rgba(0,0,0,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}

#blog .blog__articles .blog__card .blog__card:hover {
  box-shadow: 0 0.25rem 1.5rem rgba(24,120,217,0.10);
}

#blog .blog__articles .blog__card .blog__image {
  width: 100%;
  height: 11.25rem;
  object-fit: cover;
}

#blog .blog__articles .blog__card .blog__card-content {
    padding: 1.2rem 1.5rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 12rem;
    max-height: 12rem;
}

#blog .blog__articles .blog__card .blog__card-content .blog__card-title {
  text-wrap: auto;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}

#blog .blog__articles .blog__card .blog__card-content .blog__card-desc {
  color: var(--neutral-color-600);
  font-size: 0.75rem; 
  margin-bottom: 1.5rem;
}

#blog .blog__articles .blog__card .blog__card-content .blog__card-meta {
  display: flex;
  gap: 1.5rem;
  color: var(--neutral-color-600);
  font-size: 0.75rem;
  margin-top: auto;
  align-items: center;
}

#blog .blog__articles .blog__card .blog__card-content .blog__card-meta .time-to-read svg,
#blog .blog__articles .blog__card .blog__card-content .blog__card-meta .read-count svg{
    margin-left: 0.25rem;
    font-size: 1.25rem;
}

@media (max-width: 960px) {
    #blog .blog__articles {
        display: block;
    }

    #blog .blog__articles .blog__card {
        display: inline-block;
        margin-left: 1rem;
    }

    #blog .blog__all-link{
      font-size: var(--font-size-body);
    }

}
/* END BLOG SECTION  */

/* START FOOTER SECTION  */

.footer {
    background: rgba(85, 117, 156, 0.1);
    /* margin-top: 3rem; */
    font-size: 1rem;
}
.footer__container {
    max-width: 82.5rem;
    margin: 0 auto;
}

.footer__main {
  max-width: 82.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2rem 1rem 2rem;
  flex-wrap: wrap;
  margin: 0 auto;
}

.footer__cta{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
}

.footer__cta svg{
    fill: var(--neutral-color-900);
    stroke: var(--neutral-color-100);
    font-size: 1.25rem;
    stroke-width: 1px;
}

.phone-numbers{
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.footer__logo img {
    max-width: 10rem;
    max-height: 4rem;
}

.footer__info {
    display: grid;
    grid-template-columns: 5fr 1fr;
    gap: 1.5rem;
    width: 100%;
}

.footer__info .top-bar{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer__nav {
  display: flex;
  gap: 1.5rem;
  font-weight: 500;
  color: #222;
  margin-bottom: 1rem;
  flex-wrap: wrap;
    min-height: 4rem;
    align-items: center;
}

.footer__nav a {
  color: #222;
  text-decoration: none;
  transition: color 0.2s;
}
.footer__nav a:hover {
  color: var(--primary-color-500);
}

.footer__nav span {
  color: #d2d5da;
  font-size: 1.2rem;
}

.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-weight: 600;
  align-items: flex-start;
}

.footer__contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var( --neutral-color-700);
    font-size: 1rem;
    font-weight: 500;
}

.footer__icon {
  display: flex;
  align-items: center;
}

.footer__icon svg{
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--secondary-color-700);
    stroke: var(--neutral-color-100);
}

.footer__contact-item a{
  float: left;
  margin-right: 0.5em;
}

.footer__bottom {
  background: var(--secondary-color-700);
  color: var(--neutral-color-100);
  width: 100%;
  text-align: center;
  padding: 1rem 2rem;
  flex-wrap: wrap;
}

.footer__social-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.footer__social-list {
  display: flex;
  gap: 1.5rem;
}

.footer__social-description{
  font-size: 0.75rem;
}

.footer__social a {
  color: var(--neutral-color-100);
  opacity: 0.85;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
}

.footer__social a:hover {
  opacity: 1;
}

.footer__copyright {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--neutral-color-100);
}
@media (max-width: 960px) {
    .footer__main {
        flex-direction: column;
        align-items: center;
        padding: 2rem 1rem 1rem 1rem;
        gap: 2rem;
    }

    .footer__info {
        grid-template-columns: 2fr 1fr;
        align-items: center;
        text-align: center;
    }



    .footer__contacts {
        align-items: start;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0.5rem;
    }

    .footer__nav{
        gap: 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .phone-numbers{
        flex-direction: column;
        justify-content: start;
        align-items: start;
        font-size: 0.875rem;
        gap: 1rem;
    }

    .footer__contact-item{
        font-size: 0.875rem;
        font-weight: 300;
        text-align: right;
    }

    .footer__cta{
        flex-direction: column;
        align-items: start;
    }

    .footer__logo img{
        margin-top: 1rem;
    }
    .footer__social-box{
        margin: 1.5rem auto 0 auto;
    }

    .footer__copyright{
        font-size: 0.75rem;
    }


}
@media (max-width:567px){  
    .footer__info {
        grid-template-columns: 1fr;
        align-items: center;
        text-align: center;
    }  
    .footer__info .top-bar{
      flex-direction: column;
      gap: 0;
    }
    .footer__nav a{
        font-size: 0.875rem;
        font-weight: 500;
    }

}



/* END FOOTER SECTION  */



/* =========================
   ABOUT PAGE (BEM, scoped)
========================= */
 
/* Section title */
.about__section-title{
  font-size: clamp(1.25rem, 1.2rem + 0.8vw, var(--font-size-title-lg));
  color: var(--primary-color-500);
  font-weight: 700;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}
   
/* ----------------- Hero ----------------- */
.about__hero{
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  background:
    radial-gradient(120rem 80rem at 120% -10%, rgba(24,120,217,0.05) 0%, rgba(24,120,217,0) 60%),
    radial-gradient(60rem 40rem at -30% 120%, rgba(68,94,125,0.06) 0%, rgba(68,94,125,0) 60%);
  border-radius: 1rem;
  padding: clamp(1rem, 2.5vw, 2rem);
}

.about__hero-media{ width: 100%; }
.about__hero-video{
  width: 100%;
  height: clamp(13rem, 18vw, 22rem);
  border-radius: 0.75rem;
  object-fit: cover;
  box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.08);
}

.about__hero-content{ display: flex; flex-direction: column; gap: clamp(0.75rem, 1.5vw, 1rem); }
.about__hero-title{
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, var(--font-size-headline-h2));
  color: var(--primary-color-500);
  font-weight: 800;
  margin: 0;
}
.about__hero-subtitle{
  font-size: clamp(1rem, .9rem + 1vw, var(--font-size-title-lg));
  color: var(--secondary-color-700);
  font-weight: 700;
  margin: 0;
}
.about__hero-text{
  color: var(--secondary-color-700);
  line-height: 1.95;
  text-align: justify;
  font-weight: 300;
  margin: 0;
}

.about__hero-cta{ display: flex; gap: 0.75rem; }

/* ----------------- Timeline ----------------- */
.about__timeline{ display: grid; gap: 1rem; }
.about__timeline-rail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(14rem, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding: 0.5rem 0.25rem 0.75rem;
  scrollbar-width: thin;
}

.about__timeline-step{
  background: var(--neutral-color-100);
  border: 1px solid var(--neutral-color-400);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.05);
}

.about__timeline-badge{
  display: inline-block;
  background: var(--primary-color-500);
  color: var(--neutral-color-100);
  padding: 0.25rem 0.75rem;
  border-radius: 100rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.about__timeline-caption{
  font-weight: 300;
  color: var(--secondary-color-700);
  font-size: clamp(.8rem, .75rem + .2vw, 1rem);
}

/* ----------------- Solutions ----------------- */
.about__solutions{ display: grid; gap: 1.25rem; }
.about__solutions-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(0.75rem, 1.5vw, 1rem);
}

.about__solution-card{
  background: var(--neutral-color-100);
  border: 1px solid var(--neutral-color-400);
  border-radius: 0.75rem;
  padding: clamp(0.75rem, 1.5vw, 1rem);
  box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  outline: none;
}

.about__solution-card:hover,
.about__solution-card:focus{
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 1rem rgba(24,120,217,.12);
  border-color: var(--primary-color-300);
}

.about__solution-media{
  height: 5.25rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #e9f2fd 0%, #f5f8fc 100%);
  margin-bottom: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.about__solution-image{ width: 100%; height: 100%; object-fit: cover; }
.about__solution-title{ font-weight: 700; margin: 0 0 0.25rem; color: var(--secondary-color-800); }
.about__solution-desc{ font-weight: 300; color: var(--secondary-color-700); margin: 0; line-height: 1.7; }

/* ----------------- Achievements ----------------- */
.about__achievements{ display: grid; gap: 1.25rem; }
.about__achievements-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(0.75rem, 1.5vw, 1rem);
}

.about__achievement-card{
  background: var(--neutral-color-100);
  border: 1px solid var(--neutral-color-400);
  border-radius: 0.75rem;
  padding: clamp(1rem, 1.5vw, 1.25rem);
  text-align: center;
  box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  outline: none;
}

.about__achievement-card:hover,
.about__achievement-card:focus{
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 1rem rgba(24,120,217,.12);
  border-color: var(--primary-color-300);
}

.about__achievement-icon{
  width: 3rem; height: 3rem; margin: 0 auto 0.5rem;
  border-radius: 0.5rem; background: #eef4fd; object-fit: cover;
}

.about__achievement-number{ color: var(--secondary-color-700); font-weight: 800; font-size: clamp(1rem, .9rem + .6vw, var(--font-size-title-lg)); margin: 0 0 .25rem; }
.about__achievement-text{ color: var(--secondary-color-700); font-weight: 300; margin: 0; }

/* ----------------- KPIs band ----------------- */
.about__kpis{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--neutral-color-400);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--neutral-color-100);
}

.about__kpi{
  text-align: center;
  padding: clamp(1rem, 1.5vw, 1.25rem);
  border-left: 1px solid var(--neutral-color-400);
  background: linear-gradient(180deg, #fafbfd 0%, #f6f8fb 100%);
}

.about__kpi:last-child{ border-left: none; }
.about__kpi-number{ display: block; color: var(--secondary-color-600); font-weight: 800; font-size: clamp(1.1rem, 1rem + .9vw, var(--font-size-title-lg)); }
.about__kpi-label{ display: block; color: var(--secondary-color-700); font-weight: 300; font-size: clamp(.8rem, .75rem + .2vw, 1rem); }

/* ----------------- Vision ----------------- */
.about__vision{
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding-top: clamp(0.5rem, 1vw, 1rem);
}

.about__vision-text{ color: var(--secondary-color-700); line-height: 1.95; text-align: justify; font-weight: 300; margin: 0 0 1rem; }
.about__vision-list{ list-style: square; padding-right: 1rem; color: var(--secondary-color-700); font-weight: 300; margin: 0; }
.about__vision-image{
  width: 100%;
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.08);
  display: block;
}

/* =========================
   Responsive Breakpoints
   ========================= */

/* 1440px - desktop */
@media (max-width: 1440px){
  .about__hero{ grid-template-columns: 1fr 1.2fr; }
}

/* 1200px - large laptop */
@media (max-width: 1200px){
  .about__solutions-grid,
  .about__achievements-grid { grid-template-columns: repeat(3,1fr); }
}

/* 992px - tablet */
@media (max-width: 992px){
  .about__hero{ grid-template-columns: 1fr; }
  .about__hero-video{ height: clamp(12rem, 26vw, 15rem); }
  .about__vision{ grid-template-columns: 1fr; }
  .about__kpis{ grid-template-columns: repeat(2,1fr); }
  .about__kpi{ border-left: none; border-bottom: 1px solid var(--neutral-color-400); }
  .about__kpi:nth-child(odd){ border-inline-end: 1px solid var(--neutral-color-400); }
}

/* 768px - small tablet */
@media (max-width: 768px){
  .about__solutions-grid,
  .about__achievements-grid { grid-template-columns: repeat(2,1fr); }
}

/* 480px - mobile */
@media (max-width: 480px){
  .about{ gap: 2rem; }
  .about__solutions-grid,
  .about__achievements-grid { grid-template-columns: 1fr; }
  .about__kpis{ grid-template-columns: 1fr; }
  .about__kpi{ border: none; border-bottom: 1px solid var(--neutral-color-400); }
  .about__kpi:last-child{ border-bottom: none; }
}

.shape1,
.shape2,
.shape3 {
  position: absolute;
  z-index: -1;
  pointer-events: none;

}

.shape1 img,
.shape2 img,
.shape3 img {
  width: 100%;
  height: auto;
  display: block;
}

.shape1 {
  left: 0;
  top: 140%;
}

.shape2 {
  right: 0;
  top: 100%;
}

.shape3 {
  left: 0;
  top: 240%;
}

@media (max-width: 768px) {
  .shape1,
  .shape2,
  .shape3 {
    display: none;
  }
}