:root {
	--primary: #185BAA;
	--primary-alt: #1D6DCB;
	--secondary: #DEEBFB;
	--secondary-sup: #DEEBFB;
	--text: #232323;
	--desc: #444444;
	--accent: #FFDA06;
	--accent-sup: #D39C2F;
	--perry-disabled: #5263BA;
	--lavender: #5D428A;
	--lavender-text: #4E3D69;
	--twilight: #6A5FA0;
	--pgrey: #F4F5FD;
}
html, body, header, figure {margin: 0;} html, body {font-family: Cairo, sans-serif; font-size: 15px; font-weight: 200; line-height: 1.4}
body {font-family: Raleway, sans-serif; font-weight: 300; -webkit-font-smoothing: subpixel-antialiased;}

/* Site container flexbox layout for sticky footer */
.site-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main content should grow to fill available space */
main {
    flex: 1;
}

.container {margin: 0 auto; max-width: 1580px; padding: 0 40px} ::selection {background-color: var(--accent); color: var(--text);}
.centered {text-align: center;} .hidden {display: none;} h1, h2, h3, h4 {margin-top: 0;} p {margin-top: 0;}
body {overflow-x: hidden;} a {text-decoration: none; text-underline-offset: 2px; color: inherit;} a.link {text-decoration: underline;}
body section {padding: 40px 0;} strong {font-weight: 500;} a:focus-visible {outline-color: var(--lavender); box-shadow: 0px 0px 5px var(--lavender)}
.section-header {margin-bottom: 30px;}
.section-header .title, .section-title, h2.title {text-align: center; font-weight: 500; margin-bottom: 5px;}
.section-header p {text-align: center; margin-top: 0; margin-bottom: 30px;}
.btn {display: inline-block; cursor: pointer;} .btn-primary {} .flex {display: flex;}

strike {text-decoration: none; position: relative; display: inline-block; padding--: 0 8px;}
strike::before {content: ""; width: 100%; height: 4px; transform--: rotate(-10deg); border-top: 4px solid var(--lavender); left: 0; top: 46%; display: block; position: absolute; opacity: 0.6}

@media (max-width: 850px) {
	br.relative {display: none;}
}
@media (max-width: 480px) {
	.container {padding: 0 20px;}
}

