@extends('layouts.web')
@section('title', config('app.name', 'Laravel') . ' - Home')
@section('content')
<style>
    
    .dynamic-background1{
		background-image: url({{ asset($slideshowMore->image) }});
        background-size: cover !important;
    background-position: center;
	}
	.dynamic-background2{
background: url('{{ asset($ourValuesMore->image) }}') no-repeat center center;
      background-size: cover !important;
	}
	.dynamic-background3{
		background: url('{{ asset($ourFocusMore[0]->image) }}') no-repeat center center;
      background-size: cover !important;
	}
	.dynamic-background4{
		background:url('{{ asset($ourFocusMore[2]->image) }}') no-repeat center center;
        background-size: cover !important;
	}
	.dynamic-background5{
		background: url('{{ asset($ourFocusMore[1]->image) }}'),#F7F4EA no-repeat center center; background-repeat: no-repeat;
        background-position-x: right;
    background-position-y: top;
    background-size: cover !important;
	}
	@media (max-width: 700px) {
		.dynamic-background1{
			background-image: url({{ asset($slideshowMore->image_mobile) }})
		}
		.dynamic-background2{
	background: url('{{ asset($ourValuesMore->image_mobile) }}') no-repeat center center;
		}
		.dynamic-background3{
			background: url('{{ asset($ourFocusMore[0]->image_mobile) }}')no-repeat center center;
		}
		.dynamic-background4{
			background: url('{{ asset($ourFocusMore[2]->image_mobile) }}') no-repeat center center;
		}
		.dynamic-background5{
			background: url('{{ asset($ourFocusMore[1]->image_mobile) }}'),#F7F4EA no-repeat center center; background-repeat: no-repeat;
            background-position-x: right;
		}
	}
    /* .image-container {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
    img {
            
            height: auto;
            transition: width 0.5s ease-out;
    } */
   
