/*  import google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
html{
    scroll-behavior: smooth;
}

/* custom scroll bar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}


section{
    padding: 100px 0;
}
.max-width{
    max-width: 1300px;
    padding: 0 80px;
    margin: auto;
}
.about, .services, .skills, .teams, .contact, footer{
    font-family: 'Poppins', sans-serif;
}
.about .about-content,
.services .serv-content,
.skills .skills-content,
.contact .contact-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
section .title{
    position: relative;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 60px;
    padding-bottom: 20px;
    font-family: 'Ubuntu', sans-serif;
}
section .title::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background: #111;
    transform: translateX(-50%);
}
section .title::after{
    position: absolute;
    bottom: -8px;
    left: 50%;
    font-size: 20px;
    color:#AB7D5C;
    padding: 0 5px;
    background: #fff;
    transform: translateX(-50%);
}

/* navbar styling */
.navbar{
    position: fixed;
    width: 100%;
    z-index: 999;
    padding: 30px 0;
    font-family: 'Ubuntu', sans-serif;
    transition: all 0.3s ease;
}
.navbar.sticky{
    padding: 15px 0;
    background:#AB7D5C;
}
.navbar .max-width{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar .logo a{
    color: #fff;
    font-size: 35px;
    font-weight: 600;
}
.navbar .logo a span{
    color: #AB7D5C;
    transition: all 0.3s ease;
}
.navbar.sticky .logo a span{
    color: #fff;
}
.navbar .menu li{
    list-style: none;
    display: inline-block;
}
.navbar .menu li a{
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    margin-left: 25px;
    transition: color 0.3s ease;
}
.navbar .menu li a:hover{
    color: #AB7D5C;
}
.navbar.sticky .menu li a:hover{
    color: #fff;
}

/* menu btn styling */
.menu-btn{
    color: #fff;
    font-size: 23px;
    cursor: pointer;
    display: none;
}
.scroll-up-btn{
    position: fixed;
    height: 45px;
    width: 42px;
    background:#AB7D5C;
    right: 30px;
    bottom: 10px;
    text-align: center;
    line-height: 45px;
    color: #fff;
    z-index: 9999;
    font-size: 30px;
    border-radius: 6px;
    border-bottom-width: 2px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.scroll-up-btn.show{
    bottom: 30px;
    opacity: 1;
    pointer-events: auto;
}
.scroll-up-btn:hover{
    filter: brightness(90%);
}


/*modau */

.home{
    display: flex;
    background: url( "images/a.png") no-repeat center;
    height: 100vh;
    color: #fff;
    min-height: 500px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Ubuntu', sans-serif;
}
.home_1{
    background: url( "images/branding.png") no-repeat center;
    height: 100vh;
    color: #fff;
    min-height: 500px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Ubuntu', sans-serif;
}


.home .max-width{
  width: 100%;
  display: flex;
}
.home .max-width .row{
  margin-right: 0;
}
.home .home-content .text-1{
    font-size: 27px;
}
.home .home-content .text-2{
    font-size: 75px;
    font-weight: 500;
    margin-left: -3px;
}
.home .home-content .text-3{
    font-size: 40px;
    margin: 5px 0;
}
.home .home-content .text-3 span{
    color: #AB7D5C;
    font-weight: 500;
}
.home .home-content a{
    display: inline-block;
    background: #AB7D5C;
    color: #fff;
    font-size: 25px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid #AB7D5C;
    transition: all 0.3s ease;
}
.home .home-content a:hover{
    color:#AB7D5C;
    background: none;
}

/* gioithieu*/
.about .title::after{
    content: "who i am";
}
.about .about-content .left{
    width: 45%;
}
.about .about-content .left img{
    height: 400px;
    width: 400px;
    object-fit: cover;
    border-radius: 6px;
}
#about.about .about-content .right{
    width: 55%;
}
.about .about-content .right .text{
    font-size: 27px;
    font-weight: 600;
    margin-bottom: 13px;
}
.about .about-content .right .text span{
    color: #AB7D5C;
}
#about.about .about-content .right p{
    text-align: justify;
	position: relative;
}

