:root {
    --VeryLightBlue: #77d5f6;
    --NormalLightBlue: #117db8;
    --DarklLightBlue: #1391d4;
    --lightBlue: #31c2e3;
    --darkBlue: #0f2290;
    --bluebg: #084FC7;
    --lightDarkBlue: #225C9E;
    --lightPurple: rgb(192, 119, 243);
    --purple: #5216a3;
    --DarkPurple: #200046;
    --grey: #F1F1F2;
}
html {
    scroll-behavior: smooth;
  }

a[href^=tel] {
    text-decoration: inherit;
    color: inherit;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
    font-size: 18px;
    background-color: var(--DarkPurple);
    letter-spacing: 0.5px;
}

hr {
    justify-self: center;
    margin: 10px auto;
    color: purple;
    border-top: 1px solid rgba(128, 0, 128, 0.452);
    width: 70%;
}

img {
    width: 100%;
}

p {
    line-height: 1.7 !important;
    font-size: 1em !important;
    font-weight: 300 !important;
}

a {
    text-decoration: none !important;
}

input {
    border: none;
    border-bottom: 1px solid rgba(89, 77, 100, 0.274);
    padding: 5px;
    outline: none;
    background-color: var(--grey);
    width: 100%;
    font-size: 1em;
}

textarea {
    border: none;
    border-bottom: 1px solid rgba(89, 77, 100, 0.274);
    padding: 5px;
    outline: none;
    background-color: var(--grey);
    width: 100%;
    font-size: 1em;
}
.lineh15{
    line-height: 1.5;
}
.footer-link{
    transition: 0.3s ease-in-out;
}
.footer-link:hover{
 
  color: var(--lightBlue);
}

.tWhite{
    color: white;
}
.readMore{
    color: rgb(175, 114, 114);
    font-weight: 500;
   
}

.blur {
    
    background-color: rgba(220, 233, 240, 0.2) !important;
    backdrop-filter: blur(10px) !important;
}

.blurPurple {
    background-color: rgba(51, 7, 100, 0.5) !important;
    backdrop-filter: blur(10px) !important;
}

.opacity {
    opacity: 1;
}

.tthin {
    font-weight: 100;
}

.title {
    padding: 25px 10px;
    font-weight: 700;
    font-size: 2em;
}

.subTitle {
    font-weight: 300;
    font-size: 1.3em;
}

.title.purple {
    color: var(--purple);
}

.tPurple {
    color: var(--purple);
}

.subTitle.cyan {
    color: var(--lightBlue);
}

.tCenter {
    text-align: center;
}

.tRight {
    text-align: right;
}

.tLight {
    color: white;
}

.lightBg {
    background-color: var(--grey) !important;
}

.grdiantBg {
    background-image: linear-gradient(to right, var(--DarkPurple), var(--purple), var(--lightDarkBlue), var(--lightDarkBlue), var(--purple), var(--DarkPurple));
    box-shadow: 0px 0px 15px #00000073;
}

.purpleBg {
    background-color: var(--purple);
}

.darkPurpleBg {
    background-color: var(--DarkPurple);
}
.grdianBlue{
    background-image: linear-gradient(to bottom, rgb(120,28,147),#191919);
    /* background-color: rgb(252, 252, 252); */
}

.cyanBg {
    background-color: var(--NormalLightBlue);
}

.blueBg {
    background-color: var(--darkBlue);
}

.lightblueBg {
    background-color: var(--lightDarkBlue);
}

.gradiantLightBlue{
    background-image: linear-gradient(to right, rgb(44,77,141),rgb(69, 132, 190));
}

.border-t {
    border-top: 1px solid white;
}

.border-b {
    border-bottom: 1px solid white;
}

.border {
    border-right: 2px solid white;
    border-left: 2px solid white;
    border-radius: 10px;
}

.border-Purple {
    border-color: var(--purple);
}

.fullWidth {
    width: 100%;
}


/*--------------------------------------
                BUTTONS
--------------------------------------*/

.btn {
    font-size: 1em;
    letter-spacing: 1px;
    padding: 8px 15px;
    border-radius: 30px;
    margin-top: 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border: none;
    outline: none;
    text-transform: uppercase;
}

.btn.btnLightBlue {
    background-color: var(--NormalLightBlue);
    color: white;
    transition: all 0.3s ease-in-out;
}


.btn.btnLighterBlue {
    background-color: var(--lightBlue);
    color: white;
    transition: all 0.3s ease-in-out;
}
.btnDarkBlue{
    background-color:#2c38e2 ;
    color: white;
   
    transition: all 0.3s ease-in-out;
}
.btnDarkPurple{
    background-color:#9b3fd8 ;
    color: white;
    transition: all 0.3s ease-in-out;
}

.btnDarkPurple:hover{

    background-color: #6305a1;
}


.btnDarkBlue:hover{
    background-color:#141da7 ;
 
}

.btnLightBlue:hover, .btnLighterBlue:hover{
    background: var(--DarklLightBlue);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.616);
}

