html{
    scroll-behavior: smooth;
    /* transition: all 2s ease; */
}


body {
    font-family: 'PT Serif', serif;
    background-color: black;
    overflow-x: hidden;
}

nav {
    background-color: rgba(0, 0, 0, 0.521);
    border-radius: 0px 0px 20px 20px;
}

@media(max-width:720px){
    nav {
        background-color: rgb(0, 0, 0);
        border-radius: 0px 0px 20px 20px;
    }
}

.navbar-light .navbar-toggler {

background-color: rgb(0 217 255 / 80%);
}

.navbar-light .navbar-nav .nav-link {
    color: white;
    margin-left: 10px;
    font-family: emoji;
    transition: all 0.7s;
    position: relative;
    display: inline-block;

    
    
}


.navbar-light .navbar-nav .nav-link::after {
    content: "";
    width: 0;
    height: 2px;
    background-color: rgb(0, 204, 255) ;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: 0.7s;
}


.navbar-light .navbar-nav .nav-link:hover:after {
    content: "";
    width: 100%;
    height: 2px;
    background-color: rgb(0, 204, 255) ;
    position: absolute;
    left: 0;
    bottom: 0;
}


/* @media(max-width:720px) {

    .navbar-light .navbar-nav .nav-link:hover:after {
        content: "";
        width: 25%;
        height: 2px;
        background-color: rgb(0, 204, 255) ;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    
} */


.navbar-light .navbar-nav .nav-link:hover {
    color: rgb(0, 204, 255) !important;
    transform: scale(1.1 , 1.1);
}


/* end navbar */


.cont {
    /* width: 100%; */
    height: 830px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.521) 60% , rgba(0, 217, 255, 0.062))  , url(../images/photo-1552176625-e47ff529b595.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    text-align: center;
    padding-top: 15%;
    color: white;
}

.my-h1 {
    padding-bottom: 30px;
    font-family: auto;
    font-size: 50px;
}

@media(max-width:720px) {

    .my-h1 {
        padding-top: 100px;
        font-size: 40px;
    }

    .cont{
        background-position: 100% , 50%;
    }
}

.my-span1 {
    color: rgb(0, 195, 255);
    transition: all 0.5s;
}

.my-span1:hover {
    color: white;
    cursor: pointer;
}


.my-p {
    padding-bottom: 20px;
    color: white;
    font-size: 18px;
    margin-top: 40px;
    font-weight: bold;
}

.div-down {
    width: 30px;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.007);
    /* border: 1px solid skyblue; */
    display: block;
    border-radius: 10px;
    padding: 0px 5px 0px 5px;
    margin: auto;
    margin-top: 170px;
}

.D-one {
    font-size: 15px;
    font-weight: bold;
    padding: 0;
    animation-name: down;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-direction:alternate;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
}

.D-one:hover {
    transform: none;
}

