.elementor-6 .elementor-element.elementor-element-0761b80{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-6 .elementor-element.elementor-element-6ddbfe1 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-6 .elementor-element.elementor-element-6ddbfe1 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-6 .elementor-element.elementor-element-6ddbfe1{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-6 .elementor-element.elementor-element-6ddbfe1 .elementor-icon-list-text{transition:color 0.3s;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-6 .elementor-element.elementor-element-49ce42d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:140px;--padding-bottom:120px;--padding-left:40px;--padding-right:40px;}.elementor-6 .elementor-element.elementor-element-b318c9e{text-align:center;}.elementor-6 .elementor-element.elementor-element-1b0291f{text-align:center;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-6 .elementor-element.elementor-element-4f84fcd{--divider-border-style:solid;--divider-color:#facc15;--divider-border-width:1px;}.elementor-6 .elementor-element.elementor-element-4f84fcd .elementor-divider-separator{width:100%;}.elementor-6 .elementor-element.elementor-element-4f84fcd .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-6 .elementor-element.elementor-element-ddfee77{text-align:center;}.elementor-6 .elementor-element.elementor-element-07f7899{text-align:center;}.elementor-6 .elementor-element.elementor-element-df65554 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-6 .elementor-element.elementor-element-df65554 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-6 .elementor-element.elementor-element-df65554{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-6 .elementor-element.elementor-element-df65554 .elementor-icon-list-text{transition:color 0.3s;}.elementor-6 .elementor-element.elementor-element-397307b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-6 .elementor-element.elementor-element-ae6188b{--display:flex;}.elementor-6 .elementor-element.elementor-element-80760a0{text-align:center;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-6 .elementor-element.elementor-element-687ab51{text-align:center;}.elementor-6 .elementor-element.elementor-element-2666a70{text-align:center;}.elementor-6 .elementor-element.elementor-element-65850b3{--display:flex;}.elementor-6 .elementor-element.elementor-element-4f49d02{--divider-border-style:solid;--divider-color:#f97316;--divider-border-width:2px;}.elementor-6 .elementor-element.elementor-element-4f49d02 .elementor-divider-separator{width:80px;}.elementor-6 .elementor-element.elementor-element-4f49d02 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-6 .elementor-element.elementor-element-1e7830b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;}.elementor-6 .elementor-element.elementor-element-d2c1a82{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
					 .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-6 .elementor-element.elementor-element-d4dde40 .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-6 .elementor-element.elementor-element-4b7c16c .elementor-icon-box-wrapper{align-items:start;gap:15px;}.elementor-6 .elementor-element.elementor-element-38551e8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-6 .elementor-element.elementor-element-009c736{--display:flex;}.elementor-6 .elementor-element.elementor-element-0c7a9a7{--divider-border-style:solid;--divider-color:#f97316;--divider-border-width:1px;}.elementor-6 .elementor-element.elementor-element-0c7a9a7 .elementor-divider-separator{width:100%;}.elementor-6 .elementor-element.elementor-element-0c7a9a7 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-widget-tabs .elementor-tab-title, .elementor-widget-tabs .elementor-tab-title a{color:var( --e-global-color-primary );}.elementor-widget-tabs .elementor-tab-title.elementor-active,
					 .elementor-widget-tabs .elementor-tab-title.elementor-active a{color:var( --e-global-color-accent );}.elementor-widget-tabs .elementor-tab-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-tabs .elementor-tab-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-6 .elementor-element.elementor-element-0cd6e76 .elementor-tab-title, .elementor-6 .elementor-element.elementor-element-0cd6e76 .elementor-tab-title:before, .elementor-6 .elementor-element.elementor-element-0cd6e76 .elementor-tab-title:after, .elementor-6 .elementor-element.elementor-element-0cd6e76 .elementor-tab-content, .elementor-6 .elementor-element.elementor-element-0cd6e76 .elementor-tabs-content-wrapper{border-width:1px;}.elementor-6 .elementor-element.elementor-element-f078e15{--display:flex;}.elementor-6 .elementor-element.elementor-element-15a4b1f{--display:flex;}.elementor-6 .elementor-element.elementor-element-3b55bdb{text-align:center;}.elementor-6 .elementor-element.elementor-element-db18f91{text-align:center;}.elementor-6 .elementor-element.elementor-element-5453097{--divider-border-style:solid;--divider-color:#f97316;--divider-border-width:1px;}.elementor-6 .elementor-element.elementor-element-5453097 .elementor-divider-separator{width:100%;}.elementor-6 .elementor-element.elementor-element-5453097 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-6 .elementor-element.elementor-element-4b45f16{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:nowrap;}.elementor-6 .elementor-element.elementor-element-961c6f8{--display:flex;}.elementor-6 .elementor-element.elementor-element-961c6f8:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-961c6f8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://booksbyjspierce.com/wp-content/uploads/2026/06/theme-blood-embers.png");background-position:center center;background-size:cover;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-6 .elementor-element.elementor-element-022be5f .elementor-icon-wrapper{text-align:start;}.elementor-6 .elementor-element.elementor-element-aecee7e{--display:flex;}.elementor-6 .elementor-element.elementor-element-aecee7e:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-aecee7e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://booksbyjspierce.com/wp-content/uploads/2026/06/theme-shattered-crowns.png");background-position:center center;background-size:cover;}.elementor-6 .elementor-element.elementor-element-6bd5334 .elementor-icon-wrapper{text-align:start;}.elementor-6 .elementor-element.elementor-element-a48b25f{--display:flex;}.elementor-6 .elementor-element.elementor-element-a48b25f:not(.elementor-motion-effects-element-type-background), .elementor-6 .elementor-element.elementor-element-a48b25f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://booksbyjspierce.com/wp-content/uploads/2026/06/theme-leviathans-gaze.png");background-position:center center;background-size:cover;}.elementor-6 .elementor-element.elementor-element-e7ae7ad .elementor-icon-wrapper{text-align:start;}.elementor-6 .elementor-element.elementor-element-84892fa{--display:flex;}.elementor-6 .elementor-element.elementor-element-b2f32f6{text-align:center;}.elementor-6 .elementor-element.elementor-element-8e4985b{text-align:center;}.elementor-6 .elementor-element.elementor-element-64acfe2{--divider-border-style:solid;--divider-color:#f97316;--divider-border-width:1px;}.elementor-6 .elementor-element.elementor-element-64acfe2 .elementor-divider-separator{width:100%;}.elementor-6 .elementor-element.elementor-element-64acfe2 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-6 .elementor-element.elementor-element-1070f10{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:nowrap;}.elementor-6 .elementor-element.elementor-element-4717a37{--display:flex;}.elementor-6 .elementor-element.elementor-element-be84901{--display:flex;}.elementor-6 .elementor-element.elementor-element-c73afbf .elementor-tab-title, .elementor-6 .elementor-element.elementor-element-c73afbf .elementor-tab-title:before, .elementor-6 .elementor-element.elementor-element-c73afbf .elementor-tab-title:after, .elementor-6 .elementor-element.elementor-element-c73afbf .elementor-tab-content, .elementor-6 .elementor-element.elementor-element-c73afbf .elementor-tabs-content-wrapper{border-width:1px;}.elementor-6 .elementor-element.elementor-element-721e120{--display:flex;}.elementor-6 .elementor-element.elementor-element-ddb718e{text-align:center;}.elementor-6 .elementor-element.elementor-element-20f9129{text-align:center;}.elementor-6 .elementor-element.elementor-element-d366c78{--divider-border-style:solid;--divider-color:#f97316;--divider-border-width:1px;}.elementor-6 .elementor-element.elementor-element-d366c78 .elementor-divider-separator{width:100%;}.elementor-6 .elementor-element.elementor-element-d366c78 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-6 .elementor-element.elementor-element-496d29f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:nowrap;}.elementor-6 .elementor-element.elementor-element-b14b124{--display:flex;}.elementor-6 .elementor-element.elementor-element-902a2bd{--display:flex;}.elementor-6 .elementor-element.elementor-element-90d1926{--display:flex;}/* Start custom CSS for heading, class: .elementor-element-92ffd97 */.elementor-6 .elementor-element.elementor-element-92ffd97 .elementor-heading-title { font-family: 'Archivo Black', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: 3px; color: #ffffff; cursor: pointer; transition: color 0.3s; } .elementor-6 .elementor-element.elementor-element-92ffd97:hover .elementor-heading-title { color: #facc15; }/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-6ddbfe1 */.elementor-6 .elementor-element.elementor-element-6ddbfe1 { display: flex; justify-content: center; } .elementor-6 .elementor-element.elementor-element-6ddbfe1 .elementor-icon-list-item { margin: 0 15px; } .elementor-6 .elementor-element.elementor-element-6ddbfe1 .elementor-icon-list-text { font-family: 'Archivo', sans-serif; font-size: 0.95rem; font-weight: 500; color: #d1d5db; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s; } .elementor-6 .elementor-element.elementor-element-6ddbfe1 .elementor-icon-list-item:hover .elementor-icon-list-text { color: #facc15; } @media(max-width: 991px) { .elementor-6 .elementor-element.elementor-element-6ddbfe1 { display: none; } }/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2248772 */.elementor-6 .elementor-element.elementor-element-2248772 .elementor-button { font-family: 'Archivo Black', sans-serif; font-size: 0.85rem; letter-spacing: 1.5px; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: #fff; padding: 12px 24px; border-radius: 4px; box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4); transition: all 0.3s ease; } .elementor-6 .elementor-element.elementor-element-2248772 .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249, 115, 22, 0.6); } @media(max-width: 768px) { .elementor-6 .elementor-element.elementor-element-2248772 { display: none; } }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0761b80 */.elementor-6 .elementor-element.elementor-element-0761b80 { z-index: 1000; position: fixed; top: 0; width: 100%; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); background-color: rgba(3, 7, 18, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding: 15px 40px; } @media(max-width: 768px) { .elementor-6 .elementor-element.elementor-element-0761b80 { padding: 15px 20px; } }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-b318c9e */.elementor-6 .elementor-element.elementor-element-b318c9e .elementor-heading-title { font-family: "Archivo", sans-serif; font-size: 1.5rem; font-weight: 300; letter-spacing: 5px; color: #ffffff; margin-bottom: 8px; opacity: 0.9; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); text-transform: uppercase; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-1b0291f */.elementor-6 .elementor-element.elementor-element-1b0291f .elementor-heading-title { font-family: "Archivo Black", sans-serif; font-size: 6.5rem; font-weight: 900; line-height: 0.95; letter-spacing: 3px; margin-bottom: 25px; }/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-4f84fcd */.elementor-6 .elementor-element.elementor-element-4f84fcd { max-width: 600px; margin: 0 auto 25px auto; } .elementor-6 .elementor-element.elementor-element-4f84fcd .elementor-divider-separator { background: linear-gradient(90deg, rgba(250,204,21,0) 0%, rgba(250,204,21,0.4) 50%, rgba(250,204,21,0) 100%); border: none; height: 1px; } .elementor-6 .elementor-element.elementor-element-4f84fcd .elementor-icon { color: #facc15; font-size: 18px; filter: drop-shadow(0 0 5px rgba(250,204,21,0.6)); }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-ddfee77 */.elementor-6 .elementor-element.elementor-element-ddfee77 .elementor-heading-title { font-family: "Archivo Black", serif; font-size: 1.15rem; font-weight: 600; letter-spacing: 5px; color: #facc15; margin-bottom: 40px; text-shadow: 0 0 10px rgba(250, 204, 21, 0.3); text-transform: uppercase; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-07f7899 */.elementor-6 .elementor-element.elementor-element-07f7899 .elementor-heading-title { font-size: 1.15rem; font-weight: 600; letter-spacing: 3px; color: #9ca3af; text-transform: uppercase; font-family: "Archivo", sans-serif; margin-bottom: 15px; }/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-df65554 */.elementor-6 .elementor-element.elementor-element-df65554 { display: flex; justify-content: center; } .elementor-6 .elementor-element.elementor-element-df65554 .elementor-icon-list-item { opacity: 0.75; margin: 0 17px; } .elementor-6 .elementor-element.elementor-element-df65554 .elementor-icon-list-item:hover { opacity: 1; } .elementor-6 .elementor-element.elementor-element-df65554 .elementor-icon-list-item:hover a { color: #facc15; } .elementor-6 .elementor-element.elementor-element-df65554 .elementor-icon-list-text, .elementor-6 .elementor-element.elementor-element-df65554 .elementor-icon-list-icon i { color: #d1d5db; font-size: 1.8rem; } .elementor-6 .elementor-element.elementor-element-df65554 .elementor-icon-list-item:nth-child(1) .elementor-icon-list-text { font-weight: 700; font-family: "Archivo", sans-serif; } .elementor-6 .elementor-element.elementor-element-df65554 .elementor-icon-list-item:nth-child(2) .elementor-icon-list-text { font-family: "Archivo Black", serif; font-weight: 900; letter-spacing: 1px; } .elementor-6 .elementor-element.elementor-element-df65554 .elementor-icon-list-item:nth-child(3) .elementor-icon-list-text { font-weight: 500; font-family: "Archivo", sans-serif; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49ce42d */.elementor-6 .elementor-element.elementor-element-49ce42d { min-height: 100vh; position: relative; overflow: hidden; padding: 140px 0 120px 0; } .elementor-6 .elementor-element.elementor-element-49ce42d::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(3, 7, 18, 0.3) 0%, rgba(3, 7, 18, 0.75) 60%, rgba(3, 7, 18, 0.95) 100%); z-index: 1; } .elementor-6 .elementor-element.elementor-element-49ce42d > .e-con-inner { z-index: 2; position: relative; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-80760a0 */.elementor-6 .elementor-element.elementor-element-80760a0 .elementor-heading-title { font-family: 'Archivo Black', serif; color: #facc15; font-size: 0.85rem; letter-spacing: 4px; text-transform: uppercase; border: 1px solid rgba(250, 204, 21, 0.3); padding: 6px 16px; border-radius: 20px; display: inline-block; background: rgba(250, 204, 21, 0.05); margin-bottom: 30px; }/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b637eb5 */.elementor-6 .elementor-element.elementor-element-b637eb5 { width: 280px; height: 400px; margin: 0 auto 30px auto; position: relative; } .elementor-6 .elementor-element.elementor-element-b637eb5 .elementor-widget-container { width: 100%; height: 100%; border-radius: 150px 0 150px 0; overflow: hidden; border: 2px solid #f97316; box-shadow: inset 0 0 30px rgba(249, 115, 22, 0.5), 0 0 20px rgba(249, 115, 22, 0.2); } .elementor-6 .elementor-element.elementor-element-b637eb5 img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1) saturate(1.2); }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-687ab51 */.elementor-6 .elementor-element.elementor-element-687ab51 .elementor-heading-title { font-family: 'Archivo Black', serif; font-size: 2.5rem; font-weight: 700; color: #ffffff; margin: 10px 0 5px 0; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-2666a70 */.elementor-6 .elementor-element.elementor-element-2666a70 .elementor-heading-title { color: #facc15; font-style: italic; font-family: 'Archivo Black', serif; font-size: 1.1rem; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6188b */.elementor-6 .elementor-element.elementor-element-ae6188b { padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 30% 50%, rgba(249, 115, 22, 0.05) 0%, transparent 60%); border-right: 1px solid rgba(255, 255, 255, 0.05); text-align: center; align-items: center; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-1777b90 */.elementor-6 .elementor-element.elementor-element-1777b90 .elementor-heading-title { font-family: 'Archivo Black', serif; font-size: 2rem; color: #f97316; margin-bottom: 20px; }/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-4f49d02 */.elementor-6 .elementor-element.elementor-element-4f49d02 { margin-bottom: 30px; } .elementor-6 .elementor-element.elementor-element-4f49d02 .elementor-divider-separator { background: linear-gradient(90deg, #f97316, transparent); border: none; }/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-24fe373 */.elementor-6 .elementor-element.elementor-element-24fe373 { font-family: 'Archivo', sans-serif; color: #d1d5db; font-size: 1.1rem; line-height: 1.8; margin-bottom: 25px; } .elementor-6 .elementor-element.elementor-element-24fe373 p { margin-bottom: 25px; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-8beac48 */.elementor-6 .elementor-element.elementor-element-8beac48 .elementor-heading-title { font-family: 'Archivo Black', serif; font-size: 2rem; color: #ffffff; opacity: 0.8; font-style: italic; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1e7830b */.elementor-6 .elementor-element.elementor-element-1e7830b { margin-top: 40px; padding-top: 20px; border-top: 1px dashed rgba(255, 255, 255, 0.1); }/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-d4dde40 */.elementor-6 .elementor-element.elementor-element-d4dde40 .elementor-icon-box-icon { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: white; background: radial-gradient(circle at 30% 30%, #ea580c, #9a3412); border: 2px solid #7c2d12; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.3); margin-right: 12px; } .elementor-6 .elementor-element.elementor-element-d4dde40 .elementor-icon-box-title { font-family: 'Archivo Black', serif; color: #d1d5db; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }/* End custom CSS */
/* Start custom CSS for icon-box, class: .elementor-element-4b7c16c */.elementor-6 .elementor-element.elementor-element-4b7c16c .elementor-icon-box-icon { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: white; background: radial-gradient(circle at 30% 30%, #facc15, #ca8a04); border: 2px solid #854d0e; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.3); margin-right: 12px; } .elementor-6 .elementor-element.elementor-element-4b7c16c .elementor-icon-box-title { font-family: 'Archivo Black', serif; color: #d1d5db; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d2c1a82 */.elementor-6 .elementor-element.elementor-element-d2c1a82 { margin-top: 40px; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-65850b3 */.elementor-6 .elementor-element.elementor-element-65850b3 { padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); border-radius: 0 20px 20px 0; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-397307b */.elementor-6 .elementor-element.elementor-element-397307b { background-color: #030712; position: relative; overflow: hidden; padding: 120px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-77f8eaf */.elementor-6 .elementor-element.elementor-element-77f8eaf .elementor-heading-title { color: #facc15; font-family: "Archivo Black", serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 3px; display: block; margin-bottom: 10px; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-42f38a2 */.elementor-6 .elementor-element.elementor-element-42f38a2 .elementor-heading-title { font-family: "Archivo Black", serif; font-size: 2.5rem; font-weight: 700; color: #ffffff; margin-bottom: 15px; }/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-0c7a9a7 */.elementor-6 .elementor-element.elementor-element-0c7a9a7 { margin-bottom: 30px; } .elementor-6 .elementor-element.elementor-element-0c7a9a7 .elementor-divider-separator { background: #f97316; height: 1px; border: none; } .elementor-6 .elementor-element.elementor-element-0c7a9a7 .elementor-icon { color: #facc15; font-size: 1.2rem; }/* End custom CSS */
/* Start custom CSS for tabs, class: .elementor-element-0cd6e76 */.elementor-6 .elementor-element.elementor-element-0cd6e76 .elementor-tab-title { font-family: "Archivo Black", serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 2px; color: #9ca3af; background: rgba(3, 7, 18, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 12px 20px; transition: all 0.3s ease; } .elementor-6 .elementor-element.elementor-element-0cd6e76 .elementor-tab-title.elementor-active { background: linear-gradient(135deg, #f97316 0%, #facc15 100%); color: #030712; border-color: transparent; } .elementor-6 .elementor-element.elementor-element-0cd6e76 .elementor-tab-content { font-family: "Archivo", sans-serif; padding-top: 25px; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-009c736 */.elementor-6 .elementor-element.elementor-element-009c736 { padding: 40px; background: rgba(3, 7, 18, 0.85); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; backdrop-filter: blur(10px); }/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-52b2b71 */.elementor-6 .elementor-element.elementor-element-52b2b71 img { filter: drop-shadow(0 20px 40px rgba(0,0,0,0.8)); transition: transform 0.5s ease; } .elementor-6 .elementor-element.elementor-element-52b2b71:hover img { transform: translateY(-10px) scale(1.02); }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-3b55bdb */.elementor-6 .elementor-element.elementor-element-3b55bdb .elementor-heading-title { color: #facc15; font-family: "Archivo Black", sans-serif; font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 15px; display: block; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-db18f91 */.elementor-6 .elementor-element.elementor-element-db18f91 .elementor-heading-title { font-family: "Archivo Black", sans-serif; font-size: 3rem; color: #ffffff; margin-bottom: 25px; }/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-5453097 */.elementor-6 .elementor-element.elementor-element-5453097 { max-width: 400px; margin: 0 auto 60px auto; } .elementor-6 .elementor-element.elementor-element-5453097 .elementor-divider-separator { background: #f97316; height: 1px; } .elementor-6 .elementor-element.elementor-element-5453097 .elementor-icon { color: #facc15; }/* End custom CSS */
/* Start custom CSS for icon, class: .elementor-element-022be5f */.elementor-6 .elementor-element.elementor-element-022be5f .elementor-icon { font-size: 2rem; color: #f97316; margin-bottom: 20px; transition: transform 0.5s; } .elementor-6 .elementor-element.elementor-element-022be5f:hover .elementor-icon { transform: scale(1.2) translateY(-5px); color: #facc15; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-aaa26cb */.elementor-6 .elementor-element.elementor-element-aaa26cb .elementor-heading-title { font-family: "Archivo Black", sans-serif; font-size: 1.8rem; font-weight: 700; color: #ffffff; margin-bottom: 15px; }/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-80356c4 */.elementor-6 .elementor-element.elementor-element-80356c4 { font-family: "Archivo", sans-serif; font-size: 0.95rem; color: #d1d5db; line-height: 1.6; margin-bottom: 25px; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-28d7fe6 */.elementor-6 .elementor-element.elementor-element-28d7fe6 .elementor-heading-title { font-family: "Archivo Black", sans-serif; color: #facc15; font-size: 0.8rem; letter-spacing: 3px; font-weight: 600; text-transform: uppercase; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-961c6f8 */.elementor-6 .elementor-element.elementor-element-961c6f8 { height: 480px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; position: relative; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); padding: 40px 30px; display: flex; flex-direction: column; justify-content: flex-end; perspective: 1000px; } .elementor-6 .elementor-element.elementor-element-961c6f8::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.1) 100%); z-index: 1; transition: all 0.5s; } .elementor-6 .elementor-element.elementor-element-961c6f8:hover { transform: translateY(-15px) scale(1.02) rotateX(4deg) rotateY(-4deg); border-color: rgba(249, 115, 22, 0.5); box-shadow: 0 30px 60px rgba(249, 115, 22, 0.3); z-index: 10; } .elementor-6 .elementor-element.elementor-element-961c6f8 > .e-con-inner { z-index: 2; position: relative; }/* End custom CSS */
/* Start custom CSS for icon, class: .elementor-element-6bd5334 */.elementor-6 .elementor-element.elementor-element-6bd5334 .elementor-icon { font-size: 2rem; color: #f97316; margin-bottom: 20px; transition: transform 0.5s; } .elementor-6 .elementor-element.elementor-element-6bd5334:hover .elementor-icon { transform: scale(1.2) translateY(-5px); color: #facc15; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-8267f9a */.elementor-6 .elementor-element.elementor-element-8267f9a .elementor-heading-title { font-family: "Archivo Black", sans-serif; font-size: 1.8rem; font-weight: 700; color: #ffffff; margin-bottom: 15px; }/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-66c6fb3 */.elementor-6 .elementor-element.elementor-element-66c6fb3 { font-family: "Archivo", sans-serif; font-size: 0.95rem; color: #d1d5db; line-height: 1.6; margin-bottom: 25px; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-b841697 */.elementor-6 .elementor-element.elementor-element-b841697 .elementor-heading-title { font-family: "Archivo Black", sans-serif; color: #facc15; font-size: 0.8rem; letter-spacing: 3px; font-weight: 600; text-transform: uppercase; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aecee7e */.elementor-6 .elementor-element.elementor-element-aecee7e { height: 480px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; position: relative; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); padding: 40px 30px; display: flex; flex-direction: column; justify-content: flex-end; perspective: 1000px; } .elementor-6 .elementor-element.elementor-element-aecee7e::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.1) 100%); z-index: 1; transition: all 0.5s; } .elementor-6 .elementor-element.elementor-element-aecee7e:hover { transform: translateY(-15px) scale(1.02) rotateX(4deg) rotateY(-4deg); border-color: rgba(249, 115, 22, 0.5); box-shadow: 0 30px 60px rgba(249, 115, 22, 0.3); z-index: 10; } .elementor-6 .elementor-element.elementor-element-aecee7e > .e-con-inner { z-index: 2; position: relative; }/* End custom CSS */
/* Start custom CSS for icon, class: .elementor-element-e7ae7ad */.elementor-6 .elementor-element.elementor-element-e7ae7ad .elementor-icon { font-size: 2rem; color: #f97316; margin-bottom: 20px; transition: transform 0.5s; } .elementor-6 .elementor-element.elementor-element-e7ae7ad:hover .elementor-icon { transform: scale(1.2) translateY(-5px); color: #facc15; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-df20a9e */.elementor-6 .elementor-element.elementor-element-df20a9e .elementor-heading-title { font-family: "Archivo Black", sans-serif; font-size: 1.8rem; font-weight: 700; color: #ffffff; margin-bottom: 15px; }/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-7a4db25 */.elementor-6 .elementor-element.elementor-element-7a4db25 { font-family: "Archivo", sans-serif; font-size: 0.95rem; color: #d1d5db; line-height: 1.6; margin-bottom: 25px; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-bee4253 */.elementor-6 .elementor-element.elementor-element-bee4253 .elementor-heading-title { font-family: "Archivo Black", sans-serif; color: #facc15; font-size: 0.8rem; letter-spacing: 3px; font-weight: 600; text-transform: uppercase; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a48b25f */.elementor-6 .elementor-element.elementor-element-a48b25f { height: 480px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; position: relative; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); padding: 40px 30px; display: flex; flex-direction: column; justify-content: flex-end; perspective: 1000px; } .elementor-6 .elementor-element.elementor-element-a48b25f::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.1) 100%); z-index: 1; transition: all 0.5s; } .elementor-6 .elementor-element.elementor-element-a48b25f:hover { transform: translateY(-15px) scale(1.02) rotateX(4deg) rotateY(-4deg); border-color: rgba(249, 115, 22, 0.5); box-shadow: 0 30px 60px rgba(249, 115, 22, 0.3); z-index: 10; } .elementor-6 .elementor-element.elementor-element-a48b25f > .e-con-inner { z-index: 2; position: relative; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b45f16 */@media(max-width: 991px){ .elementor-6 .elementor-element.elementor-element-4b45f16{ flex-direction:column; } }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-15a4b1f */.elementor-6 .elementor-element.elementor-element-15a4b1f { background-color: #030712; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-b2f32f6 */.elementor-6 .elementor-element.elementor-element-b2f32f6 .elementor-heading-title { color: #facc15; font-family: "Archivo Black", sans-serif; font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 15px; display: block; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-8e4985b */.elementor-6 .elementor-element.elementor-element-8e4985b .elementor-heading-title { font-family: "Archivo Black", sans-serif; font-size: 3rem; color: #ffffff; margin-bottom: 25px; }/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-64acfe2 */.elementor-6 .elementor-element.elementor-element-64acfe2 { max-width: 400px; margin: 0 auto 60px auto; } .elementor-6 .elementor-element.elementor-element-64acfe2 .elementor-divider-separator { background: #f97316; height: 1px; } .elementor-6 .elementor-element.elementor-element-64acfe2 .elementor-icon { color: #facc15; }/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eb96f63 */.elementor-6 .elementor-element.elementor-element-eb96f63 img { border-radius: 50%; border: 4px solid #f97316; box-shadow: 0 0 40px rgba(249, 115, 22, 0.4); animation: pulseGlow 4s infinite alternate; width: 100%; max-width: 400px; } @keyframes pulseGlow { 0% { opacity: 0.8; transform: scale(0.98); } 100% { opacity: 1; transform: scale(1.02); } }/* End custom CSS */
/* Start custom CSS for tabs, class: .elementor-element-c73afbf */.elementor-6 .elementor-element.elementor-element-c73afbf .elementor-tab-title { font-family: "Archivo Black", sans-serif; font-size: 1rem; color: #9ca3af; background: transparent; border: 1px solid rgba(255,255,255,0.1); padding: 15px 25px; transition: all 0.3s; } .elementor-6 .elementor-element.elementor-element-c73afbf .elementor-tab-title.elementor-active { background: #f97316; color: #fff; border-color: #f97316; } .elementor-6 .elementor-element.elementor-element-c73afbf .elementor-tab-content { padding-top: 30px; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1070f10 */@media(max-width: 991px){ .elementor-6 .elementor-element.elementor-element-1070f10{ flex-direction:column; } }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-84892fa */.elementor-6 .elementor-element.elementor-element-84892fa { background: radial-gradient(circle at center, #0a0507 0%, #030712 100%); position: relative; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-ddb718e */.elementor-6 .elementor-element.elementor-element-ddb718e .elementor-heading-title { color: #facc15; font-family: "Archivo Black", sans-serif; font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 15px; display: block; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-20f9129 */.elementor-6 .elementor-element.elementor-element-20f9129 .elementor-heading-title { font-family: "Archivo Black", sans-serif; font-size: 3rem; color: #ffffff; margin-bottom: 25px; }/* End custom CSS */
/* Start custom CSS for divider, class: .elementor-element-d366c78 */.elementor-6 .elementor-element.elementor-element-d366c78 { max-width: 400px; margin: 0 auto 60px auto; } .elementor-6 .elementor-element.elementor-element-d366c78 .elementor-divider-separator { background: #f97316; height: 1px; } .elementor-6 .elementor-element.elementor-element-d366c78 .elementor-icon { color: #facc15; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-f343bf3 */.elementor-6 .elementor-element.elementor-element-f343bf3 .elementor-heading-title { color: #facc15; font-size: 20px; letter-spacing: 5px; margin-bottom: 20px; display: block; }/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-443ac6e */.elementor-6 .elementor-element.elementor-element-443ac6e { font-family: "Archivo", sans-serif; font-size: 0.95rem; line-height: 1.7; color: #d1d5db; font-style: italic; margin-bottom: 30px; flex-grow: 1; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-0d03488 */.elementor-6 .elementor-element.elementor-element-0d03488 .elementor-heading-title { font-family: "Archivo Black", sans-serif; font-size: 1rem; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; margin-bottom: 5px; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-52401b7 */.elementor-6 .elementor-element.elementor-element-52401b7 .elementor-heading-title { font-family: "Archivo", sans-serif; font-size: 0.75rem; color: #f97316; text-transform: uppercase; font-weight: 700; letter-spacing: 1.5px; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b14b124 */.elementor-6 .elementor-element.elementor-element-b14b124 { background: rgba(3, 7, 18, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); padding: 50px 40px; border-radius: 4px; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.3); transition: transform 0.4s ease, box-shadow 0.4s ease; display: flex; flex-direction: column; position: relative; overflow: hidden; } .elementor-6 .elementor-element.elementor-element-b14b124:hover { transform: translateY(-10px); box-shadow: inset 0 0 40px rgba(250, 204, 21, 0.05), 0 15px 40px rgba(0, 0, 0, 0.4); border-color: rgba(250, 204, 21, 0.4); }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-6a697d3 */.elementor-6 .elementor-element.elementor-element-6a697d3 .elementor-heading-title { color: #facc15; font-size: 20px; letter-spacing: 5px; margin-bottom: 20px; display: block; }/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-02fdd92 */.elementor-6 .elementor-element.elementor-element-02fdd92 { font-family: "Archivo", sans-serif; font-size: 0.95rem; line-height: 1.7; color: #d1d5db; font-style: italic; margin-bottom: 30px; flex-grow: 1; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-6d04536 */.elementor-6 .elementor-element.elementor-element-6d04536 .elementor-heading-title { font-family: "Archivo Black", sans-serif; font-size: 1rem; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; margin-bottom: 5px; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-1586f61 */.elementor-6 .elementor-element.elementor-element-1586f61 .elementor-heading-title { font-family: "Archivo", sans-serif; font-size: 0.75rem; color: #f97316; text-transform: uppercase; font-weight: 700; letter-spacing: 1.5px; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-902a2bd */.elementor-6 .elementor-element.elementor-element-902a2bd { background: rgba(3, 7, 18, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); padding: 50px 40px; border-radius: 4px; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.3); transition: transform 0.4s ease, box-shadow 0.4s ease; display: flex; flex-direction: column; position: relative; overflow: hidden; } .elementor-6 .elementor-element.elementor-element-902a2bd:hover { transform: translateY(-10px); box-shadow: inset 0 0 40px rgba(250, 204, 21, 0.05), 0 15px 40px rgba(0, 0, 0, 0.4); border-color: rgba(250, 204, 21, 0.4); }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-168c24b */.elementor-6 .elementor-element.elementor-element-168c24b .elementor-heading-title { color: #facc15; font-size: 20px; letter-spacing: 5px; margin-bottom: 20px; display: block; }/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-a364cd6 */.elementor-6 .elementor-element.elementor-element-a364cd6 { font-family: "Archivo", sans-serif; font-size: 0.95rem; line-height: 1.7; color: #d1d5db; font-style: italic; margin-bottom: 30px; flex-grow: 1; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-fdd9157 */.elementor-6 .elementor-element.elementor-element-fdd9157 .elementor-heading-title { font-family: "Archivo Black", sans-serif; font-size: 1rem; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; margin-bottom: 5px; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-d7fc550 */.elementor-6 .elementor-element.elementor-element-d7fc550 .elementor-heading-title { font-family: "Archivo", sans-serif; font-size: 0.75rem; color: #f97316; text-transform: uppercase; font-weight: 700; letter-spacing: 1.5px; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-90d1926 */.elementor-6 .elementor-element.elementor-element-90d1926 { background: rgba(3, 7, 18, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); padding: 50px 40px; border-radius: 4px; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.3); transition: transform 0.4s ease, box-shadow 0.4s ease; display: flex; flex-direction: column; position: relative; overflow: hidden; } .elementor-6 .elementor-element.elementor-element-90d1926:hover { transform: translateY(-10px); box-shadow: inset 0 0 40px rgba(250, 204, 21, 0.05), 0 15px 40px rgba(0, 0, 0, 0.4); border-color: rgba(250, 204, 21, 0.4); }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-496d29f */@media(max-width: 991px){ .elementor-6 .elementor-element.elementor-element-496d29f{ flex-direction:column; } }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-721e120 */.elementor-6 .elementor-element.elementor-element-721e120 { background: linear-gradient(180deg, #030712 0%, #0a0507 100%); }/* End custom CSS */
/* Start custom CSS *//* ==========================================================================
   Design System & Custom Properties
   ========================================================================== */
:root {
  /* Colors */
  --color-bg-dark: #030712;
  --color-bg-glass: rgba(3, 7, 18, 0.8);
  --color-primary: #f97316;
  --color-secondary: #facc15;
  --color-accent: #ea580c;
  --color-text-light: #ffffff;
  --color-text-gray: #d1d5db;
  --color-text-muted: #9ca3af;
  --color-border-glass: rgba(255, 255, 255, 0.07);

  /* Gradients */
  --gradient-gold: linear-gradient(135deg, #f97316 0%, #facc15 100%);
  --gradient-glow: radial-gradient(circle, rgba(249, 115, 22, 0.15) 0%, rgba(3, 7, 18, 0) 70%);
  --gradient-overlay: linear-gradient(90deg,
      rgba(3, 7, 18, 0.98) 0%,
      rgba(3, 7, 18, 0.85) 45%,
      rgba(3, 7, 18, 0.4) 75%,
      rgba(3, 7, 18, 0.15) 100%);

  /* Fonts */
  --font-title: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;

  /* Layout */
  --container-width: 1280px;
  --header-height: 90px;
  --header-height-scrolled: 75px;

  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.2s ease;
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-bg-dark);
  font-family: var(--font-body);
  color: var(--color-text-light);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   Typography & Utilities
   ========================================================================== */
.gradient-text {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* ==========================================================================
   Header & Navbar (Glassmorphic)
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  transition: var(--transition-smooth);
}

.navbar.scrolled {
  height: var(--header-height-scrolled);
  background-color: var(--color-bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-glass);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.nav-container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.logo-text {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--color-text-light);
  transition: var(--transition-smooth);
}

.navbar.scrolled .logo-text {
  font-size: 1.35rem;
}

.logo-text:hover {
  text-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 35px;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-gray);
  position: relative;
  padding: 5px 0;
  transition: var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-gold);
  transition: var(--transition-smooth);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-secondary);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-btn {
  display: inline-block;
  padding: 10px 24px;
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 50px;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-text-light);
  transition: var(--transition-smooth);
}

.nav-btn:hover {
  background: var(--gradient-gold);
  border-color: transparent;
  color: var(--color-bg-dark);
  box-shadow: 0 0 15px rgba(249, 115, 22, 0.4);
  transform: translateY(-2px);
}

.nav-btn-mobile {
  display: none;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.nav-toggle .bar {
  display: block;
  width: 25px;
  height: 2px;
  margin: 5px 0;
  background-color: var(--color-text-light);
  transition: var(--transition-smooth);
}

/* ==========================================================================
   Hero Section Layout
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('hero-bg.png');
  /* Fallback background image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 140px 0 120px 0;
}

.hero-video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(3, 7, 18, 0.3) 0%, rgba(3, 7, 18, 0.75) 60%, rgba(3, 7, 18, 0.95) 100%);
  z-index: 1;
}

.hero-container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-container.hero-centered {
  justify-content: center;
}

/* Hero Content Area */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  text-align: center;
}

.hero-subtitle-top {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 5px;
  color: var(--color-text-light);
  margin-bottom: 8px;
  opacity: 0.9;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  animation: fadeInDown 0.8s ease-out both;
}

.hero-title-main {
  font-family: var(--font-title);
  font-size: 6.5rem;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 3px;
  margin-bottom: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInUp 1s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

.hero-title-main .title-primary {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(249, 115, 22, 0.2);
}

.hero-title-main .title-secondary {
  color: var(--color-text-light);
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

/* Diamond Divider */
.diamond-divider {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin-bottom: 25px;
  gap: 15px;
  animation: fadeInLeft 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.15s both;
}

.divider-line {
  height: 1px;
  flex-grow: 1;
  background: linear-gradient(90deg, rgba(250, 204, 21, 0) 0%, rgba(250, 204, 21, 0.4) 50%, rgba(250, 204, 21, 0) 100%);
}

.diamond-crest {
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.6));
}

.hero-section-tagline {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 5px;
  color: var(--color-secondary);
  margin-bottom: 40px;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.3);
  text-transform: uppercase;
  animation: fadeInUp 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.3s both;
}

.hero-description-main {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--color-text-gray);
  margin-bottom: 40px;
  line-height: 1.8;
  max-width: 600px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  animation: fadeInLeft 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.3s both;
}

.hero-description-main .highlight-text {
  color: var(--color-secondary);
  font-weight: 500;
  background: transparent;
}

/* Button Groups */
.hero-cta-buttons {
  display: flex;
  gap: 20px;
  margin-bottom: 55px;
  animation: fadeInUp 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s both;
}

.btn-primary-gold {
  background: var(--gradient-gold);
  color: var(--color-bg-dark);
  border: none;
  padding: 16px 38px;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.25);
  transition: var(--transition-smooth);
}

.btn-primary-gold:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.45);
}

.btn-secondary-outline {
  background: transparent;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  padding: 16px 38px;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-secondary-outline:hover {
  background: rgba(250, 204, 21, 0.08);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(250, 204, 21, 0.15);
}

/* Sponsor Bookstores */
.store-sponsors {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  animation: fadeInUp 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.5s both;
}

.available-at-text {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.store-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 35px;
  flex-wrap: wrap;
}

.store-link {
  font-size: 1.8rem;
  color: var(--color-text-gray);
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-fast);
}

.store-link:hover {
  opacity: 1;
  color: var(--color-secondary);
}

.amazon-link {
  font-weight: 700;
  font-size: 1.8rem;
}

.barnes-link {
  font-family: var(--font-title);
  font-weight: 900;
  letter-spacing: 1px;

}

.depository-link {
  font-size: 0.95rem;
  font-weight: 500;
  font-size: 1.8rem;
}

/* Bottom Dragon Divider */
.bottom-dragon-divider {
  position: absolute;
  bottom: 90px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  gap: 20px;
  z-index: 2;
  animation: fadeInUp 1s ease-out 0.6s both;
}

.bottom-line {
  height: 1px;
  flex-grow: 1;
  max-width: 500px;
  background: linear-gradient(90deg, rgba(250, 204, 21, 0), rgba(250, 204, 21, 0.25) 80%, rgba(250, 204, 21, 0.25) 100%);
}

.bottom-line:last-child {
  background: linear-gradient(90deg, rgba(250, 204, 21, 0.25) 0%, rgba(250, 204, 21, 0.25) 20%, rgba(250, 204, 21, 0) 100%);
}

.dragon-crest-badge {
  width: 55px;
  height: 55px;
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.35));
}

.dragon-circular-svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Animated Ember Particles
   ========================================================================== */
.ember-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ember {
  position: absolute;
  bottom: -20px;
  background: radial-gradient(circle, rgba(253, 186, 116, 0.8) 0%, rgba(249, 115, 22, 0.2) 60%, rgba(249, 115, 22, 0) 100%);
  border-radius: 50%;
  pointer-events: none;
  animation: floatEmber linear infinite;
  filter: blur(1px);
}

/* ==========================================================================
   Scroll Indicator
   ========================================================================== */
.scroll-indicator {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-family: var(--font-title);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: var(--transition-fast);
  animation: fadeInUp 1s ease-out 0.8s both;
}

.scroll-indicator:hover {
  color: var(--color-secondary);
}

.mouse-icon {
  width: 24px;
  height: 38px;
  border: 2px solid var(--color-text-muted);
  border-radius: 20px;
  position: relative;
  transition: var(--transition-fast);
}

.scroll-indicator:hover .mouse-icon {
  border-color: var(--color-secondary);
}

.mouse-icon .wheel {
  display: block;
  width: 4px;
  height: 8px;
  background-color: var(--color-text-light);
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 1.5s ease-in-out infinite;
}

.scroll-indicator:hover .mouse-icon .wheel {
  background-color: var(--color-secondary);
}

/* ==========================================================================
   Animations Keyframes
   ========================================================================== */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollWheel {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
}

@keyframes floatEmber {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-100vh) translateX(var(--drift)) scale(0.2);
    opacity: 0;
  }
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media (max-width: 1200px) {
  .hero-title-main {
    font-size: 4.8rem;
  }

  .nav-container,
  .hero-container {
    padding: 0 30px;
  }
}

@media (max-width: 991px) {

  /* Navigation mobile menu */
  .nav-toggle {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: -100%;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: rgba(3, 7, 18, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    padding: 40px;
    z-index: 999;
    border-top: 1px solid var(--color-border-glass);
    transition: var(--transition-smooth);
  }

  .nav-menu.active {
    left: 0;
  }

  .nav-toggle.active .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle.active .bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.active .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-actions {
    display: none;
  }

  .nav-btn-mobile {
    display: inline-block;
    padding: 12px 30px;
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 50px;
    background: var(--gradient-gold);
    color: var(--color-bg-dark);
    margin-top: 20px;
    transition: var(--transition-smooth);
  }

  /* Hero layouts stacking */
  .hero-section {
    padding-top: 140px;
    padding-bottom: 140px;
    height: auto;
    min-height: 100vh;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }

  .hero-content {
    align-items: center;
    margin: 0 auto;
    text-align: center;
  }

  .hero-title-main {
    font-size: 3.8rem;
    align-items: center;
  }

  .diamond-divider {
    margin: 0 auto 25px auto;
  }

  .hero-description-main {
    margin: 0 auto 40px auto;
  }

  .hero-cta-buttons {
    justify-content: center;
    width: 100%;
  }

  .store-logos {
    justify-content: center;
  }

  .scroll-indicator {
    display: none;
  }

  .bottom-dragon-divider {
    bottom: 40px;
  }
}

@media (max-width: 576px) {
  .hero-subtitle-top {
    font-size: 1.15rem;
  }

  .hero-title-main {
    font-size: 2.8rem;
  }

  .hero-cta-buttons {
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }

  .btn-primary-gold,
  .btn-secondary-outline {
    width: 100%;
    padding: 14px 28px;
  }

  .nav-container {
    padding: 0 20px;
  }

  .logo-text {
    font-size: 1.2rem;
  }

  .navbar.scrolled .logo-text {
    font-size: 1.1rem;
  }

  .bottom-dragon-divider {
    bottom: 30px;
  }

  .bottom-line {
    max-width: 100px;
  }
}

/* ==========================================================================
   About the Book Section (Cinematic Video Showcase)
   ========================================================================== */
.about-book-section {
  position: relative;
  padding: 140px 0;
  background: #0b0f19;
  overflow: hidden;
  min-height: 850px;
  display: flex;
  align-items: center;
}

.about-book-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.65;
  filter: blur(10px);
  transform: scale(1.05);
}

/* Glowing Ember Container for the Book Section */
.ember-container-book {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.ember-slow {
  position: absolute;
  bottom: -20px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.9) 20%, rgba(239, 68, 68, 0.4) 60%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  filter: blur(1px) drop-shadow(0 0 6px rgba(239, 68, 68, 0.8));
  animation: rise-slow linear forwards;
}

.spark-gold {
  background: radial-gradient(circle, rgba(251, 191, 36, 1) 30%, rgba(217, 119, 6, 0.6) 70%, transparent 100%) !important;
  filter: blur(1px) drop-shadow(0 0 8px rgba(251, 191, 36, 0.95)) !important;
}

@keyframes rise-slow {
  0% {
    transform: translateY(0) scale(0.6) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.75;
  }

  90% {
    opacity: 0.6;
  }

  100% {
    transform: translateY(-900px) translateX(var(--drift)) scale(0.25) rotate(360deg);
    opacity: 0;
  }
}

/* Volcanic Obsidian Slab with Glass Effect */
.obsidian-slab {
  position: relative;
  background: linear-gradient(135deg, rgba(8, 12, 21, 0.65) 0%, rgba(18, 10, 10, 0.6) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(217, 119, 6, 0.3);
  border-radius: 12px;
  padding: 45px;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.65),
    inset 0 0 30px rgba(239, 68, 68, 0.08),
    0 0 30px rgba(217, 119, 6, 0.05);
  overflow: hidden;
}

/* Runic Corner Accents */
.corner-accent {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid #b45309;
  pointer-events: none;
}

.corner-accent.top-left {
  top: 15px;
  left: 15px;
  border-right: none;
  border-bottom: none;
}

.corner-accent.top-right {
  top: 15px;
  right: 15px;
  border-left: none;
  border-bottom: none;
}

.corner-accent.bottom-left {
  bottom: 15px;
  left: 15px;
  border-right: none;
  border-top: none;
}

.corner-accent.bottom-right {
  bottom: 15px;
  right: 15px;
  border-left: none;
  border-top: none;
}

/* Draconic separator */
.dragon-separator {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 35px;
}

.dragon-separator .sep-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(217, 119, 6, 0.4), transparent);
}

.dragon-separator .sep-icon {
  color: #fbbf24;
  font-size: 1.1rem;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

/* Dragon Nexus & Wings SVG */
.dragon-nexus {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nexus-portal-ring {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.08) 0%, rgba(245, 158, 11, 0.03) 50%, transparent 70%);
  border: 2px solid rgba(245, 158, 11, 0.25);
  box-shadow:
    0 0 50px rgba(239, 68, 68, 0.15),
    inset 0 0 40px rgba(245, 158, 11, 0.1);
  z-index: 1;
  animation: pulse-portal 4s ease-in-out infinite;
}

@keyframes pulse-portal {

  0%,
  100% {
    transform: scale(0.98);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.02);
    opacity: 1;
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow:
      0 0 65px rgba(239, 68, 68, 0.22),
      inset 0 0 50px rgba(245, 158, 11, 0.15);
  }
}

.dragon-wings-svg {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.2));
  animation: gentle-beat 6s ease-in-out infinite;
}