.btn.btnPurple {
    background-color: var(--purple);
    color: white;
    transition: all 0.3s ease-in-out;
}

.btn.btnPurple:hover {
    background: var(--lightPurple);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.616);
}


/*--------------------------------------
                MARGIN AND PADDING
--------------------------------------*/

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 15vh !important;
}

.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 1rem !important;
}

.mr-1 {
    margin-right: 1rem !important;
}
.mr-4 {
    margin-right: 6rem !important;
}

.ml-1 {
    margin-right: 1rem !important;
}

.mb-1 {
    margin-bottom: 1rem !important;
}

.mb-2 {
    margin-bottom: 2rem !important;
}

.mb-3 {
    margin-bottom: 3rem !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.3rem !important;
}

.p-2 {
    padding: 1rem !important;
}

.p-3 {
    padding: 3rem !important;
}

.p-5 {
    padding: 6em;
}

.pr-1 {
    padding-right: 2rem !important;
}

.p-rl1 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.p-rl3 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.pb-1 {
    padding-bottom: 1rem !important;
}

.pl-1 {
    padding-left: 1rem !important;
}

.d-sm {
    display: none;
}


/*--------------------------------------
                NAVIGATION
--------------------------------------*/

header {
    top: 0;
    position: absolute;
    width: 100%;
    white-space: nowrap
}

.nav {
    padding: 10px;
    margin-right: 5px;
    padding: 10px;
}

.navLogo {
    transition: all 1s ease-in-out;
    position: relative;
    left: 0.5%;
    width: 100px;
    margin-left: 10px;
    z-index: 99;
    cursor: pointer;
    pointer-events: all;
}

.navBurgger {
    position: fixed;
    right: 10px;
    top: 30px;
    z-index: 1;
    margin-right: 10px;
    background-color: var(--DarkPurple);
    padding: 2px;
    transform: translate(-50%, -50%);
    border-radius: 20%;
}

.navBurgger>.line {
    background-color: var(--VeryLightBlue);
    height: 2px;
    width: 30px;
    margin: 5px;
    transition: all 0.3s ease-in-out;
    border-radius: 50%;
}

div.navLinks {
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient( rgba(151, 25, 230, 0.5), var(--DarkPurple));
    height: 100vh;
    width: 100%;
    padding-left: 10%;
    margin: 0;
    clip-path: circle(0px at 100% 0%);
    -webkit-clip-path: circle(0px at 100% 0%);
    transition: all 0.3s ease-in-out;
}

ul.navLinks {
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(217deg, rgba(32, 1, 70, 0.8), rgba(192, 119, 243, 0) 100.71%), linear-gradient(127deg, rgba(82, 22, 163, 1), rgba(32, 0, 70, 1) 70.71%), linear-gradient(336deg, rgba(192, 0, 243, .8), rgba(0, 0, 255, 0) 70.71%);
    height: 100vh;
    width: 100%;
    margin: 0;
    clip-path: circle(0px at 100% 0%);
    -webkit-clip-path: circle(0px at 100% 0%);
    transition: all 0.3s ease-in-out;
    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    list-style-type: none;
}

.navLinks.open {
    clip-path: circle(140vh at 90% -0%);
    -webkit-clip-path: circle(140vh at 90% -0%);
}

