@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,900&display=swap');

* {
    font-family: 'Poppins', sans-serif;
}

body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

.navbar {
    padding: 0;
    padding-left: 5%;
    padding-right: 5%;
    background-color: #FFF;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}

.navbar-nav {
    width: 70%;
    display: flex;
    justify-content: center;
}

.logo {
    width: 300px;
    height: 70px;
    background-image: url(./images/logo.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.navbar a {
    color: #242263;
    color: #000;
}

.navbar a:hover {
    font-weight: 600;
    color: #000;
}

.btn a {
    padding: 15px 45px;
    background-color: #0a0064;
    border: none;
    border-radius: 999px;
    transition: transform 0.3s ease;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.navbar>.container,
.navbar>.container-fluid,
.navbar>.container-lg,
.navbar>.container-md,
.navbar>.container-sm,
.navbar>.container-xl,
.navbar>.container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

/*  Hero page */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 90vh;
    object-fit: cover;
}

.swiper-text {
    position: absolute;
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: left;
    align-self: left;
    text-align: left;
    padding-left: 5%;
    color: #232162;

}

.swiper-text h1 {
    width: 45%;
    font-size: 45px;

}



/* CSS */
.button-28 {
    appearance: none;
    background-color: transparent;
    border: 2px solid #232162;
    border-radius: 15px;
    box-sizing: border-box;
    color: #3B3B3B;
    cursor: pointer;
    display: inline-block;
    font-family: Roobert, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    margin: 0;
    min-height: 60px;
    min-width: 0;
    outline: none;
    padding: 16px 24px;
    text-align: center;
    text-decoration: none;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;

    will-change: transform;

}

.button-28 a {
    color: #232162;
    text-decoration: none;
}


.button-28:disabled {
    pointer-events: none;
}

.button-28:hover {
    color: #fff;
    background-color: #e5af12;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
}

.button-28:active {
    box-shadow: none;
    transform: translateY(0);
}

/* company-details */
#c-details {
    position: relative;
    margin-bottom: 100px;
}

.company-details {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    position: absolute;
    top: -50px;
    z-index: 50;
    width: 70%;
    margin: 0 15%;
    border-radius: 30px;
    background-color: #232162;
}


.contact-info {
    width: 100%;
    border-right: 2px solid #e5af12;
    padding: 0 5%;
    padding-block: 20px;
    color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
}

.mail-info h4,
.mail-info a {
    color: #FFF;
}

.mail-info {
    width: 100%;
    border-right: 2px solid #e5af12;
    padding: 0 5%;
    padding-block: 20px;
    color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
}

.info {
    color: #FFF;
}

.open-info {
    color: #FFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
}

.circle h1 {
    padding-top: 10px;
    text-align: center;
}




/* about us */
.about-us {
    padding: 0 5%;
    margin-bottom: 50px;
    margin-top: 10px;
    color: #232162;
}

.about-us h5 {
    color: #e5af12;
}

/* CSS */
.button-86 {
    all: unset;
    width: 100px;
    height: 30px;
    font-size: 16px;
    background: transparent;
    border: none;
    position: relative;
    color: #f0f0f0;
    cursor: pointer;
    z-index: 1;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-86::after,
.button-86::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -99999;
    transition: all .4s;
}

.button-86::before {
    transform: translate(0%, 0%);
    width: 100%;
    height: 100%;
    background: #242263;
    border-radius: 10px;
}

.button-86::after {
    transform: translate(10px, 10px);
    width: 35px;
    height: 35px;
    background: #ffffff15;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 50px;
}

.button-86:hover::before {
    transform: translate(5%, 20%);
    width: 110%;
    height: 110%;
}

.button-86:hover::after {
    border-radius: 10px;
    transform: translate(0, 0);
    width: 100%;
    height: 100%;
}

.button-86:active::after {
    transition: 0s;
    transform: translate(0, 5%);
}

/* services-home */

.services-home {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding: 0 5%;
    margin-bottom: 50px;
    padding-block: 70px;
    background-color: #f6c324;
}

.card {
    width: 98%;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    border: none;
    background-color: #232162;
    color: #ffffffd7;
}

.card h4 {
    color: #e5af12;
}

.card .button-86::before {
    background-color: transparent;
    border: 2px solid #e5af12;

}

.card .button-86::before a {
    color: #232162;
    text-decoration: none;
}
.card-body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* quote" */
.quote {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 50px;
    padding: 0 5%;
    /* The image used */
    background-image: url("./images/about_cover.jpg");

    /* Set a specific height */
    min-height: 500px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-block: 70px;
}

.one {
    width: 95%;
}

.forms-input input {
    width: 100%;
    height: 45px;
    border-radius: 10px;
    border: 1px solid #222;
    margin-bottom: 25px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.button-submit {
    background-color: #232162;
    color: #FFF;
    height: 50px;
}

.quote-forms {
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
    padding: 0 5%;
    padding-block: 40px;
    border-radius: 10px;
}


.cta-section {
    background-color: #fff;
    margin: 0 20%;
    text-align: center;
    padding: 50px;
    margin-bottom: 50px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    border-radius: 10px;
    color: #242263;
}

.cta-section h2 {
    color: #232162;
}

.text-center- a {
    display: block;

    margin: 0 auto;
}

.mwwaas a{
    margin-left: 5%;
    font-size: 30px;
    color: #eee;
}
a .nn {
    background-color: red !important;

}

footer {
    background-color: #242263;
    padding: 0 5%;
    padding-block: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.ftt{
    width: 97%;
}
.footer-logo {
    width: 300px;
    height: 70px;
    background-image: url(./images/logo.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.links a {
    line-height: 2;
    text-decoration: none;
    color: #FFF;
}

.links h3 {
    color: #e5af12;
}

.links h3:hover {
    font-weight: 700;
}

.links a:hover {
    font-weight: 600;
    color: #eee;
}

.lasst {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #232162;
}

.navbar-toggler-icon {

    width: 45px;
    height: 45px;
    border: 2px solid salmon;
}

.amg{
   background-image: url(./images/team.avif);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   height: 70vh;
   width: 80%;
   margin: 0 auto;
   margin-bottom: 50px;
}


/* @media only screen and (max-width: 900px) {
    .swiper-text h1{
        width: 100%;
        text-shadow: 1px 1px 1px #000;
    }
} 

 @media (max-width: 1202px) {

   
    .navbar-expand-lg .navbar-collapse {
        display: none !important;
    }

    .navbar-expand-lg .navbar-toggler {
        display: block;
    }

    .navbar-expand-lg .navbar-toggler[aria-expanded="true"]~.navbar-collapse {
        display: block !important;
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
         Align links to the left 
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        display: block;
        text-align: left;
        padding-left: 0;
       
    }
        .navbar>.container,
        .navbar>.container-fluid,
        .navbar>.container-lg,
        .navbar>.container-md,
        .navbar>.container-sm,
        .navbar>.container-xl,
        .navbar>.container-xxl {
            display: flex;
            flex-wrap: inherit;
            align-items: center;
            justify-content: space-between;}
} */

@media (max-width: 1368px) {
    .footer{
       display: grid;
       grid-template-columns: 1fr 1fr;
    }
        .media-bg {
            background-image: url(./images/under.png);
            height: 70vh;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        .d-flex{
            display: none;
        }
}

@media (max-width: 1000px) {
    .d-flex {
        display: none !important;
    }
}
@media (max-width:997px) {
    .swiper-text h1 {
        width: 100%;
    }

    .about-us {
        display: block;
        width: 100%;
        margin: 0 auto;
        margin-top: 330px;
    }

    .about-imgg {
        display: block;
        width: 100%;
    }

    footer,
    .ftt,
    .links {
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    .company-details {
        display: block;
        width: 90%;
        margin: 0 5%;

    }

    .mail-info {
        border-top: 2px solid #e5af12;
        border-bottom: 2px solid #e5af12;
        margin-bottom: 20px;
    }
}

@media (max-width:957px) {
    .services-home {
        display: block;
        width: 100%;
        margin: 0 auto;
        margin-block: 50px;
    }

    .card {
        display: block;
        width: 100%;
        margin: 0 auto;
        margin-top: 50px;
    }

    .quote,
    .cta-section {
        display: block;
        width: 100%;
        margin: 0 auto;
        margin-bottom: 50px;
    }

    .one,
    footer,
    .ftt,
    .links,
    .container {
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    .cta-section {
        width: 90%;
    }

    .d-flex {
        display: block;
        margin: 0 auto;
        width: 100%;
    }

    .d-flex button {
        display: block;
        width: 100%;
        margin: 0 20%;
    }
         .footer {
             display: grid;
             grid-template-columns: 1fr ;
         }
}