/*************Responsive Styles*****************/

/*******************************************/

/**************iPad Landscape***************/
@media screen and ( max-width: 991px ){
	/* #navbarSupportedContent .navbar-nav{
		position: absolute;
		top: 0%;
		left: 0%;
		background-color: var(--color8);
	    width: 85%;
	    transition: 0s;
	    padding: 40px 15px;
	    z-index: 50;
	    height: 100vh;
	} */
	.noscroll{
		overflow: hidden;
	}
	.sec-navbar .navbar-nav{
		height: 100vh;
		padding-bottom: 40px !important;
		justify-content: end;
		background-color: var(--color8) !important;
	}
	.dropdown-menu{
		display: flex;
		flex-direction: column;
		background-color: var(--color5);
		border: 0px;
		margin-left: 20px;
		padding: 0px;
	}
	.navbar-brand{
		margin: 0%;
		padding: 0px;
	}
	#navbarSupportedContent li {
	    margin: 10px 0px;
	}
	footer .row div:nth-child(1),
	footer .row div:nth-child(1){
		margin-bottom: 30px;
	}
	
	#navbarSupportedContent li .nav-link {
	    margin: 10px 0px;
	}
	.dropdown-toggle::after{
		display: none;
	}
	.related-cats .cat-tab-image{
		height: 300px;
	}
	.related-cats .cat-belongs-to{
		column-gap: 15px;
	}
}
/*******************************************/

/*************************iPad Portrait***************/
@media screen and (max-width: 985px){

}
/*******************************************/

/**********************iPhone Landscape*************/
@media screen and (max-width: 767px){
	footer .row >div{
		margin-bottom: 30px;
	}
	
}
@media screen and (max-width: 575px){
	.blog h2{
		margin-top: 15px;
	}
}
/*******************************************/

/***************iPhone Portrait**************/
@media screen and (max-width: 479px){
	.hero-banner {
	    height: 350px !important;
	    min-height: 100%;
	}
	.top-menu ul li {
	    padding: 4px !important;
	}
	.top-menu ul li:last-child{
		padding-left: 25px !important;
	}
	.common-banner{
		height: 350px !important;
	}
	.experience-banner h3{
		font-size: 15px;
		line-height: 20px;
	}
	.experience-banner h1{
		font-size: 20px;
		line-height: 25px;
	}
		
}
/*******************************************/



/* defualt resp */

@media screen and (min-width: 1024px) and (max-width: 1550px){
	.hero-banner .slick-track{
		height: calc( 100vh - 50px );
	}
	.hero-banner{
		height: calc( 100vh - 50px );
		min-height: 100%;
	}
	.common-banner{
		height: calc( 100vh - 100px );
	}
}


@media screen and (max-width: 1400px){
	.first-sec h3{
		font-size: 30px;
    	line-height: 40px;
	}
	.first-sec h1{
		font-size: 50px;
	    line-height: 60px;
	    margin-top: 25px;
    	margin-bottom: 50px;
	}
	p.first-para {
	    margin-bottom: 30px;
	}
	.third-sec{
		padding-top: 70px;
	}
	.first-sec p{
		font-size: 16px;
		line-height: 26px;
	}
	.nav-link span{
		font-size: 14px !important;
		letter-spacing: 1px;
	}
	/*.common-banner{
		min-height: calc( 100vh - 120px );
	}*/
	.banner-bottom-ext{
		padding:60px 0px !important;
	}
	.about-title-sec p{
		margin-bottom: 0px !important;
	}
	.about-det-title h5{
		font-size: 17px !important;
		line-height: 25px !important;
	}
	.pillars-sec {
	    padding-top: 60px !important;
	}
	.pillars-listing{
		column-gap: 60px !important;
	}
	h3.event-title{
		font-size: 30px !important;
		line-height: 38px !important;
	}
	.logo-side img{
		width: 125px;
	}
}

@media screen and (max-width: 1600px){
	.button-on-banner{
		bottom: 20%;
	}
}

