<!--    HERO	-->

.hero{

padding-top:70px;

}

.hero-grid{

display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;

align-items:start;

}

.eyebrow{

display:inline-block;

margin-bottom:18px;

font-size:.85rem;

font-weight:700;

letter-spacing:.12em;

color:var(--accent);

}

.hero-text{

font-size:1.15rem;

margin:28px 0 45px;

max-width:620px;

}

.hero-benefits{

display:flex;
flex-direction:column;

gap:22px;

}

.benefit{

display:flex;

gap:18px;

align-items:flex-start;

}

.icon{

width:60px;
height:60px;

border-radius:50%;

background:white;

display:flex;
justify-content:center;
align-items:center;

font-size:1.4rem;

box-shadow:var(--shadow);

flex-shrink:0;

}

<!--   TESTIMONIAL	-->

.testimonial-card{

margin-top:45px;

background:white;

padding:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.testimonial-card p{

margin:15px 0;

font-style:italic;

}

<!--   TRUST LOGOS -->

.logos{

margin-top:55px;

}

.logo-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-top:20px;

}

.company{

background:white;

padding:24px;

border-radius:14px;

text-align:center;

font-weight:700;

color:#6d7b90;

box-shadow:var(--shadow);

transition:.3s;

}

.company:hover{

transform:translateY(-4px);

}

<!--   FORM   -->

.form-card{

position:sticky;

top:110px;

background:white;

padding:40px;

border-radius:24px;

box-shadow:0 15px 40px rgba(13,44,84,.12);

}

.form-card h2{

margin-bottom:5px;

}

.form-card p{

margin-bottom:25px;

}

form{

display:flex;

flex-direction:column;

gap:18px;

}

.grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}

label{

font-size:.9rem;

font-weight:600;

margin-bottom:6px;

display:block;

}

input,
select{

width:100%;

padding:15px 16px;

border:1px solid var(--border);

border-radius:12px;

font-size:1rem;

background:white;

transition:.25s;

}

input:focus,
select:focus{

outline:none;

border-color:var(--accent);

box-shadow:0 0 0 4px rgba(47,128,237,.15);

}

button{

border:none;

padding:18px;

border-radius:14px;

background:linear-gradient(135deg,#0f4c81,#1569c7);

color:white;

font-size:1rem;

font-weight:700;

cursor:pointer;

transition:.3s;

}

button:hover{

transform:translateY(-2px);

box-shadow:0 12px 24px rgba(15,76,129,.25);

}

.secure{

font-size:.9rem;

text-align:center;

}

<!--   FEATURES	-->

.cards{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:45px;

}

.card{

background:white;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

transition:.3s;

}

.card:hover{

transform:translateY(-8px);

}

.card-icon{

font-size:2rem;

margin-bottom:20px;

}

<!--   FAQ	-->

.accordion{

max-width:900px;

margin:auto;

}

.faq-item{

background:white;

margin-bottom:18px;

border-radius:16px;

overflow:hidden;

box-shadow:var(--shadow);

}

.faq-question{

width:100%;

background:none;

border:none;

display:flex;

justify-content:space-between;

align-items:center;

padding:24px;

font-size:1.05rem;

font-weight:700;

cursor:pointer;

color:var(--text);

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .35s ease;

padding:0 24px;

}

.faq-answer p{

padding-bottom:24px;

}

<!--   CTA	-->

.cta{

background:linear-gradient(135deg,#0f4c81,#1569c7);

text-align:center;

color:white;

}

.cta h2,
.cta p{

color:white;

}

.cta a{

display:inline-block;

margin-top:30px;

padding:18px 36px;

background:white;

color:var(--primary);

text-decoration:none;

font-weight:700;

border-radius:14px;

transition:.3s;

}

.cta a:hover{

transform:translateY(-3px);

}

<!-- Assessment Section   -->

.it-assessment-page {
background: linear-gradient(
         180deg,
        #e6f0ff 0%,
        #f5f9ff 35%,
        #ffffff 100%
    );

    padding: 60px 0;

}

/* Hero */

.it-assessment-page .hero {
background: linear-gradient(
         180deg,
        #e6f0ff 0%,
        #f5f9ff 35%,
        #ffffff 100%
    );
    padding: 30px 0 60px;

}

.it-assessment-page .eyebrow {

    display: inline-block;

    margin-bottom: 20px;

    color: #2f80ed;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.it-assessment-page h1 {

    margin-bottom: 25px;

    font-size: 46px;

    font-weight: 700;

    line-height: 1.15;

}

.it-assessment-page .hero-text {

    font-size: 18px;

    margin-bottom: 35px;

    color: #666;

}

/* Benefits */

.it-assessment-page .hero-benefits {

    margin-top: 35px;

}

.it-assessment-page .benefit {

    display: flex;

    margin-bottom: 25px;

}

.it-assessment-page .icon {

    width: 55px;

    height: 55px;

    line-height: 55px;

    text-align: center;

    border-radius: 50%;

    background: #f3f5f7;

    font-size: 22px;

    margin-right: 18px;

}

.it-assessment-page .benefit h3 {

    margin-top: 0;

}

.it-assessment-page .benefit p {

    margin-bottom: 0;

}

/* Testimonial */

.it-assessment-page .testimonial-card {

    margin-top: 40px;

    padding: 30px;

    border-left: 4px solid #3498db;

    background: #fafafa;

}

.it-assessment-page .testimonial-card p {

    margin: 15px 0;

    font-style: italic;

}

/* Form */

.it-assessment-page .form-card {

    background: white;

    padding: 35px;

    border-radius: 8px;

    box-shadow: 0 5px 20px rgba(0,0,0,.12);
	
    position: relative;

}

.it-assessment-page .form-card label {

    margin-top: 15px;

    font-weight: 600;

}

.it-assessment-page .secure {

    margin-top: 20px;

    text-align: center;

    color: #777;

    font-size: 13px;

}

.it-assessment-page .form-card::before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;

    background: radial-gradient(
        circle at top left,
        rgba(47, 128, 237, 0.35),
        transparent 60%
    );

    filter: blur(18px);
    z-index: -1;
    border-radius: 12px;
}

@media (max-width: 991px) {

    .it-assessment-page h1 {

        font-size: 34px;

    }

    .it-assessment-page .form-card {

        margin-top: 40px;

    }

}

.it-assessment-page .cta-primary {
    background: linear-gradient(135deg, #0f4c81, #1f6fd6);
    border: none;
    color: #fff;

    font-weight: 700;
    font-size: 16px;

    padding: 16px 18px;

    border-radius: 10px;

    box-shadow: 0 10px 25px rgba(15, 76, 129, 0.25);

    transition: all 0.25s ease;

    position: relative;
    overflow: hidden;
}

.it-assessment-page .cta-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    transform: skewX(-20deg);
}

.it-assessment-page .cta-primary:hover::after {
    animation: shine 0.6s ease;
}

@keyframes shine {
    from {
        left: -75%;
    }
    to {
        left: 130%;
    }
}


@media (max-width: 767px) {

    .it-assessment-page {

        padding: 30px 0;

    }

    .it-assessment-page .hero {

        padding: 20px 0;

    }

}

.contact-image {
    width: 100%;
    height: 165px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .contact-image {
        height: auto;
    }
}