@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root{
    --orange: #ff8000;
    --lightpink: #f5f3f1;
    --lightblue: #d9dec1;
    --deepgrey: #e3e2e1;
}

*{
    padding: 0;
    margin: 0;
    font-family: "Gothic A1", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.bg-orange{
    background-color: var(--orange)!important;
}

.text-orange{
    color: var(--orange)!important;
}

.bg-lightpink{
    background-color: var(--lightpink)!important;
}

.text-lightpink{
    color: var(--lightpink)!important;
}

.bg-lightblue{
    background-color: var(--lightblue)!important;
}

.text-lightblue{
    color: var(--lightpink)!important;
}

.bg-deepgrey{
    background-color: var(--deepgrey)!important;
}

.text-deepgrey{
    color: var(--deepgrey)!important;
}

.logo-size{
    max-height: 35px!important;
}

.logo-size-footer{
    max-height: 50px!important;
}

/* HEIGHT & WIDTH */
.w-30p{
    width: 30px!important;
}

.h-30{
    height: 30px!important;
}

.w-40p{
    width: 40px!important;
}

.h-40{
    height: 40px!important;
}

.w-50p{
    width: 50px!important;
}

.h-50p{
    height: 50px!important;
}

.w-70p{
    width: 70px!important;
}

.h-70p{
    height: 70px!important;
}

.h-670{
    height: 670px!important;
}

.h-670-clip-path{
    clip-path: polygon(0% 0%, 60% 0%, 50% 100%, 0% 100%);
}

.h-670-clip-path-opposite{
    clip-path: polygon(60% 0%, 100% 0%, 100% 100%, 50% 100%);
}

.clip-path-2{
    clip-path: polygon(0% 0%, 100% 0%, 100% 45%, 0% 100%);
}

/* Mobile */
@media (min-width: 320px) and (max-width: 480px) {
    .clip-path-2{
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%)!important;
    }
}
/* Mobile end */

.clip-path-3{
    clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 70%);
}

.h-200{
    height: 200px!important;
}

.h-300{
    height: 300px!important;
}

.h-350{
    height: 350px!important;
}

.h-400{
    height: 400px!important;
}

.h-f400{
    height: 400px!important;
}

.h-c400{
    height: 400px!important;
}

.h-500{
    height: 500px!important;
}

.h-600f{
    height: 600px!important;
}

.h-600{
    height: 600px!important;
}

.w-600p{
    width: 600px!important;
}

.w-550p{
    width: 550px!important;
}

.w-500p{
    width: 500px!important;
}

.w-400p{
    width: 400px!important;
}

.w-300p{
    width: 300px!important;
}

.w-200p{
    width: 200px!important;
}

.w-150p{
    width: 150px!important;
}

/* Mobile */
@media (min-width: 320px) and (max-width: 480px) {
    .w-600p{
        width: 100%!important;
    }
    .w-550p{
        width: 100%!important;
    }
    
    .w-500p{
        width: 90%!important;
    }
    
    .w-400p{
        width: 100%!important;
    }

    .h-f400{
        height: 200px!important;
    }
    
    .h-500{
        height: 300px!important;
    }
    .h-600f{
        height: 300px!important;
    }
    .h-600{
        height: 100%!important;
    }
}
/* Mobile end */

/* Tablette */
@media (min-width: 481px) and (max-width: 768px) {
    .w-600p{
        width: 200px!important;
    }
    .h-600f{
        height: 300px!important;
    }
    .clip-path-2{
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%)!important;
    }
}
/* Tablette end */
/* HEIGHT & WIDTH END */

/* Z-INDEX */
.z-index-999{
    z-index: 999!important;
}

.z-index-9999{
    z-index: 9999!important;
}
/* Z-INDEX END */

/* FONT SIZE */
.text-10{
    font-size: 10px!important;
}
.text-15{
    font-size: 15px!important;
}
.text-40{
    font-size: 40px!important;
}
.text-50{
    font-size: 50px!important;
}
.text-60{
    font-size: 60px!important;
}
.text-75{
    font-size: 75px!important;
}
/* Mobile */
@media (min-width: 320px) and (max-width: 480px) {
    .text-40{
        font-size: 25px!important;
    }
    .text-50{
        font-size: 30px!important;
    }
    .text-75{
        font-size: 35px!important;
    }
}
/* Mobile end */

/* Tablette */
@media (min-width: 481px) and (max-width: 768px) {
    
}
/* Tablette end */
/* FONT SIZE ED */

/* OVERFLOW */
.overflow-hidden{
    overflow: hidden!important;
}
/* OVERFLOW END */

/* PADDING & MARGIN */
.padding-100{
    padding: 0px 100px!important;
}
.margin-x80{
    margin: 0 80px!important;
}
.margin-x30{
    margin: 0 30px!important;
}
.margin-t4{
    margin-top: 40px;
}
/* Mobile */
@media (min-width: 320px) and (max-width: 480px) {
    .padding-100{
        padding: 0px 10px!important;
    }
    .margin-x80{
        margin: 0 5px!important;
    }
    .margin-x30{
        margin: 0 10px!important;
    }
    .margin-t4{
        margin-top: 15px;
    }
}
/* Mobile end */

/* Tablette */
@media (min-width: 481px) and (max-width: 768px) {
    
}
/* Tablette end */
/* PADDING & MARGIN END */

/* IMAGE SIZE */
.img-s600{
    max-height: 600px!important;
}
/* Mobile */
@media (min-width: 320px) and (max-width: 480px) {
    .img-s600{
        max-height: 200px!important;
    }
}
/* Mobile end */
.img-w80{
    max-width: 80px!important;
}
.img-h80{
    max-height: 80px!important;
}

.img-w100{
    max-width: 100px!important;
}

.img-h100{
    max-height: 100px!important;
}

.img-h200{
    height: 200px!important;
}

.img-w300{
    width: 300px!important;
}

.img-h300{
    height: 300px!important;
}
/* Mobile */
@media (min-width: 320px) and (max-width: 480px) {
    .img-w300{
        width: 100%!important;
    }
}
/* Mobile end */

.object-fit-contain{
    object-fit: contain!important;
    object-position: center center!important;
}
.object-fit-cover{
    object-fit: cover!important;
    object-position: center center!important;
}
/* IMAGE SIZE END */

/* Background */
.bg-hand{
    background-image: url('../images/hand-phone.png');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
}

.bg-1{
    background-image: url('../images/Background/bg-1.png');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Background END */

/* TEXT LIMITER */
.text-limiter {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
}
/* TEXT LIMITER END */

@keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      display: none;
    }
}
  
.fade-out-div {
    animation: fadeOut 7s forwards;
    -webkit-animation: fadeOut 7s forwards;
}