@keyframes gentle-beat {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
    filter: drop-shadow(0 0 25px rgba(245, 158, 11, 0.35));
  }
}

.book-section-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 3;
  width: 100%;
}

.book-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items: center;
}

.book-info-col {
  color: #e2e8f0;
}

.section-subtitle-gold {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 15px;
}

.book-section-title {
  font-family: var(--font-title);
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: 1.5px;
  line-height: 1.2;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.gold-accent-line {
  height: 3px;
  width: 60px;
  background: var(--gradient-gold);
  margin-bottom: 35px;
}

/* Codex Dossier Tabs styling */
.codex-tabs-nav {
  display: flex;
  gap: 15px;
  margin-bottom: 35px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

.codex-tab-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #9ca3af;
  padding: 12px 24px;
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.codex-tab-btn .tab-rune {
  color: #d97706;
  font-size: 1rem;
  opacity: 0.7;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease;
}

.codex-tab-btn:hover {
  background: rgba(217, 119, 6, 0.05);
  color: #ffffff;
  border-color: rgba(217, 119, 6, 0.25);
}

.codex-tab-btn.active {
  background: rgba(217, 119, 6, 0.12);
  border-color: #d97706;
  color: #fbbf24;
  box-shadow: 0 4px 20px rgba(217, 119, 6, 0.15);
}

.codex-tab-btn.active .tab-rune {
  transform: rotate(90deg);
  color: #fbbf24;
  opacity: 1;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}

.codex-content-wrapper {
  position: relative;
  min-height: 340px;
}

.codex-pane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
  z-index: 1;
}

.codex-pane.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 2;
}

