.elementor-34 .elementor-element.elementor-element-7dc4455{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-c506d42 *//* =========================
 HAVIONEDGE META TITLE GENERATOR
 CSS PART 1
========================= */


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');



*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{

font-family:'Poppins',sans-serif;

background:#f4f8ff;

color:#334155;

}





.container{

width:92%;

max-width:1200px;

margin:auto;

padding:30px 0 70px;

}






/* =========================
 HERO SECTION
========================= */


.hero{

background:linear-gradient(
135deg,
#eff6ff,
#ffffff
);

border:1px solid #dbeafe;

border-radius:28px;

padding:60px 30px;

text-align:center;

box-shadow:0 10px 30px rgba(37,99,235,.05);

}



.badge{

display:inline-block;

background:#dbeafe;

border:1px solid #bfdbfe;

color:#2563eb;

font-size:12px;

font-weight:600;

padding:8px 20px;

border-radius:30px;

}



.hero h1{

margin-top:18px;

font-size:44px;

font-weight:700;

color:#0f2a5f;

line-height:1.3;

}



.hero p{

max-width:800px;

margin:15px auto 0;

color:#64748b;

font-size:15px;

line-height:1.9;

}







/* =========================
 MAIN BOX STYLE
========================= */


.generator-box,
.analysis-box,
.results-box,
.serp-box,
.keyword-insights,
.optimization-box,
.power-box,
.seo-content{


background:#ffffff;

border:1px solid #dbeafe;

border-radius:22px;

padding:35px;

margin-top:30px;

box-shadow:0 8px 25px rgba(37,99,235,.04);

}





.generator-box h2,
.analysis-box h2,
.results-box h2,
.serp-box h2,
.keyword-insights h2,
.optimization-box h2,
.power-box h2,
.seo-content h2{


font-size:25px;

font-weight:700;

color:#0f2a5f;

margin-bottom:12px;

}





.generator-box p{

font-size:14px;

color:#64748b;

line-height:1.8;

}








/* =========================
 INPUT GRID
========================= */


.input-grid{


display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-top:25px;

}





.input-group{


display:flex;

flex-direction:column;

gap:8px;

position:relative;

}





.input-group label{


font-size:13px;

font-weight:600;

color:#475569;

}





.input-group input,
.input-group select{


height:52px;

width:100%;

padding:0 16px;

border-radius:12px;

border:1px solid #dbeafe;

background:#f8fbff;

font-family:'Poppins',sans-serif;

font-size:14px;

color:#334155;

outline:none;

transition:.3s;

}





.input-group input::placeholder{


color:#94a3b8;

}





.input-group input:focus,
.input-group select:focus{


background:#ffffff;

border-color:#60a5fa;

box-shadow:0 0 0 3px rgba(96,165,250,.15);

}





.input-group select{


cursor:pointer;

appearance:auto;

}







/* =========================
 KEYWORD SUGGESTIONS
========================= */


#keywordSuggestions{


position:absolute;

top:82px;

left:0;

right:0;

background:#ffffff;

border:1px solid #dbeafe;

border-radius:14px;

overflow:hidden;

z-index:50;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}





.suggestion-item{


padding:12px 15px;

font-size:13px;

color:#475569;

cursor:pointer;

transition:.2s;

}





.suggestion-item:hover{


background:#eff6ff;

color:#2563eb;

}








/* =========================
 GENERATE BUTTON
========================= */


#generateTitle{


margin-top:28px;

padding:14px 35px;

border-radius:30px;

background:#2563eb;

color:#ffffff;

font-size:14px;

font-weight:600;

font-family:'Poppins',sans-serif;

border:none;

cursor:pointer;

transition:.3s;

}





#generateTitle:hover{


background:#1d4ed8;

transform:translateY(-2px);

}








/* =========================
 ANALYSIS CARDS
========================= */


.analysis-grid{


display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

margin-top:25px;

}





.analysis-card{


background:#f8fbff;

border:1px solid #dbeafe;

border-radius:18px;

padding:25px 15px;

text-align:center;

transition:.3s;

}





.analysis-card:hover{


transform:translateY(-4px);

box-shadow:0 8px 20px rgba(37,99,235,.08);

}





.analysis-card h4{


font-size:12px;

font-weight:500;

color:#64748b;

}





.analysis-card h3{


margin-top:10px;

font-size:26px;

font-weight:700;

color:#2563eb;

}








/* =========================
 GENERATED TITLE RESULTS
========================= */


#titleResults{


margin-top:20px;

}





.title-card{


background:#f8fbff;

border:1px solid #dbeafe;

border-radius:18px;

padding:22px;

margin-bottom:15px;

transition:.3s;

}





.title-card:hover{


border-color:#93c5fd;

box-shadow:0 8px 20px rgba(37,99,235,.08);

}





.title-card h3{


font-size:17px;

font-weight:600;

color:#0f2a5f;

line-height:1.6;

}





.title-card p{


margin-top:8px;

font-size:12px;

color:#2563eb;

font-weight:500;

}





.title-card button{


margin-top:14px;

padding:8px 22px;

background:#2563eb;

color:white;

border:none;

border-radius:25px;

font-family:'Poppins',sans-serif;

font-size:13px;

cursor:pointer;

transition:.3s;

}





.title-card button:hover{


background:#1d4ed8;

}








/* =========================
 EMPTY RESULT
========================= */


.empty-result{


padding:25px;

text-align:center;

color:#94a3b8;

font-size:14px;

background:#f8fbff;

border-radius:15px;

border:1px dashed #dbeafe;

}
/* =========================
        SERP PREVIEW
========================= */


