.content-container {
width: 95%;
margin: 15px auto;
border-radius: 5px;
background: #f9f9f9;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.dark-mode .content-container{background: #464646;}
.dark-mode .content-container h2{color: #fff;}
.dark-mode .content-container h2{color: #fff;}
.dark-mode .content-container p{color: #fff;}
.dark-mode .content-container ul li {background: #222}
.content-container h2 {
text-align: center;
color: #333;
font-size: 24px;
border-bottom: 2px solid #007BFF;
padding-bottom: 10px;
margin-bottom: 20px;
}
.content-container p, .content-container ul {
font-size: 16px;
color: #444;
line-height: 1.6;
}
.content-container ul {
list-style: none;
padding: 0;
}
.content-container ul li {
background: #fff;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
}
.content-container ul li::before {
content: "âœâ€";
color: #007BFF;
font-weight: bold;
margin-right: 10px;
}
.highlight {
font-weight: bold;
color: #d9534f;
margin: 0 4px 0 4px;
}
.carousel-container {
position: relative;
width: 100%;
max-width: 100%;
height: 33vh;
margin: 0 auto;
overflow: hidden;
}
.carousel {
position: relative;
width: 100%;
height: 100%;
}
.carousel-item {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.carousel-item.active {
opacity: 1;
z-index: 1;
}
.carousel-caption {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px 20px;
border-radius: 10px;
font-size: 18px;
text-align: center;
max-width: 90%;
white-space: pre-wrap;
}
@media (max-width: 768px) {
.carousel-caption {
font-size: 14px;
padding: 6px 12px;
}
}
@media (max-width: 480px) {
.carousel-caption {
font-size: 12px;
padding: 4px 8px;
}
}
.carousel-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
padding: 0 20px;
z-index:9;
}
.carousel-nav span {
font-size: 30px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
cursor: pointer;
border-radius: 5px;
}
.carousel-nav span:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.dark-mode .panelde{
color: #fff;
}
.domain-container {
width: 90%;
margin: auto;
text-align: center;
}
.domain-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.domain-table th, .domain-table td {
padding: 6px;
border: 1px solid #ddd;
}
.domain-table th {
background-color: #007BFF;
color: white;
}
.dark-mode .domain-table th {
background-color: #222222;
color: white;
}
.domain-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.dark-mode .domain-table tr:nth-child(even) {
background-color: gray;
}
.buy-button {
background-color: #28a745;
color: white;
border: none;
padding: 8px 15px;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
}
.buy-button:hover {
background-color: #218838;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
margin: 20px 0;
}
.pagination a {
padding: 8px 12px;
background: #007BFF;
color: white;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: 0.3s;
}
.pagination a.active {
background: #0056b3;
}
.pagination a:hover {
background: #0056b3;
}
.dark-mode .pagination a {
background: #000;
color: #fff;
}
.dark-mode .pagination a.active {
background: #222;
}
.modal {display:none; position: fixed; z-index:10000; left:0; top:0; width:100%; height:100%; background-color: rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center;}
.modal-content {background:#fff; padding:25px 30px; border-radius:12px; width:400px; max-width:90%; box-shadow:0 8px 30px rgba(0,0,0,0.3); text-align:center; animation: fadeIn 0.3s ease-in-out;}
.dark-mode .modal-content {background:#323232;box-shadow: 0 8px 30px rgb(174 174 174 / 30%);}
.modal-content h3 {margin-bottom:20px; color:#0d6efd; font-size:22px;}
.submit-btn {background:#0d6efd; color:white; border:none; padding:10px 18px; border-radius:6px; font-size:16px; cursor:pointer; margin-right:10px;}
.submit-btn:hover {background:#084298;}
.close-btn {background:#ccc; color:#333; border:none; padding:10px 18px; border-radius:6px; font-size:16px; cursor:pointer;}
.close-btn:hover {background:#999;}
@keyframes fadeIn {from {opacity:0; transform:translateY(-20px);} to {opacity:1; transform:translateY(0);}}
xeta{position: relative;left: 0%;transform: translate(-50%, -50%);color: #6c6c6c;}
.dark-mode xeta{color: #fff;} .dark-mode xeta::before {background-color: #363636;}
xet{font-size: 16px;letter-spacing: 2px;text-transform: uppercase;line-height: 100%;position: relative;mix-blend-mode: difference;}
xeta::before {content: "";position: absolute;left: 0;top: 0;width: 100px;height: 100%;background-color: #007bff;animation: move 4s linear infinite;z-index: -1;}
@keyframes move {0% , 100% {left: 0;}
50% {left: calc(100% - 100px);}}
.dark-mode #domainSearchInput {
background: #363636;
}
.dark-mode #result {
background: #121212f0;
}
#domainSearchInput {
width: 70%;
padding: 10px;
border-radius: 30px;
border: 1px solid #ccc;
font-size: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
outline: none;
background: #fff;
transition: box-shadow 0.3s ease;
margin: 5px;
}
#domainSearchInput:focus {
box-shadow: 0 0 10px #0d6efd;
}
.clear-btn {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
cursor: pointer;
font-size: 18px;
color: #aaa;
display: none;
}
.clear-btn.visible {
display: block;
position: absolute;
left: 60%;
font-size: 45px;
}
#result {
position: absolute;
width: 70%;
max-height: 320px;
overflow-y: auto;
border-radius: 0 0 5px 5px;
background: #f9f9f9ed;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
z-index: 1050;
margin-top: 0px;
left: 15%;
top: 100%;
scrollbar-width: none;
}
#result .item {
display: flex;
justify-content: space-between;
padding: 10px 20px;
border-bottom: 1px solid #eee;
align-items: center;
cursor: pointer;
}
#result .item:last-child {
border-bottom: none;
}
#result .domain-name {
color: #0d6efd;
font-weight: 600;
text-decoration: none;
}
#result .prices {
font-size: 13px;
color: #d9534f;
font-weight: 700;
display: flex;
gap: 15px;
min-width: 170px;
justify-content: flex-end;
}
#result .prices div {
text-align: right;
}
#result .check-btn {
background-color: #0d6efd;
color: white;
padding: 5px 12px;
border-radius: 4px;
border: none;
font-weight: 600;
transition: background-color 0.3s ease;
}
#result .check-btn:hover {
background-color: #084298;
}
.search-result-container {
position: absolute;
z-index: 1000;
}
.search-container {
position: relative;
background: #f9f9f9;
}
.dark-mode .search-container {
background: #121212;
}
.back-to-top {position: fixed;bottom: 105px;right: 20px;background-color: #fff;background-image: url(/images/icons/uparrow.png);background-size: contain;border: none;border-radius: 50%;width: 48px;height: 48px;display: none;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.back-to-top:hover {background-color:#c3c3c3;}
.dark-mode .back-to-top{background-color: #797979;}
.dark-mode .back-to-top:hover{background-color: #393939;}
.close-btn {cursor: pointer;margin-top: 10px;padding: 5px 10px;background: red;color: white;border: none;border-radius: 5px;}