@import url('httpa://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@300&family=Teko:wght@300;400&family=Ubuntu:wght@300&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Popins', sans-serif;
    /* font-family: 'Ubuntu', sans-serif; */
}

:root {
    --bg-color: #f6f8fc;
    --second-bg-color: #392c76;
    --text-color: #0f0f0f;
    --main-color: rgb(232, 201, 45);

}

html {
    font-size: 62.5%;
    overflow-x: hidden;
    /* font-size: 20.5%; */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.header {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: .2rem 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.9);
    /* border-radius: 0 0 1rem 1rem; */
    /* opacity: 0.5; */
}

.headerlogoname {
    display: flex;
    justify-content: center;
    align-items: center;

}

.logo {
    height: 3rem;
    width: 4rem;
    font-size: 2rem;
    color: var(--text-color);
    font-weight: 600;
    cursor: default;

}

.logoname {

    font-size: 2rem;
    color: var(--second-bg-color);
    margin-left: 1rem;
    font-weight: 600;
    align-items: center;
    line-height: 2rem;
    align-items: center;
    justify-content: none;
    font-family: 'Teko', sans-serif;
    letter-spacing: 0.1rem;
}

.navbar a {
    font-size: 1.3rem;
    color: var(--text-color);
    margin-left: 4rem;
    transition: .3s;
    font-weight: 540;
}

.navbar a:hover {
    color: var(--second-bg-color);
    transition: .1 ease;
}

#menu-icon {
    cursor: pointer;
    font-size: 3.6rem;
    color: var(--text-color);
    display: none;
}

section {

    min-height: 100vh;
    padding: 5rem 6% 6rem;
}

.sectiona {
    /* min-height: 100vh; */
    max-height: 150vh;
    /* min-height: 50vh; */
    padding: 9rem 6% 9rem;
    margin-bottom: 4rem;
}

.sectionh {
    min-height: 100vh;
    /* min-height: auto; */
    padding: 9rem 6% 2rem;
}

.adsection {
    padding: 7rem 6% 1rem;
}

.moto {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30vh;
    padding: 6rem 6% 6rem;
    border: .1rem solid #dad8d8;
    margin: 1rem 1rem 1rem;
    position: relative;
}

.moto::before {
    content: ' ';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-image: url(image/dy.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30rem 25rem;
    position: absolute;
    opacity: 0.15;
}

.moto .motodiv h2,
h3 {
    position: relative;

}

.moto .motodiv {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.motodiv h2 {
    line-height: 4rem;
    font-size: 2.5rem;
    margin-bottom: 4rem;
    color: var(--second-bg-color);
}

.motodiv h3 {
    font-size: 1.9rem;
    line-height: 2.5rem;
    margin-bottom: 2rem;
    
}

.home {
    /* max-height: 120vh;    */
    background: url('image/banner1.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    animation: change 15s infinite ease-in-out;
}
.homebtn{
    
    display: flex;
    justify-content:flex-start;
    align-items: center;
    gap: 2rem;
}
.homebtn a{
    width: 12rem;
}
.load{
    animation: change 2s;
}
.img {
    min-height: 45vh;
    padding: 1rem 6% 1rem;
    background-color: #faffff90;
}

#corosol {

    min-height: 45vh;
    background-image: url('image/s1.png');
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-position: center;
    animation: slide 15s infinite;
    animation-fill-mode: forwards;
    /* background-color: white; */
    border-radius: 20%;
}
.load2{
    animation: slide 2s;
}

/* @keyframes change {


    0% {
        background-image: url('image/banner1.png');
    }

    20% {
        background-image: url('image/banner1.png');
    }

    20.01% {
        background-image: url('image/c2.png');
    }

    40% {
        background-image: url('image/c2.png');
    }

    40.01% {
        background-image: url('image/c3.png');
    }

    60% {
        background-image: url('image/c3.png');
    }

    60.01% {
        background-image: url('image/c4.png');
    }

    80% {
        background-image: url('image/c4.png');
    }

    80.01% {
        background-image: url('image/banner1.png');
    }

    100% {
        background-image: url('image/banner1.png');
    }


} */

@keyframes change {


    0% {
        background-image: url('image/banner1.png');
    }

    13% {
        background-image: url('image/banner1.png');
    }

    26% {
        background-image: url('image/c2.png');
    }

    39% {
        background-image: url('image/c2.png');
    }

    52% {
        background-image: url('image/c3.png');
    }

    65% {
        background-image: url('image/c3.png');
    }

    78% {
        background-image: url('image/c4.png');
    }

    91% {
        background-image: url('image/c4.png');
    }

   

   


}


@keyframes slide {
    0% {
        background-image: url('image/s1.png');
    }

    13% {
        background-image: url('image/s1.png');
    }

    26% {
        background-image: url('image/s4.png');
    }

    39% {
        background-image: url('image/s4.png');
    }

    52% {
        background-image: url('image/s3.png');
    }

    65% {
        background-image: url('image/s3.png');
    }

    78% {
        background-image: url('image/s2.png');
    }

    91% {
        background-image: url('image/s2.png');
    }
}

.homepara {
    margin-bottom: 3rem;
}

.home-content {
    
    max-width: 50%;
}

.home-content h3 {
    font-size: 2.5rem;
    font-weight: 700;
    /* padding-bottom: .3rem; */

}

.hspan {
    padding-bottom: 1rem;

}

/* .home-content h3:nth-of-type(2) {
    margin-bottom: 2rem;
} */

span {
    color: var(--second-bg-color);

}

.home-content h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.3;
    padding-bottom: 2rem;
}

/* 
.home-content img {
    width: 35vw;
    background-color: transparent ;
} */

.home-content p {
    font-size: 1.5rem;
    /* line-height: 1; */

}

.social-media a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background-color: transparent;
    border: .2rem solid #1b1b1a;
    border-radius: 50%;
    font-size: 2.5rem;
    color: var(--text-color);
    margin: 2rem 1.5rem 1rem 0
}

