/* ==================== [ Min Width Queries Start ] ==================== */
@media (min-width: 1600px) {
    /* ==================== [ Common Banner Start ] ==================== */
    .banner .container { max-width: calc(1500px + 40px); width: 100%; }
    /* ==================== [ Common Banner End ] ==================== */
}


@media (min-width: 1500px) {

    /* ==================== [ Common Start ] ==================== */
    .container-fluid,
    .container { padding-inline: 20px; max-width: calc(1300px + 40px); margin: 0 auto; }

    .header .container-fluid { padding-inline: 20px; max-width: calc(1700px + 40px); margin: 0 auto; }
    /* ==================== [ Common End ] ==================== */
    
    /* ==================== [ Common Banner Start ] ==================== */
    .banner .container { max-width: calc(1450px + 40px); width: 100%; }
    /* ==================== [ Common Banner End ] ==================== */
}
/* ==================== [ Min Width Queries End ] ==================== */


/* ==================== [ Max Width Queries Start ] ==================== */

@media (max-width: 1599px) {
    /* ==================== [ Extra Common Start ] ==================== */
    /* Section Spacing Start */
    .py-75 { padding-block: 50px; }
    .pt-75 { padding-top: 50px; }
    .pb-75 { padding-bottom: 50px; }

    .py-150 { padding-block: 100px; }
    .pt-150 { padding-top: 100px; }
    .pb-150 { padding-bottom: 100px; }

    .py-100 { padding-block: 75px; }
    .pt-100 { padding-top: 75px; }
    .pb-100 { padding-bottom: 75px; }

    .py-200 { padding-block: 150px; }
    .pt-200 { padding-top: 150px; }
    .pb-200 { padding-bottom: 150px; }
    /* Section Spacing End */
    /* ==================== [ Extra Common End ] ==================== */

    /* ==================== [ Header Start ] ==================== */
    .header { top: 40px; }
    .header .navbar { padding: 20px; }
    .header .navbar .navbar-brand { max-width: 170px; width: 100%; }
    .header .navbar .navbar-nav { gap: 16px; }
    .header .navbar .navbar-nav .nav-link { font-size: 16px; }

    .header .auth-button { gap: 10px; }
    .header .auth-button .dropdown>button { width: 40px; height: 40px; padding: 5px; }

    .header .btn-sm { padding: 10px 30px; }
    /* ==================== [ Header End ] ==================== */

    /* ==================== [ Common Banner Start ] ==================== */
    .banner { padding-top: 230px; }
    .banner .heading .disc * { font-size: 18px; line-height: 150%; }

    .banner .img-cover::before { top: 14px; }
    .banner .image-content { margin-bottom: 14px; }
    /* ==================== [ Common Banner End ] ==================== */

    /* ==================== [ Footer Start ] ==================== */
	.footer {
		padding: 150px 0 0;
	}

	.footer .footer-container {
		margin-bottom: 100px;
	}

	/* ==================== [ Footer End ] ==================== */

	/* ==================== [ FAQ Start ] ==================== */
    .faq .heading-block .title>* {
        margin-bottom: 60px;
    }
	/* ==================== [ FAQ End ] ==================== */
}


@media (max-width: 1499px) {
    /* ==================== [ Extra Common Start ] ==================== */
    .heading .title * { font-size: 50px; line-height: 64px; }
    /* ==================== [ Extra Common End ] ==================== */
}


