/* ! Reset */
body, html{ font-family: 'Poppins', Arial, Helvetica, sans-serif; font-size: 16px; box-sizing: border-box;margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
h1,h2,h3,h4,h5,h6, p, ol, ul{margin: 0 0 1rem 0;padding: 0;}
ol,ul{list-style-type: none;}
img{height: auto;}
h1{font-size: 4rem;}
h2{font-size: 3rem;}
h3{font-size: 2rem;}
h4{font-size: 1rem;}
h5{font-size: 0.8rem;}
h6{font-size: 0.6rem;}
a{text-decoration:none}

:root { --menu-bg: #e9f5e9ff; --menu-color: #000;
--body-bg: #cffecf; --h1-color: #4cad4cff;   
}

h1, .text-1 {font-size: 3.5rem;margin-bottom:0.5rem}
h2, .text-2 {font-size: 2.4rem;margin-bottom:1rem}
h3, .text-3  {font-size: 1.8rem;margin-bottom:1rem}
h4, p, .text-4 {font-size: 1rem;margin-bottom:1rem; line-height: 1.5;}
a{color: coral;}

/* ! Button System */
.button { 
    font-size: 1rem; text-transform: uppercase; background: coral; color: #fff;
    text-decoration: none;padding: 14px 25px; display: inline-block;
    border-radius: 4px; font-weight: 700;
}
.button:hover{ background: #77e4a8ff; }

/* ! Grid System */
.grid { margin: 0 auto; padding: 0 15px; max-width: 1250px; display: flex; flex-flow: row; flex-wrap: wrap;}
.grid--center{justify-content: center;align-items: center;}
.col{ flex: 1;}

[class*='col-'] { position: relative;padding: 0 15px;}
.grid .grid [class*='col-'] {padding: 0px;}

.col-20{ width: 20%;}
.col-25{ width: 25%;}
.col-30{ width: 30%;}
.col-40{ width: 40%;}
.col-33{ width: 33.33%;}
.col-50{ width: 50%;}
.col-60{ width: 60%;}
.col-70{ width: 70%;}
.col-80{ width: 80%;}
.col-100{ width: 100%;}

@media (max-width: 991px) {
    .tab-20 { width: 20%; }
    .tab-25 { width: 25%; }  
    .tab-33 { width: 33.33%; }
    .tab-50 { width: 50%; }
    .tab-100 { width: 100%; }
}

@media (max-width: 768px) {
    [class*='col-'] { width: 100%;}
    .sma-20 { width: 20%; }
    .sma-25 { width: 25%; }
    .sma-33 { width: 33.33%; }
    .sma-50 { width: 50%; }
    .sma-100 { width: 100%; }
}

/* ! Helpers  */

.mt-0{margin-top: 0 }
.mt-1{margin-top: 10px}
.mt-2{margin-top: 20px}
.mt-3{margin-top: 40px}
.mt-4{margin-top: 100px }

.mb-0{margin-bottom: 0}
.mb-1{margin-bottom: 10px}
.mb-2{margin-bottom: 20px}
.mb-3{margin-bottom: 40px}
.mb-5{margin-bottom: 50px}
.mb-4{margin-bottom: 100px}

.ml-0{margin-left: 0}
.ml-1{margin-left: 10px}
.ml-2{margin-left: 20px}
.ml-3{margin-left: 40px}
.ml-4{margin-left: 100px}

.mr-0{margin-right: 0}
.mr-1{margin-right: 10px}
.mr-2{margin-right: 20px}
.mr-3{margin-right: 40px}
.mr-4{margin-right: 100px}

.p-0{padding: 0}
.p-1{padding: 10px}
.p-2{padding: 20px}
.p-3{padding: 40px}
.p-4{padding: 100px}

.pt-1{padding-top: 10px;}
.pt-2{padding-top: 20px;}
.pt-3{padding-top: 40px;}
.pt-4{padding-top: 15vh;}

.pb-1{padding-bottom: 10px;}
.pb-2{padding-bottom: 20px;}
.pb-3{padding-bottom: 40px;}
.pb-4{padding-bottom: 15vh;}

.spacer{height:80px;}
.divider{height:40px;}
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.img-res { width: 100%; height: auto; margin-bottom: 20px;vertical-align: middle;}

.brd{border:solid,1px,red;}

.hidden{display:none;}