@media screen and (max-width: 1200px){
	.about-detailed-sec{
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.donation-sec{
		margin-top: 60px !important;
	}
	.dontaion-link-text{
		font-size: 32px !important;
		line-height: 42px !important;
	}
	.event-title-sec{
		padding-bottom: 50px !important;  
	}
	.common-btn a, .banner-button a{
		font-size: 15px !important;
		line-height: 17px !important;
	}
	.common-btn, .banner-button{
		width: 145px;
    	height: 35px;
	}
	.single-cat-list{
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.banner-left-resp{
		background-position: right;
	}
	.banner-right-resp{
		background-position: left;
	}
	.button-on-banner{
		bottom: 15%;
	}
	.each-single-cats img{
		height: 350px;
	}
}

@media screen and (max-width: 1100px){
	.each-events{
		min-height: 370px !important;
		margin-bottom: 70px !important;
		grid-template-columns: 40% 1fr !important;
	}
	.image-boxes h4{
		font-size: 16px;
    	line-height: 26px;
	}
	h3.common-title{
		font-size: 30px;
    	line-height: 40px;
	}
	.third-sec p{
		font-size: 16px;
    	line-height: 29px;
    	margin-top: 20px;
	}
	.fourth-sec{
		padding-top: 55px;
		padding-bottom: 60px;
	}
	.first-sec h1 {
	    font-size: 35px;
	    line-height: 45px;
	    margin-top: 23px;
	    margin-bottom: 20px;
	}
	.first-sec h3, .common-banner h3.banner-title{
		font-size: 25px;
		line-height: 35px;
	}
	.first-sec{
		padding-bottom: 60px;
	}
	.fifth-sec{
		padding-bottom: 50px;	
	}
	h4.blog-title{
		font-size: 15px;
		line-height: 20px;
	}
	.sixth-sec .each-blogs img{
		max-height: 200px;
	}
	.footer-bottom h3{
		padding-bottom: 5px;
	}
	.medium-title{
		font-size: 25px;
    	line-height: 35px;
	}
	.big-title, .common-banner h1.banner-main-title{
		font-size: 35px;
    	line-height: 45px;
    	margin-top: 10px;
    	margin-bottom: 27px;
	}
	.image-content{
		padding-top: 60px !important;
	}
	.each-exp-box{
		width: 47% !important;
	}

}

/* @media screen and (min-width: 992px){
	.bottom-menu.show-now{
		display: none !important;
	}
} */

@media screen and (max-width: 992px){
	h3.event-title {
	    font-size: 25px !important;
	    line-height: 34px !important;
	}
	.cons-image-title .adopt-title h5{
		font-size: 15px !important;
		line-height: normal !important;
	}
	.bottom-menu{
		display: none;
	}
	.top-menu ul li{
		padding: 12px 15px;
	}
	.navbar-toggler span {
	   	width: 37px !important;
	    height: 2px !important;
	    display: block !important;
	    background: #fff !important;
	    border: none !important;
	}
	.navbar-toggler span.middle{
	    margin: 6px 0px;
	}
	.navbar-toggler{
	    display: flex;
	    flex-direction: column;
	    align-items: end;
	    margin-top: 80px;
	}
	.testimonial-slider::before{
		width: 40px;
    	height: 40px;
    	left: 30px;
	}
	.testimonial-slider::after{
		width: 40px;
    	height: 40px;
    	right: 30px;
	}
	/*.common-banner{
		min-height: 550px;
	}*/
	.apex-member {
    	padding-top: 60px !important;
	}
	.apex-member-club .common-title {
	    padding-bottom: 39px !important;
	    padding-top: 50px !important;
	}
	.banner-bottom-ext{
		padding:40px 0px !important;
	}
	.top-menu ul li{
		display: block;
	}
	.top-menu ul{
		display: flex;
	}
	.menu-side {
	    position: static;
	}
	.top-menu ul li:hover {
	    padding-top: 6px;
	}
	.dontaion-link-text{
		font-size: 25px !important;
		line-height: 35px !important;
	}
	section.funding{
		padding-top: 50px !important;
		padding-bottom: 60px !important;
	}
	.full-listing{
		grid-template-columns: 1fr 1fr !important;
	}
	.cat-menu-side {
		position: static !important;
	}
	.rotate-now .top {
		transform: rotate(45deg) translate(0px, 0px);
	}
	.rotate-now .bottom {
		transform: rotate(-45deg) translate(-4px, 3px);
	}
	.rotate-now .middle {
		transform: scaleX(0);
	}
	.navbar-toggler{
		position: absolute;
		right: 15px;
	}
	.bottom-menu.show-full-menu{
		display: block;
	}
	.bottom-menu.show-full-menu ul li a span{
		font-size: 20px !important;
    	line-height: 30px;
	}
	#menu-main-menu{
		position: absolute;
		display: flex;
		width: 80%;
		height: 100vh;
		left: 0;
		top: 0;
		padding-top: 60px;
		background-color: #E37222;
		padding-left: 30px;
		padding-right: 15px;
		overflow-y: scroll;
		padding-bottom: 30px;
		z-index: 2;
		flex-wrap: nowrap;
	}
	.donation-container h6{
	    font-size: 25px !important;
	    line-height: 35px !important;
	}
	.tab-inner-buttons{
		font-size: 13px;
		line-height: 15px;
	}
	.tab-inner-buttons a div{
		height: 35px;
		column-gap: 10px;
	}
	.button-on-banner{
		bottom: 10%;
	}
}


@media screen and (max-width: 1024px){
	.hero-banner{
		height: 550px;
		min-height: 100%;
	}
	.banner-slider{
		height: 100%;
	}
	.banner-slider .slick-track, .banner-slider .slick-list{
		height: 100% !important;
	}
	.testimonial-slider{
		padding: 0px 100px;
	}
	h3.news-sub-title{
		font-size: 20px !important;
		line-height: 30px !important;
	}
	.news-single-first-sec{
		padding-bottom: 50px !important;
	}
	.adoption-ways{
		grid-template-columns: repeat(3, 1fr) !important;
		row-gap:35px;
	}
	.our-cats-tab-sec {
	    padding-bottom: 60px !important;
	}
	.adoption-options-sec{
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}
	.adoption-options-sec{
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
	.adopt-cat-sec{
		padding: 80px 0px !important;
	}
	.common-banner{
		height: 550px;
	}

	
}

@media screen and (max-width: 850px){
	.conservation-boxes{
		flex-wrap: wrap;
		justify-content: center;
		row-gap:25px;
	}
	.conservation-each-box{
		width: 45%;
	}
	.common-btn, .banner-button{
		width: 140px;
		height: 35px;
	}
	.common-btn a, .banner-button a {
	    font-size: 13px !important;
	    line-height: 17px !important;
	}
	.footer-menu-col{
		width: 100%;
		text-align: center;
	}
	.share-options {
	    justify-content: center;
	}
	.club-listing{
		grid-template-columns: 1fr !important;
		row-gap:30px;
	}
	.join-cat {
	    grid-template-columns: 1fr !important;
	    row-gap:30px;
	}
	.lion-image img{
		width: 60%;
	}
	p.join-para{
		max-width: fit-content !important;
	}
	.single-parters{
		padding-top: 60px !important;
	}
	.parters-listing{
		grid-template-columns: repeat(2, 1fr) !important;
		row-gap:20px !important;
	}
	.grid-view-sonservation{
		grid-template-columns: repeat(3, 1fr) !important;
	}

}

@media screen and (min-width: 768px){
	.d-lg-none{
		display: none !important;
	}

}


@media screen and (max-width: 768px){
	.gift{
		grid-template-columns: repeat(2, 1fr) !important;
		row-gap:60px;
		padding-top: 40px !important;
    	padding-bottom: 60px !important;
	}
	.adopt-cat-sec {
	    padding: 50px 0px !important;
	}
	.adopt-card{
		grid-template-columns: 1fr !important;
		row-gap:20px;
	}
	.about-cat-sec-single p.common-para{
		margin-top: 35px !important;
    	margin-bottom: 45px !important;
	}
	.adopt-card .image-side img{
		width: 75% !important;
	}
	.adopt-para{
		padding-bottom: 30px !important
	}
	.about-detailed-sec{
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.single-parters{
		padding-top: 50px !important;
		padding-bottom: 50px !important;
	}
	.image-boxes{
		grid-template-columns: 1fr 1fr;
		column-gap: 30px;
		row-gap:30px;
	}
	.image-boxes h4{
		bottom: 20px;
	}
	.third-sec p{
		padding:0px;
	}
	.third-sec p{
		font-size: 13px;
		line-height: 23px;
		margin-top: 15px;
	}
	.third-sec{
		padding-top: 50px;
	}
	.terms-submit{
		flex-direction: column;
		row-gap:15px;
	}
	.fourth-sec{
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.video-sec-front{
		column-gap: 15px;
	}
	.first-sec p{
		font-size: 13px;
		line-height: 23px;
		margin-bottom: 15px;
	}
	.first-sec{
		padding-bottom: 50px;
	}
	.conservation-each-box a{
		 font-size: 15px;
	}
	.sixth-sec .news-blogs{
		column-gap: 20px;
	}
	.logo-side img{
		width: 45%;
	}
	.top-menu li a{
		font-size: 11px !important;
	}
	.bg-color-4 img {
	    width: 18px;
	    height: 18px;
	}
	.top-menu ul li {
	    padding: 6px 9px;
	}
	.footer-bottom{
		text-align: center;
	}
	.share-options{
		justify-content: center;
	}
	.sixth-sec .news-blogs{
		grid-template-columns: 1fr 1fr;
		row-gap:40px;
	}
	.sixth-sec .news-blogs .each-blogs:last-child{
		display: none;
	}
	.second-para{
		display: none;
	}
	.full-blog-btn{
		display: none;
	}
	.banner-slider .slick-arrow{
		top: unset;
		bottom: 90px;
	}
	.image-boxes h4 {
	    font-size: 19px;
	    line-height: 30px;
	}
	.subscriber{
		grid-template-columns: 1fr;
		row-gap:20px;
	}
	.video-sec-front{
		grid-template-columns: 1fr;
		row-gap:30px;
		padding: 0px 60px;
	}
	footer {
	    padding-top: 20px;
	}
	.share-options img{
		width: 40px;
    	height: 30px;
	}
	ul.terms-privacy{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.display-options ul li{
		font-size: 13px !important;
	    line-height: 23px !important;
	    font-family: lato-R !important;
	    text-align: left !important;
	}
	.terms-privacy li:first-child{
		padding-right: 8px;
		border-right:1px solid #fff;
		margin-bottom: 0px;
	}
	.terms-privacy li:last-child{
		padding-left:8px;
		margin-bottom: 0px;
	}
	a.read-more{
		font-size: 15px;
	    line-height: 16px;
	    letter-spacing: 1.5px;
	    padding: 13px 22px;
	}
	p.blog-content{
		margin-bottom: 35px;
	}
	p.mobile-read span{
		width: 38px;
	    height: 38px;
	    color: #fff;
	    background: #000;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    font-size: 23px;
	}
	p.mobile-read{
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 15px;
		width: fit-content;
	}
	p.common-para, .each-pillars p, .about-pillars-title-sec p{
		font-size: 13px !important;
	    line-height: 23px !important;
	    margin-bottom: 15px;
	}
	.pillars-listing img{
		width: 60px !important;
		height: 60px !important;
	}
	.each-pillars p{
		margin-bottom: 0px !important;
	}
	.each-pillars h5{
		font-size: 20px !important;
		margin-bottom: 0px !important;
	}
	.cat-small-container{
		column-gap: 30px !important;
	}
	.membership-boxes{
		grid-template-columns: 1fr 1fr !important;
		row-gap:30px;
	}
	.each-membership-box .common-btn{
		margin-top: 20px !important;
	}
	.navbar-toggler{
		margin-top: 65px;
	}
	.about-detailed-sec{
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.pillars-listing{
		grid-template-columns: 1fr !important;
	}
	.big-button{
		width: 300px !important;
		height: 48px !important;
	}
	.big-button a{
		font-size: 13px !important;
		line-height: 15px !important;
	}
	.pillars-sec{
		padding-top: 50px !important;
	}
	.apex-member {
	    padding-top: 50px !important;
	}
	.join-today-membership{
		padding: 50px 0px !important;
	}
	p.join-para{
		padding-bottom: 30px !important;
		padding-top: 30px !important;
	}
	.grid-view-sonservation{
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.each-events{
		grid-template-columns: 1fr !important;
	}
	.each-events .event-image{
		margin-bottom: 15px;
	}
	.event-btn{
		margin-top: 20px;
	}
	.event-title-sec {
	    padding-bottom: 35px !important;
	}
	.our-cats-tab-sec {
	    padding-bottom: 50px !important;
	}
	.booking-button{
		width: 180px !important;
        height: 50px !important;
        margin-top: 30px !important;
	}
	.discription{
		padding-top: 40px !important;
	}
	.common-title.color-black{
		padding-top: 30px !important;
    	padding-bottom: 35px !important;
	}
	.discription .common-para{
		padding-bottom: 0px !important;
	}
	.list-of-experiences{
		padding-bottom: 50px !important;
	}
	.list-of-experiences, .second-day {
	    padding-top: 50px !important;
	}
	.exp-content-side .common-para{
		padding-bottom: 0px !important;
	}
	.first-explist.facilities .common-title{
		padding-bottom: 10px !important;
	}
	.first-explist.facilities .read-more {
	    margin-top: 40px !important;
	}
	.first-explist.good-to-know{
		padding-top: 60px !important;
	}
	ul.exp-listing li{
		font-size: 13px !important;
	    line-height: 23px !important;
	    font-family: lato-R;
	}
	.display-options{
		column-gap: 25px !important;
	}
	.booking-button a{
		 font-size: 15px !important;
		 line-height: 22px !important;
	}
	.video-banner-sec{
		padding-bottom: 50px !important;
	}
	.display-options, .display-options .common-para{
		text-align: center !important; 
	}
	p.read-more{
		margin:auto;
	}
	ul.exp-listing li{
		text-align: left !important;
	}
	.nav.nav-pills{
		display: none !important;
	}
	.single-cat-list{
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.banner-slider .slick-next{
		right: 45px;
	}
	.banner-slider .slick-next::before, .banner-slider .slick-prev::before{
		width: 30px;
		height: 30px;
	}
	.footer-menu-side{
		text-align: left !important;
		width: 100%;
	}
	.footer-bottom{
		padding: 40px 0px;
	}
	.footer-top {
		padding-top: 70px;
	}
	.banner-slider img{
		object-position: right;
	}
	.banner-right img{
		object-position: right;
	}
	.tab-content {
	    margin-top: 40px;
	    margin-bottom: 20px;
	}
	.sixth-sec .each-blogs img{
		height: 200px;
	}

}

@media screen and (max-width: 650px){
	.related-cats .cat-belongs-to{
		grid-template-columns: 1fr 1fr;
	}
	.related-cats .cat-belongs-to .each-tab-cats:last-child{
		display: none !important;
	}
	#pills-all .cat-tab-image{
		height: 300px;
	}
}


@media screen and (max-width: 575px){
	
	.navbar-toggler span {
	    width: 37px;
	    height: 2px;
	}
	.top-menu{
		position: absolute;
	    right: 0;
	    top: 0;
	}
	.header-main.header-container{
		padding-top: 40px;
		align-items: center;
	}
	.top-menu ul{
		flex-wrap: wrap;
	}
	.testimonial-slider {
	    padding: 0px 80px;
	}
	.testimonial-slider::before, .testimonial-slider::after{
		top: -25px;
	}
	.fourth-sec .cat-container {
	    padding: 0px 40px;
	}
	.video-sec-front{
		padding: 0px 30px;
	}
	.cat-small-container{
		row-gap:20px;
		flex-wrap: wrap;
	}
	section.membership-box {
	    padding-top: 60px !important;
	    padding-bottom: 50px !important;
	}
	.each-exp-box{
		width: 100% !important;
	}
	.new-grid-images{
		grid-template-columns: 1fr !important;
	}
	.adoption-ways{
		grid-template-columns: 1fr !important;
	}
	.display-options{
		grid-template-columns: 1fr !important;
	}
	.exp-image-side img{
		width: 75% !important;
	}
	.form-select{
		font-size: 16px !important;
		line-height: 16px !important;
	}
	.form-select{
		background-size:30px !important;
	}
}

@media screen and (max-width: 479px){
	.exp-image-side img, .adopt-card .image-side img{
		width: 100% !important;
	}
	.gift{
		grid-template-columns: 1fr !important;
		row-gap:60px;
	}
	.conservation-each-box{
		width: 100%;
	}
	.image-boxes{
		grid-template-columns: 1fr;
	}
	.first-sec{
		padding-bottom: 45px;
	}
	.sixth-sec .news-blogs{
		grid-template-columns: 1fr;
	}
	.sixth-sec .each-blogs img {
	    max-height: 230px;
	}
	.sixth-sec{
		padding-bottom: 60px;
	}
	.logo-side img {
	    width: 45%;
		margin-top: 60px;
	}
	#menu-main-menu{
		width: 100% !important;
	}
	/* .navbar-toggler.rotate-now{
		margin-top: 0px
	} */
	.testimonial-slider::before{
		width: 20px;
    	height: 20px;
    	left: 10px;
	}
	.testimonial-slider::after{
		width: 20px;
    	height: 20px;
    	right: 10px;
	}
	.testimonial-slider {
	    padding: 0px 10px;
	}
	.bottom-menu.show-full-menu{
		align-items: center;
	}
	.mem-image-sec{
		width: 100% !important;
	}
	.about-detailed-sec{
		grid-template-columns: 1fr !important;
	}
	.each-box-about-det{
		max-height: fit-content !important;
	}
	.lion-image img{
		width: 100% !important;
	}
	.parters-listing{
		grid-template-columns: 1fr !important;
	}
	.grid-view-sonservation{
		grid-template-columns: 1fr !important;
	}
	.main-news-image img{
		width: 100% !important;
	}
	.full-listing{
		grid-template-columns: 1fr !important;
		row-gap:30px !important;
	}
	.single-cat-list{
		grid-template-columns: 1fr !important;
	}
	#menu-main-menu{
		justify-content: center;
	}
	.navbar-toggler.rotate-now {
	    margin-top: 0px;
		z-index: 99;
	}
	.each-single-cats img{
		height: 380px;
		object-position: top;
	}
	.related-cats .cat-belongs-to{
		grid-template-columns: 1fr;
	}
	.related-cats .cat-belongs-to .each-tab-cats:last-child{
		display: block !important;
	}

}

@media screen and (max-width: 390px){
	.fourth-sec .cat-container {
	    padding: 0px 20px;
	}
	.video-sec-front{
		padding: 0px 0px;
	}
	.membership-boxes{
		grid-template-columns: 1fr !important;
	}
	.big-button{
		width: 260px !important;
	}

}

@media screen and (max-height: 450px){
	.hero-banner, .common-banner{
		height: calc(100vh - 20px);
	}
}




@media (max-width: 768px) {
    .cats-tab-view {
        display: none; 
    }
    .dropdown-category {
        display: flex; 
        text-align: center;
        width:fit-content;
        margin:auto; 
        align-items: center;
		justify-content: center;
		column-gap: 15px;
		position: relative;
    }
    .dropdown-content {
        display: none; 
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        top: 50px;
    }
    .dropdown-content a {
        display: block;
        padding: 12px 16px;
        text-decoration: none;
        color: #333;
    }
}