/*=============================================================== >> TABLE OF CONTENTS: ================================================================= 01 Google Fonts 02. All Variable 03. Typography 04. Preloader 05. Spacing 06. General 07. Slider 08. Video Modal 09. Header 10. Footer 11. Hero 12. Sidebar 13. CTA 14. Testimonial 15. Team 16. Card 17. Service 18. Contact 19. Blog Post 20. Feature 21. Pricing 22. Video 23. Gradiant 24. Timetable ===============================================================*/ /*========================================================== 01 Google Fonts Integration ============================================================*/ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&display=swap"); /*=========================================================== 02. All Variable =============================================================*/ :root { --heading-color: #fff; --body-color: rgba(255, 255, 255, 0.6); --gray-color: rgba(255, 255, 255, 0.04); --black-color: #222; --border-color: rgba(255, 255, 255, 0.1); /* --accent-color: #f48916; */ --heading-font: "Sora", sans-serif; --body-font: "Roboto", sans-serif; } /*========================================================= 03. Typography ===========================================================*/ body, html { color: var(--body-color); background-color: #222222; font-family: var(--body-font); font-size: 16px; line-height: 1.62em; font-weight: 400; overflow-x: clip; } body { overscroll-behavior: smooth; } h1, h2, h3, h4, h5, h6 { clear: both; color: var(--heading-color); padding: 0; margin: 0 0 20px 0; font-weight: 600; line-height: 1.2em; font-family: var(--heading-font); } .cs_heading_font { font-family: var(--heading-font); } .cs_secondary_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; transition: all 0.3s ease; } button { color: inherit; 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 { transition: all 0.4s ease; } label { margin-bottom: 5px; } /*=========================================================== 04. Preloader =============================================================*/ .cs_preloader { position: fixed; width: 100%; height: 100%; background: var(--black-color); top: 0; left: 0; z-index: 10005; overflow: hidden; transition: all 0.4s ease-in-out; } .cs_preloader .cs_preloader_in { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100px; height: 100px; animation: rotateAnim 2s infinite ease; } .cs_preloader span { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--accent-color); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; animation: translateAnim 2s infinite ease; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); } .cs_preloader span:nth-child(1) { top: -25px; animation-name: translateAnimTop; } .cs_preloader span:nth-child(2) { left: 25px; animation-name: translateAnimRight; } .cs_preloader span:nth-child(3) { top: 25px; animation-name: translateAnimBottom; } .cs_preloader span:nth-child(4) { left: -25px; animation-name: translateAnimLeft; } .cs_preloader .cs_preloader_text { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); font-size: 16px; color: var(--accent-color); text-transform: uppercase; letter-spacing: 2px; } @keyframes rotateAnim { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(90deg); } 75% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } } @keyframes translateAnimTop { 0% { transform: translateY(0px); background: var(--accent-color); } 25% { transform: translateY(0px); background: var(--accent-color); } 50% { transform: translateY(-20px); background: none; } 75% { transform: translateY(-20px); background: none; } 100% { transform: translateY(0px); background: var(--accent-color); } } @-webkit-keyframes translateAnimTop { 0% { background: var(--accent-color); } 25% { background: var(--accent-color); } 50% { background: none; } 75% { background: none; } 100% { background: var(--accent-color); } } @keyframes translateAnimBottom { 0% { transform: translateY(0px); background: var(--accent-color); } 25% { transform: translateY(0px); background: var(--accent-color); } 50% { transform: translateY(20px); background: none; } 75% { transform: translateY(20px); background: none; } 100% { transform: translateY(0px); background: var(--accent-color); } } @-webkit-keyframes translateAnimBottom { 0% { background: var(--accent-color); } 25% { background: var(--accent-color); } 50% { background: none; } 75% { background: none; } 100% { background: var(--accent-color); } } @keyframes translateAnimLeft { 0% { transform: translateX(0px); background: var(--accent-color); } 25% { transform: translateX(0px); background: var(--accent-color); } 50% { transform: translateX(-20px); background: none; } 75% { transform: translateX(-20px); background: none; } 100% { transform: translateX(0px); background: var(--accent-color); } } @-webkit-keyframes translateAnimLeft { 0% { background: var(--accent-color); } 25% { background: var(--accent-color); } 50% { background: none; } 75% { background: none; } 100% { background: var(--accent-color); } } @keyframes translateAnimRight { 0% { transform: translateX(0px); background: var(--accent-color); } 25% { transform: translateX(0px); background: var(--accent-color); } 50% { transform: translateX(20px); background: none; } 75% { transform: translateX(20px); background: none; } 100% { transform: translateX(0px); background: var(--accent-color); } } @-webkit-keyframes translateAnimRight { 0% { background: var(--accent-color); } 25% { background: var(--accent-color); } 50% { background: none; } 75% { background: none; } 100% { background: var(--accent-color); } } /*======================================================= 05. 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; } @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_mb_lg_1 { margin-bottom: 1px; } .cs_mb_lg_2 { margin-bottom: 2px; } .cs_mb_lg_3 { margin-bottom: 3px; } .cs_mb_lg_4 { margin-bottom: 4px; } .cs_mb_lg_5 { margin-bottom: 5px; } .cs_mb_lg_6 { margin-bottom: 6px; } .cs_mb_lg_7 { margin-bottom: 7px; } .cs_mb_lg_8 { margin-bottom: 8px; } .cs_mb_lg_9 { margin-bottom: 9px; } .cs_mb_lg_10 { margin-bottom: 10px; } .cs_mb_lg_11 { margin-bottom: 11px; } .cs_mb_lg_12 { margin-bottom: 12px; } .cs_mb_lg_13 { margin-bottom: 13px; } .cs_mb_lg_14 { margin-bottom: 14px; } .cs_mb_lg_15 { margin-bottom: 15px; } .cs_mb_lg_16 { margin-bottom: 16px; } .cs_mb_lg_17 { margin-bottom: 17px; } .cs_mb_lg_18 { margin-bottom: 18px; } .cs_mb_lg_19 { margin-bottom: 19px; } .cs_mb_lg_20 { margin-bottom: 20px; } .cs_mb_lg_21 { margin-bottom: 21px; } .cs_mb_lg_22 { margin-bottom: 22px; } .cs_mb_lg_23 { margin-bottom: 23px; } .cs_mb_lg_24 { margin-bottom: 24px; } .cs_mb_lg_25 { margin-bottom: 25px; } .cs_mb_lg_26 { margin-bottom: 26px; } .cs_mb_lg_27 { margin-bottom: 27px; } .cs_mb_lg_28 { margin-bottom: 28px; } .cs_mb_lg_29 { margin-bottom: 29px; } .cs_mb_lg_30 { margin-bottom: 30px; } .cs_mb_lg_31 { margin-bottom: 31px; } .cs_mb_lg_32 { margin-bottom: 32px; } .cs_mb_lg_33 { margin-bottom: 33px; } .cs_mb_lg_34 { margin-bottom: 34px; } .cs_mb_lg_35 { margin-bottom: 35px; } .cs_mb_lg_36 { margin-bottom: 36px; } .cs_mb_lg_37 { margin-bottom: 37px; } .cs_mb_lg_38 { margin-bottom: 38px; } .cs_mb_lg_39 { margin-bottom: 39px; } .cs_mb_lg_40 { margin-bottom: 40px; } .cs_mb_lg_41 { margin-bottom: 41px; } .cs_mb_lg_42 { margin-bottom: 42px; } .cs_mb_lg_43 { margin-bottom: 43px; } .cs_mb_lg_44 { margin-bottom: 44px; } .cs_mb_lg_45 { margin-bottom: 45px; } .cs_mb_lg_46 { margin-bottom: 46px; } .cs_mb_lg_47 { margin-bottom: 47px; } .cs_mb_lg_48 { margin-bottom: 48px; } .cs_mb_lg_49 { margin-bottom: 49px; } .cs_mb_lg_50 { margin-bottom: 50px; } .cs_mb_lg_51 { margin-bottom: 51px; } .cs_mb_lg_52 { margin-bottom: 52px; } .cs_mb_lg_53 { margin-bottom: 53px; } .cs_mb_lg_54 { margin-bottom: 54px; } .cs_mb_lg_55 { margin-bottom: 55px; } .cs_mb_lg_56 { margin-bottom: 56px; } .cs_mb_lg_57 { margin-bottom: 57px; } .cs_mb_lg_58 { margin-bottom: 58px; } .cs_mb_lg_59 { margin-bottom: 59px; } .cs_mb_lg_60 { margin-bottom: 60px; } .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; } .cs_height_lg_111 { height: 111px; } .cs_height_lg_112 { height: 112px; } .cs_height_lg_113 { height: 113px; } .cs_height_lg_114 { height: 114px; } .cs_height_lg_115 { height: 115px; } .cs_height_lg_116 { height: 116px; } .cs_height_lg_117 { height: 117px; } .cs_height_lg_118 { height: 118px; } .cs_height_lg_119 { height: 119px; } .cs_height_lg_120 { height: 120px; } .cs_height_lg_121 { height: 121px; } .cs_height_lg_122 { height: 122px; } .cs_height_lg_123 { height: 123px; } .cs_height_lg_124 { height: 124px; } .cs_height_lg_125 { height: 125px; } .cs_height_lg_126 { height: 126px; } .cs_height_lg_127 { height: 127px; } .cs_height_lg_128 { height: 128px; } .cs_height_lg_129 { height: 129px; } .cs_height_lg_130 { height: 130px; } .cs_height_lg_131 { height: 131px; } .cs_height_lg_132 { height: 132px; } .cs_height_lg_133 { height: 133px; } .cs_height_lg_134 { height: 134px; } .cs_height_lg_135 { height: 135px; } .cs_height_lg_136 { height: 136px; } .cs_height_lg_137 { height: 137px; } .cs_height_lg_138 { height: 138px; } .cs_height_lg_139 { height: 139px; } .cs_height_lg_140 { height: 140px; } .cs_height_lg_141 { height: 141px; } .cs_height_lg_142 { height: 142px; } .cs_height_lg_143 { height: 143px; } .cs_height_lg_144 { height: 144px; } .cs_height_lg_145 { height: 145px; } .cs_height_lg_146 { height: 146px; } .cs_height_lg_147 { height: 147px; } .cs_height_lg_148 { height: 148px; } .cs_height_lg_149 { height: 149px; } .cs_height_lg_150 { height: 150px; } } /*======================================================== 06. General ==========================================================*/ @media (min-width: 1400px) { .container { max-width: 1264px; } } .cs_fs_14 { font-size: 14px; line-height: 1.5em; } .cs_fs_16 { font-size: 16px; line-height: 1.5em; } .cs_fs_18 { font-size: 18px; line-height: 28px; } .cs_fs_20 { font-size: 20px; line-height: 1.35em; } .cs_fs_24 { font-size: 24px; line-height: 1.33em; } .cs_fs_32 { font-size: 32px; line-height: 1.31em; } @media (max-width: 1199px) { .cs_fs_32 { font-size: 28px; } } .cs_fs_42 { font-size: 42px; line-height: 1.34em; } .cs_fs_54 { font-size: 54px; line-height: 1.185em; } @media (max-width: 1199px) { .cs_fs_54 { font-size: 48px; } } @media (max-width: 767px) { .cs_fs_54 { font-size: 42px; } } @media (max-width: 575px) { .cs_fs_54 { font-size: 34px; } } .cs_fs_72 { font-size: 72px; line-height: 1.139em; } @media (max-width: 1199px) { .cs_fs_72 { font-size: 60px; } } @media (max-width: 767px) { .cs_fs_72 { font-size: 50px; } } @media (max-width: 575px) { .cs_fs_72 { font-size: 42px; } } .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_mp_0 { list-style: none; margin: 0; padding: 0; } .cs_gap_y_24 { gap: 24px 0; } .cs_gap_y_30 { gap: 30px 0; } .cs_gap_y_40 { gap: 40px 0; } .cs_gap_y_50 { gap: 50px 0; } hr { margin: 0; padding: 0; border: none; border-top: 1px solid currentColor; opacity: 1; } .cs_bg_filed { background-size: cover; background-repeat: no-repeat; background-position: center; } .cs_center { display: flex; align-items: center; justify-content: center; } .cs_center_column { display: flex; flex-direction: column; align-items: center; justify-content: center; } .cs_heading_color { color: var(--heading-color); } .cs_accent_color { color: var(--accent-color); } .cs_gray_color { color: var(--gray-color); } .cs_body_color { color: var(--body-color); } .cs_btn_style_1 { background-color: var(--accent-color); color: var(--black-color); padding: 11px 32px; font-weight: 600; letter-spacing: 0.24px; outline: none; display: inline-flex; justify-content: center; align-items: center; height: 48px; border: 1px solid var(--accent-color); text-wrap: nowrap; } .cs_btn_style_1:hover { color: var(--heading-color); background-color: transparent; border: 1px solid var(--heading-color); } /*=================================================== Start Scroll Top Button =====================================================*/ .cs_scrollup { width: 48px; height: 48px; border: 0; position: fixed; right: 30px; bottom: 30px; font-size: 24px; z-index: 10000; opacity: 0; transform: translateY(120px); color: var(--black-color); background-color: var(--accent-color); transition: all 0.5s ease; } .cs_scrollup.active { opacity: 1; transform: translateY(0); } .cs_scrollup:hover { background-color: var(--heading-color); } /*=================================================== End Scroll Top Button =====================================================*/ .cs_text_strock span { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--heading-color); color: transparent; text-transform: uppercase; } .cs_text_strock{ text-transform: uppercase; } .cs_section_heading_style_2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; position: relative; z-index: 6; } .cs_section_heading_style_2 .cs_section_heading_column_1 { max-width: 855px; } @media (max-width: 991px) { .cs_section_heading_style_2 { flex-direction: column; align-items: flex-start; } } /*====================================================== Animated Text ========================================================*/ @media (max-width: 991px) { br { display: none; } } .animationonhover { position: relative; overflow: hidden; } .animationonhover>* { position: relative; z-index: 2; } .animationonhover::before { content: ""; position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, -50%); background: radial-gradient(var(--accent-color), transparent, transparent); width: 200%; height: 200%; opacity: 0; transition: 0.5s, top 0s, left 0s; border-radius: 20px; } .animationonhover:hover::before { opacity: 1; } .animationonhover::after { content: ""; position: absolute; inset: 1px; background: #2d2d2d; border-radius: 0px; } .cs_hover_layer, .cs_hover_layer1, .cs_hover_layer3, .cs_hover_layer4 { position: relative; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transform: perspective(600px) translate3d(0, 0, 0); } /*====================================================== 07. Slider ========================================================*/ .cs_slider { position: relative; } .cs_full_screen_right { width: calc(60vw + 650px); } .slick-arrow { cursor: pointer; } .draggable { cursor: url(../img/drag.png) 16 9, ew-resize !important; } .slick-slide>div { display: flex; flex-direction: column; } .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_36 .slick-slide { padding-left: 18px; padding-right: 18px; } .cs_slider_gap_36 .slick-list { margin-left: -18px; margin-right: -18px; } .cs_slider_gap_100 .slick-slide { padding-left: 50px; padding-right: 50px; } .cs_slider_gap_100 .slick-list { margin-left: -50px; margin-right: -50px; } @media (max-width: 991px) { .cs_slider_gap_100 .slick-slide { padding-left: 15px; padding-right: 15px; } .cs_slider_gap_100 .slick-list { margin-left: -15px; margin-right: -15px; } } .cs_pagination.cs_style_1 { display: flex; justify-content: center; position: relative; z-index: 6; } .cs_pagination.cs_style_1 ul { list-style: none; padding: 0; margin: 0; display: flex !important; gap: 12px; } .cs_pagination.cs_style_1 li { display: flex; flex: 1; } .cs_pagination.cs_style_1 li button { width: 40px; height: 6px; font-size: 0; color: transparent; padding: 0; background-color: rgba(255, 255, 255, 0.2); border-radius: 8px; border: none; outline: none; cursor: pointer; transition: all 0.3s ease; } .cs_pagination.cs_style_1 li:hover button { background-color: var(--accent-color); } .cs_pagination.cs_style_1 li.slick-active button { background-color: var(--accent-color); width: 70px; } /*====================================================== 08. Video Modal ========================================================*/ .cs-pd-video .cs_video_open, .cs-sample-img .cs_video_open { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--heading-color); font-size: 68px; 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%; transition-delay: 0.3s; } .cs_video_popup.active { left: 0; transition-delay: 0s; left: 0; } .cs_video_popup-overlay { position: absolute; left: 0; right: 0; background: #000; 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; transition: all 0.4s ease-out; transform: translateY(100px); opacity: 0; visibility: hidden; padding: 15px; } .cs_video_popup.active .cs_video_popup-content { 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; 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; transform: rotate(-45deg); 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; transform: rotate(45deg); 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*/ /*======================================================= 09. Header =========================================================*/ .cs_site_header { z-index: 777; } .cs_site_header.cs_style_1 .cs_main_header_in { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; height: 100px; position: relative; transition: all 0.3s ease; } .cs_site_header.cs_style_1 .cs_main_header_right { display: flex; align-items: center; gap: 30px; z-index: 888; } .cs_site_header.cs_style_1 .cs_main_header_right .cs_btn_style_1 { color: var(--heading-color); background: transparent; border: 1px solid var(--heading-color); } .cs_site_header.cs_style_1 .cs_main_header_right .cs_btn_style_1:hover { color: var(--black-color); background: var(--accent-color); border: 1px solid var(--accent-color); } @media (max-width: 1199px) { .cs_site_header.cs_style_1 .cs_main_header_right { margin-right: 50px; } } @media (max-width: 480px) { .cs_site_header.cs_style_1 .cs_main_header_right { display: none; } } .cs_fixed_header, .cs_sticky_header { position: fixed !important; width: 100%; z-index: 999; } .cs_nav ul { padding: 0; list-style: none; } .cs_sticky_header { position: fixed; top: 0; left: 0; transition: all 0.3s ease; } .cs_sticky_header.cs_sticky_active { background-color: var(--black-color); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3); } .cs_sticky_header.cs_sticky_active .cs_main_header_in { height: 80px; } @media screen and (min-width: 1200px) { .cs_site_branding { margin-right: 80px; } .cs_site_header.cs_style_1 .cs_main_header_left { height: 100%; display: flex; justify-content: center; align-items: center; } .cs_nav { height: 100%; line-height: 1.6em; } .cs_nav .cs_nav_list_wrap { height: 100%; } .cs_nav .cs_nav_list { display: flex !important; margin-bottom: 0; height: inherit; } .cs_nav .cs_nav_list>li { margin-right: 50px; height: inherit; position: relative; } .cs_nav .cs_nav_list>li:last-child { margin-right: 0; } .cs_nav .cs_nav_list>li>a { display: inline-flex; height: inherit; align-items: center; } .cs_nav .cs_nav_list>li>a:hover { color: var(--heading-color); } .cs_nav .cs_nav_list>li:hover>ul { top: 100%; opacity: 1; visibility: visible; transition: all 0.4s ease; } .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: 8px; width: 8px; border: 2px solid currentColor; transform: rotate(45deg); border-left: 0; border-top: 0; margin-left: 8px; position: relative; top: -1px; border-radius: 0px 0px 2px 0px; } .cs_nav .cs_nav_list ul { width: 250px; background-color: var(--black-color); position: absolute; left: 0; top: calc(100% + 15px); box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.3); padding: 10px 0; opacity: 0; visibility: hidden; } .cs_nav .cs_nav_list ul::before { content: ""; position: absolute; height: 10px; width: 10px; background-color: var(--black-color); transform: rotate(45deg); left: 20px; top: -5px; } .cs_nav .cs_nav_list ul a { display: block; line-height: inherit; padding: 10px 20px; } .cs_nav .cs_nav_list ul a:hover { color: var(--heading-color); } .cs_menu_toggle, .cs_menu_dropdown_toggle { display: none; } } @media screen and (max-width: 1199px) { .cs_main_header .container { max-width: 100%; } .cs_menu_dropdown_toggle { position: absolute; height: 40px; width: 100%; top: 0; left: 0; display: flex; align-items: center; 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%; transform: translate(-50%, -50%); height: 2px; width: 10px; background-color: currentColor; transition: all 0.3s ease; } .cs_menu_dropdown_toggle span:before { transform: translate(-50%, -50%) rotate(90deg); } .cs_menu_dropdown_toggle.active span:before { transform: translate(-50%, -50%) rotate(0deg); } .cs_site_branding { position: relative; z-index: 101; } .cs_nav .cs_nav_list_wrap { position: fixed; width: 100vw; height: 100%; left: -100vw; background-color: var(--black-color); color: var(--heading-color); top: 0px; line-height: 1.6em; padding: 100px 0 10px; transition: all 0.4s ease; } .cs_nav .cs_nav_list_wrap.cs_active { left: 0vw; } .cs_nav .cs_nav_list { height: 100%; overflow-y: auto; margin-bottom: 0; } .cs_nav .cs_nav_list ul { padding-left: 15px; display: none; } .cs_nav .cs_nav_list a { position: relative; 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; } .cs_site_header.cs_style_1 { top: 0; } .cs_site_header.cs_style_1 .cs_main_header_in { height: 80px; } .cs_site_header.cs_style_1 .cs_nav { display: flex; } /*======================================== Mobile Menu Button ========================================*/ .cs_menu_toggle { display: inline-block; width: 30px; height: 27px; cursor: pointer; position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: var(--heading-color); } .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: 50%; transform: translateY(-50%); transition-duration: 0s; transition-delay: 0.2s; } .cs_menu_toggle span:before { content: ""; position: absolute; margin-top: -9px; transition-property: margin, transform; transition-duration: 0.2s; transition-delay: 0.2s, 0s; } .cs_menu_toggle span:after { content: ""; position: absolute; margin-top: 9px; transition-property: margin, transform; transition-duration: 0.2s; transition-delay: 0.2s, 0s; } .cs_toggle_active span { background-color: rgba(0, 0, 0, 0); transition-delay: 0.2s; } .cs_toggle_active span:before { margin-top: 0; transform: rotate(45deg); transition-delay: 0s, 0.2s; } .cs_toggle_active span:after { margin-top: 0; transform: rotate(-45deg); transition-delay: 0s, 0.2s; } } /*=========================================================== 10. Footer =============================================================*/ .cs_footer_style_1 .cs_footer_row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 25px; padding: 74px 0 45px; } .cs_footer_style_1 .cs_footer_row .cs_footer_col { flex: none; max-width: 150px; } .cs_footer_style_1 .cs_footer_row .cs_footer_col:last-child { flex: 1; max-width: 451px; } .cs_footer_style_1 .cs_footer_row .cs_footer_widget_title { font-size: 16px; margin-bottom: 18px; font-weight: 700; font-family: var(--body-font); line-height: 1.625em; } .cs_footer_style_1 .cs_footer_row .cs_footer_widget_menu li:not(:last-child) { margin-bottom: 0px; } .cs_footer_style_1 .cs_footer_row .cs_footer_widget_menu a { line-height: 1.625em; background-repeat: no-repeat; background-image: linear-gradient(90deg, currentColor 0, currentColor 100%); transition: background-size 0.42s cubic-bezier(0.49, 0.49, 0.08, 1), color 0.27s ease-out; background-position: 100% calc(100% - 0px); background-size: 0 1px; } .cs_footer_style_1 .cs_footer_row .cs_footer_widget_menu a:hover { background-size: 100% 1px; background-position: 0 calc(100% - 0px); } .cs_footer_style_1 .cs_footer_row .cs_text_widget { display: flex; } .cs_footer_style_1 .cs_footer_row .cs_footer_widget+.cs_footer_widget { margin-top: 10px; } .cs_footer_style_1 .cs_footer_row .cs_social_btns { display: flex; margin-top: 34px; } .cs_footer_style_1 .cs_footer_row .cs_social_btns a { background: var(--heading-color); opacity: 0.5; height: 32px; width: 32px; border-radius: 50%; text-align: center; font-size: 12px; font-weight: 500; line-height: 2.66em; margin-right: 12px; color: rgb(0, 0, 0); } .cs_footer_style_1 .cs_footer_row .cs_social_btns a:hover { background-color: var(--accent-color); opacity: 1; } .cs_footer_style_1 { /*========================================== Newsletter ============================================*/ } .cs_footer_style_1 .cs_newsletter.cs_style_1 { display: flex; gap: 0px 14px; } .cs_footer_style_1 .cs_newsletter.cs_style_1 .cs_newsletter_input { border: none; outline: none; line-height: 1.625em; min-width: 276px; padding: 11px 20px; } .cs_footer_style_1 .cs_newsletter.cs_style_1 .cs_newsletter_input::placeholder { color: var(--black-color); opacity: 0.5; } .cs_footer_style_1 .cs_newsletter.cs_style_1 .cs_newsletter_btn { width: 161px; background-color: var(--accent-color); color: var(--black-color); padding: 11px 32px; font-weight: 600; letter-spacing: 0.24px; outline: none; display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--accent-color); } .cs_footer_style_1 .cs_newsletter.cs_style_1 .cs_newsletter_btn:hover { color: var(--heading-color); background: transparent; border: 1px solid var(--heading-color); } @media (max-width: 767px) { .cs_footer_style_1 .cs_footer_row { flex-direction: column; } } @media (max-width: 475px) { .cs_footer_style_1 .cs_newsletter.cs_style_1 { flex-direction: column; gap: 20px; } .cs_footer_style_1 .cs_newsletter.cs_style_1 .cs_newsletter_btn { width: 100%; } } /*======================================================= 11. Hero =========================================================*/ .cs_hero_style_1 .cs_section_heading_style_1 { width: min(100%, 760px); } .cs_hero_style_1 .cs_hero_btns { display: flex; flex-wrap: wrap; gap: 15px 18px; } .cs_hero_style_1 .cs_hero_btns a:last-child { color: var(--heading-color); background: transparent; border: 1px solid var(--heading-color); } .cs_hero_style_1 .cs_hero_btns a:last-child:hover { color: var(--black-color); background: var(--accent-color); border: 1px solid var(--accent-color); } .cs_hero_style_1 .cs_hero_content { border: 1px solid; border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1; background: rgba(255, 255, 255, 0.03); padding: 35px 40px; gap: 25px; display: grid; grid-template-columns: repeat(4, minmax(150px, auto)); } .cs_hero_style_1 .cs_hero_content .cs_hero_content_style_1 { max-width: 265px; } .cs_hero_style_1 .cs_hero_content .cs_hero_content_heading { line-height: 1.238em; letter-spacing: 2px; gap: 0px 2px; display: flex; } @media (max-width: 991px) { .cs_hero_style_1 .cs_hero_content { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .cs_hero_style_1 .cs_hero_content { padding: 30px 15px; } } @media (max-width: 420px) { .cs_hero_style_1 .cs_hero_btns { flex-direction: column; } .cs_hero_style_1 .cs_hero_btns a { width: 100%; } .cs_hero_style_1 .cs_hero_content { grid-template-columns: repeat(1, 1fr); } } .cs_hero_style_2 .cs_section_heading_style_1 { width: min(100%, 900px); } .cs_hero_style_2 .cs_section_heading_style_3 { width: min(100%, 1200px); } .breadcrumb-item+.breadcrumb-item::before { color: var(--body-color); content: var(--bs-breadcrumb-divider, ">"); } .breadcrumb-item.active { color: var(--heading-color); } /*======================================================= 12. Sidebar =========================================================*/ .cs_right_sidebar { padding-left: 40px; } @media (max-width: 991px) { .cs_right_sidebar { padding-left: 0px; padding-top: 60px; } } .cs_sidebar_item:not(:last-child) { margin-bottom: 45px; } .cs_sidebar_search input { display: block; width: 100%; background-color: transparent; outline: none; border: 1px solid var(--heading-color); padding: 9px 40px 9px 15px; transition: all 0.3sease; color: var(--heading-color); } .cs_sidebar_search input:focus { border-color: var(--accent-color); } .cs_sidebar_search_btn { position: absolute; border: none; outline: none; bottom: 0; right: 0; padding: 10px 14px; cursor: pointer; background-color: var(--accent-color); transition: all 0.3s ease; color: var(--black-color); } .cs_sidebar_search_btn:hover { background-color: var(--gray-color); color: var(--accent-color); } .cs_sidebar_widget_title { border-bottom: 1px solid var(--heading-color); padding-bottom: 10px; } .widget_categories ul li, .widget_archive ul li { padding-left: 30px; position: relative; } .widget_categories ul li i, .widget_archive ul li i { position: absolute; left: 0; top: 5px; } .widget_categories ul li:not(:last-child), .widget_archive ul li:not(:last-child) { margin-bottom: 15px; } .cs_recent_posts li:not(:last-child) { margin-bottom: 20px; } .cs_recent_post { display: flex; align-items: center; } .cs_recent_post .cs_recent_post_thumb { height: 70px; width: 70px; flex: none; overflow: hidden; margin-right: 15px; } .cs_recent_post .cs_recent_post_thumb img { width: 100%; height: 100%; object-fit: cover; } .cs_recent_post .cs_recent_post_thumb:hover .cs_recent_post_thumb_in { transform: scale(1.06); } .cs_recent_post .cs_recent_post_thumb_in { transition: all 0.4s ease; } .cs_recent_post .cs_recent_post_title a { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .tagcloud { display: flex; flex-wrap: wrap; margin: -5px; } .tag-cloud-link { border: 1px solid var(--body-color); padding: 5px 15px; display: inline-block; margin: 5px; color: var(--heading-color); } .tag-cloud-link:hover { color: var(--black-color); background-color: var(--accent-color); border-color: var(--accent-color); } /*======================================================== 13. CTA ==========================================================*/ .cs_cta_style_1 .cs_cta_content, .cs_cta_style_5 .cs_cta_content { width: min(100%, 656px); } .cs_cta_style_1 .cs_cta_content p, .cs_cta_style_5 .cs_cta_content p { width: min(100%, 305px); } .cs_cta_style_2 .cs_cta_content { width: min(100%, 596px); } @media (max-width: 991px) { .cs_cta_style_2 .cs_cta_content { width: 100%; } } .cs_cta_style_3 .cs_cta_content { width: min(100%, 840px); } .cs_cta_style_3 .cs_cta_content h2 { margin-bottom: 85px; } @media (max-width: 991px) { .cs_cta_style_3 .cs_cta_content h2 { margin-bottom: 50px; } } @media (max-width: 991px) { .cs_cta_style_4 .cs_cta_content { flex-direction: column; align-items: start !important; } } .cs_cta_style_4 .cs_cta_title { width: min(100%, 810px); } @media (max-width: 991px) { .cs_cta_style_4 .cs_cta_title { margin-bottom: 40px !important; } } /*======================================================= 14. Testimonial =========================================================*/ .cs_testimonial_card { height: 100%; border: 1px solid; border-image: linear-gradient(270deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1; background: var(--gray-color); } @media (max-width: 520px) { .cs_testimonial_card { flex-direction: column; } } .cs_testimonial_card .cs_testimonial_image { width: 37%; flex: none; height: 100%; overflow: hidden; position: relative; } .cs_testimonial_card .cs_testimonial_image img { width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease; } @media (max-width: 520px) { .cs_testimonial_card .cs_testimonial_image { width: 100%; height: auto; } } .cs_testimonial_card .cs_testimonial_content { padding: 20px 40px; display: flex; flex-direction: column; justify-content: center; } .cs_testimonial_card .cs_testimonial_content .cs_testimonial_rating { color: var(--accent-color); font-size: 16px; line-height: 1em; } .cs_testimonial_card .cs_testimonial_content .cs_testimonial_user { font-weight: 700; } .cs_testimonial_card:hover .cs_testimonial_image img { transform: scale(1.05); transform-origin: center left; } @media (max-width: 1199px) { .cs_testimonial_card .cs_testimonial_content { padding: 20px; } } /*========================================================= 15. Team ===========================================================*/ .cs_about_style_1 { gap: 30px; position: relative; z-index: 1; } .cs_about_style_1 .cs_about_image { width: 42%; gap: 0px 20px; } .cs_about_style_1 .cs_about_img_1 { width: 40%; } .cs_about_style_1 .cs_about_img_2 { width: 60%; } .cs_about_style_1 .cs_section_heading_style_1 { width: 51%; flex-direction: column; } .cs_about_style_1 .cs_section_heading_style_1 h2 { margin-bottom: 60px; } @media (max-width: 1399px) { .cs_about_style_1 .cs_section_heading_style_1 { width: 55%; } } @media (max-width: 1199px) { .cs_about_style_1 .cs_section_heading_style_1 h2 { margin-bottom: 25px; } } @media (max-width: 991px) { .cs_about_style_1 { flex-direction: column; } .cs_about_style_1 .cs_about_image { width: 100%; } .cs_about_style_1 .cs_about_image img { width: 100%; } .cs_about_style_1 .cs_section_heading_style_1 { width: 100%; } } .cs_class_about_section .cs_about_image { width: min(100%, 715px); } .cs_class_about_section img { height: 100%; object-fit: cover; } .cs_class_about_section .cs_about_content { width: min(100%, 420px); } @media (max-width: 991px) { .cs_class_about_section .cs_about_content { width: 100%; } } .cs_class_about_section .cs_feature_list li { margin-bottom: 25px; position: relative; padding-left: 0px; } .cs_class_about_section .cs_feature_list li .cs_feature_title { line-height: 1.625em; margin-bottom: 5px; } .cs_class_about_section .cs_feature_list li .cs_feature_subtitle { line-height: 1.555em; } .cs_class_about_section .cs_feature_list :last-child { margin-bottom: 0; } /*======================================================= 16. Card =========================================================*/ .cs_card_style_1, .cs_card_style_2, .cs_card_style_3, .cs_card_style_4 { background: var(--gray-color); transition: all 0.4s ease; } .cs_card_style_1 .cs_card_thumbnail img, .cs_card_style_2 .cs_card_thumbnail img, .cs_card_style_3 .cs_card_thumbnail img, .cs_card_style_4 .cs_card_thumbnail img { width: 100%; height: 100%; object-fit: cover; } .cs_card_style_1 .cs_btn_style_1, .cs_card_style_2 .cs_btn_style_1, .cs_card_style_3 .cs_btn_style_1, .cs_card_style_4 .cs_btn_style_1 { color: var(--heading-color); left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: transparent; border: 1px solid var(--heading-color); padding: 10px 36px; visibility: hidden; opacity: 0; } .cs_card_style_1:hover .cs_btn_style_1, .cs_card_style_2:hover .cs_btn_style_1, .cs_card_style_3:hover .cs_btn_style_1, .cs_card_style_4:hover .cs_btn_style_1 { visibility: visible; opacity: 1; } .cs_card_style_1 .cs_card_info, .cs_card_style_2 .cs_card_info, .cs_card_style_3 .cs_card_info, .cs_card_style_4 .cs_card_info { padding: 35px 20px; } .cs_card_style_1 .cs_card_info .cs_card_title a, .cs_card_style_2 .cs_card_info .cs_card_title a, .cs_card_style_3 .cs_card_info .cs_card_title a, .cs_card_style_4 .cs_card_info .cs_card_title a { color: var(--heading-color); line-height: 1.416em; background-repeat: no-repeat; background-image: linear-gradient(90deg, currentColor 0, currentColor 100%); transition: background-size 0.42s cubic-bezier(0.49, 0.49, 0.08, 1), color 0.27s ease-out; background-position: 100% calc(100% - 0px); background-size: 0 1px; } .cs_card_style_1 .cs_card_info .cs_card_title a:hover, .cs_card_style_2 .cs_card_info .cs_card_title a:hover, .cs_card_style_3 .cs_card_info .cs_card_title a:hover, .cs_card_style_4 .cs_card_info .cs_card_title a:hover { background-size: 100% 1px; background-position: 0 calc(100% - 0px); } .cs_card_style_1 .cs_card_info .cs_card_text, .cs_card_style_2 .cs_card_info .cs_card_text, .cs_card_style_3 .cs_card_info .cs_card_text, .cs_card_style_4 .cs_card_info .cs_card_text { opacity: 0.6; } .cs_card_style_1 .cs_btn_style_1 { transform: translate(-50%, -50%) scale(1.6); transition: all 0.4s ease; } .cs_card_style_1 .cs_btn_style_1:hover { color: var(--black-color); border-color: var(--accent-color); background-color: var(--accent-color); } .cs_card_style_1:hover .cs_btn_style_1 { transform: translate(-50%, -50%) scale(1); } @media (max-width: 450px) { .cs_card_style_1 { min-height: 445px; width: 290px; } } .cs_card_style_2 { height: 100%; padding: 25px 25px 30px; border: 1px solid; border-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1; transition: all 0.4s ease; } .cs_card_style_2 .cs_btn_style_1 { color: var(--black-color); background-color: var(--accent-color); border: 1px solid var(--accent-color); top: 100%; transform: translate(-50%, -100%); visibility: visible; opacity: 1; } .cs_card_style_2 .cs_btn_style_1:hover { color: var(--heading-color); border: 1px solid var(--heading-color); background-color: transparent; } .cs_card_style_2 .cs_card_info { padding: 27px 0 0; } .cs_card_style_2:hover { border-image: linear-gradient(45deg, rgb(242, 253, 132), rgba(255, 255, 255, 0)) 1; transform: translateY(-7px); } .cs_card_style_2:hover .cs_btn_style_1 { top: 95%; } .cs_card_style_3 { height: 100%; border: 1px solid; border-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1; } .cs_card_style_3 .cs_card_info { padding: 0 30px 23px; } .cs_card_style_3 .cs_card_text { line-height: 1.625em; } .cs_card_style_3.animationonhover::after { background: #2d2d2d; } @media (max-width: 1199px) { .cs_card_style_3 .cs_card_title { word-wrap: break-word; } } .cs_card_style_4 { height: 100%; display: flex; flex-direction: column; border: 1px solid; border-image: linear-gradient(360deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)) 1; } .cs_card_style_4 .cs_badge { top: 0; right: 0; padding: 7px 18px; letter-spacing: 1.76px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(9px); } .cs_card_style_4 .cs_btn_style_1 { color: var(--black-color); background-color: var(--accent-color); border: 1px solid var(--accent-color); } .cs_card_style_4 .cs_btn_style_1:hover { color: var(--heading-color); border: 1px solid var(--heading-color); background-color: transparent; } .cs_card_style_4 .cs_card_info { flex: 1; border: 1px solid; padding: 33px 20px 31px; border-image: linear-gradient(360deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1; } .cs_card_style_4:hover { border: 1px solid; border-image: linear-gradient(360deg, rgb(242, 253, 132), rgba(255, 255, 255, 0)) 1; } /*=============================================== Card Wrapper ================================================*/ .cs_programs_section .cs_card_style_1 { display: flex; flex-direction: column; } .cs_programs_section .cs_card_style_1 .cs_card_info { flex: 1; justify-content: start; border: 1px solid; border-image: linear-gradient(360deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1; } /*======================================================== 17. Service & Service Details ==========================================================*/ .cs_classes_card .cs_section_heading_column_1 { width: min(100%, 546px); } @media (max-width: 991px) { .cs_classes_card .cs_section_heading_column_1 { width: 100%; } } .cs_card_wrapper_1 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 80px 0px; overflow: hidden; } .cs_card_wrapper_1 .cs_card_style_3 { display: flex; flex-direction: column; align-items: center; border: none; background: none; border-right: 1px solid var(--accent-color); } .cs_card_wrapper_1 .cs_card_style_3:nth-child(4n) { border-right: none; } .cs_card_wrapper_1 .cs_card_style_3 .cs_card_image { height: 61px; width: 61px; border: 1px solid var(--accent-color); color: var(--accent-color); transition: all 0.6s cubic-bezier(0.7, -0.56, 0.27, 1.6); } .cs_card_wrapper_1 .cs_card_style_3:hover .cs_card_image { color: var(--black-color); background-color: var(--accent-color); transform: scale(1.2); } .cs_card_wrapper_1 .cs_card_style_3 .cs_card_info { padding: 0 20px; } @media (max-width: 991px) { .cs_card_wrapper_1 { grid-template-columns: repeat(2, 1fr); gap: 40px 0px; } .cs_card_wrapper_1 .cs_card_style_3:nth-child(even) { border-right: none; } } @media (max-width: 575px) { .cs_card_wrapper_1 { grid-template-columns: repeat(1, 1fr); gap: 30px 0px; } .cs_card_wrapper_1 .cs_card_style_3 { margin: 0 auto; width: min(100%, 370px); border-right: none; } } /*========================================================= 18. Contact ==========================================================*/ .cs_contact_info { display: flex; flex-wrap: wrap; gap: 25px 50px; } .cs_contact_info li { position: relative; padding-left: 60px; } .cs_contact_info li:hover .cs_iconbox_icon { background-color: var(--accent-color); color: var(--black-color); } .cs_contact_info .cs_iconbox_icon { color: var(--heading-color); height: 42px; width: 42px; font-size: 20px; line-height: 1em; border: 1px solid var(--accent-color); transition: all 0.4s ease; position: absolute; left: 0; top: 6px; } /*================================================= Form =================================================*/ .cs_contact_form_1 { padding-left: 40px; } @media (max-width: 991px) { .cs_contact_form_1 { padding-left: 0; } } .cs_form_field { display: block; width: 100%; border: 1px solid var(--body-color); outline: none; padding: 9px 20px; color: var(--body-color); background-color: transparent; } /*=========================================== Google Map ============================================*/ .cs_map { height: 680px; } .cs_map:hover { filter: blur(0); } @media (max-width: 767px) { .cs_map { height: 580px; } } @media (max-width: 575px) { .cs_map { height: 480px; } } @media (max-width: 480px) { .cs_map { height: 380px; } } .cs_map iframe { height: 100%; width: 100%; border: none; filter: brightness(0.75) grayscale(0.9); } /*=========================================================== 19. Blog Post =============================================================*/ .cs_post_1_list .cs_post.cs_style_1:not(:first-child) { margin-top: 60px; } @media (max-width: 991px) { .cs_post_1_list .cs_post.cs_style_1:not(:first-child) { margin-top: 40px; } } .cs_post.cs_style_1 .cs_post_thumb { display: block; overflow: hidden; position: relative; margin-bottom: 25px; } .cs_post.cs_style_1 .cs_post_thumb::after { content: ""; position: absolute; height: 100%; width: 100%; left: 0; top: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: all 0.4s ease; } .cs_post.cs_style_1 .cs_post_thumb img { transition: all 0.8s ease; } .cs_post.cs_style_1 a.cs_post_thumb:hover::after { opacity: 1; } .cs_post.cs_style_1 a.cs_post_thumb:hover img { transform: scale(1.05); } .cs_post.cs_style_1 .cs_post_meta.cs_style_1 { margin-bottom: 10px; display: flex; } .cs_post.cs_style_1 .cs_post_meta.cs_style_1>* { position: relative; display: inline-block; } .cs_post.cs_style_1 .cs_post_meta.cs_style_1>*:not(:last-child) { margin-right: 14px; padding-right: 14px; } .cs_post.cs_style_1 .cs_post_meta.cs_style_1>*:not(:last-child)::before { content: ""; height: 20px; width: 1px; border-radius: 2px; background-color: var(--body-color); position: absolute; right: 0; top: 50%; transform: translate(0, -50%); } .cs_post.cs_style_1 .cs_post_title { margin-bottom: 15px; font-size: 36px; line-height: 1.25em; } @media (max-width: 1199px) { .cs_post.cs_style_1 .cs_post_title { font-size: 30px; } } @media (max-width: 480px) { .cs_post.cs_style_1 .cs_post_title { font-size: 26px; } } .cs_post.cs_style_1 .cs_post_title a { background-repeat: no-repeat; background-image: linear-gradient(90deg, currentColor 0, currentColor 100%); transition: background-size 0.42s cubic-bezier(0.49, 0.49, 0.08, 1), color 0.27s ease-out; background-position: 100% calc(100% - 0px); background-size: 0 2px; } .cs_post.cs_style_1 .cs_post_title a:hover { background-size: 100% 2px; background-position: 0 calc(100% - 0px); } .cs_post.cs_style_1 .cs_post_subtitle { margin-bottom: 14px; line-height: 1.6em; } .cs_post.cs_style_1 .cs_btn.cs_style_2 { position: relative; } .cs_post.cs_style_1 .cs_btn.cs_style_2::after { content: ""; position: absolute; right: 0; bottom: 0; height: 1px; width: 100%; background-color: currentColor; transition: all 0.6s cubic-bezier(0.7, -0.56, 0.27, 1.6); } .cs_post.cs_style_1 .cs_btn.cs_style_2:hover::after { width: 50%; } .cs_post.cs_style_1 { /*==================================================== Blog Details ======================================================*/ } .cs_post.cs_style_1 p { margin-bottom: 35px; line-height: 1.75em; } .cs_post.cs_style_1 .embed-responsive { margin-bottom: 35px; } .cs_post.cs_style_1 h3 { font-size: 32px; margin-bottom: 20px; } @media (max-width: 1199px) { .cs_post.cs_style_1 h3 { font-size: 26px; } } .cs_post.cs_style_1 blockquote { line-height: 1.7em; border-left: 3px solid var(--accent-color); background-color: var(--gray-color); padding: 40px 35px; color: var(--heading-color); margin-bottom: 35px; } @media (max-width: 991px) { .cs_post.cs_style_1 blockquote { font-size: 18px; padding: 25px 20px; } } .cs_post.cs_style_1 blockquote small { display: block; position: relative; color: var(--body-color); font-size: 16px; line-height: 1.9em; font-style: initial; font-weight: 400; margin-top: 15px; padding-left: 35px; } .cs_post.cs_style_1 blockquote small::before { content: ""; height: 2px; width: 20px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: var(--accent-color); } .cs_post.cs_style_1.cs_type_1 { font-size: 18px; line-height: 1.7em; } @media (max-width: 991px) { .cs_post.cs_style_1.cs_type_1 { font-size: 16px; } } .cs_post.cs_style_1.cs_type_1 .cs_post_title { font-size: 40px; } @media (max-width: 1199px) { .cs_post.cs_style_1.cs_type_1 .cs_post_title { font-size: 32px; } } .cs_pagination_box { margin: -5px; } .cs_pagination_box .cs_pagination_item { margin: 5px; height: 42px; width: 42px; background-color: var(--gray-color); } .cs_pagination_box .cs_pagination_item:hover { background-color: var(--accent-color); color: var(--black-color); } .cs_pagination_box .cs_pagination_item.active { background-color: var(--accent-color); color: var(--black-color); pointer-events: none; } /*========================================================== 20. Feature ============================================================*/ .cs_feature_widget_img { width: 100%; } .cs_feature_widget_img img { width: 100%; } .cs_feature_list { width: min(100%, 713px); } .cs_feature_list li { margin-bottom: 28px; position: relative; padding-left: 50px; } .cs_feature_list li:last-child { margin-bottom: 0; } .cs_feature_list li .cs_feature_icon { color: var(--accent-color); position: absolute; left: 0; top: 5px; font-size: 24px; line-height: 1em; } .cs_feature_list li .cs_feature_title { margin-bottom: 10px; line-height: 1.417em; } .cs_feature_list li .cs_feature_subtitle { line-height: 1.625em; } @media (max-width: 575px) { .cs_feature_list li { padding-left: 40px; } } /*===================================================== 21. Pricing =======================================================*/ .cs_pricing_card { padding: 55px 20px 60px 20px; height: 100%; border: 1px solid; border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1; background: var(--gray-color); } .cs_pricing_card .cs_pricing_card_content { width: 100%; height: 100%; display: flex; flex-direction: column; } .cs_pricing_card .cs_pricing_head { text-align: center; } .cs_pricing_card .cs_pricing_plan { line-height: 1.625em; } .cs_pricing_card .cs_price_value { color: var(--accent-color); font-weight: 600; } .cs_pricing_card .cs_pricing_head_subtitle { background: rgba(255, 255, 255, 0.06); margin-left: -40px; margin-right: -40px; padding: 10px 0px; letter-spacing: 1.6px; } .cs_pricing_card .cs_pricing_list li { margin-bottom: 12px; position: relative; padding-left: 36px; } .cs_pricing_card .cs_pricing_list li:last-child { margin-bottom: 0px; } .cs_pricing_card .cs_pricing_icon { color: var(--accent-color); font-size: 16px; line-height: 1em; position: absolute; top: 7px; left: 0px; } .cs_pricing_card .cs_btn_style_1 { width: 100%; margin-top: auto; } @media (max-width: 1399px) { .cs_pricing_card { padding: 40px 20px; } .cs_pricing_card .cs_pricing_head_subtitle { margin: 0 -20px; } } /*========================================================== 22. Video ============================================================*/ .cs_video_style_1 { min-height: 600px; } .cs_video_style_1 a { display: block; width: 84px; height: 84px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.6s cubic-bezier(0.7, -0.56, 0.27, 1.6); } .cs_video_style_1 a img { position: relative; z-index: 1; } .cs_video_style_1 a::before { content: ""; width: 100%; height: 100%; background: var(--accent-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.7); border-radius: 50%; animation: border-scale 3s cubic-bezier(0.29, 0.36, 0.13, 0.44) infinite; z-index: 0; opacity: 0.22; } .cs_video_style_1 a:hover { transform: translate(-50%, -50%) scale(1.2); } .cs_video_style_1 a:hover::before { animation-play-state: paused; } .cs_video_style_1 .cs_section_heading_style_1 { width: min(100%, 700px); position: absolute; top: 100%; left: 0%; transform: translate(0%, -100%); padding: 27px 50px 30px 40px; border: 1px solid; border-image: linear-gradient(270deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); mask-image: linear-gradient(360deg, transparent 0%, black 30%, black 100%); -webkit-mask-image: linear-gradient(360deg, transparent 0%, black 30%, black 100%); } @media (max-width: 767px) { .cs_video_style_1 .cs_section_heading_style_1 { padding: 25px 20px; } } @media (max-width: 575px) { .cs_video_style_1 .cs_section_heading_style_1 { padding: 20px 15px; } } /*============================================== Gallery Style ================================================*/ .cs_gallery_style_1 { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 24px; } .cs_gallery_style_1 .cs_gallery_item { grid-column: auto/span 1; grid-row: auto/span 1; overflow: hidden; } .cs_gallery_style_1 .cs_gallery_item img { width: 100%; height: 100%; object-fit: cover; transition: all 0.6s ease; } .cs_gallery_style_1 .cs_gallery_item:nth-child(2) { grid-row: auto/span 2; } .cs_gallery_style_1 .cs_gallery_item:nth-child(3) { grid-column: auto/span 2; } .cs_gallery_style_1 .cs_gallery_item:hover img { transform: scale(1.03); } @media (max-width: 767px) { .cs_gallery_style_1 { grid-template-columns: repeat(2, 1fr); } .cs_gallery_style_1 .cs_gallery_item:nth-child(1) { order: 1; } .cs_gallery_style_1 .cs_gallery_item:nth-child(2) { order: 2; } .cs_gallery_style_1 .cs_gallery_item:nth-child(3) { order: 4; } .cs_gallery_style_1 .cs_gallery_item:nth-child(4) { order: 3; } .cs_gallery_style_1 .cs_gallery_item:nth-child(5) { order: 5; } .cs_gallery_style_1 .cs_gallery_item:nth-child(6) { order: 6; } } @keyframes border-scale { 50% { transform: translate(-50%, -50%) scale(1.4); } } /*====================================================== 23. Gradiant ========================================================*/ .cs_radial_gradiant, .cs_radial_gradiant_2, .cs_radial_gradiant_3, .cs_radial_gradiant_4 { height: 680px; width: 680px; position: absolute; z-index: 0; border-radius: 680px; opacity: 0.1; background: radial-gradient(50% 50% at 50% 50%, #f2fd84 0%, rgba(34, 34, 34, 0) 100%); } .cs_radial_gradiant_2 { width: 556px; } .cs_programs_section .cs_section_heading_style_1 { position: relative; z-index: 1; } .cs_programs_section .cs_card_style_1 { position: relative; z-index: 1; } .cs_programs_section .cs_radial_gradiant { left: -300px; top: -50px; } .cs_testimonial_section .cs_section_heading_style_2 { position: relative; z-index: 1; } .cs_testimonial_section .cs_testimonial_card { position: relative; z-index: 1; } .cs_testimonial_section .cs_radial_gradiant { right: -350px; top: -200px; } .cs_pricing_section .cs_section_heading_style_1 { position: relative; z-index: 1; } .cs_pricing_section .cs_pricing_card { position: relative; z-index: 1; } .cs_pricing_section .cs_radial_gradiant { left: -200px; top: -170px; } .cs_feature_section .cs_section_heading_style_1 { position: relative; z-index: 1; } .cs_feature_section .cs_feature_widget_img, .cs_feature_section .cs_feature_list { position: relative; z-index: 1; } .cs_feature_section .cs_radial_gradiant { right: -150px; top: -270px; } .cs_about_section .cs_about_style_1 { position: relative; z-index: 1; } .cs_about_section .cs_radial_gradiant { left: 67%; bottom: -6%; } .cs_value_section .cs_section_heading_style_1, .cs_value_section .cs_card_style_3 { position: relative; z-index: 1; } .cs_value_section .cs_radial_gradiant { left: -15%; top: -52%; } .cs_trainer_section .cs_section_heading_style_2, .cs_trainer_section .cs_card_style_2 { position: relative; z-index: 1; } .cs_trainer_section .cs_radial_gradiant { right: -118px; top: -308px; } .cs_brands_section .cs_slider { position: relative; z-index: 1; } .cs_brands_section .cs_radial_gradiant { left: -171px; top: -391px; } .cs_service_card .cs_card_style_4 { position: relative; z-index: 1; } .cs_service_card .cs_radial_gradiant { right: -271px; top: -245px; } .cs_cta_style_3 .cs_cta_content { position: relative; z-index: 1; } .cs_cta_style_3 .cs_radial_gradiant { opacity: 0.05; left: -100px; top: -365px; } .cs_class_about_section { overflow: hidden; } .cs_class_about_section .cs_about_style_1 { position: relative; z-index: 1; } .cs_class_about_section .cs_radial_gradiant_2 { right: -100px; top: -520px; } .cs_benefits .cs_section_heading_style_1, .cs_benefits .cs_card_wrapper_1 { position: relative; z-index: 1; } .cs_benefits .cs_radial_gradiant_2 { left: -100px; top: -530px; } .cs_gallery .cs_gallery_style_1 { position: relative; z-index: 1; } .cs_gallery .cs_radial_gradiant_2 { right: 22px; bottom: -50px; } .cs_classes_card .cs_section_heading_style_2, .cs_classes_card .cs_card_style_4 { position: relative; z-index: 1; } .cs_classes_card .cs_radial_gradiant_2 { left: -43px; bottom: -115px; } .cs_schedule_section { overflow: hidden; } .cs_schedule_section .cs_schedule_style_1, .cs_schedule_section .cs_timeline_wrapper { position: relative; z-index: 1; } .cs_schedule_section .cs_radial_gradiant { right: -391px; top: -325px; } .cs_schedule_section .cs_radial_gradiant_3 { left: -400px; top: 284px; } .cs_schedule_section .cs_radial_gradiant_4 { right: -272px; bottom: -301px; } .cs_contact_style_1 .row { position: relative; z-index: 1; } .cs_contact_style_1 .cs_radial_gradiant { left: -300px; top: -138px; } .cs_blog_section .row, .cs_blog_details .row { position: relative; z-index: 1; } .cs_blog_section .cs_radial_gradiant, .cs_blog_details .cs_radial_gradiant { right: -400px; top: -300px; } .cs_blog_section .cs_radial_gradiant_3, .cs_blog_details .cs_radial_gradiant_3 { left: -300px; top: 300px; } .cs_blog_section .cs_radial_gradiant_4, .cs_blog_details .cs_radial_gradiant_4 { right: 150px; top: 1200px; } /*====================================================== 24. Timetable ========================================================*/ .cs_slider_arrows.cs_style_1 .cs_left_arrow, .cs_slider_arrows.cs_style_1 .cs_right_arrow { position: absolute; top: 50%; transform: translateY(-50%); height: 42px; width: 42px; border: 1px solid var(--accent-color); color: var(--heading-color); } .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); color: var(--black-color); } .cs_slider_arrows.cs_style_1 .cs_left_arrow { left: 0; } .cs_slider_arrows.cs_style_1 .cs_right_arrow { right: 0; } .cs_schedule_style_1 .cs_slider_wrapper { padding: 0px 77px; } .cs_schedule_style_1 .cs_btn_style_1 { height: 42px; background-color: transparent; color: var(--heading-color); border: 1px solid var(--heading-color); box-shadow: 0 4px 18px 0 rgba(242, 253, 132, 0.09); } .cs_schedule_style_1 .cs_btn_style_1:hover { border: 1px solid var(--accent-color); background-color: var(--accent-color); color: var(--black-color); } .cs_schedule_style_1 .cs_tab_links li.active a { color: var(--black-color); background-color: var(--accent-color); border: 1px solid var(--accent-color); } .cs_timeline_wrapper_1 { overflow-x: auto; } .cs_days_row { min-width: 1240px; display: grid; grid-template-columns: repeat(8, 1fr); margin-bottom: 10px; gap: 10px; } .cs_days_row .cs_day_col { display: flex; align-items: center; justify-content: center; padding: 17px 10px; letter-spacing: 0.24px; background-color: rgba(242, 253, 132, 0.1); width: 140px; } .cs_days_row .cs_day_col:first-child { width: 190px; } .cs_content_row { min-width: 1240px; display: grid; grid-template-columns: repeat(8, 1fr); margin-bottom: 10px; gap: 10px; } .cs_content_row .cs_content_col { padding: 30px 12px 22px; transition: all 0.4s ease; text-align: center; width: 140px; } .cs_content_row .cs_content_col:first-child { width: 190px; border: none; } .cs_content_row .cs_content_col:has(*) { background-color: rgba(255, 255, 255, 0.02); border: 1px solid; border-image: linear-gradient(225deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) 1; visibility: visible; } .cs_content_row .cs_content_col:has(*):hover { border: 1px solid var(--accent-color); background-color: var(--accent-color); } .cs_content_row .cs_content_col:has(*):hover:first-child { background-color: rgba(255, 255, 255, 0.02); border: none; } .cs_content_row .cs_content_col:has(*):hover .cs_schedule_icon, .cs_content_row .cs_content_col:has(*):hover .cs_schedule_title, .cs_content_row .cs_content_col:has(*):hover .cs_schedule_time, .cs_content_row .cs_content_col:has(*):hover .cs_trainer_title { color: var(--black-color); } .cs_content_row .cs_content_col:has(*):hover .cs_trainer_title { opacity: 0.6; } .cs_content_row .cs_time { font-size: 12px; line-height: 1.833em; display: flex; align-items: center; justify-content: center; height: 100%; } .cs_content_row .cs_schedule_icon { height: 17px; width: 27px; } .cs_content_row .cs_schedule_wrapper { display: flex; align-items: center; flex-direction: column; } .cs_content_row .cs_schedule_wrapper .cs_schedule_title { line-height: 1.625em; margin-bottom: 2px; } .cs_content_row .cs_schedule_wrapper .cs_schedule_time { font-size: 12px; line-height: 1.833em; margin-bottom: 3px; } .cs_content_row .cs_schedule_wrapper .cs_trainer_title { font-size: 12px; line-height: 1.833em; margin-bottom: 0; } .cs_tab_body { position: relative; } .cs_tab_body .cs_tab { display: none; } .cs_tab_body .cs_tab.active { display: block; } /* ========================== CHECKOUT SECTION ========================== */ .checkout-section{ background: #232323; padding: 100px 0; } .checkout-form{ color:#fff; } /* ========================== BOXES ========================== */ .checkout-box, .order-box{ background:#2b2b2b; border:1px solid rgba(232,243,106,.15); padding:35px; box-shadow:0 15px 40px rgba(0,0,0,.35); transition:.3s; } .checkout-box:hover, .order-box:hover{ border-color:#E8F36A; } /* ========================== HEADINGS ========================== */ .checkout-title, .order-title{ color:#fff; font-size:28px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:30px; } .checkout-title::after, .order-title::after{ content:""; display:block; width:70px; height:3px; background:#E8F36A; margin-top:12px; } /* ========================== LABELS ========================== */ .form-label{ color:#fff; font-size:15px; margin-bottom:8px; font-weight:500; } /* ========================== INPUTS ========================== */ .form-control, .form-select{ background:#222; border:1px solid #444; color:#fff; height:55px; border-radius:0; padding:15px; transition:.3s; } .form-control:focus, .form-select:focus{ background:#222; color:#fff; border-color:#E8F36A; box-shadow:none; } .form-control::placeholder{ color:#9c9c9c; } /* dropdown */ .form-select option{ background:#2b2b2b; color:#fff; } /* ========================== PAYMENT IMAGE ========================== */ .checkout-box img{ max-width:220px; display:block; margin-top:10px; } /* ========================== CHECKBOX ========================== */ .form-check{ margin-top:25px; } .form-check-label{ color:#cfcfcf; } .form-check-input{ background:#222; border:1px solid #666; } .form-check-input:checked{ background:#E8F36A; border-color:#E8F36A; } /* ========================== ORDER TABLE ========================== */ .order-table{ color:#fff; border-color:#444; } .order-table tr{ border-color:#444; } .order-table td{ padding:16px 0; background:transparent; color: #fff; } .order-table tr:last-child td{ font-size:18px; color:#E8F36A; } /* ========================== BUTTON ========================== */ .checkout-btn{ background:#E8F36A; color:#111; border:none; border-radius:0; font-weight:700; padding:16px; text-transform:uppercase; transition:.3s; } .checkout-btn:hover{ background:#fff; color:#111; } /* ========================== ORDER BOX ========================== */ .order-box{ position:sticky; top:120px; } /* ========================== PAYMENT HEADING ========================== */ .checkout-box h5{ color:#fff; font-size:18px; margin-bottom:12px; } /* ========================== RESPONSIVE ========================== */ @media(max-width:991px){ .checkout-section{ padding:70px 0; } .checkout-box, .order-box{ padding:25px; } .order-box{ position:static; } } @media(max-width:576px){ .checkout-title, .order-title{ font-size:22px; } .form-control, .form-select{ height:50px; } } /*========================= CONTACT SECTION ==========================*/ .contact-section{ background:#232323; padding:100px 0; } /* Section Heading */ .contact-section h2{ color:#fff; font-size:42px; font-weight:700; text-transform:uppercase; letter-spacing:1px; } .contact-section .text-muted{ color:#bdbdbd !important; font-size:16px; } /*========================= CONTACT BOX ==========================*/ .contact-box{ background:#2b2b2b; border:1px solid rgba(232,243,106,.15); padding:40px 30px; text-align:center; transition:.35s ease; height:100%; box-shadow:0 15px 40px rgba(0,0,0,.35); } .contact-box:hover{ transform:translateY(-8px); border-color:#E8F36A; } /*========================= ICON ==========================*/ .contact-box .icon{ width:75px; height:75px; background:#E8F36A; color:#111; margin:0 auto 25px; display:flex; align-items:center; justify-content:center; font-size:28px; } .contact-box h5{ color:#fff; font-size:22px; font-weight:700; margin-bottom:15px; text-transform:uppercase; } .contact-box p{ color:#bdbdbd !important; line-height:1.8; font-size:15px; } .contact-box a{ color:#bdbdbd; text-decoration:none; transition:.3s; word-break:break-word; } .contact-box a:hover{ color:#E8F36A; } /*========================= RESPONSIVE ==========================*/ @media(max-width:991px){ .contact-section{ padding:80px 0; } .contact-section h2{ font-size:34px; } .contact-box{ padding:35px 25px; } } @media(max-width:767px){ .contact-section{ padding:70px 0; } .contact-section h2{ font-size:28px; } .contact-box{ padding:30px 20px; } .contact-box .icon{ width:65px; height:65px; font-size:24px; } } .core-icon:hover .core-img{ filter: brightness(0) } .logo{ width: 200px; } /*# sourceMappingURL=style.css.map */