.flex {display:flex; }
.flex.gap10 {gap:10px}
.flex.gap20 {gap:20px}
.flex.gap30 {gap:30px}

.ac {align-items:center !important; }
.as {align-items:flex-start !important; }
.ad {align-items:flex-end !important; }
.jt {justify-content:flex-start !important; }
.jc {justify-content:center !important; }
.js {justify-content:space-between !important; }


.flex.col-2 > li {width:50%}
.flex.col-3 > li {width:33%}
.flex.col-4 > li {width:25%}
.flex.col-5 > li {width:20%}

.flex.col-2 > div {width:50%}
.flex.col-3 > div {width:33%}
.flex.col-4 > div {width:25%}
.flex.col-5 > div {width:20%}

.flex.col-4 > ul {width:25%}


.flex.wrap {flex-wrap:wrap}
.flex.gap10 {gap:10px}
.flex.gap20 {gap:20px}


.s_t {font-size:16px; color:#6F6F6F}

.box_100 {width:100%; display:inline-block}
.box_50 {width:50%; flex-shrink:0}

.border_10 {border-radius:10px}
.border_20 {border-radius:20px}


 
.t_color {  color:var(--main_c2) !important}
.t_color2 {  color:var(--main_c) !important}


.btn {background-color:var(--main_c);  font-size:17px; margin-top:30px; color:#fff; display:inline-block; padding:10px 40px; font-weight:300; border-radius:50px; cursor:pointer}
.btn:hover {background-color:var(--main_c2);   }

a.basic_btn {background-color:var(--main_c);  font-size:1em; margin-top:30px; color:#fff; display:inline-block; padding:10px 40px; font-weight:300; border-radius:50px; transition: all 0.3s ease-out;}
a.basic_btn:hover {background-color:var(--main_c2);   }

a.basic_btn2 {background-color:var(--main_c);  font-size:19px; margin-top:30px; color:#fff; display:inline-block; padding:15px 60px; font-weight:300; border-radius:50px; transition: all 0.3s ease-out;}
a.basic_btn2:hover {background-color:var(--main_c2); }



 @media all and (max-width:900px) {
	.flex {flex-wrap:wrap}
	.flex.col-3 > div {width:100%}
	.btn {  font-size:16px; margin-top:20px;  padding:7px 30px; }

}