div.navLinks.open {
    clip-path: circle(142vh at 50% 10%);
    -webkit-clip-path: circle(142vh at 50% 10%);
}

.navLinks>li>a {
    color: var(--NormalLightBlue);
    font-weight: 300;
    font-size: 2em;
    text-decoration: none;
    pointer-events: all;
    cursor: pointer;
}

.link {
    margin: 10px;
  
}
.navLinks>.link>a{
    transition: all 0.5s ease-in-out;
}

.link>a:hover{
    color: var(--lightPurple);
}

.line1.toggle {
    transform: rotate(-135deg) translate(-3px, -5px);
}

.line2.toggle {
    width: 0;
}

.line3.toggle {
    transform: rotate(135deg) translate(-3px, 8px);
}


/*--------------------------------------
               lANDING section1
--------------------------------------*/

.section {
    display: grid;
    padding: 20px;
}

.section1 {
    background: url('./landingimg-01.jpg')   ;
    background-repeat: no-repeat;
     justify-content: start;
    background-size: cover;
    background-position: center;
    height: 100vh; 
    align-items: center;
}

.companyName {
    color: var(--NormalLightBlue);
    font-size: 2.1em;
    letter-spacing: -2px;
    font-weight: 500;
}

.slogan {
    color: var(--lightPurple);
    font-size: 1.3em;
    letter-spacing: 2px;
    font-weight: 300;
    padding: 5px;
    margin-bottom: 9px;
}


/*--------------------------------------
               lANDING section2
--------------------------------------*/

.responsive {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px 20px;
    padding: 25px;
    margin-bottom: 25px;
}

@media screen and (max-width: 900px) {
    .icon {
        width: 14vw !important;
    }
    .responsive {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px 20px;
      
    }
}

@media screen and (max-width: 700px) {
    footer {
        grid-template-columns: 2fr 1fr 1fr !important;
    }
    .d-md-none {
        display: none;
    }
    .icon {
        width: 12vw !important;
    }
}

@media screen and (max-width: 600px) {
    .m-sm-1 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }
    .border-sm {
        border-radius: 50px;
        background-color: transparent;
        box-shadow: 0px 0px 8px var(--purple);
    }
    .noBg {
        padding: 30px;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        background: var(--purple) !important;
    }
    .order-1-sm {
        order: 1;
    }
    .order-2-sm {
        order: 2;
    }
    .smOneCol {
        text-align: center !important;
    }
    .serviceTwoCol {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    .section1 {
        justify-content: center;
        text-align: center;
    }
    .p-5 {
        padding: 0rem !important;
    }
    .copyRight {
        background: none !important;
        text-align: center;
        width: 100%;
        padding: 0 !important;
    }
    footer {
        padding: 20px !important;
        grid-template-columns: 1fr 1fr !important;
        align-items: center;
    }
    .d-sm-none {
        display: none;
    }
    .w-sm-80 {
        width: 86%;
    }
    .twoRows {
        padding: 2vh !important;
    }
}

@media screen and (max-width: 400px) {
  
    .section {
        padding: 10px;
    }
    .p-5 {
        padding: 0.3rem !important;
    }
    .media {
        order: 99;
    }
    footer {
        padding-bottom: 20px !important;
        grid-template-columns: 1fr !important;
        align-items: center;
        text-align: center;
    }
    .d-xs-none {
        display: none;
    }
    .t-xs-center {
        text-align: center;
        margin-bottom: 10px;
    }
    .navBurgger {
        top: 6%;
        right: 0px;
    }
    .responsive {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 10px 10px;
        padding: 5px;
        margin-bottom: 15px;
    }
    .section1 {
      
        background: url('./landingimgMobile-01.jpg') ;
        justify-content: center;
        background-size: cover;
        background-position: center;
        text-align: center;
     
    }
    .p-1-sm {
        padding: 0.3rem !important;
    }
    .btn {
        letter-spacing: 1px;
        padding: 5px 10px;
    }
    .whoWeAre {
        text-align: center;
        padding: 20px !important;
    }
    .t-sm-center {
        text-align: center;
    }
}

