.elementor-15162 .elementor-element.elementor-element-310131b0{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15162 .elementor-element.elementor-element-310131b0:not(.elementor-motion-effects-element-type-background), .elementor-15162 .elementor-element.elementor-element-310131b0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #051934 53%, #f2295b 100%);}.elementor-15162 .elementor-element.elementor-element-539c67dc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-15162 .elementor-element.elementor-element-539c67dc.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-15162 .elementor-element.elementor-element-ef6356d img{width:60%;}.elementor-15162 .elementor-element.elementor-element-66a24363{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;}.elementor-15162 .elementor-element.elementor-element-66a24363.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-15162 .elementor-element.elementor-element-1fd59b15 .elementor-icon-box-wrapper{align-items:center;text-align:center;gap:15px;}.elementor-15162 .elementor-element.elementor-element-1fd59b15 .elementor-icon-box-title{margin-block-end:8px;color:#6C76AB;}.elementor-15162 .elementor-element.elementor-element-1fd59b15 .elementor-icon{font-size:45px;}.elementor-15162 .elementor-element.elementor-element-1fd59b15 .elementor-icon-box-title, .elementor-15162 .elementor-element.elementor-element-1fd59b15 .elementor-icon-box-title a{font-size:15px;font-weight:300;line-height:16px;}.elementor-15162 .elementor-element.elementor-element-1fd59b15 .elementor-icon-box-description{font-size:16px;font-weight:300;line-height:16px;color:#FFFFFF;}.elementor-15162 .elementor-element.elementor-element-6ff54b97 .elementor-icon-box-wrapper{align-items:center;text-align:center;gap:15px;}.elementor-15162 .elementor-element.elementor-element-6ff54b97 .elementor-icon-box-title{margin-block-end:8px;color:#6C76AB;}.elementor-15162 .elementor-element.elementor-element-6ff54b97 .elementor-icon{font-size:45px;}.elementor-15162 .elementor-element.elementor-element-6ff54b97 .elementor-icon-box-title, .elementor-15162 .elementor-element.elementor-element-6ff54b97 .elementor-icon-box-title a{font-size:15px;font-weight:300;line-height:16px;}.elementor-15162 .elementor-element.elementor-element-6ff54b97 .elementor-icon-box-description{font-size:16px;font-weight:300;line-height:16px;color:#FFFFFF;}.elementor-15162 .elementor-element.elementor-element-6367fcd9 .elementor-icon-box-wrapper{text-align:center;gap:0px;}.elementor-15162 .elementor-element.elementor-element-6367fcd9 .elementor-icon-box-title{margin-block-end:0px;color:#C8A341;}.elementor-15162 .elementor-element.elementor-element-6367fcd9.elementor-view-stacked .elementor-icon{background-color:#EAB446;fill:#020201;color:#020201;}.elementor-15162 .elementor-element.elementor-element-6367fcd9.elementor-view-framed .elementor-icon, .elementor-15162 .elementor-element.elementor-element-6367fcd9.elementor-view-default .elementor-icon{fill:#EAB446;color:#EAB446;border-color:#EAB446;}.elementor-15162 .elementor-element.elementor-element-6367fcd9.elementor-view-framed .elementor-icon{background-color:#020201;}.elementor-15162 .elementor-element.elementor-element-6367fcd9.elementor-view-stacked:has(:hover) .elementor-icon,
					 .elementor-15162 .elementor-element.elementor-element-6367fcd9.elementor-view-stacked:has(:focus) .elementor-icon{background-color:#FFB73F;}.elementor-15162 .elementor-element.elementor-element-6367fcd9.elementor-view-framed:has(:hover) .elementor-icon,
					 .elementor-15162 .elementor-element.elementor-element-6367fcd9.elementor-view-default:has(:hover) .elementor-icon,
					 .elementor-15162 .elementor-element.elementor-element-6367fcd9.elementor-view-framed:has(:focus) .elementor-icon,
					 .elementor-15162 .elementor-element.elementor-element-6367fcd9.elementor-view-default:has(:focus) .elementor-icon{fill:#FFB73F;color:#FFB73F;border-color:#FFB73F;}.elementor-15162 .elementor-element.elementor-element-6367fcd9 .elementor-icon{font-size:41px;border-radius:20px 20px 20px 20px;}.elementor-15162 .elementor-element.elementor-element-6367fcd9 .elementor-icon i{transform:rotate(0deg);}.elementor-15162 .elementor-element.elementor-element-573c5a4d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:25px;--padding-right:25px;--z-index:9;}.elementor-15162 .elementor-element.elementor-element-266b2129{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--border-radius:0px 0px 15px 15px;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.25);--padding-top:5px;--padding-bottom:5px;--padding-left:15px;--padding-right:15px;}.elementor-15162 .elementor-element.elementor-element-266b2129:not(.elementor-motion-effects-element-type-background), .elementor-15162 .elementor-element.elementor-element-266b2129 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-15162 .elementor-element.elementor-element-1a309963{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--padding-top:5px;--padding-bottom:5px;--padding-left:5px;--padding-right:5px;}.elementor-15162 .elementor-element.elementor-element-1a309963.e-con{--align-self:center;}.elementor-15162 .elementor-element.elementor-element-e223a4b .elementor-menu-toggle{margin:0 auto;}.elementor-15162 .elementor-element.elementor-element-e223a4b .elementor-nav-menu .elementor-item{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-15162 .elementor-element.elementor-element-e223a4b .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-e0633d5 );fill:var( --e-global-color-e0633d5 );}.elementor-15162 .elementor-element.elementor-element-15bbf5f2{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:5px;--padding-bottom:5px;--padding-left:5px;--padding-right:5px;}.elementor-15162 .elementor-element.elementor-element-15bbf5f2.e-con{--align-self:center;}.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-menu-toggle{margin:0 auto;background-color:var( --e-global-color-7c36a07 );}.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-e0633d5 );fill:var( --e-global-color-e0633d5 );}.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--dropdown a, .elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-menu-toggle{color:var( --e-global-color-e0633d5 );}.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--dropdown{background-color:var( --e-global-color-primary );}.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--dropdown a:hover,
					.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--dropdown a.highlighted,
					.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-menu-toggle:hover{color:var( --e-global-color-accent );}.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--dropdown a:hover,
					.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--dropdown a.highlighted{background-color:var( --e-global-color-e0633d5 );}.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--dropdown a.elementor-item-active{color:var( --e-global-color-accent );background-color:var( --e-global-color-e0633d5 );}.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--dropdown .elementor-item, .elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-15162 .elementor-element.elementor-element-7cb3112 div.elementor-menu-toggle{color:var( --e-global-color-primary );}.elementor-15162 .elementor-element.elementor-element-7cb3112 div.elementor-menu-toggle svg{fill:var( --e-global-color-primary );}.elementor-15162 .elementor-element.elementor-element-da1c3a4 .e-off-canvas__overlay{background-color:rgba(0,0,0,.8);}.elementor-15162 .elementor-element.elementor-element-da1c3a4{--e-off-canvas-justify-content:center;--e-off-canvas-align-items:flex-start;--e-off-canvas-width:100vw;--e-off-canvas-height:20%;--e-off-canvas-content-overflow:auto;--e-off-canvas-overlay-opacity:1;}.elementor-15162 .elementor-element.elementor-element-b793e9a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;}.elementor-15162 .elementor-element.elementor-element-0cb6d65 .e-search-submit{background-color:var( --e-global-color-7c36a07 );box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.15);}.elementor-15162 .elementor-element.elementor-element-0cb6d65 .e-search-submit:hover{background-color:var( --e-global-color-03b3f01 );--e-search-submit-color:var( --e-global-color-accent );}.elementor-15162 .elementor-element.elementor-element-0cb6d65 .e-search-input{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );border-style:none;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.15);border-radius:15px 15px 15px 15px;}.elementor-15162 .elementor-element.elementor-element-0cb6d65 .e-search-submit span{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-15162 .elementor-element.elementor-element-0cb6d65{--e-search-submit-color:var( --e-global-color-primary );--e-search-submit-border-radius:15px 15px 15px 15px;}.elementor-15162 .elementor-element.elementor-element-9951196 > .elementor-widget-container{background-color:#FCB900;padding:15px 15px 11px 15px;border-radius:15px 15px 15px 15px;}.elementor-15162 .elementor-element.elementor-element-9951196 .elementor-icon-wrapper{text-align:center;}.elementor-15162 .elementor-element.elementor-element-9951196.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-15162 .elementor-element.elementor-element-9951196.elementor-view-framed .elementor-icon, .elementor-15162 .elementor-element.elementor-element-9951196.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-15162 .elementor-element.elementor-element-9951196.elementor-view-framed .elementor-icon, .elementor-15162 .elementor-element.elementor-element-9951196.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-15162 .elementor-element.elementor-element-9951196 .elementor-icon{font-size:18px;}.elementor-15162 .elementor-element.elementor-element-9951196 .elementor-icon svg{height:18px;}.elementor-15162 .elementor-element.elementor-element-4c3fcf3 > .elementor-widget-container{background-color:#FCB900;padding:15px 15px 11px 15px;border-radius:15px 15px 15px 15px;}.elementor-15162 .elementor-element.elementor-element-4c3fcf3 .elementor-icon-wrapper{text-align:center;}.elementor-15162 .elementor-element.elementor-element-4c3fcf3.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-15162 .elementor-element.elementor-element-4c3fcf3.elementor-view-framed .elementor-icon, .elementor-15162 .elementor-element.elementor-element-4c3fcf3.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-15162 .elementor-element.elementor-element-4c3fcf3.elementor-view-framed .elementor-icon, .elementor-15162 .elementor-element.elementor-element-4c3fcf3.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-15162 .elementor-element.elementor-element-4c3fcf3 .elementor-icon{font-size:18px;}.elementor-15162 .elementor-element.elementor-element-4c3fcf3 .elementor-icon svg{height:18px;}.elementor-15162 .elementor-element.elementor-element-5a9c184 .e-off-canvas__overlay{background-color:rgba(0,0,0,.8);}.elementor-15162 .elementor-element.elementor-element-5a9c184{--e-off-canvas-justify-content:flex-end;--e-off-canvas-align-items:flex-start;--e-off-canvas-width:26%;--e-off-canvas-height:100vh;--e-off-canvas-content-overflow:auto;--e-off-canvas-animation-duration:1.5s;--e-off-canvas-overlay-opacity:1;}.elementor-15162 .elementor-element.elementor-element-db02ffa{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-15162 .elementor-element.elementor-element-e15d915 img{width:52%;}.elementor-15162 .elementor-element.elementor-element-c4a70ec{text-align:center;}.elementor-15162 .elementor-element.elementor-element-c4a70ec .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-15162 .elementor-element.elementor-element-d2d3cf5{text-align:center;font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-15162 .elementor-element.elementor-element-310131b0{--flex-wrap:wrap;}.elementor-15162 .elementor-element.elementor-element-539c67dc{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;}.elementor-15162 .elementor-element.elementor-element-ef6356d{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;}.elementor-15162 .elementor-element.elementor-element-ef6356d img{width:100%;}.elementor-15162 .elementor-element.elementor-element-66a24363{--justify-content:flex-end;}.elementor-15162 .elementor-element.elementor-element-1fd59b15 .elementor-icon-box-wrapper{text-align:center;gap:4px;}.elementor-15162 .elementor-element.elementor-element-1fd59b15 .elementor-icon-box-title{margin-block-end:0px;}.elementor-15162 .elementor-element.elementor-element-1fd59b15 .elementor-icon{font-size:33px;}.elementor-15162 .elementor-element.elementor-element-6ff54b97 .elementor-icon-box-wrapper{gap:0px;}.elementor-15162 .elementor-element.elementor-element-6ff54b97 .elementor-icon-box-title{margin-block-end:0px;}.elementor-15162 .elementor-element.elementor-element-6ff54b97 .elementor-icon{font-size:33px;}.elementor-15162 .elementor-element.elementor-element-6367fcd9{width:var( --container-widget-width, 24% );max-width:24%;--container-widget-width:24%;--container-widget-flex-grow:0;}.elementor-15162 .elementor-element.elementor-element-e223a4b .elementor-nav-menu .elementor-item{font-size:14px;}.elementor-15162 .elementor-element.elementor-element-e223a4b .elementor-nav-menu--main .elementor-item{padding-left:6px;padding-right:6px;}.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-nav-menu--main .elementor-item{padding-left:6px;padding-right:6px;}}@media(max-width:767px){.elementor-15162 .elementor-element.elementor-element-539c67dc{--width:35%;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-15162 .elementor-element.elementor-element-ef6356d{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-15162 .elementor-element.elementor-element-66a24363{--width:65%;}.elementor-15162 .elementor-element.elementor-element-6367fcd9{--container-widget-width:52%;--container-widget-flex-grow:0;width:var( --container-widget-width, 52% );max-width:52%;}.elementor-15162 .elementor-element.elementor-element-573c5a4d{--min-height:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15162 .elementor-element.elementor-element-266b2129{--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15162 .elementor-element.elementor-element-1a309963{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15162 .elementor-element.elementor-element-15bbf5f2{--justify-content:center;--padding-top:5px;--padding-bottom:5px;--padding-left:5px;--padding-right:5px;}.elementor-15162 .elementor-element.elementor-element-15bbf5f2.e-con{--align-self:center;}.elementor-15162 .elementor-element.elementor-element-7cb3112{--nav-menu-icon-size:33px;}.elementor-15162 .elementor-element.elementor-element-7cb3112 .elementor-menu-toggle{border-radius:15px;}.elementor-15162 .elementor-element.elementor-element-5a9c184{--e-off-canvas-width:50%;}}@media(min-width:768px){.elementor-15162 .elementor-element.elementor-element-310131b0{--content-width:1320px;}.elementor-15162 .elementor-element.elementor-element-539c67dc{--width:17%;}.elementor-15162 .elementor-element.elementor-element-66a24363{--width:80%;}.elementor-15162 .elementor-element.elementor-element-573c5a4d{--content-width:1320px;}.elementor-15162 .elementor-element.elementor-element-1a309963{--width:80%;}.elementor-15162 .elementor-element.elementor-element-15bbf5f2{--width:20%;}}@media(max-width:1024px) and (min-width:768px){.elementor-15162 .elementor-element.elementor-element-539c67dc{--width:20%;}.elementor-15162 .elementor-element.elementor-element-66a24363{--width:80%;}}/* Start custom CSS for icon-box, class: .elementor-element-6367fcd9 */<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>آیکن فروشگاه سه‌بعدی با حرکت ماوس</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
            perspective: 1000px; /* برای ایجاد اثر سه‌بعدی */
        }

        .shop-icon {
            width: 100px;
            height: 100px;
            background-color: #4CAF50; /* رنگ بدنه */
            position: relative;
            transform-style: preserve-3d; /* نگه داشتن یا حفظ 3D */
            transition: transform 0.1s; /* انیمیشن چرخش */
        }

        .roof {
            position: absolute;
            top: -30px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 30px solid #FF5722; /* رنگ سقف */
        }

        .door {
            position: absolute;
            bottom: 10px;
            left: 35px;
            width: 30px;
            height: 40px;
            background-color: #795548; /* رنگ درب */
            border-radius: 5px; /* گرد کردن گوشه‌های درب */
        }

        /* سایه برای اثر عمق */
        .shop-icon:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 10px;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
        }
    </style>
</head>
<body>

<div class="shop-icon" id="shopIcon">
    <div class="roof"></div>
    <div class="door"></div>
</div>

<script>
    const shopIcon = document.getElementById('shopIcon');

    document.addEventListener('mousemove', (event) => {
        const x = event.clientX / window.innerWidth;
        const y = event.clientY / window.innerHeight;

        const rotateY = (x - 0.5) * 30; // تغییر چرخش در محور Y
        const rotateX = (y - 0.5) * -30; // تغییر چرخش در محور X

        shopIcon.style.transform = `rotateY(${rotateY}deg) rotateX(${rotateX}deg)`;
    });
</script>

</body>
</html>/* End custom CSS */