/*=============  Head  =============*/
#head {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#head.inpage3 {
    grid-template-columns: 1fr 2fr;
}

#head > div {
    background: #cbcbd3;
    color: #fff;
}
#head.inpage2 > div {
    background: #5e6be8;
}

#head > div.flex {
    justify-content: center;
    gap: 1.5rem;
    padding: 3rem 4rem 3rem var(--padding);
}

#head.inpage3 > div.flex {
    background: #4f46e5;
    font-family: 'Poppins';
}

#head h4 {
    color: #ffffffd6;
    font-weight: 700;
}

:is(#head, #bullets, #icons) h2 {
    font-weight: 600;
}

#head.inpage3 h2 {
    font-weight: 700;
}

:is(#head, #bullets, #icons) p {
    font-size: 1.2rem;
	font-weight: 300;
}

:is(#head, #certs, #bullets) img {
    width: 100%;
	height: 100%;
	object-fit: cover;
}

/*============  Certs  =============*/
#certs {
    gap: 3rem;
    background: #f4f4f5;
    padding: 3rem var(--padding);
}

#certs div {
    height: 6rem;
}

/*===========  Bullets  ============*/
#bullets {
    display: grid;
    grid-template-columns: calc(55% - 1.5rem) calc(45% - 1.5rem);
    gap: 3rem;
    padding: 5rem var(--padding);
}

#head.inpage3 + #bullets {
    padding-bottom: 14rem !important;
}

#head.inpage3 + #bullets, #bullets + #bullets {
    grid-template-columns: 1fr 2.5fr;
    background: #f4f4f5;
    padding: 9rem var(--padding);
}

#bullets + #bullets {
    background: unset;
    padding-top: 12.5rem !important;
}

:is(#head.inpage3 + #bullets, #bullets + #bullets) h2 {
    font: 700 'Poppins';
}

:is(#head.inpage3 + #bullets, #bullets + #bullets) p {
    font: 400 1rem 'Poppins';
}

#bullets div.flex:not(#summary, #summary *) {
    justify-content: center;
	gap: 1.5rem;
}

:is(#bullets, #icons) div > h5, #blog > h5 {
    color: #5e6be8;
}

:is(#bullets, #icons) p {
    font-weight: 500;
    line-height: 1.36;
}

#bullets ul {
    margin: 0;
    padding: 0 0 0 1.75rem;
    line-height: 1.36;
}

#bullets li span {
    font-size: 1.15rem;
	font-weight: 500;
}

/*============  Icons  =============*/
#icons {
    /* flex-flow: row-reverse; */
    gap: 3rem;
    background: #f1f1f4;
    padding: 5rem var(--padding);
    border-radius: 1rem;
}

#icons > div {
    display: flex;
    flex-flow: column;
    flex: 1;
    gap: 3.5rem;
}

#icons > div:first-child > div {
    display: flex;
    align-items: end;
    gap: 1.5rem;
}

#icons i {
    background: #fff;
	color: #5e6be8;
	/*padding: 1.1rem 1.25rem 0.65rem; */
	font-size: 2.25rem;
	text-align: center;
}
#icons .wrap {
    height: 4.5rem;
    width: 4.5rem;
    min-width: 4.5rem;
    display: flex;
    background: white;
	border-radius: 0.5rem;
    justify-content: center;
    align-items: center;
}

#icons h4 {
    margin: 0 0 0.15rem;
}

#icons span {
	font-size: 0.95rem;
	line-height: 1.5;
}

#icons > div:last-child {
    gap: 1.5rem;
}

/*===========  Our Work  ===========*/
#bullets + .our-work, #blog {
    background: #f4f4f5;
}

.our-work > p {
    color: #4f46e5;
	font-size: 1rem;
	font-weight: 700;
}

#bullets + .our-work .box {
    background: #fff;
}

.our-work a {
	font-size: 0.95rem;
	font-weight: 800;
}

/*============  Posts  =============*/
#blog {
    gap: 1.5rem;
    padding: 3.24rem var(--padding);
}
#blog img {
    width: 100%;
    object-fit: scale-down;
}
.posts {
    gap: 1.25rem;
}

.posts > div {
    padding: 0.75rem;
    flex: 1 0 0;
}

.posts > div > div {
    background: #5e6be8;
    margin: 0 0 1rem;
	padding: 1rem 2rem;
}

.posts img {
    border-radius: 0.25rem;
    aspect-ratio: 35/28;
}

.posts span {
    background: #5e6be81a;
	color: #5e6be8;
	padding: 0.25rem;
	font-size: 0.75rem;
	font-weight: bold;
}

.posts h4 {
    margin: 1rem 0;
}

.posts a {
    color: #f00;
    font-size: 0.95rem;
}

/*============  Summary  ===========*/
#summary {
    position: absolute;
	left: 0;
	right: 0;
	bottom: -13rem;
    gap: 2.25rem;
	background: #4646cc;
	color: #fff;
	margin: 0 var(--padding);
	padding: 2.75rem 2rem;
	transform: translateY(-5rem);
}

#summary > div {
    gap: 1.25rem;
    font-family: 'Poppins';
}

#summary > div:first-child {
    padding: 0 0 0.66rem;
	border-bottom: 1px solid #ffffff5c;
}

#summary span {
    font-size: 0.9rem;
    font-weight: 300;
}

#summary h4 + .flex {
    gap: 2rem;
}

#summary div:last-child > h4 + .flex {
    flex-wrap: wrap;
    gap: 1.25rem;
}

#summary > div:last-child span {
    background: #fff;
    color: #000;
    padding: 0.125rem 0.5rem;
    font-weight: 500;
}

/*==========  Responsive  ==========*/
@media screen and (max-width: 1750px) {
    /* Head */
    #head.inpage2 > div.flex {
        padding: 3rem 4rem 3rem calc(var(--padding) * 2);
    }

    #head.inpage3 > div.flex {
        padding: 3rem 4rem 3rem calc(var(--padding) * 3);
    }
}

@media screen and (max-width: 1050px) {
    /* Bullets */
    #bullets {
        grid-template-columns: 1fr !important;
	    padding: 3rem var(--padding) !important;
    }
}

@media screen and (max-width: 950px) {
    /* Icons */
    #icons {
        flex-flow: column-reverse;
	    padding: 3rem var(--padding);
    }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
    /* Head */
    #head.inpage3 h2 {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 768px) {
    /* Head */
    #head {
        grid-template-columns: 1fr !important;
    }

    #head div.flex {
        padding: 3rem var(--padding) !important;
    }

    #head > div:last-child {
        display: none;
    }

    /* Posts */
    .posts {
        flex-flow: column;
    }

    .w-res-100{
        width: 100% !important;
    }
}

@media screen and (max-width: 500px) {
    /* Certs */
    #certs {
        flex-flow: column;
    }
}