@import "./form.css";
 @import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

 :root {
   --font-primary: "Caveat Brush";
   --font-secondary: "DM Sans";
   --color-primary: #FEC307;
   --color-secondary: #000000;
   --color-tertiary: #1d63dc;
   --white-color: #ffffff;
   --black-color: #0A0A0A;
   --color-black: #0A0A0A;
   --bg-color: #121212;
   --color-light: #ffffff;
   --color-icon-bg: #4792c2;
   --color-primary-darker: #4d617f;
   --color-secondary-lighter: #747474;
   --color-tertiary-darker: #fd424b;
   --color-primary-opacity: #5ec5763a;
   --color-secondary-opacity: #ffcd0331;
   --color-tertiary-opacity: #ff58602d;
   --color-border: rgba(0, 0, 0, 0.2);
   --gradient-primary: linear-gradient(272.81deg,
       #73b2db 8.01%,
       #418cbd 105.34%);
   --gradient-primary-reversed: linear-gradient(272.81deg,
       #418cbd 8.01%,
       #73b2db 105.34%);
   --gradient-secondary: linear-gradient(to top left, #ffb003, #ffcb03);
 }

 .accordion {
   --bs-accordion-btn-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHBhdGggZD0iTTIzMy40IDQwNi42YzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwbDE5Mi0xOTJjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMjU2IDMzOC43IDg2LjYgMTY5LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zbDE5MiAxOTJ6IiBmaWxsPSIjRkVDMzA3Ii8+PC9zdmc+");
 }

 *,
 *:before,
 *:after {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }

 hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0;
 }

 p a {
   color: var(--color-primary)
 }

 audio,
 canvas,
 iframe,
 img,
 svg,
 video {
   vertical-align: middle;
 }

 fieldset {
   border: 0;
   margin: 0;
   padding: 0;
 }

 textarea {
   resize: vertical;
 }

 a,
 a:hover,
 a:focus {
   text-decoration: none;
   color: inherit;
   cursor: pointer;
 }

 .page,
 .post,
 .site-main .comment-navigation,
 .site-main .post-navigation,
 .site-main .posts-navigation,
 .widget,
 address,
 table {
   margin: 0px;
 }

 figure {
   margin: 0;
 }

 input::-moz-focus-inner {
   border: 0;
   padding: 0;
   margin: 0;
 }

 input {
   outline: unset;
 }

 ul,
 ol,
 dd {
   margin: 0;
   padding: 0;
   list-style: none;
 }

 body {
   overflow-x: hidden;
   padding-top: 55px;
   font-family: var(--font-primary);
   background: var(--color-secondary);
 }


 .container,
 .container-lg,
 .container-md,
 .container-sm,
 .container-xl,
 .container-xxl {
   max-width: 1444px;
 }

 .pad-t {
   padding-top: 100px;
 }

 .pad-b {
   padding-bottom: 100px;
 }

 @media print {

   *,
   *::before,
   *::after {
     background: #fff !important;
     color: #000 !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
     text-shadow: none !important;
   }

   a,
   a:visited {
     text-decoration: underline;
   }

   a[href]::after {
     content: " (" attr(href) ")";
   }

   abbr[title]::after {
     content: " (" attr(title) ")";
   }

   a[href^="#"]::after,
   a[href^="javascript:"]::after {
     content: "";
   }

   pre {
     white-space: pre-wrap !important;
   }

   pre,
   blockquote {
     border: 1px solid #999;
     page-break-inside: avoid;
   }

   thead {
     display: table-header-group;
   }

   tr,
   img {
     page-break-inside: avoid;
   }

   p,
   h2,
   h3 {
     orphans: 3;
     widows: 3;
   }

   h2,
   h3 {
     page-break-after: avoid;
   }
 }

 a:visited {
   color: var(--color-tertiary);
 }

 a:hover {
   color: var(--color-primary);
 }

 a:focus {
   color: var(--color-primary);
 }

 a:active {
   color: var(--color-primary);
 }

 picture {
   display: block;
 }

 picture img {
   max-width: 100%;
 }

 .di-text-blue {
   color: var(--color-primary);
   font-weight: 700;
 }

 .page-wrapper .pad-sec-first {
   padding-top: 180px;
 }

 .pt-200 {
   padding-top: 120px;
 }

 .pb-200 {
   padding-bottom: 120px;
 }

 h1,
 .h1 {
   font: 700 60px/1.333 var(--font-primary);
 }

 h2,
 .h2 {
   font: 400 50px/1.1666 var(--font-primary);
 }

 h3,
 .h3 {
   font: 700 40px/1.2 var(--font-primary);
 }

 h4,
 .h4 {
   font: 400 30px/1.2 var(--font-primary);
 }


 h6,
 .h6 {
   font: 400 20px/1.5 var(--font-primary);
 }

 .h6-fw-25 {
   font: 400 25px/1.5 var(--font-primary);
 }

 .h6-fw-18 {
   font: 600 18px/1.5 var(--font-primary);
 }

 h2,
 .main-button {
   text-transform: capitalize;
 }

 p {
   font: 400 18px/1.6 var(--font-secondary);
 }

 p span {
   display: block;
 }

 .p-sm {
   font: 400 16px/1.6 var(--font-secondary);
 }

 .p-xs {
   font: 400 12px/1.2 var(--font-secondary);
 }

 .text-gradient {
   background-color: var(--color-primary);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 /* btn  */
 .main-button {
   background: var(--color-primary);
   color: var(--black-color);
   padding: 15px 28px;
   border: 2px solid var(--white-color) !important;
   border-radius: 12px;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   position: relative;
   font-family: var(--font-primary);
   font-weight: 400;
   font-size: 24px;
   line-height: 100%;
   transition: background 0.8s ease, color 0.8s ease, border 0.8s ease;
   position: relative;
 }

 .main-button:visited,
 .main-button:focus {
   color: var(--black-color) !important;
 }

 .white-btn {
   background: var(--color-light);
   color: var(--black-color);
   box-shadow: 3px 3px 0px 1px #000000;
 }

 .white-btn:visited,
 .white-btn:focus {
   color: var(--white-color);
 }

 .main-button:hover {
   background: #e3ad00;
   color: var(--black-color);
   border: 2px solid #e3ad00 !important;
 }

 .main-button:not(.remove-icon) {
   padding-right: 45px;
 }

 .main-button:not(.remove-icon):after {
   content: "";
   width: 20px;
   height: 23px;
   background: url("../images/skills-img/arrow.svg") no-repeat center;
   background-size: contain;
   position: absolute;
   right: 17px;
   top: 50%;
   transform: translateY(-50%);
   transform: translateY(-50%);
   transition: transform 0.5s ease;
 }

 /* .white-btn:not(.remove-icon):after {
   background: url("../images/skills-img/whitearrow.svg") no-repeat center;
   background-size: contain;
 } */

 .white-btn:not(.remove-icon):hover:after {
   background: url("../images/skills-img/arrow.svg") no-repeat center;
   background-size: contain;
 }

 .buttons .main-button+.main-button {
   margin-left: 30px;
 }

 .main-button,
 .main-button:hover:before,
 .main-button:focus:before {
   transition: 0.4s all;
 }

 span.dff-span {
   color: var(--color-primary);
   font-weight: 700;
 }

 /* slider  */
 .custom-slider-arrows {
   top: 60%;
   left: 0;
 }

 .swiper-pointer-events {
   touch-action: pan-y;
   height: 100%;
 }

 .swiper-slide {
   height: auto;
 }

 .swiper-button-next,
 .swiper-button-next1,
 .swiper-rtl .swiper-button-prev,
 .swiper-button-prev,
 .swiper-button-prev1,
 .swiper-rtl .swiper-button-next,
 .swiper-rtl .swiper-button-prev1,
 .swiper-rtl .swiper-button-next1 {
   position: relative;
   left: -50px;
 }

 .swiper-button-next:after,
 .swiper-rtl .swiper-button-prev:after,
 .swiper-button-prev:after,
 .swiper-rtl .swiper-button-next:after {
   border-radius: 100%;
   padding: 30px;
   font-size: 25px;
   color: #000;
   background: white;
   box-shadow: 0px 4px 34px 0px #fec30757;
   width: 67px;
   height: 67px;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .swiper-button-prev1::after,
 .swiper-button-next1::after {
   content: "prev";
   border-radius: 100%;
   padding: 30px;
   font-size: 25px;
   color: #000;
   background: white;
   box-shadow: 0px 4px 34px 0px #4792c280;
   width: 67px;
   font-family: swiper-icons;
   height: 67px;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .swiper-pagination-bullet {
   width: 15px;
   height: 15px;
   background: unset;
   border: 1px solid #747474;
   margin-inline: 7px !important;
 }

 .swiper-pagination-bullet-active {
   background: var(--color-primary);
   border: none;
 }

 /**/
 .panel,
 .slide-active {
   scroll-snap-align: start;
   height: 100vh;
   overflow: hidden;
 }

 .m-b-white {
   background-color: var(--color-primary);
   background-image: none;
   color: var(--black-color);
   -webkit-box-shadow: 10px 14px 34px rgba(0, 0, 0, 0.15);
   box-shadow: 10px 14px 34px rgba(0, 0, 0, 0.15);
   border-radius: 70px;
 }

 /* output  */
 .wpcf7 form .wpcf7-response-output {
   margin: auto;
   padding: 0.2em 1em;
 }

 .wpcf7 form.failed .wpcf7-response-output,
 .wpcf7 form.aborted .wpcf7-response-output {
   color: var(--color-light);
   border-color: red !important;
 }

 .wpcf7 form.invalid .wpcf7-response-output,
 .wpcf7 form.unaccepted .wpcf7-response-output,
 .wpcf7 form.payment-required .wpcf7-response-output {
   border-color: red;
 }

 .wpcf7 form .wpcf7-response-output {
   color: var(--color-light);
   border-color: var(--color-primary) !important;
 }

 /* responsiveness  */
 @media (max-width: 1699px) {
   p {
     font-size: 16px;
     line-height: 27px;
   }

   .p-sm {
     line-height: 27px;
   }
 }

 @media (max-width: 1399px) {
   p {
     font-size: 15px;
   }

   h1,
   .h1 {
     font-size: 50px;
   }

   h2,
   .h2 {
     font-size: 40px;
   }

   h3,
   .h3 {
     font-size: 30px;
   }

   h4,
   .h4 {
     font-size: 25px;
   }

   .pad-t {
     padding-top: 80px;
   }

   .pad-b {
     padding-bottom: 80px;
   }
 }

 @media (max-width: 1199px) {

   .swiper-button-next:after,
   .swiper-rtl .swiper-button-prev:after,
   .swiper-button-prev:after,
   .swiper-rtl .swiper-button-next:after {
     padding: 25px;
     font-size: 16px;
     width: 25px;
     height: 25px;
   }

   .swiper-button-next1:after,
   .swiper-rtl .swiper-button-prev1:after,
   .swiper-button-prev1:after,
   .swiper-rtl .swiper-button-next1:after {
     padding: 25px;
     font-size: 16px;
     width: 25px;
     height: 25px;
   }

   h1,
   .h1 {
     font-size: 45px;
   }

   h2,
   .h2 {
     font-size: 35px;
   }

   h3,
   .h3 {
     font-size: 25px;
   }

   h4,
   .h4 {
     font-size: 20px;
   }

   h6,
   .h6 {
     font-size: 18px;
   }

   .h6-fw-18 {
     font-size: 16px;
   }

   .h6-fw-25 {
     font-size: 18px;
   }

   .form-control {
     min-height: 50px !important;
   }
 }

 @media (max-width: 991px) {

   h1,
   .h1 {
     font-size: 40px;
   }

   .main-button {
     padding-left: 26px !important;
   }

   h2,
   .h2 {
     font-size: 30px;
   }

   h3,
   .h3 {
     font-size: 20px;
   }

   p {
     font-size: 14px;
   }

   .p-sm {
     font-size: 14px;
   }

   .pad-t {
     padding-top: 60px;
   }

   .pad-b {
     padding-bottom: 60px;
   }

   .h6-fw-18 {
     font: 14px;
   }
 }

 @media (max-width: 767px) {
   body {
     padding-top: 70px;
   }

   h1,
   .h1 {
     font-size: 35px;
   }

   h2,
   .h2 {
     font-size: 25px;
   }

   .form-control {
     min-height: 40px !important;
     padding: 10px 10px 10px 20px !important;
   }

   .swiper-button-next:after,
   .swiper-rtl .swiper-button-prev:after,
   .swiper-button-prev:after,
   .swiper-rtl .swiper-button-next:after {
     padding: 20px;
     font-size: 12px;
     width: 20px;
     height: 20px;
   }
 }

 @media (max-width: 575px) {

   h1,
   .h1 {
     font-size: 30px;
   }

   .pad-t {
     padding-top: 50px;
   }

   .pad-b {
     padding-bottom: 50px;
   }

   .form-control::placeholder {
     font-size: 14px;
   }

   p,
   .p-sm {
     line-height: 24px;
   }

   .main-button:not(.remove-icon):before {
     font-size: 10px;
   }
 }

 @media (max-width: 375px) {
   .main-button {
     min-height: 46px;
     font-size: 14px;
     padding-left: 20px !important;
     padding-right: 40px;
   }

   .main-button:before {
     width: 25px;
     height: 25px;
   }
 }