@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
 /*   font-family: "Plus Jakarta Sans", sans-serif;   */
 /*   font-family: "DM Sans", sans-serif;   */
 
 
 
:root{
    --white:#fff;
    --dark-blue: #010616;
    --light-blue:#1d54b9;
    --light-black:#20202e;
    --bg-grey:#e5e5e5;
}

/*            var(--light-blue)           */
/*           var(--white)                */
/*          var(--dark-blue)            */
/*         var(--light-black);         */
/*        var(--bg-grey);         */

/*temporary hide*/
.flipbook-container {
    display: none;
}
/*temporary hide end*/

main.portfolio-content {
    background-color: var(--white);
}
.vision_technique_section {
    padding-top: 200px;
    background: linear-gradient(to bottom, #010616 81%, #ffffff 19%);
}
.website_conatiner {
    max-width: 1220px;
    margin: auto;
    padding: 0 20px;
}
.vision_technique_text_only h2 {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--light-blue);
    font-family: "DM Sans", sans-serif;
}
.vision_technique_text_only {
    padding-right: 9%;
    border-right: 2px solid var(--white);
    padding-bottom: 40px;
    width: 100%;
    max-width: 66.66%;
}
.vision_technique_text_only h1 {
    margin: 0;
    font-size: 55px;
    font-weight: 900;
    text-transform: none;
}
.vision_technique_section_inner {
    display: flex;
    margin-bottom: 48px;
    padding-bottom: 96px;
}
.banner_img_section .portfolio-image img {
    width: 100%;
}
.vision_technique_right_list {
    padding-left: 5%;
    padding-right: 12px;
    width: 100%;
    max-width: 33%;
}
.vision_technique_right_list ul.heading-menu {
    padding: 0;
    list-style: none;
}
.vision_technique_right_list ul.heading-menu:first-child {
    padding-bottom: 16px;
    margin-bottom: 24px;
}
.vision_technique_right_list ul.heading-menu li {
    font-size: 16px;
    color: var(--white);
    font-weight: 400;
    margin-bottom: 4px;
}
.vision_technique_right_list ul.heading-menu li:first-child {
    color: var(--light-blue);
}
.banner_img_section img {
    border: solid 1px rgba(9,12,18,.1);
}


/*content wrapper section*/
.content_wrapper_section {
    margin: 4rem 0;
}
.content_wrapper_section .content_wrapper_section_inner {
    padding: 4rem 0;
    max-width: 640px;
    margin: auto;
}
.content_wrapper_section_inner h2 {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--light-blue);
}
.content_wrapper_section_inner h3 {
    margin: 0 0 24px;
    font-size: 34px;
    color: var(--light-black);
    font-weight: 400;
    line-height: 1.3;
}
.content_wrapper_section_inner .second-content {
    font-size: 16px;
    color: var(--light-black);
    margin: 0 0 16px;
    font-weight: 500;
}
.content_wrapper_section_inner h3 a {
    color: var(--dark-blue);
    font-weight: 500;
}
.content_wrapper_section_inner h3 a:hover {
    color: var(--dark-blue);
}

/*multi image section*/
.website_conatiner.slider_website_conatiner {
    padding-bottom: 4rem;
    overflow: hidden;
}
.multi_images_section_inner {
    max-width: 1620px;
    margin: auto;
    background-color: var(--bg-grey);
    padding: 4rem 20px;
}

.multi_images_section_direct .multiple_images,
.multi_images_section_direct .fourth_multiple_images,
.multi_images_section_direct .fifth_multiple_images{
    display: flex;
    gap: 24px;
}
.multi_images_section_direct .multiple_images {
    gap: 0;
}

.multiple_images_slider{
     width: 100%;
    /*max-width: calc(25% - 18px);*/
    border: 1px solid #dddddd;
    border-radius: 18px;
    object-fit: cover;
}
.multi_images_section_direct .multiple_images img {
    width: 100%;
    display: block;
}
.multi_images_section__dual {
    max-width: 1620px;
    padding: 0 20px;
    margin: 4rem auto;
}
.multi_images_section_dual_direct .third_multiple_images {
    display: flex;
    gap: 24px;
    align-items: center;
}
.multi_images_section_dual_direct .third_multiple_images img {
    width: 100%;
    max-width: calc(50% - 12px);
    border: 1px solid #dddddd;
    border-radius: 18px;
}
.multi_images_section_dual_direct .third_multiple_images img:first-child {
    height: 80%;
    object-fit: cover;
}

/* fourth_multiple_images */

