/*
 * Icon Bridge — maps original `i` font-icon rules to `svg` (astro-icon) equivalents.
 *
 * Original theme CSS sizes font icons via `font-size` on `<i>` elements.
 * astro-icon renders inline `<svg>` which doesn't respond to `font-size`.
 * This bridge converts each `font-size: Xpx` to `width: Xpx; height: Xpx`
 * on `svg`, and reproduces container-box styling (background, border-radius)
 * with appropriate padding so the SVG glyph matches the original proportions.
 */

/* ================================================================
   Base reset — inline SVG icons inherit color and behave as inline
   ================================================================ */
.theme-inline-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	color: currentColor;
}

/* ================================================================
   Buttons: .build_button & .more_btn
   Original: i { font-size:26px; width:44px; height:44px; inline-flex; border-radius:50% }
   ================================================================ */
.build_button svg {
	position: relative;
	z-index: 2;
	transition: 0.4s;
	color: var(--color-1);
	background: var(--color-4);
	width: 44px;
	height: 44px;
	padding: 9px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
}
.build_button:hover svg {
	color: var(--text-white);
	background: var(--color-5);
	transform: rotate(45deg);
}
.header__area-menubar-right-btn.one .build_button svg {
	color: var(--text-white);
	background: var(--color-5);
}
.cta__area .build_button svg {
	color: var(--text-white);
	background: var(--color-5);
}
.choose__us-right .build_button svg {
	color: var(--color-1);
	background: var(--primary-color-1);
}
.choose__us-right .build_button:hover svg {
	color: var(--color-1);
	background: #f1f1f1;
}
.price__area-item.active .price__area-item-btn .build_button svg {
	color: var(--text-white);
	background: var(--color-5);
	transform: rotate(45deg);
}
.services__four-title .build_button:hover svg {
	color: var(--color-1);
	background: #f1f1f1;
}
.header__area.three .build_button:hover svg {
	color: var(--color-1);
	background: #f1f1f1;
}

.more_btn svg {
	width: 22px;
	height: 22px;
	transition: 0.4s;
	flex-shrink: 0;
}
.more_btn:hover svg {
	transform: rotate(45deg);
}

/* ================================================================
   Slider arrows
   Original: i { font-size:24px; width:60px; height:60px; border-radius:50% }
   ================================================================ */
.slider-arrow svg {
	width: 60px;
	height: 60px;
	padding: 18px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--text-heading-color);
	background: var(--bg-white);
	transition: 0.4s;
	border: 1px solid var(--border-color-1);
	cursor: pointer;
}
.slider-arrow svg:hover {
	color: var(--color-1);
	background: var(--primary-color-1);
	border-color: var(--primary-color-1);
}
.banner__three .slider-arrow svg {
	color: var(--text-white);
	background: #313131;
	border-color: #313131;
}
.banner__three .slider-arrow svg:hover {
	color: var(--color-1);
	background: var(--primary-color-1);
	border-color: var(--primary-color-1);
}

/* Banner two arrows — font-size:22px; width:70px; height:118.1px */
.banner__two-slide-area-arrow-next svg,
.banner__two-slide-area-arrow-prev svg {
	cursor: pointer;
	width: 70px;
	height: 118.1px;
	padding: 24px 24px 48px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-2);
	color: var(--text-heading-color);
	transition: 0.4s;
}
.banner__two-slide-area-arrow-next svg:hover,
.banner__two-slide-area-arrow-prev svg:hover {
	background: var(--color-1);
	color: var(--text-white);
}

/* ================================================================
   Header — search, sidebar, menu icons
   ================================================================ */

/* Search icon — font-size:20px */
.header__area-menubar-right-search-icon svg {
	cursor: pointer;
	position: relative;
	z-index: 9;
	display: block;
	color: var(--text-heading-color);
	width: 20px;
	height: 20px;
}
.header__area.two .header__area-menubar-right-search-icon svg,
.header__area.two .menu__bar svg {
	color: var(--text-white);
}
.header__area.three .header__area-menubar-right-search-icon svg,
.header__area.three .menu__bar svg {
	color: var(--text-white);
}
.header__four .header__area-menubar-right-search-icon svg {
	color: var(--text-heading-color);
}