.book-lead-text {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #f3f4f6;
  margin-bottom: 22px;
  font-weight: 600;
  border-left: 3px solid #d97706;
  padding-left: 20px;
}

.book-description {
  font-size: 1rem;
  line-height: 1.85;
  color: #d1d5db;
  margin-bottom: 30px;
  text-align: justify;
}

.pane-feature {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed rgba(255, 255, 255, 0.06);
  padding: 20px;
  border-radius: 6px;
}

.gold-glow-icon {
  color: #fbbf24;
  font-size: 1.35rem;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
  margin-top: 3px;
}

.pane-feature h4 {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: #ffffff;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.pane-feature p {
  font-size: 0.92rem;
  color: #9ca3af;
  line-height: 1.5;
}

/* Arcanum rule badges */
.arcanum-rules {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

.rule-badge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 15px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.rule-badge:hover {
  background: rgba(217, 119, 6, 0.05);
  border-color: rgba(217, 119, 6, 0.25);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.rule-rune {
  font-size: 1.8rem;
  color: #fbbf24;
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.rule-title {
  font-family: var(--font-title);
  font-size: 0.75rem;
  font-weight: 700;
  color: #d1d5db;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Floating Lectern & Runic Circles */
.book-visual-col {
  display: flex;
  justify-content: center;
  position: relative;
  min-height: 480px;
  align-items: center;
}

.lectern-halo {
  position: absolute;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.runic-circle-outer {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  border: 1.5px dashed rgba(217, 119, 6, 0.25);
  animation: spin-clockwise 50s linear infinite;
  pointer-events: none;
  z-index: 1;
  top: calc(50% - 220px);
  left: calc(50% - 220px);
}

.runic-circle-inner {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1.2px solid rgba(217, 119, 6, 0.12);
  animation: spin-counter 35s linear infinite;
  pointer-events: none;
  z-index: 1;
  top: calc(50% - 180px);
  left: calc(50% - 180px);
}

@keyframes spin-counter {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.book-3d-wrapper {
  position: relative;
  perspective: 1000px;
  z-index: 2;
}

.book-mockup-img {
  max-width: 310px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.65));
  transform: rotateY(-14deg) rotateX(6deg) rotateZ(-2deg);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
}

.book-3d-wrapper:hover .book-mockup-img {
  transform: rotateY(-4deg) rotateX(2deg) rotateZ(-1deg) scale(1.03);
  filter: drop-shadow(0 35px 65px rgba(0, 0, 0, 0.8));
}

/* Floating Metadata Badges */
.floating-badge {
  position: absolute;
  background: rgba(11, 15, 25, 0.85);
  border: 1px solid rgba(217, 119, 6, 0.4);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 30px;
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  z-index: 10;
  pointer-events: none;
  animation: float-badge 4s ease-in-out infinite;
}

.badge-top-left {
  top: 20px;
  left: -40px;
  animation-delay: 0s;
}

.badge-bottom-right {
  bottom: 40px;
  right: -30px;
  animation-delay: 2s;
}

@keyframes float-badge {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* ==========================================================================
   About the Author Section (Split Realm Portal)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');

.author-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 720px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Torn-Paper Edge Transitions (Tearing into dark/light sections) */
.author-section::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 20' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C150,15 350,5 500,18 C650,8 850,15 1000,0 L1000,20 L0,20 Z' fill='%230b0f19'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 10;
  pointer-events: none;
}

/* Bottom transition: Tear bottom edge in light color to cleanly contrast next section */
.author-section::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 20' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C150,5 350,15 500,2 C650,12 850,5 1000,20 L1000,0 L0,0 Z' fill='%23fbf8f2'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 10;
  pointer-events: none;
}

.portal-panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 40px;
}

/* LEFT PANEL (Realm of Shadow & Fire) */
.panel-shadow {
  background: radial-gradient(circle at center, #111622 0%, #050811 100%);
  overflow: hidden;
}

.ember-container-author {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.25;
}

.shadow-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 440px;
  width: 100%;
}

.portal-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 25px;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

/* Dragon's Eye Frame */
.dragon-eye-frame {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto 30px auto;
  border-radius: 50%;
  border: 4px solid #d97706;
  box-shadow: 0 0 35px rgba(217, 119, 6, 0.35),
    inset 0 0 20px rgba(0, 0, 0, 0.8);
  padding: 8px;
  background: #080c14;
  cursor: pointer;
}

.dragon-eye-glow {
  position: absolute;
  inset: -12px;
  border: 1.5px dashed rgba(217, 119, 6, 0.45);
  border-radius: 50%;
  animation: spin-clockwise 30s linear infinite;
  pointer-events: none;
}

.dragon-eye-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(217, 119, 6, 0.2);
  position: relative;
  z-index: 2;
}

.dragon-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(10%) contrast(1.1) brightness(0.9);
  transition: transform 0.6s ease, filter 0.6s ease;
}

