.banner-section{
position: relative;
}
.banner-section .banner, .banner-section h2, .banner-section p{
margin-left: 5% !important;
margin-right: 5% !important;
}
.banner-section .banner img.wp-block-cover__image-background{
border-radius: 40px 300px 40px 40px;
}
.banner-section h2, .banner-section p, .package-section p.has-text-align-center, .service-section p.has-text-align-center{
width: 55%;
}
.banner-section .animal-img img{
position: absolute;
right: 10%;
transform: translate(0);
bottom: 0px;
max-height: 680px;
max-width: 700px;
width: auto;
object-fit: cover;
} .banner-section .social-icons{
position: absolute;
left: 0;
width: max-content;
transform: rotate(270deg) translateY(-100%);
top: 50%;
gap: 20px;
}
.banner-section .social-icons a{
font-size: 20px;
}
.banner-section .social-icons li:hover{
color: #67B94A !important;
transform: none;
}
.banner-section .social-icons:after{
content: 'Follow Us :';
position: absolute;
left: -60%;
font-size: 15px;
font-weight: 600;
bottom: 0;
color: #ffffff;
}
.banner-section .social-icons:before{
content: '';
position: absolute !important;
transform: rotate(90deg);
padding: 18px;
top: -6px;
left: -95%;
background: url(//www.heritageturkeys.co.uk/wp-content/themes/forest-jungle-safari/inc/block-patterns/images/arrow.png) no-repeat;
} .package-section p.has-text-align-center, .service-section p.has-text-align-center{
margin: 0 auto;
}
.package-section .post img{
width: 100%;
height: 270px;
object-fit: cover;
border-radius: 8px;
}
.package-section .post .wp-block-buttons a{
display: none;
}
.package-section .post{
position: relative;
}
.package-section .post .wp-block-buttons a{
padding: 8px 20px 8px 20px;
}
.package-section .post:hover .wp-block-buttons a{
display: block;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%);
}
.package-section .post .wp-block-buttons a:hover{
background: #fff !important;
color: #000 !important;
}
.package-section .post:hover .post-content{
background-color: #67B94A !important;
}
.package-section .post:hover .post-content h4,
.package-section .post:hover .post-content p{
color: #ffffff !important;
}
.package-section .post .post-content{
border-radius: 10px 50px 10px 10px;
padding: 12px;
max-width: 376px;
margin-top: -22%;
position: relative;
gap: 10px;
} .service-section .service-num{
display: flex;
justify-content: space-between;
align-items: center;
}
.service-section .service-num{
color: #ffffff30;
}
.service-section .service-num:before{
content: "\f030";
font-weight: 900;
font-family: 'Font Awesome 6 Free';
float: left;
opacity: 1;
color: #000;
background: #ffffff;
box-shadow: 0px 3px 6px #00000029;
border-radius: 6px;
font-size: 36px;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.service-section .service:hover .service-num{
color: #67b94a45 !important;
}
.service-section .service:hover .service-num:before{
background: #67B94A;
color: #fff;
}
.service-section .service:nth-child(2) .service-num:before{
content: "\f2e7";
}
.service-section .service:nth-child(3) .service-num:before{
content: "\f1eb";
}
.service-section .service:nth-child(4) .service-num:before{
content: "\f091";
} @media screen and (max-width: 767px){
.banner-section .banner, .banner-section h2, .banner-section p{
margin-left: 0% !important;
margin-right: 0% !important;
padding: 0 20px;
} 
.banner-section .animal-img{
display: none;
}
.banner-section .banner img.wp-block-cover__image-background{
border-radius: 0;
opacity: 0.6;
}
.banner-section .banner{
min-height: 250px !important;
}
.banner-section h2{
font-size: 20px !important;
top: 10%;
}
.banner-section p{
font-size: 12px !important;
top: 30%;
}
.banner-section h2, .banner-section p{
text-align: center;
position: absolute;
z-index: 2;
}
.banner-section h2, .banner-section p, .package-section p.has-text-align-center, .service-section p.has-text-align-center{
width: 100%;
}
.banner-section .social-icons{
left: 50%;
gap: 8px;
transform: none;
top: 70%;
}
.banner-section .social-icons:before{
top: 4px;
}
.banner-section .social-icons:after{
bottom: 10px;
}
}
@media screen and (min-width: 768px) and (max-width:991px){
.package-section p.has-text-align-center, .service-section p.has-text-align-center{
width: 100%;
}
.banner-section h2{
font-size: 23px !important;
}
.banner-section p{	
font-size: 12px !important;
}
.banner-section .banner{
min-height: 310px !important;
margin-left: 6% !important;
margin-right: 4% !important;
}
.banner-section .banner img.wp-block-cover__image-background{
border-radius: 30px 160px 30px 30px;
}
.banner-section .animal-img img{
max-height: 370px;
transform: translate(18%);
}
.banner-section .social-icons{
left: -10px;
top: 45%;
gap: 10px;
}
.banner-section .social-icons:before, .banner-section .social-icons:after{
left: -6em;
}
.package-section .post .post-content{
flex-direction: column;
}
.package-section .post img{
height: 210px;
}
.package-section .posts, .service-section .service-content{
display: grid;
grid-template-columns: auto auto;
}
}
@media screen and (min-width: 992px) and (max-width:1199px){
.banner-section h2{
font-size: 23px !important;
}
.banner-section .banner{
min-height: 370px !important;
margin-left: 6% !important;
margin-right: 4% !important;
}
.banner-section .banner img.wp-block-cover__image-background{
border-radius: 30px 160px 30px 30px;
}
.banner-section .animal-img img{
max-height: 460px;
transform: translate(18%);
}
.banner-section .social-icons{
left: -20px;
top: 45%;
}
.package-section .post-content .price p{
font-size: 16px !important;
}
}
@media screen and (min-width: 1200px) and (max-width:1399px){
.banner-section h2{
font-size: 32px !important;
}
.banner-section .banner{
min-height: 450px !important;
margin-left: 6% !important;
margin-right: 4% !important;
}
.banner-section .banner img.wp-block-cover__image-background{
border-radius: 30px 160px 30px 30px;
}
.banner-section .animal-img img{
max-height: 555px;
transform: translate(18%);
}
.banner-section .social-icons{
left: -15px;
}
.package-section .post-content .price p{
font-size: 18px !important;
}
}
@media screen and (min-width: 1400px) and (max-width:1599px){
.banner-section .banner{
min-height: 500px !important;
margin-left: 6% !important;
margin-right: 4% !important;
}
.banner-section .animal-img img{
max-height: 610px;
transform: translate(18%);
}
.banner-section .social-icons{
left: -5px;
}
}