*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 100%;
    scroll-behavior: smooth;
}
img,
picture,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
ul {
    list-style-type: none;
}
:root {
    --bg-color: #f6f8ff;
    --primary-text-color: #111827;
    --web-font: 'Montserrat', sans-serif;
    --body-font-size: 1rem;
    --body-l-height: 1.5;
    --container: 80rem;
    --radius: .625rem;
    --transition: 0.3s ease;
    /*  */
    --primary:#0057ff;
    --secondary:#14d8ff;
    --dark:#06172d;
    --white:#ffffff;
    --text:#d6e7ff;
    --radius:20px;
}
body {
    font-family: var(--web-font);
    font-size: var(--body-font-size);
    font-weight: 500;
    line-height: var(--body-l-height);
    color: var(--primary-text-color);
    background-color: var(--bg-color);
}
.container {
    width: min(100% - 2rem, var(--container));
    margin: 0 auto;
}

.section__title {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

/*  */
.header {
    background-color: var(--white);
}
.header_logo {
    width: 15rem;
}
.navbar{
    padding:.875rem 0;

    min-height:80px;

    display:grid;
    grid-template-columns:auto auto;
    align-items:center;
    justify-content:space-between;
}

.header__logo{
    width: 12rem;
}
/* ==========================
   CTA
========================== */
/* .header__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.85rem 1.5rem;

    background:#0d6efd;
    color:#fff;
    border-radius:6px;

    font-weight:600;
}

.desktop-cta{
    display:none;
} */

/* ==========================
   HAMBURGER
========================== */
.nav__toggle{
    width:34px;
    height:34px;

    border:none;
    background:none;
    cursor:pointer;

    position:relative;
}

.nav__toggle-line{
    position:absolute;
    left:0;

    width:100%;
    height:3px;

    background:#fff;
    transition:.35s ease;
}

.nav__toggle-line:nth-child(1){
    top:7px;
}

.nav__toggle-line:nth-child(2){
    top:15px;
}

.nav__toggle-line:nth-child(3){
    top:23px;
}

.nav__toggle--active .nav__toggle-line:nth-child(1){
    top:15px;
    transform:rotate(45deg);
}

.nav__toggle--active .nav__toggle-line:nth-child(2){
    opacity:0;
}

.nav__toggle--active .nav__toggle-line:nth-child(3){
    top:15px;
    transform:rotate(-45deg);
}

/* ==========================
   NAV
========================== */
.nav{
    position:absolute;
    top:100%;
    left:0;

    width:100%;

    background:#fff;

    max-height:0;
    overflow:hidden;

    transition:max-height .35s ease;
}

.nav--active{
    max-height:1200px;
}

.nav__list{
    display:flex;
    flex-direction:column;
}

.nav__item{
    border-bottom:1px solid rgba(220,220,220,.5);
}

/* Normal links */

.nav__link{
    display:block;
    font-size: .875rem;
    padding:1rem;
    color:#111827;
    text-transform: uppercase;
}

/* Submenu trigger button */

.nav__trigger{
    width:100%;

    border:none;
    background:none;

    color:#111827;
    cursor:pointer;
    font-size:.875rem;

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

    padding:1rem;
    position: relative;
    text-transform: uppercase;
}

/* .nav__caret{
    transition:.3s ease;
}

.nav__item--open .nav__caret{
    transform:rotate(180deg);
} */
/* try */
/* .nav__item:has(.nav__submenu) > .nav__trigger::after {
    content: "";
    position: absolute;
    right: 1.125rem;
    top: 50%;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid #111827;
    border-bottom: 2px solid #111827;
    transform: translateY(-50%) rotate(45deg);
    margin-left: 0.25rem;
    transition: 0.3s ease;
}
.nav__item--open:has(.nav__submenu) > .nav__trigger::after {
    transform: rotate(225deg);
} */
/* ==========================
   SUBMENU
========================== */
.nav__submenu{
    display:none;
    background:#fff;
    margin: 0 1.5rem;
}
.nav__submenu > li {
    border-top:1px solid rgba(220,220,220,.5);
}
.nav__item--open .nav__submenu{
    display:block;
}

.nav__submenu-link{
    display:block;
    color:#111827;
    padding:.9rem 2.5rem;
    border-top:1px solid rgba(255,255,255,.05);
    font-size: .875rem;
    text-transform: uppercase;
}

.nav__submenu-link:hover{
    background:#292929;
}

/* ==========================
   MOBILE CTA
========================== */
/* .nav__cta-mobile{
    padding:1rem;
} */


/* ==========================
   DESKTOP
========================== */
@media(min-width:1024px){

    .navbar{
        grid-template-columns:auto auto;
        gap:1rem;
    }
    .header__logo {
        width: 11rem;
    }
    /* .desktop-cta{
        display:inline-flex;
    }

    .nav__cta-mobile{
        display:none;
    } */

    .nav__toggle{
        display:none;
    }

    .nav{
        position:static;
        width:auto;
        background:none;
        max-height:none;
        overflow:visible;
        justify-self:end;
    }

    .nav__list{
        flex-direction:row;
        align-items:center;
        gap:1rem;
    }

    .nav__item{
        position:relative;
        border:none;
    }

    .nav__link{
        padding:.75rem .875rem;
        color: var(--primary-text-color);
        font-size: .75rem;
       transition: 0.3s ease;
    }
    .nav__link:hover {
        /* background-color: #fff; */
        color: #111827;
        border-radius: .5rem;
    }
    .nav__trigger{
        padding:.75rem .875rem;
        color: var(--primary-text-color);
        font-size: .75rem;
        transition: 0.3s ease;
    }
     .nav__trigger:hover {
        background-color: #fff;
        color: #111827;
        border-radius: .5rem;
     }
    .nav__submenu{
    position:absolute;
    top:100%;
    left:0;

    min-width:240px;

    display:block;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateY(10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
    background:#fff;
    transition: all 0.5s ease-in-out 0s;
  box-shadow: 0px 4px 15px rgba(1, 15, 28, 0.06);
  border-radius: .5rem;
}
.nav__submenu-link {
    color: #222;
    padding: 1rem;
    transition: all 0.5s ease-in-out 0s;
}
.nav__submenu-link:hover {
    padding-left: 2rem;
    background-color: transparent;
    color: #5d3fb2;
}
.nav__item:hover > .nav__submenu,
.nav__item:focus-within > .nav__submenu{

    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateY(0);
}
    .nav__item--open .nav__caret{
        transform: none;
    }
    /* .nav__item:has(.nav__submenu) > .nav__trigger::after {
        right: .625rem;
        border-right-color: #fff;
        border-bottom-color: #fff;
    }
    .nav__item:has(.nav__submenu) > .nav__trigger:hover:after {
        border-right-color: #111827;
        border-bottom-color: #111827;
    } */
    .nav__submenu > li:first-child {
        border: 0;
    }
}
@media(min-width:1200px){
    .navbar{
        gap: 2rem;
    }
    .nav__list{
        gap: 1.5rem;
    }
    .nav__link{
        font-size: .875rem;
    }
    .nav__trigger{
        font-size: .875rem;
    }
}
@media(min-width:1280px){
    .header__logo {
        width: 12rem;
    }
}
@media(min-width:1400px){
    .header__logo {
        width: 14rem;
    }
    .nav__list{
        gap: 2rem;
    }
}

/*  */

/*=========================
Hero
=========================*/

.hero{

padding:4rem 1rem;
background:
linear-gradient(135deg,#031224,#082c59);

overflow:hidden;

}

.hero__container{

max-width:1280px;
margin:auto;

display:grid;
gap:3rem;

align-items:center;

}

/*=========================
Content
=========================*/

.hero__content{

display:flex;
flex-direction:column;
gap:1.5rem;

}

.hero__tag{

display:inline-flex;
align-items:center;

padding:.5rem 1rem;

width:fit-content;

border-radius:40px;

background:rgba(255,255,255,.08);

color:#90d7ff;

font-size:.9rem;

letter-spacing:.05em;

}

.hero__title{

font-size:clamp(2rem,7vw,4rem);

line-height:1.15;

font-weight:800;

color:var(--white);

}

.hero__title span{

color:#16d6ff;

}

.hero__description{

font-size:1rem;

color:var(--text);

max-width:580px;

}

.hero__buttons{

display:flex;

flex-wrap:wrap;

gap:1rem;

}

.hero__button{

display:inline-flex;

justify-content:center;

align-items:center;

padding:1rem 2rem;

border-radius:50px;

text-decoration:none;

font-weight:bold;

transition:.35s;

outline-offset:4px;

}

.hero__button--primary{

background:var(--primary);

color:#fff;

}

.hero__button--secondary{

border:2px solid rgba(255,255,255,.25);

color:#fff;

}

.hero__button:hover{

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(0,0,0,.25);

}

.hero__button:focus-visible{

outline:3px solid #fff;

}

/*=========================
Image
=========================*/

.hero__figure{

display:grid;

place-items:center;

position:relative;

}

.hero__image-wrapper{

position:relative;

border-radius:25px;

overflow:hidden;

cursor:pointer;

transition:.6s;

box-shadow:

0 40px 80px rgba(0,0,0,.35);

}

/* Floating Glow */

.hero__image-wrapper::before{

content:"";

position:absolute;

inset:-30%;

background:

radial-gradient(circle,

rgba(20,216,255,.45),

transparent 70%);

opacity:0;

transition:.5s;

z-index:1;

}

.hero__image{

aspect-ratio:16/10;

width:100%;

object-fit:cover;

transition:1s;

}

/* Unique Hover */

.hero__image-wrapper:hover{

transform:

perspective(1200px)

rotateY(-8deg)

rotateX(3deg)

translateY(-12px);

}

.hero__image-wrapper:hover::before{

opacity:1;

}

.hero__image-wrapper:hover .hero__image{

transform:scale(1.08);

filter:saturate(120%) contrast(110%);

}

/*=========================
Tablet
=========================*/

@media(min-width:768px){

.hero{

padding:6rem 2rem;

}

.hero__container{

grid-template-columns:1fr 1fr;

}

}

/*=========================
Desktop
=========================*/

@media(min-width:1200px){

.hero{

min-height:100vh;

display:grid;

align-items:center;

}

}

/*=========================
Reduced Motion
=========================*/

@media(prefers-reduced-motion:reduce){

*{

transition:none!important;

animation:none!important;

}

}
.pege-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
}
.margin-top64 {
    margin-top: 4rem;
}
.margin-bottom64 {
    margin-bottom: 4rem;
}
.margin-top64 {
    margin-top: 4rem;
}
.margin-64 {
    margin: 4rem 0;
}
.margin-bottom48 {
    margin-bottom: 3rem;
}
.text-center {
    text-align: center;
}
.text-white{
    color: var(--white);
}
.margin-top24 {
    margin-top: 1.5rem;
}
/* service card */
.Services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
    grid-gap: 2rem;
}
.service__card {
    background-color: var(--white);
    padding: 2rem 1.5rem;
    border: 1px solid #adadae;
    border-radius: 10px;
}
.service__icon {
    width: 4rem;
    display: block;
    margin: 0 auto;
}
.card__body {
    margin-top: 2rem;
}
.service__options {
    padding: 2rem 0 0;
}
.card__title {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
}
.service__options > li{
    position: relative;
}
.service__options > li::before{
    content:"✓";
    color:#1ab45b;
    font-weight:700;
    padding-right: .5rem;
}
.about-us__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); 
    gap: 1rem;
    width: 100%;
}
.about-img {
    border-radius: .5rem;
}
/* why us */
/* Grid */

