/*
Theme Name: ngaydem
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.why { padding: 100px 0 150px; }@media (min-width:1024px) { .why .hinhtron, .why .item, .why .item .img, .why .tit { border-radius: 50% } .why .item, .why .tit { align-items: center; display: flex } .why .tit { justify-content: center; flex-direction: column; height: 230px; width: 230px; box-shadow: rgba(100, 100, 111, .2) 0 7px 29px 0; padding: 0 20px } .why .tit h2 { font-size: 22px; color: #ee1b24; text-align: center; text-transform: uppercase; margin-bottom: 10px } .why .item { position: absolute; background: linear-gradient(to top, #048c4d, #1f7007); width: 97px; height: 97px; justify-content: center } .why .item .img { height: 80px; width: 80px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center } .why .item .img img { max-width: 48px; max-height: 48px; object-fit: cover } .why .item .txt { position: absolute; top: 50%; transform: translateY(-50%); width: 300px } .why .item .txt span { font-size: 18px;text-transform: uppercase; display: block; margin-bottom: 10px; white-space: nowrap } .why .item .txt .desc p { font-size: 16px; line-height: 1.5 } .why .item.item1 { transform: translateX(230px) } .why .item.item1 .txt { left: calc(100% + 15px) } .why .item.item1 .txt span { color: #048c4d; font-weight: bold; } .why .item.item1::before { background: #0d8337; transform: rotate(180deg) translate(55px) rotate(-180deg) rotate(180deg) } .why .item.item2 { background: linear-gradient(to top, #048c4d, #1f7007); transform: rotate(60deg) translateX(230px) rotate(-60deg) } .why .item.item2 .txt { left: calc(100% + 15px) } .why .item.item2 .txt span { color: #048c4d; font-weight: bold;} .why .item.item2::before { background: #0d8337; transform: rotate(240deg) translate(55px) rotate(-240deg) rotate(-120deg) } .why .item.item3 { background: linear-gradient(to top, #048c4d, #1f7007); transform: rotate(120deg) translateX(230px) rotate(-120deg) } .why .item.item3 .txt { right: calc(100% + 15px) } .why .item.item3 .txt span {color: #048c4d; font-weight: bold; text-align: end } .why .item.item3 .txt .desc p { text-align: end } .why .item.item3::before { background: #0d8337; transform: rotate(300deg) translate(55px) rotate(-300deg) rotate(-60deg) } .why .item.item4 { background: linear-gradient(to top, #048c4d, #1f7007); transform: rotate(180deg) translateX(230px) rotate(-180deg) } .why .item.item4 .txt { right: calc(100% + 15px) } .why .item.item4 .txt span { color: #048c4d; font-weight: bold; text-align: end } .why .item.item4 .txt .desc p { text-align: end } .why .item.item4::before { background: #0d8337; transform: rotate(0) translate(55px) rotate(0) rotate(0) } .why .item.item5 { background: linear-gradient(to top, #048c4d, #1f7007); transform: rotate(240deg) translateX(230px) rotate(-240deg) } .why .item.item5 .txt { right: calc(100% + 15px) } .why .item.item5 .txt span { color: #048c4d; font-weight: bold; text-align: end } .why .item.item5 .txt .desc p { text-align: end } .why .item.item5::before { background: #0d8337; transform: rotate(60deg) translate(55px) rotate(-60deg) rotate(60deg) } .why .item.item6 { background: linear-gradient(to top, #048c4d, #1f7007); transform: rotate(300deg) translateX(230px) rotate(-300deg) } .why .item.item6 .txt { left: calc(100% + 15px) } .why .item.item6 .txt span { color: #048c4d; font-weight: bold; } .why .item.item6::before { background: #0d8337; transform: rotate(120deg) translate(55px) rotate(-120deg) rotate(120deg) } .why .item::before { content: ""; height: 24px; width: 15px; clip-path: polygon(100% 50%, 0 20%, 0 80%); position: absolute } } @media (max-width:1023px) { .why { padding: 0 0 50px } .why .tit { display: flex; align-items: center; flex-direction: column; margin-bottom: 30px } .why .tit h2 {  font-size: 22px; color: #ee1b24; font-weight: bold;; text-align: center; text-transform: uppercase; margin-bottom: 10px } .why .item { display: flex; align-items: start; margin-bottom: 20px } .why .item:last-of-type { margin-bottom: 0 } .why .item .img { width: 70px } .why .item .txt { width: calc(100% - 70px) } .why .item .txt span { font-size: 18px; text-transform: uppercase; display: block; margin-bottom: 10px } .why .item .txt .desc p {  font-size: 16px; line-height: 1.5 } } @media (max-width:767px) { .why .item, .why .tit { margin-bottom: 15px } .why { padding: 0 0 15px } .why .tit h2 { font-size: 20px } .why .item .txt .desc p { font-size: 15px } } 

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}