/****************************************************************** Bootstrap 5.1 Required Classes ****************************************/
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 100%;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px){
.float-md-start {
    float: left!important;
}
}
.p-2 {
    padding: 0.5rem!important;
}
@media (min-width: 576px){
.col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}
}
.p-5 {
    padding: 3rem!important;
}
.mb-2 {
    margin-bottom: 0.5rem!important;
}
@media (min-width: 576px){
.col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
}
}
img, svg {
    vertical-align: middle;
}
.d-flex {
    display: flex!important;
}
*, ::after, ::before {
    box-sizing: border-box;
}
div {
    display: block;
}
body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px){
.d-md-flex {
    display: flex!important;
}
}
.pb-4 {
    padding-bottom: 1.5rem!important;
}
.pt-2 {
    padding-top: 0.5rem!important;
}
.px-2 {
    padding-right: 0.5rem!important;
    padding-left: 0.5rem!important;
}

@media (min-width: 576px){
.col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
}
}

.py-4 {
    padding-top: 1.5rem!important;
    padding-bottom: 1.5rem!important;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}
.p-0 {
    padding: 0!important;
}
.pt-5 {
    padding-top: 3rem!important;
}
.py-2 {
    padding-top: 0.5rem!important;
    padding-bottom: 0.5rem!important;
}

@media (min-width: 576px){
.col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}
}
.col-sm-4 {
    padding-left: 0;
    padding-right: 0;
}
.text-white {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important;
}
.mb-3 {
    margin-bottom: 1rem!important;
}
.mt-2 {
    margin-top: 0.5rem!important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}
@media (min-width: 1200px){
.h2, h2 {
    font-size: 1.6rem!important;
}
}
.text-white{
    color: #ffffff!important;
}
img{
    padding: 2px;
}
.col {
    flex: 1 0 0%;
}
.py-5 {
    padding-top: 3rem!important;
    padding-bottom: 3rem!important;
}
.pt-4 {
    padding-top: 1.5rem!important;
}
.mx-auto {
    margin-right: auto!important;
    margin-left: auto!important;
}
.d-block{
    display: block;
}
.p-3 {
    padding: 1rem!important;
}
.overflow-auto{
    overflow: auto!important;
}
.h-100{
    height: 100vh!important;
}
.justify-content-center{
    justify-content: center;;
}

















