@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* MAIN CSS
------------------------------------ */

:root { --green-color: #5EA281; --cream-color: #EFF0E9; --white-color: #FFFFFF; --black-color: #000000; }

*,
html,
body { margin: 0; padding: 0; font-family: Poppins; box-sizing: border-box; }

html { scroll-behavior: smooth; }

ul { list-style-position: inside; }

.show { display: block; transition: width 2s, height 2s, background-color 2s, rotate 2s; }

.hide { display: none; }

.stick-to-top { position: -webkit-sticky; position: sticky !important; top: 0; z-index: 1020; }

.fix-to-nav { position: -webkit-sticky; position: sticky; top: 100px; /* margin: 100px 0 0; */ z-index: 1020; display: block !important; transition: all 0.3s ease 0s; }

.nav-active { color: var(--green-color) !important; }

.h1 { font-size: 20px; font-weight: 600; }

.h2 { font-size: 19px; font-weight: 600; }

.h3 { font-size: 18px; font-weight: 600; }

p { font-size: 17px; }

.btn { background-color: var(--black-color); font-size: 17px; font-weight: 600; height: 50px; padding: 0 30px; transition: all 0.3s ease 0s; color: var(--white-color); border-radius: 7px; border: 2px solid var(--black-color); outline: none; }

    .btn:hover { background: transparent; color: var(--black-color); border: 2px solid var(--black-color); cursor: pointer; transition: all 0.35s ease; }

.m-127 { margin: 127px 0 !important; }

.w-100 { width: 100% !important; }

.border { border: 1px solid red; }

/* unvisited link */
a:link { color: green; text-decoration: none; }

/* visited link */
a:visited { color: green; }

/* mouse over link */
a:hover { color: green; text-decoration: underline; }

/* selected link */
a:active { color: green;  }

@media (max-width: 767px), screen and (max-width: 767px) {

    p { font-size: 15px; }

    .btn { font-size: 15px; height: 40px; padding: 0 20px; }
}

/* CSS FOR THE NAVBAR
------------------------------------ */

.nav { display: flex; align-items: center; height: 100px; width: 100%; background-color: var(--white-color); }

    .nav .nav-content { display: flex; justify-content: space-between; align-items: center; width: 85%; margin: 0 auto; }

        .nav .nav-content .menu-icon { display: none; }

            .nav .nav-content .menu-icon i { font-size: 30px; font-weight: 700; }

        .nav .nav-content .logo { width: 150px; cursor: pointer; }

        .nav .nav-content .links { text-align: center; display: flex; align-items: center; justify-content: space-between; }

            .nav .nav-content .links .links-content { display: flex; align-items: center; }

                .nav .nav-content .links .links-content a,
                .drawer .drawer-content .drawer-links a { display: flex; flex-direction: column; padding: 7px; margin-left: 7px; width: 140px; text-align: left; transition: all 0.3s ease 0s; color: var(--black-color); text-decoration: none; }

                .nav .nav-content .links .links-content .dropdown { position: relative; display: inline-block; }

                    .nav .nav-content .links .links-content .dropdown .dropdown-content { display: none; position: absolute; background-color: var(--white-color); border-radius: 7px; padding: 20px 0; min-width: 170px; /* padding: 15px; */ box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; }

                        .nav .nav-content .links .links-content .dropdown .dropdown-content a { color: black; padding: 13px 23px; text-decoration: none; display: block; margin: 0; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; width: 100%; }

                            .nav .nav-content .links .links-content .dropdown .dropdown-content a:hover { background-color: var(--green-color); }

                    .nav .nav-content .links .links-content .dropdown:hover .dropdown-content { display: block; }

                .nav .nav-content .links .links-content a .top,
                .drawer .drawer-content .drawer-links a .top { font-size: 13px; }

                .nav .nav-content .links .links-content a .bottom,
                .drawer .drawer-content .drawer-links a .bottom { display: flex; justify-content: space-between; }

                    .nav .nav-content .links .links-content a .bottom span,
                    .drawer .drawer-content .drawer-links a .bottom span { font-weight: bold; }

                .nav .nav-content .links .links-content a:hover > .bottom span,
                .nav .nav-content .links .links-content a:focus > .bottom span,
                .nav .nav-content .links .links-content a:hover > .bottom i,
                .nav .nav-content .links .links-content a:focus > .bottom i,
                .nav .nav-content .links .links-content .dropdown:hover a .bottom span { transition: all 0.3s ease 0s; color: var(--green-color); }

                .nav .nav-content .links .links-content a:hover > .bottom span,
                .nav .nav-content .links .links-content a:focus > .bottom span,
                .nav .nav-content .links .links-content .dropdown:hover a .bottom span { text-decoration: underline; }

                .nav .nav-content .links .links-content a.nav-active span { color: var(--black-color) !important; }

                .nav .nav-content .links .links-content a.nav-active .bottom span,
                .nav .nav-content .links .links-content a.nav-active .bottom i { transition: all 0.3s ease 0s; color: var(--green-color) !important; }

                .nav .nav-content .links .links-content a.nav-active .bottom span { text-decoration: underline !important; }

@media (max-width: 1024px), screen and (max-width: 1024px) {

    .nav { border-bottom: 1px solid #D9D9D9; }

        .nav .nav-content .links { display: none; }

        .nav .nav-content .menu-icon { display: block; }
}

/* CSS FOR THE DRAWER COMPINENT
---------------------------  --- */

.drawer { position: absolute !important; /* top: 100px; */ width: 100%; height: auto; padding: 17px 20px; border-top: 1px solid #D9D9D9; z-index: 999 !important; background-color: #fff; box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.1) !important; }

    .drawer .drawer-content { display: flex; flex-direction: column; align-items: center; }

        .drawer .drawer-content .drawer-links { width: 100%; }

            .drawer .drawer-content .drawer-links .dropdown { position: relative; display: inline-block; }

                .drawer .drawer-content .drawer-links .dropdown .dropdown-content { background-color: var(--white-color); padding: 20px 0; }

            .drawer .drawer-content .drawer-links a { border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; width: 100%; }

                .drawer .drawer-content .drawer-links a:nth-child(1) { border-top: 0 !important; }

                .drawer .drawer-content .drawer-links a:nth-child(5) { border-bottom: 0 !important; }

                .drawer .drawer-content .drawer-links a:hover > .bottom span,
                .drawer .drawer-content .drawer-links a:focus > .bottom span,
                .drawer .drawer-content .drawer-links a:hover > .bottom i,
                .drawer .drawer-content .drawer-links a:hover > .bottom i { transition: all 0.3s ease 0s; color: var(--green-color); }

/* CSS FOR THE HERO SECTION
------------------------------------ */

.hero { height: calc(100vh - 100px); width: 100%; }

    .hero .word-slider { width: 100%; height: 100%; display: flex; justify-content: start; align-items: center; }

        .hero .word-slider .text { width: 100%; height: 100%; padding: 0 7.5%; display: flex; flex-direction: column; justify-content: center; }

            .hero .word-slider .text h2 { color: black; font-size: 60px; font-weight: 700; line-height: 75px; text-shadow: 1px 1px 2px var(--green-color); margin: 0 0 30px; width: 64%; }

            .hero .word-slider .text p { width: 35%; }

        .hero .word-slider .gradient-bg { position: absolute; z-index: -1; width: 77%; height: calc(100vh - 100px); background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); }

    .hero .image-slider { width: 100%; height: 100%; display: flex; justify-content: end; align-items: center; z-index: -2; position: absolute; margin: 100px 0 0; height: calc(100vh - 100px); top: 0; }

        .hero .image-slider .image-bg { width: 65%; position: absolute; top: 0; height: calc(100vh - 100px); overflow: hidden; }

            .hero .image-slider .image-bg .carousel,
            .hero .image-slider .image-bg .carousel .carousel-inner,
            .hero .image-slider .image-bg .carousel .carousel-inner .carousel-item { width: 100%; height: 100%; object-position: 50% 50% !important; object-fit: cover !important; }

                .hero .image-slider .image-bg .carousel .carousel-inner .carousel-item div img { height: 100%; object-position: 50% 50% !important; object-fit: cover !important; }

                .hero .image-slider .image-bg .carousel .carousel-inner .carousel-item div.firstImg,
                .hero .image-slider .image-bg .carousel .carousel-inner .carousel-item div.secondImg,
                .hero .image-slider .image-bg .carousel .carousel-inner .carousel-item div.thirdImg { height: 100%; object-position: 50% 50% !important; object-fit: cover !important; background-position: center; background-repeat: no-repeat; background-size: cover; }

                .hero .image-slider .image-bg .carousel .carousel-inner .carousel-item div.firstImg { background-image: url('/assets/images/pexels-fauxels-3184315 2.svg'); }

                .hero .image-slider .image-bg .carousel .carousel-inner .carousel-item div.secondImg { background-image: url('/assets/images/young-man-making-diagnostics-vehicle.svg'); }

                .hero .image-slider .image-bg .carousel .carousel-inner .carousel-item div.thirdImg { background-image: url('/assets/images/pexels-fauxels-3183197.svg'); }

@media (max-width: 480px), screen and (max-width: 480px) {

    .hero .word-slider .text p { width: 100% !important; }
}

@media (max-width: 767px), screen and (max-width: 767px) {

    .hero .word-slider .text h2 { font-size: 37px; line-height: 47px; margin: 0 0 35px; width: 100%; }

    .hero .image-slider .image-bg { width: 100%; }

        .hero .image-slider .image-bg .carousel .carousel-inner .carousel-item div img { width: 100%; object-position: 50% 50% !important; object-fit: cover !important; }
}

@media (max-width: 1024px), screen and (max-width: 1024px) {

    .hero .word-slider .text p { width: 65%; }

    .hero .word-slider .text h2 { width: 85%; }
}

/* CSS FOR THE HERO SECTION IN THE OTHER SECTIONS
------------------------------------ */

.header-hero { height: 150px; width: 100%; }

    .header-hero .word-slider { width: 100%; height: 100%; display: flex; justify-content: start; align-items: center; }

.header-title { width: 100%; height: 100%; display: flex; justify-content: start; align-items: center; margin: 50px 0; }

    .header-title .text { width: 100%; height: 100%; padding: 0 7.5%; display: flex; flex-direction: column; justify-content: center; }

        .header-title .text h2 { color: black; font-size: 60px; font-weight: 700; line-height: 75px; text-shadow: 1px 1px 2px var(--green-color); margin: 0 0 30px; width: 64%; }

        .header-title .text p { width: 35%; }

.header-hero .word-slider .gradient-bg { position: absolute; z-index: -1; width: 100%; height: 150px; background: linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); }

.header-hero .image-slider { width: 100%; z-index: -2; position: absolute; margin: 100px 0 0; height: 150px; top: 0; }

    .header-hero .image-slider .image-bg { width: 100%; position: absolute; top: 0; height: 100%; overflow: hidden; background-image: url("/assets/images/pexels-fauxels-3184315 2.svg"); background-size: cover; background-position: 50% 50%; }

        .header-hero .image-slider .image-bg .carousel .carousel-inner .carousel-item { width: 100%; height: 100%; object-position: 50% 50% !important; object-fit: cover !important; }

            .header-hero .image-slider .image-bg .carousel .carousel-inner .carousel-item div img { width: 100%; object-position: 50% 50% !important; object-fit: cover !important; }

@media (max-width: 480px), screen and (max-width: 480px) {

    .header-title .text p { width: 100% !important; }
}

@media (max-width: 767px), screen and (max-width: 767px) {

    .header-title .text h2 { font-size: 37px; line-height: 47px; margin: 0 0 35px; width: 100% !important; }
}

@media (max-width: 1024px), screen and (max-width: 1024px) {

    .header-title .text p { width: 65%; }

    .header-title .text h2 { width: 85%; }
}

/* CSS FOR THE METRICS
------------------------------------ */

.metrics { width: 100%; height: 350px; padding: 50px 0; display: flex; justify-content: center; align-items: center; }

    .metrics .metrics-content { display: flex; justify-content: space-between; width: 70%; margin: 0 auto; }

        .metrics .metrics-content .metrics-section { display: flex; justify-content: space-around; width: 50%; margin: 20px 0; }

        .metrics .metrics-content .text { display: flex; align-items: center; flex-direction: column; text-align: center; }

            .metrics .metrics-content .text img { width: 50px; margin: 0 0 10px; }

            .metrics .metrics-content .text h3 { font-size: 50px; font-weight: 600; color: var(--black-color); }

@media (max-width: 1024px), screen and (max-width: 1024px) {

    .metrics { height: auto; }

        .metrics .metrics-content { flex-direction: column; width: 85%; }

            .metrics .metrics-content .metrics-section { width: 100%; }
}

/* CSS FOR THE TITLES
------------------------------------ */

.title p { color: var(--green-color); font-weight: 600; }

.title h4 { font-size: 30px; color: var(--black-color); font-weight: bold; margin: 5px 0 15px 0; }

.title hr { width: 70px; border: 2px solid #CBCBCD; border-radius: 7px; }

.middle-aligment { display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

/* CSS FOR THE ABOUT SECTION
------------------------------------ */

.about { height: 100vh; background: linear-gradient(var(--white-color) 0 50%, var(--green-color) 50% 100%); display: flex; justify-content: center; align-items: center; position: relative; }

    .about .about-cover { height: 100vh; width: 100%; padding: 50px 0; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; }
    
    #scene_1_container { position: absolute; top: 50%; left: 30%; transform: translateY(-50%); }

    .about .about-content { width: 85%; margin: 30px auto; display: flex; justify-content: end; align-items: center; }

        .about .about-content .right { width: 47%; margin: auto 0; z-index: 100; }

            .about .about-content .right .about-text { margin: 70px 0; }

            .about .about-content .right .bottom-text { font-weight: 500; color: #fff; }

@media (max-width: 1250px), screen and (max-width: 1250px) {

    .about { height: auto; /* padding: 0; */ }

        .about .about-cover { height: auto; backdrop-filter: blur(5px); }

        .about .about-content { width: 90%; }

            .about .about-content .right { width: 100%; }

                .about .about-content .right .about-text { margin: 70px 0; }

                .about .about-content .right .bottom-text { color: #000; }
}

/* CSS FOR THE SERVICES
------------------------------------ */

.services { width: 100%; display: flex; justify-content: center; align-items: center; margin: 127px 0 0; }

    .services .services-content { display: flex; flex-direction: column; align-items: center; width: 85%; }

        .services .services-content .services-container { width: 100%; margin: 70px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 5rem; }

            .services .services-content .services-container .cards { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

                .services .services-content .services-container .cards .service_tab { width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; border-radius: 7px; background-color: var(--cream-color); border: 1px solid rgb(155, 155, 155, 25%); transition: all 0.35s ease; }

                    .services .services-content .services-container .cards .service_tab:hover,
                    .services .services-content .services-container .cards .service_tab:focus
                    /* .services .services-content .services-container .cards .service_tab.active */ { cursor: pointer; color: var(--white-color) !important; background-color: var(--green-color); transition: all 0.35s ease; }

                    .services .services-content .services-container .cards .service_tab .service_tab_content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

                        .services .services-content .services-container .cards .service_tab .service_tab_content p { font-weight: 600; margin: 10px 0 0; color: var(--black-color); font-size: 15px; }

                        .services .services-content .services-container .cards .service_tab .service_tab_content img,
                        .services .services-content .services-container .cards .service_tab .service_tab_content svg { width: 45px; }

                    .services .services-content .services-container .cards .service_tab:hover > .service_tab_content img,
                    .services .services-content .services-container .cards .service_tab:focus > .service_tab_content img { filter: brightness(0) invert(1); }

                    .services .services-content .services-container .cards .service_tab:hover > .service_tab_content svg #icon,
                    .services .services-content .services-container .cards .service_tab:focus > .service_tab_content svg #icon { fill: var(--white-color) }

                .services .services-content .services-container .tab_content h5 { color: var(--black-color); font-size: 25px; font-weight: bold; }

                .services .services-content .services-container .tab_content p { margin: 70px 0; }

@media (max-width: 1024px), screen and (max-width: 1024px) {

    .services { margin: 70px 0 0; }

        .services .services-content { width: 90%; }

            .services .services-content .services-container { flex-direction: column; }

                .services .services-content .services-container .cards,
                .services .services-content .services-container .tab_content { width: 100%; }

                .services .services-content .services-container .cards { grid-template:
                        "1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr" 160px; overflow: hidden; overflow-x: scroll; }

                    .services .services-content .services-container .cards .service_tab { width: 150px !important; height: 150px !important; }

                .services .services-content .services-container .tab_content p { margin: 50px 0; }

                .services .services-content .services-container .tab_content { text-align: center; margin: 35px 0 0; }
}

/* CSS FOR THE PROJECTS
------------------------------------ */

.projects { width: 100%; display: flex; justify-content: center; align-items: center; margin: 127px 0; }

    .projects .projects-content { display: flex; flex-direction: column; align-items: center; width: 90%; }

        .projects .projects-content .projects-container { width: 100%; margin: 70px auto; display: grid; grid-auto-flow: dense; grid-template:
                "1fr 1fr 1fr 1fr" 370px
                "1fr 1fr 1fr 1fr" 370px; grid-gap: 25px; }

            .projects .projects-content .projects-container .project-box { position: relative; overflow: hidden; background-color: var(--black-color); display: flex; flex-direction: column; align-items: flex-end; overflow: hidden; cursor: pointer; }

                .projects .projects-content .projects-container .project-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

                .projects .projects-content .projects-container .project-box .box-footer { position: absolute; bottom: 0; display: flex; flex-direction: column; justify-content: center; height: 130px; width: 100%; padding: 0 25px; background: linear-gradient(360deg, rgba(0, 0, 0, 0.87) 0%, rgba(0, 0, 0, 0) 100%); color: white; }

                .projects .projects-content .projects-container .project-box .box-content { width: 100%; height: 100%; padding: 25px; display: flex; align-items: end; backdrop-filter: blur(5px); color: white; transform: translateY(150%); transition: all 0.35s ease; }

                    .projects .projects-content .projects-container .project-box .box-content.a { background-color: rgba(151, 71, 255, 77%); }

                    .projects .projects-content .projects-container .project-box .box-content.b { background-color: rgba(8, 145, 178, 77%); }

                    .projects .projects-content .projects-container .project-box .box-content.c { background-color: rgba(220, 53, 85, 77%); }

                    .projects .projects-content .projects-container .project-box .box-content.d { background-color: rgba(15, 112, 184, 77%); }

                    .projects .projects-content .projects-container .project-box .box-content.e { background-color: rgba(0, 173, 239, 77%); }

                    .projects .projects-content .projects-container .project-box .box-content.f { background-color: rgba(139, 24, 45, 77%); }

                .projects .projects-content .projects-container .project-box:hover .box-content { transform: translateY(0); transition: all 0.35s ease; }

                .projects .projects-content .projects-container .project-box:hover .box-footer { transform: translateY(0); transition: all 0.35s ease; }

                .projects .projects-content .projects-container .project-box h4 { font-size: 30px; font-weight: 600; }

                .projects .projects-content .projects-container .project-box.b,
                .projects .projects-content .projects-container .project-box.d { grid-column: span 2; }

@media (max-width: 767px), screen and (max-width: 767px) {

    .projects .projects-content .projects-container .project-box h4 { font-size: 25px; }

    .projects .projects-content .projects-container .project-box p { font-size: 13px; }
}

@media (max-width: 1024px), screen and (max-width: 1024px) {

    .projects { margin: 70px 0; }

        .projects .projects-content { width: 95%; }

            .projects .projects-content .projects-container { grid-template:
                    "1fr 1fr" 250px
                    "1fr 1fr" 250px
                    "1fr 1fr" 250px
                    "1fr 1fr" 250px; grid-gap: 10px; }

                .projects .projects-content .projects-container .project-box .box-content { padding: 15px; }

                    .projects .projects-content .projects-container .project-box .box-content .content-title { display: none }
}

/* CSS FOR THE TESTIMONIALS
------------------------------------ */

.testimonial { width: 100%; display: flex; justify-content: center; align-items: center; }

    .testimonial .testimonal-content { width: 80%; margin: 0 auto; }

        .testimonial .testimonal-content #testimonialID { margin: 70px 0 0; }

            .testimonial .testimonal-content #testimonialID .carousel-inner:hover { cursor: -moz-grab; cursor: -webkit-grab; }

            .testimonial .testimonal-content #testimonialID .carousel-inner:active { cursor: -moz-grabbing; cursor: -webkit-grabbing; }

            .testimonial .testimonal-content #testimonialID .carousel-inner .testimonial_slide { width: 57%; margin: auto; padding: 20px; text-align: center; }

                .testimonial .testimonal-content #testimonialID .carousel-inner .testimonial_slide p { color: #75767A; font-weight: normal !important; margin: 40px 0 30px 0; }

                .testimonial .testimonal-content #testimonialID .carousel-inner .testimonial_slide span { color: var(--black-color); font-weight: normal !important; }

                .testimonial .testimonal-content #testimonialID .carousel-inner .testimonial_slide h6 { color: var(--green-color); font-size: 22px; }

@media (max-width: 1024px), screen and (max-width: 1024px) {

    .testimonial .testimonal-content { width: 90%; }

        .testimonial .testimonal-content #testimonialID .carousel-inner .testimonial_slide { width: 77%; }
}

/* CSS FOR THE CALL TO ACTION
------------------------------------ */

.call-to-action { padding: 40px 0; width: 100%; height: 300px; background-color: var(--green-color); display: flex; margin: 177px 0; /* box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08) !important; */ }

    .call-to-action .call-to-action-content { width: 85%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }

        .call-to-action .call-to-action-content img { width: 320px; border-radius: 7px; }

        .call-to-action .call-to-action-content .text { width: 40%; margin: 0 auto; }

            .call-to-action .call-to-action-content .text h2 { margin: 20px 0 10px; font-size: 40px; font-weight: bold; color: var(--black-color); }

            .call-to-action .call-to-action-content .text p { color: #fff; margin: 15px 0 20px; }

@media (max-width: 767px), screen and (max-width: 767px) {

    .call-to-action .call-to-action-content { flex-direction: column; }

        .call-to-action .call-to-action-content .text { width: 85%; }
}

@media (max-width: 1024px), screen and (max-width: 1024px) {

    .call-to-action { height: auto; margin: 70px 0; }

        .call-to-action .call-to-action-content { width: 90%; }

            .call-to-action .call-to-action-content img { width: 220px; }

            .call-to-action .call-to-action-content .text { text-align: center; }

                .call-to-action .call-to-action-content .text h2 { font-size: 35px; }
}

/* CSS FOR THE BLOG SECTION
------------------------------------ */

.blog { width: 100%; display: flex; align-items: center; justify-content: center; }

    .blog .blog-content { display: flex; width: 80%; align-items: center; flex-direction: column; }

        .blog .blog-content .inside { display: flex; justify-content: space-between; margin: 70px 0 0; }

            .blog .blog-content .inside .first,
            .blog .blog-content .inside .second,
            .blog .blog-content .inside .third { width: 30%; margin: 0 7px; text-align: start; }

            .blog .blog-content .inside .image-box { position: relative; overflow: hidden; background-color: var(--black-color); border-radius: 7px; height: 233.7px; }

                .blog .blog-content .inside .image-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover !important; opacity: 1; overflow: hidden; transition: transform 0.5s, opacity 0.5s; }

            .blog .blog-content .inside .first:hover > .image-box img,
            .blog .blog-content .inside .second:hover > .image-box img,
            .blog .blog-content .inside .third:hover > .image-box img { opacity: 0.5; transform: scale(1.15); }

            .blog .blog-content .inside .first:hover > .btn,
            .blog .blog-content .inside .second:hover > .btn,
            .blog .blog-content .inside .third:hover > .btn { background: transparent; color: var(--black-color); border: 2px solid var(--black-color); }

            .blog .blog-content .inside p { font-weight: 500; margin: 0 0 15px; color: var(--green-color); }

            .blog .blog-content .inside h3 { font-weight: 600; font-size: 20px; }

            .blog .blog-content .inside .article { margin: 25px 0; }

@media (max-width: 534px), screen and (max-width: 534px) {

    .blog .blog-content .inside { flex-direction: column; }

        .blog .blog-content .inside .first,
        .blog .blog-content .inside .second,
        .blog .blog-content .inside .third { width: 100%; text-align: start; margin: 5px 0 25px; }
}

@media (max-width: 767px), screen and (max-width: 767px) {

    .blog .blog-content { width: 90%; }
}

/* CSS FOR ALL THE BLOGS IN SITE
------------------------------------ */

.blog2 { width: 100%; display: flex; align-items: center; justify-content: center; }

    .blog2 .blog2-content { display: flex; width: 85%; align-items: center; flex-direction: column; }

        .blog2 .blog2-content .inside,
        .blog2 .blog2-content .outside { display: flex; justify-content: space-between; margin: 70px 0 0; padding: 0 0 70px; border-bottom: 1.5px solid #D9D9D9 }

            .blog2 .blog2-content .outside .first { display: flex; justify-content: space-between; align-items: center; /* margin: 70px 0 0;
    padding: 0 0 70px; */ /* border-bottom: 1.5px solid #D9D9D9 */ }

            .blog2 .blog2-content .inside .first,
            /* .blog2 .blog2-content .outside .first, */
            .blog2 .blog2-content .inside .second,
            .blog2 .blog2-content .inside .third { width: 30%; margin: 0 7px; text-align: start; }

            .blog2 .blog2-content .inside .image-box { position: relative; overflow: hidden; background-color: var(--black-color); border-radius: 7px; height: 233.7px; }

            .blog2 .blog2-content .outside .image-box { position: relative; overflow: hidden; background-color: var(--black-color); border-radius: 7px; width: 50%; /* height: 480px; */ }

            .blog2 .blog2-content .outside .blogtext { /* position: relative;
    overflow: hidden;
    background-color: var(--black-color);
    border-radius: 7px; */ width: 45% !important; /* height: 180px !important; */ }

            .blog2 .blog2-content .outside .image-box img { /* position: absolute;
    top: 0;
    left: 0; */ width: 100%; height: 100%; object-fit: cover !important; opacity: 1; overflow: hidden; transition: transform 0.5s, opacity 0.5s; }

            .blog2 .blog2-content .inside .image-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover !important; opacity: 1; overflow: hidden; transition: transform 0.5s, opacity 0.5s; }

            .blog2 .blog2-content .inside .first:hover > .image-box img,
            .blog2 .blog2-content .outside .first:hover > .image-box img,
            .blog2 .blog2-content .inside .second:hover > .image-box img,
            .blog2 .blog2-content .inside .third:hover > .image-box img { opacity: 0.5; transform: scale(1.15); }

            .blog2 .blog2-content .inside .first:hover > .btn,
            .blog2 .blog2-content .outside .first:hover > .btn,
            .blog2 .blog2-content .inside .second:hover > .btn,
            .blog2 .blog2-content .inside .third:hover > .btn { background: transparent; color: var(--black-color); border: 2px solid var(--black-color); }

            .blog2 .blog2-content .inside p,
            .blog2 .blog2-content .outside p { font-weight: 500; margin: 0 0 15px; color: var(--green-color); }

                .blog2 .blog2-content .outside p.more-text { font-weight: normal !important; margin: 17px 0 0; color: var(--black-color); }

            .blog2 .blog2-content .inside h3 { font-weight: 600; font-size: 20px; }

            .blog2 .blog2-content .outside h3 { font-weight: 600; font-size: 30px; }

            .blog2 .blog2-content .inside .article,
            .blog2 .blog2-content .outside .article { margin: 25px 0; }

@media (max-width: 534px), screen and (max-width: 534px) {

    .blog2 .blog2-content .inside { flex-direction: column; }

    .blog2 .blog2-content .outside .first { flex-direction: column; }

    .blog2 .blog2-content .inside .first,
    .blog2 .blog2-content .outside .first,
    .blog2 .blog2-content .inside .second,
    .blog2 .blog2-content .inside .third { width: 100%; text-align: start; margin: 5px 0 25px; }
}

@media (max-width: 767px), screen and (max-width: 767px) {

    .blog2 .blog2-content { width: 90%; }

        .blog2 .blog2-content .outside { flex-direction: column; }

            .blog2 .blog2-content .outside .first { flex-direction: column; }

            .blog2 .blog2-content .outside .image-box { width: 100%; }

            .blog2 .blog2-content .outside .blogtext { width: 100% !important; }
}

/* CSS FOR THE ALL PROJECTS SECTION
------------------------------------ */

.projects2 { width: 100%; display: flex; align-items: center; justify-content: center; }

    .projects2 .projects2-content { display: flex; width: 85%; align-items: center; flex-direction: column; }

        .projects2 .projects2-content select:focus { outline: none; }

        .projects2 .projects2-content .mobileCategoryButtonBox { display: none; margin: 0 0 70px; }

        .projects2 .projects2-content .categoryButtonBox { display: block; margin: 0 0 50px; }

            .projects2 .projects2-content .categoryButtonBox .mainBtns { float: center; display: block; padding: 0 0 15px; border-bottom: 1px solid #d2d2d2; }

            .projects2 .projects2-content .categoryButtonBox .subBtns { float: center; display: block; padding: 15px 0 0; /* border-bottom: 1px solid red; */ }

.smallCategoryBtn { font-size: 13px !important; height: 35px !important; }

.categoryBtn,
.projects2 .projects2-content select option { font-size: 15px !important; margin: 7px; color: var(--black-color) !important; background-color: var(--cream-color) !important; border: 1px solid rgb(155, 155, 155, 25%) !important; }

    .categoryBtn:hover,
    .categoryBtn:focus,
    .categoryBtn.active { color: var(--white-color) !important; background-color: var(--green-color) !important; }

.projects2 .projects2-content .inside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin-top: 20px; overflow: hidden; width: 100%; }

@media (max-width: 1024px), screen and (max-width: 1024px) {

    .projects2 .projects2-content .inside { grid-template-columns: repeat(2, 1fr); }
}

/* .projects2 .projects2-content .inside */
.categoryBox { text-align: center !important; display: none; margin: 0 0 70px; }

.projects2 .projects2-content .inside .categoryBox .first { grid-column: 1 / 3; }

.projects2 .projects2-content .inside .categoryBox .second { grid-column: 1 / 3; }

.projects2 .projects2-content .inside .categoryBox .third { grid-column: 1 / 3; }

.projects2 .projects2-content .inside .categoryBox .image-box { position: relative; overflow: hidden; background-color: var(--black-color); border-radius: 7px; aspect-ratio: 5 / 3; }

    .projects2 .projects2-content .inside .categoryBox .image-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover !important; opacity: 1; overflow: hidden; transition: transform 0.5s, opacity 0.5s; }

.projects2 .projects2-content .inside .categoryBox .first:hover > .image-box img,
.projects2 .projects2-content .inside .categoryBox .second:hover > .image-box img,
.projects2 .projects2-content .inside .categoryBox .third:hover > .image-box img { opacity: 0.5; transform: scale(1.15); }

.projects2 .projects2-content .inside .categoryBox .first:hover > .btn,
.projects2 .projects2-content .inside .categoryBox .second:hover > .btn,
.projects2 .projects2-content .inside .categoryBox .third:hover > .btn { background: transparent; color: var(--black-color); border: 2px solid var(--black-color); }

.projects2 .projects2-content .inside p { font-weight: 500; margin: 0 0 15px; color: var(--green-color); }

    .projects2 .projects2-content .inside p.description { font-weight: normal; margin: 15px 0 0; color: var(--black-color); }

.projects2 .projects2-content .inside h3 { font-weight: 600; font-size: 25px; }

.projects2 .projects2-content .inside .article { margin: 25px 0; }

@media (max-width: 534px), screen and (max-width: 534px) {

    .projects2 .projects2-content .inside { display: grid; grid-template-columns: repeat(1, 1fr); gap: 25px; }

        .projects2 .projects2-content .inside .first,
        .projects2 .projects2-content .inside .second,
        .projects2 .projects2-content .inside .third { padding: 0 0 50px; border-bottom: 1px solid #ddd; }

    .projects2 .projects2-content .mobileCategoryButtonBox { display: block; margin: 0 0 35px; }

    .projects2 .projects2-content .categoryButtonBox { display: none; }

    .categoryBox { margin: 0 0 20px; }
}

@media (max-width: 767px), screen and (max-width: 767px) {

    .projects2 .projects2-content { width: 90%; }

    .categoryBtn { font-size: 13px; height: 40px; padding: 0 20px; margin: 5px; }
}

/* CSS FOR THE FOOTER
------------------------------------ */

.footer { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 127px auto 0; padding: 35px 0 50px; background-color: var(--black-color); width: 100%; color: #fff; }

    .footer .footer-content,
    .footer .copyright { width: 85%; display: flex; justify-content: space-between; }

        .footer .footer-content .first,
        .footer .footer-content .fourth { display: flex; flex-direction: column; }

        .footer .footer-content .second,
        .footer .footer-content .third { text-align: center; display: flex; flex-direction: column; }

            .footer .footer-content .first h5,
            .footer .footer-content .second h5,
            .footer .footer-content .third h5,
            .footer .footer-content .fourth h5 { margin: 27px 0; font-size: 23px; font-weight: bold; }

            .footer .footer-content .second .drawerNav,
            .footer .footer-content .third .drawerNav { display: flex; flex-direction: column; }

                .footer .footer-content .second .drawerNav a,
                .footer .footer-content .third .drawerNav a { padding: 7px; transition: all 0.3s ease 0s; color: #fff; text-decoration: none; }

                    .footer .footer-content .second .drawerNav a:hover,
                    .footer .footer-content .third .drawerNav a:hover,
                    .footer .footer-content .fourth .socials p i:hover { color: var(--green-color); text-decoration: underline; cursor: pointer; transition: all 0.3s ease 0s; }

        .footer .footer-content .fourth .socials { display: flex; justify-content: space-between; }

            .footer .footer-content .fourth .socials p i { font-size: 30px; }

    .footer hr.divider { border: 1px solid #fff; border-radius: 7px; width: 85%; margin: 35px auto; }

    .footer .copyright { align-items: center; }

        .footer .copyright .logo,
        .footer .copyright .copyright-text { margin: 0 0 10px; }

@media (max-width: 480px), screen and (max-width: 480px) {

    .footer .copyright .logo { display: none; }
}

@media (max-width: 767px), screen and (max-width: 767px) {

    .footer { margin: 70px auto 0; }

        .footer .footer-content { width: 90%; flex-direction: column; align-items: center; text-align: center; }

        .footer .copyright { width: 90%; flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 914px), screen and (max-width: 914px) {

}

/* /CSS FOR THE CATEGORIES */

.show { display: block; }

/* CSS FOR THE SINGLE CASE STUDY
------------------------------------ */

.single-project { width: 100%; display: flex; align-items: center; justify-content: center; }

    .single-project .single-project-content { display: flex; width: 75%; align-items: center; flex-direction: column; }

        .single-project .single-project-content .outside .image-box { position: relative; overflow: hidden; background-color: var(--black-color); border-radius: 7px; height: 450px; }

            .single-project .single-project-content .outside .image-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover !important; opacity: 1; overflow: hidden; transition: transform 0.5s, opacity 0.5s; }

        .single-project .single-project-content .outside .first:hover > .image-box img { opacity: 0.5; transform: scale(1.15); }

        .single-project .single-project-content .outside p { font-weight: 500; margin: 0 0 15px; color: var(--black-color); }

            .single-project .single-project-content .outside p.more-text { font-weight: normal !important; margin: 17px 0 0; color: var(--black-color); }

        .single-project .single-project-content .outside h3 { font-weight: 600; font-size: 35px; }

        .single-project .single-project-content .outside .article { margin: 25px 0; }

        .single-project .single-project-content .outside .blogtext { width: 85% !important; margin: 0 auto; }

        .single-project .single-project-content .outside { display: flex; justify-content: space-between; margin: 50px 0; padding: 0 0 50px; border-bottom: 1.5px solid #D9D9D9 }

@media (max-width: 767px), screen and (max-width: 767px) {

    .single-project .single-project-content .outside { margin: 30px 0; padding: 0 0 30px; }

    .single-project .single-project-content { width: 85%; }

        .single-project .single-project-content .outside .image-box { height: 350px; }

        .single-project .single-project-content .outside .blogtext { width: 90% !important; }
}

/********************************/
/*          Fade Effect         */
/********************************/

.caption-animate .carousel-item.active .text { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

    .caption-animate .carousel-item.active .text.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

    .caption-animate .carousel-item.active .text.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }

    .caption-animate .carousel-item.active .text.flipOutX,
    .caption-animate .carousel-item.active .text.flipOutY,
    .caption-animate .carousel-item.active .text.bounceIn,
    .caption-animate .carousel-item.active .text.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; }

.caption-animate .carousel-item .text.fadeIn,
.caption-animate .carousel-item .text.fadeInDown,
.caption-animate .carousel-item .text.fadeInDownBig,
.caption-animate .carousel-item .text.fadeInLeft,
.caption-animate .carousel-item .text.fadeInLeftBig,
.caption-animate .carousel-item .text.fadeInRight,
.caption-animate .carousel-item .text.fadeInRightBig,
.caption-animate .carousel-item .text.fadeInUp,
.caption-animate .carousel-item .text.fadeInUpBig { opacity: 0; }

/* CSS FOR TAB SELECTOR
------------------------------------ */
.tab-selector {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 3rem auto;
    background: #e8e8e8;
    padding: 0.5rem;
    border-radius: 1.25rem;
}

.tab-selector button {
    background: none;
    color: var(--black-color);
    box-shadow: none;
}

.tab-selector button:hover {
    background: var(--white-color);
}

.tab-selector button.selected {
    background: var(--white-color);
    color: rgba(113, 103, 173, 1);
}

/* CSS FOR LIST ENTRY
------------------------------------ */
.check-list-entry-list-item {
    list-style-type: none;
    display: flex;
    align-items: center;
    border: 2px solid #7a7a7a;
    border-radius: 0.35rem;
    overflow: hidden;
    margin: 1rem 0;
}

.check-list-entry-list-item .icon-wrapper {
    padding: 0.75rem 0.5rem;
    background: #9ACA70;
}

.check-list-entry-list-item i {
    font-size: 1.5rem;
    color: var(--white-color);
}

.check-list-entry-list-item p {
    margin-left: 0.5rem;
}

@media (max-width: 600px) {
    .tab-selector {
        flex-wrap: wrap;
    }
}

#scene_1 {
    height: 524px;
    width: 100%;
    position: relative;
}


#scene_1 .item:nth-child(1) {
    height: 14.5%;
    left: 5%;
    top: 22%;
}
#scene_1 .item:nth-child(3) {
    height: 9.7%;
    left: 90%;
    top: 37%;
}
#scene_1 .item {
    position: absolute;
}
#scene_1 #items {
    width: 100%;
    height: 324px;
    position: relative;
    margin: auto;
}
#scene_1 #items div {
    position: absolute;
    overflow: hidden;
}
#scene_1 #items div img {
    -webkit-transition: all linear 1s;
    -moz-transition: all linear 1s;
    -ms-transition: all linear 1s;
    -o-transition: all linear 1s;
    transition: all linear 1s;
}
#scene_1 #items div:nth-child(1) {
    bottom: 0;
    height: 324px;
    left: 50%;
    width: 868px;
    z-index: 5;
    margin-left: -295px;
    
    -moz-transform: translateX(20%);
    -ms-transform: translateX(20%);
    -webkit-transform: translateX(20%);
    -o-transform: translateX(20%);
    transform: translateX(20%);
}
#scene_1 #items div:nth-child(2) {
    bottom: 40px;
    height: 291px;
    left: 50%;
    width: 632px;
    z-index: 4;
    margin-left: -320px;
}
#scene_1 #items div:nth-child(3) {
    width: 283px;
    height: 101px;
    left: -400px;
    z-index: 4;
    bottom: 102px;
}
#scene_1 #items div:nth-child(4) {
    width: 231px;
    height: 143px;
    left: -300px;
    z-index: 4;
    bottom: 80px;
}
#scene_1 #items div:nth-child(5) {
    width: 283px;
    height: 201px;
    right: -550px;
    z-index: 4;
    bottom: 85px;
}
#scene_1 #items div:nth-child(1) img {
    animation: scene_1_items_child1_img 850ms ease-in 500ms forwards;
}