/* Search close — font-size:22px */
.header__area-menubar-right-search-box-icon svg {
	cursor: pointer;
	position: relative;
	z-index: 9;
	display: block;
	width: 22px;
	height: 22px;
	color: var(--text-white);
	transform: rotate(0deg);
}
.header__area-menubar-right-search-box-icon svg:hover {
	animation: rotate 0.4s ease 0s;
}

/* Search button in search box */
.header__area-menubar-right-search-box button svg {
	width: 22px;
	height: 22px;
}

/* Sidebar toggle — font-size:24px, box 60×60 */
.header__area-menubar-right-sidebar-icon svg {
	width: 24px;
	height: 24px;
	color: var(--text-heading-color);
}

/* Sidebar popup icons */
.header__area-menubar-right-sidebar-popup-icon svg {
	width: 25px;
	height: 25px;
	display: block;
	color: var(--text-heading-color);
	cursor: pointer;
}

/* Sidebar close — width:40px; height:40px; font-size:20px (glyph in circle) */
.header__area-menubar-right-sidebar-popup .sidebar-close-btn svg {
	background: var(--primary-color-1);
	width: 40px;
	height: 40px;
	padding: 10px;
	box-sizing: border-box;
	color: var(--text-heading-color);
	text-align: center;
	border-radius: 50%;
	cursor: pointer;
	display: block;
}

/* Sidebar contact icons — font-size:40px */
.header__area-menubar-right-sidebar-popup-contact-item-icon svg {
	width: 40px;
	height: 40px;
	margin-top: 5px;
	color: var(--primary-color-1);
}

/* Sidebar social icons — width:50px; height:50px (icon in circle) */
.header__area-menubar-right-sidebar-popup-social ul li a svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 14px;
	box-sizing: border-box;
	background: var(--color-7);
	border-radius: 50%;
	color: var(--text-white);
	transition: 0.4s;
}
.header__area-menubar-right-sidebar-popup-social ul li a svg:hover {
	background: var(--primary-color-1);
	color: var(--text-heading-color);
}

/* ================================================================
   Mobile menu bar & popup
   ================================================================ */

/* Menu bar hamburger — font-size:35px */
.menu__bar svg {
	width: 35px;
	height: 35px;
	cursor: pointer;
	color: var(--text-heading-color);
}

/* Mobile menu close — width:40px; height:40px; font-size:20px */
.menu__bar-popup-top .close svg {
	background: var(--primary-color-1);
	width: 40px;
	height: 40px;
	padding: 10px;
	box-sizing: border-box;
	color: var(--text-heading-color);
	text-align: center;
	border-radius: 50%;
	cursor: pointer;
	display: block;
}

/* ================================================================
   Services
   ================================================================ */

/* Services One — font-size:80px (large icon) */
.services__one-item > svg {
	width: 80px;
	height: 80px;
	color: var(--text-heading-color);
	transition: 0.4s;
}
.services__one-item:hover > svg {
	color: var(--primary-color-1);
}
.services__four .services__one-item > svg {
	color: var(--primary-color-1);
}
.services__four .services__one-item:hover > svg {
	color: var(--text-heading-color);
}