.c1_block1{
    background: linear-gradient(45deg, #4109BE, #7F2AD5);
    position: relative;
}
.jmr{
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.c1_b1_img1{
    position: absolute;
    bottom: 20px;
    right: 20px;
    animation: rotation 60s infinite;
}
.c1_b1_img1_1{
    position: absolute;
    bottom: 81px;
    right: 79px;
}
@keyframes rotation {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(359deg);
    }
}
.sus_text{
    padding-bottom: 19rem;
}
.c1_block2{
    background: #33D3D3;
    border-right: #fff 4px solid;
}
.c1_block3{
    background: #3A9317;
    border-left: #fff 4px solid
}
.c2_block1{
    background: linear-gradient( #FDAC29, #FFD800);
}
.c2_block2{
    background: linear-gradient(45deg, #FF2E84, #F469A2);
    transition: all ease-in-out 1s;
}
.c2_block2:hover{
    transform: scale(0.9);
    z-index: 1;
}



.c3_block1{
    background: #44AF70;
}
.c3_block2{
    background: linear-gradient( #5858ED, #1BCFDE);
    position: relative;
}
.c3_b2_9text{
    position: absolute;
    bottom: 150px;
    right: 38px;
}
.btn-primary{
    color: #4faf70!important;
    background-color: #ffffff;
    border-radius: 50px;
    font-weight: 700;
    border: none;
    padding: 0.6rem 2.5rem;
    filter: drop-shadow(0px 6px 8px #00080040);
    transition: all ease-in-out 0.8s;
}
.btn-primary:hover {
    color: #4faf70;
    transform: translateY(-10px);
}
.blink{
    animation: blink 3s infinite linear;
}
@keyframes blink{
    0%{
        background: #fff;
    }
    25%{
        background: #f5f7a5;
    }
    50%{
        background: #f5f7a5;
    }
    100%{
        background: #fff;
    }
}
@-webkit-keyframes blink{
    0%{
        -webkit-background: #fff;
    }
    25%{
        -webkit-background: #f5f7a5;
    }
    50%{
        -webkit-background: #f5f7a5;
    }
    100%{
        -webkit-background: #fff;
    }
}
.flip{    
    transition: ease-in-out all 0.8s;
}
.flip:hover{    
    transform: scale(0.9);
}

.flip1{    
    animation: flip 20s 1s infinite;
    -webkit-animation: flip 20s 1s infinite;
    cursor: pointer;
    transition: all ease-in-out 0.7s;
}

.flip2{    
    animation: flip 20s 12s infinite;
    -webkit-animation: flip 20s 12s infinite;
    cursor: pointer;
    transition: all ease-in-out 0.7s;
}
.flip3{    
    animation: flip 20s 28s infinite;
    -webkit-animation: flip 20s 28s infinite;
    cursor: pointer;
    transition: all ease-in-out 0.7s;
}
@keyframes flip{
    0%{
        transform: rotateY(0deg);
    }
    20%{
        transform: rotateY(180deg);
    }
    40%{
        transform: rotateY(0deg);
    }
    60%{
        transform: rotateY(0deg);
    }
    80%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}
@-webkit-keyframes flip{
    0%{
        -webkit-transform: rotateY(0deg);
    }
    20%{
        -webkit-transform: rotateY(180deg);
    }
    40%{
        -webkit-transform: rotateY(0deg);
    }
    60%{
        -webkit-transform: rotateY(0deg);
    }
    80%{
        -webkit-transform: rotateY(0deg);
    }
    100%{
        -webkit-transform: rotateY(0deg);
    }
}
.flipp1{    
    animation: flipp 30s 1s infinite;
    cursor: pointer;
    transition: all ease-in-out 0.7s;
}
.flipp1{    
    -webkit-animation: flipp 30s 1s infinite;
    cursor: pointer;
    -webkit-transition: all ease-in-out 0.7s;
}
.flipp2{    
    animation: flipp 35s 12s infinite;
    cursor: pointer;
    transition: all ease-in-out 0.7s;
}
.flipp2{    
    -webkit-animation: flipp 35s 12s infinite;
    cursor: pointer;
    -webkit-transition: all ease-in-out 0.7s;
}
@keyframes flipp{
    0%{
        transform: rotateY(0deg);
    }
    20%{
        transform: rotateY(180deg);
    }
    40%{
        transform: rotateY(0deg);
    }
    60%{
        transform: rotateY(0deg);
    }
    80%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}
@-webkit-keyframes flipp{
    0%{
        -webkit-transform: rotateY(0deg);
    }
    20%{
        -webkit-transform: rotateY(180deg);
    }
    40%{
        -webkit-transform: rotateY(0deg);
    }
    60%{
        -webkit-transform: rotateY(0deg);
    }
    80%{
        -webkit-transform: rotateY(0deg);
    }
    100%{
        -webkit-transform: rotateY(0deg);
    }
}

.photo_grid{
    padding: 0.9rem 2rem;
    background: #4109BE;
    margin: 5px 5px;
    display: flex;
    justify-content: center;
}
.photo_grid{
    -webkit-padding: 0.9rem 2rem;
    -webkit-background: #4109BE;
    -webkit-margin: 5px 5px;
    -webkit-display: flex;
    -webkit-justify-content: center;
}


.lavender{
    background: #7656F0;
}
.cyan{
    background:#2971B0;
}
.p_green{
    background: #6AE4B7;
}
.d_sandal{
    background: #F4B546;
}
.brown{
    background: #673214;
}
.green{
    background: #06650A;
}
.purple{
    background: #5B1E5E;
}
.orange{
    background: #ED5029;
}
.blue{
    background: #42ABDF;
}
.bg_none{
    background: none!important;
}
.icon {
    position: relative;
    float: left;
    left: 12px;
    top: -25px;
    color: #206599;
}
.container input {
  padding-left: 38px;
}
::placeholder{
    font-size: 14px;
}
.form-control:focus {
    border-bottom: 2px solid #206599;
    outline: 0;;
    box-shadow: none!important;
}
.form-control {
    border: none;
    border-bottom: 1px solid #ced4da;
    border-radius: 0rem;
}
.btn-login{
    background: #206599;
    color: #fff!important;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.btn-login:hover{
    background: #0a3150!important;
}


@media screen and (max-width: 575px) {
.flip{
    animation: none;
}  
.flip1{    
    animation: none;
}
.flip2{    
    animation: none;
}
.flip3{    
    animation: none;
}

.flipp1{    
    animation: none;
}
.flipp2{    
    animation: none;
}
    .c1_b1_img1{
    position: absolute;
    bottom: 117px;
    right: 17px;
    animation: rotation 60s infinite;
    transform: scale(0.4);
}
.c1_b1_img1_1{
    bottom: 183px;
    right: 80px;
    transform: scale(0.9);
}
.c3_b2_9text {
    position: absolute;
    bottom: 79px;
    right: 38px;
    transform: scale(0.8);
}
.c3_block2 .colx2{
    padding-bottom: 1rem;
}
.c3_block2 .colx2 img{
    transform: scale(0.8);
}


}

@media (max-width: 320px) {
  .photo_grid {
    animation: none !important;
  }
}