@media screen and (max-width: 360px) {
    .responsive {
        grid-template-columns: repeat(auto-fit, minmax(auto, 1fr)) !important;
        grid-gap: 15px 0px;
        padding: 0px !important;
        margin-bottom: 15px;
    }
}

.service {
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 7px 1px rgba(32, 0, 70, 0.5);
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
    align-items: start;
    align-content: start;
    text-align: center;
}


}


/*--------------------------------------
               lANDING section3
--------------------------------------*/

.section3 {
    background-image: linear-gradient(to right, var(--VeryLightBlue), var(--lightDarkBlue), var(--darkBlue)) !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: center;
    justify-items: center;
}
.Bnner{
    background-image: linear-gradient(to right, var(--VeryLightBlue), var(--lightDarkBlue), var(--darkBlue)) ;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    text-align: center;
}


/*--------------------------------------
               lANDING section4
--------------------------------------*/

.section4 {
    background: url('./img/whoWeAreimg.jpg') no-repeat center fixed;
    background-size: cover;
}

.whoWeAre {
    padding: 0 5em;
    color: white;
    font-size: 1em;
    line-height: 1.8;
}

.shadow {
    background-color: rgba(32, 0, 72, 0.8);
    padding: 9% 20px;
    display: grid;
    align-items: center;
    align-content: center;
    grid-gap: 20px;
}


/*--------------------------------------
              FOOTER
--------------------------------------*/

footer {
    padding-top: 40px !important;
    padding-right: 10 !important;
    padding-left: 0 !important;
    padding-bottom: 0;
    grid-template-columns: 2fr repeat(3, 1fr);
    grid-gap: 15px;
    background-color: var(--DarkPurple);
    color: white;
}

.media {
    display: grid;
    justify-items: center;
}

.socialMedia>ul {

    font-size: 2em;
    display: grid;
    grid-auto-flow: column;
    grid-gap: 10px;
}

.socialMedia>ul>li {
    transition: all 10s ease-in-out;
    list-style-type: none;
    font-weight: 100;
}


footer>div>ul {
    list-style-type: none;
    font-weight: 100;
}

footer>div>ul>li {
    padding-top: 10px;
}

.copyRight {
    text-align: center;
}

.copyRight>img {
    width: 50%;
    text-align: center;
}


/* --------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------
about PAGE
--------------------------------------------------------------------------------------------------*/

.shape {
    background-color: var(--grey) !important;
    background: url("./img/shapesContact/contact1.png") no-repeat center;
}

.ShapeCenter {
    padding-bottom: 23px;
    background-size: contain;
    height: 40vh;
}

.color {
    background-color: var(--grey) !important;
    background: url("./img/backGround.png") no-repeat right;
}

.white {
    background-color: var(--DarkPurple) !important;
    background: url("./img/whiteShape-01.png") no-repeat right;
}

.ShapeTop {
    padding-bottom: 23px;
    background-size: 99% 103%;
    height: auto;
}

.twoRows {
    margin-top: 10vw;
    padding: 10vw;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 3vh;
    width: 80%;
    font-size: 1.1em;
}

.sectionPadding1 {
    padding: 5px
}

.twoRow {
    margin-top: 1vw;
    display: grid;
    grid-template-rows: auto 1fr;
    justify-content: center;
    justify-items: center;
    font-size: 1.1em;
}

.whyUS {
    margin-top: 15px;
    display: grid;
    grid-template-columns: auto 1fr;
   
    justify-items: center;
    grid-gap: 2vw;
    font-size: 1em;
    align-items: center;
}

.right {
    justify-self: right;
    align-self: center;
}

.icon {
    width: 8vw;
}

.iconsm {
    width: 7vw;
}

.exceedWby20 {
    width: 60vw;
}

.exceedWby30 {
    width: 70vw;
}


.exceedWby40 {
    width: 80vw;
}

.lessWby20 {
    width: 50vw;
}

.border-shadow-purple {
    border-radius: 50px;
    background-color: transparent;
    box-shadow: 0px 0px 8px var(--DarklLightBlue);
}

.border-shadow-dark {
    border-radius: 50px;
    background-color: transparent;
    box-shadow: 0px 0px 8px var(--DarkPurple);
}


/*--------------------- cards ---------------------*/