@media (max-width: 1399px) {
    /* ==================== [ Header Start ] ==================== */
    .header { top: 30px; }
    /* ==================== [ Header End ] ==================== */

    /* ==================== [ Extra Common Start ] ==================== */
    .waveAni {
        width: 100%;
        height: 160px;
        overflow: hidden;
        position: relative;
    }
    
    .heading .title * { font-size: 44px; line-height: 58px; }
    
    .btn { padding: 12px 10px 12px 24px; font-size: 17px; }
    .btn span { margin-left: 16px; }

    /* Heading Block Start */
    .heading-block .title * { font-size: 44px; line-height: 58px; }
    .heading-block .title strong::after { width: 150px; }
    /* Heading Block End */

    /* Content Start */
    .content .content-title * { font-size: 30px; line-height: 40px; }
    .content .content-disc * { font-size: 17px; line-height: 150%; }
    /* Content End */

    /* Common Vector Start */
    .star-vector { width: 50px; }
    .three-line-vector { width: 50px; }
    .arrow-vector { width: 70px; }
    .white-dots-square { width: 90px; }
    .green-circle-vector { width: 130px; }
    /* Common Vector End */

    /* Section Spacing Start */
    .py-75 { padding-block: 50px; }
    .pt-75 { padding-top: 50px; }
    .pb-75 { padding-bottom: 50px; }

    .py-150 { padding-block: 100px; }
    .pt-150 { padding-top: 100px; }
    .pb-150 { padding-bottom: 100px; }

    .py-100 { padding-block: 75px; }
    .pt-100 { padding-top: 75px; }
    .pb-100 { padding-bottom: 75px; }

    .py-200 { padding-block: 100px; }
    .pt-200 { padding-top: 100px; }
    .pb-200 { padding-bottom: 100px; }
    /* Section Spacing End */

    /* ==================== [ Extra Common End ] ==================== */

    /* ==================== [ Common Banner End ] ==================== */
    .banner .heading .title strong::after { height: 14px; width: 250px; }
    .banner .img-cover::before { top: 12px; }
    .banner .image-content { margin-bottom: 12px; }
    /* ==================== [ Common Banner End ] ==================== */

    /* ==================== [ Our Story Start ] ==================== */
    .our-story .heading-block .title { max-width: 210px; width: 100%; }
    .our-story .heading-block .title .star-vector { top: 10px; left: calc(100% + 10px); }
    .our-story .content { padding-bottom: 90px; }
    .our-story .image-content .green-circle-vector { top: -30px; }
    /* ==================== [ Our Story End ] ==================== */

    /* ==================== [ Our Solutions Start ] ==================== */
    .our-solutions .our-solutions-block ,
    .our-solutions .our-solutions-block >* { gap: 40px; }

    .our-solutions .card .image { width: 80px; }
    .our-solutions .card { padding: 40px 30px; }
    .our-solutions .card.h-557 { min-height: 500px; padding-bottom: 200px; }
    /* ==================== [ Our Solutions End ] ==================== */

    /* ==================== [ Contact Us Start ] ==================== */
	.contact-us .card {
		padding: 60px;
	}

	.contact-us .card .image-container {
		position: relative;
		max-width: 468px;
		height: 500px;
	}

	.contact-us .card .form-container {
		max-width: 434px;
	}

	.contact-us .card .location {
		top: -24px;
		left: 26px;
	}

	.contact-us .card .email {
		bottom: -24px;
		right: 19px;
	}

	/* ==================== [ Contact Us End ] ==================== */

    
	/* ==================== [ Why Pakket2Go Start ] ==================== */
	.why-pakket2go .heading-block .title { max-width: 246px; width: 100%; }

	.why-pakket2go .heading-block .disc-block { max-width: calc(50% - 30px - 50px); width: 100%; }

	.why-pakket2go .image-content ,
	.why-pakket2go .text-content { max-width: calc(50% - 30px - 50px); width: 100%; }

	.why-pakket2go .text-content .title * { font-size: 36px; line-height: 44px; }
	.why-pakket2go .text-content .title img { width: 36px; aspect-ratio: 1 / 1; }

	.why-pakket2go .text-content .features-list ul li::before { height: 26px; width: 26px; }

	.why-pakket2go .text-content .features-list ul li { font-size: 16px; line-height: 26px; }

	.why-pakket2go .image-content .green-circle-vector { width: 140px; }
	.why-pakket2go .image-content .dark-dots-square { width: 96px; }

	.why-pakket2go .heading-block .title strong::after { left: 50px; }

	.why-pakket2go .green-shade-effect { width: 100%; height: 38%; }
	/* ==================== [ Why Pakket2Go End ] ==================== */

	/* ==================== [ Our Mission Start ] ==================== */
	.our-mission-block .left, 
	.our-mission-block .right { max-width: calc(50% - 30px); width: 100%; }

	.our-mission-block .left { gap: 50px; }

	.our-mission-block .heading-block .title * { font-size: 44px; line-height: 58px; }
	.our-mission-block .heading-block .star-vector { top: 0; right: 50px; }
	.our-mission-block .heading-block .title strong::after { bottom: -9px; left: 60px; }

	.our-mission-block .right .disc-block { gap: 40px; }
	.our-mission-block .right .profile-block { gap: 40px; }
	.our-mission-block .right .profile-block ul li { height: 60px; width: 60px; }

	.our-mission-block .right .stats-block ul li *:first-child { font-size: 30px; }
	.our-mission-block .right .stats-block ul li *:last-child { font-size: 16px; }
	/* ==================== [ Our Mission End ] ==================== */
     /* ==================== [ FAQ start ] ==================== */

    .accordion .accNumber {font-size: 24px; width: 56px; height: 56px;}
    .accArrow { width: 56px; height: 56px;}
    /* ==================== [ FAQ end ] ==================== */

}


