@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');



body {
font-family:'Outfit',sans-serif;
padding:20px;
background-color: hsl(210 40% 98%);
color: hsl(222 47% 11%);
position: relative;
background-image: url(img/background-default-light.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.gbox{z-index:-999;position:relative}
.gradient{position:fixed;width:400px;height:400px;border-radius:50%;filter:blur(80px);opacity:.7}

.blue{background:#b8d4fc;top:0;left:0}
.pink{background:#f7c6e6;bottom:0;left:10%}
.purple{background:#e2c7fa;top:10%;right:0;opacity:.5}
.green{background:#c4f1da;bottom:0;right:10%;opacity:.5}

/*Deep gradient */
.green {background:#f1ecc4;} .green, .purple{width:600px;height:600px;}

@media (max-width: 768px) {
.gradient{width:350px;height:350px;opacity:.7;filter:blur(60px)}
.purple{top:40%}
.green{background:#f1ecc4;bottom:10%;left:0}
}

.container1{max-width:800px;margin:auto}
h1{font-size:28px;color:#222}
.upload-box{border-radius:18px;padding:20px;margin:120px 0 auto;box-shadow:0 4px 10px #0000001a;position:relative;box-shadow:0 8px 32px #0000000d;background-color:#fbfcfe}
.article-box{border-radius:18px;padding:20px;margin:50px 0 auto;margin-bottom: 50px;box-shadow:0 4px 10px #0000001a;position:relative;box-shadow:0 8px 32px #0000000d;background-color:#fbfcfe;text-align:left}
.article-box h1, .article-box h2 {text-align:center}


.separator{display:flex;align-items:center;text-align:center;margin:20px 0;color:hsl(215 16% 47%)}
.separator::before,.separator::after{content:"";flex:1;border-bottom:1px solid hsl(214 32% 91%)}
.separator:not(:empty)::before{margin-right:10px}
.separator:not(:empty)::after{margin-left:10px}

.input-container {margin:auto}
.url-input{font-family:inherit;width:100%;max-width:500px;padding:10px 40px;font-size:16px;border-radius:8px;outline:none;transition:max-width .3s ease-in-out;border:1px solid #d0d9e3;background:#fff url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="11" cy="11" r="8"/%3E%3Cline x1="21" y1="21" x2="16.65" y2="16.65"/%3E%3C/svg%3E') no-repeat 12px center / 20px}
.url-input:focus{max-width:600px}
@media (max-width: 767px) {
.url-input{width:auto;padding: 10px 20px;font-size: 14px;background: none;margin-bottom: 20px;}
}


.search-btn{background: linear-gradient(45deg,#1062ff 0%,#44c0e8 98%);box-shadow: 0px 10px 22px 0px rgba(11, 0, 139, 0.2);color:#fff;border:none;padding:20px 30px;border-radius:12px;font-size:18px;font-weight:600;cursor:pointer;margin-top:15px;font-family:inherit;}
.search-btn:hover{border:0;box-shadow:0 4px 7px -1px #00000026 0 2px 4px -1px #0000001a}
.search-btn:active{background:#167EF8;background-image:linear-gradient(#0000001f 0 0);transform:translateY(2px)}
.options-grid{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}

/* Loading Container */
.loading-container{text-align:center;padding:20px;position:relative}

/* Loading Spinner */
.loading-spinner{width:50px;height:50px;border:5px solid #0000001a;border-top:5px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading Text */
.loading-text{margin-top:15px;font-size:16px;color:#333;font-weight:700}

/* Image Preview */
.preview-container{position:relative;padding:15px;border:1px solid #ddd;border-radius:10px;text-align:center;display:none;max-width:300px;margin:auto}
.preview-image{width:100%;max-width:250px;height:auto;border-radius:18px;object-fit:contain;box-shadow:#1414141f 0 .25rem .375rem -0.0625rem,#14141412 0 .125rem .25rem -.0625rem;cursor: pointer;transition:transform .3s ease}
.preview-image:hover{transform:scale(1.06);transform-origin:center center;} 
.cancel-btn{position:absolute;top:-10px;right:-10px;background:#ff4d4d;color:#fff;border:none;border-radius:50%;width:25px;height:25px;cursor:pointer;box-shadow: 4px 10px 18px 0 rgba(201, 47, 47, 0.47);
background: linear-gradient(0deg, rgb(255, 65, 65) 0%, rgb(255, 112, 107) 100%);transition:transform .3s ease}
.cancel-btn:active{transform:translateY(2px)}

/* Drag and Drop */
.upload-area.drag-over {border-color: #007bff;}

/* Search Options */
.search-options{display:none;margin-top:30px}
.options-grid{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}
.option-btn{display:flex;align-items:center;padding:12px 18px;background:#fff;border:1px solid hsl(214 32% 91%);border-radius:10px;text-decoration:none;font-weight:500;background:#fff;color:#0f1729;box-shadow:0 10px 20px #00000014}
.option-btn:hover{box-shadow:0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07)}
.option-btn img{padding-right:12px;width:36px;height:36px}

.google { color: #ea4335; }
.bing { color: #008374; }
.yandex { color: #cc0000; }
.tineye { color: #444; }


/* Hiding image URL input & search button when preview is shown */
#imageUrl, #searchBtn {display: inline-block;}

/* Advanced */

.container1.part1 {padding-top:40px}

.part1 h1 {color:#0f1729;font-weight: 600;font-size: 60px;line-height: 1;letter-spacing: -.025em;margin-top: 100px;margin-bottom: 0px;}
.container1.part1 p {color: hsl(215 16% 47%);font-size: 20px;line-height: 28px;margin-top: 15px;margin-bottom: 25px;}

.tcenter {text-align: center;}

.part1 h2 {font-weight: 600;font-size: 30px;line-height: 1.5;letter-spacing: -.025em;}
.part1 p {font-weight: 400;font-size: 20px;line-height: 28px;color: hsl(215 16% 47%);}

.part2 h2 {font-weight: 600;font-size: 30px;line-height: 1.5;letter-spacing: -.025em;margin-bottom:0px;}
.part2 h3 {font-weight: 600;font-size: 20px;line-height: 1.5;}
.part2 p {font-weight: 400;font-size: 18px;line-height: 22px;color: hsl(215 16% 47%);margin-top:0px; margin-bottom:30px}

	   n {border: 1px solid rgba(34, 179, 57, 0.2);background-color: rgba(34, 179, 57, 0.1);color: #0f4d18;padding: 6px 14px;border-radius: 50px;font-size: 14px;line-height: 18px;}

@media (max-width: 767px) {
.part1 h1 {font-size: 36px;}
.part1 p {font-size: 16px;}

.part2 h1 {font-size: 36px;}
.part2 p {font-size: 14px;}
}


/* infox */
.border1 {border-top: 1px solid hsl(214 32% 91%);margin: 60px auto; max-width: 900px;}
.border2 {border-top: 1px solid hsl(214 32% 91%);margin: 60px auto; max-width: 900px;}
	
	
.infox.container2{max-width:1000px;margin:50px auto;padding:20px}
.infox h2{font-weight:600;font-size:30px;color:#333;margin-bottom:0}
.infox p.subtitle{color:hsl(215 16% 47%);margin-bottom:30px}
.infox .steps{display:flex;justify-content:space-between;gap:35px}
.infox .step{background-color:hsla(0,0%,100%,.8);backdrop-filter:saturate(200%) blur(30px);padding:20px;border-radius:16px;flex:1;text-align:center;cursor:pointer;border:1.5px solid #ffff;background:#fff9;box-shadow:0 0 4px #66708526;backdrop-filter:blur(20px)}
.infox .step:hover{box-shadow:0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07)}
.infox .icon{width:60px;height:60px;margin:auto;margin-bottom:15px;padding:.75rem;background-color:hsl(222 47% 11% / .1);border-radius:100px}
.infox h3{font-weight:500;font-size:20px;margin-top:0;margin-bottom:10px;color:#222}
.infox p{color:hsl(215 16% 47%);font-size:16px}
@media (max-width: 768px) {
.infox .steps{flex-direction:column}
}


.header{position:fixed;top:10px;left:50%;transform:translateX(-50%);width:80%;max-width:1200px;background:hsla(0, 0%, 100%, 0.47);backdrop-filter:saturate(200%) blur(30px);border-radius:50px;box-shadow: 0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07);display:flex;align-items:center;justify-content:space-between;padding:6px 30px;z-index:999}
.logo{display:flex;align-items:center;font-size:22px;font-weight:700;color:#333}
.logo img{width:100%;height:100%;max-width:140px;margin-right:8px}
.nav-links,.mobile-menu a{text-decoration:none;color:#333;font-weight:300;transition:color .3s ease}
.nav-links a:hover,.mobile-menu a:hover{text-decoration:none}
.nav-links{display:flex;align-items:center}
.nav-links > a,.dropdown > a{margin:0 15px;position:relative;text-decoration:none;color:#333}
a.contact-btn{background: linear-gradient(140deg, #14bfd0, #31ca06); background: linear-gradient(45deg,#1062ff 0%,#44c0e8 98%);box-shadow: 0 20px 38px 0 rgba(36,85,140,.47);box-shadow: 0 4px 7px -1px rgba(0,0,0,.11),0 2px 4px -1px rgba(0,0,0,.07);color:#fff;padding:8px 25px;border-radius:20px;font-weight:400;text-decoration:none;text-align:center;transition:background .3s ease}
a.contact-btn:hover{box-shadow: 0px 10px 22px 0px rgba(36, 85, 140, 0.22);} 
a.contact-btn:active{transform:translateY(2px)}
.mobile-menu .contact-btn{margin-top:15px;text-align:center}
.dropdown{position:relative;cursor:pointer}
.dropdown > a::after{content:"";display:inline-block;vertical-align:middle;width:16px;height:16px;margin-left:4px;background-image:url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5%22%20stroke%3D%22%23333%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}
.dropdown:hover > a::after{transform:rotate(180deg)}
.dropdown.open > a::after{transform:rotate(180deg)}

.dropdown-menu{position:absolute;top:30px;left:0;background:#fff;border-radius:12px;box-shadow:0 8px 16px #00000026;padding:10px 0;min-width:200px;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible}
.dropdown-menu a{display:block;padding:10px 20px;white-space:nowrap;text-decoration:none;color:#333;text-align: left;}
.dropdown-menu a:hover{color:#000;background:#f2f2f2}
.hamburger{display:none;cursor:pointer;transition:color .3s ease}
.hamburger svg{width:24px;height:24px;fill:#333}
.mobile-menu{position:fixed;top:0;right:0;width:260px;height:100%;border: 1.5px solid #ffff;background: #fff9;box-shadow: 0 0 4px #66708526;backdrop-filter: blur(20px);padding:20px;z-index:2000;transform:translateX(100%);transition:transform .3s ease}
.mobile-menu.show{transform:translateX(0)}
.mobile-menu .close-menu{text-align:right;margin-bottom:20px;cursor:pointer;transition:color .3s ease}
.mobile-menu .close-menu svg{width:20px;height:20px;fill:#333}
.mobile-menu a{display:block;padding:12px 0;text-align: left;}

.mobile-dropdown-menu a{padding-left:15px;border:none}
.mobile-dropdown-toggle{display:flex;justify-content:space-between;align-items:center;padding:12px 0;cursor:pointer}
.mobile-dropdown-toggle::after{content:"";display:inline-block;width:16px;height:16px;margin-left:4px;background-image:url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5%22%20stroke%3D%22%23333%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}
.mobile-dropdown-menu{max-height:0;overflow:hidden;transition:max-height .3s ease}
.mobile-dropdown.open .mobile-dropdown-menu{max-height:500px}
.mobile-dropdown.open .mobile-dropdown-toggle::after{transform:rotate(180deg)}


.mobile-dropdown.open .mobile-dropdown-toggle svg{transform:rotate(180deg)}
@media (max-width: 768px) {
.nav-links{display:none}
.hamburger{display:block}
}

.footer{padding:20px;text-align:center;font-size:14px;color:hsl(215 16% 47%)}
.footer-content{border-top:1px solid hsl(214 32% 91%);padding-top:30px;display:flex;flex-direction:column;align-items:center;gap:10px}
.footer-links{display:flex;gap:15px}
.footer-links a{text-decoration:none;color:hsl(215 16% 47%);font-weight:500}
.footer-links a:hover{text-decoration:underline}
@media (min-width: 768px) {
.footer-content{flex-direction:row;justify-content:space-between;max-width:1400px;margin:0 auto}
}

/* Article */
.reverse-image-benefits{text-align:center;padding:60px 20px;color:#333}
.reverse-image-benefits h2{font-weight:600;font-size:30px;color:#333;margin-bottom:10px}
.reverse-image-benefits p{width:90%;max-width:700px;margin:auto;margin-bottom:40px;font-size:16px;color:hsl(215 16% 47%)}
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;max-width:1200px;margin:0 auto}
.benefit-item{padding:30px 20px;border-radius:18px;background:#fff9;box-shadow:0 0 4px #66708526;backdrop-filter:blur(20px);transition:transform 0.3s,box-shadow .3s;cursor:pointer}
.benefit-item:hover{transform:translateY(-5px);box-shadow:0 6px 20px #00000026;border:1px solid #fff}
.benefit-item .icon{color:hsl(215 16% 47%);font-size:32px}
.benefit-item h3{margin-bottom:10px;font-weight:500;font-size:20px}
.benefit-item p{font-size:.95rem;color:hsl(215 16% 47%)}


/* FAQ */
.faq-section{text-align:center;padding:60px 20px;color:#333}
.faq-section h2{font-weight:600;font-size:30px;margin-bottom:10px}
.faq-section p{max-width:700px;margin:auto;margin-bottom:40px;font-size:16px;color:hsl(215 16% 47%)}
.faq-grid{max-width:800px;margin:0 auto;display:grid;gap:20px}
.faq-item{background:#fff9;box-shadow:0 0 4px #66708526;backdrop-filter:blur(20px);border-radius:12px;padding:15px 20px;cursor:pointer;transition:.3s}
.faq-item:hover{box-shadow:0 6px 20px #00000026}
.faq-question{display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:18px;color:#0f1729}
.faq-question svg{width:24px;height:24px;transition:transform .3s}
.faq-answer{display:none;padding-top:10px;font-size:.95rem;color:hsl(215 16% 47%)}
.faq-item.active .faq-answer{display:block}
.faq-item.active .faq-question svg{transform:rotate(180deg)}



/* Grabe Main */

.containerT {
  max-width: 1320px;
  margin: 0 auto;
}

/* Category section */
.category{margin-bottom:2.5rem}
.category-title{font-size:1.25rem;font-weight:600;color:#374151;border-left:4px solid #3b82f6;padding-left:1rem;margin-bottom:1.5rem;display:inline-block;text-align:left}

.item-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width: 640px) {
.item-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 1024px) {
.item-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width: 1280px) {
.item-grid{grid-template-columns:repeat(4,1fr)}
}

/* Item box */
.item-box{display:block;border-radius:.75rem;box-shadow:0 1px 3px #0000001a;padding:1.25rem;background-color:#fff;text-decoration:none;transition:box-shadow 0.2s,transform .2s}
.item-box:hover{box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);transform:translateY(-4px)}

.item-header{display:flex;align-items:center;margin-bottom:1rem;gap:1rem}
.item-icon{width:3.5rem;height:3.5rem;border-radius:.5rem;background-color:#f3f4f6;object-fit:contain;padding:.25rem;transition: box-shadow 0.2s,transform .5s;}
.item-info{display:flex;flex-direction:column}
.item-name{font-size:1.125rem;font-weight:600;color:#1f2937}
.item-domain{font-size:.875rem;color:#6b7280}
.item-title.hidden{display:none}
.item-description{font-size:.875rem;color:#4b5563;line-height:1.5}

.tbox {text-align: left;border: 1.5px solid #ffff;background: #fff9;box-shadow: 0 0 4px #66708526;backdrop-filter: blur(20px);}


.item-box {border: 1px solid #fff;background: #fff9;backdrop-filter: blur(20px);}

.item-box:hover .item-icon{box-shadow:0 10px 20px #00000014;border:1px solid #ffff;border-radius:16px;background-color:#f5f9fd}
/* 
.item-box {border: 1px solid #fff;background: #fff9;box-shadow: none;backdrop-filter: blur(20px);}
.item-icon{box-shadow:0 10px 20px #00000014;border:1px solid #ffff;border-radius:16px;background-color:#f5f9fd}
*/

.loading{display:inline-block;width:20px;height:20px;border:3px solid #0000001a;border-radius:50%;border-top-color:#3498db;animation:spin 1s ease-in-out infinite}
@keyframes spin {
to{transform:rotate(360deg)}
}


.ads-containter {margin:auto}