// section spacing 
.ptb-110 { padding: 110px 0; }
.pb-110 { padding-bottom: 110px; }
.pt-110 { padding-top: 110px; }
.mtb-110 { margin: 110px 0; }
@media #{ $sm, $xs } {
    .ptb-110 { padding: 50px 0; }
    .mtb-110 { margin: 50px 0; }
    .pb-110 { padding-bottom: 50px; }
    .pt-110 { padding-top: 50px; }
}
@media #{ $md } {
    .ptb-110 { padding: 80px 0; }
    .pt-110 { padding-top: 80px; }
    .pb-110 { padding-bottom: 80px; }
    .mtb-110 { margin: 80px 0; }
}
// section innter spacing 
.pt-50 { padding-top: 50px; }
.pb-50 { padding-bottom: 50px; }
.mt-50 { margin-top: 50px; }
.mb-50 { margin-bottom: 50px; }
@media #{ $sm, $xs } {
    .pt-50 { padding-top: 30px; }
    .pb-50 { padding-bottom: 30px; }
    .mt-50 { margin-top: 30px; }
    .mb-50 { margin-bottom: 30px; }
    .mt-36 { margin-top: 12px; }
    .mb-36 { margin-bottom: 12px; }
}

// inner content spacing
.mt-36 { margin-top: 36px; }
.mb-36 { margin-bottom: 36px; }
.mt-32 { margin-top: 32px; }
.mb-32 { margin-bottom: 32px; }
.mt-24 { margin-top: 24px; }
.mb-24 { margin-bottom: 24px; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-18 { margin-top: 18px; }
.mb-18 { margin-bottom: 18px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }

//button and card padding
.p-24 { padding: 24px; }
.pt-24 {padding-top: 24px;}
.ptb-24 { padding: 24px 0; }
.plr-24 { padding: 0 24px; }
.p-18 { padding: 18px; }
.ptb-18 { padding: 18px 0; }
.plr-18 { padding: 0 18px; }
.p-16 {padding: 16px;}