:root {
   --primary-color: #2196f3;
   --text-color: #212121;
   --accent-color: #757575;
   --white: #ffffff;
   --black: #000000;
   --footer-bg: #2f303a;
   --hover-blue: #188ce8;
   --icon-color: #afb1b8
 }


 html,
 body,
 p,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 ul,
 ol,
 li,
 figure,
 hr {
   margin: 0;
   padding: 0;
 }

 ul {
   list-style: none;
 }

 a {
   text-decoration: none;
   color: currentColor;
 }

 button,
 input,
 select {
   margin: 0;
 }

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

 img,
 video {
   display: block;
   max-width: 100%;
   height: auto;
 }

 iframe {
   border: 0;
 }

 td,
 th {
   padding: 0;
 }

 body {
   font-family: "Roboto", sans-serif;
   line-height: 1.71;
   color: var(--text-color);
 }

 .container {
   width: 1200px;
   margin: 0 auto;
   padding-left: 12px;
   padding-right: 12px;
 }


 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 24px 0 25px;
   border-bottom: 1px solid #ccc;
 }

 .header .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 50px;
 }

 .header-email {
   width: 26px;
   height: 22px;
   fill: #757575;
   display: flex;
   align-items: center;
 }

 .header-phone {
   width: 26px;
   height: 22px;
   fill: #757575;
   display: flex;
   align-items: center;
 }

 .div-contact {
   align-items: center;
   gap: 10px;
 }

 .div-contact:hover svg {
   fill: var(--primary-color);
 }

 .logo {
   animation: fadeInDown 1s ease forwards;
   display: flex;
   margin-left: -50px;
   font-family: "Raleway", sans-serif;
   text-decoration: none;
 }

 .logo-footer {
   font-family: "Raleway", sans-serif;
   text-decoration: none;
 }

 .web {
   color: var(--primary-color);
   font-size: 26px;
   font-weight: 700;
   letter-spacing: 0.78px;
 }

 .studio {
   color: var(--black);
   font-size: 26px;
   font-weight: 700;
   letter-spacing: 0.78px;
 }


 .nav {
   display: flex;
   margin-right: 344px;
 }

 .nav-list {
   display: flex;
   column-gap: 50px;
   transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);

 }

 .nav-list {
   list-style: none;
   display: flex;
   gap: 20px;
   padding: 0;
   margin: 0;
 }

 .nav-list a {
   position: relative;
   display: inline-block;
   text-decoration: none;
   padding: 5px 0;
   color: black;

 }


 .nav-list a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -4px;
   width: 0;
   height: 4px;
   background-color: #2196F3;
   border-radius: 2px;
   transition: width 0.3s ease;
   top: 57.50px;
 }


 .nav-list a:hover::after,
 .nav-list a.active::after {
   width: 100%;
 }

 .nav-page {
   color: #212121;
   font-size: 14px;
   font-weight: 500;
   line-height: normal;
   letter-spacing: 0.28px;
   position: relative;
   text-decoration: none;
   padding-bottom: 6px;
 }

 .nav-page:hover {
   color: #2196f3;
 }

 .nav-page.choosen {
   color: #2196f3;
 }

 .nav-page.choosen::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 4px;
   background: #2196f3;
   border-radius: 2px;
 }






 .nav-1,
 .nav-2,
 .nav-3 {

   font-size: 14px;
   font-family: Roboto, sans-serif;
   font-weight: 500;
   letter-spacing: 0.28px;
   color: #757575;
 }

 .nav-1,
 .nav-2,
 .nav-3 {
   color: var(--text-color);
 }

 .nav-1:hover,
 .nav-2:hover,
 .nav-3:hover {
   color: var(--primary-color);
 }

 .div-contact {
   color: var(--accent-color);
   font-size: 14px;
   font-weight: 500;
   line-height: normal;
   letter-spacing: 0.28px;
   display: flex;
 }

 .div-contact:hover {
   color: var(--primary-color);
   font-family: Roboto;
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
   letter-spacing: 0.28px;
 }




 .callback-modal {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;

   opacity: 1;
   visibility: visible;
   transition:
     opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
     visibility 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }


 .callback-modal.is-hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
 }


 .callback-modal__content {
   width: 528px;
   height: 651px;
   max-width: 90%;
   background: #fff;
   border-radius: 8px;
   padding: 30px;
   position: relative;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

   transform: scale(1);
   opacity: 1;
   transition:
     transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
     opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }


 .callback-modal.is-hidden .callback-modal__content {
   transform: scale(0.9) translateY(-20px);
   opacity: 0;
 }


 .callback-modal__close {
   position: absolute;
   top: 8px;
   right: 8px;
   width: 28px;
   height: 28px;
   border: 2px solid #ccc;
   border-radius: 50%;
   background: transparent;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 18px;
   line-height: 1;
   cursor: pointer;
   transition: border-color 0.2s, color 0.2s;
 }

 .callback-modal__close:hover {
   border-color: #999;
   color: #007bff;
 }


 body.no-scroll {
   overflow: hidden;
 }



 .input-text {
   margin-top: 10px;
   margin-bottom: 15px;
   color: #212121;
   text-align: center;
   font-family: Roboto;
   font-size: 20px;
   font-weight: 700;
   letter-spacing: 0.6px;
 }

 .callback-form__group {
   position: relative;
   margin-bottom: 15px;
 }

 .callback-form__label {
   color: #757575;
   font-family: Roboto;
   font-size: 12px;
   font-weight: 400;
   letter-spacing: 0.12px;
 }

 .callback-form__group input {
   width: 100%;
   padding: 12px 12px 12px 40px;
   border: 1px solid #ccc;
   border-radius: 4px;
 }

 .callback-form__icon {
   position: absolute;
   left: 12px;
   top: 70%;
   transform: translateY(-50%);
   width: 18px;
   height: 18px;
   fill: #212121;
 }

 .callback-form textarea {
   width: 448px;
   height: 120px;
   color: rgba(117, 117, 117, 0.5);
   font-family: Roboto;
   font-size: 12px;
   font-weight: 400;
   letter-spacing: 0.12px;
   border-radius: 4px;
   border: 1px solid #ccc;
   padding: 12px;
   resize: none;
 }


 .callback-form__checkbox {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   color: #757575;
   margin-top: 20px;
   font-family: Roboto;
   padding-left: 15px;
   font-size: 14px;
   line-height: 24px;
   letter-spacing: 0.42px;
 }

 .callback-form__checkbox a {

   color: #2196F3;
   text-decoration: underline;
 }

 .callback-form__submit {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 30px auto 40px;
   width: 200px;
   height: 50px;
   border: none;
   border-radius: 4px;
   background: #2196F3;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
   color: #fff;
   font-size: 16px;
   cursor: pointer;
   transition: background 0.2s;
 }

 .callback-form__submit:hover {
   background: #1976d2;
 }



 .contacts {
   display: flex;
   column-gap: 50px;
 }


 .business-section {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   height: 600px;
   background-image: linear-gradient(#2f303a66, #2f303a66), url("img/bg-img.jpg");
   background-repeat: no-repeat;
   background-position: center;
 }

 .business-title {
   animation: fadeInUp 1s ease forwards;
   animation-delay: 0.3s;
   opacity: 0;
   font-size: 44px;
   font-weight: 900;
   line-height: 60px;
   letter-spacing: 0.06em;
   text-align: center;
   width: 696px;
   margin: 0 auto 30px;
   color: var(--white);
 }

 .business-button {
   animation: fadeInUp 1s ease forwards;
   animation-delay: 0.6s;
   opacity: 0;
   display: block;
   margin: 0 auto;
   padding: 14px 32px;
   border-radius: 4px;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: 0.06em;
   line-height: 30px;
   color: var(--white);
   background-color: var(--primary-color);
   transition:
     background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
     color 250ms cubic-bezier(0.4, 0, 0.2, 1),
     box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }

 .business-button:hover,
 .business-button:focus {
   background-color: var(--hover-blue);
   color: #fff;
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
 }


 .advantages-list {
   display: flex;
   justify-content: space-between;
   gap: 30px;
   padding: 94px 0;
 }

 .advantages-item {
   width: 270px;
   text-align: left;
 }

 .advantages-icon {
   width: 270px;
   height: 120px;
   margin-bottom: 30px;
   background-color: #f5f4fa;
   display: flex;
   align-items: center;
   justify-content: center;

 }

 .icon {
   width: 70px;
   height: 70px;
   fill: #2f303a;
 }


 .features-text {
   color: var(--accent-color);
   font-size: 14px;
   line-height: 1.714;
   letter-spacing: 0.42px;
 }

 .leisure-span {
   display: flex;
   width: 370px;
   height: 70px;
   bottom: 70px;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 0.42px;
   position: relative;
   color: #fff;
   text-align: center;
   line-height: normal;
   text-transform: uppercase;
   background: rgba(47, 48, 58, 0.8);
   justify-content: center;
   align-items: center;
 }


 .work-title {
   text-align: center;
   font-size: 36px;
   font-weight: 700;
   margin-bottom: 50px;
 }

 .work-list {
   display: flex;
   gap: 30px;
 }


 .work-team {
   background-color: #f5f4fa;
 }

 .clients {
   height: 372px;
 }

 .clients-title {
   color: var(--text-color);
   text-align: center;
   font-size: 36px;
   font-weight: 700;
   line-height: normal;
   letter-spacing: 1.08px;
   padding-top: 94px;
   margin-bottom: 50px;
 }

 .clients-list {
   display: flex;
   justify-content: space-between;
 }

 .clients-sublist {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 170px;
   height: 92px;
   border-radius: 4px;
   border: 1px solid #afb1b8;
 }

 .clients-sublist:hover .clients-svg {
   fill: var(--primary-color);
 }

 .clients-sublist:hover {
   border-color: var(--primary-color);
 }

 .clients-svg {
   display: flex;
   fill: var(--icon-color);
   width: 106px;
   height: 60px;
 }


 .team-title {
   text-align: center;
   font-size: 36px;
   font-weight: 700;
   padding: 94px 0 50px;
 }

 .team-list {
   display: flex;
   justify-content: space-between;
   gap: 30px;
   padding-bottom: 94px;
 }

 .team-li {
   background-color: var(--white);
   border-radius: 0 0 4px 4px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
     0 1px 1px rgba(0, 0, 0, 0.14),
     0 2px 1px rgba(0, 0, 0, 0.20);
 }

 .team-img {
   padding-bottom: 30px;
 }

 .team-name {
   text-align: center;
   font-size: 16px;
   font-weight: 500;
   color: var(--text-color);
   margin-bottom: 10px;
 }

 .team-subtitle {
   text-align: center;
   font-size: 16px;
   font-weight: 400;
   color: var(--accent-color);
   margin-bottom: 30px;
 }

 .social-list {
   display: flex;
   justify-content: center;
   gap: 17px;
   margin: 28px 0 42px;
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }


 .social-list-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   transition: background-color 0.3s;
 }

 .social-list-link:hover {

   background-color: #1da1f2;
 }

 .social-list-icon {
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
   fill: #AFB1B8;
 }

 .social-list-item:hover .social-list-icon {
   fill: var(--white);
 }


 .footer {
   background-color: var(--footer-bg);
   padding: 60px 0;
   color: var(--white);
 }

 .footer-div-2 {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
 }

 .footer-div {
   display: flex;
   flex-direction: column;
 }

 .footer-logo {
   margin-bottom: 20px;
 }

 .web-footer {
   color: var(--primary-color);
   font-size: 26px;
   font-family: Raleway, sans-serif;
   font-weight: 700;
   letter-spacing: 0.78px;
 }

 .studio-footer {
   color: var(--white);
   font-size: 26px;
   font-family: Raleway, sans-serif;
   font-weight: 700;
   letter-spacing: 0.78px;
 }

 .address {
   display: flex;
   flex-direction: column;
   row-gap: 9px;
   font-size: 14px;
   line-height: 1.714;
   letter-spacing: 0.42px;
 }

 .address-link {
   color: rgba(255, 255, 255, 0.6);
 }

 .connection {
   display: flex;
   flex-direction: column;
   margin-right: 654px;

   width: 206px;
   margin-top: 20px;
 }

 .connection-title {
   font-size: 14px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.42px;
   margin-bottom: 15px;
 }

 .connection-list {
   display: flex;
   gap: 10px;
 }

 .connection-sublist {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.1);
   transition: background-color 0.3s;
 }

 .connection-sublist:hover {
   background-color: var(--primary-color);
 }

 .connection-svg {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 20px;
   height: 20px;
   fill: var(--white);
 }


 .form-div {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin-left: 559px;

 }



 .form-span {
   display: block;
   text-align: justify;
   text-justify: inter-word;
   margin-top: -130px;
   margin-left: 60px;
   margin-right: -20px;
   color: #fff;
   font-weight: 700;
   color: #FFF;
   font-family: Roboto;
   font-size: 14px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   letter-spacing: 0.42px;
   text-transform: uppercase;
 }


 .subscribe-form {
   display: flex;
   gap: 12px;
 }

 .form-input {
   width: 358px;
   height: 50px;
   margin-left: -205px;
   margin-top: -100px;
   padding: 10px 15px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 4px;
   background: transparent;
   color: #fff;
 }

 .form-input::placeholder {
   color: rgba(255, 255, 255, 0.6);
 }

 .form-button {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: -100px;
   gap: 10px;
   padding: 0 20px;
   height: 50px;
   background: #2196F3;
   border: none;
   border-radius: 4px;
   font-weight: 700;
   font-size: 16px;
   cursor: pointer;
   color: #fff;
   transition: background-color 250ms ease;
   white-space: nowrap;
   transition:
     background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
     color 250ms cubic-bezier(0.4, 0, 0.2, 1),
     box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }

 .form-button:hover,
 .form-button:focus {
   background-color: var(--hover-blue);
   color: #fff;
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);

 }

 .form-button__icon {
   fill: currentColor;
 }

 /* ==========================
   Portfolio
========================== */


 .portfolio-ulbuttons {
  animation: fadeInUp 1s ease forwards;
   animation-delay: 0.4s;
   opacity: 0;
   display: flex;
   justify-content: center;
   gap: 8px;
   margin: 94px 0 50px;

 }

 .portfolio-libuttons {
   transition:
     background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
     color 250ms cubic-bezier(0.4, 0, 0.2, 1),
     box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }

 .portfolio-libuttons:hover,
 .portfolio-libuttons:focus {
   border-radius: 10px;
   background-color: var(--primary-color);
   color: #fff;
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
 }


 .portfolio-button {
   padding: 6px 22px;
   font-size: 16px;
   font-weight: 500;
   line-height: 26px;
   letter-spacing: 0.48px;
   border: none;
   border-radius: 4px;
   background-color: #f5f4fa;
   color: var(--text-color);
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
 }

 .portfolio-button:hover,
 .portfolio-button:focus {
   background-color: var(--primary-color);
   color: var(--white);
   box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.1),
     0px 1px 2px rgba(0, 0, 0, 0.08),
     0px 2px 2px rgba(0, 0, 0, 0.12);
 }


 .items-list {
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
   margin-bottom: 94px;
   transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }


 .portfolio-li {
   width: calc((100% - 60px) / 3);
   border: 1px solid #eee;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }

 .portfolio-li:hover {
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2),
     0px 4px 4px rgba(0, 0, 0, 0.2),
     1px 4px 6px rgba(0, 0, 0, 0.2);
 }

 .items-img {
   display: block;
   width: 100%;
   height: auto;
 }

 .items-title {
   margin: 20px 24px 4px;
   font-size: 18px;
   font-weight: 700;
   line-height: 36px;
   letter-spacing: 0.06em;
   color: var(--text-color);
 }

 .items-subtitle {
   margin: 0 24px 20px;
   font-size: 16px;
   line-height: 30px;
   color: var(--accent-color);
 }

 .portfolio-img-container {
   position: relative;
   overflow: hidden;
 }

 .portfolio-img {
   display: block;
   width: 100%;
   height: auto;
   transition: transform 0.3s ease, filter 0.3s ease;
 }

 .portfolio-div-p {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   transform: translateY(100%);
   transition: transform 0.25s ease-in-out;
   color: #fff;
   font-size: 18px;
   font-weight: 400;
   line-height: 1.555;
   letter-spacing: 0.54px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0 24px;
   background: rgba(33, 150, 243, 0.9);
   transition:
     transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
     opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }

 .portfolio-img-container:hover .portfolio-div-p {
   transform: translateY(0);
 }





 .portfolio-img-container:hover .portfolio-img {
   transform: scale(1.05);
   filter: brightness(70%);
 }



 @keyframes fadeInUp {
   0% {
     opacity: 0;
     transform: translateY(30px);
   }

   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes fadeInDown {
   0% {
     opacity: 0;
     transform: translateY(-30px);
   }

   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }