/* Fix: Bootstrap 5 .row > * sets width:100% which breaks flex-column centering */
.sec7 .row.flex-column > * {
    width: auto;
    max-width: none;
    text-align: center;
}

.sec7 h2 {
    max-width: 800px;
}

@media all and (max-width: 991px){
	h1{font: 900 33px/42px Avenir;}
	h2{font: 900 18px/24px Avenir;}
	h2 br{display: none;}
	h3{margin-bottom: 30px!important;font: 900 24px/30px Avenir;}
	h4{font: 900 18px/22px Avenir;}
	h5{font: 900 20px/24px Avenir;}
	p{font: 600 14px/20px Nunito!important;}
	ul.list li{padding-left: 10px;font: 600 14px/20px Nunito!important;}
	ul.list li:after{width: 5px;height: 5px;top: 8px;}
	.btn-custom{font: 600 14px/14px Nunito;}
	section{padding: 50px 0!important;}
	.sec0 .ttl1{font: 300 16px/20px Nunito;}
	.sec0 .ttl2{font: 600 16px/20px Nunito;}
	.sec0 .ttl3{font: 900 24px/30px Avenir;}
	.sec0 .arrow{width: 60px;height: 120px;right: 0;bottom: -120px;}
	
	.sec1 .ttl1{font: 600 16px/20px Nunito;}
	.img_wrap{height: auto!important;margin-bottom: 20px!important}
	.sec1 .img_wrap{height: 300px!important}
	.sec1 .img_wrap img{min-width: 100%;height: auto;}
	.sec2 .ttl1{margin-bottom: 20px;font: 600 18px/22px Nunito;}
	.sec2 .img_wrap{height: 300px!important}
	.sec3 .ico{width: 50px;min-width: 50px;height: 50px;margin-bottom: 15px}
	.sec3 .ico svg{width: 25px;height: 25px;}
	.sec3 .row .col{margin-bottom: 20px}
	.sec3 h5{display: inline;}
	.sec4{padding: 0!important;}
	.sec5 .ttl2{font: 600 18px/22px Nunito;}
	.sec7{height: auto!important;padding-top: 136px!important}
	.sec7 .btn-orange{margin-bottom: 20px;}
	.sec8{text-align: center;}
	.sec8 h4{font: 900 24px/30px Avenir;}
	footer .top_box .ttl{padding: 0 10px;font: 900 18px/22px Avenir;}
	footer .bot_box .ttl{font: 300 14px/20px Nunito;}
}

@media (max-width: 768px){
  .sec4 .col{padding: 50px 24px;}
}