.AboutMain,
.ServiceMain {
    width: 100%;

}


.AboutDG {
    width: 100%;
    display: flex;
    /* flex-wrap: wrap; */
    gap: 20px;
    padding: 20px;
}

.AboutDGContent,
.AboutDGImg {
    flex: 50%;
}

.ServiceDGContent .AboutDGContent .MiniHeading,
.AboutServicesHeading .MiniHeading,
.AboutReviewContent .MiniHeading,
.ServiceDGContent .MiniHeading {
    color: #3465AF;
    font-weight: 600;
    font-size: 14px;
}

.AboutDGContent p {
    text-align: justify;
    line-height: 30px;
}

.AboutDGContent h1 {
    font-size: 62px;
    line-height: 50px;
}

.TagLineSection {
    width: 100%;
    background-color: #000000;
    display: flex;
    align-items: flex-end;
    padding: 20px 40px;
    justify-content: space-between;
}

.TagLine,
.TagLineImg {
    flex: 50%;
}

.TagLine h1 {
    color: #fff;
    font-size: 62px;
}

.TagLine p {
    color: #fff;
    font-size: 30px;
}

.ImgBox {
    margin: 0 auto;
    width: 65%;
}

.Less {
    display: none;
}

.QuoteBtn {
    width: 50%;
    margin: 0 auto;
    border-radius: 20px;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(to bottom right, #45DD53, #3465AF);
}

.AboutServiesSection {
    width: 100%;
    background-color: #3465af47;
    padding: 20px;
}

.AboutServices {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.AboutServicesHeading {
    width: 65%;
    text-align: center;
    margin: auto;
}

.AboutServicesHeading p {
    text-align: center;
}

.SubPara {
    font-size: 24px;
    font-weight: 500;
    margin: 0;
}

.ExtraWidth {
    width: 290px !important;
}

.CommitmentSection {
    width: 100%;
    padding: 80px 0;
    background-image: url(../Assets/hands-partners\ \(1\)\ 1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: 40px;
    background-attachment: fixed;
}

.ContactInfo {
    display: flex;
    justify-content: space-evenly;
    width: 80%;
    margin: auto;
    align-items: center;
    padding: 20px;
}

.ItemImg {
    width: 20%;
}

.ContactItem {
    display: flex;
    gap: 20px;
    align-items: center;
}

.AboutReview {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.ReviewHeading {
    margin: auto;
    width: 70%;
}

.ReviewHeading h1 {
    font-size: 40px;
    text-align: center;
}

.AboutReviewBox {
    display: flex;
    justify-content: space-between;
    width: 65%;
    align-items: center;
    margin: auto;
}

.AboutReviewContent {
    width: 68%;
}


.AboutReviewContent p {
    text-align: justify;
}

.ClientImg img {
    width: 80%;
    float: left;
}

.aboutDesktop {
    display: flex;
}

.AboutReviewBoxMobile {
    display: none;


}

.ExtraSubPara {
    color: #6b6b6b;
    font-size: 22px;
    font-weight: 400;
    padding: 20px 0 0 0;
}

.divider {
    display: block;
}

.AboutDGServiceSection {
    width: 95%;
    padding: 50px 20px;
    margin: auto;
}

.AboutDGService {
    display: flex;
    align-items: center;
}


.ServiceDGImg,
.ServiceDGContent {
    flex: 50%;
}

.ServiceDGContent h1 {
    font-size: 50px;
}

.ServicePara {
    text-align: justify;
    line-height: 35px;
    font-size: 18px;
    color: #6b6b6b;
}

.ServicesDetails {
    width: 100%;
    padding: 50px 20px;
}

.ServiceHeading {
    width: 80%;
    margin: auto;
    padding-bottom: 50px;
}

.ServiceHeading p {
    font-size: 36px;
    text-align: center;
    font-weight: 500;

}

.ServiceContainer {
    display: flex;
    justify-content: space-between;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    align-items: center;
    transition: all 300ms ease-in-out;
    background-color: #3465AF37;
}

.ServiceContainer:hover {
    background-color: #fff;
    box-shadow: 0 0 5px #3465AF;
    scale: 1.02;
}

.ServiceContainerImg {
    width: 42%;
    height: 325px;
}

.ServiceContainerContent {
    padding: 20px;
    width: 58%;
}

.Btn-1 {
    transition: all 300ms ease-in-out;
}

.Btn-1:hover {
    scale: 1.1;
}

.containerContent {
    color: #3465AF;
    font-size: 20px;
    font-weight: 600;
}

.ContainerPara {
    line-height: 25px;
    font-size: 16px;
}

.IndustryCard {
    width: 27%;
    box-shadow: 0 0 3px #3465AF37;
    padding-bottom: 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 300ms ease-in-out;
}

.IndustryCard:hover {
    box-shadow: 0px 0px 1px 2px #0d57c637;
    scale: 1.04;
}

.PackageSection {
    width: 100%;
    padding: 10px;
}

.PackageContainer {
    width: 98%;
    margin: auto;
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.PackageCard {
    box-shadow: 0 0 3px #3465AF37;
    width: 380px;
    display: flex;
    flex-direction: column;
    background-color: #0c141c;
    gap: 10px;
    border-radius: 8px;
    padding: 20px 10px;
    transition: all 300ms ease-in-out;
}

.PackageCard:hover {
    box-shadow: 0px 0px 1px 2px #0d57c637;
    scale: 1.02;
}

.PackageCard h1 {
    color: #d5e6ff;
    font-size: 35px;
}


.PackageCard p {
    text-align: justify;
    color: #fff;
}

.Package-content {
    display: flex;
    gap: 10px;
    flex-direction: column;
    padding: 10px 0px;
    color: #fff;

}

.color-animation {
    animation: ColorAnimation 2s infinite linear;
    font-weight: 600;
    font-size: 18px;
}

.keypoint {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
}

.keypoint i {
    animation: ColorAnimation 2s infinite linear;
}

.SelectBox,
.fileBox {
    width: 640px;
    height: 40px;
}

.TextArea {
    width: 640px;
}


.IconsBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    gap: 5px;
}


.SocialIcon {
    border-radius: 30px 0 0 30px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    width: 180px;
    position: fixed;
    z-index: 12;
    transition: all 300ms ease-in;
    right: -125px;
}

.SocialIcon i {
    background-color: #fff;
    border-radius: 50%;
    font-weight: 600;
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.SocialIcon p {
    color: #fff;
    margin: 0;
    font-weight: 600;
    font-size: 17px
}

.SocialIcon:hover {
    right: 0;
    cursor: pointer;
}

.MainBox {
    display: block;
}

.IndustryContainer {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.About {
    display: flex;
    padding: 30px 20px;
    gap: 20px;
}

.AboutSubContent {
    flex: 50%;
    padding: 20px 0;
}

.AboutSubContent h1 {
    color: #3465AF;
    font-size: 16px;
}

.AboutSubContent h2 {}

.AboutSubContent p {
    line-height: 30px;
    word-spacing: 5px;
    font-size: 20px;
    color: #6b6b6b;
}

.ImageSection {
    flex: 50%;
    display: flex;
    align-items: center;
}

.Image {
    width: 100%;
    height: 85%;
}


.Image img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.HeadingBox h2 {
    font-size: 35px;
    padding: 0;
}

.WhyContainer {
    display: flex;
    gap: 10px;
    padding: 20px;
    align-items: center;
}

.Left {
    display: flex;
    align-items: center;
    row-gap: 10px;
    width: 55%;
    flex-wrap: wrap;
    margin: auto;
}

.WhyImage {
    width: 45%;
}

.WhyImage img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.LeftContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 350px;
    height: 200px;
    background-color: #3465AF27;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 5px #3465AF27;
}

.LeftRow {
    display: flex;
    width: 100%;
    gap: 20px;
}

.LeftBox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 350px;
    height: 220px;
    background-color: #3465AF27;
    padding: 15px;
    border-radius: 5px;
    transition: all 300ms ease-in-out;
    box-shadow: 0 0 5px #3465AF27;
}

.LeftBox:hover {
    transform: translateY(-10px);
}

.Title-Box {
    display: flex;
    gap: 5px;
    align-items: center;
}

.TitleIcon {
    background-color: #fff;
    width: 50px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    padding: 5px 0 0 0;
}

.Title-Box h3 {
    font-size: 30px;
    padding: 10px 0 0 0;
}

.StartedContainer {
    margin: 40px 0 0 0;
    background-color: #273746;
    padding: 50px 0;
    color: #fff;
}

.StartedContainer h1 {
    text-align: center;
    font-size: 40px;
}

.StartedContent {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.StartedLeft {
    flex: 50%;
}

.StartedLeft p {
    line-height: 35px;
    font-size: 20px;
    word-spacing: 4px;
    color: #c6c6c6;
}

.rightStarted {
    flex: 50%;
    display: flex;
}

.IndustrySection {
    display: flex;
    gap: 20px;
    padding: 50px;
    justify-content: center;
    flex-direction: column;
}

.IndustryImage {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    height: 30vh;
}

.IndustryImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.PackagesDiv li {
    display: flex;
    gap: 20px;
    align-items: center;
}

.PackagesDiv li img {
    width: 30px;
    height: 30px;
}



.PageTitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}

.PageTitle h1 {
    font-size: 55px;
    color: #fff;
}

@media screen and (max-width:768px) {

    .PopupForm {
        width: 100%;
        padding: 20px 10px;
        position: absolute;
        top: 2%;
    }

    .PageTitle h1 {
        font-size: 40px;
        color: #fff;
    }

    .PageTitle {
        margin-top: 0px;
        position: absolute;
        bottom: 70px;
        margin-inline: auto;
        left: 0;
        right: 0;
        text-align: center;
    }

    .WhyImage {
        width: 100%;
    }

    .About,
    .WhyContainer,
    .LeftRow {
        flex-wrap: wrap;
    }

    .Left {
        width: 100%;
        row-gap: 20px;
    }

    .LeftBox {
        width: 100%;
        height: auto;
    }

    .StartedContent {
        flex-wrap: wrap;
    }

    .StartedContainer {
        padding: 10px;
    }

    .Heading {
        text-align: left !important;
    }

    .StartedContainer h1 {
        text-align: left;
    }

    .HeadingBox p {
        text-align: justify;
    }

    .MainBox {
        display: block;
    }

    .IconsBox {
        display: none;
    }

    .ServiceHeading {
        width: 100%;
        padding-bottom: 30px;
    }

    .ServiceHeading p {
        font-size: 22px;
    }

    .ServiceContainer {
        flex-wrap: wrap;
    }

    .ServiceContainerImg {
        width: 100%;
        height: auto;
    }

    .ServiceContainerContent {
        width: 100%;
    }

    .AboutDGService {
        flex-wrap: wrap;
    }

    .ServiceDGImg,
    .ServiceDGContent {
        flex: 100%;
    }

    .Btn-1 {
        width: fit-content;
        padding: 10px 15px;
    }

    .divider {
        display: none;
    }

    .ContactInfo {
        gap: 20px;
        flex-wrap: wrap;
    }

    .CommitmentSection {
        padding: 50px 10px;
    }

    .AboutServicesHeading {
        width: 100%;
    }

    .ExtraSubPara {
        font-size: 16px;
    }

    .AboutReviewBoxMobile {
        display: block;
        width: 100%;
        padding: 10px;
        box-shadow: 0 0 3px #164ab5;
        border-radius: 10px
    }

    .aboutDesktop {
        display: none;
    }

    .AboutReview {
        padding: 10px;
    }

    .AboutReviewBox {
        flex-wrap: wrap;
        width: 100%;
    }

    .ClientImg {
        margin: auto;
    }

    .ClientImg img {
        float: none;
    }

    .AboutReviewContent {
        width: 100%;
    }

    .ReviewHeading {
        width: 100%;
    }

    .AboutDG {
        flex-wrap: wrap;
    }

    .TagLineSection {
        flex-wrap: wrap;
    }


    .IconContainer {
        flex-wrap: wrap;
        gap: 15px;
    }

    .InputContainer,
    .SelectBox,
    .fileBox {
        width: 100%;
    }

    .InputBox {
        width: 50%;
    }

    .TextArea {
        width: 100%;
    }


    .PackagesDiv li {
        border-bottom: 1px solid #6b6b6b;
        padding-left: 15px;
        font-size: 14px;
    }


    .IndustryContainer {
        flex-wrap: wrap;
    }

    .IndustryCard {
        width: 100%;
        ;
    }
}