* {
       margin: 0;
       padding: 0;
       font-family: 'Poppins', sans-serif;
       box-sizing: border-box;
   }
   
   body {
       background: rgb(255, 255, 255);
       color: rgb(216, 102, 36);
   }
   
   #header {
       width: 100%;
       height: 160vh;
       padding: 20px;
       background-image: url(../images/IMG_8337.JPG);
       background-size: cover;
       background-position: center;
   }
   
   .header-text,
   .media-icons {
       margin-top: 25px;
       /* Loại bỏ khoảng cách trên cùng của mỗi đoạn */
       margin-bottom: 10px;
       /* Thu hẹp khoảng cách dưới của mỗi đoạn */
   }
   
   .container {
       padding: 10px 10%;
   }
   
   nav {
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
   }
   
   .logo {
       width: 140px;
   }
   
   .logo {
       font-size: 25px;
       font-weight: 1000;
       color: rgb(127, 203, 203);
       text-transform: uppercase;
       margin-right: 20px;
       margin-left: 20px;
       margin-top: 0px;
       display: inline-block;
       /* đảm bảo nội dung không bị cách dòng   */
       white-space: nowrap;
   }
   
   .logo span {
       color: rgb(204, 118, 32);
       text-shadow: rgb(244, 146, 49);
   }
   
   nav ul li {
       display: inline-block;
       list-style: none;
       margin: 10px 20px;
   }
   
   nav ul li a {
       color: #abbc9f;
       text-decoration: none;
       font-size: 18px;
       position: relative;
   }
   /*       gạch dưới dòng chữ chạy    */
   
   nav ul li a::after {
       content: '';
       width: 0;
       height: 3px;
       background: rgb(179, 181, 182);
       position: absolute;
       left: 0;
       bottom: -6px;
       transition: 0.5s;
   }
   
   nav ul li a:hover::after {
       width: 100%;
   }
   
   hr {
       border: 1px solid #52757a;
   }
   
   .header-text {
       margin-top: 20%;
       font-size: 30px;
       margin-left: 100px;
   }
   
   .header-text h1 {
       margin-top: px;
       font-size: 50px;
   }
   
   .header-text h1 span {
       color: rgb(127, 203, 203);
   }
   
   .media-icons {
       margin-top: 20px;
       line-height: 5px;
   }
   
   .media-icons a {
       color: rgb(124, 180, 180);
       font-size: 25px;
       margin-right: 12px;
   }
   /*  ------------------about--------------------- */
   
   #about {
       padding: 50px 0;
       color: #070202;
   }
   
   .row {
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
       margin-top: 50px;
   }
   
   .about-col-1 {
       flex-basis: 35%;
   }
   
   .about-col-1 img {
       margin-top: 30px;
       width: 100%;
       border-radius: 50%;
       border: 10px;
   }
   
   .about-col-2 {
       flex-basis: 60%;
       font-size: 20px;
       color: rgb(216, 102, 36);
   }
   
   .sub-title {
       font-size: 40px;
       font-weight: 600;
       color: rgb(15, 15, 14);
       margin: 30px 0;
       margin-top: 25px;
       /* Loại bỏ khoảng cách trên cùng của mỗi đoạn */
       margin-bottom: 10px;
       /* Thu hẹp khoảng cách dưới của mỗi đoạn */
   }
   
   .tab-titles {
       display: flex;
       margin: 20px 0 40px;
       color: rgb(34, 72, 97);
   }
   
   .tab-links {
       margin-right: 50px;
       font-size: 18px;
       font-weight: 500;
       cursor: pointer;
       position: relative;
   }
   
   .tab-links::after {
       content: '';
       width: 0;
       height: 3px;
       background: rgb(125, 133, 148);
       position: absolute;
       left: 0;
       bottom: -8px;
       transform: 0.5s;
       transition: width 0.1s ease;
   }
   
   .tab-links.active-link::after {
       width: 50%;
   }
   
   .tab-contents ul li {
       list-style: none;
       margin: 10px 0;
   }
   
   .tab-contents {
       list-style: none;
       font-size: 17px;
       line-height: 1.5;
   }
   
   .tab-contents ul li span {
       color: rgb(13, 32, 64);
       font-size: 16px;
   }
   
   .tab-contents {
       display: none;
   }
   
   .tab-contents.active-tab {
       display: block;
       margin-bottom: 40px;
   }
   /*---------------servicers---------*/
   
   #services {
       padding: 40px 0;
       margin: left 40px;
   }
   
   .services-list {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 40px;
       margin-top: 50px;
       max-width: 900px;
       margin: 0 auto;
   }
   
   .services-list div {
       background: rgb(144, 121, 107);
       color: rgb(255, 255, 255);
       padding: 30px;
       font-size: 15px;
       font-weight: 300;
       border-right: 10px;
       transition: backround 0.5s, transform 0.5s;
       border-radius: 5%;
   }
   
   .services-list div i {
       font-size: 40px;
       margin-bottom: 20px;
   }
   
   .services-list div h2 {
       font-size: 25px;
       font-size: 500;
       margin-bottom: 15px;
   }
   
   .services-list div a {
       text-decoration: none;
       color: antiquewhite;
       font-size: 12px;
       margin-top: 20px;
   }
   
   .services-list div:hover {
       background: rgb(177, 141, 141);
       transform: translateY(-10px);
   }
   /*-------------------------------------*/
   
   #Paintings {
       padding: 50px 0;
   }
   
   .work-list {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       grid-gap: 30px;
       margin-top: 30px;
   }
   
   .work {
       border-radius: 10px;
       position: relative;
       overflow: hidden;
       margin-bottom: 15px;
   }
   
   .work img {
       width: 100%;
       border-radius: 10px;
   }
   /*-----------------drawing-----------------------*/
   
   #Drawings {
       padding: 40px 0;
   }
   
   .work-list {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       grid-gap: 30px;
       margin-top: 30px;
   }
   
   .work {
       border-radius: 10px;
       position: relative;
       overflow: hidden;
   }
   
   .work img {
       width: 100%;
       border-radius: 10px;
   }
   /*---------------sketch-------------------------*/
   
   #Sketch {
       padding: 40px 0;
   }
   
   .work-list {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       grid-gap: 30px;
       margin-top: 30px;
   }
   
   .work {
       border-radius: 10px;
       position: relative;
       overflow: hidden;
   }
   
   .work img {
       width: 100%;
       border-radius: 10px;
       width: 100%;
       object-fit: cover;
   }
   /*---------------contact-------------------------*/
   
   .Contact-left {
       flex-basis: 35%;
   }
   
   .row {
       font-size: 17px;
   }
   
   .contact-right {
       flex-basis: 60%;
   }
   
   .Contact-left p {
       margin-top: 30px;
   }
   
   .Contact-left .fa-phone {
       font-size: 25px;
   }
   
   .Contact-left .fa-envelope {
       font-size: 25px;
   }
   
   .Contact-left p i {
       margin-right: 20px;
       font-size: 30px;
   }
   
   .social-icons {
       margin-top: 10px;
       font-size: 30px;
       margin-right: 15px;
       color: bisque;
   }
   
   .social-icons a {
       color: rgb(216, 102, 36);
       margin-right: 12px;
   }
   /*------------------copyright----------------*/
   
   .copyright {
       width: 100%;
       text-align: center;
       padding: 25px 0;
       background: rgb(73, 67, 67);
       color: bisque;
       font-weight: 300;
       margin-top: 20px;
       font-size: 15px;
   }
   
   .copyright {
       color: rgb(222, 197, 167);
   }
   /*------------------make the phone----------------*/
   
   nav .fas {
       display: none;
   }
   
   @media only screen and (max-width: 600px) {
       #header {
           background-image: url(../images/IMG_4189.jpg);
       }
       .logo {
           font-size: 23px;
       }
       .header-text {
           margin-top: 135%;
           font-size: 23px;
           margin-left: 120px;
           color: #f23400;
       }
       .header-text h1 {
           font-size: 26px;
       }
       .header-text h1 span {
           color: rgb(80, 181, 218);
       }
       .media-icons {
           margin-top: 5px;
       }
       .media-icons a {
           color: rgb(54, 77, 77);
           font-size: 25px;
           margin-right: 12px;
       }
       nav .fas {
           display: block;
           font-size: 25px;
       }
       nav ul {
           background: rgb(89, 65, 51);
           position: fixed;
           top: 0;
           right: -200px;
           width: 200px;
           height: 100vh;
           padding-top: 50px;
           z-index: 2;
       }
       nav ul li {
           display: block;
           margin: 25px;
       }
       nav ul .fas {
           position: absolute;
           top: 25px;
           left: 25px;
           cursor: pointer;
       }
       .sub-title {
           font-size: 30px;
       }
       .sub-title h1 {
           text-align: center;
       }
       .about-col-1,
       .about-col-2 {
           flex-basis: 80%;
           display: block;
           margin-left: auto;
           margin-right: auto;
           text-align: left;
           margin-top: -20px;
       }
       .about-col-2 h1 {
           text-align: center;
       }
       .about-col-2 h4 {
           text-align: center;
       }
       .about-col-1 {
           margin-bottom: 20px;
       }
       .about-col-2 {
           font-size: 17px;
       }
       .tab-links {
           font-size: 16px;
           margin-right: 20px;
       }
       .services-list {
           display: flexbox;
           grid-template-columns: repeat(1, 250px);
           grid-gap: 30x;
           margin-top: 0px;
           max-width: 600px;
           margin: auto;
       }
       .services-list div {
           background: rgb(144, 121, 107);
           color: rgb(255, 255, 255);
           padding: 30px;
           font-size: 10px;
           font-weight: 100;
           border-right: 10px;
       }
       .services-list div h2 {
           font-size: 19px;
           font-size: 100;
           margin-bottom: 5px;
       }
       .Contact-left,
       .contact-right {
           flex-basis: 100%;
       }
       .copyright {
           flex-basis: 100%;
       }
   }