#about.about .about-content .right p:hover::after{
	content: "SỐNG VỚI ĐAM MÊ là phương châm sống của tôi. “Hãy làm những gì bạn yêu thích” điều này nghe có vẻ hoàn toàn đúng. Đó là lý do tại sao tôi là một người luôn lạc quan. Không phải sự lạc quan đơn thuần này hiểu là “sự lạc quan quá mức” mà điều cần làm khi gặp khó khăn là bạn cần dũng cảm đối mặt và phân tích vấn đề để đưa ra giải pháp, để sau mỗi lần vấp ngã, bạn sẽ hiểu mình hơn và trở nên trưởng thành hơn. HƠN HẾT, tôi là một người học hỏi liên tục. Đối với tôi, học tập tương đương với việc khám phá những ý tưởng mới và phát triển như một cá nhân. Tôi chỉ không thể tưởng tượng cuộc sống của tôi khi không có thiết kế. Tôi tự do thể hiện sự sáng tạo và trí tưởng tượng của mình bằng cách thiết kế. Và để chắp cánh cho niềm đam mê thiết kế của mình, tôi có một tài khoản Behance tên là - Tran Hoa.";
    pointer-events: none;
	animation: fadeIn 1.5s;
    font-family:montserrat;
    color: #AB7D5C;
    padding-top: 13px;
    line-height: 150%;
}

@keyframes fadeIn{
	0%{opacity: 0}
	100%{opacity: 1}
}

.about .about-content .right a{
    display: inline-block;
    background: #AB7D5C;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 30px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid #AB7D5C;
    transition: all 0.3s ease;
}
.about .about-content .right a:hover{
    color: #AB7D5C;
    background: none;
}


/* dichvu */
.services, .teams{
    color:#fff;
    background:#00060B;
}
.services .title::before,
.teams .title::before{
    background: #fff;
}
.services .title::after,
.teams .title::after{
    background: #00060B;
    content: "what i provide";
}
.services .serv-content .card{
    width: calc(50% - 20px);
    background: #222;
    text-align: center;
    border-radius: 6px;
    padding: 50px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.services .serv-content .card:hover{
    background: #AB7D5C;
}
.services .serv-content .card .box{
    transition: all 0.3s ease;
}
.services .serv-content .card:hover .box{
    transform: scale(1.05);
}
.services .serv-content .card i{
    font-size: 50px;
    color: #AB7D5C;
    transition: color 0.3s ease;
}
.services .serv-content .card:hover i{
    color: #fff;
}
.services .serv-content .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}

/* kinhnghiem */

.skills .title::after{
    content: "what i know";
}
.skills .skills-content .column{
    width: calc(50% - 30px);
}
.skills .skills-content .left .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

#skills.skills .skills-content .left p{
    text-align: justify;
	position: relative;
}

#skills.skills .skills-content .left p:hover::after{
	content: "Học hai văn bằng đem lại cho tôi lượng kiến thức gấp đôi, rèn luyện nhiều kỹ năng như làm việc nhóm, thuyết trình, sắp xếp thời gian, tư duy logic - tư duy phản biện. Đồng thời, việc theo đuổi thiết kế từ sớm giúp tôi có những định hướng học tập và làm việc rõ ràng hơn cho tương lai.";
    pointer-events: none;
	animation: fadeIn 1.5s;
    font-family:montserrat;
    color:#AB7D5C;
    padding-top: 13px;
    line-height: 150%;
}

@keyframes fadeIn{
	0%{opacity: 0}
	100%{opacity: 1}
}
.skills .skills-content .left a{
    display: inline-block;
    background: #AB7D5C;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 16px;
    margin-top: 20px;
    border-radius: 6px;
    border: 2px solid #AB7D5C;
    transition: all 0.3s ease;
}
.skills .skills-content .left a:hover{
    color: #AB7D5C;
    background: none;
}

.skills .skills-content .right .bars{
    margin-bottom: 15px;
}
.skills .skills-content .right .info{
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
}
.skills .skills-content .right span{
    font-weight: 500;
    font-size: 18px;
}
.skills .skills-content .right .line{
    height: 5px;
    width: 100%;
    background: lightgrey;
    position: relative;
}
.skills .skills-content .right .line::before{
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    background: #AB7D5C;
}
.skills-content .right .html::before{
    width: 70%;
}
.skills-content .right .css::before{
    width: 60%;
}
.skills-content .right .js::before{
    width: 50%;
}
.skills-content .right .php::before{
    width: 70%;
}
.skills-content .right .mysql::before{
    width: 50%;
}