.D-two {
    font-size: 20px;
    padding: 0;
    animation-name: down;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-direction:alternate;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

.D-two:hover {
    transform: none;
}

.D-three {
    font-size: 30px;
    padding: 0;
    animation-name: down;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-direction:alternate;
    animation-iteration-count: infinite;
    animation-delay: 2s;
}

.D-three:hover {
    transform: none;
}

@keyframes down {
    0% {
        color: white;
        opacity: 3;

    }

    100% {
        color:skyblue;
    }
}


.my-btn1 {
    padding: 10px;
    width: 150px;
    border-radius: 20px;
    background-color: rgba(0, 217, 255, 0.692);
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: 0;
    margin-top: 100px;
    background-color: transparent;
    border: 1px solid rgba(0, 217, 255, 0.692);
    transition: 1s;
}

.my-btn1:hover {
    background-color: rgba(0, 217, 255, 0.692);
    
}

/* section (1) */

/* .center {
    text-align: center !important;
    margin: auto !important;
} */


@media(max-width:1200px) {
    .max-width{
        max-width: 50%;
    }
}

@media(max-width:720px) {
    .max-width{
        max-width: 100%;
    }
}

.cont2 {
    background-color: black;
    color: rgb(0, 160, 209);
    /* padding-top: 50px; */
    margin-top: 100px;
}



.my-img1 {
    margin-left: 20px;
    margin-top: 15px;
    border-radius: 20px;
    transform: rotate(4deg);
    transition: all 1s;
    /* cursor: pointer; */
}


.my-img1:hover{
    box-shadow: 0px 0px 30px skyblue;
    /* box-shadow: 5px 5px rgba(0, 217, 255, 0.199), 10px 10px rgba(0, 217, 255, 0.226), 15px 15px rgba(0, 217, 255, 0.185); */
    transform: scale(0.9  , 0.9);
    transform: rotate(-4deg);

    
    
}


@media(max-width:650px) {

    .my-img1 {
        margin-left: 10%;
        margin-bottom: 30px;
        width: 300px;
        height: 330px;
    }
    

}

.my-hr1 {
    background-color: rgb(0, 209, 157);
    width: 170px;
    height: 2px ;
    margin-left: 0px;
    padding-top: 0px;
    margin-bottom: 50px;
    border: 1.5px dashed blue;
    
}

.my-h2 {
    padding-bottom: 20px;
    font-style: italic;
}




.my-pp {
    font-family: emoji;
    font-size: 20px;
    color: white;
    width: 500px;
    text-align: justify;
    background-color: #00ffff00;
    border-radius: 10px;
    box-shadow: 5px 0px 10px skyblue;
    padding: 5px;
    margin-right: 20px;
    transform: rotate(-4deg);
    transition: all 1s;
}


.my-pp:hover{
    box-shadow: -5px 0px 10px skyblue;
    transform: rotate(4deg);

}


@media(max-width:720px){
    .my-pp {
        font-family: emoji;
        font-size: 20px;
        color: white;
        width: 320px;
        text-align: justify;
        background-color: #00ffff00;
        border-radius: 10px;
        box-shadow: 5px 0px 10px skyblue;
        padding: 5px;
        margin-right: 20px;
        transition: all 1s;
    }
}


.div-btn {
    text-align: center;
}


.my-btn2 {
    padding: 15px;
    border-radius: 10px;
    background-color: rgb(0 160 209 / 0%);
    color: white;
    border: 1px solid rgb(0 217 255);
    margin-top: 150px;
    margin-bottom: 60px;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.8s;
}

.my-btn2:hover {
    background-color:rgb(0, 164, 185);
    color: black;
    padding: 15px;

}

.cont3 {
    text-align: center;
    /* padding-top: 100px; */
    color: white;
    
}

/* .cont3:hover {
    transform: scale(0.9);
    transition: all 1s;
} */



/* .c-me {
    padding: 20px;
    border-radius: 20px;
    background-color:rgb(0, 160, 209);
    border: 0px;
    margin-top: 50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: all 0.8s;
    
} */



.c-me {

    width: 250px;
    height: 250px;
    margin: auto;
    margin-top: 100px;
    /* box-shadow: 5px 5px black ,5px 5px black ,5px 5px black , 5px 5px black; */
    box-shadow: 0px 0px 30px 15px black inset;
    border-radius: 50%;
    font-weight: bold;
    font-size: 23px;
    padding: 10px;
    background-color: white;
    color: black;
    border: 5px dashed rgb(123, 235, 255);
    /* border-left: transparent; */
    animation-name: circle ;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
    transition: all 2s;
    /* position: relative; */
    
}



@keyframes circle {

    0% {
        transform:rotate(150deg) ;
    }

    25% {
        /* transform:rotate(150deg) ; */
    }

    50% {
        transform:rotate(390deg) ;
    }

    75% {
        /* transform:rotateY(290deg); */
    }

    100% {
        transform:rotateY(360deg);
    }

}


.c-me:hover {
    box-shadow: 0px 0px 30px 10px skyblue inset , 0px 0px 50px  skyblue inset;
    background-color:rgba(0, 160, 209, 0.493);
    color: white;
    animation: none;
   
   
}

.c-mee {
    width: 250px;
    height: 250px;
    margin: auto;
    margin-top: 100px;
    /* box-shadow: 5px 5px black ,5px 5px black ,5px 5px black , 5px 5px black; */
    box-shadow: 0px 0px 30px 10px black inset;
    border-radius: 50%;
    font-weight: bold;
    font-size: 23px;
    padding: 10px;
    /* background-color: rgba(253, 0, 160, 0.041); */
    color: black;
    border: 5px dashed rgb(123, 235, 255);
    display: none;
    /* border-left: transparent; */
    animation-name: circle ;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
    transition: all 2s;
    /* position: relative; */
    
}

.c-mee:hover {
    background-color:rgba(0, 160, 209, 0.493);
    color: rgba(255, 255, 255, 0.678);    
}

@media(max-width:720px){
    
    .c-me{
        height: 150px;
        width: 150px;
        font-size: 15px;
    }
}

.my-h2-cont3 {
    background-color: rgb(0, 160, 209);
    margin-top: 100px;
    margin-bottom: 0px;
    color: black;
    display: inline-block;
    margin-bottom: 50px;
    width: 500px;
    height: 40px;
    position: relative;
}

@media(max-width:720px) {

    .my-h2-cont3 {
        background-color: rgb(0, 160, 209);
        margin-top: 100px;
        color: black;
        display: inline-block;
        margin-bottom: 50px;
        width: 350px;
        height: 40px;
        position: relative;
    }


}


.my-h2-cont3::before {
    content: "";
    width: 10px;
    height: 10px;
    border-width: 23px;
    border-style: solid;
    border-color: #00a0d1d9 #00a0d1d9 transparent transparent;
    position: absolute;
    left: 0px;
    bottom: -46px;
}

@media(max-width:720px) {

    .my-h2-cont3::before {
        content: "";
        width: 10px;
        height: 10px;
        border-width: 20px;
        border-style: solid;
        border-color: #00a0d1d9 #00a0d1d9 transparent transparent;
        position: absolute;
        left: 0px;
        bottom: -40px;
    }

}

.my-h2-cont3::after {
    content: "";
    width: 10px;
    height: 10px;
    border-width: 23px;
    border-style: solid;
    border-color: #00a0d1d9 transparent transparent #00a0d1d9;
    position: absolute;
    right: 0px;
    bottom: -46px;
}

@media(max-width:720px) {

    .my-h2-cont3::after {
        content: "";
        width: 10px;
        height: 10px;
        border-width: 20px;
        border-style: solid;
        border-color: #00a0d1d9 transparent transparent #00a0d1d9;
        position: absolute;
        right: 0px;
        bottom: -40px;
    }

}

.my-span2 {
    color: white;
    font-style: italic;
}

.my-p-cont3 {
    font-style: oblique;
    font-size: 18px;


}

@media (max-width:720px) {

    .my-p-cont3 {
        font-style: oblique;
        font-size: 18px;
        margin: auto;
        width: 250px;
    
    }
    
}

.div-so8yr {
    text-align: center;
    margin-bottom: 100px;
    margin-left: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgb(0, 104, 136) ;
    /* width: 300px; */
    transition: all 1s;
}

.div-so8yr:hover{
    background-color: rgba(0, 209, 209, 0.144);
   
}


i {
    font-size: 40px;
    color: rgb(0 , 160 , 209);
    padding: 15px;
    transition: all 0.5s;
}

i:hover {
    color: rgba(0, 160, 209, 0.507);
    transform: scale(1.1 , 1.1);
    transform: rotate(360deg);


}

.cont-all {
    margin-top: 100px;
    color: white;
    /* display: none; */
}

.c-one {
    display: none;
}

.c-two {
    display: none;
}

.my-h3 {
    font-style: oblique;
}

.my-p-so8yr {
    font-style: italic;
}

.my-bg {
    margin-top: 200px;
    background-image: linear-gradient(rgb(0 0 0 / 24%) , rgb(0 0 0 / 24%)) , url(../images/flashy-ev-charging.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    height: 600px;
    display: flex;
    border-radius: 10px;
    justify-content: space-around;
}

.one {
    width: 150px;
    margin-right: 20px;
    height: 100px;
    background-image: url(../images/1583528247-blogimg3.jpg);
    background-position: center;
    border-radius: 20px;
    box-shadow: 5px 5px 5px black;
    cursor: pointer;
}
.two {
    width: 150px;
    margin-right: 20px;
    height: 100px;
    background-image: url(../images/Porsche-Service-2.jpg);
    background-position: center;
    border-radius: 20px;
    box-shadow: 5px 5px 5px black;
    cursor: pointer;
}
.three {
    width: 150px;
    margin-right: 20px;
    height: 100px;
    background-image: url(../images/car-service.jpg);
    background-position: center;
    border-radius: 20px;
    box-shadow: 5px 5px 5px black;
    cursor: pointer;
}
.four {
    width: 150px;
    margin-right: 20px;
    height: 100px;
    background-image: url(../images/7e84efb67b7831d47a9432e8e4745810.jpg);
    background-position: center;
    border-radius: 20px;
    box-shadow: 5px 5px 5px black;
    cursor: pointer;
}
.five {
    width: 150px;
    margin-right: 20px;
    height: 100px;
    background-image: url(../images/singleimageimage.resizedViewPort.noscale.assetRootXL.jpg);
    background-position: center;
    border-radius: 20px;
    box-shadow: 5px 5px 5px black;
    cursor: pointer;
}
.sex {
    width: 150px;
    margin-right: 20px;
    height: 100px;
    background-image: url(../images/oil-horizontal.png);
    background-position: center;
    border-radius: 20px;
    box-shadow: 5px 5px 5px black;
    cursor: pointer;
}

@media(max-width:720px) {

    .my-bg {
        margin-top: 50px;
        background-image: linear-gradient(rgb(0 0 0 / 24%) , rgb(0 0 0 / 24%)) , url(../images/flashy-ev-charging.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        height: 650px;
        display: flex;
        justify-content: space-around;
    }


    .one {
        width: 150px;
        margin-right: 20px;
        height: 70px;
        background-image: url(../images/service1526395219.jpg);
        background-position: center;
        border-radius: 20px;
        box-shadow: 5px 5px 5px black;
    }
    .two {
        width: 150px;
        margin-right: 20px;
        height: 70px;
        background-image: url(../images/Porsche-Service-2.jpg);
        background-position: center;
        border-radius: 20px;
        box-shadow: 5px 5px 5px black;
    }
    .three {
        width: 150px;
        margin-right: 20px;
        height: 70px;
        background-image: url(../images/car-service.jpg);
        background-position: center;
        border-radius: 20px;
        box-shadow: 5px 5px 5px black;
    }
    .four {
        width: 150px;
        margin-right: 20px;
        height: 70px;
        background-image: url(../images/7e84efb67b7831d47a9432e8e4745810.jpg);
        background-position: center;
        border-radius: 20px;
        box-shadow: 5px 5px 5px black;
    }
    .five {
        width: 150px;
        margin-right: 20px;
        height: 70px;
        background-image: url(../images/singleimageimage.resizedViewPort.noscale.assetRootXL.jpg);
        background-position: center;
        border-radius: 20px;
        box-shadow: 5px 5px 5px black;
    }
    .sex {
        width: 150px;
        margin-right: 20px;
        height: 70px;
        background-image: url(../images/oil-horizontal.png);
        background-position: center;
        border-radius: 20px;
        box-shadow: 5px 5px 5px black;
    }




}

@media(max-width:720px) {
    .my-bg {
        background-image: url(../images/1-Mercedes.jpg);

    }
}


/* gallery accord image */

/* .bg-accord {
    background-color: red;
    width: 100%;
    border-radius: 20%;
    margin: auto;
    padding-bottom: 20px;
} */


.imag-accordlay {
    margin-right: 10px;
}



.accord {


    margin: auto;
    background-image:  url(../images/istockphoto-1174989472-170667a.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 50px;
    width: 100%;
    padding-top: 80px;
    padding-bottom: 100px;
    margin: auto;
    /* height: 900px; */
    overflow: hidden;
    /* padding-right: 30px; */
}

    




.accord li {
    
    float: left;
    width: 150px;
    display: inline-block;
    /* box-shadow: 10px 10px 200px inset rgba(0, 0, 0, 0.432), -10px 10px 10px inset rgba(0, 0, 0, 0.425) , -10px 10px 10px inset rgba(0, 0, 0, 0.24)  , 10px -10px -10px inset rgba(0, 0, 0, 0.075); */
    /* border-left: 1px solid red; */
    transition: all 2s;
    cursor: pointer;
    position: relative;
    

}




/* .tit {
    background-color: rgb(0, 225, 255);
    /* width: 110%; */
/* 
    padding: 5px;
    padding-top: 0;
    width: 20px;
    height: 20px; */
    /* position: absolute;
    left: 0;
    top: 0; */
    /* color: red; */
    /* animation-name: ray7-gay;
    border-radius: 50%;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate; */
    
 /* */ 


@keyframes ray7-gay {

    0% {
        position: absolute;
        left: 0;
        bottom: 0;
    }
    10% {
        position: absolute;
        left: 0;
        bottom: 400px;
    }
    30% {
        position: absolute;
        left: 0;
        bottom: 1000px;
    }
    50% {
        position: absolute;
        left: 0;
        bottom: 400px;
    }

    70% {
        position: absolute;
        left: 0;
        top: 0;
    }
    90% {
        position: absolute;
        left: 200px;
        top: 0;
    }
    100% {
        position: absolute;
        left: 0;
        top: 0;
    }

}



.aaa {
    color: white;
    font-weight: bold;
    
    text-decoration: none;
}

.aaa:hover {
    text-decoration: none;
    color: brown;
}

.accord .ull:hover li {
    width: 50px;
}

.accord .ull li:hover{
    width: 900px;
}



@media(max-width:1500px){

    
.accord li {
    
    float: left;
    width: 60px;
    display: inline-block;
    /* box-shadow: 10px 10px 200px inset rgba(0, 0, 0, 0.432), -10px 10px 10px inset rgba(0, 0, 0, 0.425) , -10px 10px 10px inset rgba(0, 0, 0, 0.24)  , 10px -10px -10px inset rgba(0, 0, 0, 0.075); */
    /* border-left: 1px solid red; */
    transition: all 2s;
    cursor: pointer;
    position: relative;
    

}


    .accord .ull:hover li {
        width: 40px;
    }
    
    .accord .ull li:hover{
        width: 550px;
    }




}


.enwan-accord {
    width: 350px;
    padding-top: 100px;
    margin: auto;
    /* height: 900px; */
    overflow: hidden;
    /* padding-right: 30px; */
    text-align-last: justify;
}       



.myh2-enwan-accord {
    color: white;
    margin: auto;
    margin-bottom: 10px;

}


.khat2 {
    width: 300px;
    height: 5px;
    background-color: rgb(0, 160, 209);
    margin: auto;
    border-radius: 50%;
    transition: 1s;
    animation-name: khtot ;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


.khat2:hover {
    width: 100px;
}



.khat3 {
    width: 200px;
    height: 3px;
    background-color: brown;
    margin: auto;
    border-radius: 30%;
    animation-name: khtot2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.khat4 {
    width: 100px;
    height: 3px;
    background-color: rgb(0, 160, 209);
    margin: auto;
    border-radius: 30%;
    animation-name:  khtot3 ;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


.khat5 {
    width: 50px;
    height: 3px;
    background-color: brown;
    margin: auto;
    margin-bottom: 100px;
    border-radius: 30%;
    animation-name: khtot4;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}



@keyframes khtot {
    0%{
        width: 300px;
    }

    25%{
        width: 200px;
    }

    50%{
        width: 100px;
    }

    75%{
        width: 200px;
    }

    100%{
        width: 300px;
    }
}


@keyframes khtot2 {
    0%{
        width: 100px;
    }

    25%{
        width: 200px;
    }

    50%{
        width: 300px;
    }

    75%{
        width: 200px;
    }

    100%{
        width: 100px;
    }
}


@keyframes khtot3 {
    0%{
        width: 300px;
    }

    25%{
        width: 200px;
    }

    50%{
        width: 100px;
    }

    75%{
        width: 200px;
    }

    100%{
        width: 300px;
    }
}


@keyframes khtot4 {
    0%{
        width: 100px;
    }

    25%{
        width: 200px;
    }

    50%{
        width: 300px;
    }

    75%{
        width: 200px;
    }

    100%{
        width: 100px;
    }
}


@media(max-width:720px) {

    .accord {
        width: 350px;
        padding-top: 100px;
        margin: auto;
        /* height: 900px; */
        overflow: hidden;
        padding-right: 30px;        
        
    }
    
    
    .accord li {
        /* float: left; */
        width: 40px;
        display: block;
        /* border-left: 1px solid red; */
        transition: all 2s;
        cursor: pointer;
        position: relative;
        
    
    }
    
 
    
    .aaa {
        color: white;
        font-weight: bold;
        
        text-decoration: none;
    }
    
    .aaa:hover {
        text-decoration: none;
        color: brown;
    }
    
    .accord .ull:hover li {
        width: 20px;
    }
    
    .accord .ull li:hover{
        width: 180px;
    }
    
    .imag-accord {
        width: 200px;
        height: 400px;
        
    }


}  

.imag-accord {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.582);
}




/* end gallery accord image */



/* end section (1) */

.cont4 {
    text-align: center;
    padding-top: 150px;
    color: white;
    animation-name: change;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction:alternate ;
    animation-timing-function: linear;
}

@keyframes change {

    0% {
        transform: skewy(0deg);
    }
    25% {
        transform: skewy(-3deg);
    }
    
    50%{
        transform: skewy(-5deg);
    }
    
    75% {
        transform: skewy(5deg);
    }
    
    100% {
        transform: skewy(-5deg);
    }
    
    }


/* .cont4:hover {
    transform: skewy(10deg);
    transform: rotate(360deg);
    transition: all 1s;

} */

.myh2-cont4 {
    background-color: rgb(0, 160, 209);
    width: 500px;
    margin: auto;
    margin-bottom: 50px;
    position: relative;
}

@media(max-width:720px) {

    .myh2-cont4 {
        background-color: rgb(0, 160, 209);
        width: 350px;
        margin: auto;
        margin-bottom: 50px;
        position: relative;
    }

    .myp-cont4{

        width: 250px;
        margin: auto;
    }
}

.myp-cont4 {

    font-style: oblique;
    font-size: 18px;

}

.myh2-cont4::before {
    content: "";
    width: 10px;
    height: 10px;
    border-width: 20px;
    border-style: solid;
    border-color: #00a0d1d9 #00a0d1d9 transparent transparent;
    position: absolute;
    bottom: -40px;
    left: 0px;

}

.myh2-cont4::after {
    content: "";
    width: 10px;
    height: 10px;
    border-width: 20px;
    border-style: solid;
    border-color: #00a0d1d9 transparent transparent #00a0d1d9;
    position: absolute;
    bottom: -40px;
    right: 0px;
}

.my-span3 {
    color: black;
}


.my-img2 {
    margin-left: 20px; 
    border-radius: 20px;
    transition: all 1s;
    cursor: pointer;
}


.my-img2:hover{
    box-shadow: 0px 0px 30px rgb(135, 215, 235);
    /* box-shadow: 5px 5px rgba(0, 217, 255, 0.521), 10px 10px rgba(0, 217, 255, 0.521), 15px 15px rgba(0, 217, 255, 0.521); */
    transform: scale(1.05  , 1.05);
    
    
}

.cont5 {
    margin-top: 100px;
    margin-bottom: 200px;
}


/* .layRow {
    text-align: center;
    margin: auto;
} */

.my-img2 {
    margin-right: 20px;
    margin-top: 15px;
}

@media(max-width:720px) {

    .my-img2 {
        margin-left: 25px;
        margin-bottom: 30px;
        width: 300px;
        height: 330px;
    }

}



.myp-cont5 {
    font-family: emoji;
    font-size: 20px;
    color: white;
    width: 500px;
    text-align: justify;
    background-color: #00ffff00;
    border-radius: 10px;
    box-shadow: 5px 0px 10px skyblue;
    padding: 5px;
    margin-right: 20px;
    /* margin-top: -5px; */
    transition: all 1s;
}

.myp-cont5:hover{
    box-shadow: -5px 0px 10px skyblue;

}


@media(max-width:720px){
    .myp-cont5 {
        font-family: emoji;
        font-size: 20px;
        color: white;
        width: 320px;
        text-align: justify;
        background-color: #00ffff00;
        border-radius: 10px;
        box-shadow: 5px 0px 10px skyblue;
        padding: 5px;
        margin-right: 20px;
        /* margin-top: -5px; */
        transition: all 1s;
    }
}


.my-span4 {
    color: rgb(0, 195, 255);
    font-weight: 50px;
    font-size: 35px;
    animation-name: style;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


/* @keyframes style {

    0% {
        font-size: 13px;
        color:rgba(0, 195, 255, 0.342);
    }

    25% {
        font-size: 20px;
        color:rgba(0, 195, 255, 0.692);
        text-decoration: underline;
        text-decoration-color: rgba(165, 42, 42, 0.521);
    }

    50% {
        font-size: 30px;
        color:rgb(0, 195, 255);
        text-decoration: underline;
        text-decoration-color: rgb(165, 42, 42);
    }

    75% {
    font-size: 20px;
    color:rgba(0, 195, 255, 0.664);
    text-decoration: underline;
    text-decoration-color: rgba(165, 42, 42, 0.664);
    }

    100% {
    font-size: 13px;
    color:rgba(0, 195, 255, 0.411);
    text-decoration: underline;
    text-decoration-color: rgba(165, 42, 42, 0.466);
    }


} */


.myh2-cont6 {
    text-align: center;
}


.cont6 {
    color: white;
    background-color:rgb(0, 160, 209) ;
    width: 400px;
    margin: auto;
    margin-top: 150px;
    margin-bottom: 150px;
    position: relative;
    animation-name: change;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction:alternate ;
    animation-timing-function: linear;
    
}

@keyframes change {

0% {
    transform: skewy(0deg);
}
25% {
    transform: skewy(-3deg);
}

50%{
    transform: skewy(-5deg);
}

75% {
    transform: skewy(5deg);
}

100% {
    transform: skewy(-5deg);
}

}

/* .cont6:hover {
    transform: skewy( -10deg);
    transition: all 1s;
} */

.cont6::before {
    content: "";
    width: 20px;
    height: 20px;
    border-width: 18px;
    border-style: solid;
    border-color: #00a0d1d9 #00a0d1d9 transparent transparent;
    position: absolute;
    bottom: -36px;
    left: 0px;
}

.cont6::after {
    content: "";
    width: 20px;
    height: 20px;
    border-width: 18px;
    border-style: solid;
    border-color: transparent transparent #00a0d1d9 #00a0d1d9;
    position: absolute;
    bottom: 38px;
    right: 0px;
}

@media(max-width:720px) {

    .cont6 {
        color: white;
        background-color:rgb(0, 160, 209) ;
        width: 350px;
        margin: auto;
        margin-bottom: 100px;
        margin-top: 100px;
        position: relative;
    }

}

.my-span6 {
    color: black;
}

.card {
    text-align: center;
    margin-bottom: 150px;
    background-color: rgba(0, 140, 255, 0.089);
    color: white;
    border: 1px solid rgb(0, 104, 136);
    overflow: hidden;
}


.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
    text-align: justify;
}


.card-title {
    font-size: 30px;
    font-style: italic;
    color: rgb(35, 189, 212);
    font-weight: bold;
    text-decoration: underline;

}

.my-span5 {
    display: none;
}
.my-span55 {
    display: none;
}
.my-span555 {
    display: none;
}
.my-span5555 {
    display: none;
}

.button44{
    font-weight: bold;
    transition: all 1s;
    background-color: rgba(135, 207, 235, 0.288);
    border: 1px solid skyblue;
    display: none;
}


.button44:hover {
    background-color: skyblue;
    color: black;
    
}


.button4 {
    font-weight: bold;
    transition: all 1s;
    background-color: rgba(135, 207, 235, 0.288);
    border: 1px solid skyblue;
}


.button4:hover {
    background-color: skyblue;
    color: black;
    
}



.button33{
    font-weight: bold;
    transition: all 1s;
    background-color: rgba(135, 207, 235, 0.288);
    border: 1px solid skyblue;
    display: none;
}

.button33:hover {
    background-color: skyblue;
    color: black;
    
}



.button3 {
    font-weight: bold;
    transition: all 1s;
    background-color: rgba(135, 207, 235, 0.288);
    border: 1px solid skyblue;
}


.button3:hover {
    background-color: skyblue;
    color: black;
    
}


.button22{
    font-weight: bold;
    transition: all 1s;
    background-color: rgba(135, 207, 235, 0.288);
    border: 1px solid skyblue;
    display: none;
}


.button22:hover {
    background-color: skyblue;
    color: black;
    
}


.button2 {
    font-weight: bold;
    transition: all 1s;
    background-color: rgba(135, 207, 235, 0.288);
    border: 1px solid skyblue;
}

.button2:hover {
    background-color: skyblue;
    color: black;
    
}


.button11{
    font-weight: bold;
    transition: all 1s;
    background-color: rgba(135, 207, 235, 0.288);
    border: 1px solid skyblue;
    display: none;
}

.button11:hover {
    background-color: skyblue;
    color: black;
    
}

.button1 {
    font-weight: bold;
    transition: all 1s;
    background-color: rgba(135, 207, 235, 0.288);
    border: 1px solid skyblue;
}

.button1:hover {
    background-color: skyblue;
    color: black;
    
}

.img-card1:hover {
    /* transform: scalex(-1); */
    /* transform: rotate(30deg); */
    /* transform: skew(20deg , 20deg); */
    transform: scale(1.1);
    opacity: 0.5;
    transition: all 1s;
    
}

.img-card2:hover {
    /* transform: scalex(-1); */
    /* transform: rotate(30deg); */
    /* transform: skew(20deg , 20deg); */
    transform: scale(1.1);
    opacity: 0.5;
    transition: all 1s;
    
}

.img-card3:hover {
    /* transform: scalex(-1); */
    /* transform: rotate(30deg); */
    /* transform: skew(20deg , 20deg); */
    transform: scale(1.1);
    opacity: 0.5;
    transition: all 1s;
    
}

.img-card4:hover {
    /* transform: scalex(-1); */
    /* transform: rotate(30deg); */
    /* transform: skew(20deg , 20deg); */
    transform: scale(1.1);
    opacity: 0.5;
    transition: all 1s;
    
}


/* end section (2) */



.cont7 {
    background:linear-gradient( rgba(0, 225, 255, 0.911) 70% , white) ;
    /* background-attachment: fixed; */
    padding-top: 50px;
    margin-top: 150px;
    border-radius: 20% 0px 20% 0px;
    /* border-left-color: transparent;
    border: 5px solid brown;
    transform: rotate(360deg);
    transition: transform 2s;
    animation-name: spin;
    animation-duration: 2s; */
    
}

@media(max-width:720px){

    .cont7 {
        background:linear-gradient( rgba(0, 225, 255, 0.911) 70% , white) ;
        /* background-attachment: fixed; */
        padding-top: 50px;
        margin-top: 150px;
        border-radius: 10px;
        /* border-left-color: transparent;
        border: 5px solid brown;
        transform: rotate(360deg);
        transition: transform 2s;
        animation-name: spin;
        animation-duration: 2s; */
        
    }

}


.mydiv1-cont7 {
    background-color: white;
    /* width: 250px; */
    height: 521px;
    text-align: center;
    border-radius: 50px;
    /* margin-left: 40px; */
    margin-bottom: 50px;
    border: 5px thin rgb(113, 222, 255);
    transition: all 2s;
    box-shadow: 0px 0px 10px;
    /* cursor: pointer; */
}


.mydiv2-cont7 {
    background-color: silver;
    /* width: 250px; */
    height: 521px;
    text-align: center;
    border-radius: 50px;
    /* margin-left: 40px; */
    margin-bottom: 50px;
    border: 5px thin rgb(113, 222, 255);
    transition: all 2s;
    box-shadow: 0px 0px 10px;
    /* border: 1px solid rgb(0, 160, 209); */
    /* cursor: pointer; */
}


.mydiv3-cont7 {
    background-color: rgb(255, 228, 74);
    /* width: 250px; */
    height: 521px;
    text-align: center;
    border-radius: 50px;
    /* margin-left: 40px; */
    margin-bottom: 50px;
    border: 5px thin rgb(113, 222, 255);
    transition: all 2s;
    box-shadow: 0px 0px 10px;

    /* border: 1px solid rgb(0, 160, 209); */
    /* cursor: pointer; */
}

.mydiv1-cont7:hover {
    background-color: rgba(255, 255, 255, 0.075);
    color: white;
    border: 1px solid rgb(0, 160, 209);

    /* transform: rotatey(50deg); */

}


.mydiv1-cont7:hover .myh2-cont7 {
    background-color: white;
    color: black;
    transition: all 2s;
}

.mydiv2-cont7:hover .myh2-cont7 {
    background-color: white;
    color: black;
    transition: all 2s;
}
.mydiv3-cont7:hover .myh2-cont7 {
    background-color: white;
    color: black;
    transition: all 2s;
}

.mydiv2-cont7:hover {
    background-color: rgba(255, 255, 255, 0.075);
    color: white;
    /* transition: all 1s; */
    border: 1px solid rgb(0, 160, 209);
    transition: all 2s;

}


.mydiv3-cont7:hover {
    background-color: rgba(255, 255, 255, 0.075);
    color: white;
    transition: all 1s;
    border: 1px solid rgb(0, 160, 209);

}

.myhr-cont7 {
    background-color: rgba(0, 0, 0, 0.247);
}

.myp2-cont7 {
    padding-bottom: 8px;
    /* font-weight: bold; */
    font-size: 18px;
}

.myh2-cont7 {
    color: #f8f9fa;
    box-shadow: 5px 5px 5px black;
    font-size: 35px;
    background-color: #212529;
    font-weight: bold;
    width: 200px;
    margin: auto;
    border-radius: 50px;
    margin-bottom: 10px;
    border: 2px solid #00cde8;
    transition: all 2s;
}


.mybutton-cont7 {
    padding: 5px;
    border: 0;
    background-color: #87ceeb75;
    border-radius: 10px;
    border: 2px solid skyblue;
    color: black;
    font-weight: bold;
    font-size: 17px;
    transition: all 1s;
}

.mybutton-cont7:hover {
    background-color:rgba(0, 115, 150, 0.534);
    color: white;
    padding: 10px;
    
    
}


/* loading animation */



:root {
	--yellow: #feb60a;
	--red: #ff0062;
	--blue: #00dbf9;
	--violet: #da00f7;
	--silver: silver;
    --yellow2: #feb60a;
}

div.cont20 {
	display: flex;
	justify-content: center;
	align-items: center;
    margin-bottom: 50px;

}




.yellow {
	width: 3vw;
	height: 3vw;
	border-radius: 100%;
	/* margin: 2vw; */
	background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.76) 0%, rgba(0,0,0,0) 100%);
	animation: bounce 1.5s 0.5s linear infinite;
    margin-right: 100px;
}
.red {
	width: 3vw;
	height: 3vw;
	border-radius: 100%;
	/* margin: 2vw; */
	background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.76) 0%, rgba(0,0,0,0) 100%);
	animation: bounce 1.5s 0.5s linear infinite;
    margin-right: 100px;
}
.blue {
	width: 3vw;
	height: 3vw;
	border-radius: 100%;
	/* margin: 2vw; */
	background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.76) 0%, rgba(0,0,0,0) 100%);
	animation: bounce 1.5s 0.5s linear infinite;
    margin-right: 100px;
}
.silver {
	width: 3vw;
	height: 3vw;
	border-radius: 100%;
	/* margin: 2vw; */
	background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.76) 0%, rgba(0,0,0,0) 100%);
	animation: bounce 1.5s 0.5s linear infinite;
    margin-right: 100px;
}


