:root {
   --color-primary: #1D6FB6;
   --color-accent: #F8FCFF;
}
body {
   font-family: "Montserrat" ,"Arial", sans-serif;
   line-height: calc(20px / 16px); 
   color: #25282B;
   background-color: var(--color-accent);
}  
.container {
   max-width: 1230px;
   margin: 0 auto;
   padding: 0 15px;
   height: 100%;
}
/* =========================================== */
.header {
   line-height: 1.5;
   transition: all 0.5s;
}
.header_inner {
   min-height: 108px;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   gap: 15px;
   align-content: center;
   align-items: center;
}
.header_logo {
   max-width: 54px;
}


.nav_list {
   display: flex;
   gap: 10px 30px;
   flex-wrap: wrap;
}


.social {
   display: flex;
   gap: 10px 30px;
   flex-wrap: wrap;
   justify-content: end;
}

/* =============================== */

.hero {
   padding: 120px 0;
   line-height:  1.5;
   color: var(--color-accent);
   position: relative;
}
.hero__inner {
   display: flex;
   flex-direction: column;
   align-items: center;
} 

.hero__title {
   font-weight: 600;
   font-size: 52px;
   margin-bottom: 30px;
}
.hero__list {
   font-size: 24px;
   margin-bottom: 40px;
}
.hero__list-item {
   align-items: center;
   display: flex;
   gap: 18px;
   margin-bottom: 15px;
   transition: all 0.5s;
}
.hero__list-item:hover {
   color: var(--color-primary);
}
.hero__list-item path {
   transition: all 0.5s;
}
.hero__list-item:hover path {
   fill: var(--color-primary);
}
.hero__list-item:last-child {
   margin-bottom: 0px;
}
.hero__video {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
}
.hero__video video {
   width: 100%;
   height: 100%;
   object-fit: cover;

}
.hero__video::before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(16, 46, 73, 0.8);
}
.button {
   display: flex;
   text-align: center;
   justify-content: center;

   font-weight: 500;
   font-size: 16px;
   border-radius: 100px;
   color: var(--color-primary);

   padding: 18px;
   max-width: 288px;
   height: 56px;
   background-color: #D0DCE7;
   width: 100%;
}
.button:hover {
   color: #D0DCE7;
   background-color: var(--color-primary);
   transition: all 0.5s;
}

/* ============================================= */

.main__general {
   padding:  120px 0;   
}
.main__wrapper {
   display: flex;
   align-items: start;
   justify-content: space-between;
   gap: 30px;
}
.main__sidebar{
   position: sticky;
   top: 5vh;
}
.main__body {
   max-width: 792px;
   width: 100%;
}
.main__galery{
   margin-bottom: 120px;
}
.sidebar {
   font-weight: 500;
   border: #D9D9D9 2px solid;
   padding: 30px;
   max-width: 282px;
   width: 100%;
   min-height: 60vh;
}
.sidebar__item {
   margin-bottom: 20px;
}
.sidebar__item:last-child {
   margin-bottom:0 ;
}

/* ======================== */
.galery {
   display: grid;
   grid-auto-flow: dense;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   font-weight: 500;
   color: var(--color-accent);
}
.img__galery {
   display: block;
   position: relative;
   overflow: hidden;
   padding-bottom: 100%;
}
.img__galery img {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 50%;
}
.img__galery--large-left{
   grid-column: 1/3 ;
   grid-row: span 2;
}
.img__galery--large-right{
   grid-column: -1/-3 ;
   grid-row: span 2;
}
.galery__hint {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #1D6FB6b2;
   height: 53px;
   display: flex;
   align-items: center;
   justify-content: center;

   transform: translateY(100%);
   opacity: 0;
   transition: all 0.5s;
}
.img__galery:hover .galery__hint{
   transform: translateY(0%);
   opacity: 1;

}
.img__galery--large-right .galery__hint, 
.img__galery--large-left .galery__hint {
   height: 103px;
   line-height: 29px;
   font-size: 24px;
}
/* ======================== */
.products {
   display: grid;
   gap: 24px;
   grid-template-columns: repeat(2, 1fr);
}
.products__item-img {
   position: relative;
   padding-bottom: 62%;
}
.products__item-img img {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 50%;
}

.products__item-badqe{
   position: absolute;
   top: 12.6%;
   left: 0;
   border-radius: 0px 100px 100px 0px;
   background-color: var(--color-accent);
   padding: 18px 15px;
   min-width: 33.9%;
   text-align: center;
   font-weight: 500;
   color: var(--color-primary);

   animation: budge-action  2s infinite alternate;
}

@keyframes budge-action {
   0%{
      min-width: 33.9%;
   }
   66.666% {
      min-width: 33.9%;
   }
   100%{
   min-width: 37.3%;
   }
}
.products__item-body {
   border: #D9D9D9 1px solid;
   border-top: none;
   padding: 30px 15px;
}

.products__item-button {
   margin: 0 auto;
}

/* ======================== */
.footer {
   padding: 30px 0;
   font-size: 16px;
   color: var(--color-accent); 
   background-color: #788088;  
   text-align: center;
}

.footer__inner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}