@import url('https://fonts.googleapis.com/css2?family=Volkhov:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --primary2: #3155e7;
    --primary-dark2: #2045d6;
    --black: #010101;
    --gray-1: #1d1d1f;
    --gray-2: #d3d4db;
    --white: #FFFFFF;
    --body: #fefefe;
    --primary: #d0277f;
    --primary-dark: #40c099;
    --deep-gray:#f4edf9;

      /* 81a9c3 63b0b8 c4b2d7  a878c5 dbcbe8*/
}

body {
    font-family: 'Volkhov', serif;
    background-color: var(--deep-gray);
}

.btn {
    border-color: var(--primary);
    border-radius: 8px;
}

.btn-primary,
.btn-outline-secondary {
    padding: 12px 20px;
}

.btn-primary {
    color: var(--white);
    background-color: var(--primary);
}

.btn-primary:hover {
    color: var(--black)!important;
    background-color: var(--deep-gray);
}

.btn-outline-secondary {
    border: 1px solid var(--gray-2);
    color: var(--black);
}

.btn-outline-secondary:hover {
    background-color: var(--gray-2);
    border: 1px solid var(--gray-2);
    color: var(--black);
}

.btn-outline-secondary:focus {
    background-color: var(--gray-2);
    border: 1px solid var(--gray-2);
    color: var(--black);
}

.navbar .btn-outline-secondary {
    border: 1px solid var(--gray-2);
    color: var(--black);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 10px 20px;
}

.navbar {
    padding: 16px 0;
    background-color: rgba(251, 251, 253, .9) !important;
}

.nav-link {
    margin-left: 41px;
    font-size: 18px;
    color: var(--gray-1);
}


.navbar-nav .nav-link.active {
    font-weight: bold;
    color: var(--primary);
}

#background-video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.9;
}

section.introtest {
    height: 100vh;
    /* padding-top: 76px; */
}

section.introtest .textsection {
    margin-top: 16px;
    /* background-color:rgb(255 255 255 / 26%); */
    text-align: center;
}

section.introtest .text h1{
    padding-top: 28px;
    padding-bottom: 24px;
    font-weight: 800;
    font-size: 40px;
    line-height: 54px;
    color: #fefefe;
    /* background: #121FCF; */
    /* background: #CF6E00; */
/* background: -webkit-radial-gradient(ellipse farthest-corner at center center, #007fff 0%, #c200fb 100%);
background: -moz-radial-gradient(ellipse farthest-corner at center center, #007fff 0%, #c200fb 100%);
background: radial-gradient(ellipse farthest-corner at center center, #007fff 0%, #c200fb 100%); */

-webkit-background-clip: text;
/* -webkit-text-fill-color: transparent; */
}

.introtest .slides {

    /* background: linear-gradient(to right, #f5f5f7,#f5f5f7,#f5f5f7); */
    height: 550px;
    padding-top: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    overflow: hidden;
}

.slidertest {
    position: relative;
    width: 160px;
    height: 220px;
    transform-style: preserve-3d;
    animation: rotate 30s linear infinite;
}

.slidertest span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i)*45deg)) translateZ(350px);
}

.slidertest span img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: 2s;
    border-radius: 5px;
}


.slidertest span:hover img {
    transform: translateY(-16px) scale(1.1);
}

@keyframes rotate {
    0% {
        transform: perspective(700px) rotateY(0deg);
    }

    100% {
        transform: perspective(800px) rotateY(360deg);
    }
}


.boxscroll {
    position: absolute;
    top: calc(100vh - 100px);
    left: calc(50% - 10px);
    transform: translate(-50%,-50%);
    cursor: pointer;
}

.boxscroll span{
    
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid var(--primary);
    border-right: 3px solid var(--primary);
    transform: rotate(45deg);
    margin:-10px;
    animation: animate 2s infinite;
}   
.boxscroll span:nth-child(2) {
animation-delay: -0.2s;

}
.boxscroll span:nth-child(3) {
    animation-delay: -0.4s;
    
    }
    
@keyframes animate {
     0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
     }
     50% {
        opacity: 1;
     }
     100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
     }
}

/* section about us */
section.aboutus {
    background-color: #fefefe;
    margin-top: 80px;
    /* height: 80vh; */
    display: flex;
}

section.aboutus .imgcover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 2s;
    /* border-radius: 8px; */
}


section.aboutus .rows {
    align-items: center;
    min-height: 80vh;
}

section.aboutus .details {
    margin-left: 28px;
}

section.aboutus .details h4 {
    font-weight: 600;
    color: var(--primary);
    padding-bottom: 24px;
}

section.aboutus .details h5 {
    font-weight: bold;
    line-height: 1.2;
    padding-bottom: 24px;
}

section.aboutus .details h6 {
    padding-bottom: 24px;
    line-height: 1.5;
}

/* section about us */

/* services section start */

