/*-------------------------------------------------------------- ## TABLE OF CONTENTS: ---------------------------------------------------------------- 01. Variables 02. Typography 03. Preloader 04. Spacing 05. General 06. Slider 07. Video Modal 08. Header 09. Footer 10. Hero 11. Iconbox 12. Posts 13. CTA 14. Testimonial 15. Team 16. Pricing 17. Card 18. About 19. Why Chose Us 20. Tabs 21. Contact 21. Before After --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## 1. All Color Variable ----------------------------------------------------------------*/ @import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Roboto:wght@400;500;700&display=swap"); :root { --white-color: #fff; --black-color: #010f34; --heading-color: #01133c; --body-color: #666666; --ternary-color: #88a5ad; --accent-color: #ef0f3a; --gray-color: #f5f7fa; --gray2-color: #e8ebee; --border-color: #ecf1f5; --heading-font: "Archivo", sans-serif; --body-font: "Roboto", sans-serif; } /*-------------------------------------------------------------- 2. Typography ----------------------------------------------------------------*/ /* Google Fonts */ body, html { color: var(--body-color); font-family: var(--body-font); font-size: 16px; line-height: 1.62em; font-weight: 400; overflow-x: clip; } h1, h2, h3, h4, h5, h6 { clear: both; color: var(--heading-color); padding: 0; margin: 0 0 20px 0; font-weight: 700; line-height: 1.2em; font-family: var(--heading-font); } .cs_heading_font { font-family: var(--heading-font); } .cs_body_font { font-family: var(--body-font); } h1 { font-size: 56px; } h2 { font-size: 42px; } h3 { font-size: 30px; } h4 { font-size: 24px; } h5 { font-size: 18px; } h6 { font-size: 16px; } p { margin-bottom: 15px; } ul { margin: 0 0 25px 0; padding-left: 20px; list-style: square outside none; } ol { padding-left: 20px; margin-bottom: 25px; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 15px; font-style: italic; font-size: 20px; line-height: 1.6em; margin: 0; } address { margin: 0 0 15px; } img { border: 0; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } button { color: inherit; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } a:hover { text-decoration: none; color: var(--accent-color); } table { width: 100%; margin-bottom: 25px; } table th { font-weight: 600; color: var(--body-color); } table td, table th { border-top: 1px solid var(--border-color); padding: 11px 10px; } dl { margin-bottom: 25px; } dl dt { font-weight: 600; } b, strong { font-weight: bold; } pre { color: var(--body-color); border: 1px solid var(--border-color); font-size: 18px; padding: 25px; border-radius: 5px; } kbd { font-size: 100%; background-color: var(--body-color); border-radius: 5px; } input, textarea { color: var(--heading-color); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } /*-------------------------------------------------------------- 3. Preloader ----------------------------------------------------------------*/ #preloader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999; -webkit-transition: all 1s ease; transition: all 1s ease; } #preloader.hide { opacity: 0; visibility: hidden; width: 0%; } #preloader .preloader-inner { position: absolute; z-index: 100; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #preloader .spinner { position: relative; width: 100%; max-width: 169px; height: 145px; margin: 0 auto 30px auto; } #preloader .spinner img:first-child { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; opacity: 0.2; } #preloader .spinner img.wheel { width: 50px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); -webkit-animation: spinner 4s infinite linear; animation: spinner 4s infinite linear; } #preloader .loading-text { -webkit-animation: scale1 4s infinite linear; animation: scale1 4s infinite linear; } /* Animation of the preloader */ @-webkit-keyframes spinner { to { -webkit-transform: translate(-50%, -50%) rotateZ(360deg); transform: translate(-50%, -50%) rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: translate(-50%, -50%) rotateZ(360deg); transform: translate(-50%, -50%) rotateZ(360deg); } } @-webkit-keyframes scale1 { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale1 { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } 100% { -webkit-transform: scale(1); transform: scale(1); } } /*-------------------------------------------------------------- 4. Spacing ----------------------------------------------------------------*/ .cs_mb_1 { margin-bottom: 1px; } .cs_mb_2 { margin-bottom: 2px; } .cs_mb_3 { margin-bottom: 3px; } .cs_mb_4 { margin-bottom: 4px; } .cs_mb_5 { margin-bottom: 5px; } .cs_mb_6 { margin-bottom: 6px; } .cs_mb_7 { margin-bottom: 7px; } .cs_mb_8 { margin-bottom: 8px; } .cs_mb_9 { margin-bottom: 9px; } .cs_mb_10 { margin-bottom: 10px; } .cs_mb_11 { margin-bottom: 11px; } .cs_mb_12 { margin-bottom: 12px; } .cs_mb_13 { margin-bottom: 13px; } .cs_mb_14 { margin-bottom: 14px; } .cs_mb_15 { margin-bottom: 15px; } .cs_mb_16 { margin-bottom: 16px; } .cs_mb_17 { margin-bottom: 17px; } .cs_mb_18 { margin-bottom: 18px; } .cs_mb_19 { margin-bottom: 19px; } .cs_mb_20 { margin-bottom: 20px; } .cs_mb_21 { margin-bottom: 21px; } .cs_mb_22 { margin-bottom: 22px; } .cs_mb_23 { margin-bottom: 23px; } .cs_mb_24 { margin-bottom: 24px; } .cs_mb_25 { margin-bottom: 25px; } .cs_mb_26 { margin-bottom: 26px; } .cs_mb_27 { margin-bottom: 27px; } .cs_mb_28 { margin-bottom: 28px; } .cs_mb_29 { margin-bottom: 29px; } .cs_mb_30 { margin-bottom: 30px; } .cs_mb_31 { margin-bottom: 31px; } .cs_mb_32 { margin-bottom: 32px; } .cs_mb_33 { margin-bottom: 33px; } .cs_mb_34 { margin-bottom: 34px; } .cs_mb_35 { margin-bottom: 35px; } .cs_mb_36 { margin-bottom: 36px; } .cs_mb_37 { margin-bottom: 37px; } .cs_mb_38 { margin-bottom: 38px; } .cs_mb_39 { margin-bottom: 39px; } .cs_mb_40 { margin-bottom: 40px; } .cs_mb_41 { margin-bottom: 41px; } .cs_mb_42 { margin-bottom: 42px; } .cs_mb_43 { margin-bottom: 43px; } .cs_mb_44 { margin-bottom: 44px; } .cs_mb_45 { margin-bottom: 45px; } .cs_mb_46 { margin-bottom: 46px; } .cs_mb_47 { margin-bottom: 47px; } .cs_mb_48 { margin-bottom: 48px; } .cs_mb_49 { margin-bottom: 49px; } .cs_mb_50 { margin-bottom: 50px; } .cs_mb_51 { margin-bottom: 51px; } .cs_mb_52 { margin-bottom: 52px; } .cs_mb_53 { margin-bottom: 53px; } .cs_mb_54 { margin-bottom: 54px; } .cs_mb_55 { margin-bottom: 55px; } .cs_mb_56 { margin-bottom: 56px; } .cs_mb_57 { margin-bottom: 57px; } .cs_mb_58 { margin-bottom: 58px; } .cs_mb_59 { margin-bottom: 59px; } .cs_mb_60 { margin-bottom: 60px; } .cs_mb_61 { margin-bottom: 61px; } .cs_mb_62 { margin-bottom: 62px; } .cs_mb_63 { margin-bottom: 63px; } .cs_mb_64 { margin-bottom: 64px; } .cs_mb_65 { margin-bottom: 65px; } .cs_mb_66 { margin-bottom: 66px; } .cs_mb_67 { margin-bottom: 67px; } .cs_mb_68 { margin-bottom: 68px; } .cs_mb_69 { margin-bottom: 69px; } .cs_mb_70 { margin-bottom: 70px; } @media screen and (min-width: 992px) { .cs_height_1 { height: 1px; } .cs_height_2 { height: 2px; } .cs_height_3 { height: 3px; } .cs_height_4 { height: 4px; } .cs_height_5 { height: 5px; } .cs_height_6 { height: 6px; } .cs_height_7 { height: 7px; } .cs_height_8 { height: 8px; } .cs_height_9 { height: 9px; } .cs_height_10 { height: 10px; } .cs_height_11 { height: 11px; } .cs_height_12 { height: 12px; } .cs_height_13 { height: 13px; } .cs_height_14 { height: 14px; } .cs_height_15 { height: 15px; } .cs_height_16 { height: 16px; } .cs_height_17 { height: 17px; } .cs_height_18 { height: 18px; } .cs_height_19 { height: 19px; } .cs_height_20 { height: 20px; } .cs_height_21 { height: 21px; } .cs_height_22 { height: 22px; } .cs_height_23 { height: 23px; } .cs_height_24 { height: 24px; } .cs_height_25 { height: 25px; } .cs_height_26 { height: 26px; } .cs_height_27 { height: 27px; } .cs_height_28 { height: 28px; } .cs_height_29 { height: 29px; } .cs_height_30 { height: 30px; } .cs_height_31 { height: 31px; } .cs_height_32 { height: 32px; } .cs_height_33 { height: 33px; } .cs_height_34 { height: 34px; } .cs_height_35 { height: 35px; } .cs_height_36 { height: 36px; } .cs_height_37 { height: 37px; } .cs_height_38 { height: 38px; } .cs_height_39 { height: 39px; } .cs_height_40 { height: 40px; } .cs_height_41 { height: 41px; } .cs_height_42 { height: 42px; } .cs_height_43 { height: 43px; } .cs_height_44 { height: 44px; } .cs_height_45 { height: 45px; } .cs_height_46 { height: 46px; } .cs_height_47 { height: 47px; } .cs_height_48 { height: 48px; } .cs_height_49 { height: 49px; } .cs_height_50 { height: 50px; } .cs_height_51 { height: 51px; } .cs_height_52 { height: 52px; } .cs_height_53 { height: 53px; } .cs_height_54 { height: 54px; } .cs_height_55 { height: 55px; } .cs_height_56 { height: 56px; } .cs_height_57 { height: 57px; } .cs_height_58 { height: 58px; } .cs_height_59 { height: 59px; } .cs_height_60 { height: 60px; } .cs_height_61 { height: 61px; } .cs_height_62 { height: 62px; } .cs_height_63 { height: 63px; } .cs_height_64 { height: 64px; } .cs_height_65 { height: 65px; } .cs_height_66 { height: 66px; } .cs_height_67 { height: 67px; } .cs_height_68 { height: 68px; } .cs_height_69 { height: 69px; } .cs_height_70 { height: 70px; } .cs_height_71 { height: 71px; } .cs_height_72 { height: 72px; } .cs_height_73 { height: 73px; } .cs_height_74 { height: 74px; } .cs_height_75 { height: 75px; } .cs_height_76 { height: 76px; } .cs_height_77 { height: 77px; } .cs_height_78 { height: 78px; } .cs_height_79 { height: 79px; } .cs_height_80 { height: 80px; } .cs_height_81 { height: 81px; } .cs_height_82 { height: 82px; } .cs_height_83 { height: 83px; } .cs_height_84 { height: 84px; } .cs_height_85 { height: 85px; } .cs_height_86 { height: 86px; } .cs_height_87 { height: 87px; } .cs_height_88 { height: 88px; } .cs_height_89 { height: 89px; } .cs_height_90 { height: 90px; } .cs_height_91 { height: 91px; } .cs_height_92 { height: 92px; } .cs_height_93 { height: 93px; } .cs_height_94 { height: 94px; } .cs_height_95 { height: 95px; } .cs_height_96 { height: 96px; } .cs_height_97 { height: 97px; } .cs_height_98 { height: 98px; } .cs_height_99 { height: 99px; } .cs_height_100 { height: 100px; } .cs_height_101 { height: 101px; } .cs_height_102 { height: 102px; } .cs_height_103 { height: 103px; } .cs_height_104 { height: 104px; } .cs_height_105 { height: 105px; } .cs_height_106 { height: 106px; } .cs_height_107 { height: 107px; } .cs_height_108 { height: 108px; } .cs_height_109 { height: 109px; } .cs_height_110 { height: 110px; } .cs_height_111 { height: 111px; } .cs_height_112 { height: 112px; } .cs_height_113 { height: 113px; } .cs_height_114 { height: 114px; } .cs_height_115 { height: 115px; } .cs_height_116 { height: 116px; } .cs_height_117 { height: 117px; } .cs_height_118 { height: 118px; } .cs_height_119 { height: 119px; } .cs_height_120 { height: 120px; } .cs_height_121 { height: 121px; } .cs_height_122 { height: 122px; } .cs_height_123 { height: 123px; } .cs_height_124 { height: 124px; } .cs_height_125 { height: 125px; } .cs_height_126 { height: 126px; } .cs_height_127 { height: 127px; } .cs_height_128 { height: 128px; } .cs_height_129 { height: 129px; } .cs_height_130 { height: 130px; } .cs_height_131 { height: 131px; } .cs_height_132 { height: 132px; } .cs_height_133 { height: 133px; } .cs_height_134 { height: 134px; } .cs_height_135 { height: 135px; } .cs_height_136 { height: 136px; } .cs_height_137 { height: 137px; } .cs_height_138 { height: 138px; } .cs_height_139 { height: 139px; } .cs_height_140 { height: 140px; } .cs_height_141 { height: 141px; } .cs_height_142 { height: 142px; } .cs_height_143 { height: 143px; } .cs_height_144 { height: 144px; } .cs_height_145 { height: 145px; } .cs_height_146 { height: 146px; } .cs_height_147 { height: 147px; } .cs_height_148 { height: 148px; } .cs_height_149 { height: 149px; } .cs_height_150 { height: 150px; } } @media screen and (max-width: 991px) { .cs_height_lg_1 { height: 1px; } .cs_height_lg_2 { height: 2px; } .cs_height_lg_3 { height: 3px; } .cs_height_lg_4 { height: 4px; } .cs_height_lg_5 { height: 5px; } .cs_height_lg_6 { height: 6px; } .cs_height_lg_7 { height: 7px; } .cs_height_lg_8 { height: 8px; } .cs_height_lg_9 { height: 9px; } .cs_height_lg_10 { height: 10px; } .cs_height_lg_11 { height: 11px; } .cs_height_lg_12 { height: 12px; } .cs_height_lg_13 { height: 13px; } .cs_height_lg_14 { height: 14px; } .cs_height_lg_15 { height: 15px; } .cs_height_lg_16 { height: 16px; } .cs_height_lg_17 { height: 17px; } .cs_height_lg_18 { height: 18px; } .cs_height_lg_19 { height: 19px; } .cs_height_lg_20 { height: 20px; } .cs_height_lg_21 { height: 21px; } .cs_height_lg_22 { height: 22px; } .cs_height_lg_23 { height: 23px; } .cs_height_lg_24 { height: 24px; } .cs_height_lg_25 { height: 25px; } .cs_height_lg_26 { height: 26px; } .cs_height_lg_27 { height: 27px; } .cs_height_lg_28 { height: 28px; } .cs_height_lg_29 { height: 29px; } .cs_height_lg_30 { height: 30px; } .cs_height_lg_31 { height: 31px; } .cs_height_lg_32 { height: 32px; } .cs_height_lg_33 { height: 33px; } .cs_height_lg_34 { height: 34px; } .cs_height_lg_35 { height: 35px; } .cs_height_lg_36 { height: 36px; } .cs_height_lg_37 { height: 37px; } .cs_height_lg_38 { height: 38px; } .cs_height_lg_39 { height: 39px; } .cs_height_lg_40 { height: 40px; } .cs_height_lg_41 { height: 41px; } .cs_height_lg_42 { height: 42px; } .cs_height_lg_43 { height: 43px; } .cs_height_lg_44 { height: 44px; } .cs_height_lg_45 { height: 45px; } .cs_height_lg_46 { height: 46px; } .cs_height_lg_47 { height: 47px; } .cs_height_lg_48 { height: 48px; } .cs_height_lg_49 { height: 49px; } .cs_height_lg_50 { height: 50px; } .cs_height_lg_51 { height: 51px; } .cs_height_lg_52 { height: 52px; } .cs_height_lg_53 { height: 53px; } .cs_height_lg_54 { height: 54px; } .cs_height_lg_55 { height: 55px; } .cs_height_lg_56 { height: 56px; } .cs_height_lg_57 { height: 57px; } .cs_height_lg_58 { height: 58px; } .cs_height_lg_59 { height: 59px; } .cs_height_lg_60 { height: 60px; } .cs_height_lg_61 { height: 61px; } .cs_height_lg_62 { height: 62px; } .cs_height_lg_63 { height: 63px; } .cs_height_lg_64 { height: 64px; } .cs_height_lg_65 { height: 65px; } .cs_height_lg_66 { height: 66px; } .cs_height_lg_67 { height: 67px; } .cs_height_lg_68 { height: 68px; } .cs_height_lg_69 { height: 69px; } .cs_height_lg_70 { height: 70px; } .cs_height_lg_71 { height: 71px; } .cs_height_lg_72 { height: 72px; } .cs_height_lg_73 { height: 73px; } .cs_height_lg_74 { height: 74px; } .cs_height_lg_75 { height: 75px; } .cs_height_lg_76 { height: 76px; } .cs_height_lg_77 { height: 77px; } .cs_height_lg_78 { height: 78px; } .cs_height_lg_79 { height: 79px; } .cs_height_lg_80 { height: 80px; } .cs_height_lg_81 { height: 81px; } .cs_height_lg_82 { height: 82px; } .cs_height_lg_83 { height: 83px; } .cs_height_lg_84 { height: 84px; } .cs_height_lg_85 { height: 85px; } .cs_height_lg_86 { height: 86px; } .cs_height_lg_87 { height: 87px; } .cs_height_lg_88 { height: 88px; } .cs_height_lg_89 { height: 89px; } .cs_height_lg_90 { height: 90px; } .cs_height_lg_91 { height: 91px; } .cs_height_lg_92 { height: 92px; } .cs_height_lg_93 { height: 93px; } .cs_height_lg_94 { height: 94px; } .cs_height_lg_95 { height: 95px; } .cs_height_lg_96 { height: 96px; } .cs_height_lg_97 { height: 97px; } .cs_height_lg_98 { height: 98px; } .cs_height_lg_99 { height: 99px; } .cs_height_lg_100 { height: 100px; } .cs_height_lg_101 { height: 101px; } .cs_height_lg_102 { height: 102px; } .cs_height_lg_103 { height: 103px; } .cs_height_lg_104 { height: 104px; } .cs_height_lg_105 { height: 105px; } .cs_height_lg_106 { height: 106px; } .cs_height_lg_107 { height: 107px; } .cs_height_lg_108 { height: 108px; } .cs_height_lg_109 { height: 109px; } .cs_height_lg_110 { height: 110px; } } /*-------------------------------------------------------------- 5. General ----------------------------------------------------------------*/ .cs_fs_12 { font-size: 12px; line-height: 2em; } .cs_fs_14 { font-size: 14px; line-height: 1.714em; } .cs_fs_16 { font-size: 16px; line-height: 1.625em; } .cs_fs_18 { font-size: 18px; line-height: 1.556em; } .cs_fs_20 { font-size: 20px; line-height: 1.5em; } @media (max-width: 991px) { .cs_fs_20 { font-size: 18px; } } .cs_fs_24 { font-size: 24px; line-height: 1.417em; } @media (max-width: 991px) { .cs_fs_24 { font-size: 22px; } } .cs_fs_30 { font-size: 30px; line-height: 1.333em; } @media (max-width: 991px) { .cs_fs_30 { font-size: 26px; } } .cs_fs_36 { font-size: 36px; line-height: 1.278em; } @media (max-width: 991px) { .cs_fs_36 { font-size: 30px; } } .cs_fs_45 { font-size: 45px; line-height: 1.208em; } @media (max-width: 991px) { .cs_fs_45 { font-size: 38px; } } .cs_fs_50 { font-size: 50px; line-height: 1.208em; } @media (max-width: 991px) { .cs_fs_50 { font-size: 38px; } } .cs_fs_56 { font-size: 56px; line-height: 1.208em; } @media (max-width: 991px) { .cs_fs_56 { font-size: 38px; } } .cs_fs_64 { font-size: 64px; line-height: 1.156em; } @media (max-width: 991px) { .cs_fs_64 { font-size: 50px; } } .cs_fs_70 { font-size: 70px; line-height: 1.143em; } @media (max-width: 991px) { .cs_fs_70 { font-size: 56px; } } @media (max-width: 575px) { .cs_fs_70 { font-size: 48px; } } .cs_fs_100 { font-size: 100px; line-height: 1em; } @media (max-width: 991px) { .cs_fs_100 { font-size: 75px; } } @media (max-width: 575px) { .cs_fs_100 { font-size: 56px; } } .cs_light { font-weight: 300; } .cs_normal { font-weight: 400; } .cs_medium { font-weight: 500; } .cs_semibold { font-weight: 600; } .cs_bold { font-weight: 700; } .cs_extra_bold { font-weight: 800; } .cs_black { font-weight: 900; } .cs_radius_3 { border-radius: 3px; } .cs_radius_5 { border-radius: 5px; } .cs_radius_7 { border-radius: 7px; } .cs_radius_10 { border-radius: 10px; } .cs_radius_15 { border-radius: 15px; } .cs_radius_25 { border-radius: 25px; } .cs_radius_35 { border-radius: 35px; } .cs_radius_50 { border-radius: 50%; } .cs_mp_0 { list-style: none; margin: 0; padding: 0; } .container-fluid { width: 100%; max-width: 1920px; margin: 0 auto; } @media (max-width: 1200px) { .container-fluid { padding: 0 15px !important; } } .cs_row_gap_30 { margin-left: -15px; margin-right: -15px; } .cs_row_gap_30 > * { padding-left: 15px; padding-right: 15px; } @media (min-width: 1401px) { .cs_row_gap_40 { margin-left: -20px; margin-right: -20px; } .cs_row_gap_40 > * { padding-left: 20px; padding-right: 20px; } } .cs_row_gap_60 { margin-left: -30px; margin-right: -30px; } .cs_row_gap_60 > * { padding-left: 30px; padding-right: 30px; } .cs_row_gap_80 { margin-left: -40px; margin-right: -40px; } .cs_row_gap_80 > * { padding-left: 40px; padding-right: 40px; } .cs_gap_y_30 { gap: 30px 0; } .cs_gap_y_40 { gap: 40px 0; } .cs_gap_y_50 { gap: 50px 0; } .cs_gap_y_60 { gap: 60px 0; } .cs_bg_filed { background-size: cover; background-repeat: no-repeat; background-position: center; } .cs_center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .cs_white_color { color: var(--white-color); } .cs_heading_color { color: var(--heading-color); } .cs_body_color { color: var(--body-color); } .cs_accent_color { color: var(--accent-color); } .cs_white_bg { background-color: var(--white-color); } .cs_heading_bg { background-color: var(--heading-color); } .cs_secondary_bg { background-color: var(--body-color); } .cs_gray_bg { background-color: var(--gray-color); } .cs_accent_bg { background-color: var(--accent-color); } .cs_accent_bg_light { background: rgba(239, 15, 58, 0.06); } .cs_half_screen_right { height: 100%; width: 50vw; margin-left: -12px; } @media (max-width: 991px) { .cs_half_screen_right { width: 100%; margin-left: 0; } } .cs_full_screen_right { width: calc(50vw + 650px); } .cs_half_screen_thumbnail { height: 100%; width: 100%; min-height: 820px; } @media (max-width: 1400px) { .cs_half_screen_thumbnail { min-height: 600px; } } @media (max-width: 1199px) { .cs_half_screen_thumbnail { min-height: 500px; } } @media (max-width: 767px) { .cs_half_screen_thumbnail { min-height: 450px; } } @media (max-width: 575px) { .cs_half_screen_thumbnail { min-height: 380px; } } @media (max-width: 420px) { .cs_half_screen_thumbnail { min-height: 260px; } } .cs_btn.cs_style_1 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-transform: uppercase; font-weight: 700; text-transform: uppercase; color: var(--white-color); gap: 10px; border: 1px solid var(--accent-color); padding: 12px 30px; line-height: 1.714em; background-color: var(--accent-color); position: relative; } @media (max-width: 991px) { .cs_btn.cs_style_1 { padding: 8px 20px; } } .cs_btn.cs_style_1::before { content: ""; position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-color: var(--heading-color); opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_btn.cs_style_1 > * { position: relative; z-index: 1; } .cs_btn.cs_style_1 i { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .cs_btn.cs_style_1:hover { background-color: var(--accent-color); color: var(--white-color); } .cs_btn.cs_style_1:hover i { -webkit-transform: rotate(-405deg) scale(1.4); transform: rotate(-405deg) scale(1.4); } .cs_btn.cs_style_1:hover::before { opacity: 0.2; } .cs_player_btn { position: relative; z-index: 10; width: 55px; height: 55px; border-radius: 50%; padding: 0 0 0 3px; color: var(--white-color); } .cs_player_btn:before, .cs_player_btn:after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; width: 100%; height: 100%; background-color: var(--accent-color); border-radius: 50%; } .cs_player_btn:before { z-index: 0; -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; } .cs_player_btn:after { z-index: 1; -webkit-transition: all 200ms; transition: all 200ms; } .cs_player_btn span { display: block; position: relative; z-index: 3; width: 0; height: 0; border-left: 15px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .cs_text_btn.cs_style_1 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .cs_text_btn.cs_style_1 .cs_btn_icon { width: 18px; height: 18px; -webkit-box-flex: 0; -ms-flex: none; flex: none; overflow: hidden; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .cs_text_btn.cs_style_1 .cs_btn_icon i { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_text_btn.cs_style_1 .cs_btn_icon i:nth-child(1) { -webkit-transform: translateX(-15px); transform: translateX(-15px); } .cs_text_btn.cs_style_1 .cs_btn_icon i:nth-child(2) { -webkit-transform: translateX(-7px); transform: translateX(-7px); } .cs_text_btn.cs_style_1:hover .cs_btn_icon i:nth-child(1) { -webkit-transform: translateX(7px); transform: translateX(7px); } .cs_text_btn.cs_style_1:hover .cs_btn_icon i:nth-child(2) { -webkit-transform: translateX(10px); transform: translateX(10px); } .cs_social_btns.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 13px; } .cs_social_btns.cs_style_1 a { width: 26px; height: 26px; font-size: 11px; border: 1px solid; border-color: var(--body-color); } .cs_social_btns.cs_style_1 a:hover { background-color: var(--accent-color); color: var(--white-color); border-color: var(--accent-color); } .cs_scroll_top_btn { width: 50px; height: 50px; position: fixed; right: 20px; bottom: 30px; cursor: pointer; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .cs_scroll_top_btn::before { content: ""; width: 90%; height: 90%; background-color: var(--heading-color); border-radius: inherit; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: scallup 3500ms cubic-bezier(0.18, 2, 0.55, -0.11) infinite; animation: scallup 3500ms cubic-bezier(0.18, 2, 0.55, -0.11) infinite; } .cs_scroll_top_btn > * { position: relative; z-index: 1; } .cs_scroll_top_btn.active { -webkit-transform: scale(1); transform: scale(1); } .cs_section_heading svg { -webkit-animation: spinAnimation 7s linear infinite; animation: spinAnimation 7s linear infinite; } .cs_page_heading { height: 370px; } .cs_page_heading .breadcrumb { margin: 0; font-size: 18px; line-height: 1.6em; font-weight: 600; color: var(--white-color); } .cs_page_heading .breadcrumb-item.active { color: var(--white-color); } .cs_page_heading .breadcrumb-item + .breadcrumb-item::before { content: "\f101"; font-family: "Font Awesome 6 Free"; font-weight: 700; color: var(--white-color); } @media (max-width: 991px) { .cs_section_heading.cs_style_1 br { display: none; } } .cs_section_heading.cs_style_1.cs_type_1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 991px) { .cs_section_heading.cs_style_1.cs_type_1 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 20px; } } .cs_section_heading.cs_style_1 .cs_section_subtitle { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 7px; } .cs_section_heading.cs_style_1 .cs_section_heading_left { max-width: 635px; } .cs_section_heading.cs_style_1 .cs_section_heading_right { max-width: 530px; } /*-------------------------------- Start List Styling ---------------------------------*/ .cs_list.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; } .cs_list.cs_style_1 li { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; } .cs_list.cs_style_1 .cs_list_icon { width: 18px; height: 18px; margin-top: 5px; border: 2px solid var(--accent-color); -webkit-box-flex: 0; -ms-flex: none; flex: none; font-size: 10px; } /*-------------------------------- End List Styling ---------------------------------*/ /*------------------------------------------ Start Progress ------------------------------------------ */ .cs_progress_info_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 31px; } .cs_progress { height: 10px; border-radius: 10px; max-width: 534px; background-color: var(--heading-color); } .cs_progress .cs_progress_in { height: 100%; border-radius: inherit; background-color: var(--accent-color); position: relative; } .cs_progress .cs_progress_in::before { content: ""; width: 20px; height: 20px; background-color: var(--accent-color); border: 5px solid var(--border-color); border-radius: 50%; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .cs_progress .cs_progress_in span { position: absolute; top: -38px; right: 0; } /*------------------------------------------ End Progress ------------------------------------------ */ /*------------------------------------------ Start Rating ------------------------------------------ */ .cs_rating_container { max-width: 180px; } .cs_rating_percentage, .cs_rating { overflow: hidden; } .cs_rating_percentage::before, .cs_rating::before { content: "\f005\f005\f005\f005\f005"; font-family: "Font Awesome 6 Free"; position: absolute; top: 0; left: 0; } .cs_rating { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 120px; height: 26px; position: relative; font-size: 16px; letter-spacing: 7px; color: #ffc131; } .cs_rating::before { font-weight: 400; } .cs_rating_percentage { position: absolute; top: 0; left: 0; height: 100%; } .cs_rating_percentage::before { font-weight: 900; } /*------------------------------------------ End Rating ------------------------------------------ */ /*---------------------------------------- Start Accordion -----------------------------------------*/ .cs_accordian.cs_style_1.cs_type_1 { border: 1px solid var(--border-color); } .cs_accordian.cs_style_1 .cs_accordian_body { padding: 16px 50px 16px 20px; border-top: 1px solid var(--border-color); } .cs_accordian.cs_style_1 .cs_accordian_head { padding: 14px 50px 14px 20px; position: relative; cursor: pointer; } @media (max-width: 1199px) { .cs_accordian.cs_style_1 .cs_accordian_head { padding: 20px 40px 20px 20px; } } .cs_accordian.cs_style_1 .cs_accordian_toggle { display: inline-block; width: 16px; height: 16px; position: absolute; top: 20px; right: 20px; } .cs_accordian.cs_style_1 .cs_accordian_toggle i { position: absolute; color: var(--accent-color); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_accordian.cs_style_1 .cs_accordian_toggle i:nth-child(2) { opacity: 0; } .cs_accordian.cs_style_1.active .cs_accordian_head { pointer-events: none; } .cs_accordian.cs_style_1.active .cs_accordian_toggle i { color: var(--body-color); } .cs_accordian.cs_style_1.active .cs_accordian_toggle i:nth-child(1) { opacity: 0; } .cs_accordian.cs_style_1.active .cs_accordian_toggle i:nth-child(2) { opacity: 1; } .cs_accordian.cs_style_1.active.cs_type_1 { border-color: var(--accent-color); } .cs_accordian.cs_style_1.active.cs_type_1 .cs_accordian_toggle i { color: var(--heading-color); } .cs_accordians_wrapper.cs_style_1 { padding-right: 130px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } @media (max-width: 1400px) { .cs_accordians_wrapper.cs_style_1 { padding-right: 50px; } } @media (max-width: 991px) { .cs_accordians_wrapper.cs_style_1 { padding-right: 0; } } /*------------------------------------------- End Accordion --------------------------------------------*/ /*-------------------------------- Start Brands Styling ---------------------------------*/ .cs_brands_wrapper { padding: 66px 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 50px 120px; margin-top: -90px; position: relative; z-index: 1; -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08); } @media (max-width: 1400px) { .cs_brands_wrapper { gap: 50px 75px; } } @media (max-width: 460px) { .cs_brands_wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .cs_brands_wrapper .cs_brand { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .cs_brands_wrapper .cs_brand:hover svg g { opacity: 1; } .cs_brands_wrapper svg g { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } /*-------------------------------- End Brands Styling ---------------------------------*/ /*-------------------------------- Start Video Styling ---------------------------------*/ .cs_video.cs_style_1 { width: 100%; height: 100%; min-height: 594px; padding: 100px 0; } @media (max-width: 1400px) { .cs_video.cs_style_1 { min-height: 524px; } } @media (max-width: 991px) { .cs_video.cs_style_1 { min-height: 480px; padding: 80px 0 140px; } } .cs_video.cs_style_1 .cs_video_overlay { width: 100%; height: 100%; top: 0; left: 0; opacity: 0.85; } .cs_video.cs_style_1 .cs_video_content { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cs_video.cs_style_1 .cs_player_btn { width: 86px; height: 86px; background-color: var(--accent-color); } .cs_video.cs_style_1 .cs_player_btn::after, .cs_video.cs_style_1 .cs_player_btn::before { width: 100%; height: 100%; background-color: transparent; border: 1px solid var(--white-color); -webkit-animation: pulse-border-2 2000ms ease-out infinite; animation: pulse-border-2 2000ms ease-out infinite; } .cs_video.cs_style_1 .cs_player_btn::after { -webkit-animation-delay: 1000ms; animation-delay: 1000ms; } .cs_video.cs_style_1 .cs_player_btn span { border-left: 25px solid currentColor; border-top: 15px solid transparent; border-bottom: 15px solid transparent; } .cs_video.cs_style_1 .cs_video_shape_1 { left: 0; bottom: 0; } /*-------------------------------- End Video Styling ---------------------------------*/ /*------------------------------------------- Start Counter --------------------------------------------*/ .cs_counter.cs_style_1 .cs_counter_overlay { width: 100%; height: 100%; opacity: 0.66; left: 0; top: 0; } .cs_counter.cs_style_1 .cs_counter_banner_wrapper { -webkit-transform: translateY(-120px); transform: translateY(-120px); } @media (max-width: 991px) { .cs_counter.cs_style_1 .cs_counter_banner_wrapper { -webkit-transform: translateY(0px); transform: translateY(0px); } } .cs_counter.cs_style_1 .cs_counter_banner { padding-left: 45%; position: absolute; top: -90px; right: 0; } @media (max-width: 991px) { .cs_counter.cs_style_1 .cs_counter_banner { position: initial; padding-left: 0; margin-top: -170px; } } .cs_counter.cs_style_1 .cs_counter_banner img { border: 20px solid var(--white-color); } @media (max-width: 991px) { .cs_counter.cs_style_1 .cs_counter_banner img { border-width: 10px; } } .cs_counter.cs_style_1 .cs_section_heading.cs_style_1 { position: relative; z-index: 1; } /*------------------------------------------- End Counter --------------------------------------------*/ @-webkit-keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @-webkit-keyframes pulse-border-2 { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 0.3; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.28); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.28); opacity: 0; } } @keyframes pulse-border-2 { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 0.3; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.28); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.28); opacity: 0; } } @-webkit-keyframes spinAnimation { 0% { -webkit-transform: rotateX(-20deg) rotateY(0deg); transform: rotateX(-20deg) rotateY(0deg); } 75% { -webkit-transform: rotateX(-20deg) rotateY(360deg); transform: rotateX(-20deg) rotateY(360deg); } 100% { -webkit-transform: rotateX(-20deg) rotateY(360deg); transform: rotateX(-20deg) rotateY(360deg); } } @keyframes spinAnimation { 0% { -webkit-transform: rotateX(-20deg) rotateY(0deg); transform: rotateX(-20deg) rotateY(0deg); } 75% { -webkit-transform: rotateX(-20deg) rotateY(360deg); transform: rotateX(-20deg) rotateY(360deg); } 100% { -webkit-transform: rotateX(-20deg) rotateY(360deg); transform: rotateX(-20deg) rotateY(360deg); } } @-webkit-keyframes scallup { 0% { -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } 50% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 100% { -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } } @keyframes scallup { 0% { -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } 50% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } 100% { -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); } } /*-------------------------------------------------------------- 6. Slider ----------------------------------------------------------------*/ .cs_slider { position: relative; } .slick-arrow { cursor: pointer; } .draggable { cursor: url(../img/drag.png) 16 9, ew-resize !important; } .slick-slide > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .cs_remove_overflow .slick-list { overflow: visible; } .cs_remove_overflow .slick-slide { opacity: 0; visibility: hidden; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .cs_remove_overflow .slick-slide.slick-active { opacity: 1; visibility: visible; } .cs_slider_gap_24 .slick-slide { padding-left: 12px; padding-right: 12px; } .cs_slider_gap_24 .slick-list { margin-left: -12px; margin-right: -12px; } .cs_slider_gap_30 .slick-slide { padding-left: 15px; padding-right: 15px; } .cs_slider_gap_30 .slick-list { margin-left: -15px; margin-right: -15px; } .cs_slider_2_wrap { overflow: hidden; border-radius: 5px; position: relative; } @media (min-width: 1200px) { .cs_slider.cs_style_2 { width: calc(100% + 280px); margin-left: -140px; } } .cs_slider_arrows.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; } .cs_slider_arrows.cs_style_1 .cs_left_arrow, .cs_slider_arrows.cs_style_1 .cs_right_arrow { height: 50px; width: 50px; -webkit-box-flex: 0; -ms-flex: none; flex: none; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cs_slider_arrows.cs_style_1 .cs_left_arrow:hover, .cs_slider_arrows.cs_style_1 .cs_right_arrow:hover { background-color: var(--accent-color); } @media (max-width: 1199px) { .cs_slider_arrows.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; margin-top: 40px; } } .cs_slider_arrows.cs_style_1 .cs_arrow_wrap_left, .cs_slider_arrows.cs_style_1 .cs_arrow_wrap_right { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 1199px) { .cs_slider_arrows.cs_style_1 .cs_arrow_wrap_left, .cs_slider_arrows.cs_style_1 .cs_arrow_wrap_right { position: initial; -webkit-transform: translateY(0); transform: translateY(0); -webkit-box-flex: 0; -ms-flex: none; flex: none; } } .cs_slider_arrows.cs_style_1 .cs_arrow_wrap { width: calc((100vw - 1290px) / 2); } @media (max-width: 1400px) { .cs_slider_arrows.cs_style_1 .cs_arrow_wrap { width: calc((100vw - 1110px) / 2); } } @media (max-width: 1199px) { .cs_slider_arrows.cs_style_1 .cs_arrow_wrap { width: -webkit-max-content; width: -moz-max-content; width: max-content; } } .cs_slider_arrows.cs_style_1 .cs_arrow_wrap_left { left: 0; } .cs_slider_arrows.cs_style_1 .cs_arrow_wrap_right { right: 0; } .cs_pagination.cs_style_1 { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 5.5%; padding: 30px 0; } @media (max-width: 1600px) { .cs_pagination.cs_style_1 { left: 3%; } } @media (max-width: 1480px) { .cs_pagination.cs_style_1 { left: 25px; } } @media (max-width: 1070px) { .cs_pagination.cs_style_1 { top: initial; bottom: 40px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 10px 30px; } } .cs_pagination.cs_style_1.cs_type_1 { position: initial; -webkit-transform: translateY(0%); transform: translateY(0%); padding: 12px 0; margin-top: 80px; } .cs_pagination.cs_style_1.cs_type_1::before, .cs_pagination.cs_style_1.cs_type_1::after { width: 77px; height: 2px; } .cs_pagination.cs_style_1.cs_type_1::before { background: -webkit-gradient(linear, right top, left top, from(#01133C), to(#EF0F3A)); background: linear-gradient(270deg, #01133C 0%, #EF0F3A 100%); top: 50%; left: 62%; -webkit-transform: translate(-62%, -50%); transform: translate(-62%, -50%); } .cs_pagination.cs_style_1.cs_type_1::after { background: -webkit-gradient(linear, right top, left top, from(#EF0F3A), to(#01133C)); background: linear-gradient(270deg, #EF0F3A 0%, #01133C 100%); top: 50%; left: 38%; -webkit-transform: translate(-38%, -50%); transform: translate(-38%, -50%); } .cs_pagination.cs_style_1.cs_type_1 ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .cs_pagination.cs_style_1.cs_type_1 li { background-color: var(--accent-color); } .cs_pagination.cs_style_1::before, .cs_pagination.cs_style_1::after { content: ""; position: absolute; width: 2px; height: 77px; left: 50%; margin-left: -1px; } @media (max-width: 1070px) { .cs_pagination.cs_style_1::before, .cs_pagination.cs_style_1::after { display: none; } } .cs_pagination.cs_style_1::before { background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(rgba(1, 15, 52, 0.7))); background: linear-gradient(180deg, #fff 0%, rgba(1, 15, 52, 0.7) 100%); bottom: 100%; } .cs_pagination.cs_style_1::after { background: -webkit-gradient(linear, left bottom, left top, from(#fff), to(rgba(1, 15, 52, 0.7))); background: linear-gradient(0deg, #fff 0%, rgba(1, 15, 52, 0.7) 100%); top: 100%; } .cs_pagination.cs_style_1 ul { list-style: none; padding: 0; margin: 0; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; gap: 23px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (max-width: 1070px) { .cs_pagination.cs_style_1 ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .cs_pagination.cs_style_1 li { height: 13px; width: 13px; background-color: var(--heading-color); border-radius: 50%; margin: 0; cursor: pointer; position: relative; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_pagination.cs_style_1 li:hover { background-color: var(--accent-color); } .cs_pagination.cs_style_1 li::before { content: ""; height: 35px; width: 35px; border-radius: 50%; border: 2px solid var(--accent-color); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; } .cs_pagination.cs_style_1 li.slick-active { background-color: var(--accent-color); } .cs_pagination.cs_style_1 li.slick-active::before { opacity: 1; } .cs_pagination.cs_style_1 button { display: none; } .cs_show_md { display: none !important; } @media (max-width: 767px) { .cs_show_md { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } .cs_hide_md { display: none !important; } } .slick-slide .cs_hero.cs_style_1 .cs_hero_text { position: relative; left: 50px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; opacity: 0; } .slick-slide.slick-current .cs_hero.cs_style_1 .cs_hero_text { opacity: 1; left: 0; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } /*------------------------------------- Infinite Ticker Slider ---------------------------------------*/ .cs_horizontal_slider_wrapper:hover .cs_gallery_list { -webkit-animation-play-state: paused; animation-play-state: paused; } .cs_horizontal_in { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; white-space: nowrap; min-width: 100%; } .cs_gallery_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; margin: 0 15px; -webkit-animation: slide-left 40s linear infinite; animation: slide-left 40s linear infinite; } @-webkit-keyframes slide-left { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slide-left { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } /*-------------------------------------------------------------- 7. Video Modal ----------------------------------------------------------------*/ .cs-pd-video .cs_video_open, .cs-sample-img .cs_video_open { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; font-size: 68px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; line-height: 48px; } .cs-pd-video .cs_video_open:hover, .cs-sample-img .cs_video_open:hover { color: rgba(255, 255, 255, 0.7); } .cs_video_popup { position: fixed; z-index: 1000; top: 0; width: 100%; height: 100%; left: -100%; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .cs_video_popup.active { left: 0; -webkit-transition-delay: 0s; transition-delay: 0s; left: 0; } .cs_video_popup-overlay { position: absolute; left: 0; right: 0; background: #000; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; opacity: 0; } .cs_video_popup.active .cs_video_popup-overlay { opacity: 0.8; height: 100%; background: rgba(0, 0, 0, 0.5); } .cs_video_popup-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: auto; -webkit-overflow-scrolling: touch; font-size: 0; text-align: center; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; visibility: hidden; padding: 15px; } .cs_video_popup.active .cs_video_popup-content { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; } .cs_video_popup-content:after { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .cs_video_popup-container { display: inline-block; position: relative; text-align: left; background: #fff; max-width: 1380px; width: 100%; vertical-align: middle; } .cs_video_popup-container .embed-responsive { width: 100%; } .embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; height: 100%; } .embed-responsive-16by9::before { display: block; content: ""; padding-top: 56.25%; } .embed-responsive iframe, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .cs_video_popup-close { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: #d90d0d; cursor: pointer; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .cs_video_popup iframe { width: 100%; height: 100%; position: absolute; } .cs_video_popup-close:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 20px; height: 1px; background: #fff; margin-left: -10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .cs_video_popup-close:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 20px; height: 1px; background: #fff; margin-left: -10px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .cs_video_popup-close:hover:before, .cs_video_popup-close:hover:after { background: #000; } .cs_video_popup-layer { position: absolute; left: 0; bottom: 0; right: 0; } .cs_video_popup-align { overflow: hidden; } /*End Video Popup*/ /*-------------------------------------------------------------- 8. Header ----------------------------------------------------------------*/ .cs_site_header { position: absolute; z-index: 101; width: 100%; left: 0; top: 0px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cs_circle_btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 0; border: none; outline: none; background-color: transparent; font-size: 22px; } .cs_header_search_wrap { position: absolute; top: 100%; margin-top: 20px; right: 0; background-color: #fff; padding: 15px; -webkit-box-shadow: 2px 2px 50px 0px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 50px 0px rgba(0, 0, 0, 0.1); border-radius: 10px; opacity: 0; visibility: hidden; z-index: 11; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_header_search_wrap.active { opacity: 1; visibility: visible; margin-top: 10px; } .cs_header_search { position: relative; width: 270px; } .cs_header_search .cs_header_search_input { padding: 12px 55px 12px 20px; border-radius: 10px; border: 1px solid rgba(0, 0, 27, 0.2); width: 100%; outline: none; } .cs_header_search .cs_header_search_input:focus { border-color: rgba(0, 0, 27, 0.5); } .cs_header_search .cs_header_search_btn { position: absolute; right: 0; top: 0; border: none; background-color: transparent; padding: 0; height: 50px; width: 50px; padding-bottom: 2px; } .cs_header_search .cs_header_search_btn:hover { opacity: 0.7; } .cs_logo_wrap { position: relative; height: calc(100% + 50px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: -50px; } @media (max-width: 1199px) { .cs_logo_wrap { margin-top: 0; height: 80px; } } .cs_site_branding img{ width:79%; } .cs_site_branding { display: inline-block; position: relative; z-index: 3; max-width: 225px; } @media (max-width: 1250px) { .cs_site_branding { max-width: 200px; } } @media (max-width: 1199px) { .cs_site_branding { max-width: 180px; } } @media (max-width: 350px) { .cs_site_branding { max-width: 150px; } } .cs_logo_bg_shape { position: absolute; right: -155px; bottom: 0; z-index: 2; } .cs_logo_bg_shape::before { content: ""; position: absolute; right: 90px; height: 100%; width: 100vw; background-color: var(--accent-color); } .cs_logo_bg_shape img { position: absolute; top: 0; right: 70px; } @media (max-width: 1199px) { .cs_logo_bg_shape img { height: 80px; right: 40px; } } @media (max-width: 1600px) { .cs_logo_bg_shape { right: -100px; } } @media (max-width: 1400px) { .cs_logo_bg_shape { right: -80px; } } @media (max-width: 1199px) { .cs_logo_bg_shape { right: -55px; } .cs_logo_bg_shape svg { height: 80px; width: 289px; } } @media (max-width: 350px) { .cs_logo_bg_shape { right: -48px; } } .cs_header_social_links_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .cs_header_social_links { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 15px; line-height: 1.6em; gap: 5px 20px; } .cs_header_social_links a:hover { color: #fff; -webkit-transform: scale(1.1); transform: scale(1.1); } .cs_header_contact_list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px 30px; } .cs_header_contact_list li { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cs_header_contact_list li i { color: var(--accent-color); } .cs_header_contact_list a:hover { color: rgba(255, 255, 255, 0.7); } .cs_site_header.cs_style_1 { background-color: #fff; } .cs_site_header.cs_style_1 .cs_top_header { background-color: #141422; color: #fff; } @media (max-width: 1199px) { .cs_site_header.cs_style_1 .cs_top_header { display: none; } } .cs_site_header.cs_style_1 .cs_main_header_in, .cs_site_header.cs_style_1 .cs_top_header_in { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; } .cs_site_header.cs_style_1 .cs_main_header_in { height: 90px; } .cs_site_header.cs_style_1 .cs_top_header_in { height: 50px; position: relative; z-index: 1; } .cs_site_header.cs_style_1 .cs_main_header_right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; gap: 0 40px; } @media (max-width: 1199px) { .cs_site_header.cs_style_1 .cs_main_header_right { gap: 0 25px; padding-right: 55px; } } .cs_site_header.cs_style_1 .cs_btn { position: relative; z-index: 2; } .cs_site_header.cs_style_1 .cs_main_header_in { position: relative; z-index: 1; } .cs_site_header.cs_style_1 .cs_top_header_left { padding-left: 31.6%; } @media (max-width: 1400px) { .cs_site_header.cs_style_1 .cs_top_header_left { padding-left: 27.3%; } } .cs_site_header.cs_style_1.cs_type_1 .cs_logo_wrap { width: 316px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding-bottom: 4px; } @media (max-width: 1280px) { .cs_site_header.cs_style_1.cs_type_1 .cs_logo_wrap { width: 270px; } } @media (max-width: 1199px) { .cs_site_header.cs_style_1.cs_type_1 .cs_logo_wrap { width: 180px; padding: 35px 25px 3px 25px; } } .cs_site_header.cs_style_1.cs_type_1 .cs_logo_bg_shape { right: initial; left: 0; width: 100%; } .cs_site_header.cs_style_1.cs_type_1 .cs_logo_bg_shape svg { width: 100%; } @media (max-width: 1280px) { .cs_site_header.cs_style_1.cs_type_1 .cs_logo_bg_shape svg { height: 120px; } } @media (max-width: 1199px) { .cs_site_header.cs_style_1.cs_type_1 .cs_logo_bg_shape svg { height: 80px; } } .cs_site_header.cs_style_1.cs_type_1 .cs_logo_bg_shape:before { display: none; } @media (min-width: 1200px) { .cs_site_header.cs_style_1.cs_type_1 .cs_main_header::before { content: ""; position: absolute; height: 100%; width: 50vw; left: 74%; background-color: var(--accent-color); -webkit-transform: skewX(35deg); transform: skewX(35deg); } } @media (min-width: 1200px) and (max-width: 1700px) { .cs_site_header.cs_style_1.cs_type_1 .cs_main_header::before { left: 77%; } } @media (min-width: 1200px) and (max-width: 1199px) { .cs_site_header.cs_style_1.cs_type_1 .cs_main_header::before { left: 58%; } } @media (min-width: 1200px) and (max-width: 575px) { .cs_site_header.cs_style_1.cs_type_1 .cs_main_header::before { left: 62%; } } @media (min-width: 1200px) { .cs_site_header.cs_style_1.cs_type_1 .cs_main_header .cs_btn.cs_style_1 { background-color: #fff; color: var(--accent-color); } .cs_site_header.cs_style_1.cs_type_1 .cs_main_header .cs_circle_btn { color: #fff; } .cs_site_header.cs_style_1.cs_type_1 .cs_main_header .cs_circle_btn:hover { opacity: 0.8; } } .cs_site_header_full_width .container { max-width: 100%; padding: 0 100px; } .cs_site_header_spacing_140 { height: 140px; } @media (max-width: 1199px) { .cs_site_header_spacing_140 { height: 80px; } } .cs_site_header_spacing_110 { height: 110px; } @media screen and (max-width: 1199px) { .cs_site_header_spacing_100 { height: 80px; } .cs_main_header .container { max-width: 100%; } .cs_site_header.cs_style_1 .cs_nav { display: -webkit-box; display: -ms-flexbox; display: flex; } } .cs_nav ul { margin: 0; padding: 0; list-style: none; } .cs_sticky_header { position: fixed !important; width: 100%; z-index: 999; } .cs_sticky_header .cs_top_header_in { overflow: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_gescout_sticky { position: fixed !important; top: -110px; opacity: 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; background-color: var(--white-color); } .cs_gescout_sticky .cs_logo_wrap { margin-top: 0; height: 100%; } @media (max-width: 1199px) { .cs_gescout_sticky .cs_logo_wrap { height: 80px; } } .cs_gescout_sticky.cs_site_header.cs_style_1 .cs_top_header_in { height: 0; } .cs_gescout_sticky.cs_fixed_sticky { top: 0; opacity: 1; -webkit-box-shadow: 0px 1px 2px 0px rgba(2, 0, 181, 0.1); box-shadow: 0px 1px 2px 0px rgba(2, 0, 181, 0.1); } .cs_gescout_show { top: 0 !important; opacity: 1; -webkit-box-shadow: 0px 1px 2px 0px rgba(2, 0, 181, 0.1); box-shadow: 0px 1px 2px 0px rgba(2, 0, 181, 0.1); } .cs_gescout_show.cs_site_header.cs_style_1.cs_type_1 .container::before { opacity: 1; } .cs_main_header, .cs_top_header { position: relative; } .cs_main_header .container-fluid, .cs_top_header .container-fluid { max-width: 1700px; margin-left: auto; margin-right: auto; } @media screen and (min-width: 1200px) { .cs_main_header_center { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 100; } .cs_site_header.cs_style_1 .cs_main_header_center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .cs_site_header.cs_style_1 .cs_main_header_left { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cs_nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; line-height: 1.6em; position: relative; z-index: 100; } .cs_nav .cs_nav_list { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-wrap: wrap; flex-wrap: wrap; height: inherit; } .cs_nav .cs_nav_list > li { margin-right: 40px; height: inherit; } .cs_nav .cs_nav_list > li:last-child { margin-right: 0; } .cs_nav .cs_nav_list > li > a { padding: 10px 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; height: inherit; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cs_nav .cs_nav_list > li > ul { left: 0; top: calc(100% + 15px); pointer-events: none; } .cs_nav .cs_nav_list > li:hover > ul { top: 100%; opacity: 1; visibility: visible; pointer-events: auto; } .cs_nav .cs_nav_list > li.menu-item-has-children > a { position: relative; } .cs_nav .cs_nav_list > li.menu-item-has-children > a::after { content: ""; display: inline-block; height: 6px; width: 6px; border: 2px solid currentColor; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-left: 0; border-top: 0; margin-left: 6px; position: relative; top: -1px; border-radius: 0px 0px 2px 0px; } .cs_nav .cs_nav_list li:not(.cs_mega_menu) { position: relative; } .cs_nav .cs_nav_list ul { width: 260px; background-color: var(--white-color); position: absolute; border-top: 2px solid var(--accent-color); -webkit-box-shadow: 0px 1px 2px 0px rgba(2, 0, 181, 0.1); box-shadow: 0px 1px 2px 0px rgba(2, 0, 181, 0.1); padding: 10px 0; z-index: 100; opacity: 0; visibility: hidden; display: block !important; border-radius: 0 0 5px 5px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cs_nav .cs_nav_list ul li:hover ul { top: 0px; } .cs_nav .cs_nav_list ul li:hover > ul { opacity: 1; visibility: visible; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cs_nav .cs_nav_list ul a { display: block; line-height: inherit; padding: 10px 20px; } .cs_nav .cs_nav_list ul ul { top: 15px; left: 100%; } .cs_nav + .cs_toolbox { margin-left: 40px; } .cs_menu_toggle, .cs_menu_dropdown_toggle { display: none; } .cs_nav_list_wrap { height: 100%; } .cs_nav .cs_nav_list .cs_mega_menu { position: relative; } .cs_nav .cs_nav_list .cs_mega_wrapper { width: 1296px !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; position: fixed; top: 100px !important; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 5px 15px 10px; border-top: 2px solid var(--accent-color); border-radius: 0 0 5px 5px; } .cs_nav .cs_nav_list .cs_mega_wrapper.cs_with_thumb { display: grid !important; grid-gap: 10px; grid-template-columns: repeat(6, 1fr); padding: 20px 20px 14px 20px; } .cs_nav .cs_nav_list .cs_mega_wrapper.cs_with_thumb img { border: 1px solid var(--border-color); border-radius: 2px 20px 2px 2px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; margin-bottom: 8px; } .cs_nav .cs_nav_list .cs_mega_wrapper.cs_with_thumb a { padding: 0; display: block; text-align: center; font-size: 14px; line-height: 1.6em; font-weight: 500; } .cs_nav .cs_nav_list .cs_mega_wrapper.cs_with_thumb a:hover img { border-color: #d5d4d4; } .cs_nav .cs_nav_list .cs_mega_wrapper a { padding: 7px 10px; } .cs_nav .cs_nav_list .cs_mega_wrapper > li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 10px 0; } .cs_nav .cs_nav_list .cs_mega_wrapper > li ul { position: initial; border: none; padding: 0; width: 100%; -webkit-box-shadow: none; box-shadow: none; background-color: transparent; } .cs_nav .cs_nav_list .cs_mega_wrapper > li ul a { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cs_nav .cs_nav_list .cs_mega_menu:hover .cs_mega_wrapper li ul { opacity: 1; visibility: visible; } .cs_site_header.cs_style_1.cs_size_md .cs_nav .cs_nav_list .cs_mega_wrapper { top: 85px !important; } .cs_nav .cs_nav_list > li ul:not(.cs_mega_wrapper) .menu-item-has-children > a { position: relative; } .cs_site_header.cs_style_1.cs_color_1 .cs_nav_list > li > a { color: #fff; } } @media screen and (max-width: 1400px) { .cs_nav .cs_nav_list .cs_mega_wrapper { width: 1116px !important; } .cs_site_header_full_width .container { max-width: 100%; } } @media screen and (max-width: 1199px) { .cs_nav .cs_nav_list .cs_mega_wrapper { width: 100% !important; } .cs_site_header_full_width .container { padding: 0 15px; } .cs_menu_dropdown_toggle { position: absolute; height: 40px; width: 100%; top: 0; left: 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 23px 18px; cursor: pointer; z-index: 3; } .cs_menu_dropdown_toggle span { display: block; position: relative; height: 10px; width: 10px; } .cs_menu_dropdown_toggle span:before, .cs_menu_dropdown_toggle span:after { content: ""; display: block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 2px; width: 10px; background-color: currentColor; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_menu_dropdown_toggle span:before { -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .cs_menu_dropdown_toggle.active span:before { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } .menu-item-has-children .menu-item-has-children .cs_menu_dropdown_toggle { padding: 20px 18px; } .cs_nav .cs_nav_list_wrap { position: fixed; width: 100vw; left: -100vw; top: 0; background-color: #fff; color: var(--heading-color); height: 100vh; padding-top: 80px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cs_nav .cs_nav_list_wrap.cs_active { left: 0vw; } .cs_nav .cs_nav_list { padding: 10px 0; top: 0; overflow: auto; height: 100%; } .cs_nav .cs_nav_list ul { padding-left: 15px; display: none; } .cs_nav .cs_nav_list a { display: block; padding: 12px 15px; line-height: 16px; } .cs_nav .cs_nav_list > li > a { font-size: 18px; line-height: 22px; } .cs_nav .menu-item-has-children { position: relative; } /*Mobile Menu Button*/ .cs_menu_toggle { display: inline-block; width: 30px; height: 27px; cursor: pointer; position: absolute; top: 27px; right: 30px; } .cs_menu_toggle span, .cs_menu_toggle span:before, .cs_menu_toggle span:after { width: 100%; height: 2px; background-color: currentColor; display: block; } .cs_menu_toggle span { margin: 0 auto; position: relative; top: 12px; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .cs_menu_toggle span:before { content: ""; position: absolute; margin-top: -9px; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s; } .cs_menu_toggle span:after { content: ""; position: absolute; margin-top: 9px; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s; } .cs_site_header.cs_style_1 .cs_menu_toggle { top: 50%; right: 0px; margin-top: -13px; } .cs_toggle_active span { background-color: rgba(0, 0, 0, 0); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .cs_toggle_active span:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s; } .cs_toggle_active span:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s; } .cs_nav .cs_nav_list a { position: relative; } .cs_site_header.cs_style_1 .cs_btn.cs_style_1 { padding: 8px 18px; font-size: 15px; } .cs_site_header.cs_style_1 .cs_main_header_in { height: 80px; } .cs_site_header .current-menu-item > a:before { display: none; } .cs_site_header.cs_style_1 { top: 0; } .cs_has_main_nav { display: none; } .cs_nav .cs_nav_list img { display: none; } } @media screen and (max-width: 991px) { .cs_site_header .container { max-width: 100%; } .cs_site_header.cs_style_1 .cs_action_box > *:not(:last-child) { margin-right: 25px; } .cs_site_header.cs_style_1 .cs_btn.cs_style_1.cs_color_1 { background-color: var(--accent-color); color: #fff; } } @media screen and (max-width: 767px) { .cs_site_header .cs_btn.cs_style_1 { display: none; } } /*-------------------------------------------------------------- 9. Footer ----------------------------------------------------------------*/ .cs_footer_contact_list li { position: relative; padding-left: 40px; } .cs_footer_contact_list li:not(:last-child) { margin-bottom: 22px; } .cs_footer_contact_list li i { height: 30px; width: 30px; border-radius: 6px; position: absolute; left: 0; top: -2px; background-color: rgba(255, 255, 255, 0.15); } .cs_footer_widget .cs_social_btns.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; } .cs_footer_widget .cs_social_btns.cs_style_1 a { height: 45px; width: 45px; border-radius: 6px; background-color: rgba(105, 105, 105, 0.3); color: #fff; font-size: 16px; } .cs_footer_widget .cs_social_btns.cs_style_1 a:hover { background-color: var(--accent-color); } .cs_footer_widget_seperator { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px; margin-bottom: 34px; } .cs_footer_widget_seperator span { height: 5px; width: 80px; border-radius: 5px; } .cs_footer_widget_seperator span:nth-child(2) { width: 15px; } .cs_footer_widget_seperator span:nth-child(3) { width: 6px; } .cs_footer_menu { list-style: none; padding: 0; margin: 0; } .cs_footer_menu li { padding-left: 25px; position: relative; } .cs_footer_menu li:not(:last-child) { margin-bottom: 12px; } .cs_footer_menu li::before { content: "\f061"; font-weight: 900; font-family: "Font Awesome 6 Free"; position: absolute; left: 0; top: 0px; } .cs_working_hours { list-style: none; padding: 0; margin: 0; } .cs_working_hours li { display: -webkit-box; display: -ms-flexbox; display: flex; } .cs_working_hours li span:first-child { width: 130px; } @media (max-width: 1199px) { .cs_working_hours li span:first-child { width: 95px; } } .cs_working_hours li:not(:last-child) { margin-bottom: 12px; } .cs_recent_post { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } @media (max-width: 1199px) { .cs_recent_post { gap: 15px; } } .cs_recent_post .cs_recent_post_thumb { height: 80px; width: 80px; -webkit-box-flex: 0; -ms-flex: none; flex: none; overflow: hidden; } .cs_recent_post .cs_recent_post_thumb img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .cs_recent_post .cs_recent_post_thumb:hover img { -webkit-transform: scale(1.08); transform: scale(1.08); } .cs_recent_post .cs_recent_posted_by { padding-left: 20px; position: relative; margin-bottom: 0; } .cs_recent_post .cs_recent_posted_by svg, .cs_recent_post .cs_recent_posted_by i { position: absolute; left: 0; top: 4px; color: var(--accent-color); } .cs_recent_post_widget { list-style: none; padding: 0; margin: 0; } .cs_recent_post_widget li:not(:last-child) { margin-bottom: 20px; } .cs_footer_newsletter .cs_form_field { background-color: #353c4f; border-color: #353c4f; color: #fff; margin-bottom: 14px; } .cs_text_widget img + p { margin-top: 35px; } .cs_text_widget p { margin: 0; } .cs_text_widget + .cs_social_btns.cs_style_1 { margin-top: 38px; } .cs_footer_row { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 40px 80px; } @media (max-width: 1400px) { .cs_footer_row { gap: 40px 20px; } } @media (max-width: 991px) { .cs_footer_row { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .cs_footer_row .cs_footer_col { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .cs_footer_row .cs_footer_col:first-child { -webkit-box-flex: 1.5; -ms-flex: 1.5; flex: 1.5; } .cs_footer_row .cs_footer_col:nth-child(2) { -webkit-box-flex: 1.1; -ms-flex: 1.1; flex: 1.1; } .cs_footer_row .cs_footer_col:nth-child(3) { -webkit-box-flex: 1.3; -ms-flex: 1.3; flex: 1.3; } .cs_footer_row .cs_footer_col:nth-child(4) { -webkit-box-flex: 1.5; -ms-flex: 1.5; flex: 1.5; } @media (max-width: 1199px) { .cs_footer_row .cs_footer_col:nth-child(4) { -webkit-box-flex: 1.7; -ms-flex: 1.7; flex: 1.7; } } @media (max-width: 991px) { .cs_footer_row .cs_footer_col { -webkit-box-flex: 0 !important; -ms-flex: none !important; flex: none !important; width: calc(50% - 10px); } } @media (max-width: 575px) { .cs_footer_row .cs_footer_col { width: 100%; } } .cs_footer_contact_info { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px 30px; padding: 40px 60px; border-radius: 10px; } @media (max-width: 991px) { .cs_footer_contact_info { gap: 20px 25px; padding: 40px 30px; } } @media (max-width: 575px) { .cs_footer_contact_info { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px 0px; } } .cs_footer_contact_info .cs_footer_contact_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .cs_footer_contact_info .cs_footer_contact_list_icon { height: 40px; width: 40px; -webkit-box-flex: 0; -ms-flex: none; flex: none; background-color: #fff; color: var(--accent-color); border-radius: 5px; font-size: 18px; } .cs_footer_newsletter.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; background-color: #000; margin-bottom: 75px; } @media (max-width: 991px) { .cs_footer_newsletter.cs_style_1 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_left { min-height: 130px; -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 100%; max-width: 340px; padding: 20px; } @media (max-width: 1400px) { .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_left { max-width: 300px; } } @media (max-width: 1199px) { .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_left { max-width: 200px; } } @media (max-width: 991px) { .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_left { max-width: 100%; min-height: 100px; } } .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 31px 110px; gap: 15px 30px; } @media (max-width: 1400px) { .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_right { padding: 31px 50px; } } @media (max-width: 1199px) { .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_right { padding: 30px 30px; gap: 15px 20px; } } @media (max-width: 1199px) { .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_right { padding: 30px 20px; gap: 15px 20px; } } @media (max-width: 767px) { .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_right { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_right .cs_fs_24 { text-align: center; } } .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_form { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; max-width: 370px; } @media (max-width: 575px) { .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_form { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 100%; } } .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_form input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 5px 15px; outline: none; border: none; } @media (max-width: 575px) { .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_form input { height: 46px; -webkit-box-flex: 0; -ms-flex: none; flex: none; } } .cs_footer_contact_info_list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px 40px; -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 100%; max-width: 720px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 1400px) { .cs_footer_contact_info_list { max-width: 600px; } } @media (max-width: 1199px) { .cs_footer_contact_info_list { max-width: 500px; } } @media (max-width: 991px) { .cs_footer_contact_info_list { max-width: 100%; } } .cs_footer_contact_info_list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 25px; } .cs_footer_contact_info_list li svg { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .cs_footer.cs_style_1 { padding-top: 80px; } .cs_footer.cs_style_1 .cs_footer_bottom { background-color: #000; } .cs_footer.cs_style_1 .cs_footer_bottom_in { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 25px 20px; } .cs_footer.cs_style_1 .cs_footer_bottom_in { padding: 23px 0; gap: 5px 20px; } @media (max-width: 767px) { .cs_footer.cs_style_1 .cs_footer_bottom_in { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; padding: 20px 0; } } .cs_footer.cs_style_1 .cs_footer_bottom_in a:hover { color: var(--heading-color); } .cs_footer.cs_style_1 .cs_footer_copyright a { color: var(--accent-color); } .cs_footer.cs_style_1 .cs_footer_copyright a:hover { color: var(--accent-color); text-decoration: underline; } .cs_footer.cs_style_1.cs_type_1 .cs_main_footer { padding-bottom: 0; } .cs_footer.cs_style_1.cs_type_1 .cs_footer_bottom { background-color: transparent; } .cs_footer.cs_style_1.cs_type_1 .cs_footer_bottom_in { border-top: 1px solid rgba(255, 255, 255, 0.2); } .cs_footer.cs_style_1.cs_type_1 .cs_footer_row { gap: 40px 0px; } @media (max-width: 991px) { .cs_footer.cs_style_1.cs_type_1 .cs_footer_row { gap: 0; } } .cs_footer.cs_style_1.cs_type_1 .cs_footer_row .cs_footer_col { border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 50px; } @media (max-width: 1400px) { .cs_footer.cs_style_1.cs_type_1 .cs_footer_row .cs_footer_col { padding: 50px 20px; } } @media (max-width: 575px) { .cs_footer.cs_style_1.cs_type_1 .cs_footer_row .cs_footer_col { border-right: 0 !important; padding: 30px 0 35px 0; } } .cs_footer.cs_style_1.cs_type_1 .cs_footer_row .cs_footer_col:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.2); } .cs_footer.cs_style_1.cs_type_1 .cs_footer_row .cs_footer_col:first-child { padding-left: 0; } .cs_footer.cs_style_1.cs_type_1 .cs_footer_row .cs_footer_col:last-child { padding-right: 0; } @media (max-width: 991px) { .cs_footer.cs_style_1.cs_type_1 .cs_footer_row .cs_footer_col:nth-child(2) { border-right: 0; padding-right: 0; } .cs_footer.cs_style_1.cs_type_1 .cs_footer_row .cs_footer_col:nth-child(3) { padding-left: 0; } } .cs_footer.cs_style_1 .cs_footer_top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 60px; } @media (max-width: 991px) { .cs_footer.cs_style_1 .cs_footer_top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 25px 0; } } .cs_footer.cs_style_1 .cs_footer_top .cs_footer_newsletter.cs_style_1 { background-color: transparent; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin: 0; width: 370px; } @media (max-width: 991px) { .cs_footer.cs_style_1 .cs_footer_top .cs_footer_newsletter.cs_style_1 { width: 100%; } .cs_footer.cs_style_1 .cs_footer_top .cs_footer_newsletter.cs_style_1 .cs_footer_newsletter_form { max-width: 100%; } } /*-------------------------------------------------------------- 10. Hero ----------------------------------------------------------------*/ .cs_hero.cs_style_1 { min-height: 600px; height: calc(100vh - 140px); max-height: 1000px; position: relative; padding: 80px 0; } @media (max-width: 575px) { .cs_hero.cs_style_1 { height: initial; max-height: initial; } } .cs_hero.cs_style_1 .cs_hero_text { max-width: 680px; position: relative; z-index: 1; } @media (max-width: 991px) { .cs_hero.cs_style_1 .cs_hero_text { max-width: 500px; } } .cs_hero.cs_style_1 .cs_hero_subtitle { max-width: 620px; } .cs_hero.cs_style_1 .cs_hero_mini_title { letter-spacing: 1.8px; } .cs_hero.cs_style_1 .cs_hero_btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px 40px; } @media (max-width: 991px) { .cs_hero.cs_style_1 .cs_hero_btns { gap: 15px 25px; } } .cs_hero.cs_style_1 .cs_hero_mini_title img { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .cs_hero.cs_style_1 .cs_hero_mini_title.cs_white_color img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .cs_hero.cs_style_1 .cs_hero_player_btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; font-size: 18px; color: #fff; font-weight: 500; } .cs_hero.cs_style_1 .cs_hero_player_btn:hover .cs_hero_play_btn_text::before { width: 100%; } .cs_hero.cs_style_1 .cs_hero_play_btn_text { position: relative; } .cs_hero.cs_style_1 .cs_hero_play_btn_text::before { content: ""; height: 1px; width: 0%; background-color: var(--accent-color); position: absolute; bottom: 0; left: 0; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cs_hero.cs_style_1 .cs_hero_number { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .cs_hero.cs_style_1 .cs_hero_number_icon { height: 55px; width: 55px; border-radius: 50%; -webkit-box-flex: 0; -ms-flex: none; flex: none; } @media (max-width: 991px) { .cs_hero.cs_style_1 .cs_hero_number_icon { height: 44px; width: 44px; font-size: 16px; } } @media (max-width: 1199px) { .cs_hero.cs_style_1.cs_type_1 { background-position: center left; } } .cs_slide .cs_hero.cs_style_1 { padding-bottom: 150px; } /*-------------------------------------------------------------- 11. Iconbox ----------------------------------------------------------------*/ .cs_iconbox.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .cs_iconbox.cs_style_1.cs_type_1 .cs_iconbox_icon { width: 30px; height: 30px; } .cs_iconbox.cs_style_1 .cs_iconbox_icon { width: 60px; height: 60px; } .cs_iconbox.cs_style_1 .cs_iconbox_icon img { -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .cs_iconbox.cs_style_1:hover img { -webkit-transform: rotatey(180deg); transform: rotatey(180deg); } .cs_iconbox.cs_style_2 { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 25px; } @media (max-width: 575px) { .cs_iconbox.cs_style_2 { gap: 15px; } } .cs_iconbox.cs_style_2 .cs_iconbox_icon { width: 70px; height: 70px; -webkit-box-flex: 0; -ms-flex: none; flex: none; padding: 12px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } @media (max-width: 575px) { .cs_iconbox.cs_style_2 .cs_iconbox_icon { width: 60px; height: 60px; } } .cs_iconbox.cs_style_2 img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_iconbox.cs_style_2:hover .cs_iconbox_icon { background-color: var(--accent-color); } .cs_iconbox.cs_style_2:hover img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .cs_iconbox.cs_style_3 { height: 100%; border: 1px solid var(--border-color); } .cs_iconbox.cs_style_3 .cs_iconbox_icon { width: 70px; height: 70px; border: 1px solid var(--border-color); margin-top: -35px; margin-left: 20px; } .cs_iconbox.cs_style_3 .cs_iconbox_content { padding: 6px 25px 25px; } .cs_iconbox.cs_style_4 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; position: relative; z-index: 1; } @media (max-width: 1200px) { .cs_iconbox.cs_style_4 { gap: 20px; } } .cs_iconbox.cs_style_4 .cs_iconbox_icon { position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 90px; height: 90px; border-radius: 20px 0 20px 0; border: 1px solid var(--accent-color); } .cs_iconbox.cs_style_4 .cs_iconbox_icon::before { content: ""; width: 100%; height: 100%; background-color: var(--accent-color); opacity: 0.33; border-radius: inherit; position: absolute; left: 0; top: 0; } .cs_iconbox.cs_style_4 .cs_iconbox_icon img { z-index: 1; } .cs_iconbox.cs_style_4 .cs_iconbox_number { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cs_iconbox.cs_style_5 { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; } .cs_iconbox.cs_style_5 .cs_iconbox_icon { width: 70px; height: 70px; font-size: 30px; -webkit-box-flex: 0; -ms-flex: none; flex: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_iconbox.cs_style_5:hover .cs_iconbox_icon { background-color: var(--accent-color); color: var(--border-color); } .cs_iconbox.cs_style_6 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .cs_iconbox.cs_style_6 .cs_iconbox_icon { width: 40px; height: 40px; border: 1px solid var(--body-color); } /*-------------------------------------------------------------- 12. Posts ----------------------------------------------------------------*/ .cs_post.cs_style_1 { position: relative; z-index: 1; } .cs_post.cs_style_1.cs_type_1 { padding: 25px 30px 0 0; } @media (max-width: 575px) { .cs_post.cs_style_1.cs_type_1 { padding: 20px 20px 0 0; } } .cs_post.cs_style_1.cs_type_1::before { content: ""; width: calc(100% - 20px); height: calc(100% - 17px); border: 1px solid var(--border-color); position: absolute; top: 0; right: 0; } .cs_post.cs_style_1.cs_type_1 .cs_post_thumbnail { position: relative; z-index: 1; } .cs_post.cs_style_1.cs_type_1 .cs_post_content_wrapper { padding: 0 0 0 50px; margin-top: 0; } @media (max-width: 575px) { .cs_post.cs_style_1.cs_type_1 .cs_post_content_wrapper { padding: 0 0 0 40px; } } .cs_post.cs_style_1.cs_type_1 .cs_post_content { padding: 0; -webkit-box-shadow: none; box-shadow: none; } .cs_post.cs_style_1.cs_type_1 .cs_text_btn.cs_style_1 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding: 8px 9px; border: 1px solid var(--border-color); position: relative; z-index: 1; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .cs_post.cs_style_1.cs_type_1 .cs_text_btn.cs_style_1:hover { border-color: var(--accent-color); } .cs_post.cs_style_1.cs_type_1 .cs_post_date { top: 0; left: 0; } .cs_post.cs_style_1.cs_type_1 .cs_post_date::after { display: none; } .cs_post.cs_style_1 .cs_post_content_wrapper { padding: 0 35px; margin-top: -58px; position: relative; z-index: 1; } @media (max-width: 1400px) { .cs_post.cs_style_1 .cs_post_content_wrapper { padding-right: 0; } } .cs_post.cs_style_1 .cs_post_thumbnail { display: inline-block; width: 100%; overflow: hidden; } .cs_post.cs_style_1 .cs_post_thumbnail img { width: 100%; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .cs_post.cs_style_1 .cs_post_content { padding: 40px 30px; -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08); } .cs_post.cs_style_1 h3, .cs_post.cs_style_1 p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cs_post.cs_style_1 .cs_post_date { width: 58px; height: 58px; padding: 13px 14px; top: 0; left: 0; line-height: 1.2em; } .cs_post.cs_style_1 .cs_post_date::after { content: ""; width: 60%; height: 40%; background-color: #bd0528; -webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); position: absolute; left: 0; bottom: 1px; -webkit-transform: rotatex(180deg); transform: rotatex(180deg); -webkit-transform-origin: bottom; transform-origin: bottom; } .cs_post.cs_style_1:hover .cs_post_thumbnail img { -webkit-transform: scale(1.06); transform: scale(1.06); } .cs_post_meta_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .cs_post_meta_wrapper .cs_post_meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .cs_tyres_shape { left: 0; bottom: 0; } /*------------------------------------------------ Start Post Details Page Design -------------------------------------------------*/ .cs_post_details img { width: 100%; margin-bottom: 27px; } .cs_post_details h2 { font-size: 30px; line-height: 1em; margin-bottom: 17px; } .cs_post_details p { margin-bottom: 17px; } .cs_post_details blockquote { padding: 30px; background: rgba(239, 15, 58, 0.06); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 25px; font-size: 18px; font-weight: 600; color: var(--heading-color); margin-bottom: 36px; } @media (max-width: 575px) { .cs_post_details blockquote { padding: 30px 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; gap: 20px; } } .cs_post_details blockquote img { width: -webkit-max-content; width: -moz-max-content; width: max-content; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-bottom: 0; } .cs_post_share_wrapper { padding: 24px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30px; -ms-flex-wrap: wrap; flex-wrap: wrap; border: 1px solid var(--border-color); border-right: 0; border-left: 0; margin: 35px 0 48px; } .cs_post_share_wrapper h3 { margin-bottom: 0; } .cs_post_share_wrapper .cs_post_socials, .cs_post_share_wrapper .cs_post_tags.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .cs_post_share_wrapper .cs_tags_links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .cs_tags_links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .cs_tags_links .cs_tag_link { padding: 5px 18px; } .cs_tags_links .cs_tag_link:hover { background-color: var(--accent-color); color: var(--white-color); } /*---------------------------------------- Comments Area Styling -----------------------------------------*/ .cs_comment_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; } .cs_comment_body { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; } @media (max-width: 575px) { .cs_comment_body { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; } } .cs_comment_body:nth-child(even) { padding-left: 80px; } @media (max-width: 991px) { .cs_comment_body:nth-child(even) { padding-left: 0; } } .cs_comment_body .cs_comment_thumbnail { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 80px; height: 80px; } .cs_comment_body .cs_post_meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .cs_comment_body .cs_reply_btn { display: inline-block; padding: 5px 20px; position: absolute; top: 10px; right: 0; } @media (max-width: 575px) { .cs_comment_body .cs_reply_btn { position: initial; margin-top: 15px; } } .cs_comment_body .cs_reply_btn:hover { background-color: var(--accent-color); color: var(--white-color); } /*---------------------------------------- Sidebar Styling ------------------------------------------*/ .cs_sidebar.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40px; } .cs_sidebar_widget { padding: 40px; } @media (max-width: 575px) { .cs_sidebar_widget { padding: 30px 20px; } } .cs_sidebar_widget .cs_search { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } .cs_sidebar_widget .cs_search input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none; outline: none; padding: 20px 30px; background-color: transparent; } @media (max-width: 575px) { .cs_sidebar_widget .cs_search input { padding: 20px; } } .cs_sidebar_widget .cs_search .cs_search_icon { padding: 25px 30px; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media (max-width: 575px) { .cs_sidebar_widget .cs_search .cs_search_icon { padding: 25px; } } .cs_sidebar_widget .cs_search .cs_search_icon:hover { background-color: var(--heading-color); } .cs_sidebar_widget .cs_separator { width: 100%; height: 1px; position: absolute; top: 90px; left: 0; } @media (max-width: 575px) { .cs_sidebar_widget .cs_separator { top: 80px; } } .cs_sidebar_widget .cs_separator::after, .cs_sidebar_widget .cs_separator::before { content: ""; height: 100%; position: absolute; top: 0; left: 0; } .cs_sidebar_widget .cs_separator::before { width: 100%; background-color: var(--heading-color); opacity: 0.2; } .cs_sidebar_widget .cs_separator::after { width: 40px; background-color: var(--accent-color); left: 40px; } @media (max-width: 575px) { .cs_sidebar_widget .cs_separator::after { left: 20px; } } .cs_sidebar_widget .cs_recent_post_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 25px; } .cs_categories { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0px; } .cs_categories li:first-child a { padding-top: 0; } .cs_categories li:last-child a { padding-bottom: 0; } .cs_categories li:last-child a::after { display: none; } .cs_categories a { padding: 20px 0px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_categories a::after { content: ""; width: 100%; height: 1px; background-color: var(--heading-color); opacity: 0.2; position: absolute; left: 0; bottom: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_categories a:hover { color: var(--accent-color); } /*-------------------------------------------------------------- 13. CTA ----------------------------------------------------------------*/ .cs_newsletter.cs_style_1 .cs_newsletter_content_wrapper { padding: 80px 60px; border: 30px solid var(--white-color); border-bottom: 0; margin-top: -140px; overflow: hidden; } @media (max-width: 1400px) { .cs_newsletter.cs_style_1 .cs_newsletter_content_wrapper { padding: 30px 20px; border-width: 10px; margin-top: -80px; } } .cs_newsletter.cs_style_1 .cs_newsletter_title { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .cs_newsletter.cs_style_1 .cs_newsletter_content { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 25px; position: relative; z-index: 1; } @media (max-width: 1200px) { .cs_newsletter.cs_style_1 .cs_newsletter_content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .cs_newsletter.cs_style_1 .cs_newsletter_content br { display: none; } } .cs_newsletter.cs_style_1 .cs_newsletter_form { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } @media (max-width: 767px) { .cs_newsletter.cs_style_1 .cs_newsletter_form { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .cs_newsletter.cs_style_1 .cs_form_field_wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; } .cs_newsletter.cs_style_1 .cs_text_btn.cs_style_1 { border: none; outline: none; padding: 14px 25px; } @media (max-width: 767px) { .cs_newsletter.cs_style_1 .cs_text_btn.cs_style_1 { width: 100%; padding: 14px 24px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .cs_newsletter.cs_style_1 .cs_text_btn.cs_style_1:hover { color: var(--accent-color); } .cs_newsletter.cs_style_1 .cs_form_field { background-color: transparent; outline: none; border: 1px solid var(--border-color); color: var(--white-color); background-image: url(""); border-radius: 0; } .cs_newsletter.cs_style_1 .form-select:focus + .cs_input_icon { -webkit-transform: translateY(-50%) rotateX(180deg); transform: translateY(-50%) rotateX(180deg); } .cs_newsletter.cs_style_1 option { color: var(--heading-color); } .cs_newsletter.cs_style_1 .cs_input_icon { top: 50%; right: 24px; -webkit-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .cs_newsletter.cs_style_1 .cs_newsletter_shape { top: 0; left: 0; -webkit-transform: scale(1.15); transform: scale(1.15); opacity: 0.3; } /*-------------------------------------------------------------- 14. Testimonial ----------------------------------------------------------------*/ .cs_testimonial.cs_style_1 { padding: 33px 20px 33px 40px; } @media (max-width: 1200px) { .cs_testimonial.cs_style_1 { padding: 20px; } } .cs_testimonial.cs_style_1::before { content: ""; width: 50%; height: 100%; background-color: var(--accent-color); position: absolute; left: 0; top: 0; } .cs_testimonial.cs_style_1::after { content: ""; width: 20px; height: 50%; background-color: var(--accent-color); position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .cs_testimonial.cs_style_1 .cs_testimonial_content { padding: 40px 25px; position: relative; z-index: 1; } @media (max-width: 575px) { .cs_testimonial.cs_style_1 .cs_testimonial_content { padding: 30px 20px; } } .cs_testimonial.cs_style_1 .cs_testimonial_header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; } @media (max-width: 1200px) { .cs_testimonial.cs_style_1 .cs_testimonial_header { gap: 20px; } } @media (max-width: 575px) { .cs_testimonial.cs_style_1 .cs_testimonial_header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } } .cs_testimonial.cs_style_1 .cs_testimonial_thumbnail { width: 90px; height: 90px; -webkit-box-flex: 0; -ms-flex: none; flex: none; } .cs_testimonial.cs_style_1 .cs_quote_icon { top: 50px; right: 40px; } @media (max-width: 575px) { .cs_testimonial.cs_style_1 .cs_quote_icon { top: 25px; right: 20px; } } .cs_testimonial.cs_style_1 blockquote { font-style: normal; } .cs_testimonial.cs_style_2 { position: relative; z-index: 1; padding-right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 109px; } @media (max-width: 1400px) { .cs_testimonial.cs_style_2 { gap: 30px; } } @media (max-width: 991px) { .cs_testimonial.cs_style_2 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-right: 0; } } .cs_testimonial.cs_style_2 .cs_testimonial_header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 991px) { .cs_testimonial.cs_style_2 .cs_testimonial_header { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .cs_testimonial.cs_style_2 .cs_testimonial_thumbnail { width: 232px; height: 232px; -webkit-box-flex: 0; -ms-flex: none; flex: none; position: relative; z-index: 1; } @media (max-width: 991px) { .cs_testimonial.cs_style_2 .cs_testimonial_thumbnail { width: 150px; height: 150px; } } .cs_testimonial.cs_style_2 .cs_testimonial_thumbnail img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: inherit; } .cs_testimonial.cs_style_2 .cs_section_heading.cs_style_1 { position: relative; z-index: 1; } .cs_testimonial.cs_style_2 blockquote { color: var(--white-color); font-size: 24px; font-style: italic; font-family: var(--heading-font); line-height: 1.42em; margin-bottom: 27px; position: relative; z-index: 1; } @media (max-width: 575px) { .cs_testimonial.cs_style_2 blockquote { font-size: 20px; } } .cs_testimonial.cs_style_2 .cs_polygon_shape { top: 0; right: 0; -webkit-transform: translate(60px, -60px); transform: translate(60px, -60px); } /*-------------------------------------------------------------- 15. Team ----------------------------------------------------------------*/ .cs_team.cs_style_1 { height: 100%; padding: 30px 30px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } @media (max-width: 1400px) { .cs_team.cs_style_1 { padding: 20px; } } .cs_team.cs_style_1::before { content: ""; width: 100%; height: 100%; background-color: var(--gray2-color); position: absolute; left: 0; top: 0; } .cs_team.cs_style_1 .cs_team_thumbnail, .cs_team.cs_style_1 .cs_team_info { position: relative; z-index: 1; } .cs_team.cs_style_1 .cs_team_thumbnail { padding-bottom: 20px; width: 100%; } .cs_team.cs_style_1 .cs_team_thumbnail img { width: 100%; } .cs_team.cs_style_1 .cs_social_btns.cs_style_1 { border-radius: 25px; padding: 18px 17px 68px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 18px; position: absolute; left: 20px; bottom: 1px; -webkit-transform: translateY(-10px); transform: translateY(-10px); opacity: 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .cs_team.cs_style_1 .cs_social_btns.cs_style_1 a { width: -webkit-max-content; width: -moz-max-content; width: max-content; height: -webkit-max-content; height: -moz-max-content; height: max-content; background-color: transparent; border: 0; font-size: 16px; color: var(--heading-color); } .cs_team.cs_style_1 .cs_social_btns.cs_style_1 a:hover { color: var(--accent-color); } .cs_team.cs_style_1 .cs_share_btn { width: 50px; height: 50px; border-radius: 50%; background-color: var(--accent-color); color: var(--white-color); position: absolute; left: 20px; bottom: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_team.cs_style_1 .cs_share_btn i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .cs_team.cs_style_1 .cs_share_btn i:nth-child(1) { opacity: 0; } .cs_team.cs_style_1 .cs_share_btn i:nth-child(2) { opacity: 1; } .cs_team.cs_style_1 .cs_team_shape { width: 100%; height: 100%; top: 0; left: 0; opacity: 0.05; -webkit-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .cs_team.cs_style_1 .cs_team_shape img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .cs_team.cs_style_1:hover .cs_social_btns.cs_style_1 { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .cs_team.cs_style_1:hover .cs_share_btn { background-color: var(--heading-color); } .cs_team.cs_style_1:hover .cs_share_btn i:nth-child(1) { opacity: 1; } .cs_team.cs_style_1:hover .cs_share_btn i:nth-child(2) { opacity: 0; } .cs_team.cs_style_1:hover .cs_team_shape { opacity: 1; } /*------------------------------------------------ Team Details Page Stytling --------------------------------------------------*/ .cs_team_details_content .cs_team_features_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 575px) { .cs_team_details_content .cs_team_features_list { grid-template-columns: repeat(1, 1fr); } } .cs_team_details_content .cs_team_features_list li { padding-left: 20px; position: relative; } .cs_team_details_content .cs_team_features_list li::before { content: ""; width: 10px; height: 10px; background-color: var(--accent-color); border-radius: 50%; position: absolute; left: 0; top: 9px; } .cs_team_details_content .cs_iconbox_wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 575px) { .cs_team_details_content .cs_iconbox_wrapper { grid-template-columns: repeat(1, 1fr); } } .cs_team_details_content .cs_social_btns.cs_style_1 a { width: 30px; height: 30px; } /*-------------------------------------------------------------- 16. Pricing ----------------------------------------------------------------*/ .cs_pricing_table.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cs_pricing_table.cs_style_1 .cs_pricing_info_wrapper { width: 100%; min-height: 630px; -webkit-filter: drop-shadow(0px 10px 50px rgba(0, 0, 0, 0.08)); filter: drop-shadow(0px 10px 50px rgba(0, 0, 0, 0.08)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 190px 40px 0px; margin-top: -150px; position: relative; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } @media (max-width: 1199px) { .cs_pricing_table.cs_style_1 .cs_pricing_info_wrapper { background-color: var(--white-color); border-radius: 40px; border: 2px solid transparent; } } .cs_pricing_table.cs_style_1 .cs_pricing_info_wrapper svg { position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } @media (max-width: 1400px) { .cs_pricing_table.cs_style_1 .cs_pricing_info_wrapper svg { -webkit-transform: translateX(-50%) scale(0.9); transform: translateX(-50%) scale(0.9); } } @media (max-width: 1199px) { .cs_pricing_table.cs_style_1 .cs_pricing_info_wrapper svg { display: none; } } .cs_pricing_table.cs_style_1 .cs_pricing_info_wrapper svg:nth-child(2) { color: var(--accent-color); opacity: 0; } .cs_pricing_table.cs_style_1 .cs_pricing_head { width: 255px; height: 255px; border: 15px solid var(--border-color); position: relative; z-index: 1; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cs_pricing_table.cs_style_1 .cs_pricing_head_inner { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 15px solid var(--gray-color); } .cs_pricing_table.cs_style_1 .cs_pricing_head_subtitle { -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .cs_pricing_table.cs_style_1 .cs_pricing_plan { position: relative; z-index: 1; } .cs_pricing_table.cs_style_1 .cs_pricing_feature_list { margin-bottom: 34px; position: relative; z-index: 1; } .cs_pricing_table.cs_style_1 .cs_pricing_feature_list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; margin-bottom: 9px; } .cs_pricing_table.cs_style_1 .cs_pricing_feature_list li:last-child { margin-bottom: 0; } .cs_pricing_table.cs_style_1 .cs_pricing_feature_list span { width: 16px; height: 16px; font-size: 10px; font-family: "Font Awesome 6 Free"; margin-right: 9px; border: 1px solid var(--body-color); } .cs_pricing_table.cs_style_1 .cs_pricing_feature_list span.cs_accent_bg { border: none; } .cs_pricing_table.cs_style_1 .cs_pricing_btn { padding: 12px 30px; border: 1px solid var(--heading-color); position: relative; z-index: 1; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .cs_pricing_table.cs_style_1 .cs_pricing_btn:hover { letter-spacing: 1px; } .cs_pricing_table.cs_style_1:hover .cs_pricing_head, .cs_pricing_table.cs_style_1.active .cs_pricing_head { border-color: var(--accent-color); } .cs_pricing_table.cs_style_1:hover .cs_pricing_info_wrapper, .cs_pricing_table.cs_style_1.active .cs_pricing_info_wrapper { border-color: var(--accent-color); } .cs_pricing_table.cs_style_1:hover .cs_pricing_info_wrapper svg:nth-child(1), .cs_pricing_table.cs_style_1.active .cs_pricing_info_wrapper svg:nth-child(1) { opacity: 0; } .cs_pricing_table.cs_style_1:hover .cs_pricing_info_wrapper svg:nth-child(2), .cs_pricing_table.cs_style_1.active .cs_pricing_info_wrapper svg:nth-child(2) { opacity: 1; } .cs_pricing_table.cs_style_1:hover .cs_pricing_btn, .cs_pricing_table.cs_style_1.active .cs_pricing_btn { background-color: var(--accent-color); border-color: var(--white-color); color: var(--white-color); } /*-------------------------------------------------------------- 17. Card ----------------------------------------------------------------*/ .cs_card.cs_style_1 { height: 100%; } .cs_card.cs_style_1 .cs_card_thumbnail { padding: 0 35px; margin-bottom: -98px; z-index: 2; } @media (max-width: 1199px) { .cs_card.cs_style_1 .cs_card_thumbnail { padding: 0 20px; } } .cs_card.cs_style_1 .cs_card_icon { width: 90px; height: 90px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .cs_card.cs_style_1 .cs_card_info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 50px 43px 30px; margin-top: -98px; -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06); border: 1px solid transparent; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } @media (max-width: 1199px) { .cs_card.cs_style_1 .cs_card_info { padding: 50px 20px 30px; } } .cs_card.cs_style_1 .cs_card_subtitle { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .cs_card.cs_style_1:hover .cs_card_icon { background-color: var(--accent-color); } .cs_card.cs_style_1:hover .cs_card_info { border-color: var(--accent-color); } .cs_card.cs_style_2 { width: 100%; height: 100%; padding-bottom: 20px; } .cs_card.cs_style_2 .cs_card_thumbnail { display: inline-block; width: 100%; } .cs_card.cs_style_2 .cs_card_thumbnail::after { content: ""; width: 100%; height: 0; background-color: var(--heading-color); opacity: 0.3; position: absolute; left: 0; bottom: 0; -webkit-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .cs_card.cs_style_2 .cs_card_thumbnail img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .cs_card.cs_style_2 .cs_card_info { width: 100%; max-width: 390px; padding: 35px; border-radius: 0px 30px 0px 0px; border: 1px solid transparent; -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08); position: absolute; left: -25px; bottom: 0; overflow: hidden; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cs_card.cs_style_2 .cs_card_title, .cs_card.cs_style_2 .cs_card_subtitle { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .cs_card.cs_style_2 .cs_card_title { -webkit-line-clamp: 2; } .cs_card.cs_style_2 .cs_card_subtitle { -webkit-line-clamp: 3; } .cs_card.cs_style_2 .cs_card_subtitle, .cs_card.cs_style_2 .cs_text_btn { text-wrap: wrap; visibility: hidden; opacity: 0; margin-bottom: -60px; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .cs_card.cs_style_2 .cs_text_btn.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; } .cs_card.cs_style_2:hover .cs_card_thumbnail::after { height: 100%; } .cs_card.cs_style_2:hover .cs_card_info { border-color: var(--accent-color); } .cs_card.cs_style_2:hover .cs_card_title, .cs_card.cs_style_2:hover .cs_text_btn { color: var(--accent-color); text-align: left; } .cs_card.cs_style_2:hover .cs_card_subtitle, .cs_card.cs_style_2:hover .cs_text_btn { visibility: visible; opacity: 1; margin-bottom: 0; } .cs_card.cs_style_2:hover .cs_card_subtitle { margin-bottom: 25px; } .cs_card.cs_style_3 { height: 100%; padding: 20px 16px; } .cs_card.cs_style_3 svg { color: var(--heading-color); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cs_card.cs_style_3 svg:nth-child(2) { position: absolute; top: 0; right: 0; } .cs_card.cs_style_3 svg:nth-child(3) { position: absolute; left: 0; bottom: 0; } .cs_card.cs_style_3 svg:nth-child(4) { position: absolute; top: 8px; left: 5px; } .cs_card.cs_style_3 .cs_card_content { height: 100%; padding: 50px 22px; -webkit-filter: drop-shadow(0px 10px 50px rgba(0, 0, 0, 0.08)); filter: drop-shadow(0px 10px 50px rgba(0, 0, 0, 0.08)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 1; } .cs_card.cs_style_3 .cs_card_icon { width: 60px; height: 60px; } .cs_card.cs_style_3:hover svg { color: var(--accent-color); } .cs_card.cs_style_4 { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 630px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } @media (max-width: 767px) { .cs_card.cs_style_4 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .cs_card.cs_style_4:not(:last-child) .cs_card_index_wrap { border-right: 1px solid var(--body-color); } .cs_card.cs_style_4 .cs_card_index_wrap { padding: 30px 58px; -webkit-box-flex: 0; -ms-flex: none; flex: none; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; overflow: hidden; } @media (max-width: 1400px) { .cs_card.cs_style_4 .cs_card_index_wrap { padding: 30px; } } @media (max-width: 767px) { .cs_card.cs_style_4 .cs_card_index_wrap { width: 100%; padding: 30px 20px; } } .cs_card.cs_style_4 .cs_card_index { -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; -webkit-transform: rotate(180deg); transform: rotate(180deg); } @media (max-width: 767px) { .cs_card.cs_style_4 .cs_card_index { -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .cs_card.cs_style_4 .cs_card_content_wrapper { width: 100%; height: 100%; opacity: 0; position: relative; -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08); overflow: hidden; } @media (max-width: 767px) { .cs_card.cs_style_4 .cs_card_content_wrapper { opacity: 1; } } .cs_card.cs_style_4 .cs_card_content { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; visibility: hidden; opacity: 0; position: absolute; left: 0; top: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } @media (max-width: 1199px) { .cs_card.cs_style_4 .cs_card_content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow-y: auto; } } @media (max-width: 767px) { .cs_card.cs_style_4 .cs_card_content { min-height: 630px; position: initial; -webkit-transform: translateX(0); transform: translateX(0); visibility: visible; opacity: 1; } } .cs_card.cs_style_4 .cs_card_thumbnail { display: inline-block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .cs_card.cs_style_4 .cs_card_thumbnail img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .cs_card.cs_style_4 .cs_card_info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 60px; } @media (max-width: 1400px) { .cs_card.cs_style_4 .cs_card_info { padding: 30px 20px; } } .cs_card.cs_style_4.active { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .cs_card.cs_style_4.active .cs_card_index_wrap { background-color: var(--accent-color); } .cs_card.cs_style_4.active .cs_card_content_wrapper { visibility: visible; opacity: 1; } .cs_card.cs_style_4.active .cs_card_content { visibility: visible; opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .cs_card.cs_style_5 { height: 100%; grid-row: auto/span 1; } .cs_card.cs_style_5:nth-child(2) { grid-row: auto/span 2; } .cs_card.cs_style_5 .cs_card_thumbnail { width: 100%; height: 100%; } .cs_card.cs_style_5 .cs_card_thumbnail img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .cs_card.cs_style_5 .cs_card_info_wrapper { width: 90%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; padding: 17px 93px 17px 25px; left: 50%; bottom: 30px; -webkit-transform: scale(0.5) translate(-50%, 30px); transform: scale(0.5) translate(-50%, 30px); opacity: 0; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } @media (max-width: 1399px) { .cs_card.cs_style_5 .cs_card_info_wrapper { width: 100%; padding: 15px 93px 15px 15px; bottom: 15px; } } .cs_card.cs_style_5 .cs_text_btn.cs_style_1 { padding: 22px 25px; height: 100%; -webkit-clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%); position: absolute; top: 0; right: 0; } .cs_card.cs_style_5 .cs_text_btn.cs_style_1 img { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cs_card.cs_style_5 .cs_text_btn.cs_style_1:hover img { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .cs_card.cs_style_5:hover .cs_card_info_wrapper { -webkit-transform: scale(1) translate(-50%, 0); transform: scale(1) translate(-50%, 0); opacity: 1; } .cs_card.cs_style_6 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .cs_card.cs_style_6 .cs_call_text { color: var(--white-color); } .cs_card.cs_style_6 .cs_card_btn { display: inline-block; padding: 12px 30px; border: 1px solid var(--white-color); color: var(--white-color); } .cs_card.cs_style_6 .cs_card_btn:hover { background-color: var(--white-color); color: var(--accent-color); } .cs_card_wrapper.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (max-width: 767px) { .cs_card_wrapper.cs_style_1 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; } } .cs_cards_grid.cs_style_1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } @media (max-width: 991px) { .cs_cards_grid.cs_style_1 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .cs_cards_grid.cs_style_1 { grid-template-columns: repeat(1, 1fr); } } /*-------------------------------------------------------------- 18. About ----------------------------------------------------------------*/ .cs_about.cs_style_1 .cs_about_thumbnail_wrapper { padding-right: 46%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } @media (max-width: 575px) { .cs_about.cs_style_1 .cs_about_thumbnail_wrapper { padding-right: 0; } } .cs_about.cs_style_1 .cs_about_thumbnail_wrapper .cs_about_thumbnail:nth-child(3) { position: absolute; z-index: 2; right: 0; top: 70%; -webkit-transform: translateY(-70%); transform: translateY(-70%); padding-left: 46%; } @media (max-width: 575px) { .cs_about.cs_style_1 .cs_about_thumbnail_wrapper .cs_about_thumbnail:nth-child(3) { display: none; } } .cs_about.cs_style_1 .cs_about_thumbnail_wrapper .cs_about_thumbnail:nth-child(3) img { border: 10px solid var(--white-color); } .cs_about.cs_style_1 .cs_about_thumbnail_wrapper .cs_about_thumbnail img { width: 100%; position: relative; z-index: 1; } .cs_about.cs_style_1 .cs_esperience_text { max-width: 275px; right: 0; top: 0; position: absolute; z-index: 3; } .cs_about.cs_style_1 .cs_esperience_text::after { content: ""; width: 100%; height: 100%; background-color: var(--white-color); opacity: 0; position: absolute; left: 0; top: 0; } @media (max-width: 1199px) { .cs_about.cs_style_1 .cs_esperience_text { right: initial; left: 56%; } } @media (max-width: 767px) { .cs_about.cs_style_1 .cs_esperience_text { left: 51%; } } @media (max-width: 575px) { .cs_about.cs_style_1 .cs_esperience_text { max-width: 300px; left: initial; right: 0; padding: 10px; } .cs_about.cs_style_1 .cs_esperience_text::after { opacity: 0.3; } } .cs_about.cs_style_1 .cs_experience_title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 5px; position: relative; z-index: 1; } .cs_about.cs_style_1 .cs_experience_title span { display: inline-block; } @media (max-width: 1400px) { .cs_about.cs_style_1 .cs_experience_title .cs_fs_100 { font-size: 80px; } .cs_about.cs_style_1 .cs_experience_title .cs_fs_50 { font-size: 40px; } } .cs_about.cs_style_1 .cs_about_text { padding-left: 30px; } @media (max-width: 1199px) { .cs_about.cs_style_1 .cs_about_text { padding-left: 0; } } .cs_about.cs_style_1 .cs_features_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 1199px) { .cs_about.cs_style_1 .cs_features_list { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 50px; } } @media (max-width: 575px) { .cs_about.cs_style_1 .cs_features_list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 30px; } } .cs_about.cs_style_1 .cs_iconbox.cs_style_1 { max-width: 260px; } @media (max-width: 575px) { .cs_about.cs_style_1 .cs_iconbox.cs_style_1 { max-width: 100%; } } .cs_about.cs_style_1 .cs_iconbox.cs_style_1:nth-child(2) { padding-left: 50px; border-left: 1px solid var(--border-color); } @media (max-width: 767px) { .cs_about.cs_style_1 .cs_iconbox.cs_style_1:nth-child(2) { padding-left: 0; border-left: 0; } } .cs_about.cs_style_1 .cs_about_btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 38px; } @media (max-width: 440px) { .cs_about.cs_style_1 .cs_about_btns { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 30px; } } .cs_about.cs_style_1 .cs_avatar.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .cs_about.cs_style_1 .cs_avatar.cs_style_1 .cs_avatar_thumbnail { width: 60px; height: 60px; padding: 5px; border: 1px solid var(--accent-color); } .cs_about.cs_style_1 .cs_avatar.cs_style_1 .cs_avatar_thumbnail img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: inherit; } .cs_about.cs_style_1 .cs_phone_call { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; position: absolute; z-index: 5; right: 0; bottom: 10px; } @media (max-width: 1199px) { .cs_about.cs_style_1 .cs_phone_call { right: initial; left: 56%; } } @media (max-width: 575px) { .cs_about.cs_style_1 .cs_phone_call { left: inherit; right: 0; position: initial; margin-top: 10px; } } .cs_about.cs_style_1 .cs_phone_call .cs_phone_icon { width: 55px; height: 55px; -webkit-box-flex: 0; -ms-flex: none; flex: none; position: relative; } @media (max-width: 575px) { .cs_about.cs_style_1 .cs_phone_call .cs_phone_icon { color: var(--white-color); } } .cs_about.cs_style_1 .cs_phone_call .cs_phone_icon::after { content: ""; width: 100%; height: 100%; background-color: var(--accent-color); opacity: 0.12; border-radius: inherit; position: absolute; left: 0; top: 0; } @media (max-width: 575px) { .cs_about.cs_style_1 .cs_phone_call .cs_phone_icon::after { opacity: 1; } } .cs_about.cs_style_1 .cs_phone_call .cs_phone_icon i { position: relative; z-index: 1; } .cs_about.cs_style_1 .cs_about_shape_1 { top: 50px; left: -50px; } .cs_about.cs_style_1 .cs_about_shape_1 img { -webkit-animation: circular-rotation 30s linear infinite; animation: circular-rotation 30s linear infinite; animation-direction: reverse; } @media (max-width: 1199px) { .cs_about.cs_style_1 .cs_about_shape_1 { display: none; } } .cs_about.cs_style_1 .cs_about_shape_2 { bottom: 50px; left: -120px; } @media (max-width: 1550px) { .cs_about.cs_style_1 .cs_about_shape_2 { left: -50px; } } @media (max-width: 1199px) { .cs_about.cs_style_1 .cs_about_shape_2 { display: none; } } .cs_about.cs_style_1 .cs_about_shape_2 img { -webkit-animation: circular-rotation 40s linear infinite; animation: circular-rotation 40s linear infinite; } .cs_about.cs_style_1.cs_type_1 .cs_about_thumbnail_wrapper { padding-right: 60px; padding-bottom: 34%; } @media (max-width: 575px) { .cs_about.cs_style_1.cs_type_1 .cs_about_thumbnail_wrapper { padding-bottom: 185px; } } .cs_about.cs_style_1.cs_type_1 .cs_about_thumbnail:nth-child(1) { padding-right: 13%; } @media (max-width: 575px) { .cs_about.cs_style_1.cs_type_1 .cs_about_thumbnail:nth-child(1) { padding-right: 10px; } } .cs_about.cs_style_1.cs_type_1 .cs_about_thumbnail:nth-child(2) { position: absolute; z-index: 2; right: 0; bottom: 0; padding-left: 43%; } @media (max-width: 450px) { .cs_about.cs_style_1.cs_type_1 .cs_about_thumbnail:nth-child(2) { padding-left: 175px; } } .cs_about.cs_style_1.cs_type_1 .cs_about_thumbnail:nth-child(2) img { border-top: 24px solid var(--white-color); border-left: 28px solid var(--white-color); } @media (max-width: 575px) { .cs_about.cs_style_1.cs_type_1 .cs_about_thumbnail:nth-child(2) img { border-width: 10px; } } .cs_about.cs_style_1.cs_type_1 .cs_esperience_text { color: transparent; -webkit-text-stroke: 1px var(--accent-color); display: -webkit-box; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; top: 0; left: 82%; right: initial; } @media (max-width: 575px) { .cs_about.cs_style_1.cs_type_1 .cs_esperience_text { left: initial; right: 0; padding-top: 0; } } .cs_about.cs_style_1.cs_type_1 .cs_esperience_text::after { display: none; } .cs_about.cs_style_1.cs_type_1 .cs_servicing_year { width: 172px; height: 172px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 5%; bottom: 3%; z-index: 2; } @media (max-width: 575px) { .cs_about.cs_style_1.cs_type_1 .cs_servicing_year { left: 10px; bottom: 5px; } } .cs_about.cs_style_1.cs_type_1 .cs_servicing_year svg { position: absolute; left: 0; top: 0; -webkit-animation: circular-rotation 30s linear infinite; animation: circular-rotation 30s linear infinite; } .cs_about.cs_style_1.cs_type_1 .cs_about_text { padding-left: 0; } .cs_about.cs_style_1.cs_type_1 .cs_features_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } @media (max-width: 767px) { .cs_about.cs_style_1.cs_type_1 .cs_features_list { grid-template-columns: repeat(1, 1fr); gap: 65px; margin-top: 65px; } } @-webkit-keyframes circular-rotation { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes circular-rotation { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*-------------------------------------------------------------- 19. Why Chose Us ----------------------------------------------------------------*/ .cs_features_thumbnail_1, .cs_features_thumbnail_2 { height: 100%; } .cs_features_thumbnail_1::after, .cs_features_thumbnail_2::after { content: ""; width: 100%; height: 100%; border: 2px solid var(--accent-color); position: absolute; } @media (max-width: 575px) { .cs_features_thumbnail_1::after, .cs_features_thumbnail_2::after { display: none; } } .cs_features_thumbnail_1 img, .cs_features_thumbnail_2 img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: relative; z-index: 1; } .cs_features_thumbnail_1::after { left: -25px; top: -25px; } .cs_features_thumbnail_2::after { right: -25px; bottom: -25px; } .cs_features_thumbnail_3 { padding-left: 50%; position: absolute; bottom: 0; right: 0; } .cs_features_thumbnail_3 img { border-top: 10px solid var(--white-color); border-left: 10px solid var(--white-color); border-radius: 2px; } /*----------------------------------------------- Portfolio Details Page Styling -------------------------------------------------*/ .cs_portfolio_details img { margin-bottom: 32px; } .cs_portfolio_details h2 { font-size: 30px; margin-bottom: 16px; } .cs_portfolio_details p { margin-bottom: 20px; } .cs_portfolio_details p:last-child { margin-bottom: 0; } .cs_portfolio_details .cs_list.cs_style_1 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 767px) { .cs_portfolio_details .cs_list.cs_style_1 { grid-template-columns: repeat(1, 1fr); } } .cs_portfolio_details .cs_categories { gap: 20px; } .cs_portfolio_details .cs_categories li { padding: 0 0 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; position: relative; } .cs_portfolio_details .cs_categories li::after { content: ""; width: 100%; height: 1px; background-color: var(--heading-color); opacity: 0.2; position: absolute; left: 0; bottom: 0; } .cs_portfolio_details .cs_rating_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 15px; margin: 20px 0 30px; } .cs_portfolio_details .cs_social_btns.cs_style_1 a { color: var(--heading-color); } .cs_portfolio_details .cs_social_btns.cs_style_1 a:hover { color: var(--white-color); } /*----------------------------------------------- Service Details Page Styling -------------------------------------------------*/ .cs_service_details img { margin-bottom: 36px; } .cs_service_details h2 { font-size: 30px; margin-bottom: 16px; } .cs_service_details p { margin-bottom: 16px; } /*-------------------------------------------------------------- 20. Tabs ----------------------------------------------------------------*/ .cs_tab { display: none; } .cs_tab.active { display: block; } .cs_tabs_overlay { width: 100%; height: 100%; left: 0; top: 0; opacity: 0.81; } .cs_tab_links.cs_style_1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; margin-top: -60px; } @media (max-width: 1400px) { .cs_tab_links.cs_style_1 { margin-top: 50px; } } @media (max-width: 991px) { .cs_tab_links.cs_style_1 { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .cs_tab_links.cs_style_1.cs_type_1 { gap: 0; } .cs_tab_links.cs_style_1.cs_type_1 a { background-color: var(--border-color); -webkit-box-shadow: none; box-shadow: none; padding: 6px 25px; } .cs_tab_links.cs_style_1.cs_type_2 { gap: 0; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 575px) { .cs_tab_links.cs_style_1.cs_type_2 { gap: 10px; } } .cs_tab_links.cs_style_1.cs_type_2 a { padding: 10px 35px; position: relative; background-color: transparent; z-index: 1; } .cs_tab_links.cs_style_1.cs_type_2 li { position: relative; } .cs_tab_links.cs_style_1.cs_type_2 li::after { content: ""; width: 100%; height: 100%; background-color: var(--accent-color); opacity: 0.15; position: absolute; left: 0; top: 0; -webkit-transform: skew(-16deg, 0deg); transform: skew(-16deg, 0deg); } .cs_tab_links.cs_style_1.cs_type_2 li.active a, .cs_tab_links.cs_style_1.cs_type_2 li:hover a { background-color: transparent; } .cs_tab_links.cs_style_1.cs_type_2 li.active::after, .cs_tab_links.cs_style_1.cs_type_2 li:hover::after { opacity: 1; } .cs_tab_links.cs_style_1 a { display: inline-block; padding: 12px 15px; background-color: var(--white-color); -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08); } .cs_tab_links.cs_style_1 li.active a, .cs_tab_links.cs_style_1 li:hover a { background-color: var(--accent-color); color: var(--white-color); } .cs_tab_links.cs_style_2 { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 15px; } @media (max-width: 991px) { .cs_tab_links.cs_style_2 { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .cs_tab_links.cs_style_2 li { width: 60px; height: 60px; border-radius: 50%; border: 2px solid transparent; } .cs_tab_links.cs_style_2 li a { display: block; height: 100%; width: 100%; border-radius: inherit; } .cs_tab_links.cs_style_2 li img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: inherit; } .cs_tab_links.cs_style_2 li:nth-child(1) { -webkit-transform: translate(-30px, -35px); transform: translate(-30px, -35px); } .cs_tab_links.cs_style_2 li:nth-child(3) { -webkit-transform: translateX(-90px); transform: translateX(-90px); } .cs_tab_links.cs_style_2 li.active { border-color: var(--accent-color); } @media (max-width: 991px) { .cs_tab_links.cs_style_2 li { -webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important; } } .cs_tab_body { padding-top: 60px; } @media (max-width: 991px) { .cs_tab_body { padding-top: 50px; } } .cs_tabs.cs_style_2 { padding-bottom: 84px; } /*-------------------------------------------------------------- 21. Contact ----------------------------------------------------------------*/ label { display: inline-block; margin-bottom: 4px; } .cs_form_field { display: block; width: 100%; border: 1px solid var(--border-color); min-height: 54px; padding: 12px 20px; background-color: var(--border-color); resize: none; outline: none; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .cs_form_field.form-select { -webkit-box-shadow: none; box-shadow: none; } .cs_form_field:focus { background-color: var(--white-color); border-color: var(--body-color); } .cs_contact_info_wrapper { padding-bottom: 22%; } @media (max-width: 575px) { .cs_contact_info_wrapper { padding-bottom: 50%; } } .cs_contact_info { width: 100%; max-width: 434px; padding: 60px 40px; border: 1px solid var(--accent-color); border-radius: 60px 0px 0px 0px; -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.08); position: relative; z-index: 1; } @media (max-width: 575px) { .cs_contact_info { max-width: 100%; } } .cs_contact_info .cs_line_shape { width: 92px; height: 3px; } .cs_contact_thumbnail { padding-left: 30%; position: absolute; bottom: 0; right: 0; } @media (max-width: 575px) { .cs_contact_thumbnail { padding-left: 0; } } .cs_client_info_wapper { padding: 20px 25px; -webkit-box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.06); position: absolute; top: 33%; right: 0%; -webkit-transform: translate(0%, -33%); transform: translate(0%, -33%); z-index: 2; } @media (max-width: 1199px) { .cs_client_info_wapper { top: 50%; right: 0%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); } } @media (max-width: 575px) { .cs_client_info_wapper { top: 80%; right: 30%; } } .cs_client_info_wapper h3 { margin-bottom: -2px; } .cs_form_wrapper.cs_style_1 { padding: 40px; } @media (max-width: 575px) { .cs_form_wrapper.cs_style_1 { padding: 30px 20px; } } .cs_form_wrapper.cs_style_1 h3, .cs_form_wrapper.cs_style_1 p, .cs_form_wrapper.cs_style_1 form { position: relative; z-index: 1; } .cs_form_wrapper.cs_style_1 .cs_form_field { background-color: var(--white-color); border-color: transparent; } .cs_form_wrapper.cs_style_1 .cs_form_field:focus { border-color: var(--accent-color); } .cs_form_wrapper.cs_style_1 .cs_btn.cs_style_1 i { -webkit-transform: rotate(0); transform: rotate(0); } .cs_form_wrapper.cs_style_1 .cs_btn.cs_style_1:hover i { -webkit-transform: translateX(3px); transform: translateX(3px); } .cs_contact_info_grid { display: grid; grid-template-columns: repeat(2, auto); gap: 60px 15px; } @media (min-width: 1400px) { .cs_contact_info_grid { padding-right: 40px; } } @media (max-width: 1199px) { .cs_contact_info_grid { grid-template-columns: repeat(1, auto); gap: 30px; } } @media (max-width: 991px) { .cs_contact_info_grid { grid-template-columns: repeat(2, auto); gap: 30px; } } @media (max-width: 767px) { .cs_contact_info_grid { grid-template-columns: repeat(1, auto); gap: 30px; } } .cs_social_desc .cs_social_btns.cs_style_1 { gap: 10px; } .cs_social_desc .cs_social_btns.cs_style_1 a { width: 45px; height: 45px; font-size: 16px; border: 0; } .cs_social_desc .cs_social_btns.cs_style_1 a:hover { background-color: var(--accent-color); color: var(--white-color); } .cs_navigation_map iframe { width: 100%; height: 100%; min-height: 550px; margin-bottom: -8px; -webkit-filter: grayscale(50%) brightness(100%); filter: grayscale(50%) brightness(100%); } @media (max-width: 991px) { .cs_navigation_map iframe { min-height: 400px; } } /*-------------------------------------------------------------- 22. Before After Slider ----------------------------------------------------------------*/ .cs_before_after_slider.cs_style_1 { padding-bottom: 30px; } @media (max-width: 575px) { .cs_before_after_slider.cs_style_1 { padding-bottom: 0; } } .cs_before_after_slider.cs_style_1 .cs_section_heading.cs_style_1 { position: relative; z-index: 1; } .cs_before_after_slider.cs_style_1 .cs_before_after_overlay { width: 100%; height: 63%; position: absolute; top: 0; left: 0; } @media (max-width: 991px) { .cs_before_after_slider.cs_style_1 .cs_before_after_overlay { min-height: 450px; } } @media (max-width: 575px) { .cs_before_after_slider.cs_style_1 .cs_before_after_overlay { min-height: 350px; } } .cs_before_after { width: 100%; position: relative; height: 575px; } @media (max-width: 1400px) { .cs_before_after { height: 496px; } } @media (max-width: 1199px) { .cs_before_after { height: 416px; } } @media (max-width: 991px) { .cs_before_after { height: 310px; } } @media (max-width: 767px) { .cs_before_after { height: 200px; } } @media (max-width: 575px) { .cs_before_after { height: 228px; } } .cs_before_badge { padding: 2px 25px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 100px; } @media (max-width: 991px) { .cs_before_badge { left: 20px; top: 30px; -webkit-transform: translateY(0); transform: translateY(0); } } .cs_after_badge { padding: 2px 25px; top: 50%; right: 100px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 991px) { .cs_after_badge { right: 20px; top: 30px; -webkit-transform: translateY(0); transform: translateY(0); } } .cs_before_after::before, .cs_before_after::after { content: ""; width: calc(50% - 30px); height: calc(100% - 30px); border: 1px solid var(--accent-color); position: absolute; bottom: -30px; } @media (max-width: 575px) { .cs_before_after::before, .cs_before_after::after { display: none; } } .cs_before_after::before { left: -30px; } .cs_before_after::after { right: -30px; } .cs_before_after .cs_single_slide { position: absolute; top: 0; left: 0; right: 0; height: 100%; background-position: top left; background-repeat: no-repeat; border-radius: inherit; z-index: 1; } .cs_before_after .cs_single_slide.cs_before { right: 50%; overflow: hidden; } .cs_before_after .cs_handle_before_after { position: absolute; top: 0; bottom: 0; width: 30px; left: 50%; margin-left: -15px; cursor: ew-resize; } .cs_handle_before_after span { height: 110px; width: 110px; border-radius: 50%; padding: 20px; background-color: var(--accent-color); border: 5px solid var(--white-color); position: absolute; z-index: 2; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 991px) { .cs_handle_before_after span { -webkit-transform: translate(-50%, -50%) scale(0.75); transform: translate(-50%, -50%) scale(0.75); } } @media (max-width: 575px) { .cs_handle_before_after span { -webkit-transform: translate(-50%, -50%) scale(0.5); transform: translate(-50%, -50%) scale(0.5); } } .cs_before_after .cs_handle_before_after:before { content: ""; display: block; position: absolute; top: 0; width: 3px; height: 100%; left: 50%; margin-left: -1px; background: var(--accent-color); z-index: 2; } .cs_handle_before_after span:before, .cs_handle_before_after span:after { content: ""; color: var(--white-color); position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .cs_handle_before_after span:before { content: ""; left: 20px; width: 0; height: 0; border-right: 10px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .cs_handle_before_after span:after { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent; right: 20px; }/*# sourceMappingURL=style.css.map */