.multi_images_section_direct .fourth_multiple_images img {
    width: 100%;
    max-width: calc(25% - 16px);
    border: 1px solid #dddddd;
    height: 90%;
    border-radius: 18px;
}
.multi_images_section_direct .fourth_multiple_images img:last-child {
    max-width: calc(50% - 16px);
}
.multi_images_section_direct .fourth_multiple_images {
    align-items: center;
}

/*  gemma_lomax_section  */
.gemma_lomax_section {
    padding: 3rem 0;
}
.gemma_lomax_section_inner {
    max-width: 900px;
    margin: 4rem auto;
    padding: 0 12px;
}
.gemma_lomax_section_content {
    padding-left: 60px;
    padding-bottom: 40px;
    border-left: 2px solid var(--light-blue);
}
.gemma_lomax_section_content h3 {
    margin: 0 0 16px;
    font-size: 34px;
    color: var(--light-black);
    font-weight: 500;
    line-height: 1.3;
}
.gemma_lomax_section_content h2 {
    font-size: 16px;
    font-weight: 900;
    margin: 0;
    color: var(--light-black);
}
.gemma_lomax_section_content .second-content {
    font-size: 16px;
    color: var(--light-black);
    font-weight: 500;
}

/* fifth_multiple_images */

.multi_images_section_direct .fifth_multiple_images img {
    width: 100%;
    max-width: calc(30% - 12px);
    border-radius: 18px;
}