.dragon-eye-frame:hover .dragon-portrait {
  transform: scale(1.08);
  filter: grayscale(0%) contrast(1.15) brightness(0.95);
}

.shadow-author-title {
  font-family: var(--font-title);
  font-size: 2.2rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.shadow-author-tagline {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #9ca3af;
  letter-spacing: 1px;
}

/* RIGHT PANEL (Codex of Light / Parchment) */
.panel-light {
  background: #fbf8f2;
}

/* Vertical Jagged Torn Paper Divider */
.panel-light::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24px;
  width: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M20,0 L10,5 L15,15 L5,25 L12,40 L3,60 L14,75 L2,90 L8,95 L20,100 Z' fill='%23fbf8f2'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 5;
  pointer-events: none;
}

/* Glowing Gold Foil border inside the vertical tear */
.panel-light::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -26px;
  width: 27px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 100' preserveAspectRatio='none'%3E%3Cpath d='M20,0 L10,5 L15,15 L5,25 L12,40 L3,60 L14,75 L2,90 L8,95 L20,100 Z' fill='none' stroke='%23d97706' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(-2px 0 4px rgba(217, 119, 6, 0.4));
}

.light-content {
  max-width: 480px;
  width: 100%;
  position: relative;
  z-index: 6;
}

.codex-heading {
  font-family: var(--font-title);
  font-size: 2.2rem;
  font-weight: 700;
  color: #1c1917;
  margin-bottom: 12px;
}

