/*
|--------------------------------------------------------------------------
| HostNamaste IP Calculator v2
|--------------------------------------------------------------------------
*/

:root{


--hn-primary:#f97316;
--hn-primary-dark:#ea580c;
--hn-green:#16a34a;
--hn-bg:#f5f7fb;
--hn-card:#ffffff;
--hn-border:#e5e7eb;
--hn-text:#111827;
--hn-muted:#6b7280;

--shadow-sm:0 8px 20px rgba(0,0,0,.05);

--shadow-md:0 18px 45px rgba(0,0,0,.08);

--shadow-lg:0 28px 70px rgba(0,0,0,.12);

--radius:22px;

}

*{

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

margin:0;

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

background:var(--hn-bg);

color:var(--hn-text);

line-height:1.65;

}

/*--------------------------------------------------------------
Hero
--------------------------------------------------------------*/

.hero{

padding:90px 20px;

background:

radial-gradient(circle at top right,
rgba(249,115,22,.08),
transparent 35%),

radial-gradient(circle at bottom left,
rgba(22,163,74,.08),
transparent 35%),

linear-gradient(135deg,#ffffff,#f8fafc);

border-bottom:1px solid var(--hn-border);

}

.hero-logo{

max-width:380px;

margin-bottom:30px;

}

.hero h1{

font-size:52px;

font-weight:800;

margin-bottom:20px;

}

.hero p{

font-size:20px;

color:var(--hn-muted);

max-width:900px;

margin:auto;

}

/*--------------------------------------------------------------
Feature Badges
--------------------------------------------------------------*/

.feature-badges{

margin-top:35px;

}

.feature-badges span{

display:inline-block;

padding:10px 18px;

background:#fff;

border:1px solid var(--hn-border);

border-radius:50px;

margin:6px;

font-weight:600;

box-shadow:var(--shadow-sm);

transition:.25s;

}

.feature-badges span:hover{

transform:translateY(-3px);

box-shadow:var(--shadow-md);

}

.container{

max-width:1480px;

}

/*--------------------------------------------------------------
Calculator Card
--------------------------------------------------------------*/

.calculator-card{

background:#fff;

margin-top:-32px;

padding:45px;

border-radius:var(--radius);

box-shadow:var(--shadow-lg);

position:relative;

z-index:5;

}

.form-label{

font-weight:600;

}

.form-control{

border-radius:16px;

padding:16px;

border:1px solid #d7dce4;

transition:.25s;

}

.form-control:focus{

border-color:var(--hn-primary);

box-shadow:0 0 0 .2rem rgba(249,115,22,.15);

}

/*--------------------------------------------------------------
Buttons
--------------------------------------------------------------*/

.btn-hn{

background:var(--hn-primary);

color:#fff;

border:none;

border-radius:16px;

padding:16px 28px;

font-weight:700;

transition:.25s;

}

.btn-hn:hover{

background:linear-gradient(135deg,#ea580c,#c2410c);

color:#fff;

transform:translateY(-3px);

box-shadow:0 14px 28px rgba(249,115,22,.35);

}

/*--------------------------------------------------------------
Results Section
--------------------------------------------------------------*/

.results-section{

padding-top:25px;

padding-bottom:60px;

}

.results-section h2{

font-weight:800;

margin-bottom:15px;

}

.results-section p{

color:var(--hn-muted);

}

/*--------------------------------------------------------------
Summary Cards
--------------------------------------------------------------*/

.summary-card{

background:#fff;

border-radius:20px;

padding:30px;

text-align:center;

border:1px solid var(--hn-border);

box-shadow:var(--shadow-sm);

height:100%;

transition:.25s;

}

.summary-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow-md);

}

.summary-icon{

width:72px;

height:72px;

margin:0 auto 18px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#fff7ed,#fdba74);

color:var(--hn-primary);

font-size:34px;

}

.summary-card h3{

font-size:28px;

font-weight:800;

margin-bottom:10px;

word-break:break-word;

}

.summary-card p{

margin:0;

font-size:15px;

color:var(--hn-muted);

}

/*--------------------------------------------------------------
Information Cards
--------------------------------------------------------------*/

.info-card{

display:flex;

align-items:center;

background:#fff;

border-radius:20px;

padding:28px;

border:1px solid var(--hn-border);

box-shadow:var(--shadow-sm);

height:100%;

transition:.25s;

}