/* project nhom va ca nhan*/
.teams .title::after{
    content: "what i have done";
}
.teams .carousel .card{
    border-radius: 6px;
    padding: 25px 35px;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover{
    background: #AB7D5C;
}
.teams .carousel .card .box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover .box{
    transform: scale(1.05);
}
.teams .carousel .card .text{
    font-size: 25px;
    font-weight: 500;
    margin: 10px 0 7px 0;
}
.teams .carousel .card img{
    height: 150px;
    width: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #AB7D5C;
    transition: all 0.3s ease;
}
.teams .carousel .card:hover img{
    border-color: #fff;
}
.owl-dots{
    text-align: center;
    margin-top: 20px;
}
.owl-dot{
    height: 13px;
    width: 13px;
    margin: 0 5px;
    outline: none!important;
    border-radius: 50%;
    border: 2px solid #AB7D5C!important;
    transition: all 0.3s ease;
}
.owl-dot.active{
    width: 35px;
    border-radius: 14px;
}
.owl-dot.active,
.owl-dot:hover{
    background: #AB7D5C!important;
}

/* lien lac*/
.contact .title::after{
    content: "Get in touch";
}
.contact .contact-content .column{
    width: calc(50% - 30px);
}
.contact .contact-content .text{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.contact .contact-content .left p{
    text-align: justify;
}
#contact.contact .contact-content .left p{
    text-align: justify;
	position: relative;
}

#contact.contact .contact-content .left p:hover::after{
	content: "Tôi là một người trung thực và có trách nhiệm trong công việc của mình. Tôi cam kết cung cấp các sản phẩm đạt tiêu chuẩn cao với chất lượng tốt nhất.";
    pointer-events: none;
	animation: fadeIn 1.5s;
    font-family:montserrat;
    color:#AB7D5C;
    padding-top: 11px;
    line-height: 150%;
}

@keyframes fadeIn{
	0%{opacity: 0}
	100%{opacity: 1}
}

.contact .contact-content .left .icons{
    margin: 10px 0;
}
.contact .contact-content .row{
    display: flex;
    height: 65px;
    align-items: center;
}
.contact .contact-content .row .info{
    margin-left: 30px;
}
.contact .contact-content .row i{
    font-size: 25px;
    color: #AB7D5C;
}
.contact .contact-content .info .head{
    font-weight: 500;
}
.contact .contact-content .info .sub-title{
    color: #333;
}
.contact .right form .fields{
    display: flex;
}
.contact .right form .field,
.contact .right form .fields .field{
    height: 45px;
    width: 100%;
    margin-bottom: 15px;
}
.contact .right form .textarea{
    height: 80px;
    width: 100%;
}
.contact .right form .name{
    margin-right: 10px;
}
.contact .right form .field input,
.contact .right form .textarea textarea{
    height: 100%;
    width: 100%;
    border: 1px solid lightgrey;
    border-radius: 6px;
    outline: none;
    padding: 0 15px;
    font-size: 17px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}
.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus{
    border-color: #b3b3b3;
}
.contact .right form .textarea textarea{
  padding-top: 10px;
  resize: none;
}
.contact .right form .button-area{
  display: flex;
  align-items: center;
}
.right form .button-area button{
  color: #fff;
  display: block;
  width: 160px!important;
  height: 45px;
  outline: none;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  flex-wrap: nowrap;
  background: #AB7D5C;
  border: 2px solid #AB7D5C;
  transition: all 0.3s ease;
}
.right form .button-area button:hover{
  color: #AB7D5C;
  background: none;
}
/* footer section styling */
footer{
    background: #111;
    padding: 15px 23px;
    color: #fff;
    text-align: center;
}
footer span a{
    color: #AB7D5C;
    text-decoration: none;
}
footer span a:hover{
    text-decoration: underline;
}


/*nav */
@media (max-width: 1104px) {
    .about .about-content .left img{
        height: 350px;
        width: 350px;
    }
}