/* more_projects_top section */
.more_projects_top {
    max-width: 85%;
    margin: auto;
    padding-left: 1.5rem;
    padding-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.more_projects_top h3 {
    margin: 0;
    color: var(--light-black);
    font-weight: 500;
    line-height: 1.3;
    font-size: 34px;
}
.more_projects_top a.btn {
    border: 1px solid var(--light-blue);
    border-radius: 6px;
    padding: 12px 28px;
    color: var(--light-blue);
    line-height: normal;
    display: flex;
    align-items: center;
    font-size: 15px;
    justify-content: space-between;
    height: auto;
    min-height: unset;
    font-weight: 500;
    position: relative;
    gap: 15px;
    transition: all 0.3s;
}

.more_projects_top a.btn::after {
    content: "";
    background-image: url(https://realfuncompany.co.uk/wp-content/uploads/2025/05/arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    height: 20px;
    filter: brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(3101%) hue-rotate(218deg) brightness(91%) contrast(78%);
}
.more_projects_top a.btn:hover {
    background-color: var(--light-blue);
    color: var(--white);
}

.more_projects_top a.btn:hover::after {
    filter: brightness(0) saturate(100%) invert(100%) sepia(96%) saturate(0%) hue-rotate(80deg) brightness(105%) contrast(104%);
}
.more_projects_media {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.more_projects_media a {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.more_projects_media a h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 40px 40px 60px 70px;
    max-width: 300px;
    font-size: 25px;
    font-weight: 700;
    margin: 0;
    display: flex;
    gap: 16px;
    flex-direction: column;
}
.more_projects_media a h3::after {
    content: "";
    width: 40px;
    height: 20px;
    display: inline-block;
    background-image: url(https://realfuncompany.co.uk/wp-content/uploads/2025/05/arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.3s;
}
.more_projects_media a:hover h3::after{
   transform: translateX(15px);
}
.more_projects_media a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.more_projects_media .portfolio-item {
    width: 100%;
    max-width: calc(50% - 12px );
}
.more_projects_media a::before {
    content: "";
    background: linear-gradient(90deg, rgba(15, 18, 27, 0.4) 100%, rgba(53, 92, 176, 0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.more_projects_parent {
    padding-bottom: 5rem;
}

.flipbook-container .df-container .df-bg {
    background-color: rgb(229 229 229) !important;
}
.multi_images_section_direct.swiper-container {
    position: relative;
}

.multi_images_section_direct.swiper-container .swiper_pagination_parent {
    position: absolute;
    display: flex;
    justify-content: end;
    width: 100%;
    bottom: -30px;
}
.multi_images_section_direct.swiper-container .swiper_pagination_parent .swiper_btn {
    right: 0 !important;
    left: unset;
}
.multi_images_section_direct.swiper-container .swiper_pagination_parent .swiper_btn.swiper-button-prev {
    right: 35px !important;
}
.multi_images_section_direct.swiper-container .swiper_pagination_parent .swiper_btn::after {
    font-size: 20px;
    color: var(--dark-blue ) !important;
}
.multi_images_section_direct.swiper-container .swiper_pagination_parent .swiper-pagination {
    display: none;
}
.flipbook-container {
    max-width: 1620px;
    margin: 0 auto;
    padding-bottom: 80px;
}
.fifth_multi_images_section {
    margin-top: 4rem;
    padding-top: 4rem;
}
.multi_images_section_direct .fifth_multiple_images {
    justify-content: space-around;
}


/* responsive start from here */
@media(max-width:768px){
    
.vision_technique_section_inner {
    margin-bottom: 30px;
    padding-bottom: 30px;
    flex-direction: column;
    gap: 40px;
}
.vision_technique_text_only {
    max-width: 100%;
    padding-block: 0;
}
.vision_technique_right_list {
    max-width: 100%;
    display: flex;
    gap: 20px;
    padding: 0px;
}
.vision_technique_text_only h1 {
    font-size: 34px;
}
.content_wrapper_section {
    margin: 3rem 0;
}
.content_wrapper_section .content_wrapper_section_inner {
    padding: 0;
}
.content_wrapper_section_inner h2 {
    font-size: 12px;
}
.content_wrapper_section_inner h3 {
    font-size: 22px;
}
.content_wrapper_section_inner .second-content {
    font-size: 14px;
}
.multi_images_section_dual_direct .third_multiple_images,
.multi_images_section_direct .fourth_multiple_images,
.multi_images_section_direct .fifth_multiple_images,
.more_projects_media{
    flex-wrap: wrap;
}
.multi_images_section_dual_direct .third_multiple_images img,
.multi_images_section_direct .fourth_multiple_images img:last-child,
.multi_images_section_direct .fifth_multiple_images img{
    max-width: 100%;
}
.multi_images_section_direct .fourth_multiple_images img {
    max-width: calc(50% - 16px);
}
.gemma_lomax_section_content h3 {
    font-size: 22px;
}
.gemma_lomax_section {
    padding: 0;
}
.gemma_lomax_section_content {
    padding-left: 30px;
    padding-bottom: 0;
}
.gemma_lomax_section_content h2,
.gemma_lomax_section_content .second-content{
    font-size: 12px;
}
.more_projects_media .portfolio-item {
    max-width: 100%;
}
.more_projects_media a {
    background: #fff;
}
.more_projects_media a::before {
    visibility: hidden;
}
.more_projects_media a img {
    max-height: 300px;
    min-height: 300px;
}
.more_projects_media a h3 {
    max-width: 100%;
    font-size: 25px;
    flex-direction: column;
    position: static;
    color: var(--dark-blue);
    padding: 30px;
}
.more_projects_media a h3::after {
    filter: brightness(0) saturate(100%) invert(1%) sepia(80%) saturate(4803%) hue-rotate(210deg) brightness(108%) contrast(99%);
}
.more_projects_top {
    max-width: 100%;
    margin: auto;
    padding-left: 0;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.more_projects_top h3 {
    font-size: 22px;
}
.more_projects_top a.btn {
    padding: 10px 15px;
}
.more_projects_top a.btn::after {
    width: 30px;
    height: 15px;
}
.gemma_lomax_section_inner {
    padding: 0px;
}
.multi_images_section_direct .multiple_images {
    gap: 0;
}
.slider_multi_images_section .multi_images_section_inner {
    padding-bottom: 1.5rem;
}
.vision_technique_section {
    padding-top: 100px;
}
.fifth_multi_images_section {
    margin-top: 0;
}
.multiple_images_slider.swiper-slide {
    padding: 0 8px;
    border: unset;
}
.multi_images_section_direct .multiple_images img {
    width: 100%;
    border: 1px solid #dddddd;
}
.fifth_multi_images_section {
    padding: 0;
}
.fifth_multi_images_section .multi_images_section_inner {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}
.multi_images_section .multi_images_section_inner {
    padding-left: 0;
    padding-right: 0;
}
button.jkit-hamburger-menu {
    background: transparent;
}
}


/*.vision_technique_section_inner,*/
/*.banner_img_section,*/
/*.content_wrapper_section,*/
/*.multi_images_section,*/
/*.fifth_multi_images_section,*/
/*.gemma_lomax_section,*/
/*.flipbook-container,*/
/*.more_projects_parent {*/
/*  opacity: 0;*/
/*  transform: translatey(-50px);*/
/*  transition: all 0.6s ease;*/
/*}*/

/*.vision_technique_section_inner.visible,*/
/*.banner_img_section.visible,*/
/*.content_wrapper_section.visible,*/
/*.multi_images_section.visible,*/
/*.fifth_multi_images_section.visible,*/
/*.gemma_lomax_section.visible,*/
/*.flipbook-container.visible,*/
/*.more_projects_parent.visible{*/
/*    opacity: 1;*/
/*    transform: translatey(0px);*/
/*}*/