/* Services Two — font-size:45px in 80×80 circle */
.services__two .services__one-item > svg {
	width: 80px;
	height: 80px;
	min-width: 80px;
	padding: 17px;
	box-sizing: border-box;
	display: inline-flex;
	color: var(--text-heading-color);
	background: var(--bg-white);
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

/* Services Details list check icons */
.services__details-area-list li svg {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

/* ================================================================
   About
   ================================================================ */

/* About One — font-size:60px */
.about__one-left-list-item svg {
	width: 60px;
	height: 60px;
	min-width: 60px;
	margin-top: 6px;
	color: var(--text-heading-color);
}

/* ================================================================
   Experience — font-size:70px
   ================================================================ */
.experience__area-list-item svg {
	width: 70px;
	height: 70px;
	display: inline-block;
}

/* ================================================================
   Industry — font-size:70px
   ================================================================ */
.industry__area-right-list-item svg {
	width: 70px;
	height: 70px;
	margin-top: 6px;
	color: var(--text-heading-color);
}

/* ================================================================
   Choose Us Three — font-size:70px
   ================================================================ */
.choose__three-list-item svg {
	display: inline-block;
	width: 70px;
	height: 70px;
	margin-bottom: 25px;
}

/* ================================================================
   Contact — font-size:40px
   ================================================================ */
.contact__area-left-contact-item-icon svg {
	width: 40px;
	height: 40px;
	margin-top: 5px;
}

/* ================================================================
   Pricing — font-size:16px checkmarks
   ================================================================ */
.price__area-item-list ul li svg {
	color: var(--primary-color-1);
	width: 16px;
	height: 16px;
	margin-right: 6px;
	position: relative;
	top: 2px;
}
.price__area-item.active .price__area-item-list ul li svg {
	color: var(--color-1);
}

/* ================================================================
   Blog
   ================================================================ */

/* Blog meta icons — margin-right:8px */
.blog__one-item-image-date svg,
.blog__two .blog__one-item-content .meta ul li svg,
.blog__three-item-content .meta ul li svg,
.blog__four-item-content .meta ul li svg {
	margin-right: 8px;
	width: 16px;
	height: 16px;
}

/* Blog standard meta */
.blog__standard-item-content-meta ul li a svg {
	width: 16px;
	height: 16px;
	margin-right: 4px;
}

/* Blog details quote — font-size:80px */
.blog__details-area-box svg {
	width: 80px;
	height: 80px;
	min-width: 80px;
	color: var(--primary-color-1);
}

/* Blog details author social — width:45px; height:45px; font-size:14px */
.blog__details-area-author .social__icon ul li a svg {
	width: 45px;
	height: 45px;
	padding: 15px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--border-color-1);
	color: var(--text-heading-color);
	transition: 0.4s;
}
.blog__details-area-author .social__icon ul li a svg:hover {
	background: var(--primary-color-1);
	color: var(--color-1);
	border-color: var(--primary-color-1);
}

/* Blog comment reply icon */
.blog__details-area-comment-item-comment-content h5 a svg {
	margin-right: 10px;
	width: 16px;
	height: 16px;
}

/* ================================================================
   Sidebar
   ================================================================ */

/* Sidebar category icon — font-size:25px */
.all__sidebar-item-category ul li a svg {
	width: 25px;
	height: 25px;
	color: var(--body-color);
}
.all__sidebar-item-category ul li a:hover svg {
	color: var(--primary-color-1);
}

/* Sidebar post date icon */
.all__sidebar-item-post .post__item-title span svg {
	width: 14px;
	height: 14px;
	margin-right: 4px;
}

/* ================================================================
   Portfolio
   ================================================================ */

/* Portfolio Two — font-size:28px in 55×55 circle */
.portfolio__two-item-content > a svg {
	background: var(--primary-color-1);
	width: 55px;
	height: 55px;
	padding: 13px;
	box-sizing: border-box;
	color: var(--color-1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: 0.4s;
}
.portfolio__two-item-content > a svg:hover {
	transform: rotate(45deg);
}

/* Portfolio Three — font-size:30px in 60×60 circle */
.portfolio__three-item-content a svg {
	width: 60px;
	height: 60px;
	padding: 15px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-1);
	color: var(--text-white);
	border-radius: 50%;
	transition: 0.4s;
	margin-top: -30px;
	margin-bottom: 20px;
}

/* Portfolio Four columns — font-size:30px in 60×60 circle */
.four__columns .portfolio__four-item > a svg {
	width: 60px;
	height: 60px;
	padding: 15px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--primary-color-1);
	color: var(--color-1);
	transition: 0.4s;
}

