html{box-sizing:border-box}
*, *::before, *::after{box-sizing:inherit}
body { font-family: Arial, sans-serif; margin:0; padding:0; background:#fff; color:#333; }
h1{font-size:1.8em;}h2{font-size:1.5em;}h3{font-size:1.3em;}h4{font-size:1.1em;}h5{font-size:1em;}h6{font-size:0.9em;}
.main-container{max-width:1280px;margin:0 auto;} 
/*topbar*/
.topbar{display: flex;background: #182c39;padding: 10px 20px;align-items: anchor-center;justify-content: space-between;
font-size:20px;} .topbar a{text-decoration:none;color:#fff;}
.logo img{display:block;align-content:center;border-radius:4px;}
.ai-chat{margin-left: 0;}
.topnav{display:flex;align-items: center;}
.search-icon{color:#fff;text-decoration:none;margin: 0px 10px;font-size: 30px;}.top-nav .search-icom{font-size: 30px;}
.genSearch {height: 100%;width:100%;position:absolute;z-index: 1;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.9);}
.genSearch-content {position: relative;top:6em;width:90%;text-align: center;margin: auto;}
.genSearch-content .searchBar{margin-bottom:1em;padding:4px;background:#fff;border-radius:4px;display: flex;justify-content:space-between;}
.genSearch-content input[type=text]{padding: 15px;font-size: 17px;border: none;width: 80%;background: white;}
.genSearch-content button{width:20%;padding: 8.2px;font-size: 25px;border: none;}
.genSearch .closebtn {position: absolute;top: 20px;right: 45px;font-size: 60px;cursor: pointer;color: white;}
.genSearch #resultsBox{background: #fff;padding:10px;font-size:1.5em;border:solid 2px #333;}
.genSearch #resultsBox a {text-decoration:none;}
.mb-icon {right:1em;cursor:pointer;color:#fff;text-decoration: none;}
.gMenuC {height:100%;width:0;position:fixed;z-index:1;top:0;right:0;background-color:rgba(0,0,0, 0.9);
overflow-x:hidden;transition:0.5s;}
.gMenuC-content {position: relative;top:11%;width: 100%;text-align: center;margin-top: 30px;}
.gMenuC a {padding:8px;text-decoration:none;display:block;transition:0.3s;}
.gMenuC ul {margin: 0;padding: 0;}
.gMenuC ul li a{border: solid #fff 1px;background:initial;color:#fff;margin:1em;}
.gMenuC a:hover, .gMenuC a:focus {color: #f1f1f1;}
.gMenuC .closebtn {position:absolute;top:10px;right:18px;}
.gMenuC .searchinnav{margin: 20px 1em;height:7em;border:solid #fff 1px;border-radius:1em;align-content:center;}
.gMenuC .searchinnav form{margin:0px 9px;}
.gMenuC .searchinnav input, .gMenuC .searchinnav button {background:initial;color:#fff;border:0;}
.gMenuC .searchinnav input {max-width: 70%;padding: 17px 7px;}
.gMenuC .searchinnav button{max-width:30%;padding:11px 6px;font-size:2em;}
.button {display:inline-block;background:#182c39;color:white;padding:12px 25px;text-decoration:none;border-radius:5px;margin-top:20px;
  transition:0.3s; }
.button:hover {background:#e65c50;}
h2 {color:#0073e6;margin-bottom:20px;text-align:center;}
.cards {display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:20px;}
.card {background:white;border-radius:8px;padding:20px;box-shadow:0 4px 8px rgba(0,0,0,0.1);transition:0.3s;}
.card:hover {box-shadow:0 8px 16px rgba(0,0,0,0.2);transform:translateY(-5px);}
.card h3{margin-top:0;color:#0073e6;}
header {display:block;background:#fff;color:#314355;text-align:center;padding:0; }
header h1 {margin:0;padding-top:2em;}
header p {margin-top:20px;font-size:1.2em;line-height:1.4;}
header .site-pr {width:100%;}
header #site-pr-text{padding: 0px 20px 20px 20px;}
footer {background:#333;color:white;text-align:center;padding:20px;}
footer a {color:#ff6f61;text-decoration:none;}
/* Canva */
.cta-button {display: inline-block; background: #f59e0b; color: white; padding: 1rem 2.5rem; border-radius: 50px;
text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease;box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);}
.cta-button:hover {background: #d97706;transform: translateY(-2px);box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);}
.services {background: white;padding: 2rem 0;}
.section-title {text-align: center;font-weight: 700;margin-bottom: 3rem;color: #1f2937;}
.cBottom .section-title {color:#fff}
.services-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem;margin-top: 3rem;}
.service-card {margin:0 10px;background:#e9ecef;padding:2.5rem;border-radius:20px;text-align:center;
transition:all 0.3s ease;border:2px solid transparent;}
.service-card:hover {transform: translateY(-5px);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);border-color: #4f46e5;}.service-icon {
font-size: 3rem;margin-bottom: 1.5rem;}
.service-card h3 {font-weight: 600;margin-bottom: 1rem;color: #1f2937;}
.service-card p {color:#182c39;line-height:1.6;}
.features {background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);padding: 6rem 0;color: white;
border-bottom: solid #fbbf24 1px;}
.features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;margin-top: 3rem;}
.feature-item {text-align: center;padding: 1.5rem;}
.feature-number {font-size: 2.5rem;font-weight: 800;color: #fbbf24;margin-bottom: 1rem;}
.feature-item h4 {font-weight: 600;margin-bottom: 0.5rem;}
.testimonials {background: white;padding: 6rem 0;}
.testimonial-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem;margin-top: 3rem;}
.testimonial {background: #f1f5f9;padding: 2rem;border-radius: 15px;position: relative;}
.testimonial::before {content: '"';font-size: 4rem;color: #4f46e5;position: absolute;top: -10px;left: 20px;font-weight: bold;}
.testimonial-text {font-style: italic;margin-bottom: 1.5rem;padding-top: 1rem;}
 .testimonial-author {font-weight: 600;color: #4f46e5;}
 footer {background: #fff;color: #333;padding: 3rem 0;text-align: center;}
.footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;margin-bottom: 2rem;}
.footer-section h4 {font-weight: 600;margin-bottom: 1rem;color:#705102;}
.footer-section a {color:#333;text-decoration: none;display: block;margin-bottom: 0.5rem;transition: color 0.3s ease;}
.footer-section a:hover {color: #fbbf24;}
/* AiChat */
#aiChat{width: 0;background:#fff;top:0;left:0;height: 100%;position: fixed;z-index: 9999;right: 0;overflow-x: hidden;transition: 0.5s;}
.chat-container{width: 100%;max-width: 900px;height: 100dvh;margin: 0 auto;border: 2px solid #0d47a1;border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);background-color: #fff;display: flex;flex-direction: column;overflow: hidden;}
.chat-container h1{padding-top: 1px;font-size: 2em;}
.chatAI-header{background-color: #0d47a1;color: #fff;}
.header-flex {display: flex;justify-content: space-between;align-items: center;padding: 10px 20px;}
.chatContent {width: 100%;max-width: 900px;height: 100dvh;margin: 0 auto;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);background-color: #fff;
display: flex;flex-direction: column;overflow: hidden;}
.chat-box{flex: 1;min-height: 0;padding: 20px;overflow-y: auto;display: flex;flex-direction: column;}
.xusr-intp{padding: 10px;background-color: #f9f9f9;border-top: 1px solid #ddd;flex-shrink: 0;}
.input-container {display: flex;gap: 10px;align-items: center;}
#chatInput {flex-grow: 1;border: 1px solid #ccc;border-radius: 20px;padding: 10px 15px;font-size: 1rem;outline: none;transition: border-color 0.3s;}
#sendBtn{background-color: #0d47a1;color: #fff;border: none;border-radius: 50%;width: 40px;height: 40px;display: flex;justify-content: center;
align-items: center;cursor: pointer;transition: background-color 0.3s;}
#sendBtn svg{width: 20px;height: 20px;}
.closeChat{background: inherit;font-size: 2em;color: #fff;}
.user-message, .ai-message, .error-message, .typing-animation {padding: 10px 15px;border-radius: 20px;margin-bottom: 10px;
max-width: 75%;word-wrap: break-word;}
.user-message {background-color: #e2f0ff;align-self: flex-end;color: #333;}
.ai-message {background-color: #f1f1f1;align-self: flex-start;color: #555;}
.typing-animation {background-color: #f1f1f1;align-self: flex-start;color: #555;animation: pulse 1s infinite;}
.error-message {background-color: #ffcccc;color: #d8000c;align-self: center;text-align: center;}
@keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 50% {transform: scale(1.05); opacity: 1;}
100% {transform: scale(1);opacity: 0.8;} }
.message.new {animation: fadeIn 0.4s forwards;}
@keyframes fadeIn {to {opacity: 1;}}
.typing span {display: inline-block;animation: bounce 1s infinite;}
@keyframes bounce {0%, 80%, 100% {transform: translateY(0);}40% {transform: translateY(-5px);}}
.myrclaXG {border-left: 5px solid #e74c3c;padding: 10px;margin-bottom: 5px;border-radius: 5px;}
.myrclaGC {border-left: 5px solid #2ecc71;padding: 10px;margin-bottom: 5px;border-radius: 5px;}
.myrclaW {border-left: 5px solid #3498db;padding: 10px;margin-bottom: 5px;border-radius: 5px;}

@media (max-width: 768px) {.hero h1 {font-size: 2.5rem;}
.services-grid, .features-grid, .testimonial-grid {grid-template-columns: 1fr;}}
/* Google CTA divider */
.google-cta {display: flex;justify-content: center;align-items: center;margin: 1.5rem 0;gap: 0.5rem;width: 100%;}
.google-cta-link {display: inline-flex;align-items: center;gap: 0.8rem;text-decoration: none;background: #ffffff;
border: 1px solid rgba(66,133,244,0.9);color: #111827;padding: 0.55rem 1rem;border-radius: 999px;box-shadow: 0 2px 8px rgba(0,0,0,0.06);transition: transform 180ms ease, background 180ms ease, color 180ms ease;font-family: inherit;}
/* small stacked text */
.google-cta-text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.google-cta-text strong { font-size: 1rem; }
.google-cta-sub { font-size: 0.75rem; color: #6b7280; margin-top: 0.12rem; }
/* icon */
.google-cta-icon {font-size: 1.25rem;line-height: 1;color: #fbbf24; /* accent (star) */}
/* hover / focus */
.google-cta-link:hover, .google-cta-link:focus {transform: translateY(-3px);background: rgba(66,133,244,0.06);
box-shadow: 0 8px 24px rgba(14,30,37,0.08);outline: none;}
.google-cta-link:focus-visible {outline: 3px solid rgba(66,133,244,0.18);outline-offset: 4px;}
/* responsive smaller on mobile if needed */
@media (max-width: 420px) {.google-cta-link { padding: 0.45rem 0.8rem; gap: 0.5rem; }.google-cta-text strong { font-size: 0.95rem; }
.google-cta-sub { font-size: 0.7rem; } }

@media (min-width:768px) {
.main-container {width:90%;}
h1{font-size:2.5em;} h2{font-size:2em;} h3{font-size:1.7em;} h4{font-size:1.4em;} h5{font-size:1.2em;}h6{font-size:1em;}
#genMenu{position: static; width: auto;height: auto;display: flex;flex-direction: column;}
.gMenuC{background-color: initial;}
.gMenuC ul {display:flex;list-style: none;}
.gMenuC ul li{    }
.gMenuC ul li a{border:0;margin:0em 1em;}
.gMenuC-content {display:flex;justify-content:flex-end;align-items:center;padding:10px;margin:0;top:0;}
.gMenuC a{margin:8px;padding:0;font-size:1em;}	
.genSearch-content {top:10em;width:60%;}
.genSearch-content button{width: 10%}
.topnav{flex-direction: row-reverse; align-items:center;}
.search-icon{margin:1px 10px;}
.mb-icon, .gMenuC .closebtn, .searchinnav{display:none;}
header {display:flex;padding:30px 20px; }
header h1 {margin:0;padding-top:1.5em;}
header p {margin-top:20px;font-size:1.2em;}
header .button {margin-top: 4%;}
header .site-pr {width:50%;}
header #site-text{background-color: #fff;}
.ai-chat{margin-left: auto;}
}
 
#front-page header {background: url("/img/buzhala-ai-gen.webp") center/cover no-repeat;min-height: 100vh;display: flex;flex-direction: column;
justify-content: center;align-items: center;text-align: center;padding: 0 1rem;box-sizing: border-box;position: relative;z-index: 0;}
#front-page header h1 {font-size: clamp(2rem, 6vw, 4rem);color: #222;margin-bottom: 1rem;}
#front-page header p {font-size: clamp(1rem, 2vw, 1.5rem);color: #444;max-width: 700px;}
#front-page header::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
z-index:0;}
#front-page header * {position: relative;z-index: 1;}
/* 367*/