.codex-divider {
  height: 2px;
  width: 60px;
  background: #d97706;
  margin-bottom: 25px;
}

.codex-body {
  font-size: 0.98rem;
  line-height: 1.85;
  color: #44403c;
  margin-bottom: 18px;
  text-align: justify;
}

.codex-body em {
  color: #b45309;
  font-style: italic;
  font-weight: 600;
}

/* Drop cap */
.drop-cap-fantasy {
  font-family: var(--font-title);
  font-size: 3.8rem;
  font-weight: 900;
  float: left;
  line-height: 0.82;
  margin-top: 4px;
  margin-right: 10px;
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(180, 83, 9, 0.25));
}

/* Signature & Quill positioning */
.codex-signoff {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 10px 0 25px 0;
  position: relative;
}

.signature-cursive {
  font-family: 'Alex Brush', cursive;
  font-size: 2.8rem;
  color: #7c2d12;
  user-select: none;
  transform: rotate(-3deg);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.feather-quill-drawing {
  color: #b45309;
  opacity: 0.85;
  transform: rotate(-30deg);
  transition: transform 0.3s ease;
}

.codex-signoff:hover .feather-quill-drawing {
  transform: rotate(-20deg) translate(-2px, -2px);
}

/* Accolades Seals styling */
.codex-seals {
  display: flex;
  gap: 35px;
  margin-bottom: 35px;
}

.codex-seal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.wax-seal {
  width: 52px;
  height: 52px;
  border-radius: 54% 46% 52% 48% / 48% 52% 47% 53%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.red-seal {
  background: radial-gradient(circle, #b91c1c 0%, #7f1d1d 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    0 8px 18px rgba(127, 29, 29, 0.35);
}

.gold-seal {
  background: radial-gradient(circle, #d97706 0%, #78350f 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    0 8px 18px rgba(120, 53, 15, 0.35);
}

.wax-seal i {
  color: #fed7aa;
  font-size: 1.05rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.codex-seal-item:hover .wax-seal {
  transform: scale(1.15) rotate(15deg);
}

.seal-caption {
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 700;
  color: #57534e;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 8px;
}

/* Seal Tooltips */
.codex-seal-item::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px) scale(0.85);
  background: rgba(30, 27, 24, 0.96);
  color: #f7f3ed;
  padding: 8px 14px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: var(--transition-fast);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(180, 83, 9, 0.25);
  z-index: 20;
}

.codex-seal-item::after {
  content: '';
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%) translateY(0) scale(0.85);
  border: 6px solid transparent;
  border-top-color: rgba(30, 27, 24, 0.96);
  pointer-events: none;
  opacity: 0;
  transition: var(--transition-fast);
  z-index: 20;
}

.codex-seal-item:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px) scale(1);
}