.site-header {}
.site-header .top {display: flex; justify-content: space-between; padding-top: 12px; padding-bottom: 10px; align-items: center;}
.site-header .brand {padding-top--: 8px;}
.site-header .brand a {display: inline-block; height: 30px; padding: 2.5px 5px}
.site-header .brand a img {height: 30px}
.site-header .menu {color: #5263BA;}
.site-header .menu ul {list-style-type: none; margin: 0; padding:0; display: inline-block; padding-right--: 20px;}
.site-header .menu ul li {padding:0; display: inline-block; font-size: 15px;}
.site-header .menu ul li a {color: var(--lavender-text); color--: inherit; font-weight: 400; line-height: 35px; padding: 0 15px; font-size: 16px;}
.site-header .menu ul li a {position: relative; display: inline-block; text-align: center; cursor: pointer; overflow--: visible}
.site-header .menu ul li a::before {display: block; position: absolute; content: ""; width: 100%; height: 55px; background-image: linear-gradient(to bottom, white, #C2C8F358 100%); border-radius: 3px; transition: all 240ms cubic-bezier(0, 0, 0, 1.15); height: 0px; top: 0px; left: 0;  z-index: -1}
.site-header .menu ul li a:hover::before {height: 55px; top--: 0;}
.site-header .menu ul li .submenu {display: none;}
.site-header .menu .switch {display: inline-block; cursor: pointer;}
.site-header .menu .switch img {height: 19px; position: relative; top: 3px;}
.site-header .menu .menu-button {display: none;}
.site-header .mobile-section {display: none; padding: 5px 0;}
@media (max-width: 850px) {
	.site-header .menu ul li a {padding: 0 10px;}
}
@media (max-width: 780px) {
	.site-header .top .menu ul {display: none;}
	.site-header .top .menu .menu-button {display: flex;}
	.site-header .mobile-section {background-image: linear-gradient(to right, #5264BB 0%, #594E9B 100%); border-bottom: solid 1px #c2c8f32e; display: none;}
	.site-header.menu-open .mobile-section {height: unset;}
	.site-header .mobile-section .mobile-menu {max-width: 400px; text-align: right; margin-right: 50px;}
	.site-header .mobile-section ul {display: block; list-style-type: none; padding: 10px 0;}
	.site-header .mobile-section ul li {display: block; text-align: right; }
	.site-header .mobile-section ul li a {color: white; border-top: solid 1px white; border-bottom: solid 1px white; position: relative; margin-top: -1px}
	.site-header .mobile-section ul li:first-of-type a {border-top: none;}
	.site-header .mobile-section ul li:last-of-type a {border-bottom: none;}
	.site-header .mobile-section ul li a::before {display: none;}
	.site-header.menu-open .menu-button i:nth-of-type(1) {transform: translate3d(0,8px,0) rotate(45deg);}
	.site-header.menu-open .menu-button i:nth-of-type(2) {opacity: 0;}
	.site-header.menu-open .menu-button i:nth-of-type(3) {transform: translate3d(0,-8px,0) rotate(-45deg);}
}

h1.title {font-size: 32px;}
h2.title {font-size: 26px;}
h3.title {font-size: 18px;}
@media (max-width: 480px) {
	h1.title {font-size: 28px;}
	h2.title {font-size: 24px;}
	h3.title {font-size: 16px;}
}

.hero {background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 240px; padding: 0}
.hero .alpha {background-color: rgba(0,0,0,0.2); color: white; min-height: 40px;}
.hero .alpha .curated-links {line-height: 40px; text-align: right;}
.hero .alpha .curated-links a {display: inline-block; font-weight: 300; cursor: pointer; text-underline-offset: 2px;}
.hero .alpha .curated-links a:hover {text-decoration: underline;}
.hero .alpha .curated-links i {display: inline-block; padding: 0 12px; font-style: normal; }
.hero .alpha .curated-links img {height: 14px; }
.hero .alpha-ending {min-height: unset; height: 4px;}
.hero .body {}
.hero .body-with-image {display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap;}
.hero .body .text-body {color: white; padding-top: 60px; padding-bottom: 50px; flex-basis: 800px;}
.hero .body .text-body h1 {color: white; font-weight: 600; font-size: 28px; margin-bottom: 20px;}
.hero .body .text-body h2 {font-weight: 500; font-size--: 28px; text-align: left; margin: 0; margin-bottom: 20px;}
.hero .body .text-body p {font-size: 18px; margin: 0;}
.hero .body .text-body strong {font-weight: 400;}
.hero .body .text-body .btn-container {margin-top: 30px; padding-left--: 160px; text-align: left;}
.hero .body .text-body .btn-container .btn-primary {margin-top: 8px; margin-bottom: 10px; font-weight: 400; background-color: var(--accent-no, #ffe800); min-width: 230px; text-align: center; color: var(--text); box-shadow: 0px 2px 4px #4E3D69; transition: box-shadow 160ms linear;}
.hero .body .text-body .btn-container .btn-primary:hover {color: var(--lavender-text); }
.hero .body .text-body .btn-container .btn-primary {font-weight: 500; padding: 12px 26px; font-size: 16px; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12); overflow: hidden; position: relative; box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3)}
.hero .body .text-body .btn-container .btn-left {border-radius: 12px 0 0 12px; background-image: linear-gradient(to bottom, white -10%, var(--accent) 50%, var(--accent-sup)); text-shadow: 0px 1px 1px #f1f1f1;}
.hero .body .text-body .btn-container .btn-right {border-radius: 0 12px 12px 0; background-image: linear-gradient(to bottom, #3b82f6 0%, #764ba2, var(--lavender)); color: white; }
.hero .body .text-body .btn-container .btn-right:hover {color: var(--secondary-sup) }
.hero .body .text-body-wide {max-width: 960px;}
.hero .body .text-body-promo {text-align: center;}
.hero .body .text-body-promo h2 {text-align: center; font-size: 26px; margin-bottom: 5px; font-weight: 400}
.hero .body .image-body {}
.hero-minimal {min-height: unset;}
.hero-minimal .body .text-body {padding-top: 22px; padding-bottom: 26px; text-align: center;}
.hero-minimal .body .text-body h1 {margin-bottom: 5px; font-weight: 500; font-size: 28px;}
.hero-minimal .body .text-body p {font-size: 16px; letter-spacing: 0.5px;}
.hero-again {min-height: unset;}
.hero-again .body .text-body {max-width: unset; padding-top: 30px; padding-bottom: 20px;}
.hero-again .body .text-body p {font-size: 17px;}
@media (max-width: 1195px) {
	.hero .body-with-image .image-body {margin-top: -40px; margin-bottom: -30px;}
}
@media (max-width: 663px) {
	.hero .body .text-body .btn-container .btn-primary {border-radius: 12px;}
}
@media (max-width: 480px) {
	.hero .body .text-body h1 {font-size: 28px;}
	.hero .alpha .curated-links {text-align: center; line-height: 1.8; padding: 8px 0;}
	.hero .alpha .curated-links i {display: none;}
	.hero .alpha .curated-links a {display: block;}
	.hero .body .text-body .btn-container {text-align: left;}
	.hero .body .text-body .btn-container .btn-primary {min-width: unset;}
	.hero .body .text-body {padding-top: 30px; padding-bottom: 30px;}
	.hero .body .text-body h2.title-- {font-size: 24px;}
	.hero-again .body .text-body p {font-size: 16px;}
}



.home-features {background-color--: #C2C8F358; background-color: #c2c8f32e; padding: 40px 0; padding-bottom: 50px}
.home-features .section-header {}
.home-features .section-header .title {margin-bottom: 50px; font-size: 26px; }
.home-features .section-header .title strike {text-decoration: none; position: relative; display: inline-block; padding: 0 12px;}
.home-features .section-header .title strike::before {content: ""; width: 100%; height: 4px; transform--: rotate(10deg); border-top: 3px solid red; left: 0; top: 50%; display: block; position: absolute; opacity: 0.6}
.home-features .section-header .title strong {font-weight: 600; display: inline-block; transform: rotate(-20deg); color: var(--lavender); font-size: 120%; position: relative; left: 0px;}
.home-features .section-header .title strong {font-size: 19px; text-transform: uppercase; border: solid 4px var(--lavender); border-radius: 8px; height: 30px; box-sizing: boder-box; line-height: 30px; width: 100px; background-color: white;}
.home-features .section-header p {text-align: center; margin-bottom: 30px;}
.home-features .grid {display: flex; gap: 40px; flex-wrap: wrap; padding: 0 40px;}
.home-features .grid > div { border-radius: 16px; padding: 20px 40px; flex: 1 1; flex-basis: 400px; box-sizing: border-box;}
.home-features .grid > div {box-shadow: -2px -2px 5px white, 3px 3px 5px rgba(0, 0, 0, 0.1);}
.home-features .grid > div {box-shadow: -5px -5px 15px white, 5px 5px 15px #D1D9E6; transition: all 500ms linear;}
.home-features .grid > div {position: relative; overflow: hidden;}
.home-features .before-- {background: linear-gradient(177deg, #C2C8F338, #ffffff);}
.home-features .grid > div::before {display: block; position: absolute; width: 100%; height: 100%; content: ""; z-index: -1;  bottom: 0; right: 0; transition: all 200ms linear;
background: linear-gradient(317deg, #C2C8F338, #ffffff); background--: white; clip-path: circle(50px at 100% 100%);}
.home-features .grid > div:hover::before {clip-path: circle(150% at 100% 100%);}
.home-features .grid > div h3 {margin-bottom: 12px; font-size: 18px; color: #404040; color: var(--primary);}
.home-features .grid > div .icon {display: none;}
.home-features .grid > div .icon i {}
.home-features .grid > div p {font-size: 16px; margin: 0;}
@media (max-width: 480px) {
	.home-features .section-header .title {font-size: 24px;}
	.home-features .grid {gap: 20px; padding: 0px;}
	.home-features .grid > div {padding: 20px 25px;}
	.home-features .grid > div h3 {font-size: 17px;}
}

.home-platforms {}
.home-platforms .section-header .title {}
.home-platforms .section-header p {}
.home-platforms .grid {display: flex; gap: 30px; flex-wrap: wrap; padding: 0 40px;}
.home-platforms .grid > div {padding: 20px 20px; flex: 1 1; flex-basis: 150px; box-sizing: border-box; text-align: center;}
.home-platforms .grid > div {box-shadow--: -5px -5px 15px white, 5px 5px 15px #D1D9E6;}
.home-platforms .grid > div:hover {background: white; background--: linear-gradient(317deg, #C2C8F338 -20%, #ffffff 80%);}
.home-platforms .grid > div i {font-size: 86px; color--: var(--primary); display: inline-block; margin-bottom: 10px;}
.home-platforms .grid > div i {color: #6565c9; text-shadow: 2px 2px 2px #e2e5f9; }
.home-platforms .grid > div span {display: block; font-size: 16px; font-weight: 400; color: var(--text)}
@media (max-width: 480px) {
	.home-platforms .grid {gap: 10px; padding: 0 10px;}
	.home-platforms .grid > div {padding: 0; flex-basis: 100px;}
	.home-platforms .grid > div i {font-size: 64px;}
}

.site-footer {background: #191919; background-color: #372752; color: var(--secondary-sup); padding: 20px 0; padding-bottom: 15px; flex-shrink: 0;}
.site-footer section {padding-top: 0; padding-bottom: 0;}
.site-footer .container {padding-top: 12px; padding-bottom: 12px;}
.site-footer .footer-links {display: flex; column-gap: 40px; justify-content: space-between; flex-wrap: wrap; row-gap: 20px;}
.site-footer .footer-links .col-1 {flex-basis: 600px; flex-shrink: 0; line-height: 1.5; flex-grow: 3;}
.site-footer .footer-links .col-2 {}
.site-footer .footer-links a {text-decoration: underline;}
.site-footer .footer-links a:hover {color: white;}
.site-footer .credits {font-size: 13px; padding-top: 0;}
.site-footer .credits .col-1 {margin: 0; max-width: 1080px; border-top: solid 2px var(--lavender-text); padding-top: 12px; flex-basis--: 1080px;}
.site-footer .credits .col-1 p {margin: 0; color: var(--secondary-sup);}
.site-footer .credits .col-2 {}
.site-footer .credits strong {font-weight: 400; color: white;}
.site-footer .credits .source-button {border: solid 2px #7D67A1; border-radius: 8px; display: inline-block; padding: 4px 12px; line-height: 30px; text-decoration: none; background-color: var(--lavender);}
.site-footer .credits .source-button {display: flex; column-gap: 10px;}
.site-footer .credits .source-button:hover {background-color: transparent;}
.site-footer .credits .source-button i {font-size: 30px;}

@media (max-width: 780px) {
	.site-footer .footer-links .col-1 {flex-basis: unset; flex-shrink: 1;}
}
.footer-after {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); height: 8px;}

.software-filter {background-color: #c2c8f32e; padding: 30px 0; padding-bottom: 35px}
.software-filter .row {display: flex; flex-wrap: nowrap; column-gap: 40px; justify-content: flex-start;}
.software-filter .col {}
.software-filter .col-1 {max-width-: 500px;}
.software-filter .col-2 {flex-grow: 2;}
.software-filter .title {font-size: 18px; text-align: left; margin-bottom: 12px;}
.software-filter .grid {display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 6px;}
.software-filter .grid .filter {background-color: #E2E5F9; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; row-gap: 5px; flex: 1 1; border-radius: 6px; cursor: pointer;}
.software-filter .grid.type-category .filter {flex-basis: 130px; flex-grow: 0;}
.software-filter .grid.type-environment .filter {flex-basis: 180px; flex-grow: 0;}
.software-filter .grid .filter i {font-size: 20px; color: var(--lavender)}
.software-filter .grid .filter span {font-weight: 300; font-size: 14px; color: var(--lavender-text); line-height: 1;}
.software-filter .grid .filter:hover {}
.software-filter .grid .filter.active {background-color: #6565c9;}
.software-filter .grid .filter.active i {color: white;}
.software-filter .grid .filter.active span {color: white;}
@media (max-width: 1455px) {
	.software-filter .row {column-gap: 20px;}
	.software-filter .col-1 {flex-basis: 500px;}
	.software-filter .grid.type-environment .filter {flex-basis: 120px; flex-grow: 1}
	.software-filter .grid.type-category .filter {flex-basis: 100px; flex-grow: 1}
}

.search-section {padding-top: 30px; text-align: center;}
.search-section .wrapper {position: relative; display: inline-block; }
.search-section .wrapper i {position: absolute; top: 9px; left: 14px; color: var(--accent-sup)}
.search-section .wrapper input {border-radius: 20px; border: solid 2px var(--accent); line-height: 26px; min-width: 280px; padding-left: 40px; color: var(--text); font-weight: 600; font-size: 15px; letter-spacing: 0.4px; padding-right: 9px;}
.search-section .wrapper input::placeholder {font-style: italic; color: var(--primary); font-weight: 500; color: #aaa; font-size: 14px; letter-spacing: 0.4px;}
.search-section .wrapper input::-webkit-search-cancel-button {color: var(--lavender);}
.search-section .wrapper input:focus-visible {outline: none; border-color: var(--primary); box-shadow--:  0px 0px 3px #6565c9}

.images-dir {background-color: #E2E5F9;}
.images-dir .section-header {}
.images-dir .section-header .title {}
.images-dir .grid {display: flex; gap: 30px; flex-wrap: wrap; }
.images-dir .grid > div {padding: 20px; padding-top: 15px; border-radius: 5px; background-color: white;}
.images-dir .grid > div {flex: 1 1; flex-basis: 300px; background: linear-gradient(139deg, white 80%, #C2C8F310); position: relative;}
.images-dir .grid > div {display: flex; flex-direction: column; justify-content: space-between;}
.images-dir .grid > div .item-header {display: flex; align-content: center; justify-content: space-between; align-items: center; margin-bottom: 5px; column-gap: 10px}
.images-dir .grid > div .item-header a {flex-grow: 4; position: relative; z-index: 3; border: solid 2px transparent;}
.images-dir .grid > div .item-header a:focus-visible {outline: none; border: solid 2px var(--lavender); box-shadow: none; border-radius: 6px; padding-left: 8px; box-sizing: border-box;}
.images-dir .grid > div .item-header a .title {color: var(--lavender-darker); font-size: 20px; margin-bottom: 0px; line-height: 1;}
.images-dir .grid > div .item-header .item-icon {}
.images-dir .grid > div .item-header .item-icon i {color: #e2e5f9; font-size: 24px; }
.images-dir .grid > div p {font-size: 13px; margin-bottom: 5px; position: relative; z-index: 3;}
.images-dir .grid > div:hover .item-header .item-icon i {color: var(--lavender-no, #6A5FA0);}
.images-dir .grid > div .item-footer {display: flex; justify-content: space-between; padding-right: 65px; font-size: 13px; position: relative; z-index: 3;}
.images-dir .grid > div .item-footer span {}
.images-dir .grid > div .item-footer strong {font-weight: 400;}
.images-dir .grid > div .item-footer {position: relative;}
.images-dir .grid > div .item-footer::after {content: ""; position: absolute; right: 0px; bottom: 0px; width: 59px; height: 30px; background-image: url('/images/tetris-v.png'); z-index: 2; background-repeat: no-repeat; background-position: right bottom; background-size: 48px; opacity: 0.2}
.images-dir .grid > div:hover .item-footer::after {opacity: 1;}
.images-dir .section-footer {text-align: right; padding-top: 15px;}
@media (max-width: 780px) {
	.images-dir .grid > div .item-footer {padding-right: 0;}
	.images-dir .grid > div .item-footer::after {display: none;}
}

.images-dir-on-software {background-color: unset; min-height: calc(100vh - 725px); padding-top: 30px;}
.images-dir-on-software .grid {gap: 15px;}
.images-dir-on-software .grid > div {border: solid 1px #E2E5F9; flex-basis: 383px; flex-grow: 0}
.images-dir-on-software .grid > div p-- {font-size: 13px; margin-bottom: 5px;}
.images-dir-on-software .grid > div .item-footer {padding-right: 0;}
.images-dir-on-software .grid > div .item-footer::after {display: none;}
.images-dir-on-software .grid > div .item-header a .title {}
@media (max-width: 1672px) {
	.images-dir-on-software .grid > div {border: solid 1px #E2E5F9; flex-basis: 300px; flex-grow: 1}
}

.components-dir {min-height: calc(100vh - 502px);}
.components-dir .grid {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 10px;}
.components-dir .grid a {border: solid 1px var(--secondary); flex-grow: 2; padding: 8px 12px; border-radius: 10px; flex-shrink: 0;}
.components-dir .grid a {display: flex; align-items: center; justify-content: flex-start; gap: 10px; cursor: pointer; min-width: 120px;}
.components-dir .grid a i {display: inline-block; padding: 8px; background-color: #F4F5FD; font-size: 20px; color: var(--primary); border-radius: 4px; text-shadow--: 1px 1px 2px white}
.components-dir .grid a h3 {font-weight: 500; margin: 0; line-height: 1.2; font-size: 15px; flex-shrink: 0;}
.components-dir .grid a:hover {background-color: #F4F5FD;}

.page .article-list {}
.page .article-list {display: block; columns: 2; column-gap: 60px; padding-top: 40px; padding-bottom: 50px;}
.page .article-list article {display: flex; gap: 20px; margin-bottom: 20px; break-inside: avoid;}
.page .article-list article .thumb {flex-basis: 230px; flex-shrink: 0; max-height--: 130px; }
.page .article-list article .thumb {background-repeat: no-repeat; background-size: cover; background-position: center center;}
.page .article-list article .thumb img {width: 100%; height: 100%; object-fit: cover}
.page .article-list article .body {}
.page .article-list article .body h3 {font-weight: 400; margin-bottom: 6px; line-height: 1.2; font-size: 18px;}
.page .article-list article .body p {margin: 0; line-height: 1.3; text-align: justify; color: #555;}
.page .article-list article .body .title:hover {color: var(--lavender)}
.page .article-list article .body .meta {display: flex; justify-content: space-between; margin-bottom: 6px;}
.page .article-list article .body .meta .tag {display: inline-block; background-color: var(--lavender); color: #eee; line-height: 1; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; margin-right: 12px; opacity: 0.9}
.page .article-list article .body .meta datetime {display: inline-block; color: var(--lavender); font-size: 14px; font-weight: 400;}

@media (max-width: 1366px) {
	.page .article-list {columns: 1; max-width: 800px;}
}
@media (max-width: 780px) {
	.page .article-list article {flex-direction: column; gap: 10px; margin-bottom: 25px;}
	.page .article-list article .thumb {flex-basis: 100px;}
}

.page {min-height: calc(100vh - 359px); }
.page .page-header {background-color: #c2c8f32e; padding: 40px 0; padding-bottom--: 50px}
.page .page-header .title {margin-bottom: 15px; text-align: left; }
.page .page-header h1.title {font-weight: 28px; font-weight: 500;}
.page .page-header p {max-width: 1150px; font-size: 16px; margin: 0;}
.page .page-header .meta {display: flex; justify-content: flex-start; margin-top: 12px; align-items: center;}
.page .page-header .meta .tag {display: inline-block; background-image: linear-gradient(to right, #667eea 0%, #764ba2 100%); color: white; line-height: 1; padding: 6px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; margin-right: 12px;}
.page .page-header .meta datetime {display: inline-block; color: var(--lavender); font-size: 14px; font-weight: 400;}

.page .page-content {padding-top: 30px; padding-bottom: 40px;}
.page .page-content h2 {text-align: left; margin-bottom: 15px;}
.page .page-content h2:nth-of-type(n+2) {margin-top: 12px; border-top--: solid 3px var(--lavender); display: inline-block; padding-top--: 12px}
.page .page-content h2:nth-of-type(n+2)::before {display: block; content: ""; height: 5px; background-image: linear-gradient(to right, #667eea 0%, #764ba2 100%); margin-bottom: 8px;}
.page .page-content p {margin-top: 0; margin-bottom: 15px;}
.page .page-content img {max-width: 100%}
.page .page-content strong {font-weight: 400;}
.page .page-content .row {display: flex; column-gap: 40px; flex-wrap: wrap;}
.page .page-content .row .col-1-2 {flex: 1 1;}
.page .page-content .row.contact-info {margin: 40px 80px}
.page .page-content pre {background-color: #E2E5F9; display: block; color: black; padding: 8px 16px; font-size: 13px;}
.page .page-content h3 {margin-bottom: 10px; font-weight: 500; font-size: 20px;}
.page .page-content h3 br {display: none;}
.page .page-content h4 {margin-bottom: 10px; font-weight: 500; font-size: 16px;}
.page .page-content figure {margin: 10px auto; max-width: 1000px; text-align: center;}
.page .page-content figure img {max-width: 100%;}

@media (max-width: 780px) {
	.page .page-content .row {gap: 20px;}
	.page .page-content .row .col-1-2 {flex-basis: 300px;}
	.page .page-content .row.contact-info {margin: 40px 0px}
}
@media (max-width: 480px) {
	.page .page-header {padding-top: 20px; padding-bottom: 30px;}
	.page .page-header p {font-size: 15px;}
}

.page .page-content .cards {display: flex; flex-wrap: wrap; gap: 15px; max-width: 1300px; margin: 0 auto; margin-bottom: 20px; }
.page .page-content .cards .card {border: solid 2px #E2E5F9; border-radius: 13px; flex: 1 1; border-color: var(--primary); overflow: hidden; flex-basis: 340px;}
.page .page-content .cards .card header {background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 3px 3px 0 0; }
.page .page-content .cards .card header h3 {padding: 6px 13px; text-shadow: 1px 1px 1px var(--lavender-text);}
.page .page-content .cards .card .body {padding: 12px 16px; line-height: 1.4; font-size: 14px; color: var(--desc); }
.page .page-content .cards .card.main {border-color: var(--accent-sup); text-align: center;}
.page .page-content .cards .card.main header {background-image: linear-gradient(135deg, var(--accent), var(--accent-sup)); color: var(--text); }
.page .page-content .cards .card.main header h3 {text-shadow: -1px -1px 1px white; font-size: 18px;}
.page .page-content .cards .card.main .body {font-weight: 500; font-size: 18px; padding-top: 20px;}