@keyframes scene_1_items_child1_img {
    from {
        -moz-transform: rotateY(90deg) translateZ(-220px);
        -ms-transform: rotateY(90deg) translateZ(-220px);
        -webkit-transform: rotateY(90deg) translateZ(-220px);
        -o-transform: rotateY(90deg) translateZ(-220px);
        transform: rotateY(90deg) translateZ(-220px);
    }
    to {
        -moz-transform: none;
        -ms-transform: none;
        -webkit-transform: none;
        -o-transform: none;
        transform: none;
    }
}
#scene_1 #items div:nth-child(2) img {
    animation: scene_1_items_child2_img 850ms ease-in 500ms forwards;
}
@keyframes scene_1_items_child2_img {
    from {
        -moz-transform: rotateY(90deg) translateZ(20px);
        -ms-transform: rotateY(90deg) translateZ(20px);
        -webkit-transform: rotateY(90deg) translateZ(20px);
        -o-transform: rotateY(90deg) translateZ(20px);
        transform: rotateY(90deg) translateZ(20px);
    }
    to {
        -moz-transform: none;
        -ms-transform: none;
        -webkit-transform: none;
        -o-transform: none;
        transform: none;
    }
}
#scene_1 #items div:nth-child(4) img {
    -moz-transform: rotateY(90deg) translateZ(-60px);
    -ms-transform: rotateY(90deg) translateZ(-60px);
    -webkit-transform: rotateY(90deg) translateZ(-60px);
    -o-transform: rotateY(90deg) translateZ(-60px);
    transform: rotateY(90deg) translateZ(-60px);
}
#scene_1 #items div:nth-child(3) img,
#scene_1 #items div:nth-child(5) img {
    -moz-transform: rotateY(90deg) translateZ(-64px);
    -ms-transform: rotateY(90deg) translateZ(-64px);
    -webkit-transform: rotateY(90deg) translateZ(-64px);
    -o-transform: rotateY(90deg) translateZ(-64px);
    transform: rotateY(90deg) translateZ(-64px);
}
#scene_1 #eco_items {
    width: 1170px;
    height: 324px;
    position: relative;
    margin: auto;
}
#scene_1 #eco_items div {
    position: absolute;
    overflow: hidden;
}
/*#scene_1 #eco_items div img {*/
/*    -webkit-transition: all linear 1s;*/
/*    -moz-transition: all linear 1s;*/
/*    -ms-transition: all linear 1s;*/
/*    -o-transition: all linear 1s;*/
/*    transition: all linear 1s;*/
/*}*/
#scene_1 #eco_items div:nth-child(1) {
    width: 785px;
    height: 459px;
    left: 415px;
    z-index: 5;
    bottom: 0;
}
#scene_1 #eco_items div:nth-child(2) {
    width: 318px;
    height: 208px;
    left: -243px;
    z-index: 4;
    bottom: 85px;
}
#scene_1 #eco_items div:nth-child(3) {
    width: 318px;
    height: 208px;
    left: 204px;
    z-index: 4;
    bottom: 85px;
}
#scene_1 #eco_items div:nth-child(4) {
    width: 318px;
    height: 208px;
    right: -355px;
    z-index: 4;
    bottom: 85px;
}
#scene_1 #eco_items div:nth-child(5) {
    width: 432px;
    height: 346px;
    left: 930px;
    z-index: 6;
    bottom: 45px;
}
#scene_1 #eco_items div:nth-child(6) {
    left: 112px;
    z-index: 6;
    bottom: 33%;
}
#scene_1 #eco_items div:nth-child(7) {
    left: 373px;
    z-index: 6;
    bottom: 33%;
}
#scene_1 #eco_items div:nth-child(8) {
    left: 771px;
    z-index: 6;
    bottom: 33%;
}
#scene_1 #eco_items div:nth-child(9) {
    left: 845px;
    z-index: 6;
    bottom: 33%;
}
#scene_1 #eco_items div:nth-child(10) {
    left: 1120px;
    z-index: 6;
    bottom: 33%;
}
#scene_1 #eco_items div:nth-child(11) {
    left: 930px;
    z-index: 1000;
    bottom: 190px;
}
/*#scene_1 #eco_items div:nth-child(11) img {*/
/*    -webkit-transition: all linear 1s;*/
/*    -moz-transition: all linear 1s;*/
/*    -ms-transition: all linear 1s;*/
/*    -o-transition: all linear 1s;*/
/*    transition: all linear 1s;*/
/*}*/
/*#scene_1 #eco_items div:nth-child(1) img {*/
/*    -webkit-transform: rotateY(90deg) translateZ(-210px);*/
/*    -moz-transform: rotateY(90deg) translateZ(-210px);*/
/*    -ms-transform: rotateY(90deg) translateZ(-210px);*/
/*    -o-transform: rotateY(90deg) translateZ(-210px);*/
/*    transform: rotateY(90deg) translateZ(-210px);*/
/*}*/
/*#scene_1 #eco_items div:nth-child(2) img {*/
/*    -webkit-transform: rotateY(90deg) translateZ(-100px);*/
/*    -moz-transform: rotateY(90deg) translateZ(-100px);*/
/*    -ms-transform: rotateY(90deg) translateZ(-100px);*/
/*    -o-transform: rotateY(90deg) translateZ(-100px);*/
/*    transform: rotateY(90deg) translateZ(-100px);*/
/*}*/
/*#scene_1 #eco_items div:nth-child(3) img {*/
/*    -webkit-transform: rotateY(90deg) translateZ(-100px);*/
/*    -moz-transform: rotateY(90deg) translateZ(-100px);*/
/*    -ms-transform: rotateY(90deg) translateZ(-100px);*/
/*    -o-transform: rotateY(90deg) translateZ(-100px);*/
/*    transform: rotateY(90deg) translateZ(-100px);*/
/*}*/
/*#scene_1 #eco_items div:nth-child(4) img {*/
/*    -webkit-transform: rotateY(90deg) translateZ(-100px);*/
/*    -moz-transform: rotateY(90deg) translateZ(-100px);*/
/*    -ms-transform: rotateY(90deg) translateZ(-100px);*/
/*    -o-transform: rotateY(90deg) translateZ(-100px);*/
/*    transform: rotateY(90deg) translateZ(-100px);*/
/*}*/
/*#scene_1 #eco_items div:nth-child(5) img {*/
/*    -webkit-transform: rotateY(90deg) translateZ(-100px);*/
/*    -moz-transform: rotateY(90deg) translateZ(-100px);*/
/*    -ms-transform: rotateY(90deg) translateZ(-100px);*/
/*    -o-transform: rotateY(90deg) translateZ(-100px);*/
/*    transform: rotateY(90deg) translateZ(-100px);*/
/*}*/
/*#scene_1 #eco_items div:nth-child(11) img {*/
/*    -webkit-transform: rotateY(90deg) translateZ(-12px);*/
/*    -moz-transform: rotateY(90deg) translateZ(-12px);*/
/*    -ms-transform: rotateY(90deg) translateZ(-12px);*/
/*    -o-transform: rotateY(90deg) translateZ(-12px);*/
/*    transform: rotateY(90deg) translateZ(-12px);*/
/*}*/
#scene_1 #travel_items {
    width: 1170px;
    height: 524px;
    position: relative;
    margin: auto;
    margin-top: 36px;
}
#scene_1 #travel_items div {
    position: absolute;
    overflow: hidden;
}
/*#scene_1 #travel_items div img {*/
/*    -webkit-transition: all linear 1s;*/
/*    -moz-transition: all linear 1s;*/
/*    -ms-transition: all linear 1s;*/
/*    -o-transition: all linear 1s;*/
/*    transition: all linear 1s;*/
/*}*/
#scene_1 #travel_items div:nth-child(1) {
    width: 829px;
    height: 573px;
    left: 401px;
    z-index: 5;
    bottom: 0;
}
#scene_1 #travel_items div:nth-child(2) {
    width: 440px;
    height: 225px;
    left: -70px;
    z-index: 4;
    bottom: 78px;
}
#scene_1 #travel_items div:nth-child(3) {
    width: 320px;
    height: 241px;
    left: 967px;
    z-index: 4;
    bottom: 80px;
}
#scene_1 #travel_items div:nth-child(4) {
    left: 333px;
    bottom: 25.7%;
}
#scene_1 #travel_items div:nth-child(5) {
    left: 900px;
    bottom: 25.7%;
}
#scene_1 #travel_items div:nth-child(6) {
    bottom: 25.7%;
}
#scene_1 #travel_items div:nth-child(7) {
    bottom: 25.7%;
}
#scene_1 #travel_items div:nth-child(8) {
    left: 244px;
    bottom: 25.7%;
}
#scene_1 #travel_items div:nth-child(9) {
    right: -100px;
    bottom: 25.7%;
}
#scene_1 #travel_items div:nth-child(10) {
    right: -60px;
    bottom: 25.7%;
}
/*#scene_1 #travel_items div:nth-child(1) img {*/
/*    -moz-transform: rotateY(90deg) translateZ(-240px);*/
/*    -ms-transform: rotateY(90deg) translateZ(-240px);*/
/*    -webkit-transform: rotateY(90deg) translateZ(-240px);*/
/*    -o-transform: rotateY(90deg) translateZ(-240px);*/
/*    transform: rotateY(90deg) translateZ(-240px);*/
/*}*/
/*#scene_1 #travel_items div:nth-child(2) img {*/
/*    -moz-transform: rotateY(90deg) translateZ(-100px);*/
/*    -ms-transform: rotateY(90deg) translateZ(-100px);*/
/*    -webkit-transform: rotateY(90deg) translateZ(-100px);*/
/*    -o-transform: rotateY(90deg) translateZ(-100px);*/
/*    transform: rotateY(90deg) translateZ(-100px);*/
/*}*/
/*#scene_1 #travel_items div:nth-child(3) img {*/
/*    -moz-transform: rotateY(90deg) translateZ(-60px);*/
/*    -ms-transform: rotateY(90deg) translateZ(-60px);*/
/*    -webkit-transform: rotateY(90deg) translateZ(-60px);*/
/*    -o-transform: rotateY(90deg) translateZ(-60px);*/
/*    transform: rotateY(90deg) translateZ(-60px);*/
/*}*/