/* first-banner */
@media (min-width: 991px) {
.first-banner {
width: 100%;
/* height: 600px; */
background: url('data:image/svg+xml,'), linear-gradient(#0b2f6ae5, #0b306a);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
/* background: linear-gradient(#243A5E, #1F2933); */
/* background: linear-gradient(#1F2933, #243A5E); */
}
.first-banner .text h1 {
font-size: 35px;
}
.first-banner .text p {
font-size: 20px;
line-height: 35px;
}
.filter-div {
width: 100%;
height: 80px;
background: rgb(255, 255, 255);
margin-top: -40px;
border-radius: 25px;
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
/* border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px; */
}
.input-div {
width: 30%;
display: flex;
align-items: center;
border: 1px solid #243a5e3f;
height: 60px;
padding: 0px 10px;
border-right: none;
}
.input-div:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.input-div img {
width: 25px;
}
.input-div input {
border: none;
padding-left: 10px;
width: calc(100% - 30px);
height: 100%;
}
.input-div input:focus {
border: none;
outline: none;
}
button {
width: 10%;
display: flex;
align-items: center;
justify-content: center;
height: 70px;
background-color: #E31E24;
border: none;
color: #fff;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
}
@media (max-width: 991px) {
.first-banner {
width: 100%;
/* height: 600px; */
background: url('data:image/svg+xml,'), linear-gradient(#0b2f6ae5, #0b306a);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
/* background: linear-gradient(#243A5E, #1F2933); */
/* background: linear-gradient(#1F2933, #243A5E); */
}
.first-banner .text h1 {
font-size: 28px;
margin-top: 80px;
}
.first-banner .animation {
text-align: center;
}
.first-banner .text p {
font-size: 18px;
line-height: 35px;
}
.filter-div {
width: 80%;
height: 310px;
background: rgb(255, 255, 255);
margin-top: -152px;
border-radius: 40px;
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
padding: 20px;
/* border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px; */
}
.input-div {
width: 100%;
display: flex;
align-items: center;
border: 1px solid #243a5e3f;
height: 50px;
padding: 0px 10px;
border-radius: 15px;
margin-top: 15px;
}
.input-div img {
width: 25px;
}
.input-div input {
border: none;
padding-left: 10px;
width: calc(100% - 30px);
height: 100%;
}
.input-div input:focus {
border: none;
outline: none;
}
button {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background-color: #E31E24;
border: none;
color: #fff;
border-radius: 15px;
margin-top: 15px;
}
}
/* filter-div */
@media (min-width: 991px) {
.filter-div {
width: 100%;
background: rgb(255, 255, 255);
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.input-div {
width: 30%;
display: flex;
align-items: center;
border: 1px solid #243a5e3f;
height: 60px;
padding: 0px 10px;
border-right: none;
position: relative;
}
.input-div.err {
border: 1px solid #c50707 !important;
}
.input-div .err {
border: 1px solid #c50707 !important;
}
.input-div .list {
display: none;
position: absolute;
width: 100%;
left: 0px;
background-color: #fff;
border: 1px solid rgb(209, 209, 209);
box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.151);
border-radius: 10px;
top: 108%;
z-index: 10000;
max-height: 180px;
overflow-y: scroll;
}
.input-div .list .list-item-city {
display: flex;
height: 35px;
align-items: center;
margin-top: 5px;
cursor: pointer;
padding: 20px;
}
.input-div .list .list-item-city:hover {
background-color: #0b2f6a25;
}
.input-div .list .list-item-city i {
font-size: 18px;
color: #0b306a;
}
.input-div .list .list-item-city .text {
font-size: 16px;
margin-left: 8px;
}
.input-div .person-div {
display: none;
position: absolute;
width: 100%;
left: 0px;
background-color: #fff;
border: 1px solid rgb(209, 209, 209);
box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.151);
border-radius: 10px;
top: 108%;
z-index: 10000;
/* height: 200px; */
padding: 15px;
}
.input-div .person-div .counter-div {
/* padding: 15px; */
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
margin-top: 10px;
}
.input-div .person-div .counter-div .nationality-select {
width: 100px;
background-color: #598bdb46;
/* border: 1px solid #000; */
color: #0b306a;
border: none;
border-radius: 3px;
height: 30px;
font-size: 13px;
}
.input-div .person-div .counter-div .tit {
font-weight: 500;
font-size: 16px;
}
.input-div .person-div .counter-div .counter {
display: flex;
align-items: center;
}
.input-div .person-div .counter-div .counter span {
width: 30px;
height: 30px;
background-color: #0b306a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
font-size: 18px;
padding-bottom: 2px;
}
.input-div .person-div .counter-div .counter h6 {
width: 40px;
text-align: center;
padding-top: 7px;
font-size: 17px;
}
.input-div .person-div .children-age select {
background-color: transparent;
border: 1px solid rgb(156, 156, 156);
border-radius: 5px;
height: 35px;
font-size: 14px;
width: 49%;
margin-bottom: 5px;
}
.input-div:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.input-div img {
width: 25px;
}
.input-div input {
border: none;
padding-left: 10px;
width: calc(100% - 30px);
height: 100%;
}
.month-item-header {
font-weight: 900;
font-size: 18px;
height: 50px;
}
.month-item {
padding-bottom: 20px !important;
}
.month-item-weekdays-row div {
color: #000;
font-weight: 500;
}
.litepicker .container__days .day-item.is-start-date {
background-color: #0b306a !important;
color: #fff !important;
}
.litepicker .container__days .day-item.is-in-range {
background-color: #0b2f6a44 !important;
}
.litepicker .container__days .day-item.is-end-date {
background-color: #0b306a !important;
color: #fff !important;
}
.input-div input:focus {
border: none;
outline: none;
}
button {
width: 10%;
display: flex;
align-items: center;
justify-content: center;
height: 60px;
background-color: #E31E24;
border: none;
color: #fff;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
}
@media (max-width: 991px) {
.filter-div {
width: 100%;
background: rgb(255, 255, 255);
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
/* .filter-inner {
display: block;
background-color: #fff;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
z-index: 1000000;
overflow-y: scroll;
} */
.input-div {
width: 100%;
display: flex;
align-items: center;
border: 1px solid #243a5e3f;
height: 40px;
padding: 0px 10px;
border-radius: 15px;
position: relative;
margin-top: 15px;
}
.input-div.err {
border: 1px solid #c50707 !important;
}
.input-div .err {
border: 1px solid #c50707 !important;
}
.input-div .list {
display: none;
position: absolute;
width: 100%;
left: 0px;
background-color: #fff;
border: 1px solid rgb(209, 209, 209);
box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.151);
border-radius: 10px;
top: 108%;
z-index: 10000;
max-height: 180px;
overflow-y: scroll;
}
.input-div .list .list-item-city {
display: flex;
height: 35px;
align-items: center;
margin-top: 5px;
cursor: pointer;
padding: 20px;
}
.input-div .list .list-item-city:hover {
background-color: #0b2f6a25;
}
.input-div .list .list-item-city i {
font-size: 18px;
color: #0b306a;
}
.input-div .list .list-item-city .text {
font-size: 16px;
margin-left: 8px;
}
.input-div .person-div {
display: none;
position: absolute;
width: 100%;
left: 0px;
background-color: #fff;
border: 1px solid rgb(209, 209, 209);
box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.151);
border-radius: 10px;
top: 100%;
z-index: 10000;
padding: 15px;
}
/* .input-div .person-div {
position: relative;
width: 100%;
border-radius: 10px;
padding: 15px;
bottom: 0px;
} */
.input-div .person-div .counter-div {
/* padding: 15px; */
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
margin-top: 10px;
}
.input-div .person-div .counter-div .nationality-select {
width: 100px;
background-color: #598bdb46;
/* border: 1px solid #000; */
color: #0b306a;
border: none;
border-radius: 3px;
height: 30px;
font-size: 13px;
}
.input-div .person-div .counter-div .tit {
font-weight: 500;
font-size: 16px;
}
.input-div .person-div .counter-div .counter {
display: flex;
align-items: center;
}
.input-div .person-div .counter-div .counter span {
width: 30px;
height: 30px;
background-color: #0b306a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
font-size: 18px;
padding-bottom: 2px;
}
.input-div .person-div .counter-div .counter h6 {
width: 40px;
text-align: center;
padding-top: 7px;
font-size: 17px;
}
.input-div .person-div .children-age select {
background-color: transparent;
border: 1px solid rgb(156, 156, 156);
border-radius: 5px;
height: 35px;
font-size: 14px;
width: 49%;
margin-bottom: 5px;
}
.input-div:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.input-div img {
width: 20px;
}
.input-div input {
border: none;
padding-left: 10px;
width: calc(100% - 30px);
height: 100%;
}
.month-item-header {
font-weight: 900;
font-size: 18px;
height: 50px;
}
.month-item {
padding-bottom: 20px !important;
}
.month-item-weekdays-row div {
color: #000;
font-weight: 500;
}
.litepicker .container__days .day-item.is-start-date {
background-color: #0b306a !important;
color: #fff !important;
}
.litepicker .container__days .day-item.is-in-range {
background-color: #0b2f6a44 !important;
}
.litepicker .container__days .day-item.is-end-date {
background-color: #0b306a !important;
color: #fff !important;
}
.input-div input:focus {
border: none;
outline: none;
}
button {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
background-color: #E31E24;
border: none;
color: #fff;
border-radius: 15px;
margin-top: 15px;
}
}
/* why-1 */
@media (min-width: 991px) {
.item-why-1 {
/* width: 300px; */
width: 25%;
display: flex;
align-items: center;
margin-top: 20px;
}
.item-why-1 .img {
background-color: #64779769;
width: 45px;
height: 45px;
min-width: 45px;
min-height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
}
.item-why-1 .img img {
width: 70%;
}
.item-why-1 h6 {
font-size: 15px;
}
}
@media (max-width: 991px) {
.item-why-1 {
width: 300px;
display: flex;
align-items: center;
margin-top: 20px;
}
.item-why-1 .img {
background-color: #64779769;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
}
.item-why-1 .img img {
width: 70%;
}
}
/* popular-city */
@media (min-width: 1400px) {
.popular-city {
margin-top: 100px;
}
.popular-city h2 {
color: #000;
font-weight: 700;
}
.popular-city .item-city {
width: 270px;
text-decoration: none;
margin-top: 30px;
}
.popular-city .item-city img {
width: 270px;
height: 200px;
border-top-left-radius: 130px;
border-top-right-radius: 130px;
object-fit: cover;
}
.popular-city .item-city .desc {
width: 100%;
height: 80px;
background-color: #fff;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
padding: 10px;
}
.popular-city .item-city .desc .flag {
width: 70px;
height: 70px;
border-radius: 50%;
position: absolute;
background-color: #fff;
top: -40px;
right: calc(50% - 40px);
display: flex;
align-items: center;
justify-content: center;
padding: 7px;
}
.popular-city .item-city .desc .flag::before {
content: "";
position: absolute;
width: 12px;
height: 18px;
bottom: 27px;
left: -15px;
border-radius: 0 0 0 24px;
box-shadow: -1px 3px 0 #fff, -6px 6px 0 #fff;
rotate: -90deg;
}
.popular-city .item-city .desc .flag::after {
content: "";
position: absolute;
width: 12px;
height: 13px;
bottom: 30px;
right: -11px;
border-radius: 0 0 0 24px;
box-shadow: -1px 3px 0 #fff, -6px 6px 0 #fff;
rotate: 0deg;
}
.popular-city .item-city .desc .flag img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.popular-city .item-city .desc h6 {
width: 100%;
text-align: center;
color: #000;
font-weight: 900;
font-size: 22px;
margin-top: 25px;
}
}
@media (max-width: 1400px) {
.popular-city {
margin-top: 100px;
}
.popular-city h2 {
color: #000;
font-weight: 700;
}
.popular-city .item-city {
width: 230px;
text-decoration: none;
margin-top: 30px;
}
.popular-city .item-city img {
width: 230px;
height: 180px;
border-top-left-radius: 130px;
border-top-right-radius: 130px;
object-fit: cover;
}
.popular-city .item-city .desc {
width: 100%;
height: 80px;
background-color: #fff;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
padding: 10px;
}
.popular-city .item-city .desc .flag {
width: 70px;
height: 70px;
border-radius: 50%;
position: absolute;
background-color: #fff;
top: -40px;
right: calc(50% - 40px);
display: flex;
align-items: center;
justify-content: center;
padding: 7px;
}
.popular-city .item-city .desc .flag::before {
content: "";
position: absolute;
width: 12px;
height: 18px;
bottom: 27px;
left: -15px;
border-radius: 0 0 0 24px;
box-shadow: -1px 3px 0 #fff, -6px 6px 0 #fff;
rotate: -90deg;
}
.popular-city .item-city .desc .flag::after {
content: "";
position: absolute;
width: 12px;
height: 13px;
bottom: 30px;
right: -11px;
border-radius: 0 0 0 24px;
box-shadow: -1px 3px 0 #fff, -6px 6px 0 #fff;
rotate: 0deg;
}
.popular-city .item-city .desc .flag img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.popular-city .item-city .desc h6 {
width: 100%;
text-align: center;
color: #000;
font-weight: 900;
font-size: 22px;
margin-top: 25px;
}
}
@media (max-width: 1200px) {
.popular-city {
margin-top: 100px;
}
.popular-city h2 {
color: #000;
font-weight: 700;
}
.popular-city .item-city {
width: 25%;
text-decoration: none;
margin-top: 30px;
position: relative;
}
.popular-city .item-city img {
width: 200px;
height: 150px;
border-top-left-radius: 130px;
border-top-right-radius: 130px;
object-fit: cover;
}
.popular-city .item-city .desc {
width: 200px;
height: 60px;
background-color: #fff;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
padding: 10px;
}
.popular-city .item-city .desc .flag {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
background-color: #fff;
top: -30px;
right: calc(50% - 25px);
display: flex;
align-items: center;
justify-content: center;
padding: 7px;
}
.popular-city .item-city .desc .flag::before {
content: "";
position: absolute;
width: 12px;
height: 18px;
bottom: 17px;
left: -14px;
border-radius: 0 0 0 24px;
box-shadow: -1px 3px 0 #fff, -6px 6px 0 #fff;
rotate: -90deg;
}
.popular-city .item-city .desc .flag::after {
content: "";
position: absolute;
width: 12px;
height: 13px;
bottom: 20px;
right: -11px;
border-radius: 0 0 0 24px;
box-shadow: -1px 3px 0 #fff, -6px 6px 0 #fff;
rotate: 0deg;
}
.popular-city .item-city .desc .flag img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.popular-city .item-city .desc h6 {
width: 100%;
text-align: center;
color: #000;
font-weight: 900;
font-size: 22px;
margin-top: 10px;
}
}
@media (max-width: 991px) {
.popular-city {
margin-top: 100px;
}
.popular-city h2 {
color: #000;
font-weight: 700;
}
.popular-city .item-city {
width: 270px;
text-decoration: none;
margin-top: 30px;
}
.popular-city .item-city img {
width: 270px;
height: 200px;
border-top-left-radius: 130px;
border-top-right-radius: 130px;
object-fit: cover;
}
.popular-city .item-city .desc {
width: 100%;
height: 80px;
background-color: #fff;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
padding: 10px;
}
.popular-city .item-city .desc .flag {
width: 70px;
height: 70px;
border-radius: 50%;
position: absolute;
background-color: #fff;
top: -40px;
right: calc(50% - 40px);
display: flex;
align-items: center;
justify-content: center;
padding: 7px;
}
.popular-city .item-city .desc .flag::before {
content: "";
position: absolute;
width: 12px;
height: 18px;
bottom: 27px;
left: -15px;
border-radius: 0 0 0 24px;
box-shadow: -1px 3px 0 #fff, -6px 6px 0 #fff;
rotate: -90deg;
}
.popular-city .item-city .desc .flag::after {
content: "";
position: absolute;
width: 12px;
height: 13px;
bottom: 30px;
right: -11px;
border-radius: 0 0 0 24px;
box-shadow: -1px 3px 0 #fff, -6px 6px 0 #fff;
rotate: 0deg;
}
.popular-city .item-city .desc .flag img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.popular-city .item-city .desc h6 {
width: 100%;
text-align: center;
color: #000;
font-weight: 900;
font-size: 22px;
margin-top: 25px;
}
}
/* business banner */
@media (min-width: 991px) {
.business-banner {
margin-top: 100px;
display: flex;
width: 48%;
}
.business-banner img {
width: 150px;
height: 150px;
border-radius: 20px;
margin-right: -150px;
z-index: 2;
object-fit: cover;
}
.business-banner .detail-div {
background-color: #1953af;
border-radius: 20px;
width: 100%;
/* width: 100%; */
height: 360px;
z-index: 1;
margin-top: 0px;
position: relative;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.business-banner .detail-div .white-div {
background-color: #fff;
height: 180px;
top: -17px;
width: 160px;
border-bottom-right-radius: 25px;
position: absolute;
}
.business-banner .detail-div .white-div::before {
content: "";
position: absolute;
width: 15px;
height: 25px;
bottom: -20px;
left: 4.9px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: 90deg;
background-color: #1953af;
}
.business-banner .detail-div .white-div::after {
content: "";
position: absolute;
width: 15px;
height: 25px;
top: 12px;
right: -20px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: 90deg;
background-color: #1953af;
}
.business-banner .detail-div .text {
margin-left: 160px;
padding: 20px;
}
.business-banner .detail-div h2 {
color: #fff;
font-weight: 900;
text-align: center;
}
.business-banner .detail-div p {
color: #fff;
font-size: 16px;
margin-top: 20px;
text-align: justify;
}
.business-banner .detail-div li {
color: #fff;
font-size: 16px;
}
.business-banner .detail-div .white-div-btn {
background-color: #fff;
height: 60px;
bottom: 0px;
right: 0px;
width: 170px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
position: absolute;
}
.business-banner .detail-div .white-div-btn::before {
content: "";
position: absolute;
width: 15px;
height: 25px;
bottom: -5px;
left: -20.1px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: -90deg;
background-color: #1953af;
}
.business-banner .detail-div .white-div-btn::after {
content: "";
position: absolute;
width: 15px;
height: 25px;
top: -20px;
right: 5px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: -90deg;
background-color: #1953af;
}
.business-banner .detail-div .white-div-btn a {
background-color: #be0a10;
width: 160px;
border-radius: 15px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
margin-top: 10px;
color: #fff;
margin-left: 10px;
font-size: 20px;
}
}
@media (max-width: 991px) {
.business-banner {
margin-top: 100px;
display: flex;
width: 100%;
}
.business-banner img {
width: 150px;
height: 150px;
border-radius: 20px;
margin-right: -150px;
z-index: 2;
object-fit: cover;
}
.business-banner .detail-div {
background-color: #1953af;
border-radius: 20px;
width: 100%;
/* width: 100%; */
height: 360px;
z-index: 1;
margin-top: 0px;
position: relative;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.business-banner .detail-div .white-div {
background-color: #fff;
height: 180px;
top: -17px;
width: 160px;
border-bottom-right-radius: 25px;
position: absolute;
}
.business-banner .detail-div .white-div::before {
content: "";
position: absolute;
width: 15px;
height: 25px;
bottom: -20px;
left: 4.9px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: 90deg;
background-color: #1953af;
}
.business-banner .detail-div .white-div::after {
content: "";
position: absolute;
width: 15px;
height: 25px;
top: 12px;
right: -20px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: 90deg;
background-color: #1953af;
}
.business-banner .detail-div .text {
margin-left: 160px;
padding: 20px;
}
.business-banner .detail-div h2 {
color: #fff;
font-weight: 900;
text-align: center;
}
.business-banner .detail-div p {
color: #fff;
font-size: 16px;
margin-top: 20px;
text-align: justify;
}
.business-banner .detail-div li {
color: #fff;
font-size: 16px;
}
.business-banner .detail-div .white-div-btn {
background-color: #fff;
height: 60px;
bottom: 0px;
right: 0px;
width: 170px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
position: absolute;
}
.business-banner .detail-div .white-div-btn::before {
content: "";
position: absolute;
width: 15px;
height: 25px;
bottom: -5px;
left: -20.1px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: -90deg;
background-color: #1953af;
}
.business-banner .detail-div .white-div-btn::after {
content: "";
position: absolute;
width: 15px;
height: 25px;
top: -20px;
right: 5px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: -90deg;
background-color: #1953af;
}
.business-banner .detail-div .white-div-btn a {
background-color: #be0a10;
width: 160px;
border-radius: 15px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
margin-top: 10px;
color: #fff;
margin-left: 10px;
font-size: 20px;
}
}
/* user-banner */
@media (min-width: 991px) {
.user-banner {
margin-top: 100px;
display: flex;
width: 48%;
/* justify-content: end; */
}
.user-banner img {
width: 150px;
height: 150px;
border-radius: 20px;
/* margin-left: -225px; */
z-index: 2;
object-fit: cover;
}
.user-banner .detail-div {
background-color: #243A5E;
/* color: #3a5f9b; */
border-radius: 20px;
width: 100%;
height: 360px;
z-index: 1;
margin-top: 0px;
position: relative;
margin-right: -150px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.user-banner .detail-div .white-div {
background-color: #fff;
height: 180px;
top: -17px;
width: 160px;
border-bottom-left-radius: 25px;
position: absolute;
right: 0px;
}
.user-banner .detail-div .white-div::before {
content: "";
position: absolute;
width: 15px;
height: 25px;
bottom: -25px;
right: -0.1px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: 180deg;
background-color: #243A5E;
}
.user-banner .detail-div .white-div::after {
content: "";
position: absolute;
width: 15px;
height: 25px;
top: 17px;
left: -15px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: 180deg;
background-color: #243A5E;
}
.user-banner .detail-div .text {
margin-right: 180px;
padding: 20px;
}
.user-banner .detail-div h2 {
color: #fff;
font-weight: 900;
text-align: center;
}
.user-banner .detail-div p {
color: #fff;
font-size: 16px;
margin-top: 20px;
text-align: justify;
}
.user-banner .detail-div li {
color: #fff;
font-size: 16px;
}
.user-banner .detail-div .white-div-btn {
background-color: #fff;
height: 60px;
bottom: 0px;
left: 0px;
width: 170px;
/* border-bottom-right-radius: 20px; */
border-top-right-radius: 20px;
position: absolute;
}
.user-banner .detail-div .white-div-btn::before {
content: "";
position: absolute;
width: 15px;
height: 25px;
bottom: 0px;
right: -15.1px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: 0deg;
background-color: #243A5E;
}
.user-banner .detail-div .white-div-btn::after {
content: "";
position: absolute;
width: 15px;
height: 25px;
top: -25px;
left: 0px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: 0deg;
background-color: #243A5E;
}
.user-banner .detail-div .white-div-btn a {
background-color: #E31E24;
width: 160px;
border-radius: 15px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
margin-top: 10px;
color: #fff;
margin-right: 10px;
font-size: 20px;
}
}
@media (max-width: 991px) {
.user-banner {
margin-top: 100px;
display: flex;
width: 100%;
/* justify-content: end; */
}
.user-banner img {
width: 150px;
height: 150px;
border-radius: 20px;
/* margin-left: -225px; */
z-index: 2;
object-fit: cover;
}
.user-banner .detail-div {
background-color: #243A5E;
/* color: #3a5f9b; */
border-radius: 20px;
width: 100%;
height: 360px;
z-index: 1;
margin-top: 0px;
position: relative;
margin-right: -150px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.user-banner .detail-div .white-div {
background-color: #fff;
height: 180px;
top: -17px;
width: 160px;
border-bottom-left-radius: 25px;
position: absolute;
right: 0px;
}
.user-banner .detail-div .white-div::before {
content: "";
position: absolute;
width: 15px;
height: 25px;
bottom: -25px;
right: -0.1px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: 180deg;
background-color: #243A5E;
}
.user-banner .detail-div .white-div::after {
content: "";
position: absolute;
width: 15px;
height: 25px;
top: 17px;
left: -15px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: 180deg;
background-color: #243A5E;
}
.user-banner .detail-div .text {
margin-right: 180px;
padding: 20px;
}
.user-banner .detail-div h2 {
color: #fff;
font-weight: 900;
text-align: center;
}
.user-banner .detail-div p {
color: #fff;
font-size: 16px;
margin-top: 20px;
text-align: justify;
}
.user-banner .detail-div li {
color: #fff;
font-size: 16px;
}
.user-banner .detail-div .white-div-btn {
background-color: #fff;
height: 60px;
bottom: 0px;
left: 0px;
width: 170px;
/* border-bottom-right-radius: 20px; */
border-top-right-radius: 20px;
position: absolute;
}
.user-banner .detail-div .white-div-btn::before {
content: "";
position: absolute;
width: 15px;
height: 25px;
bottom: 0px;
right: -15.1px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: 0deg;
background-color: #243A5E;
}
.user-banner .detail-div .white-div-btn::after {
content: "";
position: absolute;
width: 15px;
height: 25px;
top: -25px;
left: 0px;
border-radius: 0 0 0 24px;
box-shadow: -3px 3px 0 #fff, -5px 6px 0 #fff;
rotate: 0deg;
background-color: #243A5E;
}
.user-banner .detail-div .white-div-btn a {
background-color: #E31E24;
width: 160px;
border-radius: 15px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
margin-top: 10px;
color: #fff;
margin-right: 10px;
font-size: 20px;
}
}
/* popular-tour */
@media (min-width: 1200px) {
.popular-tour {
margin-top: 100px;
background-color: #f9fafb;
padding: 40px 0px;
}
.popular-tour h2 {
color: #000;
font-weight: 700;
}
.popular-tour .see-all {
background-color: #243A5E;
border-radius: 10px;
width: 120px;
height: 50px;
text-decoration: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.popular-tour .tour-item {
/* width: 310px; */
width: 25%;
margin-top: 30px;
text-decoration: none;
padding: 10px;
}
.popular-tour .tour-item .img {
width: 100%;
z-index: 1;
}
.popular-tour .tour-item .img img {
width: 100%;
border-radius: 20px;
z-index: 1;
height: 260px;
object-fit: cover;
}
.popular-tour .tour-item .detail {
background-color: #fff;
border-radius: 10px;
width: calc(100% - 40px);
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
margin-left: 20px;
margin-top: -60px;
z-index: 1111 !important;
position: relative;
padding: 15px;
}
.popular-tour .tour-item .detail .score {
display: flex;
align-items: center;
}
.popular-tour .tour-item .detail .score i {
color: gold;
margin-left: 5px;
}
.popular-tour .tour-item .detail .score span {
color: #000;
font-size: 12px;
margin-left: 10px;
font-weight: 700;
}
.popular-tour .tour-item .detail h3 {
color: #000;
font-size: 18px;
margin-top: 15px;
}
.popular-tour .tour-item .detail .span-detail {
display: flex;
align-items: center;
margin-top: 7px;
}
.popular-tour .tour-item .detail .span-detail img {
width: 16px;
margin-right: 5px;
}
.popular-tour .tour-item .detail .span-detail span {
color: #656566;
font-size: 12px;
}
.popular-tour .tour-item .detail hr {
color: #656566;
background-color: #656566;
}
.popular-tour .tour-item .detail .item-f {
background-color: #0f5eac2d;
border-radius: 20px;
padding: 3px 7px;
display: flex;
align-items: center;
}
.popular-tour .tour-item .detail .item-f img {
width: 15px;
margin-right: 3px;
}
.popular-tour .tour-item .detail .item-f span {
font-size: 12px;
color: #1F2933;
}
}
@media (max-width: 1200px) {
.popular-tour {
margin-top: 100px;
background-color: #f9fafb;
padding: 40px 0px;
}
.popular-tour h2 {
color: #000;
font-weight: 700;
}
.popular-tour .see-all {
background-color: #243A5E;
border-radius: 10px;
width: 120px;
height: 50px;
text-decoration: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.popular-tour .tour-item {
/* width: 310px; */
width: 25%;
margin-top: 30px;
text-decoration: none;
padding: 10px;
}
.popular-tour .tour-item .img {
width: 100%;
z-index: 1;
}
.popular-tour .tour-item .img img {
width: 100%;
border-radius: 20px;
z-index: 1;
height: 210px;
object-fit: cover;
}
.popular-tour .tour-item .detail {
background-color: #fff;
border-radius: 10px;
width: calc(100% - 20px);
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
margin-left: 10px;
margin-top: -60px;
z-index: 1111 !important;
position: relative;
padding: 10px;
}
.popular-tour .tour-item .detail .score {
display: flex;
align-items: center;
}
.popular-tour .tour-item .detail .score i {
color: gold;
margin-left: 5px;
}
.popular-tour .tour-item .detail .score span {
color: #000;
font-size: 12px;
margin-left: 10px;
font-weight: 700;
}
.popular-tour .tour-item .detail h3 {
color: #000;
font-size: 15px;
margin-top: 15px;
}
.popular-tour .tour-item .detail .span-detail {
display: flex;
align-items: center;
margin-top: 7px;
}
.popular-tour .tour-item .detail .span-detail img {
width: 14px;
margin-right: 5px;
}
.popular-tour .tour-item .detail .span-detail span {
color: #656566;
font-size: 12px;
}
.popular-tour .tour-item .detail hr {
color: #656566;
background-color: #656566;
}
.popular-tour .tour-item .detail .item-f {
background-color: #0f5eac2d;
border-radius: 20px;
padding: 3px 7px;
display: flex;
align-items: center;
}
.popular-tour .tour-item .detail .item-f img {
width: 11px;
margin-right: 2px;
}
.popular-tour .tour-item .detail .item-f span {
font-size: 10px;
color: #1F2933;
}
}
@media (max-width: 991px) {
.popular-tour {
margin-top: 100px;
background-color: #f9fafb;
padding: 40px 0px;
}
.popular-tour h2 {
color: #000;
font-weight: 700;
}
.popular-tour .see-all {
background-color: #243A5E;
border-radius: 10px;
width: 120px;
height: 50px;
text-decoration: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.popular-tour .tour-item {
width: 310px;
margin-top: 30px;
text-decoration: none;
}
.popular-tour .tour-item .img {
width: 100%;
z-index: 1;
}
.popular-tour .tour-item .img img {
width: 100%;
border-radius: 20px;
z-index: 1;
height: 260px;
object-fit: cover;
}
.popular-tour .tour-item .detail {
background-color: #fff;
border-radius: 10px;
width: calc(100% - 40px);
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
margin-left: 20px;
margin-top: -60px;
z-index: 1111 !important;
position: relative;
padding: 15px;
}
.popular-tour .tour-item .detail .score {
display: flex;
align-items: center;
}
.popular-tour .tour-item .detail .score i {
color: gold;
margin-left: 5px;
}
.popular-tour .tour-item .detail .score span {
color: #000;
font-size: 12px;
margin-left: 10px;
font-weight: 700;
}
.popular-tour .tour-item .detail h3 {
color: #000;
font-size: 18px;
margin-top: 15px;
}
.popular-tour .tour-item .detail .span-detail {
display: flex;
align-items: center;
margin-top: 7px;
}
.popular-tour .tour-item .detail .span-detail img {
width: 16px;
margin-right: 5px;
}
.popular-tour .tour-item .detail .span-detail span {
color: #656566;
font-size: 12px;
}
.popular-tour .tour-item .detail hr {
color: #656566;
background-color: #656566;
}
.popular-tour .tour-item .detail .item-f {
background-color: #0f5eac2d;
border-radius: 20px;
padding: 3px 7px;
display: flex;
align-items: center;
}
.popular-tour .tour-item .detail .item-f img {
width: 15px;
margin-right: 3px;
}
.popular-tour .tour-item .detail .item-f span {
font-size: 12px;
color: #1F2933;
}
}
/* why-chhose-2 */
@media (min-width: 991px) {
.why-chose-2 {
margin-top: 100px;
}
.why-chose-2 h2 {
text-align: center;
color: #000;
font-weight: 700;
}
.why-chose-2 h2 span {
color: #be0a10;
}
.why-chose-2 .item-why:hover {
rotate: 0deg !important;
transition: all 500ms;
}
.why-chose-2 .item-why:nth-child(1) {
rotate: 3deg;
transition: all 500ms;
}
.why-chose-2 .item-why:nth-child(2) {
rotate: 1deg;
transition: all 500ms;
}
.why-chose-2 .item-why:nth-child(3) {
rotate: -7deg;
transition: all 500ms;
}
.why-chose-2 .item-why {
width: 300px;
/* height: 300px; */
background-color: #fff;
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
border-radius: 20px;
padding: 20px;
margin-top: 40px;
position: relative;
}
.why-chose-2 .item-why .pin {
width: 70px;
position: absolute;
top: -20px;
right: calc(50% - 35px);
}
.why-chose-2 .item-why:nth-child(1) .pin::before {
content: "";
position: absolute;
width: 38px;
height: 38px;
box-shadow: 0px 0px 22px 0px #d9204efb;
z-index: -1;
top: 7px;
left: 12px;
border-radius: 50%;
}
.why-chose-2 .item-why:nth-child(2) .pin::before {
content: "";
position: absolute;
width: 38px;
height: 38px;
box-shadow: 0px 0px 22px 0px #368ee6e7;
z-index: -1;
top: 7px;
left: 12px;
border-radius: 50%;
}
.why-chose-2 .item-why:nth-child(3) .pin::before {
content: "";
position: absolute;
width: 38px;
height: 38px;
box-shadow: 0px 0px 22px 0px #a74ad6;
z-index: -1;
top: 7px;
left: 12px;
border-radius: 50%;
}
.why-chose-2 .item-why .pin img {
width: 70px;
}
.why-chose-2 .item-why .color-bg-text {
margin-top: 40px;
border-radius: 20px;
padding: 20px;
/* blue */
/* background: linear-gradient(#417fe4a6, #368ee63b); */
/* red */
}
.why-chose-2 .item-why .color-bg-text-red {
/* blue */
/* background: linear-gradient(#417fe4a6, #368ee63b); */
/* red */
background: linear-gradient(#d9204e56, #d9204e17);
}
.why-chose-2 .item-why .color-bg-text-blue {
/* blue */
background: linear-gradient(#417fe4a6, #368ee63b);
}
.why-chose-2 .item-why .color-bg-text-purple {
/* purple */
background: linear-gradient(#a74ad68f, #a74ad633);
}
.why-chose-2 .item-why .color-bg-text h6 {
font-size: 18px;
font-weight: 900;
color: #000;
}
.why-chose-2 .item-why .color-bg-text p {
font-size: 16px;
color: #000;
margin-top: 10px;
}
}
@media (max-width: 991px) {
.why-chose-2 {
margin-top: 100px;
}
.why-chose-2 h2 {
text-align: center;
color: #000;
font-weight: 700;
}
.why-chose-2 h2 span {
color: #be0a10;
}
.why-chose-2 .item-why:hover {
rotate: 0deg !important;
transition: all 500ms;
}
.why-chose-2 .item-why:nth-child(1) {
rotate: 3deg;
transition: all 500ms;
}
.why-chose-2 .item-why:nth-child(2) {
rotate: 1deg;
transition: all 500ms;
}
.why-chose-2 .item-why:nth-child(3) {
rotate: -7deg;
transition: all 500ms;
}
.why-chose-2 .item-why {
width: 300px;
/* height: 300px; */
background-color: #fff;
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
border-radius: 20px;
padding: 20px;
margin-top: 40px;
position: relative;
}
.why-chose-2 .item-why .pin {
width: 70px;
position: absolute;
top: -20px;
right: calc(50% - 35px);
}
.why-chose-2 .item-why:nth-child(1) .pin::before {
content: "";
position: absolute;
width: 38px;
height: 38px;
box-shadow: 0px 0px 22px 0px #d9204efb;
z-index: -1;
top: 7px;
left: 12px;
border-radius: 50%;
}
.why-chose-2 .item-why:nth-child(2) .pin::before {
content: "";
position: absolute;
width: 38px;
height: 38px;
box-shadow: 0px 0px 22px 0px #368ee6e7;
z-index: -1;
top: 7px;
left: 12px;
border-radius: 50%;
}
.why-chose-2 .item-why:nth-child(3) .pin::before {
content: "";
position: absolute;
width: 38px;
height: 38px;
box-shadow: 0px 0px 22px 0px #a74ad6;
z-index: -1;
top: 7px;
left: 12px;
border-radius: 50%;
}
.why-chose-2 .item-why .pin img {
width: 70px;
}
.why-chose-2 .item-why .color-bg-text {
margin-top: 40px;
border-radius: 20px;
padding: 20px;
/* blue */
/* background: linear-gradient(#417fe4a6, #368ee63b); */
/* red */
}
.why-chose-2 .item-why .color-bg-text-red {
/* blue */
/* background: linear-gradient(#417fe4a6, #368ee63b); */
/* red */
background: linear-gradient(#d9204e56, #d9204e17);
}
.why-chose-2 .item-why .color-bg-text-blue {
/* blue */
background: linear-gradient(#417fe4a6, #368ee63b);
}
.why-chose-2 .item-why .color-bg-text-purple {
/* purple */
background: linear-gradient(#a74ad68f, #a74ad633);
}
.why-chose-2 .item-why .color-bg-text h6 {
font-size: 18px;
font-weight: 900;
color: #000;
}
.why-chose-2 .item-why .color-bg-text p {
font-size: 16px;
color: #000;
margin-top: 10px;
}
}
/* blog */
@media (min-width: 991px) {
.blog {
margin-top: 100px;
}
.blog h2 {
color: #000;
font-weight: 700;
}
.blog .see-all {
background-color: #243A5E;
border-radius: 10px;
width: 120px;
height: 50px;
text-decoration: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.blog .item-blog {
/* width: 300px; */
width: calc(25% - 25px);
background-color: #fff;
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
border-radius: 25px;
padding: 10px;
text-decoration: none;
}
.blog .item-blog img {
width: 100%;
border-radius: 25px;
}
.blog .item-blog .detail {
padding: 5px;
}
.blog .item-blog .detail h3 {
font-size: 18px;
margin-top: 10px;
color: #000;
}
.blog .item-blog .detail .sub-tag {
font-size: 12px;
background-color: #143f852a;
color: #243A5E;
border-radius: 20px;
padding: 4px 6px;
width: max-content;
margin-top: 15px;
}
}
@media (max-width: 991px) {
.blog {
margin-top: 100px;
}
.blog h2 {
color: #000;
font-weight: 700;
}
.blog .see-all {
background-color: #243A5E;
border-radius: 10px;
width: 120px;
height: 50px;
text-decoration: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.blog .item-blog {
width: 300px;
background-color: #fff;
box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.267);
border-radius: 25px;
padding: 10px;
text-decoration: none;
margin-top: 30px;
}
.blog .item-blog img {
width: 100%;
border-radius: 25px;
}
.blog .item-blog .detail {
padding: 5px;
}
.blog .item-blog .detail h3 {
font-size: 18px;
margin-top: 10px;
color: #000;
}
.blog .item-blog .detail .sub-tag {
font-size: 12px;
background-color: #143f852a;
color: #243A5E;
border-radius: 20px;
padding: 4px 6px;
width: max-content;
margin-top: 15px;
}
}