</style>

    <section class="section-slide web-view"data-bs-toggle="modal" data-bs-target="#modal1" style="cursor:pointer">
        <div id="point1" class="point"></div>
        <div class="wrap-slick1 rs2-slick1">
            <div class="slick1">
                <div class="item-slick1 bg-overlay1 tarnsform-x" style="background-image: url({{ asset($slideshow->image) }});"
                    data-thumb="images/thumb-01.jpg" data-caption="Women’s Wear">
                    <div class="h-full">
                        <div class="flex-col-l-m h-full respon5">
                            <div class="slider-background web-view">
                                <div class="container section-1-new tarnsform-x">
                                    <div class="layer-slick1  visible-false w-50per" data-appear="rotateInDownLeft"
                                        data-delay="0">
                                        <span class="ltext-104 txt-start cl0 respon2">
                                            {!! nl2br($slideshow->title) !!}
                                        </span>
                                    </div>

                                    <div class="layer-slick1  visible-false w-50per" data-appear="rotateInUpRight"
                                        data-delay="0">
                                        <h2 class="ltext-202 txt-start cl0 p-t-22 respon1">
                                            {!! nl2br($slideshow->description) !!}
                                        </h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-slide mobile-view"data-bs-toggle="modal" data-bs-target="#modal1" style="cursor:pointer">
        <div id="mobilePoint1" class="point"></div>
        <div class="wrap-slick1 rs2-slick1">
            <div class="slick1">
                <div class="item-slick1 bg-overlay1  tarnsform-x" style="background-image: url({{ asset($slideshow->image_mobile) }});"
                    data-thumb="images/thumb-01.jpg" data-caption="Women’s Wear">
                    <div class="h-full">
                        <div class="flex-col-l-m h-full p-t-100 p-b-60 respon5">
                            <div class="slider-background">
                                <div class="container   tarnsform-x">
                                    <div class="layer-slick1  visible-false w-50per" data-appear="rotateInDownLeft"
                                        data-delay="0">
                                        <span class="ltext-104 txt-start cl0 respon2">
                                            {!! nl2br($slideshow->title) !!}
                                        </span>
                                    </div>

                                    <div class="layer-slick1  visible-false w-50per" data-appear="rotateInUpRight"
                                        data-delay="0">
                                        <h2 class="ltext-202 txt-start cl0 p-t-22 p-b-40 respon1">
                                            {!! nl2br($slideshow->description) !!}
                                        </h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div id="point2" class="point"></div>
    <div id="mobilePoint2" class="point"></div>
    <section class="section-1">
        <div class="container h-100section2">
            <div class="row">
                <div class="col-md-12 orders-1">
                    <h3 class="about-title">{!! nl2br($titles[0]->title) !!}</h3>
                </div>
                <div class="col-md-6 orders-2 view-flex-about">
                    <div id="point3" class="point" style="margin-top:-2vh;position:absolute"></div>
                    <p class="main-p main-margin main-margin-view2 line-about">{!! nl2br($aboutus[0]->title) !!}</p>
                </div>
                {{-- <div class="col-md-6 orders-3 margin-mobile">
                    <div id="mobilePoint3" class="point"></div>
                    <div class=" image-container">
                        <img class="about-img" id="animatedImage" src="{{ asset($aboutus[0]->image) }}" alt="">
                    </div>
                    
                    <div class="triangle1"></div>
                </div>
                <div class="col-md-6 orders-2 margin-mobile">
                    <img class="about-image2" src="{{ asset($aboutus[1]->image) }}" alt="">
                </div> --}}
                <div class="col-md-6 view-flex-about orders-3">
                    <p class="small-p">{!! nl2br($aboutus[0]->description) !!}</p>
                    <p class="small-pne  ">{!! nl2br($aboutus[1]->description) !!}</p>
                </div>
                <div class="col-md-12 orders-4">
                    <button type="button" class="btn-1 btn-about-new" data-bs-toggle="modal" data-bs-target="#modal2"
                        name="button">{{ __('messages.learnmore') }}</button>
                </div>
            </div>

        </div>
    </section>

    <div id="point4" class="point"></div>
    <div id="mobilePoint4" class="point"></div>
    <section class="section-2" >

        <div class="container">
            <h3 class="vlues-title">{!! nl2br($titles[2]->title) !!}</h3>
            <div class="row">
                <div class="col-md-4 orders-1 margin-mobile fade-in">
                    <h3 class="sub-title">{!! nl2br($ourvalues[0]->title) !!}</h3>
                    <p class="main-p2 color-fff">{!! nl2br($ourvalues[0]->description) !!}</p>
                </div>
                <div class="col-md-4 orders-3 margin-mobile fade-in">
                    <div id="mobilePoint5" class="point"></div>
                    <h3 class="sub-title">{!! nl2br($ourvalues[1]->title) !!}</h3>
                    <p class="main-p2 color-fff">{!! nl2br($ourvalues[1]->description) !!}</p>
                </div>
                <div class="col-md-4 orders-5 margin-mobile fade-in">
                    <div id="mobilePoint6" class="point"></div>
                    <h3 class="sub-title">{!! nl2br($ourvalues[2]->title) !!}</h3>
                    <p class="main-p2 color-fff">{!! nl2br($ourvalues[2]->description) !!}</p>
                </div>
                <div class="col-md-4 orders-2 margin-mobile">
                    <img class="about-image3" src="{{ asset($ourvalues[0]->image) }}" alt="">
                    <div class="triangle2"></div>
                </div>
                <div class="col-md-4 d-flex orders-4 margin-mobile">
                    <img class="new-img3 tarnsform-x" src="{{ asset($ourvalues[1]->image) }}" alt="">
                </div>
                <div class="col-md-4 d-flex orders-5 margin-mobile">
                    <img class="new-img4 tarnsform-x" src="{{ asset($ourvalues[2]->image) }}" alt="">
                </div>
            </div>
        </div>
    </section>
    <div id="point5" class="point"></div>
    <div id="mobilePoint7" class="point"></div>
    <section class="section-3" style="background: url('{{ asset($titles[3]->image) }}'">
        <div class="d-flex main-margin-focus mobile-dir">
            <h3 class="foucs-title"><x>{!! nl2br($titles[3]->title) !!}</h3>
            <p class="main-p foucs-view-p">{!! nl2br($titles[4]->title) !!}</p>
        </div>
        <div id="point6" class="point" style="padding-bottom:2vw;"></div>
        <div class="container focus100">
            <div class="row">
                <div class="col-md-4">
                    <div id="mobilePoint8" class="point"></div>
                    <div class=" background-padding orders-1">
                        <h3 class="sub-title2">{!! nl2br($ourfocus[0]->title) !!}</h3>
                        <p class="main-p2 main-p2-margin color-fff">{!! nl2br($ourfocus[0]->description) !!}</p>
                        <button type="button" class="btn-2" name="button" data-bs-toggle="modal"
                            data-bs-target="#modal4">{{ __('messages.seemore') }}</button>
                    </div>
                </div>
                <div class="col-md-4  orders-3">
                    <div id="mobilePoint9" class="point"></div>
                    <img class="about-image4 mmt2" src="{{ asset($ourfocus[1]->image) }}" alt="">
                </div>
                <div class="col-md-4  orders-5">
                    <div id="mobilePoint10" class="point"></div>
                    <img class="about-image4 mmt2" src="{{ asset($ourfocus[2]->image) }}" alt="">
                </div>
                <div class="col-md-4  orders-2 margin-mobile">
                    <img class="about-image4 m--img-bottom" src="{{ asset($ourfocus[0]->image) }}" alt="">
                </div>
                <div class="col-md-4  orders-4 margin-mobile">
                    <div class=" background-padding1">
                        <h3 class="sub-title2">{!! nl2br($ourfocus[1]->title) !!}</h3>
                        <p class="main-p2 main-p2-margin color-fff">{!! nl2br($ourfocus[1]->description) !!}</p>
                        <button type="button" class="btn-2" name="button" data-bs-toggle="modal"
                            data-bs-target="#modal6">{{ __('messages.seemore') }}</button>
                    </div>
                </div>
                <div class="col-md-4  orders-6 margin-mobile">
                    <div class="background-padding2">
                        <h3 class="sub-title3">{!! nl2br($ourfocus[2]->title) !!}</h3>
                        <p class="main-p2 main-p2-margin">{!! nl2br($ourfocus[2]->description) !!}</p>
                        <button type="button" class="btn-1 btn-mb" name="button" data-bs-toggle="modal"
                            data-bs-target="#modal5">{{ __('messages.seemore') }}</button>
                        {{-- <div class="triangle3"></div> --}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div id="point7" class="point"></div>
    <div id="mobilePoint11" class="point"></div>
    <section class="section-1">
        <div class="container container-mobile">

            <h3 class="about-title container-mobile" style="color:#000">{!! nl2br($titles[5]->title) !!}</h3>
            <div class="row">
                <div class="col-md-6">
                    <div id="mobilePoint12" class="point"></div>
                    <img src="{{ asset($location[0]->image) }}" class="w-100 mab-image" alt="Image 3">
                    <div class="trianglenew1"></div>
                    <div class="mab-background-padding1">
                        <div id="point8" class="point"></div>
                        <div id="mobilePoint13" class="point"></div>
                        <h3 class="mabsub-title2">{{ $location[0]->title }}</h3>
                        {{-- <p class="slide-p color-fff">{!! nl2br($location[0]->description) !!}</p> --}}
                        <p class="slide-p color-fff">{!! nl2br($location[0]->address) !!}</p>
                        <p class="slide-p2 color-fff">
                            {{-- T. {{ $location[0]->phone }}<br> --}}
                            E. {{ $location[0]->email }}</p>
                            <button onclick="window.location.href='mailto:admin.dm@radicdm.com'" type="button" class="btn-2 btn-mb" name="button">{{ __('messages.CONTACT') }}</button>
                        <iframe src="{{ $location[0]->iframe }}" class="mab-vie" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade">
                        </iframe>
                    </div>
                </div>
                <div class="col-md-6">
                    <div id="mobilePoint14" class="point"></div>
                    <img src="{{ asset($location[1]->image) }}" class="w-100 mab-image" alt="Image 3">
                    <div class="trianglenew2"></div>
                    <div class="mab-background-padding2">
                        <div id="mobilePoint15" class="point"></div>
                        <h3 class="mabsub-title2">{{ $location[1]->title }}</h3>
                        {{-- <p class="slide-p color-fff">{!! nl2br($location[1]->description) !!}</p> --}}
                        <p class="slide-p color-fff">{!! nl2br($location[1]->address) !!}</p>
                        <p class="slide-p2 color-fff">
                            {{-- T. {{ $location[1]->phone }}<br> --}}
                            E. {{ $location[1]->email }}</p>
                        <button onclick="window.location.href='mailto:admin.dm@radicdm.com'" type="button" class="btn-2 btn-mb" name="button">{{ __('messages.CONTACT') }}</button>
						<div id="point9" class="point"></div>
                        <div id="mobilePoint16" class="point"></div>
                        <iframe src="{{ $location[1]->iframe }}" class="mab-vie" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade">
                        </iframe>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="fullscreenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content custom-modal-bg dynamic-background1">
                <div class="modal-header">
                    <button type="button" class="btn-close ms-auto custom-close-btn" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="container padding-popup">
                    <p class="popup-logo-p"><img src="{{ asset('assets/site') }}/images/1.png" alt=""
                            class="popup-logo-img"> </p>
                    <div class="popup-view">
                        <p class="ltext-popup-title">
                            {!! $slideshowMore->title !!}
                        </p>
                        <h2 class="ltext-popup-subtitle">
                            {!! $slideshowMore->description !!}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="fullscreenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen modal-fullscreen-about">
            <div class="modal-content custom-modal-bg" style="background: #F7F4EA;">
                <div class="modal-header">
                    <button type="button" class="btn-close ms-auto custom-close-btn" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="container padding-popup">
                    <div class="row">
                        <div class="col-md-6 orders-2">
                            <p class="about-title about-title-popup">{!! nl2br($titles[1]->title) !!}</p>
                        </div>
                        <div class="col-md-6 orders-1">
                            <p class="popup-logo-p"><img src="{{ asset('assets/site') }}/images/26.png" alt=""
                                    class="popup-logo-img"> </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5 orders-3">
                            {{-- <img src="{{ asset('assets/site') }}/images/27.png" class="popup2-img tarnsform-x" alt=""> --}}
                            <div class="popup3-title">
                                <img src="{{ asset('assets/site') }}/images/40.png" class="popup3-img1" alt="">
                            <p>
                                {!! nl2br($ourValuesMore->title) !!}
                            </p>
                            <img src="{{ asset('assets/site') }}/images/41.png" class="popup3-img2" alt="">
                        </div>
                        </div>
                        <div class="col-md-6 orders-2">
                            <p class="firsttitle-poup-about">{!! nl2br($aboutusMore->title) !!}</p>
                            <p class="secondtitle-poup-about">{!! nl2br($aboutusMore->sub_title) !!}</p>
                            <p class="thirdtitle-poup-about">{!! nl2br($aboutusMore->description) !!}</p>
                            <p class="forthtitle-poup-about">{!! nl2br($aboutusMore->other) !!}</p>
                            
                                <p class="name-title">{!! nl2br($aboutusMore->name) !!}</p>
                            <p class="position-title">{!! nl2br($aboutusMore->position) !!}</p>
                            
                        </div>
                        <div class="col-md-1">
                            <div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal3" tabindex="-1" aria-labelledby="fullscreenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content custom-modal-bg dynamic-background2">
                <div class="modal-header">
                    <button type="button" class="btn-close ms-auto custom-close-btn" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="container padding-popup">
                    <p class="popup-logo-p"><img src="{{ asset('assets/site') }}/images/1.png" alt=""
                            class="popup-logo-img"> </p>
                            <div class="new-popup3-flex">
                                <div class="new-popup3-img">
                                        <img src="{{ asset('assets/site') }}/images/29.png" class="popup3-img1" alt="">
                                        <img src="{{ asset('assets/site') }}/images/29.png" class="popup3-img2" alt="">
                                    </div>
                                    <div class="popup3-title">
                                        <div>
                                            <p>
                                                {!! nl2br($ourValuesMore->title) !!}
                                            </p>
                                            {{-- <p class="name-title color-fff foucs-delete-h">{!! nl2br($ourValuesMore->name) !!}</p>
                                            <p class="position-title color-fff foucs-delete-h">{!! nl2br($ourValuesMore->position) !!}</p> --}}
                                            <p class="name-title color-fff foucs-delete-h"></p>
                                            <p class="position-title color-fff foucs-delete-h"></p>
                                        </div>
                                    </div>
                            </div>
                           
                    
                </div>
            </div>
        </div>
    </div>

    {{-- <div class="modal fade" id="modal4" tabindex="-1" aria-labelledby="fullscreenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content custom-modal-bg dynamic-background3">
                <div class="modal-header">
                    <button type="button" class="btn-close ms-auto custom-close-btn" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="container padding-popup">
                    <p class="popup-logo-p"><img src="{{ asset('assets/site') }}/images/1.png" alt=""
                            class="popup-logo-img"> </p>
                </div>
                <div class="popup4-view">
                    <p class="popup4-title">{!! nl2br($ourFocusMore[0]->title) !!}</p>
                    <p class="ltext-popup4-title">
                        {!! nl2br($ourFocusMore[0]->sub_title) !!}
                    </p>
                    <h2 class="ltext-popup4-subtitle">
                        {!! nl2br($ourFocusMore[0]->description) !!}
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal5" tabindex="-1" aria-labelledby="fullscreenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content custom-modal-bg dynamic-background4">
                <div class="modal-header">
                    <button type="button" class="btn-close ms-auto custom-close-btn" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="container padding-popup">
                    <p class="popup-logo-p"><img src="{{ asset('assets/site') }}/images/1.png" alt=""
                            class="popup-logo-img"> </p>
                    <div class="popup5-view">
                        <p class="popup5-title">{!! nl2br($ourFocusMore[2]->title) !!}</p>
                        <p class="ltext-popup5-title">
                            {!! nl2br($ourFocusMore[2]->sub_title) !!}
                        </p>
                        <h2 class="ltext-popup5-subtitle">
                            {!! nl2br($ourFocusMore[2]->description) !!}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
    
    <div class="modal fade" id="modal4" tabindex="-1" aria-labelledby="fullscreenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content custom-modal-bg dynamic-background3">
                <div class="modal-header">
                    <button type="button" class="btn-close ms-auto custom-close-btn" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="container padding-popup">
                    <p class="popup-logo-p"><img src="{{ asset('assets/site') }}/images/1.png" alt=""
                            class="popup-logo-img"> </p>
                </div>
                            <div class="popup6-view-new1">
                                <div class="popup-6-texpo-new1">
                                    <p class="popup5-title">{!! nl2br($ourFocusMore[0]->title) !!}</p>
                                    <p class="secondtitle-poup-about-new">{!! nl2br($ourFocusMore[0]->sub_title) !!}</p>
                                    <p class="thirdtitle-poup-about-new">
                                        {!! nl2br($ourFocusMore[0]->description) !!}
                                    </p>
                
                                </div>
                            </div>
                
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal5" tabindex="-1" aria-labelledby="fullscreenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content custom-modal-bg dynamic-background4">
                <div class="modal-header">
                    <button type="button" class="btn-close ms-auto custom-close-btn" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="container padding-popup">
                    <p class="popup-logo-p"><img src="{{ asset('assets/site') }}/images/1.png" alt=""
                            class="popup-logo-img"> </p>
                </div>
                            <div class="popup6-view-new">
                                <div class="popup-6-texpo-new">
                                    <p class="popup5-title">{!! nl2br($ourFocusMore[2]->title) !!}</p>
                                    <p class="secondtitle-poup-about-new">{!! nl2br($ourFocusMore[2]->sub_title) !!}</p>
                                    <p class="thirdtitle-poup-about-new">
                                        {!! nl2br($ourFocusMore[2]->description) !!}
                                    </p>
                
                                </div>
                            </div>
                
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal6" tabindex="-1" aria-labelledby="fullscreenModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen  modal-fullscreen-mobile">
            <div class="modal-content custom-modal-bg dynamic-background5">
                <div class="modal-header">
                    <button type="button" class="btn-close ms-auto custom-close-btn" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="container padding-popup">
                    <p class="popup-logo-p"><img src="{{ asset('assets/site') }}/images/1.png" alt=""
                            class="popup-logo-img"> </p>
                </div>
                <div class="popup6-view">
                    <div class="popup-6-texpo">
                        <p class="secondtitle-poup-about-new">{!! nl2br($ourFocusMore[1]->title) !!}</p>
                        <p class="thirdtitle-poup-about-new">
                            {!! nl2br($ourFocusMore[1]->description) !!}
                        </p>
    
                    </div>
                    <div class="popup6-view-h">
                        <img src="{{ asset($ourFocusMore[1]->image_logo) }}" class="popup6-img" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- <script>
        document.addEventListener("DOMContentLoaded", function() {
    const images = document.querySelectorAll("img");

    function handleScroll() {
        images.forEach(image => {
            const rect = image.getBoundingClientRect();
            const windowHeight = window.innerHeight;

            // Adjust the scroll percentage to start from 25%
            let scrollPercentage = Math.min(1, Math.max(0, 2 - (rect.top / windowHeight) * 2));
            let clipValue2 = (1 - scrollPercentage) * 37.5; // Covers the range from 25% to 100%

            // Ensure the minimum visible part is 25%
            clipValue = Math.max(clipValue2, 25);

            image.style.clipPath = `inset(0 ${clipValue2}% 0 ${clipValue2}%)`;
        });
    }

    window.addEventListener("scroll", handleScroll);
    handleScroll(); // Run initially
});

    </script> --}}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const fadeElements = document.querySelectorAll(".fade-in");
    
            function handleScroll() {
                fadeElements.forEach(element => {
                    const rect = element.getBoundingClientRect();
                    const windowHeight = window.innerHeight;
    
                    if (rect.top < windowHeight * 0.75) { 
                        // Fade in when element enters viewport
                        element.classList.add("visible");
                    } else {
                        // Fade out when scrolling back up
                        element.classList.remove("visible");
                    }
                });
            }
    
            window.addEventListener("scroll", handleScroll);
            handleScroll(); // Run initially in case some elements are already in view
        });
    </script>
    
    
    {{-- <sction class="section-1">
	<div class="container container-mobile1">
		<div id="point8" class="point"></div>
		<h3 class="about-title container-mobile">NEWS</h3>
		<div class="slider web-view">
      <div class="slider-arrows">
        <button id="prevBtn">&#10094;</button>
        <button id="nextBtn">&#10095;</button>
      </div>
      <div class="slide" id="slideContainer">
        <div class="slide-item col-md-4">
          <img src="images/14.png" alt="Image 1">
					<div class="triangle4"></div>
					<div class="slide-background-padding1">
						<p class="small-slide-title">WORK SPACES</p>
						<h3 class="slide-title">Tempor Labor</h3>
						<p class="slide-p color-fff">Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, sed do<br> eiusmod tempor incididunt ut labore<br> et dolore magna aliqua. Ut enim ad minim veniam.</p>
						<button type="button" class="btn-2" name="button">READ MORE</button>
					</div>
        </div>
        <div class="slide-item col-md-4">
					<div class="slide-background-padding2">
						<p class="small-slide-title">RESIDENCES</p>
						<h3 class="slide-title">Lorem Ipsum Amet</h3>
						<p class="slide-p color-fff">Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, sed do<br> eiusmod tempor incididunt ut labore<br> et dolore magna aliqua. Ut enim ad minim veniam.</p>
						<button type="button" class="btn-2" name="button">READ MORE</button>
					</div>
					<div class="triangle6"></div>
          <img src="images/15.png" alt="Image 2">

        </div>
        <div class="slide-item col-md-4">
          <img src="images/16.png" alt="Image 3">
					<div class="triangle5"></div>
					<div class="slide-background-padding3">
						<p class="small-slide-title">HOSPITALITY</p>
						<h3 class="slide-title">Ullamco Minim</h3>
						<p class="slide-p color-fff">Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, sed do<br> eiusmod tempor incididunt ut labore<br> et dolore magna aliqua. Ut enim ad minim veniam.</p>
						<button type="button" class="btn-2" name="button">READ MORE</button>
					</div>
        </div>
				<div class="slide-item col-md-4">
          <img src="images/14.png" alt="Image 1">
					<div class="triangle4"></div>
					<div class="slide-background-padding1">
						<p class="small-slide-title">WORK SPACES</p>
						<h3 class="slide-title">Tempor Labor</h3>
						<p class="slide-p color-fff">Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, sed do<br> eiusmod tempor incididunt ut labore<br> et dolore magna aliqua. Ut enim ad minim veniam.</p>
						<button type="button" class="btn-2" name="button">READ MORE</button>
					</div>
        </div>
        <div class="slide-item col-md-4">
					<div class="slide-background-padding2">
						<p class="small-slide-title">RESIDENCES</p>
						<h3 class="slide-title">Lorem Ipsum Amet</h3>
						<p class="slide-p color-fff">Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, sed do<br> eiusmod tempor incididunt ut labore<br> et dolore magna aliqua. Ut enim ad minim veniam.</p>
						<button type="button" class="btn-2" name="button">READ MORE</button>
					</div>
					<div class="triangle6"></div>
          <img src="images/15.png" alt="Image 2">

        </div>
        <div class="slide-item col-md-4">
          <img src="images/16.png" alt="Image 3">
					<div class="triangle5"></div>
					<div class="slide-background-padding3">
						<p class="small-slide-title">HOSPITALITY</p>
						<h3 class="slide-title">Ullamco Minim</h3>
						<p class="slide-p color-fff">Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, sed do<br> eiusmod tempor incididunt ut labore<br> et dolore magna aliqua. Ut enim ad minim veniam.</p>
						<button type="button" class="btn-2" name="button">READ MORE</button>
					</div>
        </div>
      </div>
      <div class="slider-dots" id="dotsContainer"></div>
    </div>

		<div class="swiper mobile-view">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<div class="slide-item col-md-4">
				<img src="images/14.png" alt="Image 1">
				<div class="triangle4"></div>
				<div class="slide-background-padding1">
					<p class="small-slide-title">WORK SPACES</p>
					<h3 class="slide-title">Tempor Labor</h3>
					<p class="slide-p color-fff">Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, sed do<br> eiusmod tempor incididunt ut labore<br> et dolore magna aliqua. Ut enim ad minim veniam.</p>
					<button type="button" class="btn-2 btn-2-mobile" name="button">READ MORE</button>
				</div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="slide-item col-md-4">
				<div class="slide-background-padding2">
					<p class="small-slide-title">RESIDENCES</p>
					<h3 class="slide-title">Lorem Ipsum Amet</h3>
					<p class="slide-p color-fff">Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, sed do<br> eiusmod tempor incididunt ut labore<br> et dolore magna aliqua. Ut enim ad minim veniam.</p>
					<button type="button" class="btn-2 btn-2-mobile" name="button">READ MORE</button>
				</div>
				<div class="triangle6"></div>
				<img src="images/15.png" alt="Image 2">

			</div>
		</div>
		<div class="swiper-slide">
			<div class="slide-item col-md-4">
				<img src="images/16.png" alt="Image 3">
				<div class="triangle5"></div>
				<div class="slide-background-padding3">
					<p class="small-slide-title">HOSPITALITY</p>
					<h3 class="slide-title">Ullamco Minim</h3>
					<p class="slide-p color-fff">Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit, sed do<br> eiusmod tempor incididunt ut labore<br> et dolore magna aliqua. Ut enim ad minim veniam.</p>
					<button type="button" class="btn-2 btn-2-mobile" name="button">READ MORE</button>
				</div>
			</div>
		</div>
	</div>

	<div class="pagination"></div>

	<div class="prev">
		<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M9.2625 13.2375L3.5375 7.5L9.2625 1.7625L7.5 0L0 7.5L7.5 15L9.2625 13.2375Z" fill="#A99260" />
		</svg>

	</div>
	<div class="next">
		<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M0.737305 13.2375L6.4623 7.5L0.737305 1.7625L2.4998 0L9.9998 7.5L2.4998 15L0.737305 13.2375Z" fill="#A99260" />
		</svg>

	</div>
	</div>

	</div>
</sction> --}}

<div id="point10" class="point"></div>
<div id="mobilePoint17" class="point"></div>

@endsection