location.css

/*location css*/
/*header*/
.location-title{
    text-align: center;
}
 .location-title h1{
        font-size: 3.5rem;
         color: white;
        font-family:"Space Mono", monospace;
        font-weight: bold;
        position: absolute;
        left: 4rem;
        top:4rem;
        }
    .locations-list li h3{
        font-size: 1.5rem;
         font-family:"Space Mono", monospace;
        font-weight: bold;
        color: #495567;
    }
@media (max-width:769px){
    .location-title h1{
        position: absolute;
        top:3.3rem;
        right: 10%;
        font-size: 3rem;
    }
}


@media (max-width: 350px){
    .location-title h1{
        text-align: center;
         position: absolute;
        top:3.3rem;
        right: 15%;
        font-size: 2rem;
    }
}

/*header background in desktop mode*/
 header{
     background: url("assets/images/careers-locations-hero-desktop.jpg");
        background-repeat: no-repeat;
        background-size: cover;
 }
 /*header background in tablet mode*/
 @media (max-width: 1024px) {
    header{
      
   background: url("assets/images/careers-locations-hero-tablet.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  
    }
}
/*header background in mobile mode*/
 @media (max-width: 769px) {
    header{
   background: url("assets/images/careers-location-hero-mobile.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    
    }
}
/*Styling for the world map section*/
@media (min-width: 1100px){
    .world-map-container{
        max-width: 111rem;
        max-height: 600px;
    }
    .map-tablet , .map-mobile{
        display: none;
    }
}

.world-map{
    display: flex;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
   text-align: center;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.world-map-container{
    padding: 0 3.2rem;
    margin-top: 60px;
    width: 100%;
    max-height: 600px;
     
   
}
.maps{
    margin: auto;
    width: 100%;
    height: 100%;
   text-align: center;
        display: block;
    
}
.maps img{
    width: 100%;
    height: 543px;
    object-fit: contain;
}
@media (max-width:1099.98px){
    .map-desktop , .map-mobile{
        display: none;
    }
}
@media (max-width:769px){
    .world-map-container{
    padding: 0 2rem;
    margin-top: 60px;
    width: 100%;
    max-height: 200px;
}
    .map-desktop , .map-tablet{
        display: none;
    }
    .map-mobile{
        display: block;
    }
    .maps{
    margin: auto;
    width: 100%;
    height: 90%;
   text-align: center;
        display: block;
    
}
    .maps img{
    width: 100%;
    height: 200px;
    object-fit: contain;
}
}
/*Styling for the city listing in mobile mode of the world map */
.city-list-container{
    margin: 4rem 3rem;
    display: flex;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
    flex-direction: row;
    justify-content: space-between;
}
.city-question{
    font-size: 1.3rem;
    width: 330px;
}
.city-copy{
    width: 455px;
}
.messageUs{
  font-family: "Space Mono", monospace;
  height: 53px;
  width: 160px;
  text-align: center;
  background-color : #FCB72B;
  color: white;
  margin-top: 1rem;
  font-weight: bold;
  border : 3px solid #FCB72B;
}
.messageUs:hover{
  outline: none;
  color: #fcb72b;
  background-color: transparent;
  border-color: #fcb72b;
}
@media (max-width:1099.98px){
    .city-list-container{
    margin: 4rem 3rem;
    display: flex;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    text-align: center;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.city-question{
    text-align: center;
    font-size: 1.3rem;
    width: 455px;
}
}
@media (max-width:500px){
    .city-list-container{
    margin: 4rem .5rem;
}
    .city-question {
    text-align: center;
    width: 98%;
}
    .city-question h2{
    width: 98%;
    height: 96px;
    text-align: center;
    font-size: 2rem;
    line-height: 90%;
    }
.city-copy{
    width: 98%;
}
}
.location-list{
    width: 100%;
    margin-top: 2rem;
    text-align: center;
    display: flex;
    text-align: center;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.locations-list li {
    margin: 1rem 0;
    width: 335px;
    height: 72px;
    display: flex;
    text-align: center;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #FFF4DF;
}
@media (max-width:460px){
    .locations-list li {
        width: 220px;
    }
}
@media (max-width:360px){
    .locations-list li {
        width: 180px;
    }
     .locations-list li h3{
        font-size: 1.2rem;
    }
}
@media (min-width:769.1px) {
    .location-list{
        display: none;
    }
   
}