.caroulsection {
    padding-top: 80px;
    /* background-image: url("./assets/img/whatwedo.jpg");
    background-position: center;
    background-repeat: no-repeat; */
}

.caroulsection .carddescription .btn {
    padding: 10px 20px !important;
}
.carddescription p
{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.caroulsection .btn-primary {
    /* background:rgb(236, 197, 88)!important; */
    /* border-color: rgb(236, 197, 88)!important; */
    color: fff;
    font-weight: 600;
    border-radius: 8px;
    /* width: 120px; */
}

.cardcontainer h4 {
    font-weight: 600;
}

.caroulsection h2 {
    font-weight: 600;
}

.caroulsection img,
video {
    height: 280px;
    padding: 0px;
}

.cardcontainer {
    /* opacity: 0.8; */
    transform: scale(0.9);
    transition: opacity 0.3s, transform 0.3s;
}

.cardcontainer:hover {
    opacity: 1;
    transform: scale(1);
}

/* services section end */


/* section information start */
section.information .info-1 {
    padding: 24px 0;
}

section.information .info-2 {
    padding: 24px 0;
}

section.information .text-information {
    padding: 24px 0;
}

/* section information end */

/* section becomeclient start */


section.becomeclient {
    margin-top: 32px;
    width: 100%;
    max-width: 100%;
    height: 640px;
}

section.becomeclient .becomeclients {
    display: flex;
    max-width: 100%;
    width: 100%;
    height: 640px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(assets/img/background.jpg);
    align-items: center;
    justify-content: center;
}

section.becomeclient .becomeclients .content {
    text-align: center;
}

section.becomeclient .becomeclient .row {
    margin: 0 !important;
}

section.becomeclient .becomeclients .content p {
    color: var(--primary);
    font-size: 24px;
}

section.becomeclient .becomeclients .content h1 {
    font-size: 64px;
    font-weight: bold;
}

section.becomeclient .becomeclients .pb3 {
    margin-top: 14px;
}

/* section becomeclient end */

.footersection .contactus {
   background-repeat: no-repeat;
    background-size: contain;
}

.footerbody {
    background-image: url("./assets/img/contactfooter.jpg");
    /* background-image: url("./assets/img/cont.svg"); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.footersection {
    /* height: 100vh; */
    display: flex;
    justify-content: center;

    align-items: center;
}

.footersection .row {
    /* background-color: #ca812a; */
}

.footersection p {
    font-size: 16px;
}

.footersection .footerleftbg {
    background-color: rgb(36, 36, 112)
        /* rgb(236, 197, 88)    rgb(224, 102, 66) */
}

.footersection .contactForm .form-control.textinput {
    background-color: rgb(255 255 255 / 2%);
    border: none;
    border-radius: 0;
    padding: 0;
    border-bottom: 1px solid rgb(36, 36, 112);
}

.footersection .contactForm .form-control.textarea {
    background-color: rgb(255 255 255 / 2%);
    border: 1px solid rgb(36, 36, 112);
}

.footersection .form-control.textinput:focus,
.form-control.textinput:active {
    box-shadow: none;
    /* border-color: rgb(236, 197, 88) !important; */
    border-color: var(--primary);
}

.footersection .form-control.textarea:focus,
.form-control.textarea:active {
    box-shadow: none;
    border-color: var(--primary);
    /* border-color: rgb(236, 197, 88) !important; */
}

.footersection .contactheader {
    font-weight: 700;
}
#contactus h2 {
    font-weight: 600;
} 
/* .footersection .contactForm .btn-primary{
    background:rgb(236, 197, 88)!important;
    border-color: rgb(236, 197, 88)!important;
    color: black;
    font-weight: 600;
    border-radius: 8px;
    //width: 120px; 
} 
*/
.footersection .contactForm .btn-primary {

    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    /* width: 120px; */
}

.footersection .bi {
    font-size: 32px;
}

.footersection .contactForm .form-label {
    font-weight: 600;
}

.readmore img {
    width: -webkit-fill-available;
}

.readmore h3 {
color: var(--primary);
}

.readmore h3,
h4,
h5 {
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 12px;
}

.readmore p {
    padding-top: 12px;
    font-weight: 100;
    letter-spacing: 0.1px;
    font-size: 14px;
    line-height: 20px;
}

.readmore {
    padding: 0px 24px 0px 24px;
    background-color: #fff;
    margin-top: 32px;
    margin-bottom: 32px;
    /* padding-bottom: 24px; */
    border: 1px solid #b8b8c1;
    /* padding: 0px 24px; */
    border-radius: 8px;
}


.readmore .content {
    position: relative;
}


/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 40%; /* Center the snackbar */
    bottom: 100px; /* 30px from the bottom */
  }
  
  /* Show the snackbar when clicking on a button (class added with JavaScript) */
  #snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }
  
  /* Animations to fade the snackbar in and out */
  @-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }