@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

* {margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, select, input, option { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; }
html { -webkit-text-size-adjust: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
img {height: auto;max-width: 100%;display: block;}
body {font-family: 'Roboto', sans-serif;font-size: 16px;}
.container {max-width: 100%;margin: 0 auto;padding-left: 10%;padding-right: 10%;}
a {text-decoration: none;display: block;}
h2 {font-size: 40px;letter-spacing: 1px;text-transform: uppercase;color: #ffffff;font-weight: 700;}

.stellar {background-repeat: no-repeat;background-position: center;background-size: cover;width: 100%;text-align: center;padding: 2.5% 0;}
.title{display: inline-block;}
.title h2 {background-color: #41a350;padding: 20px 60px;clip-path: polygon(0% 0%, 89% 0%, 99% 100%, 10% 100%);}
.stellarWrappar {display: flex;flex-wrap: wrap;padding: 30px 0 0;align-items: center;}
.stellarLogo {width: calc(27% - 7px);}
.stellarMap {width: calc(73% + 7px);padding-left: 30px;}
.stellarMap img {display: block;margin: 0 auto;}
.stellarLogo ul li .logo a {background-color: #f0f0f0;border: 2px solid #41a350;border-radius: 10px;padding: 20px;margin-bottom: 20px;min-height: 170px;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
.stellarLogo ul li .logo a img {display: block;margin: 0 auto;}
.stellarLogo ul li {margin-bottom: 35px;list-style: none;}
.stellarLogo ul li:last-child {margin-bottom: 0;}
.stellarLogo ul li:nth-child(2) .logo a {border: 2px solid #306bac;}
.stellarLogo ul li:nth-child(3) .logo a {border: 2px solid #ed2840;}
.stellarLogo ul li:nth-child(2) .link a {background-color: #306bac;}
.stellarLogo ul li:nth-child(3) .link a {background-color: #ed2840;}
.link a {font-size: 24px;letter-spacing: 1px;text-transform: uppercase;color: #ffffff;font-weight: 400;background-color: #41a350;border-radius: 23px;max-width: 281px;margin: 0 auto;text-align: center;padding: 8px;}



@media (max-width:1400px) {
    .title h2 {
        font-size: 30px;
        padding: 15px 50px;
    }
    .container {
        padding-left: 8%;
        padding-right: 8%;
    }
    .stellar {padding: 2% 0;}
.stellarLogo ul li .logo a {min-height: 120px; margin-bottom: 25px;}
.link a {font-size: 22px;max-width: 220px;}
.stellarLogo ul li .logo a {margin-bottom: 20px;}
.stellarLogo ul li {margin-bottom: 24px;}
.stellarMap{padding-left: 60px;}

}

@media (max-width:1080px) {
    .stellar {padding: 3% 0;}
    .container {
        padding-left: 5%;
        padding-right: 5%;
    }
    .title h2 {
        font-size: 30px;
        padding: 20px 50px;
    }
.stellarLogo ul li .logo a {padding: 20px;margin-bottom: 14px;min-height: 85px;}
.link a {font-size: 16px;max-width: 165px;}
.stellarLogo ul li {margin-bottom: 20px;}
.stellarMap{padding-left: 30px;}
}

@media (max-width:991px){.title h2{font-size: 25px;padding: 16px 36px;}
  .link a {font-size: 14px;max-width: 144px;}
    .stellarLogo ul li {margin-bottom: 18px;}
}


@media (max-width:767px) {
.title {padding-top: 60px;}
.title h2 {padding: 20px 60px 20px 70px;clip-path: polygon(0% 0%, 89% 0%, 99% 100%, 10% 100%);font-size: 24px;}
.stellarWrappar {padding: 30px 0;}
.stellarLogo {
    width: 100%;
}
.stellarLogo ul{
    display: inline-block;
}
.stellarLogo ul li .logo a {
    padding: 12px;
}
.stellarLogo ul li {margin-bottom: 25px;}

.link a {font-size: 20px;max-width: 190px;padding: 5px;}
.stellarMap {width: 100%;padding-left: 0;padding-top: 30px;}
}

@media (max-width:575px){
    .title h2 {    font-size: 22px;
        padding: 20px 55px;}

    .stellarLogo ul li .logo a {
        padding: 20px;
        margin-bottom: 30px;
        min-height: 100px;
    }
}


@media (max-width:480px) {
.title h2 {font-size: 20px;padding: 20px 50px 20px 60px;}
}

@media (max-width:356px) {
.title h2 {padding: 20px 40px;}
.link a {
    font-size: 18px;
}
.stellarLogo ul li .logo a {
    margin-bottom: 24px;
}
.stellarLogo ul li {
    margin-bottom: 20px;
}
}