/* ===========================Index Of css01. Common CSS02. Header CSS03. About CSS05. Service CSS06. Process CSS07. Pricing CSS08. Testimonial CSS09. Team CSS10. Subscribe CSS11. Blog CSS12. Contact CSS13. Footer CSS========================== *//*=========================== 01. Common CSS===========================*/@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");html { scroll-behavior: smooth; } body { font-family: "Poppins", sans-serif; font-weight: normal; font-style: normal; color: #051441; overflow-x: hidden; }* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .navbar-toggler:focus,a:focus,input:focus,textarea:focus,button:focus,.btn:focus,.btn.focus,.btn:not(:disabled):not(.disabled).active,.btn:not(:disabled):not(.disabled):active { text-decoration: none; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } a:hover { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; color: #004280; }a:focus,a:hover { text-decoration: none; } button { cursor: pointer; }i,span,a { text-decoration: none; }audio,canvas,iframe,img,svg,video { vertical-align: middle; } h1,h2,h3,h4,h5,h6 { font-weight: 600; color: #051441; margin: 0px; } h1 a,h2 a,h3 a,h4 a,h5 a,h6 a { color: inherit; }h1 { font-size: 50px; }h2 { font-size: 40px; } @media (max-width: 767px) { h2 { font-size: 31px; } }h3 { font-size: 30px; }h4 { font-size: 25px; }h5 { font-size: 20px; }h6 { font-size: 16px; }ul, ol { margin: 0px; padding: 0px; list-style-type: none; color: #051441 !important; }p { font-size: 16px; font-weight: 400; line-height: 26px; color: #051441; margin: 0px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { p { font-size: 16px; line-height: 26px; } } @media (max-width: 767px) { p { font-size: 16px; line-height: 26px; } }.img-bg { background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; }@media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 450px; } }.gray-bg { background: #EFF2F9; }.alert-link { font-weight: 600; }.alert h4 { margin-bottom: 10px; }.page-404-content h2 { font-size: 120px; font-weight: 900; color: #004280; }.page-404-content h4 { font-size: 40px; color: #6A7C92; }/*===== All Button Style =====*/.theme-btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 16px 48px; font-size: 18px; border-radius: 50px; color: #fff; cursor: pointer; z-index: 5; transition: all .4s ease-in-out; border: none; background: linear-gradient(to left, #004280 0%, #6f58e8 50.39%, #004280 100%); background-size: 200% auto; overflow: hidden; } .theme-btn:hover, .theme-btn:focus { background-position: right center; color: #fff; -webkit-box-shadow: 0px 0px 30px rgba(46, 87, 217, 0.45); -moz-box-shadow: 0px 0px 30px rgba(46, 87, 217, 0.45); box-shadow: 0px 0px 30px rgba(46, 87, 217, 0.45); } .theme-btn.border-btn { padding: 14px 40px; background: transparent; border: 1.5px solid #004280; color: #6A7C92; font-size: 18px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }.scroll-top { width: 45px; height: 45px; background: #004280; text-align: center; line-height: 45px; font-size: 20px; color: #fff; border-radius: 5px; position: fixed; bottom: 30px; right: 30px; z-index: 9; cursor: pointer; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .scroll-top:hover { background: rgba(55, 99, 235, 0.7); color: #fff; }@keyframes animation1 { 0% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 0.29; } 50% { -webkit-transform: translateY(-700px); -moz-transform: translateY(-700px); -ms-transform: translateY(-700px); -o-transform: translateY(-700px); transform: translateY(-700px); opacity: 0; } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 0; } }/*===== All Section Title Style =====*/.section-title span { font-size: 25px; font-weight: 700; color: #004280; margin-bottom: 5px; } @media (max-width: 767px) { .section-title span { font-size: 20px; } }.section-title h2 { line-height: 55px; font-weight: 600; margin-bottom: 15px; } @media (max-width: 767px) { .section-title h2 { line-height: 41px; } }.section-title p { font-size: 18px; }/*===== All Preloader Style =====*/.preloader { /* Body Overlay */ position: fixed; top: 0; left: 0; display: table; height: 100%; width: 100%; /* Change Background Color */ background: #fff; z-index: 99999; } .preloader .loader { display: table-cell; vertical-align: middle; text-align: center; } .preloader .loader .ytp-spinner { position: absolute; left: 50%; top: 50%; width: 64px; margin-left: -32px; z-index: 18; pointer-events: none; } .preloader .loader .ytp-spinner .ytp-spinner-container { pointer-events: none; position: absolute; width: 100%; padding-bottom: 100%; top: 50%; left: 50%; margin-top: -50%; margin-left: -50%; -webkit-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; -moz-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; -o-animation: ytp-spinner-linspin 1568.23529647ms linear infinite; animation: ytp-spinner-linspin 1568.23529647ms linear infinite; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator { position: absolute; width: 100%; height: 100%; -webkit-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-spinner-easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-left { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; right: 50%; } .preloader .loader .ytp-spinner .ytp-spinner-container .ytp-spinner-rotator .ytp-spinner-right { position: absolute; top: 0; right: 0; bottom: 0; overflow: hidden; left: 50%; } .preloader .loader .ytp-spinner-circle { box-sizing: border-box; position: absolute; width: 200%; height: 100%; border-style: solid; /* Spinner Color */ border-color: #004280 #004280 #F4EEFB; border-radius: 50%; border-width: 6px; } .preloader .loader .ytp-spinner-left .ytp-spinner-circle { left: 0; right: -100%; border-right-color: #F4EEFB; -webkit-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .preloader .loader .ytp-spinner-right .ytp-spinner-circle { left: -100%; right: 0; border-left-color: #F4EEFB; -webkit-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -moz-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; -o-animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: ytp-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; }/* Preloader Animations */@-webkit-keyframes ytp-spinner-linspin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }@keyframes ytp-spinner-linspin { to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }@-webkit-keyframes ytp-spinner-easespin { 12.5% { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-transform: rotate(405deg); -o-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); -moz-transform: rotate(675deg); -ms-transform: rotate(675deg); -o-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); -moz-transform: rotate(810deg); -ms-transform: rotate(810deg); -o-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); -moz-transform: rotate(945deg); -ms-transform: rotate(945deg); -o-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg); } }@keyframes ytp-spinner-easespin { 12.5% { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); -moz-transform: rotate(405deg); -ms-transform: rotate(405deg); -o-transform: rotate(405deg); transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); -moz-transform: rotate(540deg); -ms-transform: rotate(540deg); -o-transform: rotate(540deg); transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); -moz-transform: rotate(675deg); -ms-transform: rotate(675deg); -o-transform: rotate(675deg); transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); -moz-transform: rotate(810deg); -ms-transform: rotate(810deg); -o-transform: rotate(810deg); transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); -moz-transform: rotate(945deg); -ms-transform: rotate(945deg); -o-transform: rotate(945deg); transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); -moz-transform: rotate(1080deg); -ms-transform: rotate(1080deg); -o-transform: rotate(1080deg); transform: rotate(1080deg); } }@-webkit-keyframes ytp-spinner-left-spin { 0% { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } }@keyframes ytp-spinner-left-spin { 0% { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -ms-transform: rotate(130deg); -o-transform: rotate(130deg); transform: rotate(130deg); } }@-webkit-keyframes ytp-right-spin { 0% { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } }@keyframes ytp-right-spin { 0% { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); -ms-transform: rotate(-130deg); -o-transform: rotate(-130deg); transform: rotate(-130deg); } }.mt-5 { margin-top: 5px; }.mt-10 { margin-top: 10px; }.mt-15 { margin-top: 15px; }.mt-20 { margin-top: 20px; }.mt-25 { margin-top: 25px; }.mt-30 { margin-top: 30px; }.mt-35 { margin-top: 35px; }.mt-40 { margin-top: 40px; }.mt-45 { margin-top: 45px; }.mt-50 { margin-top: 50px; }.mt-55 { margin-top: 55px; }.mt-60 { margin-top: 60px; }.mt-65 { margin-top: 65px; }.mt-70 { margin-top: 70px; }.mt-75 { margin-top: 75px; }.mt-80 { margin-top: 80px; }.mt-85 { margin-top: 85px; }.mt-90 { margin-top: 90px; }.mt-95 { margin-top: 95px; }.mt-100 { margin-top: 100px; }.mt-105 { margin-top: 105px; }.mt-110 { margin-top: 110px; }.mt-115 { margin-top: 115px; }.mt-120 { margin-top: 120px; }.mt-125 { margin-top: 125px; }.mt-130 { margin-top: 130px; }.mt-135 { margin-top: 135px; }.mt-140 { margin-top: 140px; }.mt-145 { margin-top: 145px; }.mt-150 { margin-top: 150px; }.mt-155 { margin-top: 155px; }.mt-160 { margin-top: 160px; }.mt-165 { margin-top: 165px; }.mt-170 { margin-top: 170px; }.mt-175 { margin-top: 175px; }.mt-180 { margin-top: 180px; }.mt-185 { margin-top: 185px; }.mt-190 { margin-top: 190px; }.mt-195 { margin-top: 195px; }.mt-200 { margin-top: 200px; }.mt-205 { margin-top: 205px; }.mt-210 { margin-top: 210px; }.mt-215 { margin-top: 215px; }.mt-220 { margin-top: 220px; }.mt-225 { margin-top: 225px; }.mb-5 { margin-bottom: 5px; }.mb-10 { margin-bottom: 10px; }.mb-15 { margin-bottom: 15px; }.mb-20 { margin-bottom: 20px; }.mb-25 { margin-bottom: 25px; }.mb-30 { margin-bottom: 30px; }.mb-35 { margin-bottom: 35px; }.mb-40 { margin-bottom: 40px; }.mb-45 { margin-bottom: 45px; }.mb-50 { margin-bottom: 50px; }.mb-55 { margin-bottom: 55px; }.mb-60 { margin-bottom: 60px; }.mb-65 { margin-bottom: 65px; }.mb-70 { margin-bottom: 70px; }.mb-75 { margin-bottom: 75px; }.mb-80 { margin-bottom: 80px; }.mb-85 { margin-bottom: 85px; }.mb-90 { margin-bottom: 90px; }.mb-95 { margin-bottom: 95px; }.mb-100 { margin-bottom: 100px; }.mb-105 { margin-bottom: 105px; }.mb-110 { margin-bottom: 110px; }.mb-115 { margin-bottom: 115px; }.mb-120 { margin-bottom: 120px; }.mb-125 { margin-bottom: 125px; }.mb-130 { margin-bottom: 130px; }.mb-135 { margin-bottom: 135px; }.mb-140 { margin-bottom: 140px; }.mb-145 { margin-bottom: 145px; }.mb-150 { margin-bottom: 150px; }.mb-155 { margin-bottom: 155px; }.mb-160 { margin-bottom: 160px; }.mb-165 { margin-bottom: 165px; }.mb-170 { margin-bottom: 170px; }.mb-175 { margin-bottom: 175px; }.mb-180 { margin-bottom: 180px; }.mb-185 { margin-bottom: 185px; }.mb-190 { margin-bottom: 190px; }.mb-195 { margin-bottom: 195px; }.mb-200 { margin-bottom: 200px; }.mb-205 { margin-bottom: 205px; }.mb-210 { margin-bottom: 210px; }.mb-215 { margin-bottom: 215px; }.mb-220 { margin-bottom: 220px; }.mb-225 { margin-bottom: 225px; }.ml-5 { margin-left: 5px;}.ml-10 { margin-left: 10px;}.ml-15 { margin-left: 15px;}.ml-20 { margin-left: 20px;}.ml-25 { margin-left: 25px;}.ml-30 { margin-left: 30px;}.pt-5 { padding-top: 5px; }.pt-10 { padding-top: 10px; }.pt-15 { padding-top: 15px; }.pt-20 { padding-top: 20px; }.pt-25 { padding-top: 25px; }.pt-30 { padding-top: 30px; }.pt-35 { padding-top: 35px; }.pt-40 { padding-top: 40px; }.pt-45 { padding-top: 45px; }.pt-50 { padding-top: 50px; }.pt-55 { padding-top: 55px; }.pt-60 { padding-top: 60px; }.pt-65 { padding-top: 65px; }.pt-70 { padding-top: 70px; }.pt-75 { padding-top: 75px; }.pt-80 { padding-top: 80px; }.pt-85 { padding-top: 85px; }.pt-90 { padding-top: 90px; }.pt-95 { padding-top: 95px; }.pt-100 { padding-top: 100px; }.pt-105 { padding-top: 105px; }.pt-110 { padding-top: 110px; }.pt-115 { padding-top: 115px; }.pt-120 { padding-top: 120px; }.pt-125 { padding-top: 125px; }.pt-130 { padding-top: 130px; }.pt-135 { padding-top: 135px; }.pt-140 { padding-top: 140px; }.pt-145 { padding-top: 145px; }.pt-150 { padding-top: 150px; }.pt-155 { padding-top: 155px; }.pt-160 { padding-top: 160px; }.pt-165 { padding-top: 165px; }.pt-170 { padding-top: 170px; }.pt-175 { padding-top: 175px; }.pt-180 { padding-top: 180px; }.pt-185 { padding-top: 185px; }.pt-190 { padding-top: 190px; }.pt-195 { padding-top: 195px; }.pt-200 { padding-top: 200px; }.pt-205 { padding-top: 205px; }.pt-210 { padding-top: 210px; }.pt-215 { padding-top: 215px; }.pt-220 { padding-top: 220px; }.pt-225 { padding-top: 225px; }.pb-5 { padding-bottom: 5px; }.pb-10 { padding-bottom: 10px; }.pb-15 { padding-bottom: 15px; }.pb-20 { padding-bottom: 20px; }.pb-25 { padding-bottom: 25px; }.pb-30 { padding-bottom: 30px; }.pb-35 { padding-bottom: 35px; }.pb-40 { padding-bottom: 40px; }.pb-45 { padding-bottom: 45px; }.pb-50 { padding-bottom: 50px; }.pb-55 { padding-bottom: 55px; }.pb-60 { padding-bottom: 60px; }.pb-65 { padding-bottom: 65px; }.pb-70 { padding-bottom: 70px; }.pb-75 { padding-bottom: 75px; }.pb-80 { padding-bottom: 80px; }.pb-85 { padding-bottom: 85px; }.pb-90 { padding-bottom: 90px; }.pb-95 { padding-bottom: 95px; }.pb-100 { padding-bottom: 100px; }.pb-105 { padding-bottom: 105px; }.pb-110 { padding-bottom: 110px; }.pb-115 { padding-bottom: 115px; }.pb-120 { padding-bottom: 120px; }.pb-125 { padding-bottom: 125px; }.pb-130 { padding-bottom: 130px; }.pb-135 { padding-bottom: 135px; }.pb-140 { padding-bottom: 140px; }.pb-145 { padding-bottom: 145px; }.pb-150 { padding-bottom: 150px; }.pb-155 { padding-bottom: 155px; }.pb-160 { padding-bottom: 160px; }.pb-165 { padding-bottom: 165px; }.pb-170 { padding-bottom: 170px; }.pb-175 { padding-bottom: 175px; }.pb-180 { padding-bottom: 180px; }.pb-185 { padding-bottom: 185px; }.pb-190 { padding-bottom: 190px; }.pb-195 { padding-bottom: 195px; }.pb-200 { padding-bottom: 200px; }.pb-205 { padding-bottom: 205px; }.pb-210 { padding-bottom: 210px; }.pb-215 { padding-bottom: 215px; }.pb-220 { padding-bottom: 220px; }.pb-225 { padding-bottom: 225px; }/*=========================== 02. Header CSS ===========================*//*===== NAVBAR =====*/.navbar-area { width: 100%; z-index: 99; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; padding: 0; }.header-btn .theme-btn { padding: 10px 30px; }.sticky { position: fixed; z-index: 99; background: #004280; -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; background: #fff; padding: 0px 0; } .sticky .navbar { padding: 10px 0; }.navbar-brand { padding: 0; } .navbar-brand img { max-width: 150px; }.navbar-toggler { padding: 0px; } .navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #222; display: block; margin: 5px 0; position: relative; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .navbar-toggler.active .toggler-icon:nth-of-type(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .navbar-toggler.active .toggler-icon:nth-of-type(2) { opacity: 0; } .navbar-toggler.active .toggler-icon:nth-of-type(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: -7px; }@media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-collapse { position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; z-index: 9; -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1); padding: 10px 20px; max-height: 350px; overflow-y: scroll; } }@media (max-width: 767px) { .navbar-collapse { position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; z-index: 9; -webkit-box-shadow: 0px 15px 20px 0px rgba(5, 20, 65, 0.1); -moz-box-shadow: 0px 15px 20px 0px rgba(5, 20, 65, 0.1); box-shadow: 0px 15px 20px 0px rgba(5, 20, 65, 0.1); padding: 5px 12px; max-height: 350px; overflow-y: scroll; } }.navbar-nav .nav-item { position: relative; z-index: 1; } .navbar-nav .nav-item:hover a { color: #004280; } .navbar-nav .nav-item a { font-size: 16px; color: #051441; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; padding: 20px; display: inline-flex; align-items: center; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-nav .nav-item a { padding: 20px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-nav .nav-item a { color: #051441; display: flex; justify-content: space-between; padding: 10px 0; } } @media (max-width: 767px) { .navbar-nav .nav-item a { color: #051441; display: flex; justify-content: space-between; padding: 10px 0; } } .navbar-nav .nav-item a.active { color: #004280; } .navbar-nav .nav-item a.dd-menu { padding-right: 34px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-nav .nav-item a.dd-menu { padding-right: 30px; } } .navbar-nav .nav-item a.dd-menu::after { content: "\ea58"; font: normal normal normal 1em/1 "LineIcons"; position: absolute; right: 18px; font-size: 12px; margin-left: 5px; margin-top: 0px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-nav .nav-item a.dd-menu::after { right: 13px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-nav .nav-item a.dd-menu::after { right: 0; } } @media (max-width: 767px) { .navbar-nav .nav-item a.dd-menu::after { right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-nav .nav-item a.show::after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } } @media (max-width: 767px) { .navbar-nav .nav-item a.show::after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } } .navbar-nav .nav-item:hover > .sub-menu { top: 100%; opacity: 1; visibility: visible; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-nav .nav-item:hover > .sub-menu { visibility: hidden; opacity: 0; } } @media (max-width: 767px) { .navbar-nav .nav-item:hover > .sub-menu { visibility: hidden; opacity: 0; } } .navbar-nav .nav-item:hover > .sub-menu .sub-menu { left: 100%; top: 0; } .navbar-nav .nav-item .sub-menu { min-width: 200px; background-color: #fff; -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1); position: absolute; top: 110%; left: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; padding: 0; } .navbar-nav .nav-item .sub-menu.left-menu { left: -100%; } .navbar-nav .nav-item .sub-menu::after { content: ''; position: absolute; background: #fff; width: 20px; height: 20px; top: -10px; left: 20%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-top: 1px solid rgba(0, 0, 0, 0.05); border-left: 1px solid rgba(0, 0, 0, 0.05); } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-nav .nav-item .sub-menu { position: static; width: 100%; opacity: 0; visibility: hidden; max-height: 0; transform: scaleY(0); transform-origin: top; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05); } .navbar-nav .nav-item .sub-menu.show { max-height: 1000px; height: auto; opacity: 1; visibility: visible; transform: scaleY(1); } .navbar-nav .nav-item .sub-menu::after { display: none; } } @media (max-width: 767px) { .navbar-nav .nav-item .sub-menu { position: static; width: 100%; opacity: 0; visibility: hidden; max-height: 0; transform: scaleY(0); transform-origin: top; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05); } .navbar-nav .nav-item .sub-menu.show { max-height: 1000px; height: auto; opacity: 1; visibility: visible; transform: scaleY(1); } .navbar-nav .nav-item .sub-menu::after { display: none; } } .navbar-nav .nav-item .sub-menu > li { display: block; margin-left: 0; } .navbar-nav .nav-item .sub-menu > li:last-child { border: none; } .navbar-nav .nav-item .sub-menu > li.active > a, .navbar-nav .nav-item .sub-menu > li:hover > a { color: #004280; } .navbar-nav .nav-item .sub-menu > li:first-child a { border-top: none; } .navbar-nav .nav-item .sub-menu > li > a { font-weight: 400; display: block; padding: 10px 15px; font-size: 14px; color: #222; border-top: 1px solid rgba(0, 0, 0, 0.03); } .navbar-nav .nav-item .sub-menu > li > a:hover { background: rgba(0, 0, 0, 0.05); }.carousel-section-wrapper { position: relative; z-index: 3; } .carousel-section-wrapper .carousel-section { position: relative; z-index: 3; } .carousel-section-wrapper .carousel-section.clip-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(to right, rgba(111, 88, 232, 0.6) 0%, #004280 100%); } .carousel-section-wrapper .carousel-section.carousel-item .carousel-content .section-title h2 { margin-bottom: 25px; } .carousel-section-wrapper .carousel-section.carousel-item .carousel-content .section-title p { margin-bottom: 40px; } .carousel-section-wrapper .carousel-section.carousel-item .carousel-content .border-btn { border-color: #fff; color: #fff; } .carousel-section-wrapper .carousel-section.carousel-item .carousel-content .border-btn:hover { background: rgba(255, 255, 255, 0.2); } .carousel-section-wrapper .carousel-control { background: none; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #fff; color: #fff; top: 50%; left: 30px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 99; } .carousel-section-wrapper .carousel-control:hover { background: #fff; color: #004280; } .carousel-section-wrapper .carousel-control.carousel-control-next { left: auto; right: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .carousel-section-wrapper .carousel-control { top: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); bottom: 80px; margin: auto; } .carousel-section-wrapper .carousel-control.carousel-control-prev { left: 42%; } .carousel-section-wrapper .carousel-control.carousel-control-next { left: 10%; } } @media (max-width: 767px) { .carousel-section-wrapper .carousel-control { top: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); bottom: 80px; margin: auto; } .carousel-section-wrapper .carousel-control.carousel-control-prev { left: 37%; } .carousel-section-wrapper .carousel-control.carousel-control-next { left: 23%; } } .carousel-section-wrapper .carousel-control span { background: none; }.client-logo-section .client-logo-wrapper .client-logo-carousel .client-logo { padding: 10px; text-align: center; margin: auto; } .client-logo-section .client-logo-wrapper .client-logo-carousel .client-logo img { max-width: 220px; width: 100%; opacity: .3; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .client-logo-section .client-logo-wrapper .client-logo-carousel .client-logo img:hover { opacity: 1; }.box-style { padding: 40px 30px; border: 1px solid #F4EEFB; border-radius: 10px; margin-bottom: 30px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .box-style:hover { -webkit-box-shadow: 0px 0px 30px rgba(215, 224, 252, 0.45); -moz-box-shadow: 0px 0px 30px rgba(215, 224, 252, 0.45); box-shadow: 0px 0px 30px rgba(215, 224, 252, 0.45); } .box-style:hover .box-icon-style { color: #fff; border-color: transparent; background: linear-gradient(#004280 0%, #6f58e8 100%); } .box-style:hover .box-icon-style::after { opacity: 1; visibility: visible; } .box-style .box-icon-style { width: 78px; height: 78px; border-radius: 50%; margin-bottom: 25px; background: #fff; border: 2px solid #004280; display: flex; align-items: center; justify-content: center; color: #004280; font-size: 40px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: relative; } .box-style .box-icon-style::after { content: ''; width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; visibility: hidden; background: linear-gradient(#004280 0%, #6f58e8 100%); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: -1; border-radius: 50%; border: 1px solid transparent; } .box-style .box-content-style h4 { font-size: 25px; font-weight: 600; margin-bottom: 20px; }/*=========================== 04. About CSS ===========================*/.about-section { background: #EFF2F9; padding: 180px 0; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section { padding: 120px 0; } } @media (max-width: 767px) { .about-section { padding: 120px 0; } } .about-section .about-img-wrapper { position: absolute; left: 0; top: 50%; width: 46%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section .about-img-wrapper { position: relative; top: 0; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); width: 100%; margin-bottom: 50px; } } @media (max-width: 767px) { .about-section .about-img-wrapper { position: relative; top: 0; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); width: 100%; margin-bottom: 50px; } } .about-section .about-img-wrapper img { width: 100%; } .about-section .about-img-wrapper .about-experience { width: 300px; border-radius: 27px; background: linear-gradient(to top left, #004280 0%, #6f58e8 100%); border: 5px solid #eff2f9; padding: 40px 20px; position: absolute; right: -40px; bottom: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section .about-img-wrapper .about-experience { right: 40px; } } @media (max-width: 767px) { .about-section .about-img-wrapper .about-experience { right: 40px; } } .about-section .about-img-wrapper .about-experience h3 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 15px; } .about-section .about-img-wrapper .about-experience p { color: #fff; } .about-section .about-content-wrapper .about-content .counter-up { display: flex; justify-content: space-between; } @media (max-width: 767px) { .about-section .about-content-wrapper .about-content .counter-up { display: block; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-section .about-content-wrapper .about-content .counter-up { display: flex; } } .about-section .about-content-wrapper .about-content .counter-up .counter { margin-right: 10px; } .about-section .about-content-wrapper .about-content .counter-up .counter:last-child { margin-right: 0; } .about-section .about-content-wrapper .about-content .counter-up .counter span { font-size: 40px; font-weight: 600; color: #004280; display: block; margin-bottom: 8px; } .about-section .about-content-wrapper .about-content .counter-up .counter h4 { font-weight: 500; margin-bottom: 10px; }.time-line { position: relative; } .time-line .row { position: relative; } .time-line::after { content: ''; position: absolute; width: 2px; height: 100%; left: 50%; top: 0; background: #F4EEFB; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .time-line::after { display: none; } } @media (max-width: 767px) { .time-line::after { display: none; } } .time-line .box-icon-style { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid #F4EEFB; position: absolute; left: 50%; top: 50%; z-index: 2; background-color: #fff; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .time-line .box-icon-style { position: static; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0); margin-bottom: 30px; } } @media (max-width: 767px) { .time-line .box-icon-style { position: static; -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); transform: translate(0); margin-bottom: 30px; } } .time-line .box-icon-style i { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; font-size: 20px; padding: 2px; color: #004280; } @media only screen and (min-width: 768px) and (max-width: 991px) { .time-line .single-timeline { margin-bottom: 50px; } } @media (max-width: 767px) { .time-line .single-timeline { margin-bottom: 50px; } } .time-line .single-timeline:hover .box-icon-style { background: linear-gradient(#004280 0%, #6f58e8 100%); color: #fff; border-color: transparent; } .time-line .single-timeline:hover .box-icon-style i { color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .time-line .single-timeline .timeline-img { margin-bottom: 30px; } } @media (max-width: 767px) { .time-line .single-timeline .timeline-img { margin-bottom: 30px; } } .time-line .single-timeline .timeline-img img { width: 100%; }/*=========================== 05. Service CSS ===========================*/.service-section .service-box-style-2 { padding: 0; text-align: center; } .service-section .service-box-style-2 .service-thumbnail img { width: 100%; border-radius: 10px 10px 0 0; } .service-section .service-box-style-2 .box-icon-style { margin-left: auto; margin-right: auto; width: 54px; height: 54px; border: 2px solid #fff; font-size: 25px; margin-top: -27px; background: #fff; position: relative; z-index: 9; } .service-section .service-box-style-2 .box-icon-style i { color: transparent; -webkit-background-clip: text; -moz-background-clip: text; -ms-background-clip: text; -o-background-clip: text; background-clip: text; background-image: linear-gradient(#004280 0%, #6f58e8 100%); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .service-section .service-box-style-2:hover .box-icon-style { background: linear-gradient(#004280 0%, #6f58e8 100%); } .service-section .service-box-style-2:hover .box-icon-style i { color: #fff; } .service-section .service-box-style-2 .box-content-style { padding: 0 30px 35px; }/*=========================== 06. Process CSS ===========================*/.process-section .process-img-wrapper { position: relative; z-index: 1; } .process-section .process-img-wrapper::before { content: ''; position: absolute; left: -100px; bottom: -50px; width: 463px; height: 552px; border-radius: 10px 10px 231px 231px; background: linear-gradient(#f37da7 0%, #fed9b4 100%); opacity: 0.1; } .process-section .process-img-wrapper .process-img-top { margin-bottom: 20px; text-align: right; } @media only screen and (min-width: 768px) and (max-width: 991px) { .process-section .process-img-wrapper .process-img-top { text-align: center; } } .process-section .process-img-wrapper .process-img-top .img-1 { border-radius: 275px 275px 0 0; } @media (max-width: 767px) { .process-section .process-img-wrapper .process-img-top .img-1 { width: 100%; } } .process-section .process-img-wrapper .process-img-bottom { display: flex; align-items: flex-start; justify-content: flex-end; } @media only screen and (min-width: 768px) and (max-width: 991px) { .process-section .process-img-wrapper .process-img-bottom { justify-content: center; } } .process-section .process-img-wrapper .process-img-bottom .img-2 { border-radius: 10px; margin-right: 20px; vertical-align: top; } .process-section .process-img-wrapper .process-img-bottom .img-3 { border-radius: 0 0 250px 250px; }/*=========================== 10. Subscribe CSS ===========================*/.subscribe-section { position: relative; } .subscribe-section .subscribe-form { position: relative; } .subscribe-section .subscribe-form input { border: 2px solid transparent; border-radius: 50px; width: 100%; font-size: 16px; padding: 14px 20px; background: #fff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .subscribe-section .subscribe-form input:focus { -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.15); -moz-box-shadow: 0 0 30px rgba(255, 255, 255, 0.15); box-shadow: 0 0 30px rgba(255, 255, 255, 0.15); } .subscribe-section .subscribe-form button { border-radius: 50px; color: #fff; font-size: 14px; font-weight: 700; border: none; background: linear-gradient(to left, #004280 0%, #6f58e8 50.39%, #004280 100%); background-size: 200%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; position: absolute; height: 40px; width: 40px; top: 7px; right: 5px; } .subscribe-section .subscribe-form button:hover { background-position: right center; }/*=========================== 12. Contact CSS ===========================*/.contact-section { position: relative; z-index: 3; } .contact-section.cta-bg { clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%); z-index: 3; } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-section.cta-bg { clip-path: polygon(0 3%, 100% 12%, 100% 88%, 0 97%); } } @media (max-width: 767px) { .contact-section.cta-bg { clip-path: polygon(0 3%, 100% 12%, 100% 88%, 0 97%); } } .contact-section.cta-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(to left, rgba(111, 88, 232, 0.18) 0%, #004280 100%); } .contact-section .contact-item-wrapper .contact-item { display: flex; border: 1px solid #F4EEFB; border-radius: 10px; background: #fff; margin-bottom: 30px; padding: 20px 30px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .contact-section .contact-item-wrapper .contact-item:hover { -webkit-box-shadow: 0px 0px 30px rgba(215, 224, 252, 0.45); -moz-box-shadow: 0px 0px 30px rgba(215, 224, 252, 0.45); box-shadow: 0px 0px 30px rgba(215, 224, 252, 0.45); } .contact-section .contact-item-wrapper .contact-item:hover .contact-icon { -webkit-box-shadow: 0px 0px 30px rgba(46, 87, 217, 0.45); -moz-box-shadow: 0px 0px 30px rgba(46, 87, 217, 0.45); box-shadow: 0px 0px 30px rgba(46, 87, 217, 0.45); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .contact-section .contact-item-wrapper .contact-item { padding: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-section .contact-item-wrapper .contact-item { flex-direction: column; } } @media (max-width: 767px) { .contact-section .contact-item-wrapper .contact-item { flex-direction: column; } } .contact-section .contact-item-wrapper .contact-item .contact-icon { display: flex; justify-content: center; align-items: center; font-size: 22px; width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(#004280 0%, #6f58e8 100%); color: #fff; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .contact-section .contact-item-wrapper .contact-item .contact-content { margin-left: 25px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .contact-section .contact-item-wrapper .contact-item .contact-content { margin-left: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-section .contact-item-wrapper .contact-item .contact-content { margin-left: 0px; margin-top: 20px; } } @media (max-width: 767px) { .contact-section .contact-item-wrapper .contact-item .contact-content { margin-left: 0px; margin-top: 20px; } } .contact-section .contact-item-wrapper .contact-item .contact-content h4 { font-size: 20px; color: #004280; margin-bottom: 10px; }.comment-form-wrapper,.contact-form-wrapper { padding: 50px 40px; background: #fff; border: 1px solid #F4EEFB; margin-left: 0px; border-radius: 10px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .comment-form-wrapper:hover, .contact-form-wrapper:hover { -webkit-box-shadow: 0px 0px 30px rgba(215, 224, 252, 0.45); -moz-box-shadow: 0px 0px 30px rgba(215, 224, 252, 0.45); box-shadow: 0px 0px 30px rgba(215, 224, 252, 0.45); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .comment-form-wrapper, .contact-form-wrapper { margin-left: 30px; } } .comment-form-wrapper .comment-form input, .comment-form-wrapper .comment-form textarea, .comment-form-wrapper .contact-form input, .comment-form-wrapper .contact-form textarea, .contact-form-wrapper .comment-form input, .contact-form-wrapper .comment-form textarea, .contact-form-wrapper .contact-form input, .contact-form-wrapper .contact-form textarea { padding: 18px 25px; border-radius: 30px; border: 1px solid #F4EEFB; margin-bottom: 25px; width: 100%; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { .comment-form-wrapper .comment-form input, .comment-form-wrapper .comment-form textarea, .comment-form-wrapper .contact-form input, .comment-form-wrapper .contact-form textarea, .contact-form-wrapper .comment-form input, .contact-form-wrapper .comment-form textarea, .contact-form-wrapper .contact-form input, .contact-form-wrapper .contact-form textarea { padding: 12px 25px; } } .comment-form-wrapper .comment-form input:focus, .comment-form-wrapper .comment-form textarea:focus, .comment-form-wrapper .contact-form input:focus, .comment-form-wrapper .contact-form textarea:focus, .contact-form-wrapper .comment-form input:focus, .contact-form-wrapper .comment-form textarea:focus, .contact-form-wrapper .contact-form input:focus, .contact-form-wrapper .contact-form textarea:focus { border-color: #004280; } .comment-form-wrapper .comment-form textarea, .comment-form-wrapper .contact-form textarea, .contact-form-wrapper .comment-form textarea, .contact-form-wrapper .contact-form textarea { border-radius: 18px; } .comment-form-wrapper .comment-form .theme-btn, .comment-form-wrapper .contact-form .theme-btn, .contact-form-wrapper .comment-form .theme-btn, .contact-form-wrapper .contact-form .theme-btn { font-weight: 500; padding: 18px 90px; }/*=========================== 13. Footer CSS ===========================*/.footer { position: relative; z-index: 2; background: #EFF2F9; } .footer .footer-widget .footer-desc { line-height: 30px; } .footer-menu a {display: inline-block !important;} .footer .footer-widget h4 { margin-bottom: 35px; font-weight: 500; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer .footer-widget h4 { font-size: 22px; } } .footer .footer-widget ul.footer-links li a { color: #6A7C92; display: block; line-height: 35px; transition: all .3s; } .footer .footer-widget ul.footer-links li a:hover { color: #004280; } .footer .footer-widget ul { padding-left: 20px; } .footer .footer-widget ul li { list-style: disc; } .footer .footer-widget .footer-contact li p { line-height: 35px; } .footer .copyright-area { border-top: 2px solid rgba(106, 124, 146, 0.44); padding: 25px 0; font-size: 16px; position: relative; z-index: 2; } .footer .copyright-area p { text-align: right; } @media (max-width: 767px) { .footer .copyright-area p { font-size: 14px; text-align: center; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .footer .copyright-area p { font-size: 15px; } } .footer .copyright-area p a { color: #6A7C92; } .footer .copyright-area p a:hover { color: #004280; }@media (max-width: 767px) { .footer-social-links { margin-bottom: 15px; } }.footer-social-links ul { justify-content: flex-start; } @media (max-width: 767px) { .footer-social-links ul { justify-content: center; } } .footer-social-links ul li { display: inline-block; } .footer-social-links ul li a { width: 45px; height: 45px; border-radius: 50%; text-align: center; line-height: 45px; background: rgba(106, 124, 146, 0.1); display: block; font-size: 18px; color: #6A7C92; margin-right: 15px; } @media (max-width: 767px) { .footer-social-links ul li a { padding: 0 7px; margin-right: 10px; } } .footer-social-links ul li a:hover { background: linear-gradient(#004280 0%, #6f58e8 100%); color: #fff; }/* Новые стили 2025 *//* Контейнер */.contact-dropdown { position: relative; display: inline-block; z-index: 2000; /* чтобы меню было над карточками */}/* Кнопка */.btn-contact { background: #0a3d78; color: #fff; border: none; padding: 8px 18px; border-radius: 6px; font-size: 15px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.2s;}.btn-contact:hover { background: #0d4b91;}/* Выпадающее меню */.contact-menu { position: absolute; right: 0; top: calc(100% + 8px); background: #ffffff; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); min-width: 170px; padding: 6px 0; display: none; opacity: 0; transform: translateY(-5px); transition: all 0.25s ease;}/* Активный класс */.contact-menu.show { display: block; opacity: 1; transform: translateY(0);}/* Ссылки */.contact-menu a { padding: 10px 14px; display: flex; align-items: center; gap: 8px; color: #0a3d78; text-decoration: none; font-size: 15px; transition: background 0.2s ease;}/* Ховер */.contact-menu a:hover { background: #e7f1ff;}/* Иконки */.contact-menu i { font-size: 18px;}.sidebar { background-color: #cfe2ff !important; background-size: 200% auto; color: #0b2e13 !important; z-index: 1;}.sidebar a, .sidebar a:hover, .sidebar a a:hover { color: #0b2e13 !important;} .dropdown-menu { background-color: #cfe2ff !important; background-size: 200% auto; color: #0b2e13 !important;} #params-title .dropdown-menu li { max-width: 500px !important; white-space: normal !important; } .dropdown-menu li { background-color: #cfe2ff !important;} .dropdown-menu li::hover, .dropdown-menu li::click, .dropdown-menu li::hover a { background-color: #fff !important;} .product-submenu ul { margin-left: 10px !important;}.product-submenu li { margin-bottom: 3px !important;}.product-submenu li a { font-size: 15px !important; padding-bottom: 2px !important;}p { margin-bottom: 10px;}h3 { margin-bottom: 15px !important;}#description, #description p { text-align: justify !important;} #description ul, #application ul, #parameters ul, #certificates ul, #news-list ul, .content ul { margin-bottom: 15px; text-align: justify !important; font-size: 15px; position: relative; padding-left: 30px;} #description li, #application li, #parameters li, #certificates li, #news-list li, .content li { text-align: left !important; margin-bottom: 3px; display: block; }#description li:before, #application li:before, #parameters li:before, #certificates li:before, #news-list li:before, .content li:before { content: "\2014\00A0"; position: absolute; left: 10px;}.content ol { list-style: decimal inside !important; max-width: 600px !important; margin-bottom: 15px; text-align: justify !important; font-size: 15px; position: relative; padding-left: 30px;}}..content ol li { display: list-item !important; text-align: left !important; margin-bottom: 3px; display: block;}#download li a { font-size: 17px !important;}#download li a:hover { color: #004280;}#download li i { font-size: 22px !important;}#modification a:hover { color: #004280;}a.btn-primary:hover { color: #fff !important;}.hidden { display: none;}.table-striped th, .table-striped td, .table-sm th, .table-sm td { font-size: 14px !important; line-height: 22px;}.img-thumbnail { cursor: pointer; }.text-white p { color: #fff !important;} #modalImage { display: block; max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; margin: 0 auto; object-fit: contain; } #imageModal .modal-dialog { height: 90vh; max-height: 90vh; display: flex; } #imageModal .modal-content { height: 100%; display: flex; } /* Тело модалки — растягиваем */ #imageModal .modal-body { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Картинка вписывается */ #modalImage { max-width: 100%; max-height: 100%; object-fit: contain; } .table-striped td { vertical-align: top !important;}.w-35 { width: 35% !important;}/* Products */.product-main-items { display: grid; gap: 24px; grid-template-columns: 1fr; /* По умолчанию 1 колонка */}/* Планшеты - 2 колонки */@media (min-width: 768px) { .product-main-items { grid-template-columns: repeat(2, 1fr); }}/* Десктоп - 4 колонки */@media (min-width: 1024px) { .product-main-items { grid-template-columns: repeat(4, 1fr); }}.product-items { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }@media (max-width: 767px) { .product-items { display: grid; grid-template-columns: 1fr; } }.product-item { padding: 0 !important; margin: 0 !important;}.product-item .card { height: 100% !important;}.card-image {}.product-item .card-title { margin-top: 0px !important;}.product-item .card-text { text-align: left; /* выравнивание по левому краю */ word-break: break-word; /* перенос длинных слов */ overflow-wrap: break-word; /* современный аналог */ hyphens: none; /* отключаем дефисы */ line-height: 1.5; font-size: 14px !important;}#size .img-thumbnail { height: 150px !important; width: auto !important;}#application img, #application .img-thumbnail { height: 200px !important; width: auto !important;}.ajax-loader { text-align: center; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;}.object-size { margin-top: 20px;}.object-size p { font-size:14px !important; line-height; ;}.object-size-item { margin-bottom: 20px;}.object-size-pic { /*display: flex; height: 100%; align-items: center;*/}.frequancy-range { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}.frequancy-range span { text-align: left;}.pdf-icon { font-size: 1.8rem; color: #D93025; margin-right: 10px; flex-shrink: 0;}.list-group-item a { display: flex; align-items: center; gap: 8px; padding: 6px 7px;}/* Скрипт сравнения */#compare-panel { box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 1030;}.compare-btn { transition: all 0.3s ease; margin-bottom: 5px;}/* Адаптивность для модального окна сравнения */@media (max-width: 768px) { #comparison-modal .modal-dialog { margin: 10px; } #comparison-modal .table-responsive { font-size: 0.875rem; }}/* Подсветка выбранных товаров */.product-item .card { transition: box-shadow 0.3s ease;}.product-item .card.border-primary { box-shadow: 0 0 0 2px #0d6efd;}/* Скрипт сравнения конец *//* Технический фон секции */.bg-tech { background: #F4F7FB;}/* Заголовок секции */.section-title { font-size: 1.9rem; font-weight: 700; letter-spacing: 0.5px; color: #0A2A43;}/* --- ВЫРАВНИВАНИЕ КОЛОНОК ДЛЯ РОВНОЙ ВЫСОТЫ КАРТОЧЕК --- */.certificate-list .col-md-6,.certificate-list .col-lg-4 { display: flex;}/* Карточка сертификата */.certificate-card { background: #fff; border: 1px solid #E6EAF0; border-radius: 8px; /* было 10px */ padding: 12px; /* было 16px */ cursor: pointer; transition: 0.25s ease; display: flex; flex-direction: column; gap: 10px; /* было 14px */ height: 100%;}/* Ховер */.certificate-card:hover { border-color: #1B64A0; transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.07); /* немного меньше тень */}/* Превьюшки уменьшены */.certificate-thumb-wrap { width: 100%; aspect-ratio: 3 / 4; border: 1px solid #DDE3EB; border-radius: 5px; /* было 6px */ padding: 6px; /* было 8px */ background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%); display: flex; justify-content: center; align-items: center; overflow: hidden;}.certificate-thumb { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06)); transition: 0.2s ease;}.certificate-card:hover .certificate-thumb { transform: scale(1.03);}/* Текст — уменьшен */.certificate-title { font-size: 13.5px; /* было 15px */ font-weight: 500; color: #1B2A46; line-height: 1.3;}.certificate-title small { display: block; opacity: 0.6; font-size: 11.5px; /* было 13px */}/* Чтобы лупа не мешала кликам по описанию */.zoom-lens { pointer-events: none !important;}/* Контейнер модалки */.modal-cert { border-radius: 12px;}/* Ограничиваем размер модального окна */.modal-dialog { max-width: 95%;}@media (min-width: 992px) { .modal-dialog { max-width: 1200px; }}/* Контейнер для изображения */.cert-img-wrapper { width: 100%; max-height: 80vh; /* Чтобы не выходило за экран */ overflow: auto; /* Если документ длинный – появляется вертикальный скролл */ display: flex; justify-content: center;} /* Само изображение */#modalImg { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 6px; border: 1px solid #e2e5ea;}/* Контейнер */.cert-img-wrapper { position: relative; width: 100%; text-align: center;}/* Базовая картинка */.magnify { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 6px; border: 1px solid #e2e5ea;}/* Лупа */.cert-img-wrapper { position: relative; display: inline-block; max-width: 100%; user-select: none;}.zoom-viewer { max-width: 100%; max-height: 80vh; object-fit: contain; cursor: zoom-in;}/* Лупа с увеличенной областью */.cert-img-wrapper { position: relative; display: inline-block; max-width: 100%;}.zoom-viewer { max-width: 100%; max-height: 80vh; object-fit: contain; cursor: zoom-in;}.zoom-lens { position: absolute; width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgba(27,100,160,0.8); pointer-events: none; background-repeat: no-repeat; display: none; z-index: 10;}.zoom-fullscreen { position: fixed; inset: 0; background: rgba(0,0,0,0.9); display: none; justify-content: center; align-items: center; z-index: 99999;}.zoom-fullscreen img { max-width: 95%; max-height: 95%;}/* =========================== ПОДЛОЖКА ПРИ ОТКРЫТОМ МЕНЮ =========================== */#mega-backdrop { position: fixed; inset: 0; background: rgba(0, 30, 70, 0.35); /* мягкая синяя дымка */ backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; z-index: 900; /* ниже меню, выше контента */}/* Активная подложка */#mega-backdrop.active { opacity: 1; pointer-events: all;}/* =========================== МЕГА-МЕНЮ =========================== */.mega-menu { position: absolute; left: 0; right: 0; margin: 0 auto; width: 900px; max-width: 95vw; padding: 20px 24px; background: #eef5ff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; z-index: 1000;}/* Активное состояние меню */.mega-menu.show { opacity: 1; transform: translateY(0); pointer-events: all;}/* =========================== КОНТЕНТ ВНУТРИ МЕНЮ =========================== */.mega-menu a,.mega-menu h6 { white-space: nowrap;}.mega-menu .row { margin-top: 10px;}/* Ссылки */.mega-link { display: block; padding: 6px 4px !important; border-radius: 4px; font-size: 15px; color: #0a3d78; text-decoration: none; transition: background .2s ease;}.mega-link:hover { background: #d9e8ff;}/* Заголовки секций */.mega-section { font-weight: 600; font-size: 16px; color: #0a3d78; margin-bottom: 6px;}/* =========================== КНОПКА ЗАКРЫТЬ =========================== */.mega-close { position: absolute; top: 18px; right: 22px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: none; background: rgba(255, 255, 255, 0.25); color: rgba(0, 40, 90, 0.55); font-size: 32px; line-height: 1; border-radius: 8px; cursor: pointer; backdrop-filter: blur(6px); transition: color .2s ease, background .25s ease, transform .15s ease;}.mega-close:hover { background: rgba(255, 255, 255, 0.45); color: rgba(0, 20, 60, 0.9); transform: scale(1.08);}.mega-close:active { transform: scale(0.94);}/* ====== ЗАТЕМНЕНИЕ ====== */#mobileOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 9998;}#mobileOverlay.active { opacity: 1; pointer-events: all;}/* ====== ОБЕРТКА МЕНЮ ====== */.mobile-menu { position: fixed; top: 0; right: 0; width: 85%; max-width: 380px; height: 100vh; background: #ffffffee; backdrop-filter: blur(16px); box-shadow: -6px 0 30px rgba(0,0,0,0.15); padding: 30px 25px; transform: translateX(100%); transition: transform .35s ease; z-index: 9999; overflow-y: auto; border-left: 1px solid rgba(255,255,255,0.4);}.mobile-menu.open { transform: translateX(0);}/* ====== КНОПКА ЗАКРЫТИЯ ====== */.mobile-menu-close { position: absolute; top: 22px; right: 20px; font-size: 28px; color: #003050; cursor: pointer; transition: .25s;}.mobile-menu-close:hover { transform: rotate(90deg); color: #0060ff;}/* ====== ПУНКТЫ МЕНЮ ====== */.m-item,.m-toggle { all: unset; display: block; width: 100%; padding: 15px 0; font-size: 20px; font-weight: 500; color: #002b45; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.07); transition: .25s;}.m-item:hover,.m-toggle:hover { color: #0050ff;}/* ====== ПОДМЕНЮ ====== */.mobile-submenu { max-height: 0; overflow: hidden; padding-left: 12px; transition: max-height .35s ease;}.mobile-submenu.open { max-height: 800px;}.mobile-submenu a { all: unset; display: block; cursor: pointer; padding: 10px 0; font-size: 17px; border-bottom: 1px solid rgba(0,0,0,0.06); color: #003050;}.mobile-submenu a:hover { color: #0060ff;}/* ===== КНОПКИ ЯЗЫКА ===== */.lang-btn { padding: 10px 18px; border-radius: 10px; border: none; background: #0050ff; color: #fff; font-size: 16px; cursor: pointer;}/* скрываем горизонтальный скролл */body.no-scroll { overflow: hidden;}/* Бургер скрыт на ПК */#mobileMenuOpen { display: none;}/* Показываем на мобильных (до 992px) */@media (max-width: 992px) { #mobileMenuOpen { display: block !important; } /* А саму десктопную навигацию — скрываем */ .desktop-nav { display: none !important; }}/* ===== АККУРАТНОЕ КОРПОРАТИВНОЕ ЛЕВОЕ МЕНЮ VIBROBIT ===== *//* ====== COMPACT VIBROBIT SIDEBAR ====== *//* Контейнер левое меню */#navbarLeftMenu { background: #e8f0ff; border-radius: 12px; padding: 6px 0 10px; box-shadow: 0 4px 18px rgba(0, 50, 120, 0.07);}/* Общая колонка с линией слева */#navbarLeftMenu ul.nav { border-left: 2px solid rgba(0, 70, 140, 0.4); padding-left: 0; margin-left: 12px;}/* Пункты меню — компактнее */#navbarLeftMenu .nav-link { display: block; padding: 6px 10px 6px 16px; /* уменьшено */ margin: 2px 0; /* компактные интервалы */ font-size: 16px; /* компактный тех. стиль */ line-height: 1.25; /* ещё плотнее */ font-weight: 500; color: #0F2747 !important; border-radius: 6px; position: relative; transition: 0.22s ease;}/* Hover */#navbarLeftMenu .nav-link:hover { background: rgba(0, 60, 150, 0.08); color: #003A85 !important; transform: translateX(2px);}/* Активный пункт — чисто и без лишнего */#navbarLeftMenu .nav-link.active { background: rgba(0, 70, 160, 0.14); color: #003A85 !important; font-weight: 600;}/* Вертикальная полоска активного пункта — тонкая и строгая */#navbarLeftMenu .nav-link.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 4px; /* тоньше */ height: 62%; /* короче */ border-radius: 3px; background: #1B64A0; box-shadow: 0 0 6px rgba(0, 90, 170, 0.35);}/* ==== MOBILE FILTER BEAUTIFYING (VIBROBIT STYLE) ==== *//* Общий стиль карточек */.filter-block { background: #ffffff; border: 1px solid #d9e2ef; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 2px 6px rgba(0, 40, 90, 0.05);} #navbarProductMenu .filter-block .filter-title { font-size: 16px; font-weight: 600; color: #0a2f5b; margin-bottom: 10px; position: relative; padding-left: 34px; /* место под "чекбокс" */ cursor: pointer; font-weight: 600; user-select: none; display: flex; align-items: center;} /* ===== Квадрат (как чекбокс) ===== */ #navbarProductMenu .filter-block .filter-title::before { content: "\002B"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: 2px solid #0d6efd; /* bootstrap primary */ border-radius: 4px; font-size: 16px; font-weight: 700; color: #0d6efd; transition: all 0.2s ease;} #filter-title-1::before { display: none !important;}#filter-title-1 { padding-left: 0px !important;} /* ===== Открытое состояние (минус) ===== */#navbarProductMenu .filter-title[aria-expanded="true"]::before { content: "\2212"; background-color: #0d6efd; color: #fff;}/* Контейнер чекбоксов в столбик */.filter-block .filter-items { display: flex; flex-direction: column; gap: 6px;}/* Каждая строка чекбокса */.filter-block .filter-item { display: flex; align-items: center; font-size: 15px; line-height: 1.3;}/* Чекбокс */.filter-block input[type="checkbox"] { width: 18px; height: 18px; margin-right: 10px; border-radius: 4px; border: 1px solid #6993c2 !important;}/* Делает стиль плавным и аккуратным */.filter-block input[type="checkbox"]:checked { background-color: #1b64a0 !important; border-color: #1b64a0 !important;}/* Для многострочных пунктов — выравнивание */.filter-item span { display: block;}/* Сужение карточек на мобильных — чтобы выглядели не громоздкими */@media (max-width: 576px) { .filter-block { padding: 12px 14px; border-radius: 10px; } .filter-block .filter-title { font-size: 15px; margin-bottom: 8px; }}.filter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 20px; /* расстояние между строками и колонками */}.filter-item { display: flex; align-items: center; gap: 6px; font-size: 15px;} /* ===== СТИЛИ ДЛЯ РЕЗУЛЬТАТОВ ФИЛЬТРАЦИИ ===== */ /* Заголовки групп */ .filter-result-title { font-size: 24px; font-weight: 600; color: #051441; margin: 10px 0 10px 0 !important; padding-bottom: 10px; border-bottom: 2px solid #004280; } /* Первый заголовок без отступа сверху */ .filter-result-title:first-of-type { margin-top: 0 !important; } /* Адаптив для мобильных */ @media (max-width: 767px) { #products-list { grid-template-columns: 1fr; } } /* Карточка товара */ #products-list .product-item { padding: 0 !important; margin: 0 !important; width: 100%; } #products-list .product-item .card { height: 100%; border: 1px solid #e0e7f0; border-radius: 10px; overflow: hidden; transition: all 0.3s ease; background: #fff; box-shadow: 0 2px 8px rgba(0,40,90,0.05); } #products-list .product-item .card:hover { box-shadow: 0 8px 20px rgba(0,66,128,0.15); transform: translateY(-3px); border-color: #004280; } /* Левая часть с изображением */ #products-list .product-item .col-4 { padding: 15px 10px; position: relative; display: flex; flex-direction: column; align-items: center; } #products-list .product-item .card-image { width: 100%; display: flex; justify-content: center; align-items: center; min-height: 120px; } #products-list .product-item .card-image img { max-width: 100%; max-height: 130px; object-fit: contain; } /* Правая часть с текстом */ #products-list .product-item .col-8 { padding: 15px 15px 15px 0; } #products-list .product-item .card-body { padding: 0; } #products-list .product-item .card-title { margin: 0 0 10px 0 !important; font-size: 18px; font-weight: 600; line-height: 1.4; } #products-list .product-item .card-title a { color: #051441; text-decoration: none; transition: color 0.2s ease; } #products-list .product-item .card-title a:hover { color: #004280; } #products-list .product-item .card-text { font-size: 14px !important; line-height: 1.5; color: #6A7C92; text-align: left; word-break: break-word; } #products-list .product-item .card-text strong { color: #004280; font-weight: 600; } /* Кнопка сравнения */ #products-list .product-item .compare-btn { position: absolute !important; left: 6px !important; bottom: 0 !important; padding: 0 !important; width: 25px !important; height: 25px !important; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 1px solid #004280; color: #004280; transition: all 0.2s ease; z-index: 5; } #products-list .product-item .compare-btn:hover { background: #004280; color: #fff; } #products-list .product-item .compare-btn svg { width: 16px; height: 16px; } /* Разделитель между группами */ #products-list hr { margin: 0 0; border: 0; border-top: 1px solid rgba(0,66,128,0.2); grid-column: 1 / -1; /* Растягиваем на всю ширину сетки */ width: 100%; } /* Сообщение об отсутствии товаров */ #products-list .text-muted { font-size: 16px; color: #6A7C92; padding: 20px; background: #f8faff; border-radius: 8px; text-align: center; grid-column: 1 / -1; } /* Стили для сетки карточек внутри каждой группы */ .filter-result-title, #products-list > hr, #products-list > .text-muted { grid-column: 1 / -1; /* Растягиваем на всю ширину */ } /* Анимация появления */ #products-list.fade-out { opacity: 0; transform: translateY(10px); } #products-list.fade-in { opacity: 1; transform: translateY(0); } /* Стили для заблокированных фильтров */ .filter-disabled { opacity: 0.6; pointer-events: none; } .filter-disabled .filter-title { color: #999; cursor: not-allowed; } .filter-item.disabled-filter { opacity: 0.5; cursor: not-allowed; } .filter-item.disabled-filter input[type="checkbox"] { pointer-events: none; opacity: 0.5; } /* ==== БОКОВОЕ МЕНЮ ПРОДУКТА ==== */.product-toc { background: #d9e8ff; border-radius: 12px; padding: 25px 25px 25px 35px; max-width: 330px; position: sticky; top: 20px; height: max-content;}/* Заголовок */.product-toc .toc-title { font-size: 22px; font-weight: 700; margin-bottom: 20px; color: #002b60;}/* Контейнер ссылок */.product-toc .toc-nav { position: relative; padding-left: 20px;}/* Вертикальная линия (progress-line) */.product-toc .toc-nav::before { content: ""; position: absolute; left: 7px; top: 5px; bottom: 5px; width: 3px; background: #bcd3ff; border-radius: 3px;}/* Ссылки */.product-toc a { display: block; padding: 10px 10px 10px 15px; margin-bottom: 8px; border-radius: 8px; font-size: 16px; font-weight: 500; color: #003b75; text-decoration: none; position: relative; transition: all .25s ease;}/* Точка (узел) возле пункта */.product-toc a::before { content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; background: #ffffff; border: 3px solid #7caeff; border-radius: 50%; transition: all .25s ease;}/* Hover */.product-toc a:hover { background: #c8ddff; color: #002b60;}/* Активный пункт */#product-toc a.active { background: #005bda; color: #FFF !important;}/* Активная точка */.product-toc a.active::before { border-color: #005bda; background: #ffffff; transform: translateY(-50%) scale(1.2);}/* ===== Мобильная версия TOC (Vibrobit style) ===== */@media (max-width: 968px) { /* Прячем десктопную версию */ .product-toc { position: relative; top: auto; max-width: 100%; padding: 0; background: transparent; border-radius: 0; } /* Кнопка-заголовок */ .toc-mobile-toggle { background: #d9e8ff; padding: 14px 18px; font-size: 18px; font-weight: 600; color: #003b75; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,40,90,0.08); cursor: pointer; user-select: none; margin-bottom: 10px; } /* Скрытое меню */ .product-toc ul { display: none; margin-top: 12px; background: #eef4ff; border-radius: 10px; padding: 14px 12px; box-shadow: 0 2px 10px rgba(0,40,90,0.08); } /* Активное состояние (меню раскрыто) */ .product-toc.open ul { display: block; } /* Ссылки в мобильном меню */ .product-toc a { padding: 10px 12px; margin-bottom: 6px; font-size: 16px; color: #003b75 !important; border-radius: 6px; background: transparent; } .product-toc a:hover { background: #d1e4ff; } /* Убираем точки и линию в мобильной версии */ .product-toc .toc-nav::before, .product-toc a::before { display: none !important; }}/* ========= Vibrobit Slider 2025 — FINAL CLEAN VERSION ========= *//* Контейнер секции */.carousel-section-wrapper { min-height: 400px; position: relative; overflow: hidden;}/* Внутренняя область слайдов — фиксируем высоту */.vibro-inner { min-height: 400px; height: 400px; position: relative;}/* Слайд */.vibro-slide { display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; height: 100% !important; background-size: cover !important; background-position: center !important; position: relative;}/* Градиент */.vibro-overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(0,50,120,0.55), rgba(0,78,150,0.9) ); z-index: 1;}/* Контент слайда */.carousel-caption { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; padding: 0 !important;}.vibro-caption { height: 250px; position: relative !important; max-width: 800px; z-index: 100; text-align: center; margin-left: auto !important; margin-right: auto !important;}.vibro-caption,.vibro-caption p,.vibro-caption a { color: #ffffff !important;}/* Плавное появление текста */.fade-text { opacity: 0; transform: translateY(15px); transition: opacity .8s ease, transform .8s ease;}.carousel-item.active .fade-text { opacity: 1; transform: translateY(0);}.vibro-inner .theme-btn { border: 1.5px solid #FFF !important;}/* Стрелки */.vibro-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 2px solid #ffffff88; background: transparent; display: flex; align-items: center; justify-content: center; z-index: 5; transition: .25s ease;}.vibro-arrow span i { font-size: 20px; color: #fff;}.vibro-arrow:hover { background: #fff; border-color: #fff;}.vibro-arrow:hover i { color: #004280;}/* Индикаторы */.vibro-indicators button { width: 12px !important; height: 12px !important; padding: 0 !important; border-radius: 50%; border: 2px solid #ffffffcc !important; background: transparent !important; margin: 0 6px !important; transition: .3s ease; opacity: 1 !important;}.vibro-indicators button.active { background: #fff !important; transform: scale(1.2);}/* Плавное переключение Bootstrap */.carousel-item { transition: opacity .8s ease-in-out !important;}/* ========= MOBILE FIX (<= 767px) ========= */@media (max-width: 767px) { /* Высота перестаёт быть фиксированной */ .carousel-section-wrapper, .vibro-inner, .vibro-slide { height: auto !important; min-height: 420px; } /* Caption перестаёт быть absolute → чтобы текст не вылезал */ .vibro-caption { width: 90%; padding: 20px; text-align: center; z-index: 5; /* Центрирование по вертикали */ margin-top: auto; margin-bottom: auto; /* Центрирование по горизонтали */ margin-left: auto; margin-right: auto; } .vibro-caption h2 { font-size: 26px !important; line-height: 1.25 !important; margin-bottom: 16px; } .vibro-caption p { font-size: 15px !important; line-height: 1.35 !important; margin-bottom: 18px; } .vibro-caption .theme-btn { padding: 8px 20px !important; font-size: 14px !important; } /* Градиент вертикальный */ .vibro-overlay { background: linear-gradient( to bottom, rgba(0,50,120,0.5), rgba(0,78,150,0.88) ); } /* Стрелки меньше и выше */ .vibro-arrow { width: 38px; height: 38px; border-width: 1.5px; top: 38%; } .vibro-arrow span i { font-size: 16px; } /* Индикаторы ниже и меньше */ .vibro-indicators { bottom: 14px !important; } .vibro-indicators button { width: 10px !important; height: 10px !important; margin: 0 4px !important; }} /* Сбрасываем стили ВСЕХ тегов внутри expandable-table */ .expandable-table * { color: #0A0F1A !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; text-align: inherit !important;} .expandable-table th { font-weight: bold !important;} /* Делаем p «обычным текстом» */. expandable-table p { display: inline !important;} /* Убираем маркеры у списков */.expandable-table ul,.expandable-table ol { list-style: none !important; margin-left: 0 !important;}/* Списки идут подряд, как обычный текст */.expandable-table li { display: inline !important;} .expandable-table { table-layout: fixed; width: 100%; } .expandable-table th:first-child, .expandable-table td:first-child { width: 50%; } .expandable-table th:last-child, .expandable-table td:last-child { width: 50%; } .modal { z-index: 10000 !important;}.modal-backdrop { z-index: 9999 !important;} /* ===== sticky header for compare table ===== */ /* Контейнер таблицы должен скроллиться */ .compare-table { border-collapse: separate; } /* ===== Фиксация первой строки ===== */ .compare-table thead th.compare-sticky-top { position: sticky; top: 0; background: #fff; z-index: 3; vertical-align: top; }.th-link { width: 100%; height: 100%; /* Убираем стандартные стили ссылки, если нужно */ text-decoration: none; color: inherit;} /* ===== Левый верхний угол (Параметр) ===== */ .compare-table thead th.compare-sticky-col { position: sticky; left: 0; z-index: 4; } /* ===== ОБЯЗАТЕЛЬНО ===== */ /* Родитель должен быть scroll-контейнером */ .table-responsive { max-height: 70vh; overflow: auto; } /* общий блок карточки */ .object-size-item { display: flex; flex-direction: column; } /* контейнер для картинки: единое соотношение сторон */ .object-size-pic{ width: 100%; aspect-ratio: 4 / 3; /* можно 1/1 или 16/9 — выбери под дизайн */ display: flex; align-items: center; justify-content: center; overflow: hidden; } /* сама картинка вписывается и не режется */ .object-size-pic img{ width: 100%; height: 100%; object-fit: contain; display: block; } /* Переопределяем Bootstrap стили для нашей кнопки сравнения */ .compare-btn.btn-primary { background-color: #004280 !important; border-color: #004280 !important; color: #fff !important; } .compare-btn.btn-primary:hover { background-color: #003366 !important; border-color: #003366 !important; color: #fff !important; } .compare-btn.btn-outline-primary { color: #004280 !important; border-color: #004280 !important; background-color: transparent !important; } .compare-btn.btn-outline-primary:hover { background-color: #004280 !important; color: #fff !important; } .product-full-page { display: block !important; } #params-title { white-space: nowrap; } #params-title button { font-size: 1.5rem !important; padding: 2px 0px 4px 4px !important; line-height: 1rem !important; transform: translateY(-3px); } /* ===== MOBILE MENU FIXES 2026 ===== */ .mobile-menu { box-sizing: border-box; } .mobile-menu .m-item { padding: 0; border-bottom: none; } .mobile-menu .m-item a { display: block; width: 100%; padding: 15px 0; font-size: 20px; font-weight: 500; color: #0a2f5b; border-bottom: 1px solid rgba(0,0,0,0.07); text-decoration: none; transition: .25s; box-sizing: border-box; } .mobile-menu .m-item a:hover { color: #0050ff; } .mobile-menu-contacts { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; } .mobile-contact-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 12px; background: linear-gradient(90deg, #0050ff, #823bff); color: #fff !important; text-decoration: none; font-size: 18px; line-height: 1.3; box-sizing: border-box; overflow-wrap: anywhere; } .mobile-contact-btn i { font-size: 20px; flex-shrink: 0; } .mobile-contact-btn span { display: block; min-width: 0; word-break: break-word; } .mobile-contact-btn:hover { color: #fff !important; opacity: 0.95; } #products-list .col.list-group { display: flex; flex-direction: column; height: auto; } #products-list .col.list-group .list-group-item { flex: 1; display: flex !important; align-items: center !important; height: 100% !important; min-height: 80px; /* Минимальная высота, можно настроить под ваш дизайн */ margin: 0; padding: 12px 16px; word-break: break-word; } /* Для ссылок внутри */ #products-list .col.list-group .list-group-item a { display: flex; align-items: center; gap: 10px; width: 100%; text-decoration: none; color: #051441; word-break: break-word; } /* Иконка PDF фиксированного размера */ #products-list .col.list-group .pdf-icon { flex-shrink: 0; font-size: 1.5rem; } /* Для мобильных устройств */ @media (max-width: 767px) { #products-list .col.list-group .list-group-item { min-height: 70px; padding: 10px 12px; } #products-list .col.list-group .list-group-item a { font-size: 14px; } } /* ===== SITEMAP: clean & readable ===== */ .content { padding: 40px 0 80px; background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%); } .sitemap-bootstrap { max-width: 1100px; margin: 40px auto 80px; padding: 48px 56px; background: #ffffff; border: 1px solid #e7edf5; border-radius: 20px; box-shadow: 0 10px 30px rgba(20, 50, 90, 0.06); } .sitemap-bootstrap h2 { margin-bottom: 24px; color: #0d2b6b; font-size: 56px; font-weight: 700; line-height: 1.1; } .sitemap-top-link { margin-bottom: 28px; } .sitemap-top-link a { display: inline-flex; align-items: center; padding: 14px 20px; background: #f5f8fc; border: 1px solid #e1e9f3; border-radius: 14px; color: #102a5c; font-size: 20px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } .sitemap-top-link a:hover { color: #0b4ea2; background: #edf4fb; text-decoration: none; } /* ===== FIXED GRID ===== */ .sitemap-grid { columns: 2; column-gap: 36px; } .sitemap-group { display: inline-block; width: 100%; margin-bottom: 28px; break-inside: avoid; padding: 24px 28px; background: #f9fbfe; border: 1px solid #edf2f8; border-radius: 16px; box-sizing: border-box; } .sitemap-group h3 { margin: 0 0 16px; font-size: 22px; line-height: 1.3; color: #102a5c; font-weight: 700; } .sitemap-group ul { margin: 0; padding-left: 0; list-style: none; } .sitemap-group li { margin-bottom: 12px; } .sitemap-group li:last-child { margin-bottom: 0; } .sitemap-group li a { position: relative; display: inline-block; padding-left: 18px; color: #4b5b76; text-decoration: none; transition: color 0.2s ease, padding-left 0.2s ease; } .sitemap-group li a::before { content: "–"; position: absolute; left: 0; top: 0; color: #4b5b76; } .sitemap-group li a:hover { color: #0b4ea2; padding-left: 22px; text-decoration: none; } .sitemap-group li:before { left: 0 !important; } /* ===== ADAPTIVE ===== */ @media (max-width: 991px) { .sitemap-bootstrap { padding: 32px 24px; margin: 24px auto 48px; } .sitemap-bootstrap h2 { font-size: 40px; } .sitemap-grid { columns: 1; } .sitemap-top-link { margin-bottom: 20px; } } @media (max-width: 575px) { .sitemap-bootstrap h2 { font-size: 32px; } .sitemap-top-link a { font-size: 18px; padding: 12px 16px; } .sitemap-group { padding: 20px; } .sitemap-group h3 { font-size: 20px; } } /* Keep rich-text backgrounds from painting over the product photo. */ .product-description-body { display: flex; align-items: flex-start; gap: 24px; } .product-description-text { flex: 1; min-width: 0; display: flow-root; } .product-description-body > .product-description-image { order: 1; flex: 0 0 auto; width: auto; height: auto; max-width: 35%; max-height: 150px; object-fit: contain; } @media (max-width: 575.98px) { .product-description-body { flex-direction: column; gap: 16px; } .product-description-body > .product-description-image { order: 0; max-width: 100%; align-self: center; } .product-description-text { width: 100%; } }