/* case-study-pucks-pro — per-section rules (backgrounds, padding, rhythm) */

/* ---- section: Shopify + Moodle Integration for Pucks.pro’s Hybrid Storefront ---- */
.sec-shopify-moodle-integration-for{background:#F8F8F8;padding:84px 20px 72px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-shopify-moodle-integration-for{padding:52px 16px 44px 16px}}

/* ---- section: section-2 ---- */
.sec-section-2{background:#FFFFFF;padding:52px 20px 40px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-section-2{padding:32px 16px 24px 16px}}

/* ---- section: A connected storefront and learning platform ---- */
.sec-a-connected-storefront-and{background:#FFFFFF;padding:84px 20px 84px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-a-connected-storefront-and{padding:52px 16px 52px 16px}}

/* ---- section: What this project solved ---- */
.sec-what-this-project-solved{background:#E9F2F8;padding:84px 20px 84px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-what-this-project-solved{padding:52px 16px 52px 16px}}

/* ---- section: The challenge ---- */
.sec-the-challenge{background:#FFFFFF;padding:88px 20px 88px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-the-challenge{padding:54px 16px 54px 16px}}

/* ---- section: Why a hybrid architecture was the right fit ---- */
.sec-why-a-hybrid-architecture{background:#EDF5FA;padding:88px 20px 88px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-why-a-hybrid-architecture{padding:54px 16px 54px 16px}}

/* ---- section: The solution ---- */
.sec-the-solution{background:#FFFFFF;padding:88px 20px 88px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-the-solution{padding:54px 16px 54px 16px}}

/* ---- section: How the integration worked ---- */
.sec-how-the-integration-worked{background:linear-gradient(175deg,#00304F,#002845);padding:92px 20px 96px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-how-the-integration-worked{padding:57px 16px 59px 16px}}

/* ---- section: Our role ---- */
.sec-our-role{background:#FFFFFF;padding:88px 20px 88px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-our-role{padding:54px 16px 54px 16px}}

/* ---- section: Business impact ---- */
.sec-business-impact{background:#E9F2F8;padding:88px 20px 88px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-business-impact{padding:54px 16px 54px 16px}}

/* ---- section: section-11 ---- */
.sec-section-11{background:linear-gradient(172deg,#00304F,#002845);padding:76px 20px 72px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-section-11{padding:47px 16px 44px 16px}}

/* ---- section: Who this type of solution is for ---- */
.sec-who-this-type-of{background:#FFFFFF;padding:88px 20px 88px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-who-this-type-of{padding:54px 16px 54px 16px}}

/* ---- section: Frequently asked questions ---- */
.sec-frequently-asked-questions{background:#E9F2F8;padding:88px 20px 88px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-frequently-asked-questions{padding:54px 16px 54px 16px}}

/* ---- section: Explore related work ---- */
.sec-explore-related-work{background:#FFFFFF;padding:80px 20px 84px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-explore-related-work{padding:49px 16px 52px 16px}}

/* ---- section: Need to connect commerce and learning platforms? ---- */
.sec-need-to-connect-commerce{background:linear-gradient(168deg,#0F8FE8,#0C7FD0);padding:96px 20px 100px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-need-to-connect-commerce{padding:59px 16px 62px 16px}}

/* ---- FAQ: answer text lines up with the question (.faq-style pads .faq-q 18px 22px) ---- */
.sec-frequently-asked-questions .faq-a{padding:16px 22px 20px 22px}