:root {
    --hiu-blue: #607D8B;
    --hiu-orange: #EF7F1B;
    --hiu-pink: #FFAB91;
}


.country-pagination {
    top: 0%;
    right: 2%;
  }


.country-detail h3 {
    color: var(--hiu-blue);
    font-size: 40px !important;
    margin: 0;
    margin-bottom: 10px;
}

.country-detail p {
    font-size: 14px;
    color: #fff;
        margin: 0;
}

h3.country.section-title {
    color: white;
    position: relative;
    font-size: 50px;
    margin-bottom: 50px;
    color: #607d8b;
}

.country-detail.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    padding: 10px 10px;
}

.country-detail h3 {color: var(--hiu-orange) !important;font-size: 30px !important;}

.country-detail h3 small {font-size:45%;color:#fff;display:block;}


.country-detail .content {
    display: flex;
    flex-direction: column;
    justify-content: end;
    border-radius: 10px;
    background: #1a1511c7;
    padding: 10px 10px;
}


.box-three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.box-three .box h5 {
  color: #ef7f1b;
  font-size: 16px;
  margin-bottom: 8px;
}

.box-three .box h6 {
    color: #ffff;
    font-size: 14px;
    margin: 0;
        margin-bottom: 10px;
}
.box-three .box p {
    font-size: 12px;
    margin: 0;
    /* display:none; */
}
.box-three .box {
    background: #1a1511c7;
    padding: 10px;
    border-radius: 10px;
    height: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Tabs with small screens*/
@media (max-width: 1024px) {
	.country-detail.active {
    grid-template-columns: auto;
  
}
	 #countries {
        height: inherit !important;
        padding-top: 84px!important;
        padding-bottom: 40px!important;
    }
	.year-tab .ytc-title {
    font-size: 26px;
}
}

/* Mobile  with tabs */
@media (max-width: 767px) {
	.toggle-img img {
    height: auto !important;
}
    .text-nav p {
        font-size: 12px !important;
        text-align: center!important;
    }
	.country-detail h3 {
    color: var(--hiu-orange) !important;
    font-size: 20px !important;
	margin-bottom: 0px!important;
}
.country-detail p {
    font-size: 11px;	
	}
	
	.box-three .box h5 {
    font-size: 10px;
    margin-bottom: 5px;
}
	.box-three .box h6 {
    font-size: 8px;
	margin-bottom: 5px;	
	}
	.box-three {
    gap: 5px!important;
	}
	.country-detail.active { 
    gap: 5px;
	
}

    #countries {
        height: inherit !important;
        padding-top: 84px!important;
        padding-bottom: 40px!important;
    }
		
	.country-detail h3 small {font-size:60%;color:#fff;display:block;}	
		.p-buttons {
        margin-top: 80px!important;					
    }
	

    .pway-animation .p-title {
         margin-top:0px;
    }

	.box-three {
    grid-template-columns: auto auto auto !important;
}

	.year-content {
    height: auto;
}
#countries {
    height: auto;
    padding-top: 84px;
    padding-bottom: 20px;
}
		.country-detail.active {
    grid-template-columns: auto;
  
}
}