.codex-seal-item:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px) scale(1);
}

/* Action Button */
.btn-codex-gold {
  display: inline-block;
  background: #7c2d12;
  color: #ffffff;
  padding: 14px 32px;
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(124, 45, 18, 0.15);
  transition: var(--transition-smooth);
}

.btn-codex-gold:hover {
  background: #9a3412;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(124, 45, 18, 0.3);
}

@keyframes spin-clockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Split Realm Responsive Layout
   ========================================================================== */
@media (max-width: 991px) {
  .about-book-section {
    padding: 100px 0;
  }

  .book-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .book-visual-col {
    order: -1;
  }

  .book-lead-text {
    border-left: none;
    padding-left: 0;
  }



  .badge-top-left {
    left: 10px;
  }

  .badge-bottom-right {
    right: 10px;
  }

  .author-section {
    grid-template-columns: 1fr;
  }

  .portal-panel {
    padding: 80px 30px;
  }

  /* Redefine horizontal tear transition for mobile stacking */
  .panel-light::before {
    top: -15px;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 20' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C150,5 350,15 500,2 C650,12 850,5 1000,20 L1000,20 L0,20 Z' fill='%23fbf8f2'/%3E%3C/svg%3E");
    background-size: 100% 100%;
  }

  .panel-light::after {
    top: -17px;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 20' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C150,5 350,15 500,2 C650,12 850,5 1000,20 L1000,20 L0,20 Z' fill='none' stroke='%23d97706' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 100% 100%;
  }

  .codex-heading {
    text-align: center;
    font-size: 1.9rem;
  }

  .codex-divider {
    margin: 0 auto 25px auto;
  }

  .codex-seals {
    justify-content: center;
  }

  .codex-signoff {
    justify-content: center;
  }

  .codex-footer {
    text-align: center;
  }
}

