:root {

--yellow:   #f7ff05;
--white:    #fff;
--purple:   #993f99;
--greyDark: #272727;

}

.hero-container                         { background-size: cover; }
.hero-container__breadcrumbs            { padding: 20px 0; color: var(--white); }
.hero-container__breadcrumbs ul         { margin: 0; padding: 0; }
.hero-container__breadcrumbs li         { font-weight: 600; }
.hero-container__breadcrumbs a          { color: var(--white); transition: all 0.3s; }
.hero-container__breadcrumbs a:hover    { color: var(--yellow); }

.hero-container__main                   { background: rgba(0,0,0,0.7); padding: 80px 0 60px; }
.hero-container__title                  { }
.hero-container__title h1               { margin: 0; line-height: 1; font-weight: 600; }
.hero-container__title__logo            { font-size: 22px; color: var(--white); margin: 0 0 40px; }
.hero-container__title__logo img        { width: 60px; }
.hero-container__title__main            { font-size: 70px; color: var(--white); margin: 0 0 20px; line-height: 0.8; letter-spacing: -0.01em; }
.hero-container__title__subtitle        { color: var(--yellow); text-transform: uppercase; font-size: 40px; position: relative; padding: 0 0 40px;
    &:after                             { width: 65px; content: ""; height: 2px; background: var(--yellow); display: block; position: absolute; bottom: 0; left: 0; }
}

.location-content                       { padding: 60px 0 40px; }
.location-content h2                    { color: var(--yellow); line-height: 1.2; }
.location-content p                     { color: var(--white); }
.location-content li                    { color: var(--white); }

.team-list                              { }
.team-list h2                           { color: var(--white); font-size: 2em; margin: 0 0 1em; line-height: 1.4; }
.team-list a                            { }
.team-list a:hover h3, .team-list a:hover .team-list__job-title { color: var(--purple); }
.team-list a:hover img                  { transform: scale(1.1); }
.team-list ul                           { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; gap: 40px; list-style: none; }
.team-list li                           { margin: 0; }
.team-list__img                         { overflow: hidden; }
.team-list img                          { display: block; margin: 0; transition: all 0.3s; }
.team-list h3                           { font-size: 1em; color: var(--yellow); margin: 1em 0 0; transition: all 0.3s; }
.team-list__job-title                   { color: var(--white); font-size: 0.8em; transition: all 0.3s; }

.section-offices                        { position: relative; z-index: 1; background: var(--greyDark); padding: 60px 0; }
.section-offices h2                     { color: var(--yellow); font-size: 2em; }
.section-offices ul                     { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 0; }
.section-offices__item                  { padding: 0; margin: 0; text-align: center;  }
.section-offices__item--current .section-offices__img { border-color: var(--yellow); }
.section-offices__item--current h3 { color: var(--yellow); }
.section-offices a                      { display: block; text-align: center; color: var(--white); text-decoration: none; }
.section-offices a:hover img            { transform: scale(1.1); } 
.section-offices__img                   { width: 180px; height: 180px; overflow: hidden; border-radius: 50%; border: 4px solid var(--white); margin: 0 auto 0.5rem; }
.section-offices__img img               { max-width: 100%; transition: all 0.3s; }

@media (max-width: 991px) {
    .team-list ul                       { grid-template-columns: repeat(3, 1fr); }
    .section-offices ul                 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 781px) {
    .hero-container__main               { padding: 40px 0 30px; font-size: 42px; }
    .hero-container__title__logo        { font-size: 18px; margin: 0 0 20px; }
    .hero-container__title__logo img    { width: 40px; }
    .hero-container__title__main        { font-size: 42px; }
    
    .location-content                   { padding: 20px 0 10px; }
    
    .team-list ul                       { grid-template-columns: repeat(2, 1fr); }
    .section-offices ul                 { grid-template-columns: repeat(2, 1fr); }
    .hero-container__title__subtitle    { font-size: 26px; }
    
    
}

@media (max-width: 600px) {
    .team-list ul                       { grid-template-columns: repeat(1, 1fr); }
    .section-offices ul                 { grid-template-columns: repeat(1, 1fr); }
}