.info-card:hover{

transform:translateY(-5px);

box-shadow:var(--shadow-md);

}

.info-icon{

width:58px;

height:58px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

background:#fff7ed;

color:var(--hn-primary);

font-size:24px;

margin-right:18px;

flex-shrink:0;

}

.info-content{

flex:1;

min-width:0;

}

.info-content small{

display:block;

font-size:13px;

font-weight:600;

color:var(--hn-muted);

margin-bottom:6px;

text-transform:uppercase;

letter-spacing:.5px;

}

.info-content h5{

margin:0;

font-size:17px;

font-weight:700;

word-break:break-word;

line-height:1.45;

}

/*--------------------------------------------------------------
Copy Button
--------------------------------------------------------------*/

.btn-copy{

width:48px;

height:48px;

border-radius:12px;

border:1px solid var(--hn-border);

background:#fff;

display:flex;

align-items:center;

justify-content:center;

transition:.25s;

margin-left:15px;

}

.btn-copy:hover{

background:var(--hn-primary);

border-color:var(--hn-primary);

color:#fff;

transform:scale(1.08);

}

.btn-copy i{

font-size:20px;

}

/*--------------------------------------------------------------
Network Details
--------------------------------------------------------------*/

.network-section{

margin-top:50px;

}

.network-section h2{

font-size:34px;

font-weight:800;

margin-bottom:30px;

}

.network-section hr{

margin:50px 0;

border-color:#e5e7eb;

}

/*--------------------------------------------------------------
Card Hover Effects
--------------------------------------------------------------*/

.info-card:hover .info-icon{

background:linear-gradient(135deg,var(--hn-primary),var(--hn-primary-dark));

color:#fff;

transition:.3s;

}

.info-card:hover h5{

color:var(--hn-primary);

}

/*--------------------------------------------------------------
Code / IP Values
--------------------------------------------------------------*/

.info-content h5{

font-family:Consolas,Monaco,'Courier New',monospace;

font-size:16px;

}

/*--------------------------------------------------------------
Alerts
--------------------------------------------------------------*/

.alert{

border:none;

border-radius:18px;

padding:20px;

box-shadow:var(--shadow-sm);

}

.alert-success{

background:#ecfdf5;

color:#166534;

}

.alert-warning{

background:#fffbeb;

color:#92400e;

}

.alert-danger{

background:#fef2f2;

color:#991b1b;

}

/*--------------------------------------------------------------
Tables (Future Use)
--------------------------------------------------------------*/

.table{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:var(--shadow-sm);

}

.table > thead{

background:var(--hn-primary)!important;

}

.table > thead > tr > th{

background:var(--hn-primary)!important;

color:#fff !important;

border-color:var(--hn-primary-dark)!important;

}

.table th{

font-weight:700;

border-bottom:1px solid #e5e7eb;

}

.table td{

vertical-align:middle;

}

/*--------------------------------------------------------------
Badges
--------------------------------------------------------------*/