@media (max-width: 576px) {
  .about-book-section {
    padding: 80px 0;
  }

  .book-section-title {
    font-size: 2.2rem;
  }

  .book-lead-text {
    font-size: 1.1rem;
  }

  .book-mockup-img {
    max-width: 250px;
  }

  .portal-panel {
    padding: 60px 20px;
  }

  .dragon-eye-frame {
    width: 200px;
    height: 200px;
  }

  .shadow-author-title {
    font-size: 1.8rem;
  }

  .codex-heading {
    font-size: 1.6rem;
  }

  .signature-cursive {
    font-size: 2.3rem;
  }

  .codex-seals {
    flex-wrap: wrap;
    gap: 20px;
  }
}

/* ==========================================================================
   Book Themes Section (Thematic Covenants)
   ========================================================================== */
.book-themes-section {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(to bottom, #fbf8f2 0%, #f7f3e9 100%);
  overflow: hidden;
  z-index: 3;
}

.ember-container-themes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.5;
}

.themes-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

.themes-header {
  margin-bottom: 60px;
  text-align: center;
}

.themes-main-title {
  font-family: var(--font-title);
  font-size: 2.8rem;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 15px;
  letter-spacing: 2px;
  color: #1e293b;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.themes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Theme Cards 3D Container */
.theme-card-3d {
  perspective: 1200px;
  position: relative;
  display: block;
  border-radius: 12px;
  min-height: 440px;
}

.theme-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 440px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(217, 119, 6, 0.15);
  background: #504e4e;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  transform-style: preserve-3d;
  box-shadow: 0 15px 35px rgba(217, 119, 6, 0.08), 0 5px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.theme-card-3d:hover .theme-card-inner {
  border-color: #d97706;
  box-shadow:
    0 25px 55px rgba(217, 119, 6, 0.18),
    0 0 35px rgba(217, 119, 6, 0.1);
}

/* Background Image inside the Card */
.theme-card-bg {
  position: absolute;
  inset: -10px;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.8s ease;
  transform: scale(1.05) translateZ(0);
  filter: grayscale(20%) brightness(85%) contrast(95%);
  z-index: 0;
}

.theme-card-3d:hover .theme-card-bg {
  transform: scale(1.15) translateZ(-15px);
  filter: grayscale(0%) brightness(100%) contrast(100%);
}

/* Light Vignette Overlay */
.theme-card-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background: #000;
  z-index: 1;
  transition: background 0.4s ease;
}

.theme-card-3d:hover .theme-card-overlay {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.5) 35%, rgba(255, 255, 255, 0.98) 100%);
}

/* Corner Brackets for Cards */
.card-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(217, 119, 6, 0.25);
  pointer-events: none;
  transition: border-color 0.4s ease;
  z-index: 3;
}

.theme-card-3d:hover .card-corner {
  border-color: #d97706;
}

.card-corner.top-left {
  top: 12px;
  left: 12px;
  border-right: none;
  border-bottom: none;
}

.card-corner.top-right {
  top: 12px;
  right: 12px;
  border-left: none;
  border-bottom: none;
}

.card-corner.bottom-left {
  bottom: 12px;
  left: 12px;
  border-right: none;
  border-top: none;
}

.card-corner.bottom-right {
  bottom: 12px;
  right: 12px;
  border-left: none;
  border-top: none;
}

/* Content Wrapper */
.theme-card-content {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 40px 30px;
  transform: translateZ(50px);
  display: flex;
  flex-direction: column;
}

/* Card Icon & Background Rune */
.card-icon-wrapper {
  position: relative;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  z-index: 2;
}