/* Portfolio details list */
.portfolio__details-area-list li svg {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

/* ================================================================
   Footer
   ================================================================ */

/* Footer One CTA — font-size:50px in 100×100 circle */
.footer__one-cta-icon a svg {
	width: 100px;
	height: 100px;
	padding: 25px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary-color-1);
	color: var(--color-1);
	border-radius: 50%;
	transition: 0.4s;
}
.footer__one-cta-icon a svg:hover {
	transform: rotate(45deg);
}

/* Footer Two social — font-size:15px in 45×45 circle */
.footer__two-widget-about-social ul li a svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	padding: 15px;
	box-sizing: border-box;
	background: var(--color-7);
	border-radius: 50%;
	color: var(--text-white);
	transition: 0.4s;
}
.footer__two-widget-about-social ul li a svg:hover {
	background: var(--primary-color-1);
	color: var(--color-1);
}

/* Footer Two location icon — font-size:20px in 55×55 circle */
.footer__two-widget-location-item-icon svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	padding: 17px;
	box-sizing: border-box;
	border: 1px solid var(--border-color-3);
	border-radius: 50%;
	color: var(--primary-color-1);
}

/* Copyright social — font-size:14px in 45×45 circle */
.copyright__area-social ul li a svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	padding: 15px;
	box-sizing: border-box;
	background: var(--color-7);
	border-radius: 50%;
	color: var(--color-6);
	transition: 0.4s;
}
.copyright__area-social ul li a svg:hover {
	background: var(--primary-color-1);
	color: var(--color-1);
}
.copyright__area.four .copyright__area-social ul li a svg {
	background: #ebe9dd;
	color: var(--text-heading-color);
}
.copyright__area.four .copyright__area-social ul li a svg:hover {
	background: var(--primary-color-1);
	color: var(--color-1);
}

/* ================================================================
   Team
   ================================================================ */

/* Team Three share icon trigger — font-size:16px in 45×45 circle */
.team__three .team__area-item-content-icon span svg {
	width: 16px;
	height: 16px;
}

/* Team Three social — font-size:14px in 45×45 circle */
.team__three .team__area-item-content-social ul li a svg {
	display: inline-flex;
	height: 45px;
	width: 45px;
	padding: 15px;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-2);
	color: var(--text-heading-color);
	transition: 0.4s;
}
.team__three .team__area-item-content-social ul li a svg:hover {
	background: var(--primary-color-1);
}

/* ================================================================
   Testimonial — star rating icons
   ================================================================ */
.testimonial__one-item-reviews svg {
	color: var(--primary-color-1);
	transition: 0.4s;
	margin-right: 4px;
	width: 18px;
	height: 18px;
}

/* ================================================================
   Breadcrumb separator
   ================================================================ */
.breadcrumb__area-content ul li svg {
	color: var(--primary-color-1);
	width: 14px;
	height: 14px;
}

/* ================================================================
   Video play button — font-size:26px in 100×100 circle
   ================================================================ */
.video__area-icon .video a svg,
.video__two-icon .video a svg {
	width: 26px;
	height: 26px;
}

/* ================================================================
   FAQ accordion icon
   ================================================================ */
.faq-item .icon svg {
	width: 18px;
	height: 18px;
}

/* ================================================================
   Scroll top (uses pseudo-element, not affected)
   ================================================================ */

/* ================================================================
   Dark mode overrides
   ================================================================ */
.dark-mode .services__two .services__one-item > svg {
	background: var(--color-7);
}
.dark-mode .header__area-menubar-right-search-icon svg {
	color: var(--text-white);
}
.dark-mode .header__area-menubar-right-sidebar-popup .sidebar-close-btn svg {
	color: var(--text-white);
}
.dark-mode .services__one-item:hover > svg {
	color: var(--primary-color-1);
}
.dark-mode .services__two .services__one-item:hover > svg {
	color: var(--primary-color-1);
}
.dark-mode .copyright__area.four .copyright__area-social ul li a svg {
	background: var(--color-7);
}
.dark-mode .copyright__area.four .copyright__area-social ul li a svg:hover {
	background: var(--primary-color-1);
	color: var(--color-1);
}