@media (max-width: 1199px) {

    /* ==================== [ Extra Common Start ] ==================== */
    .heading .title * { font-size: 36px; line-height: 50px; }
    .heading .disc * { font-size: 16px; }

    .btn { padding: 10px 10px 10px 16px; font-size: 16px; }
    .btn span { margin-left: 12px; height: 30px; width: 30px; }

    .banner .heading .title { margin-bottom: 16px; }
    .banner .heading .disc * { margin-bottom: 20px; }

    h1 { margin-bottom: 16px; }

    /* Common Vector Start */
    .arrow-vector { width: 60px; }
    .star-vector { width: 40px; }
    .three-line-vector { width: 40px; }
    .white-dots-square { width: 70px; }
    .green-circle-vector { width: 100px; }
    /* Common Vector End */
    
    /* Heading Block Start */
    .heading-block .title * { font-size: 36px; line-height: 48px; }
    .heading-block .disc * { font-size: 15px; }

    .heading-block .title strong::after { width: 120px; }
    /* Heading Block End */
    
    /* Content Start */
    .content .content-disc * { font-size: 16px; }
    /* Content End */

    /* Section Spacing Start */
    .py-75 { padding-block: 50px; }
    .pt-75 { padding-top: 50px; }
    .pb-75 { padding-bottom: 50px; }

    .py-150 { padding-block: 50px; }
    .pt-150 { padding-top: 50px; }
    .pb-150 { padding-bottom: 50px; }

    .py-100 { padding-block: 50px; }
    .pt-100 { padding-top: 50px; }
    .pb-100 { padding-bottom: 50px; }

    .py-200 { padding-block: 50px; }
    .pt-200 { padding-top: 50px; }
    .pb-200 { padding-bottom: 50px; }
    /* Section Spacing End */


    /* ==================== [ Extra Common End ] ==================== */

    /* ==================== [ Common Banner Start ] ==================== */
    .banner .heading .title strong::after { left: 0; width: 195px; bottom: -5px; }
    .banner { padding-top: 180px; }
    .banner .heading .disc * { font-size: 16px; line-height: 150%; }
    /* ==================== [ Common Banner End ] ==================== */

    /* ==================== [ Header Start ] ==================== */
    .header { top: 20px; }

    .header .navbar .navbar-brand { max-width: 150px; }

    .header .navbar-collapse.show { max-height: calc(100dvh - 117px); display: flex; } 
    .header .navbar-collapse { overflow: auto; flex-direction: column; align-items: start; padding-top: 20px;} 
    .header .navbar-collapse .auth-button { margin: auto auto 0; } 

    .header .auth-button { margin-top: 50px; }

    .header .navbar .navbar-nav { gap: 10px; }

    .header .navbar .navbar-nav { margin-top: 50px; margin-bottom: 40px !important; }

    .header .navbar { padding: 20px 16px; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; }
    .header .auth-button .dropdown .dropdown-menu { margin-top: 0px; margin-bottom: 20px; right: 0; left: 0; bottom: 100%; top: auto; } 
    .header .navbar .navbar-nav .nav-link {margin: 0 auto;}
    .header .navbar .navbar-nav {margin: 0 auto;}
    /* ==================== [ Header End ] ==================== */

    /* ==================== [ Features Start ] ==================== */
    .features .features-block .card { padding: 30px 20px; }
    .features .card .title * { font-size: 23px; line-height: 130%; }
    .features .card .card-image { max-width: 70px; }

    .features .card::before { top: 7px; }
    /* ==================== [ Features End ] ==================== */
      /* ==================== [ Our-mission Start ] ==================== */
    .our-mission-block .right .stats-block ul {gap: 38px;}
    /* ==================== [ Our-mission Start ] ==================== */

    /* ==================== [ Our Story Start ] ==================== */
    .our-story .image-content { max-width: calc(50% - 20px); width: 100%; }
    .our-story .text-content { max-width: calc(50% - 20px); width: 100%; }

    .our-story .heading-block .disc { max-width: calc(50% - 20px); width: 100%; }
    .our-story .image-content .white-dots-square { bottom: 5px; }
    .our-story .image-content .green-circle-vector { top: -20px; }

    .our-story .heading-block { margin-bottom: 40px; }
    .our-story .heading-block .title .star-vector { left: unset; right: 0; }
    /* ==================== [ Our Story End ] ==================== */

    /* ==================== [ Our Solutions Start ] ==================== */
    .our-solutions .card { padding: 30px 20px; }
    .our-solutions .card .image { width: 70px; }

    .our-solutions .card .title * { font-size: 20px; line-height: 30px; }
    .our-solutions .card.h-557 { min-height: 430px; padding-bottom: 150px; }
    /* ==================== [ Our Solutions End ] ==================== */

    /* ==================== [ Contact Us Start ] ==================== */
	.contact-us .card {
		padding: 50px;
	}

	.contact-us .card .form-container {
		max-width: 350px;
	}

	/* ==================== [ Contact Us End ] ==================== */

	/* ==================== [ Footer Start ] ==================== */
	.footer {
		padding: 120px 0 0;
	}

	.footer .footer-container {
		margin-bottom: 80px;
	}

	.footer .footer-menu-group {
		max-width: 500px;
	}

	.footer .copyright .copy-links {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 25px;
		row-gap: 6px;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	/* ==================== [ Footer End ] ==================== */

    /* ==================== [ FAQ Start ] ==================== */
    .faq .heading-block .title>* {
        margin-bottom: 50px;
    }
	/* ==================== [ FAQ End ] ==================== */

	/* ==================== [ How Work Start ] ==================== */
    .how-work .how-work-container .card-detail .icon-group {
        width: 150px;
        height: 150px;
        margin: 0 auto 20px;
    }

    .how-work .arrow {
        margin-top: 43px;
    }

    .how-work .how-work-container .card-detail .icon-group * {
        max-height: 70px;
    }

    .how-work .how-work-container .card-detail .content-details .title * {
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 14px;
        font-weight: 600;
    }

    .how-work .how-work-container {
        padding-bottom: 45px;
    }
    /* ==================== [ How Work End ] ==================== */

    	/* ==================== [ Why Pakket2Go Start ] ==================== */
	.why-pakket2go .image-content .green-circle-vector { width: 110px; top: -40px; right: -40px; }
	.why-pakket2go .image-content .dark-dots-square { width: 76px; bottom: -30px; left: -30px; }

	.why-pakket2go .image-content { margin-block: 40px 30px; margin-inline: 30px 40px; }
	.why-pakket2go .why-pakket2go-block .why-pakket2go-row { gap: 40px; }

	.why-pakket2go .heading-block .disc-block { max-width: calc(50% - 30px - 30px); width: 100%; }

	.why-pakket2go .image-content ,
	.why-pakket2go .text-content { max-width: calc(50% - 30px - 30px); width: 100%; }

	.why-pakket2go .heading-block .title { max-width: 200px; width: 100%; }

	.why-pakket2go .heading-block .disc-block { gap: 20px; }

	.why-pakket2go .heading-block .title strong::after { left: 40px; }

	.why-pakket2go .text-content .title * { font-size: 30px; line-height: 38px; }
	.why-pakket2go .text-content .title img { width: 30px; }
	/* ==================== [ Why Pakket2Go End ] ==================== */

	/* ==================== [ Our Mission Start ] ==================== */
	.our-mission-block .heading-block .title * { font-size: 36px; line-height: 48px; }
	.our-mission-block .heading-block .title strong::after { left: 50px; }
	.our-mission-block .right .image-block { gap: 20px; }
	.our-mission-block .right .image-block >* { max-width: calc(50% - 10px); width: 100%; }
	.our-mission-block .right .image-block .img-contain { box-shadow: 0 4px 0 0 var(--primary); }

	.our-mission-block .right { gap: 30px; }

	.our-mission-block .right .disc-block { gap: 10px; }

	.our-mission-block .right .stats-block ul li *:first-child { font-size: 24px; line-height: 130%; }
	.our-mission-block .right .stats-block ul li *:last-child { font-size: 14px; line-height: 150%; }

	.our-mission-block .right .profile-block ul li { height: 50px; width: 50px; }
	.our-mission-block .right .profile-block { gap: 24px; }

	.our-mission-block .right .profile-block ul li { margin-left: -16px; }
	/* ==================== [ Our Mission End ] ==================== */


    /* Happy CSS start */

	/* ======= [problem solution css start] ========= */
	.problem-solution .heading-block .title strong::after {bottom: -10px;}
	.problem-solution-card-container .problem-card .thumb-down,.problem-solution-card-container .solution-card .thumb-up  {width: 76px; height: 76px;}
	.problem-solution-card-container .card {padding: 56px 58px;}
	/* ======= [problem solution css end] ========= */

    /* =========== [ look-like css start ] ===========  */
    .look-like .heading-block {margin-bottom: 50px;}
	.look-like .heading-block .title strong::after { left: calc(50% - -20px); bottom: -10px;}
    /* =========== [ look-like css end ] ===========  */

    /* Happy CSS end */
}


@media (max-width: 991px) {
    /* ==================== [ Common Banner Start ] ==================== */
    .banner .banner-block { flex-direction: column; }
    .banner .banner-block .image-content { max-width: 100%; width: 100%; }
    .banner .banner-block .text-content .heading { max-width: 100%; width: 100%; }

    /* ==================== [ Common Banner End ] ==================== */

    /* ==================== [ Typography Start ] ==================== */
    p { font-size: 16px; line-height: 26px; }
    body { font-size: 16px; line-height: 26px; }
    .typography {
        margin-top: 150px;
    }
    /* ==================== [ Typography End ] ==================== */
    
    /* ==================== [ Extra Common Start ] ==================== */
    .waveAni {
        width: 100%;
        height: 140px;
        overflow: hidden;
        position: relative;
    }
    
    
    .heading .title * { text-wrap: balance; }

    .heading-block { flex-direction: column; }

    .star-vector { width: 32px; }
    /* ==================== [ Extra Common End ] ==================== */

    /* ==================== [ Error 404 Start ] ==================== */
    .error-404 {
        margin-top: 150px;
    }
    /* ==================== [ Error 404 End ] ==================== */

    /* ==================== [ Error 404 End ] ==================== */
    .header .auth-button .dropdown .dropdown-menu {
        min-width: 200px;
    }

    
    /* ==================== [ Features Start ] ==================== */
    .features .features-block { flex-wrap: wrap; row-gap: 40px; }
    .features .features-block .card { max-width: calc(50% - 10px); width: 100%; gap: 24px; }
    /* ==================== [ Features End ] ==================== */

    /* ==================== [ Our Story Start ] ==================== */
    .our-story .content-block { flex-direction: column; gap: 60px; }
    .our-story .image-content { max-width: 600px; width: 100%; }
    .our-story .content-block .text-content { max-width: 600px; width: 100%; }

    .our-story .text-content .arrow-vector { left: unset; bottom: unset; top: 0; right: 0; transform: rotate(-90deg) scaleX(-1) ; -webkit-transform: rotate(-90deg) scaleX(-1) ; -moz-transform: rotate(-90deg) scaleX(-1) ; -ms-transform: rotate(-90deg) scaleX(-1) ; -o-transform: rotate(-90deg) scaleX(-1) ; }
    .our-story .content { padding-bottom: 0; }

    .our-story .content-title { padding-right: 70px; }

    .our-story .heading-block .title { max-width: fit-content; width: 100%; }
    .our-story .heading-block .title .star-vector { right: unset; top: 7px; left: calc(100% + 10px); }
    .our-story .heading-block .disc { max-width: 100%; width: 100%; }

    .our-story .heading-block .three-line-vector { right: unset; top: unset; left: 0; bottom: -30px; transform: scaleX(-1); -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); }
    /* ==================== [ Our Story End ] ==================== */

    /* ==================== [ Our Solutions Start ] ==================== */
    .our-solutions .our-solutions-block ,
    .our-solutions .our-solutions-block >* { gap: 30px; }

    .our-solutions .our-solutions-block { flex-direction: column; }

    .our-solutions .card.h-557 { min-height: unset; padding-bottom: 20px; }
    .our-solutions .card.h-344 { min-height: unset; }

    .our-solutions .collectieroutes-bg-img { width: 70%; }
    .our-solutions .realtime-communicatie-bg-img { width: 50%; }
    .our-solutions .card.h-557 .text { max-width: 50%; width: 100%; }

    .our-solutions .card.h-344 .disc * ,
    .our-solutions .card.h-344 .title * { max-width: 100%; width: 100%; }
    /* ==================== [ Our Solutions End ] ==================== */

    
	/* ==================== [ Contact Us Start ] ==================== */
	.contact-us .card {
		flex-direction: column;
	}

	.contact-us .card .form-container {
		max-width: 100%;
	}

	.contact-us .card .image-container {
		max-width: 100%;
		margin-right: auto;
		height: 400px;
		margin-bottom: 40px;
	}
    .look-like .image-content figure{
        height: 100%;
    }
    .look-like .image-content img{
        height: 100%;
    }
	/* ==================== [ Contact Us End ] ==================== */


	/* ==================== [ Footer Start ] ==================== */
	.footer {
		padding: 80px 0 0;
	}

	.footer .footer-container {
		margin-bottom: 60px;
	}

	.footer .footer-container {
		flex-direction: column;
		gap: 30px;
		align-items: flex-start;
	}

	.footer .brand-details .logo {
		margin-bottom: 16px;
	}

	.footer .brand-details {
		max-width: 100%;
		width: 100%;
	}

	.footer .footer-menu-group {
		max-width: 100%;
	}

	.footer .copyright .copy-container {
		flex-direction: column;
		gap: 10px;
		align-items: flex-start;
	}

	.footer .brand-details .disc * {
		color: var(--dark-60);
		font-weight: 400;
		line-height: 160%;
		margin-bottom: 0;
	}

	.footer .copyright {
		position: relative;
		padding: 30px 0;
	}

	.footer .footer-menu-group .menu-title * {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.footer .footer-menu-group ul li {
		margin-bottom: 10px;
	}

	/* ==================== [ Footer End ] ==================== */

	/* ==================== [ FAQ Start ] ==================== */
    .accordion .accNumber {
        width: 48px;
        height: 48px;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .accordion-item {
        gap: 20px;
        padding-block: 20px;
    }

    .accArrow {
        width: 48px;
        height: 48px;
    }

    .accordion-button {
        font-size: 20px;
        line-height: normal;
        margin-bottom: 6px;
    }
	/* ==================== [ FAQ End ] ==================== */

    /* ==================== [ FAQ Start ] ==================== */
    .faq .heading-block .title>* {
        margin-bottom: 40px;
    }
	/* ==================== [ FAQ End ] ==================== */

    /* ==================== [ How Work Start ] ==================== */
    .how-work .how-work-container .card-detail .icon-group {
        width: 100px;
        height: 100px;
        margin: 0 auto 20px;
    }

    .how-work .how-work-container {
        gap: 10px;
    }

    .how-work .arrow {
        margin-top: 25px;
    }

    .how-work .arrow * {
        width: 40px;
    }

    .how-work .how-work-container .card-detail .icon-group * {
        max-height: 50px;
    }

    .how-work .how-work-container .card-detail .content-details .title * {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .how-work .how-work-container {
        padding-bottom: 45px;
    }

    .how-work .heading-block .title .star-vector {
        left: calc(100% + 20px) !important;
    }
    /* ==================== [ How Work End ] ==================== */

    	
	/* ==================== [ Why Pakket2Go End ] ==================== */
	.why-pakket2go .heading-block .disc-block { max-width: 100%; width: 100%; }

	.why-pakket2go .heading-block .title { max-width: fit-content; width: 100%; }
	.why-pakket2go .heading-block .title-block { gap: 20px; }

	.why-pakket2go .why-pakket2go-block .why-pakket2go-row { flex-direction: column; }
	.why-pakket2go .why-pakket2go-block .why-pakket2go-row:nth-child(2n) { flex-direction: column; }

	.why-pakket2go .image-content { max-width: 540px; width: 100%; }
	.why-pakket2go .text-content { max-width: 100%; width: 100%; }
	.why-pakket2go .text-content .title { width: 100%; position: relative; padding-right: 70px; }
	
	.why-pakket2go .text-content .arrow-vector ,
	.why-pakket2go .why-pakket2go-block .why-pakket2go-row:nth-child(2n) .arrow-vector{ position: absolute; bottom: 50%; right: 0; transform: scaleY(-1) rotate(-70deg); -webkit-transform: scaleY(-1) rotate(-70deg); -moz-transform: scaleY(-1) rotate(-70deg); -ms-transform: scaleY(-1) rotate(-70deg); -o-transform: scaleY(-1) rotate(-70deg); }


	.why-pakket2go .text-content .features-list ul li::before { height: 22px; width: 22px; right: calc(100% + 10px); }
	.why-pakket2go .text-content .features-list ul { padding-left: 35px; }

	.why-pakket2go .heading-block .disc-block { gap: 0; }
	.why-pakket2go .heading-block { gap: 20px; margin-bottom: 20px; }

	.why-pakket2go .green-shade-effect { height: 70%; }
	/* ==================== [ Why Pakket2Go End ] ==================== */

	/* ==================== [ Our Mission Start ] ==================== */
	.our-mission-block { flex-direction: column; } 
	.our-mission-block .left, 
	.our-mission-block .right { max-width: 100%; width: 100%; }

	.our-mission-block { gap: 30px; }
	.our-mission-block .left .image-content { max-width: 100%; width: 100%; }

	.our-mission-block .heading-block { max-width: 430px; width: 100%; }
	.our-mission-block .heading-block .star-vector { top: 5px; }

	.our-mission-block .right .stats-block ul { justify-content: start; gap: 50px; }

	.our-mission-block .right .disc * { font-size: 16px; }
	/* ==================== [ Our Mission End ] ==================== */

	/* Happy CSS start */

	/* ======= [problem solution css start] ========= */

	.problem-solution-card-container .solution-card {margin-left: -35px;}
	.problem-solution-card-container .card { padding: 46px 40px; }

	/* ======= [problem solution css end] ========= */

	/* Happy CSS end */
}


@media (max-width: 767px) {
    /* ==================== [ Extra Common Start ] ==================== */
    .waveAni {
        width: 100%;
        height: 120px;
        overflow: hidden;
        position: relative;
    }
    
    .heading .title * { font-size: 36px; line-height: 44px; }

    .heading-block { gap: 20px; }
    .heading-block .title * { font-size: 30px; line-height: 40px; }
    .heading-block .title strong::after { width: 100px; }

    .content .content-disc * { font-size: 15px; }

    /* ==================== [ Extra Common End ] ==================== */

    /* ==================== [ Common Banner Start ] ==================== */
    .banner .heading .title strong::after { width: 170px; }
    /* ==================== [ Common Banner End ] ==================== */

    /* ==================== [ Features Start ] ==================== */
    .features .features-block .card { max-width: 100%; width: 100%; }
    .features .card .card-text { max-width: 100%; width: 100%; }
    .features .card .title * { font-size: 22px; }
    /* ==================== [ Features End ] ==================== */

    /* ==================== [ Our Story Start ] ==================== */
    .our-story .heading-block .title .star-vector { top: 0; }
    /* ==================== [ Our Story End ] ==================== */
    
    /* ==================== [ Our Solutions Start ] ==================== */
    .our-solutions .collectieroutes-bg-img { width: 60%; right: -60px; }
    /* ==================== [ Our Solutions End ] ==================== */

    /* ==================== [ Forms Start ] ==================== */
    .form-group {
        border-radius: 28px;
    }
    .form-group input, .form-group textarea {
        color: var(--black);
        font-size: 15px;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.093px;
        box-shadow: none;
        width: 100%;
        padding: 15px 18px;
        border-radius: 28px;
        border-width: 0px;
        border-style: initial;
        border-color: initial;
        border-image: initial;
    }
    
    /* ==================== [ Forms End ] ==================== */
    
	/* ==================== [ Footer Start ] ==================== */
	.footer {
		padding: 60px 0 0;
	}

	.footer .footer-container {
		margin-bottom: 40px;
	}

	.footer .copyright {
		padding: 26px 0;
	}

	/* ==================== [ Footer End ] ==================== */

    /* ==================== [ How Work Start ] ==================== */
    .how-work .how-work-container {
        flex-direction: column;
        align-items: center;
    }

    .how-work .how-work-container .card-detail .icon-group {
        width: 100px;
        height: 100px;
        margin: 0 auto 20px;
    }

    .how-work .how-work-container {
        gap: 10px;
    }

    .how-work .arrow {
        margin-top: 25px;
        margin-bottom: 25px;
        transform: rotate(120deg);
    }

    .how-work .arrow * {
        width: 40px;
    }

    .how-work .how-work-container .card-detail .icon-group * {
        max-height: 50px;
    }

    .how-work .how-work-container .card-detail .content-details .title * {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .how-work .how-work-container {
        padding-bottom: 45px;
    }
    /* ==================== [ How Work End ] ==================== */

    	/* ==================== [ Why Pakket2Go End ] ==================== */
	.why-pakket2go .image-content { max-width: 90%; width: 100%; }

	.why-pakket2go .text-content .features-list ul { gap: 16px; }

	.why-pakket2go .text-content .title * { font-size: 26px; line-height: 34px; }
	.why-pakket2go .text-content .title img { width: 26px; }

	.why-pakket2go .text-content .badge * { font-size: 15px; line-height: 20px; }

	.why-pakket2go .image-content .img-contain { box-shadow: 4px 4px 0 var(--secondary); }

	/* ==================== [ Why Pakket2Go End ] ==================== */

	/* ==================== [ Our Mission Start ] ==================== */
	.our-mission-block .right .disc * { font-size: 15px; }
	/* ==================== [ Our Mission End ] ==================== */

	/* Happy CSS start */

	/* ======= [problem solution css start] ========= */

	.problem-solution-card-container {flex-direction: column; margin-top: 0px; padding: 85px 0 50px 0;}
	.problem-solution-card-container .card {margin: 80px 0 0 0;}
	.problem-solution-card-container .card:first-child {margin: 0 0 0 0 ;}

	/* ======= [problem solution css end] ========= */

	/* Happy CSS end */
}


@media (max-width: 575px) {
    /* ==================== [ Extra Common Start ] ==================== */
    .heading-block .title * { font-size: 26px; line-height: 34px; }
    .content .content-title * { font-size: 24px; line-height: 30px; }

    .star-vector { width: 26px;  }
    .arrow-vector { width: 50px; }
    .three-line-vector { width: 30px; }

    .white-dots-square { width: clamp(54px, 33.92px + 6.27vw, 70px); left: clamp(0px, -5.02px + 1.57vw, 4px); } /* left: 4px to 0 , width: 70px to 54px (575 to 320) */
    .green-circle-vector { width: clamp(70px, 32.35px + 11.76vw, 100px); } /* width: 100px to 70px (575 to 320) */
    /* ==================== [ Extra Common End ] ==================== */

    /* ==================== [ Features Start ] ==================== */
    .features .card .title * { font-size: 20px; }
    .features .features-block .card { gap: 16px; }
    /* ==================== [ Features End ] ==================== */

    /* ==================== [ Our Story Start ] ==================== */
    .our-story .content-title { padding-right: 50px; }
    .our-story .content-block { gap: 40px; }

    .our-story .image-content .white-dots-square { bottom: clamp(5px, 16.27px + -1.96vw, 10px); } /* bottom: 10px to 5px (575 to 320) */
    .our-story .image-content .green-circle-vector { top: clamp(-20px, -6.47px + -2.35vw, -14px); } /* top: -20px to -14px (575 to 320) */
    /* ==================== [ Our Story End ] ==================== */

    /* ==================== [ Our Solutions Start ] ==================== */
    .our-solutions .card.h-557 .text { max-width: 100%; width: 100%; }
    
    .our-solutions .card.h-557 .disc * ,
    .our-solutions .card.h-557 .title * { max-width: 100%; width: 100%; }
    
    .our-solutions .collectieroutes-bg-img { width: 100%; }
    .our-solutions .card.h-557 { padding-bottom: clamp(120px, -18.04px + 43.14vw, 230px); } /* padding-bottom: 230px to 120px (575 to 320) */
    .our-solutions .realtime-communicatie-bg-img { max-width: clamp(220px, 31.76px + 58.82vw, 370px); width: 100%; } /* max-width: 370px to 220px (575 to 320) */
    /* ==================== [ Our Solutions End ] ==================== */

    /* ==================== [ Contact Us Start ] ==================== */
	.contact-us .card {
		flex-direction: column;
		padding: 35px 24px;
	}

	.contact-us .card .location .address *,
	.contact-us .card .email .address * {
		font-size: 14px;
	}

	.contact-us .card .location {
		top: -18px;
		left: 15px;
		padding: 8px 10px;
		gap: 8px;
	}

	.contact-us .card .email {
		bottom: -18px;
		right: 15px;
		padding: 8px 10px;
		gap: 8px;
	}

	.contact-us .card .form-container {
		max-width: 100%;
	}

	.contact-us .card .image-container {
		height: 320px;
		margin-bottom: 40px;
	}

	/* ==================== [ Contact Us End ] ==================== */

	/* ==================== [ Footer Start ] ==================== */
	.footer {
		padding: 60px 0 0;
	}

	.footer .footer-container {
		margin-bottom: 40px;
	}

	.footer .copyright {
		padding: 26px 0;
	}

	/* ==================== [ Footer End ] ==================== */

    /* ==================== [ FAQ Start ] ==================== */
    .accordion-item {
        align-items: flex-start;
    }

        .accordion-item {
        gap: 12px;
        padding-block: 16px;
    }
    /* ==================== [ FAQ End ] ==================== */
}



@media (max-width: 425px) {

	/* ==================== [ Forms Start ] ==================== */
	.fi {
		flex-shrink: 0;
		display: block;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background-size: cover;
	}

	/* ==================== [ Forms End ] ==================== */

	/* ==================== [ Select2 Setting Start ] ==================== */
	.select2-container {
		min-width: 78px;
	}

	/* ==================== [ Select2 Setting End ] ==================== */

	/* ==================== [ Contact Us Start ] ==================== */
	.flag-option {
		gap: 6px;
	}


	/* ==================== [ Contact Us End ] ==================== */

	/* ==================== [ Footer Start ] ==================== */
	.footer .footer-menu-group {
		flex-direction: column;
		gap: 20px;
	}

	/* ==================== [ Footer End ] ==================== */

    	/* ==================== [ Our Mission Start ] ==================== */
	.our-mission-block .right .profile-block { flex-direction: column; }
	.our-mission-block .right .image-block { flex-direction: column; gap:30px; }
	.our-mission-block .right .image-block >* { max-width: 100%; width: 100%; }
	.our-mission-block .left .image-content .img-contain { box-shadow: 0 4px 0 0 var(--primary); }

	.our-mission-block .heading-block .title * { font-size: 26px; line-height: 36px; }
	.our-mission-block .heading-block .star-vector { right: 0; }
	.our-mission-block .heading-block { max-width: 280px; width: 100%; }
	/* ==================== [ Our Mission End ] ==================== */

    	/* ==================== [ Why Pakket2Go End ] ==================== */
	.why-pakket2go .image-content .img-contain { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }

	.why-pakket2go .image-content .dark-dots-square { width: clamp(60px, 39.92px + 6.27vw, 76px); bottom: clamp(-30px, -7.45px + -3.92vw, -20px); left: clamp(-30px, 6.08px + -6.27vw, -14px); }
	.why-pakket2go .image-content .green-circle-vector { width: clamp(90px, 64.90px + 7.84vw, 110px); top: -30px; right: -30px; }

	.why-pakket2go .text-content .title * { font-size: 24px; line-height: 32px; } 
	.why-pakket2go .text-content .title img { width: 24px; } 

	.why-pakket2go .heading-block { margin-bottom: 0; }

	.why-pakket2go .text-content .features-list ul li { font-size: 15px; line-height: 24px; }

	.why-pakket2go .text-content .features-list ul { gap: 12px; }

	.why-pakket2go .why-pakket2go-block { gap: 60px; }

	.why-pakket2go .text-content .badge { padding: 8px 16px; }
	.why-pakket2go .text-content .badge * { font-size: 14px; line-height: 20px; }
	/* ==================== [ Why Pakket2Go End ] ==================== */

	/* ==================== [ Our Mission Start ] ==================== */
	.our-mission-block .right .stats-block ul { flex-wrap: wrap; column-gap: 30px; row-gap: 16px; }
	.our-mission-block .right .stats-block ul li { max-width: calc(50% - 15px); width: 100%; }

	.our-mission-block .right .stats-block ul li *:first-child { font-size: 22px; }

	.our-mission-block .heading-block { max-width: 380px; width: 100%; }
	
	.our-mission-block .heading-block .title strong::after { left: 40px; }
	/* ==================== [ Our Mission End ] ==================== */


   	/* =========== [ look-like css start ] ===========  */
	.look-mySwiper .swiper-pagination-bullet-active {width: 25px;}
	.look-like .heading-block { margin-bottom: 40px; }
	/* =========== [ look-like css end ] ===========  */

	/* Happy */

	/* ======= [problem solution css start] ========= */

	.problem-solution-card-container { padding: 45px 0 50px 0; }
	.problem-solution-card-container .problem-card .thumb-down, .problem-solution-card-container .solution-card .thumb-up { width: 46px; height: 46px; }
	.problem-solution-card-container .problem-card .thumb-down { top: -18px; right: 35px;}
	.problem-solution-card-container .solution-card .thumb-up { top: -32px; right: 35px; }
	.problem-solution-card-container .card { margin: 60px 0 0 0; }
	.problem-solution-card-container .card { padding: 36px 30px; }

	/* ======= [problem solution css end] ========= */
}

@media (max-width: 375px) {
    /* ==================== [ Header Start ] ==================== */
    .header .navbar .navbar-collapse { min-width: 100%; right: -100%; }
    /* ==================== [ Header End ] ==================== */
    
    /* ==================== [ Extra Common Start ] ==================== */
    .btn { padding: 8px 10px 8px 16px; font-size: 15px; }

    .heading-block .disc * ,
    .content .content-disc * { font-size: 14px; line-height: 140%; }

    /* Section Spacing Start */
    .py-75 { padding-block: 30px; }
    .pt-75 { padding-top: 30px; }
    .pb-75 { padding-bottom: 30px; }

    .py-150 { padding-block: 30px; }
    .pt-150 { padding-top: 30px; }
    .pb-150 { padding-bottom: 30px; }

    .py-100 { padding-block: 30px; }
    .pt-100 { padding-top: 30px; }
    .pb-100 { padding-bottom: 30px; }

    .py-200 { padding-block: 30px; }
    .pt-200 { padding-top: 30px; }
    .pb-200 { padding-bottom: 30px; }
    /* Section Spacing End */
    /* ==================== [ Extra Common End ] ==================== */
    
    /* ==================== [ Heading Start ] ==================== */
    .heading .title * { font-size: 28px; line-height: 36px; }
    /* ==================== [ Heading End ] ==================== */
    
    /* ==================== [ Common Banner Start ] ==================== */
    .banner { padding-top: 150px; }
    .banner .heading .disc * { margin-bottom: 16px; }
    
    .banner .heading .title strong::after { height: 12px; width: 150px; }
    
    .banner .image-content .img-cover * { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
    .banner .img-cover::before { border-radius: 20px; top: 7px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
    .banner .image-content { margin-bottom: 7px; }

    .banner .banner-block { gap: 30px; }
    /* ==================== [ Common Banner End ] ==================== */
    
    /* ==================== [ Features Start ] ==================== */
    .features .features-block .card { padding: 20px 12px; }
    .features .card .card-text { gap: 8px; }
    .features .card .title * { font-size: 19px; }
    .features .card .disc * { font-size: 15px; line-height: 135%; }
    /* ==================== [ Features End ] ==================== */

    /* ==================== [ Our Solutions Start ] ==================== */
    .our-solutions .card .title * { font-size: 18px; line-height: 26px; }
    .our-solutions .card .disc * { font-size: 15px; line-height: 24px; }
    .our-solutions .card .image { width: 60px; }
    .our-solutions .card { gap: 20px; }

    .our-solutions .our-solutions-block, .our-solutions .our-solutions-block >* { gap: 20px; }
    /* ==================== [ Our Solutions End ] ==================== */

    /* ==================== [ Contact Us Start ] ==================== */
	.contact-us .card {
		flex-direction: column;
		padding: 20px;
        padding-top: 40px;
	}

	.contact-us .card .location {
		left: 0px;
	}

	.contact-us .card .email {
		right: 0px;
	}

	.contact-us .card .image-container {
		height: 240px;
		margin-bottom: 30px;
	}

	/* ==================== [ Contact Us End ] ==================== */
}
/* ==================== [ Max Width Queries End ] ==================== */