function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; if (evt) { evt.currentTarget.className += " active"; } } // Activate the first tab by default document.addEventListener("DOMContentLoaded", function() { document.querySelector(".tablinks").click(); });
.asia-button::before, .africa-button::before, .americas-button::before {margin-right: 8px; font-size: 1em; display: inline-block; vertical-align: middle; padding-bottom:5px;} .asia-button::before {content: '\1F30D'; /* Globe icon for Asia & Oceania 🌏 */} .africa-button::before {content: '\1F30E'; /* Globe icon for Africa 🌍 */} .americas-button::before {content: '\1F30F'; /* Globe icon for Americas 🌎 */} .cstmtb{padding-top:35px;} .et-last-child .et_pb_code_inner{display: flex; margin:0 auto; width: 73%;} .taibwer{display:flex; justify-content:center; border-radius:20px;} .taibwer button {font-weight: bold; width: 275px!important; background-color: #e2e2e2!important; cursor: pointer; padding: 0px 30px; font-size: 21px; color: #064f93; border-radius: 6px; border-radius: 40px;} .taibwer button:hover {color: #fefeff; background-color: #064f93 !important;} .tabcontent{border: none;} .cntry-lst a{font-size: 14px; line-height: 35px;} #cntry2, #cntry3, #cntry4{ text-align: center; width: 100%; background-color: #f8f8f8;border: 2px solid #064f93; border-radius: 30px; box-shadow: rgb(0 0 0 / 0%) 0px 2px 4px, rgb(0 0 0 / 29%) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; padding-top: 35px;} button.tablinks.active {border-bottom: solid 5px #ededed; color: #fefeff; background-color: #064f93 !important;} ul.cntry-lst{border-right: 1px solid #064f93;} ul.cntry-lst:last-child{border:none;} @media only screen and (max-width: 600px) { .et-last-child .et_pb_code_inner {width: 100%;} .taibwer button{font-size: 14px; display: inline-grid;} .asia-button::before, .africa-button::before, .americas-button::before {font-size: 1.6em; padding-bottom: 0px;} ul.cntry-lst{border-right:none;} #cntry2, #cntry3, #cntry4{padding-top:15px; border-radius: 12px;} button.tablinks.active{border-bottom: solid 5px #ffffff;} .taibwer{display: flex; height: 82px; padding: 0px;} .taibwer button{padding-top: 9px!important; height: 62px; font-size:11px; padding: 0px 9px; border-radius: 13px; font-weight: bold; height: 70px; margin: 2px;} .cntry-lst a{font-size:11px;} }