.social-media a:hover {
    background: var(--main-color);
    color: var(--second-bg-color);
    box-shadow: 0 0 1rem var(--main-color);
}

.btn {
    display: inline-block;
    padding: 1rem 2.8rem;
    background: var(--main-color);
    border-radius: .5rem;

    font-size: 1.2rem;
    color: var(--second-bg-color);
    letter-spacing: 600;
    transition: .5s ease;
    justify-content: space-between;


}

.btns {
    display: inline-block;
    padding: 1rem 2.8rem;
    background: var(--bg-color);
    border-radius: .5rem;

    font-size: 1.2rem;
    color: var(--second-bg-color);
    letter-spacing: 600;
    transition: .5s ease;
    justify-content: space-between;

}

.btnp {
    display: inline-block;
    padding: .8rem 2.3rem;
    background: var(--main-color);
    border-radius: .5rem;
    font-size: 1rem;
    transition: .5s ease;


}

.btn:hover {
    box-shadow: 0 0 .4rem var(--second-bg-color);
    /* box-shadow: none; */
}

.about {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    /* background: var(--bg-color); */

}

.about-img {
    flex: 1 1 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.aboutimghub img {
    border-radius: 30%;
    height: 15rem;
    width: 15rem;
    box-shadow: 0 0 1rem rgba(6, 6, 6, 0.954);
}

/* .about-img img {
    width: 24rem;
    height: 22rem;
    border-radius: 50%;
    margin-right: 4rem;
    align-items: center;

} */

#textcircle {
    background: url('image/fstimg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16rem 16rem;
    height: 15rem;
    width: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    word-spacing: .3rem;
    text-align: center;

}

.andline {
    line-height: 0;
}

.btnaboutus {
    background-color: #33323240;
}

.heading {
    text-align: center;
    font-size: 3rem;
    color: rgb(231, 196, 21);
    margin-bottom: 1rem;
    font-family: 'Chivo Mono', monospace;
}

.headings {
    text-align: center;
    font-size: 3rem;
    color: #181a40;
    margin-bottom: 2rem;

}

.about-content {
    flex: 1 1 30rem;
}

.about-content h2 {
    text-align: left;
    line-height: 1.2;
}

.about-content h3 {
    font-size: 2rem;
}

.about-content p {
    font-size: 1.3rem;
    margin: 2rem 0 3rem;
    line-height: 1.6;
}

.about1 {
    margin-top: 4rem;
    justify-content: space-around;
}

#textcircle h2 {
    font-size: 2rem;
}

#textcircle h3 {
    font-size: 1.2rem;
    line-height: 3rem;
    margin-top: 1.5rem;
}