@media (max-width: 991px) {
    .max-width{
        padding: 0 50px;
    }
}
@media (max-width: 947px){
    .menu-btn{
        display: block;
        z-index: 999;
    }
    .menu-btn i.active:before{
        content: "\f00d";
    }
    .navbar .menu{
        position: fixed;
        height: 100vh;
        width: 100%;
        left: -100%;
        top: 0;
        background: #111;
        text-align: center;
        padding-top: 80px;
        transition: all 0.3s ease;
    }
    .navbar .menu.active{
        left: 0;
    }
    .navbar .menu li{
        display: block;
    }
    .navbar .menu li a{
        display: inline-block;
        margin: 20px 0;
        font-size: 25px;
    }
    .home .home-content .text-2{
        font-size: 70px;
    }
    .home .home-content .text-3{
        font-size: 35px;
    }
    .home .home-content a{
        font-size: 23px;
        padding: 10px 30px;
    }
    .max-width{
        max-width: 930px;
    }
    .about .about-content .column{
        width: 100%;
    }
    .about .about-content .left{
        display: flex;
        justify-content: center;
        margin: 0 auto 60px;
    }
    .about .about-content .right{
        flex: 100%;
    }
    .services .serv-content .card{
        width: calc(50% - 10px);
        margin-bottom: 20px;
    }
    .skills .skills-content .column,
    .contact .contact-content .column{
        width: 100%;
        margin-bottom: 35px;
    }
}

@media (max-width: 690px) {
    .max-width{
        padding: 0 23px;
    }
    .home .home-content .text-2{
        font-size: 60px;
    }
    .home .home-content .text-3{
        font-size: 32px;
    }
    .home .home-content a{
        font-size: 20px;
    }
    .services .serv-content .card{
        width: 100%;
    }
}

@media (max-width: 500px) {
    .home .home-content .text-2{
        font-size: 50px;
    }
    .home .home-content .text-3{
        font-size: 27px;
    }
    .about .about-content .right .text,
    .skills .skills-content .left .text{
        font-size: 19px;
    }
    .contact .right form .fields{
        flex-direction: column;
    }
    .contact .right form .name,
    .contact .right form .email{
        margin: 0;
    }
    .right form .error-box{
       width: 150px;
    }
    .scroll-up-btn{
        right: 15px;
        bottom: 15px;
        height: 38px;
        width: 35px;
        font-size: 23px;
        line-height: 38px;
    }
}



/*modau branding */

.home_1{
    padding-top: 280px;
    background: url( "images/branding.png") no-repeat center;
    height: 100vh;
    color: #fff;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Ubuntu', sans-serif;
}
.home_1 .max-width{
  width: 100%;
  display: flex;
}
.home_1 .max-width .row{
  margin-right: 0;
}
.home_1 .home_1-content .text-1{
    font-size: 25px;
}
.home_1 .home_1-content .text-2{
    font-size: 70px;
    font-weight: 500;
    margin-left: -3px;
    color: #AB7D5C;
}
.home_1 .home_1-content .text-2_1{
    font-size: 25px;
    margin-left: -3px;
}
.home_1 .home_1-content .text-2_2{
    font-size: 20px;
    margin-left: -3px;
}
.home_1 .home_1-content .text-2_1 span{
    color: #AB7D5C;
    font-weight: 500;
}
.home_1 .home_1-content a{
    display: inline-block;
    background: #AB7D5C;
    color: #fff;
    font-size: 25px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid #927662;
    transition: all 0.3s ease;
}
.home_1 .home_1-content a:hover{
    color: #AB7D5C;
    background: none;
}


.top {
      display: flex;
      align-items: center;
      justify-content: center;
	background-image:url( "images/branding.png");
	background-attachment: fixed;
	height: 700px;
	overflow: hidden;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #FFFFFF;
}
#sec7{
	display: flex;
    font-family: 'Poppins', sans-serif;
}
.black {
	position: absolute;
	background: transparent;
	border-bottom: 1px solid #AB7D5C;
}
.black a, .black i{
	color: white;
}
.black .nav ul{
	background: transparent;
}
.white{
	color:white;	
}

}
.deconstructed {
	position: relative;
	margin: 0px 400PX 0;
	color: transparent;
	font-family: 'Poppins', sans-serif;
	font-size: 78PX;
	line-height: 1.2
}

