.achievements-hero-container {
position: relative;
height: auto;
width: 100%;
.img-container {
width: 100%;
height: auto;
img {
width: 100%;
height: auto;
}
}
.mobile-img-container {
width: 100%;
height: auto;
img {
width: 100%;
height: auto;
}
}
.text-container {
height: auto;
width: 727px;
text-align: center;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
@media screen and (max-width: 1025px) {
& {
.text-container {
width: 80%;
top: 0;
margin-top: 105px;
}
}
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
& {
.mobile-img-container {
height: 250px;
img {
height: 100%;
}
}
}
}
} .achieve-stats {
width: 1000px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
position: relative;   .stats-item {
width: fit-content;
height: auto;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
gap: 20px;
.stats-desc {
width: 100%;
border-radius: 8px;
border: 1px solid #353535;
background: var(--text-black-secondary);
padding: 10px;
p {
color: var(--text-white);
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: center;
}
}
}
@media screen and (max-width: 1024px) {
& {
width: auto; position: relative;
top: 0;
left: 0;
transform: none; gap: 16px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
margin-top: 0px;
.stats-item {
width: 100%;
.stats-desc {
p {
font-size: 12px;
font-weight: 300;
line-height: 20px;
}
}
}
}
}
} .awards-cards-container {
padding-bottom: var(--spacer-120);
padding-top: 160px;
.awards-cards_content {
max-width: 450px;
width: 100%;
height: auto;
text-align: center;
margin-inline: auto;
.para-primary {
margin-top: 8px;
}
}
.swiper {
width: 100%;
height: 100%;
&.awards-cards_swiper {
margin-top: var(--spacer-60);
.swiper-slide {
position: relative;
background: var(--bg-black-secondary);
padding: 24px;
border-radius: 12px;
height: 350px;
z-index: 2;
border: 0;
mask: none;
cursor: pointer;
transition: background 2000ms ease, mask 2000ms ease;
a {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: start;
text-decoration: none;
.card_img-container { width: 100%;
height: 180px;
border-radius: 10px;
background: linear-gradient(180deg, #282828 0%, #212121 100%);
padding-block: 14px;
padding-inline: 10px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.card_content {
.sub-heading-primary {
color: var(--text-white); display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical; }
.award_type {
color: var(--text-white);
opacity: 0.4;
font-size: 14px;
font-weight: 400;
line-height: 28px;
}
}
}
&:hover {
&::before {
position: absolute;
content: "";
z-index: 2;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 1px;
border-radius: 22px;
background: linear-gradient(53deg,
#8fc3ff 21.4%,
#a984ff 43.99%,
#e6323a 78.36%);
mask: linear-gradient(#222222 0 0) content-box,
linear-gradient(#222222 0 0) padding-box;
mask-composite: exclude;
transition: background 2000ms ease, mask 2000ms ease;
}
}
}
}
}
@media screen and (max-width: 1024px) {
& {
padding-top: 120px;
padding-bottom: var(--spacer-60);
.swiper {
&.awards-cards_swiper {
margin-top: 32px;
}
}
}
}
} .analyst-container {
height: auto;
margin-top: var(--spacer-120);
margin-bottom: 170px;
.analyst_content {
max-width: 575px;
width: 100%;
height: auto;
text-align: center;
margin-inline: auto;
}
.analyst_card_container {
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);   gap: var(--spacer-24);
margin-top: var(--spacer-60);
.analyst_card {
border-radius: 10px;
border: var(--border-light-blue);
overflow: hidden;
max-width: unset; width: 100%; height: auto;
.card_img-container {
width: 100%;
min-height: 190px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.card_content { min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-inline: 20px;
padding-block: 15px;
.sub-heading-primary {
text-overflow: ellipsis;  -webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.para-primary {
margin-top: 8px;
color: var(--text-grey5);
max-height: 62px;
text-overflow: ellipsis;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
a {
margin-top: 40px;
text-decoration: none;
height: 100%;
display: block;
.cta-secondary {
text-decoration: none;
color: var(--text-black-primary);
&:hover{
text-decoration: underline;   
color: var(--bg-arcon-red);
}
}
}
}
}
}
@media screen and (max-width: 1025px) {
& {
margin-block: var(--spacer-60);
.analyst_card_container {
grid-template-columns: repeat(2, 1fr); gap: 16px;
margin-top: 32px;
}
}
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
& {
padding-inline:15px;
.analyst_card_container {
grid-template-columns: repeat(2, 1fr); .analyst_card { width: 100%;
}
}
}
}
} .headline-container {
margin-block: var(--spacer-120);
height: auto;
display: flex;
flex-direction: column;
h2 {
max-width: 540px;
width: 100%;
margin-inline: auto;
text-align: center;
}
.news-grid {
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
gap: 24px;
margin-top: var(--spacer-60);
.news-card {
width: 100%;
min-height: 250px;
height: auto;
border-radius: 10px;
border: var(--border-light-blue);
background: var(--bg-white);
padding: 5px 5px 15px 5px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start; cursor: pointer;
transition: all 0.2s ease-in-out;
a {
text-decoration: none;
color: unset;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
width: 100%;
height: 100%;
.card-content {
width: 100%;
height: 100%;
padding: 10px;
.date {
font-size: 14px;
}
.sub-heading-primary {
font-size: 16px;
text-overflow: ellipsis;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
}
.image-container {
width: 100%;
aspect-ratio: 16 / 9;
display: flex;
justify-content: space-between;
align-items: center;
.card-image {
width: 100%;
height: auto;
img {
border-radius: 5px;
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
&:hover {
background: var(--section-gradient) padding-box,
var(--blue-red-gradient) border-box;
border-radius: 10px;
border: 1px solid transparent;
transition: all 0.2s ease-in-out;
}
@media screen and (max-width: 1024px) {
& {
background: var(--section-gradient);
&:hover {
border: var(--border-light-blue);
}
}
}
}
}
.cta-primary-container {
margin-top: var(--spacer-60);
margin-inline: auto;
a {
display: block;
width: fit-content;
margin-inline: auto;
}
}
@media screen and (max-width: 1024px) {
& {
margin-block: var(--spacer-60);
padding-inline: 15px;
.news-grid {
.news-card {
a {
.card-content {
.sub-heading-primary {
margin-top: 8px;
}
}
}
}
}
}
}
}
@media screen and (max-width: 600px) {
.analyst-container .analyst_card_container {
grid-template-columns: 1fr;
}
}
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
.analyst_card_container {
grid-template-columns: repeat(3, 1fr) !important;   }
.card_img-container{min-height:150px !important;}
}