.serp-preview{


background:#f8fbff;

border:1px solid #dbeafe;

border-radius:18px;

padding:25px;

}



.serp-preview h3{


color:#1d4ed8;

font-size:20px;

font-weight:600;

line-height:1.5;

}



.serp-url{


color:#16a34a;

font-size:13px;

margin:8px 0;

}



.serp-preview p{


color:#64748b;

font-size:14px;

line-height:1.8;

}








/* =========================
    KEYWORD INTELLIGENCE
========================= */


.keyword-columns{


display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-top:20px;

}





.keyword-card{


background:#f8fbff;

border:1px solid #dbeafe;

border-radius:18px;

padding:25px;

transition:.3s;

}





.keyword-card:hover{


transform:translateY(-4px);

box-shadow:0 10px 25px rgba(37,99,235,.08);

}





.keyword-card h3{


color:#2563eb;

font-size:17px;

font-weight:600;

margin-bottom:10px;

}





.keyword-card p{


color:#64748b;

font-size:14px;

line-height:1.9;

}








/* =========================
    OPTIMIZATION CARDS
========================= */


.optimization-grid{


display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

margin-top:20px;

}





.optimization-card{


background:#ffffff;

border:1px solid #dbeafe;

border-radius:18px;

padding:22px;

}





.optimization-card h3{


color:#0f2a5f;

font-size:16px;

font-weight:600;

}





.optimization-card p{


color:#64748b;

font-size:13px;

line-height:1.8;

margin:12px 0;

}





.optimization-card span{


color:#2563eb;

font-size:13px;

font-weight:600;

}








/* =========================
        POWER WORDS
========================= */


.power-list{


display:flex;

flex-wrap:wrap;

gap:10px;

margin-top:20px;

}





.power-list span{


background:#eff6ff;

border:1px solid #bfdbfe;

color:#2563eb;

padding:9px 18px;

border-radius:30px;

font-size:13px;

font-weight:500;

transition:.3s;

}





.power-list span:hover{


background:#2563eb;

color:white;

}








/* =========================
        SEO CONTENT
========================= */


.seo-content{


margin-top:35px;

}





.seo-content h2{


color:#0f2a5f;

font-size:26px;

font-weight:700;

margin:35px 0 15px;

}





.seo-content h2:first-child{


margin-top:0;

}





.seo-content p{


color:#64748b;

font-size:15px;

line-height:1.95;

margin-bottom:18px;

}





.seo-content strong,
.seo-content b{


color:#1d4ed8;

font-weight:700;

}





.seo-content ul{


padding-left:25px;

margin:20px 0;

}





.seo-content li{


color:#64748b;

font-size:15px;

line-height:2;

}








/* =========================
        FAQ
========================= */


.faq{


margin-top:35px;

}





.faq h3{


background:#f8fbff;

border:1px solid #dbeafe;

border-radius:14px;

padding:17px 20px;

margin-top:15px;

color:#1e3a8a;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

}





.faq h3:hover{


background:#eff6ff;

border-color:#93c5fd;

}





.faq p{


padding:15px 20px;

color:#64748b;

font-size:14px;

line-height:1.9;

}








/* =========================
        ACTION BUTTONS
========================= */


.action-area{


display:flex;

justify-content:center;

align-items:center;

gap:15px;

flex-wrap:wrap;

margin:35px 0;

}





.action-area button{


padding:12px 28px;

border-radius:12px;

font-family:'Poppins',sans-serif;

font-weight:600;

font-size:13px;

cursor:pointer;

transition:.3s;

}





#copyTitles{


background:#dbeafe;

color:#2563eb;

}





#copyTitles:hover{


background:#2563eb;

color:white;

}





#downloadTitles{


background:#ede9fe;

color:#7c3aed;

}





#downloadTitles:hover{


background:#7c3aed;

color:white;

}





#clearTool{


background:#fee2e2;

color:#dc2626;

}





#clearTool:hover{


background:#dc2626;

color:white;

}








/* =========================
        TOAST
========================= */


#toast{


position:fixed;

right:30px;

bottom:30px;

background:#0f2a5f;

color:#ffffff;

padding:13px 25px;

border-radius:14px;

font-size:13px;

font-weight:500;

opacity:0;

transform:translateY(20px);

transition:.3s ease;

z-index:9999;

box-shadow:0 10px 25px rgba(0,0,0,.15);

}





#toast.show{


opacity:1;

transform:translateY(0);

}








/* =========================
        RESPONSIVE
========================= */


@media(max-width:1000px){


.analysis-grid{


grid-template-columns:repeat(2,1fr);

}



.optimization-grid{


grid-template-columns:repeat(2,1fr);

}



.keyword-columns{


grid-template-columns:1fr;

}


}







@media(max-width:600px){


.container{


width:94%;


}



.hero{


padding:40px 20px;

}



.hero h1{


font-size:28px;

}





.generator-box,
.analysis-box,
.results-box,
.serp-box,
.keyword-insights,
.optimization-box,
.power-box,
.seo-content{


padding:22px;

}





.input-grid{


grid-template-columns:1fr;

}





.analysis-grid{


grid-template-columns:1fr;

}





.optimization-grid{


grid-template-columns:1fr;

}





.seo-content h2{


font-size:21px;

}





.seo-content p,
.seo-content li{


font-size:14px;

}





.action-area{


flex-direction:column;

}





.action-area button{


width:100%;

}





#toast{


left:15px;

right:15px;

text-align:center;

}



}/* End custom CSS */