#imgdiv {
    gap: 4rem;
    margin-top: 4rem;
    justify-content: space-between;
}

.isoimg {
    position: relative;
    height: 40vh;
    width: 16vw;
}

.colorsection {
    background-color: #faffff90;
    min-height: auto;
}
.services{
    min-height: auto;
}

.services h2 {
    margin-bottom: 5rem;
    line-height: 8rem;
}

.services-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 2rem;
}

/* .services-cotainer*/
.services-box {
    flex: 1 1 25rem;
    background: var(--main-color);
    padding: 2rem 1rem 3rem;
    border-radius: 2rem;
    text-align: center;
    border: .2rem solid var(--main-color);
    transition: .5s ease;
    /* box-shadow: 0 0 .5rem var(--main-color); */
    background: linear-gradient(#ffffff 50%, var(--main-color) 50%);
    background-size: 100% 200%;
    background-position: 0 2.5%;
    transition: 0.3s;
    height: 35rem;
}

.services-box:hover {
    background-position: 0 100%;
}

.services-box:hover .serimg {

    background-color: #ffffff;
}




.serproduct {
    flex: 1 1 25rem;
    background: rgb(250, 249, 247);
    padding: 1rem 0rem 2rem;
    border-radius: 2rem;
    text-align: center;
    border: .1rem solid var(--main-color);
    transition: .5s ease;
    height: 30rem;
    width: 30rem;
}

.serimg {
    height: 8rem;
    width: 8rem;
    margin: auto;
    margin-bottom: 3rem;
    background-color: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.services-box img {

    height: 6rem;
    width: 6rem;
    place-items: cener;


    /* padding: 1rem; */
    /* border-radius: 2rem solid var(--second-bg-color); */
    /* background-color: #392c76; */
    /* border-radius: 50%; */

}

.services-box h3 {
    font-size: 2rem;
    color: #42386f;
}

.services-box .list {
    margin: 1rem 2rem 2rem;

}

.list {
    font-size: 1.6rem;
    text-align: center;
    padding-top: 1rem;
    margin-bottom: 1rem;
    height: 10rem;

}

.services-container .services-box:hover {
    border-color: var(--main-color);
    transform: scale(1.02);

}

.line {

    border: 1px solid rgb(39, 24, 96);
    margin: 0 auto 1.4rem;
    width: 10rem;
    color: var(--second-bg-color);
}

.paraproduct {
    font-size: 1.5rem;
    margin: 2rem 2rem 2rem;
    line-height: 1.3;
    height: 6rem;
    overflow: auto;

}

#imgp {

    height: 10rem;
    width: 10rem;
    margin-bottom: 1.5rem;
}

#imgpaxle {
    width: 16rem;
    height: 10rem;
    margin-bottom: 1.5rem;

}

.csection {
    padding-bottom: 2rem;
}

.contact h2 {
    margin-bottom: 3rem;
    color: #0f0f0f;
}

.contact form {
    max-width: 70rem;
    margin: 1rem auto;
    text-align: center;
    margin-bottom: 1rem;

}

.contact form .input-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

.contact form .input-box input,
.contact form textarea {
    width: 100%;
    padding: 1.5rem;
    font-size: 1.6rem;
    color: var(--second-bg-color);
    background: var(--bg-color);
    border: .2rem solid var(--second-bg-color);
    margin: .7rem 0;
    border-radius: .8rem;
    margin-bottom: 2rem;

}

.contact form .input-box input {
    width: 49%;
}

.contact form textarea {
    resize: none;
}

.contact form .btn {
    margin-top: 2rem;
    cursor: pointer;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: .01rem 9%;
    background: black;
    min-height: auto;
}
.footera{
    min-height: auto;
}
.footer-text p {
    font-size: .9rem;
    color: white;
}

.footer-iconTop a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* padding: .1rem; */
    background: var(--second-bg-color);
    border-radius: .8rem;
    transition: .5s ease;
    margin: .1rem;

}

.footer-iconTop a:hover {
    box-shadow: 0 0 1rem var(--main-color);
}

.footer-iconTop a i {

    font-size: 1rem;
    color: var(--main-color);
}

/* adress section */

.footera {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; */
    background-color: rgb(119, 120, 120);
    min-height: 30vh;
    padding: 3rem 4% 1rem;
}