.deconstructed > div {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  color: #AB7D5C;
	  pointer-events: none;
}
.deconstructed > div:nth-child(1) {
	  -webkit-mask-image: linear-gradient(black 25%, transparent 25%);
	  mask-image: linear-gradient(black 25%, transparent 25%);
	  animation: deconstructed1 5s linear 1;
}
.deconstructed > div:nth-child(2) {
	  -webkit-mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
	  mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
	  animation: deconstructed2 5s linear 1;
}
.deconstructed > div:nth-child(3) {
	   -webkit-mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
	  mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
	  animation: deconstructed3 5s linear;
}
.deconstructed > div:nth-child(4) {
   -webkit-mask-image: linear-gradient(transparent 75%, black 75%);
  mask-image: linear-gradient(transparent 75%, black 75%,transparent 75%);
  animation: deconstructed4 5s linear 1;
}
@keyframes deconstructed1 {
  0% {
    transform: translateX(100%);
  }
  26% {
    transform: translateX(0%);
  }
  83% {
    transform: translateX(-0.1%);
  }
 100% {
    transform: translateX(0);
  }
}
@keyframes deconstructed2 {
  0% {
    transform: translateX(100%);
  }
  24% {
    transform: translateX(0.5%);
  }
  82% {
    transform: translateX(-0.2%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes deconstructed3 {
  0% {
    transform: translateX(100%);
  }
  22% {
    transform: translateX(0%);
  }
  81% {
    transform: translateX(0%);
  }
100% {
    transform: translateX(0);
  }
}
@keyframes deconstructed4 {
  0% {
    transform: translateX(100%);
  }
  20% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(0%);
  }
 100% {
    transform: translateX(0);
  }
}
.s7-l{
	position: sticky;
	top:0;
	flex: 0.7;
	height: 100vh;
	border-right: 3px solid #AB7D5C;
	border-bottom: 3px solid #AB7D5C;
}
.s7-r{
	flex: 3;
	overflow: hidden;
}
.s7-l p{
	transform:translate(-50%,-50%) rotate(270deg);
	position: absolute;
	left: 58%;
	top: 55%;
	font-size: 100px;
    color:#AB7D5C;
    font-weight: 300;
}
.s7-row img{
	width: 250px;
	height: 350px;
	object-fit: cover;
}
.b-img{
	width: 530px!important;
}
.s7-item{
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 3px solid #AB7D5C;
	height: 450px;
}
.s7-col{
	flex: 1;
	text-align: center;
    font-size: 18px;
    font-weight: 130;
}
.s7-col .maintitle{
	margin: 6px;
    font-size: 35px;
}
.s7-row{
	flex: 2;
	margin-right: 20px;
}
.s7-row{
	display: flex;
	align-items: center;
	justify-content: space-between;	
}
.s7-r button{
	width: 170px;
	margin-top: 0;
	transition: 0.3s ease;
}
.s7-r button:hover a{
	color: white;
}
.s7-item .maintitle{
	font-size: 35px;
}
.s7-item1{
	display: flex;
	align-items: center;
	flex-direction: column;
	border-bottom: 3px solid #AB7D5C;
	height: 550px;
}
.s7-item1 .s7-row{
	flex:1;
	width: 100%;
}
.s7-item1 .s7-col{
	width: 100%;
	flex:0;
	padding: 20px;
	border-bottom: 3px solid #AB7D5C;
}
.s7-item1 .s7-row img{
	height: 220px;
	width: 400px;
	object-fit: cover;
}
.s7-item1 .web{
	flex:1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-right: 3px solid #AB7D5C;
	position: relative;
	height: 100%
}
.s7-item1 .web:nth-child(2){
	border-right: none;
}
.web .minititle{
	margin-top: 20px;
    font-size: 18px;
    font-weight: 130;
}
.web button{
	margin:0;
}
#sec7 img:hover{ 
	animation: shadow-pop-br 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	transition: 1s ease
}

/*modau illus */

.home_2{
    padding-top: 280px;
    background: url( "images/illus.png") no-repeat center;
    height: 100vh;
    color: #fff;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Ubuntu', sans-serif;
}
.home_2 .max-width{
  width: 100%;
  display: flex;
}
.home_2 .max-width .row{
  margin-right: 0;
}
.home_2 .home_2-content .text-1{
    font-size: 25px;
}
.home_2 .home_2-content .text-2{
    font-size: 70px;
    font-weight: 500;
    margin-left: -3px;
    color:#AB7D5C;
}
.home_2 .home_2-content .text-2_1a2{
    font-size: 25px;
    margin-left: -3px;
}
.home_2 .home_2-content .text-2_2a2{
    font-size: 20px;
    margin-left: -3px;
}
.home_2 .home_2-content .text-2_1a2 span{
    color: #AB7D5C;
    font-weight: 500;
}
.home_2 .home_2-content a{
    display: inline-block;
    background: #AB7D5C;
    color: #fff;
    font-size: 25px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid #AB7D5C;
    transition: all 0.3s ease;
}
.home_2 .home_2-content a:hover{
    color: #927662;
    background: none;
}