.tech-area-demo {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
line-height: 1.2;
}
.tech-area-container {
font-family: 'Barlow Condensed', sans-serif;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: gainsboro;
width: 556px;
height: 350px;
box-shadow: none;
overflow: hidden;
transition: box-shadow 0.5s, background-color 0.5s;
}
.tech-area-container:nth-child(odd) {
justify-self: flex-end;
}
.tech-area-container:nth-child(even) {
justify-self: flex-start;
} .aquamarine:hover { background-color: #e97139;
color: white;
}
.rose:hover { background-color: #feca38;
}
.yellowish:hover { background-color: #8de6f8;
}
.horizon:hover { background-color: #e1add3;
} .tech-area-background {
height: 100%;
width: 350px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.tech-area-background img {
object-fit: cover;
height: 350px;
}
.tech-area-elements {
height: 350px;
width: 216px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.tech-area-elements h2,
.tech-area-elements p {
margin: 0px 0px 0px 0px;
padding: 0px;
color: black;
}
.tech-area-elements h2 {
font-size: 1.4rem !important;
}
.tech-area-title {
width: auto;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
text-align: center;
padding: 10px 10px;
}
.tech-area-title-text {
height: auto;
width: 100%;
}
.tech-area-title-icon {
height: 32px;
margin-bottom: 5px;
}
.tech-area-title h2 {
text-align: center;
margin: 0px !important;
}
.tech-area-content {
text-align: justify;
text-overflow: ellipsis;
overflow: hidden;
hyphens: auto;
padding-left: 10px;
padding-right: 10px;
}
.tech-area-content p {
font-size: 1.1rem !important;
}
.tech-area-cta {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.tech-area-cta button {
width: 100px;
height: 50px;
background-color: #000000;
color: #ffffff;
border: none;
border-radius: 20px 0px 0px 0px;
font-weight: normal;
cursor: pointer;
transition: background-color 0.5s;
}
.tech-area-cta button:hover {
background-color: #f4524c;
color: #ffffff;
}
.tech-area-cta button:active {
background-color: #b23935;
color: #ffffff;
}
.tech-area-container:hover {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 910px) {
.tech-area-demo {
grid-template-columns: repeat(1, 1fr);
}
.tech-area-elements h2 {
font-size: 2.2srem !important;
}
.tech-area-container {
font-family: 'Barlow Condensed', sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-self: center;
background-color: gainsboro;
width: 350px;
height: 100%;
height: auto;
box-shadow: none;
overflow: hidden;
transition: box-shadow 0.5s, background-color 0.5s;
}
.tech-area-container:nth-child(odd) {
justify-self: center;
}
.tech-area-container:nth-child(even) {
justify-self: center;
}
.tech-area-background {
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.tech-area-background img {
object-fit: cover;
height: 300px;
}
.tech-area-elements {
height: 250px;
width: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
}
.tech-area-title-text {
height: auto;
width: auto;
}
.tech-area-title-icon {
padding: 5px;
height: 37px;
}
.tech-area-title h2 {
text-align: left;
margin-left: 10px;
}
.tech-area-title {
width: 330px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
text-align: center;
padding: 10px 0px 10px 0px;
}
.tech-area-content {
font-size: 1.1rem !important;
text-align: justify;
hyphens: auto;
padding-left: 10px;
padding-right: 10px;
}
}
@media screen and (min-width: 911px) and (max-width: 1261px) {
.tech-area-demo {
grid-template-columns: repeat(2, 1fr);
}
.tech-area-elements h2 {
font-size: 2.2srem !important;
}
.tech-area-container {
font-family: 'Barlow Condensed', sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-self: center;
background-color: gainsboro;
width: 350px;
height: 100%;
height: auto;
box-shadow: none;
overflow: hidden;
transition: box-shadow 0.5s, background-color 0.5s;
}
.tech-area-background {
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.tech-area-background img {
object-fit: cover;
height: 300px;
}
.tech-area-elements {
height: 216px;
width: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.tech-area-title {
width: 330px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px 0px 10px 0px;
}
.tech-area-title-text {
height: auto;
width: auto;
}
.tech-area-title-icon {
padding: 5px;
height: 37px;
}
.tech-area-title h2 {
text-align: left;
margin-left: 10px;
}
.tech-area-content {
font-size: 1.1rem !important;
text-align: justify;
hyphens: auto;
padding-left: 10px;
padding-right: 10px;
}
}
@media screen and (min-width: 1620px) {
.tech-area-demo {
grid-template-columns: repeat(4, 1fr);
}
.tech-area-container {
font-family: 'Barlow Condensed', sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-self: center;
background-color: gainsboro;
width: 350px;
height: 100%;
height: auto;
box-shadow: none;
overflow: hidden;
transition: box-shadow 0.5s, background-color 0.5s;
}
.tech-area-container:nth-child(odd) {
justify-self: center;
}
.tech-area-container:nth-child(even) {
justify-self: center;
}
.tech-area-background {
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.tech-area-background img {
object-fit: cover;
height: 300px;
}
.tech-area-elements {
height: 216px;
width: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.tech-area-title {
width: 330px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px 0px 10px 0px;
}
.tech-area-title-text {
height: auto;
width: auto;
}
.tech-area-title-icon {
padding: 5px;
height: 37px;
}
.tech-area-title h2 {
text-align: left;
margin-left: 10px;
}
.tech-area-content {
font-size: 1.1rem !important;
text-align: justify;
hyphens: auto;
padding-left: 10px;
padding-right: 10px;
}
}.et-text-highlight {
color: white;
}
.et-text-highlight-reverse {
color: black;
}
.et-background-white {
color: black;
background-color: white;
}
.et-background-black {
color: white;
background-color: black;
}