:root { --primary: #7DCFB6; --secondPrimary: #1D4E89; --textColor: #707070; --secondTextColor: #4D4D4D; --defaultColor: #FFFFFF; --bgBtnColor: #F79256; --mainFont: 'iranianSans'; --mainBoldFont: 'iranSansBold'; --txtSize: 15pt; --btnTextSize: 12pt; --transition: all ease-in-out 0.3s; /* --boxShadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */ --boxShadow: rgba(99, 99, 99, 0.2) 0px 31px 49px -8px; /* rgbaColor */ --grdOrange: linear-gradient(90deg, rgba(252, 220, 184, 1) 0%, rgba(254, 247, 238, 1) 100%); --mainGrd: linear-gradient(90deg, rgba(21, 103, 153, 1) 56%, rgba(14, 132, 172, 1) 100%); --hardOrange: linear-gradient(90deg, rgba(249, 178, 125, 1) 0%, rgba(249, 174, 120, 1) 100%); --greenGrd: linear-gradient(90deg, rgba(125, 207, 182, 1) 0%, rgba(55, 191, 193, 1) 100%); --lightBlueGrd: linear-gradient(90deg, rgba(125, 207, 182, 1) 20%, rgba(8, 180, 201, 1) 100%); --softGreenGrd: linear-gradient(90deg, rgba(237, 248, 245, 1) 0%, rgba(180, 227, 213, 1) 100%); --hardBlueGrd: linear-gradient(90deg, rgba(22, 103, 154, 1) 0%, rgba(0, 178, 202, 1) 100%); } @font-face { font-family: "iranianSans"; src: url('../fonts/main/Iranian\ Sans.ttf'); } @font-face { font-family: 'iranSansBold'; src: url('../fonts/main/irsansb.ttf'); } .container { display: flow-root; width: 100%; max-width: 1240px; margin: 0 auto; box-sizing: border-box; } /*default*/ body { direction: rtl; margin: 0; font-family: var(--mainFont); overflow-x: unset; background-color: var(--defaultColor); } a { text-decoration: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; } input { border: unset; } .right { text-align: right !important; /* float: right !important; */ justify-content: right !important; } /* icons */ .icon::before { content: ''; display: inline-block; width: 20px; height: 20px; background-color: var(--defaultColor); vertical-align: middle; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .icon.triAngleIcon::before { background: var(--grdOrange); -webkit-mask-image: url('../icons/triangleIcon.svg'); rotate: -90deg; } .locationIcon::before { -webkit-mask-image: url('../icons/location.svg'); } .telegramIcon::before { -webkit-mask-image: url('../icons/telegramIcon.svg') } .whatsAppIcon::before { -webkit-mask-image: url('../icons/whatsApp.svg') } .instagramIcon::before { -webkit-mask-image: url('../icons/instagram.svg') } /* card */ .card { display: flex; flex-direction: column; justify-content: center; position: relative; background-color: var(--defaultColor); box-shadow: var(--boxShadow); color: var(--secondTextColor); width: 230px; height: 200px; gap: 12px; padding: 25px; border-radius: 30px; z-index: 30; } .card .head { display: flex; flex-direction: column; gap: 14px; } .cardLogo { width: 56px; height: 56px; margin: 0 auto; } .cardLogo img { width: 100%; height: 100%; object-fit: cover; } .card .head h1 { font-family: var(--mainBoldFont); text-align: center; font-weight: normal; font-size: 14pt; } .card .content { font-size: 11pt; line-height: 1.5; text-align: justify; } /* minimizeTxt */ .minimize { display: -webkit-box; height: max-content; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .minimize.first { -webkit-line-clamp: 1; } .minimize.seconde { -webkit-line-clamp: 2; } .minimize.third { -webkit-line-clamp: 3; } .minimize.forth { -webkit-line-clamp: 4; } .minimize.fifth { -webkit-line-clamp: 5; } /* slickSettings */ .slick-track { /* display: grid !important; */ /* align-items: center !important; */ /* justify-content: space-between !important; */ /* grid-template-columns: repeat(4, 1fr); */ width: 100% !important; margin: 60px 0 70px; } .slick-slide { display: flex !important; justify-content: center !important; margin-bottom: 20px; } .slick-track:before, .slick-track:after { display: flow-root !important; width: 25px; height: 25px; position: absolute; cursor: pointer; -webkit-mask-image: url('../icons/triangleIcon.svg'); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; background: var(--softGreenGrd) } .slick-track:before { left: 0; top: 90px; rotate: -90deg; } .slick-track::after { right: 0; top: 90px; rotate: 90deg; } /* inputStyles */ .input { display: flow-root; box-shadow: var(--boxShadow); border-radius: 20px; } .input input, .textArea { width: 100%; border-radius: 15px; box-sizing: border-box; overflow: hidden; border: 1px solid transparent; outline: none; transition: var(--transition); } .input input { padding: 0 10px; height: 40px; } input:focus, textarea:focus { border-color: var(--primary) !important; transition: var(--transition); } input::placeholder, textarea::placeholder { font-family: var(--mainFont); color: #DBDBDB; } textarea { display: flex; width: 100%; min-height: 158px; padding: 10px; border-radius: 15px; transition: var(--transition); resize: none; box-sizing: border-box; border: 1px solid transparent; outline: none; } [aligns='left'] { text-align: left; } [aligns='right'] { text-align: right; } /* widths */ .w33 { width: calc(33% - 10px); } .w50 { width: calc(50% - 10px); } .w66 { width: calc(66% - 10px); } .w75 { width: calc(75% - 10p); } .w100 { width: calc(100% - 10px); } /* btn */ button { outline: unset; } .btn { display: flex; width: max-content; height: max-content; border: unset; align-items: center; cursor: pointer; color: var(--defaultColor); background-color: var(--primary); font-family: var(--mainFont); padding: 10px; border-radius: 20px; font-size: 10pt; }