/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

html{
font-size:100%;
}

body{
background:#f8fafc;
color:#222;
overflow-x:hidden;
}

img,
svg,
video{
max-width:100%;
height:auto;
}

a{
color:inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button,
span,
td,
th{
overflow-wrap:anywhere;
}


/* NAVBAR */

.navbar{

display:flex;
justify-content:space-between;
align-items:center;

padding:15px 8%;

background:white;

position:sticky;

top:0;

z-index:999;

box-shadow:0 4px 20px rgba(0,0,0,.05);

}


/* LEFT LOGO SECTION */

.logo-area{

display:flex;
align-items:center;

gap:8px;

width:max-content;

text-decoration:none;

color:inherit;

}


/* FIX HUGE LOGO */

.logo{

width:65px;
height:auto;

object-fit:contain;

}


/* DEVMINDS TEXT */

.logo-area h2{

font-size:28px;

font-weight:800;

line-height:1;
}

.logo-area h2 span{

color:#0d47a1;

}


.logo-area p{

font-size:11px;

color:#777;

letter-spacing:2px;

margin-top:4px;

text-transform:uppercase;

}


/* CENTER NAVIGATION */

.nav-links{

display:flex;

align-items:center;

gap:35px;

list-style:none;

}


.nav-links li{

list-style:none;

}


.nav-links a{

text-decoration:none;

color:#333;

font-weight:600;

transition:.3s;

position:relative;

}


/* HOVER EFFECT */

.nav-links a:hover{

color:#0d47a1;

}

.nav-links a[aria-current="page"]{

color:#0d47a1;

}


.nav-links a::after{

content:'';

position:absolute;

left:0;
bottom:-6px;

width:0;

height:2px;

background:#0d47a1;

transition:.3s;

}


.nav-links a:hover::after{

width:100%;

}

.nav-links a[aria-current="page"]::after{

width:100%;

}



/* GET QUOTE BUTTON */

.quote-btn{

padding:12px 24px;

background:#0d47a1;

color:white;

text-decoration:none;

border-radius:10px;

font-weight:600;

transition:.3s;

box-shadow:
0 5px 15px rgba(13,71,161,.2);

}


.quote-btn:hover{

transform:translateY(-3px);

background:#08357a;

}

footer{

background:#0f172a;

color:white;

padding:40px 8%;

text-align:center;

}

.footer-content{

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

}

.footer-content h2{

font-size:28px;

}

.footer-content p{

margin:0;

color:#dbeafe;

}

.footer-content a{

color:#dbeafe;

text-decoration:none;

font-weight:600;

}

.footer-content a:hover{

color:white;

}

.menu-toggle{

display:none;

width:46px;

height:46px;

border:1px solid #d9e2ef;

border-radius:8px;

background:white;

align-items:center;

justify-content:center;

flex-direction:column;

gap:5px;

cursor:pointer;

box-shadow:
0 4px 14px rgba(0,0,0,.05);

}

.menu-toggle span{

display:block;

width:21px;

height:2px;

background:#0f172a;

border-radius:99px;

transition:.25s ease;

}

.navbar.menu-open .menu-toggle span:nth-child(1){

transform:translateY(7px) rotate(45deg);

}

.navbar.menu-open .menu-toggle span:nth-child(2){

opacity:0;

}

.navbar.menu-open .menu-toggle span:nth-child(3){

transform:translateY(-7px) rotate(-45deg);

}



/* MOBILE */

@media(max-width:900px){

.navbar{

display:grid;

grid-template-columns:auto 1fr auto;

gap:12px;

padding:16px 5%;

}

.menu-toggle{

display:flex;

justify-self:end;

}


.nav-links{

grid-column:1 / -1;

display:none;

flex-direction:column;

align-items:stretch;

gap:0;

padding:10px;

background:#f8fafc;

border:1px solid #e3e8f2;

border-radius:10px;

box-shadow:
0 16px 35px rgba(15,23,42,.08);

}

.navbar.menu-open .nav-links{

display:flex;

}

.nav-links li{

width:100%;

}

.nav-links a{

display:block;

padding:13px 14px;

border-radius:8px;

}

.nav-links a:hover,
.nav-links a[aria-current="page"]{

background:#eaf2ff;

}

.nav-links a::after,
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{

display:none;

}


.logo-area{

gap:8px;

text-align:left;

}

.logo{

width:52px;

}

.logo-area h2{

font-size:24px;

}

.logo-area p{

font-size:9px;

letter-spacing:1.4px;

}

.quote-btn{

padding:11px 16px;

border-radius:8px;

justify-self:end;

}

}

@media(max-width:520px){

.navbar{

grid-template-columns:1fr auto;

}

.logo-area{

justify-content:flex-start;

justify-self:start;

}

.quote-btn{

grid-column:1 / -1;

justify-self:stretch;

text-align:center;

}

.nav-links{

grid-column:1 / -1;

}

.logo-area h2{

font-size:20px;

}

.logo-area p{

max-width:180px;

}

}