.badge{

padding:8px 14px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.badge-ipv4{

background:#fff7ed;

color:var(--hn-primary);

}

.badge-ipv6{

background:#ecfdf5;

color:#16a34a;

}

.badge-success{

background:#dcfce7;

color:#15803d;

}

.badge-warning{

background:#fff7ed;

color:var(--hn-primary);

}

/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/

.footer{

margin-top:80px;

padding:50px 20px;

background:#fff;

border-top:1px solid #e5e7eb;

}

.footer h5{

font-weight:700;

margin-bottom:18px;

}

.footer a{

color:#4b5563;

text-decoration:none;

}

.footer a:hover{

color:var(--hn-primary);

}

.footer small{

color:#6b7280;

}

/*--------------------------------------------------------------
Print
--------------------------------------------------------------*/

@media print{

.hero{

display:none;

}

.calculator-card{

display:none;

}

.btn-copy{

display:none;

}

body{

background:#fff;

}

.summary-card,

.info-card{

box-shadow:none;

border:1px solid #ccc;

}

}

/*--------------------------------------------------------------
Selection
--------------------------------------------------------------*/

::selection{

background:#f97316;

color:#fff;

}

/*--------------------------------------------------------------
Educational Section
--------------------------------------------------------------*/

.education-section{

padding:80px 0;

background:#fff;

}

.education-section h2{

font-size:38px;

font-weight:800;

margin-bottom:25px;

}

.education-section p{

font-size:17px;

color:var(--hn-muted);

line-height:1.8;

}

.education-section ul{

padding-left:20px;

}

.education-section li{

margin-bottom:12px;

}

/*--------------------------------------------------------------
Feature Cards
--------------------------------------------------------------*/

.feature-box{

background:#fff;

padding:30px;

border-radius:20px;

border:1px solid var(--hn-border);

box-shadow:var(--shadow-sm);

transition:.25s;

height:100%;

}

.feature-box:hover{

transform:translateY(-5px);

box-shadow:var(--shadow-md);

}

.feature-box i{

font-size:40px;

color:var(--hn-primary);

margin-bottom:18px;

display:block;

}

.feature-box h4{

font-size:22px;

font-weight:700;

margin-bottom:15px;

}

/*--------------------------------------------------------------
Calculator Button Alignment
--------------------------------------------------------------*/

@media (min-width: 992px){

    .calculator-card .col-lg-3{

        display:flex;
        align-items:flex-end;

    }

    .calculator-card .btn-hn{

        width:100%;
        margin-bottom:2px;   /* Fine tune this if needed */
    }

}

/*--------------------------------------------------------------
Responsive
--------------------------------------------------------------*/

@media (max-width:992px){

.hero h1{

font-size:42px;

}

.calculator-card{

padding:35px;

}

}

@media (max-width:768px){

.hero{

padding:55px 20px 90px;

}

.hero-logo{

max-width:240px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:17px;

}

.feature-badges span{

display:block;

max-width:240px;

margin:10px auto;

}

.info-card{

flex-direction:column;

text-align:center;

}

.info-icon{

margin-right:0;

margin-bottom:15px;

}

.btn-copy{

margin:20px 0 0;

width:100%;

}

.summary-card{

padding:35px;

}

}

/*--------------------------------------------------------------
Animations
--------------------------------------------------------------*/

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(20px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

.summary-card,
.info-card,
.feature-box{

animation:fadeUp .5s ease;

}

/*--------------------------------------------------------------
Navbar
--------------------------------------------------------------*/

.navbar{

border-bottom:1px solid #ececec;

}

.navbar-brand img{

transition:.3s;

}

.navbar-brand img:hover{

transform:scale(1.05);

filter:drop-shadow(0 6px 16px rgba(249,115,22,.20));

}

.navbar .nav-link{

font-weight:600;

margin-left:8px;

color:var(--hn-text);

transition:all .25s ease;

}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active{

color:var(--hn-primary)!important;

}

.navbar-toggler{

border-color:var(--hn-border);

}

.navbar-toggler:focus{

border-color:var(--hn-primary);

box-shadow:none;

}

/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/

footer a{

text-decoration:none;

}

.feature-badges span{

margin:6px;

}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active{

color:var(--hn-primary)!important;

}

.alert-danger{

background:#fff7ed;

border-left:5px solid var(--hn-primary);

border-top:none;

border-right:none;

border-bottom:none;

color:#7c2d12;

border-radius:16px;

}

.alert-danger h5{

color:var(--hn-primary);

font-weight:700;

}

/*--------------------------------------------------------------
Copy Toast
--------------------------------------------------------------*/

.copy-toast{

position:fixed;

bottom:25px;

right:25px;

background:var(--hn-primary);

color:#fff;

padding:14px 22px;

border-radius:14px;

font-weight:600;

box-shadow:0 10px 30px rgba(0,0,0,.18);

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:all .3s ease;

z-index:9999;

}

.copy-toast.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

/*--------------------------------------------------------------
IP Detection Badge
--------------------------------------------------------------*/

.ip-detect-badge{

display:inline-block;

margin-top:12px;

padding:8px 16px;

border-radius:30px;

font-size:14px;

font-weight:600;

background:#f3f4f6;

color:#6b7280;

transition:.25s;

}

.ipv4-detected{

background:#d1fae5;

color:#065f46;

}

.ipv6-detected{

background:#fff7ed;

color:var(--hn-primary);

}

.invalid-ip{

background:#fee2e2;

color:#991b1b;

}

.btn-copy:active{

transform:scale(.95);

}

.table tbody tr{

transition:.2s;

}