*{margin: 0;padding: 0;box-sizing: border-box;}
a {text-decoration: none;}
.container {max-width: 1595px;margin: 0 auto;}
.bg-img {background-size: cover;background-repeat: no-repeat;width: 100%;height: 100vh;position: relative;overflow: hidden;}
.bg-img::after {content: " ";left: 0;top: 0;bottom: 0;right: 0;position: absolute;background-color: rgba(255, 255, 255, 0.33);}
.main {z-index: 9;text-align: center;position: absolute;top: 50%;left: 0;transform: translateY(-50%);right: 0;}
.main .upr-div h3 {font-size: 60px;line-height: 60px;font-family: ProximaNova-Light;font-weight: 400;margin-bottom: 40px;letter-spacing: 0.1em;font-weight: 300;color: #14181b;}
p {font-family: ProximaNova-Light;font-weight: 400;font-size: 28px;line-height: 40px;max-width: 535px;margin: 0 auto;color: #14181b;}
p:nth-child(3) {font-family: ProximaNova-Semibold;margin-top: 20px;}

/*-----down-side------*/

.down {float: left;width: 100%;margin-top: 60px;position: relative;}
.down::before {content: " ";width: 1px;height: 310px;background: #14181b;position: absolute;right: 0;top: 0;bottom: 0;left: 50%;}
.down .left-side {position: relative;color: #4b328c;}
.down .right-side {position: relative;color: #00a19b;}
.box {float: left;width: 50%;}
.left-side a {border: 2px solid #4b328c;transition: 0.5s;}
.left-side a:hover {color: white;background-color: #4b328c;transition: 0.5s;}
.right-side a {border: 2px solid #00a19b;transition: 0.5s;}
.right-side a:hover {color: white;background-color: #00a19b;transition: 0.5s;}
.box h4 {font-weight: 400;font-size: 45px;line-height: 45px;font-family: ProximaNova-Light;font-weight: 400;padding: 45px 0px 52px;letter-spacing: 0.2em;}
.box a {text-align: center;max-width: 462px;color: #14181b;font-family: ProximaNova-Light;font-weight: 400;font-size: 20px;line-height: 20px;padding: 23px 20px;display: inline-block;letter-spacing: 0.1em;width: 100%;}

 @media(min-width:1921px) {
.box h4 {padding: 25px 0;}
}
 @media(max-width:1599px) {
.main .upr-div h3 {margin-bottom: 42px;}
.box a {margin-bottom: 75px;}
.box h4 {padding: 30px 0 55px 0}
p:nth-child(3) {margin-top: 36px;}
.down {margin-top: 80px;}
}
 @media(max-width:1366px) {
.down {margin-top: 60px;}
}
 @media(max-width:1024px) {
.box a {font-size: 18px;line-height: 18px;padding: 23px 20px;margin-bottom: 106px;}
.main .upr-div h3 {margin-bottom: 48px;}
.down {margin-top: 60px;}
}
 @media(max-width:991px) {
.main .upr-div h3 {margin-bottom: 26px;font-size: 52px;line-height: 54px;}
p{font-size: 24px;line-height: 34px;}
.box {width: 100%;}
.box h4 {font-size:36px;padding: 30px 0px 20px;letter-spacing:2px;}
.box a {margin-bottom: 30px;}
.down {margin-top: 30px;}
.down::before {display: none;}
p:nth-child(3) {margin-top: 30px;}
}
 @media(max-width:768px) {
.main .upr-div h3 {padding-top: 40px;margin-bottom: 18px;}
.box h4 {padding: 25px 0px 32px;}
}
 @media(max-width:640px) {
.main .upr-div h3 {margin-bottom: 28px;}
.box h4 {padding: 25px 0px 32px;}
.down {margin-top: 30px !important;}
}
 @media(max-width:575px) {
.main .upr-div h3 {font-size: 40px;line-height: 60px;margin-bottom: 16px !important}
p {font-size: 20px;line-height: 30px;}
.box h4 {font-size: 35px;line-height: 35px;padding: 17px 0px 20px !important;}
.box a {padding: 15px 12px;max-width: 400px;margin-bottom: 30px !important}
p:nth-child(3) {margin-top: 20px !important;}
}
 @media(max-width:480px) {
p {max-width: 375px;}
.container {padding: 0px 15px;}
}
 @media(max-width:414px) {
.box a {max-width: 307px;font-size: 12px;line-height: 12px;}
p {max-width: 290px;font-size: 16px;line-height: 20px;}
}
 @media(max-height:800px) {
.main .upr-div h3 {margin-bottom: 20px;font-size: 38px;line-height: 38px;}
.box h4 {padding: 20px 0px 25px;font-size: 28px;line-height: 25px;}
.box a {margin-bottom: 20px;}
.down {margin-top: 30px;}
.down::before{height:170px;}
}
 @media(max-height:600px) {
.bg-img {overflow: unset;}
.main {position: relative;top: 0;transform: translateY(-0%);}
.main .upr-div h3 {padding-top: 40px;margin-bottom: 30px;}
.box a {margin-bottom: 30px;}

}