.secMainBodySecInside_Front { display: flex; flex-direction: column; grid-gap: 45px; border-radius: 4px; padding: 50px; } @media (max-width: 768px) { .secMainBodySecInside_Front { padding: 15px 0px; } } .secMainBodySecInside_FrontSec { width: 100%; display: flex; flex-direction: column; grid-gap: 0px; } .secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecLogo { align-items: center; } .secMainBodySecInside_FrontSecLogoImg { width: 100%; max-width: 500px; } @media (max-width: 576px) { .secMainBodySecInside_FrontSecLogoImg { width: 100%; max-width: 300px; } } .secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecInfo { display: flex; flex-direction: column; grid-gap: 15px; text-align: center; } .secMainBodySecInside_FrontSecInfoHeading { font-weight: bold; } .secMainBodySecInside_FrontSecInfoText { font-size: 16px; font-weight: 500; } .secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecCards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 25px; } @media (max-width: 992px) { .secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecCards { grid-template-columns: 1fr; } } .secMainBodySecInside_FrontSecCardsCard { display: flex; flex-direction: column; grid-gap: 0px; } .secMainBodySecInside_FrontSecCardsCardInside { transition: ease 0.2s; width: 100%; border-radius: 4px; background: white; padding: 25px; display: flex; flex-direction: column; grid-gap: 15px; height: 100%; justify-content: start; } .secMainBodySecInside_FrontSecCardsCardInside:hover { transition: ease 0.2s; background: #4c82a3; color: white; } .secMainBodySecInside_FrontSecCardsCardInside:hover > .secMainBodySecInside_FrontSecCardsCardInsideSecTop > .secMainBodySecInside_FrontSecCardsCardInsideSecTopVisual { transition: ease 0.2s; color: white; } .secMainBodySecInside_FrontSecCardsCardInside:hover > .secMainBodySecInside_FrontSecCardsCardInsideSecBottom > .secMainBodySecInside_FrontSecCardsCardInsideSecBottomBtnAlt { transition: ease 0.2s; color: white; } .secMainBodySecInside_FrontSecCardsCardInsideSec { display: flex; flex-direction: column; grid-gap: 0px; } .secMainBodySecInside_FrontSecCardsCardInsideSec.secMainBodySecInside_FrontSecCardsCardInsideSecTop { flex-direction: row; grid-gap: 10px; align-items: center; } .secMainBodySecInside_FrontSecCardsCardInsideSec.secMainBodySecInside_FrontSecCardsCardInsideSecMid { font-size: 14px; font-weight: 500; } .secMainBodySecInside_FrontSecCardsCardInsideSec.secMainBodySecInside_FrontSecCardsCardInsideSecBottom { justify-content: center; align-items: end; } .secMainBodySecInside_FrontSecCardsCardInsideSecTopVisual { width: 25px; height: 25px; display: flex; flex-direction: column; justify-content: center; align-items: start; color: rgb(76,130,163); font-size: 24px; } .secMainBodySecInside_FrontSecCardsCardInsideSecTopText { font-weight: bold; font-size: 20px; } .btnMain.secMainBodySecInside_FrontSecCardsCardInsideSecBottomBtnAlt { background: linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.00)), linear-gradient(rgba(76,130,163,0), rgba(76,130,163,0)); color: #434343; } .secMainBodySecInside_FrontSec.secMainBodySecInside_FrontSecExtra { font-size: 14px; text-align: center; color: rgba(0,0,0,0.5); } .secMainBodySec.secMainBodySecFront { position: relative; flex-grow: 1; } .secMainBodySecFrontBGElement { width: 13%; opacity: 0.05; position: absolute; } @media (max-width: 1200px) { .secMainBodySecFrontBGElement { display: none; } } .secMainBodySecFrontBGElement.secMainBodySecFrontBGElementRight { top: 50px; right: 0; z-index: -1; } .secMainBodySecFrontBGElement.secMainBodySecFrontBGElementLeft { bottom: 50px; left: 0; z-index: -1; }