@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); $font1: 'Open Sans', sans-serif; .footer_top_box { display: none !important; } .c-container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; @media (min-width: 1560px) { max-width: 1560px; } @media (min-width: 1200px) and (max-width: 1559.98px) { max-width: 1140px; } @media (min-width: 992px) and (max-width: 1199.98px) { max-width: 960px; } @media (min-width: 768px) and (max-width: 991.98px) { max-width: 720px; } @media (min-width: 576px) and (max-width: 767.98px) { max-width: 540px; } @media (max-width: 575.98px) { max-width: 100%; } } .box-1 { text-align: center; margin-bottom: 120px; img { width: 100%; max-width: fit-content; } } .box-2 { text-align: center; margin-bottom: 120px; @media (max-width: 992px) { margin-bottom: 60px; } h2 { font-size: 48px; font-family: $font1; font-weight: 300; text-transform: uppercase; max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 120px; color: #000; line-height: 1.3; strong { display: block; font-size: 55px; font-weight: 700; margin-bottom: 40px; } @media (max-width: 1200px) { font-size: 38px; margin-bottom: 50px; } @media (max-width: 768px) { font-size: 28px; } } p { width: 100%; color: #000; font-size: 32px; font-family: $font1; font-weight: 300; margin-left: auto; margin-right: auto; margin-bottom: 0; line-height: 1.3; strong { font-weight: 700; } @media (max-width: 1200px) { font-size: 26px; } @media (max-width: 768px) { font-size: 20px; } } } .box-3 { margin-bottom: 100px; .c-row { &-1 { display: flex; flex-direction: row; column-gap: 30px; justify-content: space-between; // margin-bottom: 70px; } &-2 { display: flex; flex-direction: row; column-gap: 30px; justify-content: space-between; // display: flex; // flex-direction: row; // justify-content: flex-end; // .c-col { // max-width: 1000px; // } } } h2 { color: #000; font-family: $font1; font-size: 55px; font-weight: 600; text-transform: uppercase; margin-bottom: 60px; @media (max-width: 1200px) { font-size: 50px; } @media (max-width: 768px) { font-size: 30px; margin-bottom: 40px; } } ul { list-style: decimal; margin-bottom: 50px; padding-left: 50px; @media (max-width: 768px) { margin-bottom: 40px; } li { color: #000; font-family: $font1; font-size: 36px; font-weight: 300; &:not(:last-child) { margin-bottom: 20px; } @media (max-width: 1200px) { font-size: 26px; } @media (max-width: 768px) { font-size: 20px; } } } a { display: inline-block; color: #fff; padding: 20px 40px; background: #1d1d1b; font-weight: 400; font-size: 14px; text-transform: uppercase; @media (max-width: 1200px) { padding: 15px 30px; } } p { color: #000; font-family: $font1; font-size: 18px; text-align: right; margin-bottom: 0; @media (max-width: 992px) { text-align: left; font-size: 16px; } } .c-row { &:not(:last-child) { margin-bottom: 90px; @media (max-width: 992px) { margin-bottom: 60px; } } &-3 { margin-bottom: 50px !important; } &-4 { padding-bottom: 20px; border-bottom: 1px solid #000; .c-col { text-align: right; @media (max-width: 992px) { text-align: left; } a { margin-bottom: 30px; } } p { max-width: 670px; margin-left: auto; } } @media (max-width: 992px) { flex-direction: column-reverse; row-gap: 40px; } } } .box-4 { margin-bottom: 100px; @media (max-width: 992px) { margin-bottom: 150px; } h2 { color: #000; font-size: 38px; font-family: $font1; font-weight: 300; margin-bottom: 48px; text-transform: uppercase; strong { display: block; font-size: 24px; text-align: center; font-weight: bold; } @media (max-width: 1200px) { font-size: 32px; } } ul { list-style: initial; padding-left: 40px; } ul, ol { li { color: #000; font-size: 20px; font-family: $font1; font-weight: 300; &:not(:last-child) { margin-bottom: 20px; } @media (max-width: 1200px) { font-size: 18px; } } } .c-row { &:not(:first-child) { margin-top: 90px; padding-top: 90px; border-top: 1px solid #000; } @media (max-width: 992px) { margin-top: 60px; padding-top: 60px; } } }