.parafa p {
    font-size: 1.5rem;
    margin-bottom: .5rem;
    line-height: 2rem;
    margin-left: 3rem;
    color: white;
    font-weight: 200;
    /* font-weight: 400; */
    word-spacing: .3rem;
}

.footercontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem
}

.footeradress-box {
    flex: 1 1 30rem;
    padding: 1rem 1rem 1rem;
    text-align: left;

}

.footeradressbox1 {
    text-align: center;
    height: 20rem;
    width: 60rem;
    align-items: center;
    display: flex;
    justify-content: center;
}

.headingfa {
    text-align: center;
    font-size: 2rem;
    color: rgb(25, 25, 25);
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.footera h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    line-height: 2rem;
}

.dyfa {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    margin-left: 3rem;
    color: var(--second-bg-color);
}

#phnparafa {
    margin-left: -.02rem;
    margin-left: 1rem;
}

.phnimgfa {
    height: 2rem;
    width: 2rem;
}

.phndiv {
    margin: 1rem 0 1rem;

}

.phnsdiv {

    display: flex;
    align-items: center;
}

.footeradress-box iframe {
    height: 100%;
    width: 100%;
    border-radius: .5rem;
}

.smfa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
}

.social {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#social a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    background-color: transparent;
    border: .2rem solid #1b1b1a;
    border-radius: 50%;
    font-size: 2rem;
    margin: 1rem 2rem 1rem 0;
    text-align: left;

}
#social i{
    color: var(--second-bg-color);
}


@media(min-width:1024px) {
    html {
        font-size: 80%;
    }

    .img {
        display: none;
    }


}

@media(min-width :769px) and (max-width:1023px) {
    html {
        font-size: 60%;
    }

    .home-content h1 {
        width: 37rem;
    }

    .img {
        display: none;
    }
}

@media (min-width:769px) and (max-width:819px) {
    .aboutimghub {
        display: none;
    }

    .about {
        flex-direction: column-reverse;
        gap: 4rem;
    }

    #textcircle {
        
        margin-right: -15rem;
        margin-top: -10rem;
    }

    .img {
        display: none;
    }
}

@media(max-width:768px) {
    /* html {
        font-size: 50%;
    } */
    .sectionh {
        min-height: 100vh;
        padding: 9rem 3% 2rem;
    }
    .homebtn{
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        gap: 0;
    }
    .home-content h1 {
        width: 37rem;
    }

    .about {
        flex-direction: column-reverse;
        gap: 4rem;
    }

    .about-img {
        flex-direction: row-reverse;
    }

    .aboutimghub {
        display: none;
    }

    #textcircle {
        height: 15rem;
        position: absolute;
        right: 0;
        margin-top: -8rem;
        margin-right: 2rem;
    }

    .parafa p {
        line-height: 2rem;
    }

    .footercontainer {
        gap: .5rem;
    }

    .footeradress-box {
        padding: 1rem 2rem 1rem;
        padding-bottom: 0;
    }

    .footeradressbox1 {
        height: 10rem;
        margin-bottom: 1rem;
    }

    .home {
        background: url('image/mobileimg.png');
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        animation: none 15s infinite ease-in-out;

        font-size: 100%;

    }

    /* .home-content {
        max-width: 58%;
    } */

    .home-content p {
        font-size: 1.9rem;
    }

    .btnh {
        margin-top: 1rem;
    }

    #menu-icon {
        display: block;
    }

    .navbar a {
        height: 100vh;
        width: 100%;
        text-align: center;
        /* display: block; */
        transition: all 0.3s ease;


    }

    #menu-icon {
        display: block;

    }

    .navbar {
        display: flex;
        flex-direction: column;
        position: fixed;
        position: absolute;
        top: 100%;

        left: 0;
        width: 100%;
        height: 30rem;
        padding: 1rem 3%;
        background: rgba(255, 255, 255, 0.9);
        border-top: .1rem solid rgba(0, 0, 0, .2);
        box-shadow: 0 .5rem rgba(0, 0, 0, .2);
        overflow: hidden;
        display: none;
    }

    .navbar.navbarh {
        display: none;
    }

    .navbar.active {
        display: flex;
        flex-direction: column;
        position: fixed;
        position: absolute;
    }

    .navbar a {
        text-align: left;
        display: block;
        font-size: 1.5rem;
        margin: 1rem 0;
    }
    .services{
       padding: 5rem 8% 6rem; 
       min-height: auto;
    }
}