.violet {
	width: 3vw;
	height: 3vw;
	border-radius: 100%;
	/* margin: 2vw; */
	background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.76) 0%, rgba(0,0,0,0) 100%);
	animation: bounce 1.5s 0.5s linear infinite;
    margin-right: 100px;
}

.yellow2 {
	width: 3vw;
	height: 3vw;
	border-radius: 100%;
	/* margin: 2vw; */
	background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.76) 0%, rgba(0,0,0,0) 100%);
	animation: bounce 1.5s 0.5s linear infinite;
    margin-right: 100px;
}

@media(max-width:720px) {
    .yellow , .red , .blue , .silver , .violet , .yellow2 {
        width: 3vw;
        height: 3vw;
        border-radius: 100%;
        /* margin: 2vw; */
        background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.76) 0%, rgba(0,0,0,0) 100%);
        animation: bounce 1.5s 0.5s linear infinite;
        margin: 20px;
        
    }


}




.yellow {
	background-color: var(--yellow);
    animation-delay: 0.1s;
}

.red {
	background-color: var(--red);
	animation-delay: 0.3s;
}

.blue {
	background-color: var(--blue);
	animation-delay: 0.5s;
}

.silver {
	background-color: var(--silver);
	animation-delay: 0.7s;
}

.violet {
	background-color: var(--violet);
	animation-delay: 0.9s;
}