.trust__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
    margin-top: 2rem;
}

/* Card */
.trust-bg {
    position: relative;
    overflow: hidden;
    background:
    radial-gradient(circle at top right, #1d4ed8 0%, transparent 30%),
    linear-gradient(135deg, #061224 0%, #081a36 50%, #07142b 100%);
    padding: 3rem 0;
}
.trust__card{
    display:grid;
    justify-items:center;
    text-align:center;
    gap:.75rem;
    padding:1.75rem 1rem;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:rgba(255,255,255,.02);

    /* transition:
    transform .35s,
    border-color .35s,
    background .35s; */
}

/* .trust__card:hover,
.trust__card:focus-within{
    transform:translateY(-8px);
    border-color:#2b6fff;
    background:rgba(43,111,255,.08);
} */

.trust__icon{
    display:grid;
    place-items:center;
    width:4rem;
    aspect-ratio:1;
    border-radius:50%;
    background:rgba(0,119,255,.08);
    color:#3b82f6;
}

.trust__value{
    margin:0;
    color:#3b82f6;
    font-size:clamp(2rem,5vw,2.6rem);
    font-weight:700;
    line-height:1;
}

.trust__label{
    margin:0;
    font-size:1rem;
    color:#d7e2f3;
    line-height:1.5;
}

/* Tablet */

@media (min-width:600px){

.trust__grid{
    grid-template-columns:repeat(2,1fr);
}

}

/* Large Tablet */

@media (min-width:768px){

.trust__grid{
    grid-template-columns:repeat(3,1fr);
}

}

@media (min-width: 992px){
    .about-us__grid {
    grid-template-columns: 1fr 400px;
    }
}

/* Desktop */

@media (min-width:1024px){

.trust{
    padding:4.5rem 2rem;
}

.trust__grid{
    grid-template-columns:repeat(5,1fr);
    gap:2rem;
}

.trust__card{
    padding:2rem 1rem;
}

}

/* pricing */
/* ===================================
   GRID
=================================== */

.pricing__grid{
    display:grid;
    gap:2rem;
}

/* ===================================
   CARD
=================================== */

.pricing-card{
    position:relative;

    display:grid;
    grid-template-rows:auto 1fr auto;

    background:#fff;
    border-radius:1.25rem;

    padding:2rem;

    border:1px solid #dde3ec;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.pricing-card:hover,
.pricing-card:focus-within{
    transform:translateY(-10px);
    border-color:#0057d9;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

/* Featured */

.pricing-card--featured{
    background:linear-gradient(180deg,#0b63f6,#0044c6);
    color:#fff;
}

.pricing-card--featured .pricing-card__subtitle,
.pricing-card--featured .pricing-card__duration{
    color:rgba(255,255,255,.8);
}

.pricing-card--featured .pricing-card__feature{
    border-color:rgba(255,255,255,.15);
}

.pricing-card--featured .pricing-card__button{
    background:#fff;
    color:#0057d9;
}

/* Badge */

.pricing-card__badge{
    position:absolute;
    top:-.85rem;
    right:1.5rem;

    background:#ff9800;
    color:#fff;

    padding:.45rem 1rem;

    border-radius:999px;

    font-size:.8rem;
    font-weight:700;
}

/* Header */

.pricing-card__header{
    margin-bottom:2rem;
}

.pricing-card__title{
    font-size:1.6rem;
    margin-bottom:.35rem;
}

.pricing-card__subtitle{
    color:#6b7280;
    margin-bottom:1.5rem;
}

.pricing-card__price{
    display:flex;
    align-items:flex-start;
}

.pricing-card__currency{
    font-size:1.2rem;
    margin-top:.4rem;
}

.pricing-card__amount{
    font-size:3rem;
    font-weight:800;
    line-height:1;
    margin-inline:.25rem;
}

.pricing-card__duration{
    align-self:flex-end;
    color:#6b7280;
    margin-bottom:.4rem;
}

/* Features */

.pricing-card__features{
    display:grid;
    gap:.85rem;
    /* margin-bottom:2rem; */
}

.pricing-card__feature{
    padding-bottom:.85rem;
    display:flex;
    gap:.6rem;
}
.pricing-card__feature:not(:last-child){
    border-bottom:1px solid #eceff5;
}
.pricing-card__feature::before{
    content:"✓";
    color:#1ab45b;
    font-weight:700;
}

/* Button */

.pricing-card__button{
    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:100%;

    min-height:3.25rem;

    border-radius:.75rem;

    background:#0057d9;
    color:#fff;

    font-weight:700;

    transition:all .3s ease;
}

.pricing-card__button:hover,
.pricing-card__button:focus-visible{
    background:#003da6;
    outline:none;
}

.pricing-card__button:focus-visible{
    box-shadow:0 0 0 .2rem #fff,
               0 0 0 .35rem #0057d9;
}

/* ===================================
   TABLET
=================================== */

@media (min-width:48rem){

.pricing{
    padding:5rem 2rem;
}

.pricing__grid{
    grid-template-columns:repeat(2,1fr);
}

}

/* ===================================
   DESKTOP
=================================== */

@media (min-width:75rem){

.pricing__grid{
    grid-template-columns:repeat(3,1fr);
    align-items:stretch;
}

.pricing-card--featured{
    transform:scale(1.05);
}

.pricing-card--featured:hover{
    transform:translateY(-10px) scale(1.05);
}

}
.indutries__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 100px), 1fr));
    gap: .5rem;
}
.industries__logo {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    align-items: center;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
}
.industry-icon {
    width: 4rem;
    margin-bottom: .875rem;
}
.industries__logo p {
    margin-bottom: 0;
}
.footer {
    background-color: var(--white);
    padding: 2rem 0 1rem;
}
.footer-company__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}
.footer-company__logo {
    display: flex;
    flex-direction: column;
}
.footer-logo {
    width: 14rem;
    margin-bottom: 1rem;
}
.footer-contact__detail {
    display: flex;
    flex-direction: column;
}
.footer-contact__detail h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.footer__bottom {
    border-top: 1px solid #ccc;
    margin-top: 2rem;
    padding-top: 1rem;
    font-size: .875rem;
    text-align: center;
}
@media (min-width: 992px){
    .footer-company__grid {
        grid-template-columns: 2fr 1fr;
    }
    .footer-company__logo {
        width: 80%;
    }
}
@media (min-width: 1200px){
    .footer-company__logo {
        width: 70%;
    }
}