.card-rune-bg {
  opacity: 0.5;
  position: absolute;
  font-family: var(--font-title);
  font-size: 3.5rem;
  color: #474747;
  opacity: 0.08;
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.theme-card-3d:hover .card-rune-bg {
  opacity: 0.22;
  transform: scale(1.15) rotate(15deg);
  text-shadow: 0 0 18px rgba(217, 119, 6, 0.3);
}

.theme-icon {
  font-size: 2rem;
  color: #f8f8f8;
  z-index: 2;
  transition: transform 0.4s ease, color 0.4s ease;
  filter: drop-shadow(0 0 8px rgba(217, 119, 6, 0.2));
}

.theme-card-3d:hover .theme-icon {
  transform: scale(1.12);
  color: #ffffff;
  filter: drop-shadow(0 0 12px rgba(217, 119, 6, 0.4));
}

.theme-card-title {
  font-family: var(--font-title);
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0px;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

.theme-card-3d:hover .theme-card-title {
  color: #d97706;
}

/* Card Details (Visible in initial state) */
.theme-card-details {
  opacity: 1;
  margin-top: 15px;
  transition: transform 0.4s ease;
}

.theme-card-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.65;
  color: #d6d8db;
  margin-bottom: 20px;
}

.card-footer-rune {
  border-top: 1px dashed rgba(217, 119, 6, 0.2);
  padding-top: 15px;
  font-family: var(--font-title);
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1.5px;
  transition: color 0.3s ease;
}

.theme-card-3d:hover .card-footer-rune {
  color: #ffffff;
}

/* Responsive Book Themes styling */
@media (max-width: 991px) {
  .themes-grid {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }

  .themes-main-title {
    font-size: 2.3rem;
  }
}

@media (max-width: 767px) {
  .book-themes-section {
    padding: 80px 0;
  }

  .themes-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .theme-card-3d {
    min-height: auto;
  }

  .theme-card-inner {
    min-height: 380px;
  }

  .theme-card-details {
    max-height: none;
    opacity: 1;
    margin-top: 15px;
  }

  .theme-card-title {
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   Draconic Compendium Section (Dark Theme)
   ========================================================================== */
.compendium-section {
  position: relative;
  padding: 120px 0;
  background: radial-gradient(circle at center, #0d121f 0%, #03060c 100%);
  overflow: hidden;
  z-index: 3;
  border-top: 1px solid rgba(217, 119, 6, 0.1);
}

.ember-container-compendium {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.35;
}

.compendium-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

.compendium-header {
  margin-bottom: 60px;
  text-align: center;
}

.compendium-main-title {
  font-family: var(--font-title);
  font-size: 2.8rem;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 15px;
  letter-spacing: 2px;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.compendium-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 60px;
  align-items: center;
}

/* Dragon Mirror Frame */
.dragon-mirror-frame {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid #d97706;
  box-shadow:
    0 0 45px rgba(217, 119, 6, 0.35),
    inset 0 0 30px rgba(0, 0, 0, 0.9);
  padding: 10px;
  background: #080c14;
  z-index: 2;
  transition: transform 0.3s ease;
}

.dragon-mirror-frame:hover {
  transform: scale(1.02);
}

.dragon-mirror-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(217, 119, 6, 0.2);
  position: relative;
  z-index: 2;
}

.dragon-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.95) rotate(-5deg);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  filter: grayscale(10%) contrast(1.15);
}

.dragon-portrait-img.active {
  opacity: 1;
  transform: scale(1.02) rotate(0deg);
  z-index: 2;
}

/* Rune Rings */
.rune-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.ring-outer {
  border: 1.5px dashed rgba(217, 119, 6, 0.3);
  inset: -15px;
  animation: spin-clockwise 40s linear infinite;
}

.ring-inner {
  border: 1.5px dashed rgba(217, 119, 6, 0.15);
  inset: -25px;
  animation: spin-counter 35s linear infinite;
}

/* Info Column */
.compendium-tabs {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.compendium-tab-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #9ca3af;
  padding: 12px 24px;
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.5px;
}

.compendium-tab-btn:hover {
  border-color: rgba(217, 119, 6, 0.5);
  color: #f59e0b;
}

.compendium-tab-btn.active {
  background: rgba(217, 119, 6, 0.15);
  border-color: #d97706;
  color: #fbbf24;
  box-shadow: 0 0 15px rgba(217, 119, 6, 0.15);
}

.compendium-cards {
  position: relative;
  min-height: 460px;
}

.compendium-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  background: rgba(8, 12, 21, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 40px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.compendium-card.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  z-index: 2;
  position: relative;
}

/* Card Glows */
.card-glow-fire,
.card-glow-ice,
.card-glow-lightning {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.15;
  top: -30px;
  right: -30px;
  z-index: 0;
}

.card-glow-fire {
  background: #ef4444;
}

.card-glow-ice {
  background: #38bdf8;
}

.card-glow-lightning {
  background: #c084fc;
}

.dragon-card-title {
  font-family: var(--font-title);
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1.5px;
  margin-bottom: 5px;
  z-index: 1;
}

.dragon-card-subtitle {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  display: inline-block;
  z-index: 1;
}

.dragon-card-lore {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 25px;
  z-index: 1;
}

/* Stats */
.dragon-stats {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
  z-index: 1;
}

.stat-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-info {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1px;
}

.stat-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Quote */
.dragon-quote {
  border-left: 3px solid #d97706;
  background: rgba(255, 255, 255, 0.02);
  padding: 15px 20px;
  border-radius: 0 8px 8px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  z-index: 1;
  margin-top: auto;
}

.dragon-quote p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #94a3b8;
  font-style: italic;
  margin: 0;
}

.quote-icon {
  font-size: 1.1rem;
  color: #d97706;
  margin-top: 3px;
}

/* Responsive Compendium */
@media (max-width: 991px) {
  .compendium-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .dragon-mirror-frame {
    width: 320px;
    height: 320px;
  }

  .compendium-cards {
    min-height: 480px;
  }
}

@media (max-width: 767px) {
  .compendium-section {
    padding: 80px 0;
  }

  .compendium-card {
    padding: 25px;
  }
}

/* ==========================================================================
   Reviews Section (Light Theme)
   ========================================================================== */
.reviews-section {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(to bottom, #f7f3e9 0%, #fbf8f2 100%);
  overflow: hidden;
  z-index: 3;
}

.gold-sparks-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.45;
}

.reviews-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

.reviews-header {
  margin-bottom: 65px;
  text-align: center;
}

.reviews-main-title {
  font-family: var(--font-title);
  font-size: 2.8rem;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 15px;
  letter-spacing: 2px;
  color: #1e293b;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Review Card - Elegant Codex / Parchment styling */
.review-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: 12px;
  padding: 40px 35px;
  box-shadow:
    0 15px 40px rgba(217, 119, 6, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.review-card:hover {
  transform: translateY(-8px);
  border-color: #d97706;
  box-shadow:
    0 25px 55px rgba(217, 119, 6, 0.15),
    0 10px 25px rgba(217, 119, 6, 0.05);
}

/* Card Decorative gold corners */
.card-decor {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(217, 119, 6, 0.2);
  pointer-events: none;
  transition: border-color 0.4s ease;
}

.review-card:hover .card-decor {
  border-color: #d97706;
}

.card-decor.top-left {
  top: 12px;
  left: 12px;
  border-right: none;
  border-bottom: none;
}

.card-decor.top-right {
  top: 12px;
  right: 12px;
  border-left: none;
  border-bottom: none;
}

.card-decor.bottom-left {
  bottom: 12px;
  left: 12px;
  border-right: none;
  border-top: none;
}

.card-decor.bottom-right {
  bottom: 12px;
  right: 12px;
  border-left: none;
  border-top: none;
}

.review-stars {
  color: #fbbf24;
  font-size: 0.95rem;
  margin-bottom: 20px;
  display: flex;
  gap: 4px;
}

.review-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: #334155;
  font-style: italic;
  margin-bottom: 30px;
  z-index: 1;
}

.review-author-info {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.review-author-name {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.5px;
}

.review-author-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #d97706;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1.5px;
}

/* Floating watermark background rune */
.review-rune-bg {
  position: absolute;
  bottom: -20px;
  right: -10px;
  font-family: var(--font-title);
  font-size: 8rem;
  color: #d97706;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
  transition: all 0.5s ease;
}

.review-card:hover .review-rune-bg {
  opacity: 0.08;
  transform: scale(1.1) rotate(15deg);
}

/* ==========================================================================
   Volcanic Footer (Dark Theme)
   ========================================================================== */
.volcanic-footer {
  position: relative;
  background: #03060c;
  padding: 100px 0 40px 0;
  border-top: 1px solid rgba(217, 119, 6, 0.15);
  overflow: hidden;
  z-index: 3;
}

.ember-container-footer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.3;
}

.footer-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  gap: 60px;
  margin-bottom: 70px;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

/* Brand Column */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
}

.logo-rune {
  font-family: var(--font-title);
  font-size: 2.2rem;
  color: #d97706;
  text-shadow: 0 0 10px rgba(217, 119, 6, 0.3);
}

.logo-title {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2px;
}

.footer-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: #94a3b8;
  margin-bottom: 30px;
}

.footer-socials {
  display: flex;
  gap: 15px;
}

.social-link {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 1.05rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-link:hover {
  background: rgba(217, 119, 6, 0.15);
  border-color: #d97706;
  color: #fbbf24;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(217, 119, 6, 0.25);
}

/* Link Column */
.footer-col-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1.5px;
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 10px;
}

.footer-col-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 35px;
  height: 2px;
  background: #d97706;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-links a:hover {
  color: #fbbf24;
  transform: translateX(5px);
}

/* Newsletter Column */
.newsletter-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: #94a3b8;
  margin-bottom: 25px;
}

.footer-signup-form .input-wrapper {
  position: relative;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;
}

.footer-signup-form .input-wrapper:focus-within {
  border-color: #d97706;
  box-shadow: 0 0 15px rgba(217, 119, 6, 0.15);
}

.signup-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.signup-input::placeholder {
  color: #64748b;
}

.signup-btn {
  background: #d97706;
  border: none;
  outline: none;
  color: #ffffff;
  padding: 0 22px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.signup-btn:hover {
  background: #b45309;
  color: #fbbf24;
}

/* Footer Bottom */
.footer-bottom {
  margin-top: 50px;
}

.bottom-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-bottom: 35px;
  opacity: 0.6;
}

.bottom-divider .divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(217, 119, 6, 0.3), transparent);
}

.divider-dragon {
  color: #d97706;
  font-size: 1.3rem;
  filter: drop-shadow(0 0 8px rgba(217, 119, 6, 0.4));
}

.bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.copyright-text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
}

.legal-links {
  display: flex;
  gap: 25px;
}

.legal-links a {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #64748b;
  text-decoration: none;
  transition: color 0.3s ease;
}

.legal-links a:hover {
  color: #fbbf24;
}

/* Responsive Footer & Reviews */
@media (max-width: 991px) {
  .reviews-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .footer-col-title {
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .reviews-section {
    padding: 80px 0;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .bottom-content {
    flex-direction: column;
    text-align: center;
  }
}/* End custom CSS */