@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;700&family=Nunito+Sans:wght@500;900&display=swap";

*{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    list-style:none;
    text-decoration:none;
    box-sizing:border-box
}
html{
    scroll-behavior:"smooth"
}
body{
    font-family:"Montserrat",sans-serif;
    line-height:1.5;
    color:rgba(12,3,27,.7);
    background:rgb(255,255,255);
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none
}
.container{
    width:82%;
    margin:0 auto
}
img{
    display:block;
    width:100%
}
h1,h2,h3,h4,h5{
    line-height:1.2
}
section{
    margin-top:6rem
}
section>h2{
    text-align:center
}
section>p{
    text-align:center;
    width:42%;
    margin:.6rem auto 2.5rem
}
.btn{
    display:inline-block;
    width:-moz-fit-content;
    width:fit-content;
    padding:.75rem 1rem;
    border-radius:.4rem;
    background:#d02323;
    color:#fff;
    cursor:pointer;
    transition:all .3s ease-in-out
}
.btn:hover{
    background:#d02323;
    box-shadow:0 1rem 1.6rem rgba(12,3,27,.15)
}
.btn-primary{
    display:inline-block;
    width:-moz-fit-content;
    width:fit-content;
    padding:.75rem 1rem;
    border-radius:.4rem;
    background:#d02323;
    color:#fff;
    cursor:pointer;
    transition:all .3s ease-in-out
}
.btn-primary:hover{
    background:#d02323;
    box-shadow:0 1rem 1.6rem rgba(12,3,27,.15)
}
@media screen and (min-width: 1024px){
    .container{
        width:90%
    }
    .section>p{
        width:55%
    }
}
@media screen and (max-width: 600px){
    section>p{
        width:90%
    }
}
nav{
    width:100vw;
    height:5rem;
    position:fixed;
    z-index:10;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg, #000046, #4a5e63);
    color:#fff;
    box-shadow:0 1rem 1rem rgba(12,3,27,.1)
}
nav h1,nav h2,nav h3,nav h4,nav h5,nav h6{
    color:#fff
}
nav .container{
    display:flex;
    justify-content:space-between;
    align-items:center
}
.nav_logo img {
    height: 131px; /* Adjust height as needed */
    width: auto;
    position: absolute;
    /* top: 50%; */
    transform: translateY(-37%);
}
/* nav .container a img{
    height:70px;
    width:70px;
    z-index:-1
} */
nav .container ul{
    display:flex;
    gap:3rem;
    align-items:center
}
nav .container ul li .btn{
    border:none
}
nav .container ul li:hover{
    border-bottom:1px solid #d02323;
    transition:all 1s ease-in-out
}
nav .container button{
    display:none
}
nav .container a{
    color:#fff;
    font-weight:400;
    font-size:.9rem
}
@media screen and (max-width: 1024px){
    nav .container button{
        display:inline-block;
        background:rgba(0,0,0,0);
        color:#fff;
        font-size:2rem;
        cursor:pointer
    }
    nav .container button#close__nav-btn{
        display:none
    }
    nav .container ul{
        display:inline-block;
        background:rgba(0,0,0,0);
        color:#fff;
        font-size:2rem;
        cursor:pointer
    }
    nav .container ul{
        position:fixed;
        right:5%;
        top:5rem;
        flex-direction:column;
        align-items:start;
        gap:0;
        display:none;
        perspective:300px
    }
    nav .container ul li{
        width:100%;
        opacity:0;
        animation:flipNavItem 300ms ease forwards;
        transform-origin:top
    }
    @keyframes flipNavItem{
        0%{
            transform:rotateX(90deg)
        }
        100%{
            transform:rotateX(0deg);
            opacity:1
        }
    }
    nav .container ul li a{
        color:#fff;
        height:100%;
        display:block;
        padding:1.5rem 2rem;
        border-radius:0;
        background:linear-gradient(#4cc9f0, #14b8eb)
    }
    nav .container ul li.btn{
        background:#f72585
    }
}
header{
    background:linear-gradient(135deg, #404b4e, #000046);
    color:#fff;
    height:90vh;
    display:grid;
    place-items:center;
    overflow:hidden
}
header h1,header h2,header h3,header h4,header h5,header h6{
    color:#fff
}
header .container{
    margin-top:3rem;
    display:grid;
    grid-template-columns:46% 46%;
    gap:8%;
    align-items:center;
    justify-content:space-between
}
header .container .header__content h1{
    font-size:3.5rem;
    line-height:1.1;
    letter-spacing:-3px;
    animation:fadeInUp 10s ease forwards
}
header .container .header__content p{
    margin:1rem 0 2rem;
    color:rgba(255,255,255,.7);
    font-size:1.1rem;
    animation:fadeInUp 10s ease forwards
}
header .container .header__image img{
    max-width:100%;
    height:auto;
    animation:zoomIn 10s ease forwards
}
header .container .elevator-transition{
    animation:repeat 1s forwards;
    animation-delay:1s
}
header .container .elevator{
    margin:5em 0;
    color:#fff;
    font-family:AvenirNextLTPro-Bold;
    font-size:3em;
    display:grid;
    grid-template-columns:auto auto;
    grid-gap:10px
}
header .container .elevatorL{
    text-align:right;
    left:5em
}
header .container .elevatorR{
    left:10em
}
@keyframes repeat{
    100%{
        filter:drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff)
    }
}
header .container .elevatorL-transition{
    animation:moveLeft .7s forwards;
    animation-play-state:paused;
    animation-delay:calc(var(--scroll)*-1s)
}
header .container .elevatorR-transition{
    animation:moveRight .7s forwards;
    animation-play-state:paused;
    animation-delay:calc(var(--scroll)*-1s)
}
@keyframes moveLeft{
    0%{
        transform:translateX(0px) rotate(0)
    }
    100%{
        transform:translateX(-10em)
    }
}
@keyframes moveRight{
    0%{
        transform:translateX(0px) rotate(0)
    }
    100%{
        transform:translateX(10em)
    }
}
@keyframes fadeInUp{
    from{
        opacity:0;
        transform:translateY(20px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}
@keyframes zoomIn{
    from{
        transform:scale(0.8)
    }
    to{
        transform:scale(1)
    }
}
@media screen and (max-width: 1024px){
    header{
        height:auto
    }
    header .container{
        font-size:1.8rem
    }
    header .container .header__content h1{
        font-size:2.5rem
    }
}
@media screen and (max-width: 600px){
    header{
        /* background:linear-gradient(135deg, #480ca8, #4cc9f0); */
        background:linear-gradient(135deg, #404b4e, #000046);
        color:#fff;
        height:100vh;
        display:grid;
        place-items:center;
        overflow:hidden
    }
    header h1,header h2,header h3,header h4,header h5,header h6{
        color:#fff
    }
    header .container{
        grid-template-columns:1fr;
        text-align:center
    }
    header .container .header__content{
        margin:.8rem 0 1.5rem;
        line-height:1.4
    }
    header .container .header__image{
        display:none
    }
}
#services .container{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2rem
}
#services .container article{
    background:linear-gradient(135deg, #050648, #a7d7ec);
    color:#fff;
    padding:1.5rem;
    border-radius:1rem;
    display:flex;
    gap:1.5rem;
    height:-moz-fit-content;
    height:fit-content;
    transition:all 400ms ease
}
#services .container article h1,#services .container article h2,#services .container article h3,#services .container article h4,#services .container article h5,#services .container article h6{
    color:#fff
}
#services .container article img{
    height:50px;
    width:50px
}
#services .container article:hover{
    margin-top:-0.5rem
}
#services .container article i{
    font-size:1.7rem
}
#services .container article div h4{
    margin-bottom:1rem
}
@media screen and (max-width: 1024px){
    #services .container{
        grid-template-columns:repeat(2, 1fr)
    }
}
@media screen and (max-width: 600px){
    #services .container{
        grid-template-columns:1fr
    }
}
#Choose .container{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:2rem;
    padding:0 20px;
    box-sizing:border-box
}
#Choose article{
    background:#fff;
    border-radius:1rem;
    box-shadow:0 1.5rem 1.5rem rgba(12,3,27,.1);
    position:relative;
    transition:all 700ms ease
}
#Choose article:hover{
    box-shadow:none
}
#Choose article:hover .speacialist__image::before{
    left:0;
    border-radius:1rem
}
#Choose article .speacialist__image{
    height:15rem;
    position:relative;
    border-radius:1rem;
    overflow:hidden
}
#Choose article .speacialist__image::before{
    content:"";
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:-100%;
    background:linear-gradient(135deg, rgba(72, 12, 168, 0.8), rgba(76, 201, 240, 0.8));
    opacity:.6;
    transition:all 1s ease
}
#Choose article .speacialist__details{
    margin:1.5rem 0;
    text-align:center
}
#Choose article .speacialist__icon{
    position:absolute;
    top:1.2rem;
    right:1.2rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
    opacity:0;
    transition:all 1s 400ms ease
}
#Choose article .speacialist__icon img{
    background:#fff;
    padding:.4rem;
    display:flex;
    font-size:.8rem;
    border-radius:50%;
    transition:all 400ms ease
}
#Choose article .speacialist__icon img:hover{
    background:#d02323;
    color:#fff;
    border:2px solid #000
}
@media screen and (max-width: 768px){
    #Choose .container{
        grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))
    }
}
@media screen and (max-width: 480px){
    #Choose .container{
        grid-template-columns:repeat(auto-fill, minmax(200px, 1fr))
    }
    #Choose article .speacialist__icon{
        display:none
    }
}
.swiper{
    width:82%
}
.swiper .swiper-wrapper .swiper-slide{
    margin-bottom:4rem;
    /* background:linear-gradient(135deg, #480ca8, #4cc9f0); */
    background:linear-gradient(135deg, #050648, #a7d7ec);

    color:#fff;
    padding:1.5rem 2rem;
    border-radius:1rem;
    cursor:default;
    font-size:.9 rem
}
.swiper .swiper-wrapper .swiper-slide h1,.swiper .swiper-wrapper .swiper-slide h2,.swiper .swiper-wrapper .swiper-slide h3,.swiper .swiper-wrapper .swiper-slide h4,.swiper .swiper-wrapper .swiper-slide h5,.swiper .swiper-wrapper .swiper-slide h6{
    color:#fff
}
.swiper .swiper-wrapper .swiper-slide:hover{
    opacity:.9
}
.swiper .swiper-wrapper .swiper-slide:hover .avatar{
    position:relative;
    transition:transform .7s ease;
    transform:translateX(300px) scale(2);
    border:1px solid #fff
}
.swiper .swiper-wrapper .swiper-slide p{
    margin-bottom:1.5rem
}
.swiper .swiper-wrapper .swiper-slide .client{
    display:flex;
    align-items:center;
    gap:1rem
}
.swiper .swiper-wrapper .swiper-slide .client .avatar{
    width:2.5rem;
    aspect-ratio:1/1;
    border-radius:50%;
    overflow:hidden
}
.swiper .swiper-pagination-bullet{
    background:#480ca8
}
@media screen and (max-width: 600px){
    .swiper .swiper-wrapper .swiper-slide{
        padding:1.5rem
    }
}
#Contactus .container{
    display:grid;
    grid-template-columns:47% 47%;
    gap:6%
}
#Contactus .container .info p{
    margin:.5rem 0 2rem
}
#Contactus .container .info article{
    display:flex;
    gap:1.5rem;
    margin-bottom:1.5rem
}
#Contactus .container .info article small{
    margin-top:.4rem;
    display:block
}
#Contactus .container .info article .info__icon{
    background:#f72585;
    color:#fff;
    padding:.8 rem;
    height:-moz-fit-content;
    height:fit-content;
    border-radius:50%;
    display:flex;
    height:fit-content;
    font-size:2.2rem
}
#Contactus .container form{
    display:flex;
    flex-direction:column;
    gap:1.4rem
}
#Contactus .container form .form__group label{
    font-size:.85rem;
    margin-bottom:.4rem;
    display:inline-block;
    font-weight:600
}
#Contactus .container form .form__group input,#Contactus .container form .form__group textarea,#Contactus .container form .form__group select{
    background:#fff;
    padding:.85rem;
    display:block;
    width:100%;
    border-radius:.4rem;
    resize:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none
}
footer{
    /* background:#0c031b;*/
    background:linear-gradient(135deg, #000046, #4a5e63);
    color:rgba(255,255,255,.7);
    padding-top:6rem;
    margin-top:6rem
}
footer .container{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:5rem;
    font-size:.85rem
}
footer .container a{
    color:rgba(255,255,255,.7);
    transition:all 400ms ease
}
footer .container a:hover{
    color:#d02323
}
footer .container article{
    display:flex;
    flex-direction:column;
    gap:1rem
}
footer .container article>div{
    display:flex;
    align-items:center;
    gap:.6rem
}
footer .container article>h3{
    color:#fff
}
footer .container article .footer__socials{
    gap:1rem;
    font-size:1.1rem
}
footer .copyright{
    text-align:center;
    padding:1.5rem 0;
    margin-top:4rem;
    border-top:1px solid rgba(255,255,255,.2);
    font:.9rem
}
#preLoader{
    background:#fff url(/assets/preeee.gif) no-repeat center;
    opacity:1;
    background-size:20%;
    height:100vh;
    width:100%;
    position:fixed;
    z-index:100
}

/*# sourceMappingURL=style.min.css.map */