.yellow2 {
	background-color: var(--yellow2);
    animation-delay: 1s;
}

@keyframes bounce {
	0%, 50%, 100% {
		transform: scale(1);
		filter: blur(0px);
	}
	25% {
		transform: scale(0.6);
		filter: blur(3px);
	}
	75% {
		filter: blur(3px);
		transform: scale(1.4);
	}
}


/* end loading animation */




/* @keyframes spin {

0%{
    transform: rotate(0deg);
}

100%{
    transform: rotate(360deg);
}

} */


.gbs {
    border-radius: 30%;
    padding-top: 20px;
    transition: all 1s;
    
}

.gbs:hover {
    transform: scale(0.9 , 0.9);
    box-shadow: 5px 5px rgba(245, 222, 179, 0.185), 10px 10px rgba(245, 222, 179, 0.199), 15px 15px rgba(0, 255, 255, 0.144);
}


.cont-gbs {
    color: wheat;
}

.my-h1gbs {
    color:rgba(0, 217, 255, 0.849) ;
}


.all-gbs {
    margin-top: 100px;
}

.layout {
    background-image: linear-gradient(rgba(0, 0, 0, 0.692) , rgba(0, 0, 0, 0.548)) , url(https://cdn1.vectorstock.com/i/1000x1000/14/85/abstract-black-hexagon-pattern-on-light-blue-vector-24261485.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    width: 100%;

}

.foot1 {
    color:brown ;
    transition: 1s;
}

.foot1:hover {
    color: red;
    text-decoration: none;
}

.foot2 {
    color:brown ;
    padding-bottom: 30px;
    transition: 1s;
}

.foot2:hover {
    color: red;
    text-decoration: none;
    
}

.myp-gbs {
    font-weight: bold;
    font-size: 18px;
    color: rgba(0, 217, 255, 0.568);
}

.span-tel {
    font-size: 20px;
    font-weight: bold;
    color: #00b8d8;
    transition: all 1s;
}


.span-email {
    font-size: 20px;
    font-weight: bold;
    color: #00b8d8;
    transition: all 1s;
}


.span-tel:hover {
    font-size: 20px;
    font-weight: bold;
    color: #00b8d86b;
}


.span-email:hover {
    font-size: 20px;
    font-weight: bold;
    color: #00b8d863;
}


footer {
    background: linear-gradient( black 40%  ,rgba(247, 2, 255, 0.404)) ;
    width: 100%;
    height: 150px;
    /* margin-top: 50px; */
    padding-top: 70px;
    position: relative;
}

.myp-footer {
    color: mediumvioletred;
    /* font-weight: bold; */
    padding-top: 15px;
}


.footer2 {
    color: wheat;
    transition: 1s;
    font-size: 20px;
}

.footer2:hover {
    color: rgba(230, 139, 196, 0.651);
    text-decoration: none;
    
}


.icon {
    margin-left: 20px;
    position: absolute;
    bottom: 0px;
    right: -60px;
    
}

@media(max-width:720px){

    .icon {
        margin-left: 20px;
        position: absolute;
        top: 50px;
        right: 30px;
        
    }


    footer {
        background: linear-gradient( black 40%  ,rgba(247, 2, 255, 0.404)) ;
        width: 100%;
        height: 250px;
        /* margin-top: 50px; */
        padding-top: 70px;
        position: relative;
    }
}


@keyframes face {

    0%{
        transform: rotatey(180deg);
    }

    50% {
        transform: rotatey(360deg);
    }
    100% {
        transform: rotatey(180deg);
    }
}


@keyframes insta {

    0%{
        transform: rotatey(180deg);
    }

    50% {
        transform: rotatey(360deg);
    }
    100% {
        transform: rotatey(180deg);
    }
}


@keyframes twitter {

    0%{
        transform: rotatey(180deg);
    }

    50% {
        transform: rotatey(900deg);
    }
    100% {
        transform: rotatey(180deg);
    }
}


@keyframes youtube {

    0%{
        transform: rotatey(180deg);
    }

    50% {
        transform: rotatey(360deg);
    }
    100% {
        transform: rotatey(180deg);
    }
}


@keyframes github {

    0%{
        transform: rotatey(180deg);
    }

    50% {
        transform: rotatey(360deg);
    }
    100% {
        transform: rotatey(180deg);
    }
}


.icon-icon1 , .icon-icon2 , .icon-icon3 , .icon-icon4 , .icon-icon5  {
    font-size: 25px;
    

}






.icon-icon1 {
    /* transform: rotatey(180deg); */
    animation-name: face;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.icon-icon2 {
    /* transform: rotatey(180deg); */
    animation-name: insta;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.icon-icon3 {
    /* transform: rotatey(180deg); */
    animation-name: twitter;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.icon-icon4 {
    /* transform: rotatey(180deg); */
    animation-name: youtube;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.icon-icon5 {
    /* transform: rotatey(180deg); */
    animation-name: github;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.icon-icon1:hover {
    transition: 1s;
    animation: none;
}

.icon-icon2:hover {
    transition: 1s;
    animation: none;
}

.icon-icon3:hover {
    transition: 1s;
    animation: none;
}

.icon-icon4:hover {
    transition: 1s;
    animation: none;
}

.icon-icon5:hover {
    transition: 1s;
    animation: none;
}

/* end footer */


.logo-up {
    color: rgb(62, 200, 255);
    animation: none;
    position: absolute;
    bottom: 5px;
    right: -60px;
    
    position: fixed;
}

.logo-up:hover {
    transform: none;
  
}

.logo-up.show{
    right: 5px;
}