.cards-responsive {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px 20px;
    padding: 25px;
    margin-bottom: 25px;
}

.cardTopColored {
    background-color: var(--grey);
    border-radius: 30px;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: start;
}

.cardHead {
    background-color: var(--bluebg);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    padding: 20px;
    text-align: center;
    margin-bottom: 0px;
}

.cardImg {
    justify-self: center;
    padding: 0;
    margin: 0;
    align-self: center;
}

.cardBody {
    padding: 20px 9px;
    text-align: center;
}


/*------------------------- mission vission--------------------*/

.twoCol {
    margin: 25px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
@keyframes infinite-spinning {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

.imgCol {
    background: url("./img/mission-01.png") no-repeat left;
    background-size: contain;
    align-self: center;
  
}
.img{
    max-width: 250px;
}

.discripCol {
    align-self: center;
}

.span1 {
    grid-column: span 2;
}

@media screen and (max-width:800px) {
    .twoColm {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width:700px) {
    .cards-responsive {
        grid-template-columns: 1fr;
    }
    .twoColm {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 600px) {
    .responsive {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 20px 20px;
      
    }
    .twoCol {
        display: grid;
        grid-template-columns: 1fr;
    }
    .noborder-sm {
        border: none !important;
    }
    .p-sm-all {
        padding: 4vw;
    }
    .right {
        justify-self: center;
        align-self: center;
        padding-bottom: 10vw;
    }
    .d-sm {
        display: block;
    }
    .border-shadow-purple {
        background-color: transparent;
        box-shadow: 0px 0px 10px var(--DarklLightBlue);
        padding: 5px;
    }
    .exceedWby20 {
        width: 100%;
    }
    .lessWby20 {
        width: 100%;
    }
    .icon {
        width: 35vw !important;
    }
    .sm-title {
        color: white;
        padding-top: 20px;
        font-weight: 300;
        font-size: 1.2em !important;
    }
    .white {
        background: url("");
    }
    .oneCol {
        margin-top: 1vw;
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        justify-items: center;
        font-size: 1.1em;
    }
    .order-1-xs {
        order: 1;
    }
    .order-2-xs {
        order: 2;
    }
    .twoRows {
        margin-top: 20vw;
    }
    .whyUS {
        grid-template-columns: 1fr;
        text-align: center;
        grid-gap: 0vw;
        width: 100%;
      padding: 5px !important;
    
        
    }
    .ShapeTop {
        padding-bottom: 23px;
        background-size: 60% 101%;
        height: auto;
    }
    .xs-tsize {
        font-size: 1em;
    }
    .pl-sm-1 {
        padding-left: 6vw !important;
    }
    .contactBox {
        padding: 0 !important;
    }
    .contactBox {
        width: 100% !important;
    }
    input {
        font-size: 18px;
    }
    textarea {
        font-size: 18px;
    }
    .form {
        grid-gap: 5px;
        padding: 10px !important;
        padding-bottom: 20px !important;
    }
}

@media screen and (max-width: 500px) {
    .p-3 {
        padding: 15px !important;
    }
}

@media screen and (max-width: 450px) {
    .xs-tsize {
        font-size: 0.9em;
        line-height: 1.1em;
    }
}


/* *------------------------------
            Contact 
-------------------------------
*/

.addressCard {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    width: 45%;
}

.contactBox {
    justify-self: center;
    width: 80%;
}

.form {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
    padding: 40px;
    padding-top: 0px !important;
}


/*----------------------------------------
        SERVICES 
----------------------------------------------*/

.serviceTwoCol {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-items: center;
}

.span2 {
    grid-column: span 3;
}

.shapeBg {
    justify-content: center;
}

.serviceContact {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    height: 80vw;
}

.serviceContact>img {
    position: absolute;
    width: 90vw;
}


.alert-err {
    padding: 10px;
    background-color: #fa6247;
    color: white;
    border-radius: 12px;
  }

  .alert-success {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border-radius: 12px;
  }
  
  .closebtn {
    margin-left: 15px;
    color: white;
 
    float: right;

    cursor: pointer;
    transition: 0.3s;
  }
  
  .closebtn:hover {
    color: black;
  }