*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    font-family: "Poppins", sans-serif;



    --primary-color: #0182C1;   

    --white-text:#fff;

    --black-text:#1F2933;



    --ca-blue: #0182C1;     /* Deep professional blue */

    --ca-green: #01A870;    /* Emerald green */

    --ca-gold: #C4A000;     /* Accent gold */



    /* Supporting colors */

    --ca-light-blue: #E6EEF8;

    --ca-dark-gray: #333333;

}

ul{

    padding-left:0rem;

    list-style: none;

}

a{

    text-decoration:none;

}

img{

    width:100%;

}





.header-main {

    background-color: #fff;

    padding: 0px 0;

}



.header-main .navbar-toggler:focus{

    box-shadow:unset!important;

}



.header-main .navbar {

    padding: 0;

}



.main-menu {

    gap: 15px;

}

.main-menu li a {

    text-transform: capitalize;

    font-size: 16px;

    font-weight: 500;

    color: #000;

}



.main-menu li a.active {

    color: var(--primary-color) !important;

}

.main-menu li a:hover {

    color: var(--primary-color) !important;

}



/* ...................sakkal btn css................  */



.sakkal-btn {

    /*padding: 10px 22px;*/

    /* background-color: var(--primary-color); */

    border-radius: 8px;

    transition: all 0.5s;

    /* border: 1px solid var(--primary-color); */

    cursor: pointer;

    position: relative;

    overflow: hidden;

    display:inline-block;

}



.sakkal-btn a {

    padding: 10px 22px;

    text-transform: capitalize;

    font-size: 16px;

    font-weight: 600;

    /* color: var(--white-text); */

    background-color: var(--green);

  color: #ffffff;

    display: inline-block;

    z-index: 2;

    position: relative;

}



.sakkal-btn:hover a{

    /* color: var(--primary-color); */

    background-color: var(--blue);

}



.bg-we-do .sakkal-btn a {

    color: var(--white-text);

    background-color: var(--blue);

}

.bg-we-do  .sakkal-btn:hover a{

    color: var(--green);

    background-color: var(--white);

}



.sakkal-btn::before, .sakkal-btn::after {

    content: '';

    display: block;

    width: 50px;

    height: 50px;

    transform: translate(-50%, -50%);

    position: absolute;

    border-radius: 50%;

    z-index:1;

    background-color: var(--white-text);

    transition: 0.7s ease;

}

   

   .sakkal-btn::before {

    top: -2em;

    left: -1em;

   }

   

   .sakkal-btn::after {

    left: calc(100% + 1em);

    top: calc(100% + 2em);

   }

   

   .sakkal-btn:hover::before, .sakkal-btn:hover::after {

    height: 410px;

    width: 410px;

   }

   

   .main-menu {

    gap:4px;

    }

   

   



/*scroll to top */





.scrollTop a {

    color: #fff;

    font-size: 20px;

    display:block;

}



.scrollTop {

    position: fixed;

    right: 4%;

    border-radius: 50%;

    z-index: 9;

    bottom: 5%;

    height: 50px;

    width: 50px;

    text-align: center;

    line-height: 50px;

    opacity: 0;

    transition: all 0.4s ease-in-out 0s;

    background-color: var(--primary-color);

    border: 1px solid #fff;

    animation: pulse-animation 1.5s infinite;

}







/*.......................... top banner css ........................ */



.banner-main {

    position: relative;

    z-index: 2;

    margin-top: 40px;

}



.banner-main::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

    /* background-image: url(../image/banner-bg.png); */

    background-repeat: no-repeat;

    background-size: 100% 100%;

    z-index: -1;

}



.banner-inner-main {

    position: relative;

    z-index: 2;

    height: 100%;

}





.banner-content {

    position: absolute;

    top: 50%;

    left: 0;

    transform: translateY(-50%);

    width: 80%;

    padding-bottom: 15px;

}



.banner-contentpos {

    top: 64%;

}



.banner-content h2 {

    font-size: 48px;

    font-weight: bold;

    color: var(--black-text);

    margin-bottom: 0;

}

.banner-content h2 span {

    /* color: var(--primary-color); */

    color: var(--green);

    text-transform:capitalize;

}



.highlight {

    position: absolute;

    top: -100%;

}



.banner-content p {

    font-size: 16px;

    color: var(--black-text);

    margin-top: 16px;

}



.banner-btn {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 32px;

}



.watch-btn a{

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--black-text);

}



.watch-btn .play-icon {

    color: var(--white-text);

    font-size: 10px;

    display: inline-block;

    background-color: var(--primary-color);

    height: 30px;

    width: 30px;

    text-align: center;

    line-height: 30px;

    border-radius: 50%;

    animation: pulse-animation 1.5s infinite;

}



.watch-btn span {

    font-size: 14px;

    font-weight: 500;

}



@keyframes pulse-animation {

    0% {

      box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);

    }

    100% {

      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);

    }

}

.banner-img {

    padding-bottom: 50px;

}



.banner-img img {

    animation: img-move 3s infinite alternate;

}

@keyframes img-move {

    from {

        transform: translateY(-10px);

    }

     to {

        transform: translateY(10px)

     }

}



.stricky-fixed{

    top:0%;

    position:sticky;

    background-color:white;

    z-index:99;

    box-shadow: 0px 0px 12px #80808069;

    transform:translateY(0%);

    transition:all 0.5s ease;

}





/* .........................service package css.....................  */

.package-main {

    padding: 140px 0;

}



.package-main .title h3{

    color: var(--black-text);

}



.package-main .sub-title  {

    color: #7E7E7E;

}

.package-table {

    margin-top: 60px;

}

.package-table .true-icon i {

    display: inline-block;

    height: 30px;

    width: 30px;

    line-height: 30px;

    border-radius: 50%;

    text-align: center;

    background-color: #10C900;

    font-size: 16px;

    color: var(--white-text);

}



.package-table .false-icon i {

    display: inline-block;

    height: 30px;

    width: 30px;

    line-height: 30px;

    border-radius: 50%;

    text-align: center;

    background-color: #F44336;

    font-size: 16px;

    color: var(--white-text);

}



.package-table th:first-child {

    background-color: transparent;

}

.package-table th {

    padding: 0;

}

.package-table td {

    padding: 0;

}

.package-title {

    background: #FFF6F2;

    margin-right: 10px;

    padding: 30px 5px;

    text-align: center;

    border: 1px solid #FF5404;

    border-top-left-radius: 20px;

    border-top-right-radius: 20px;

    border-bottom: 1px solid transparent;

    font-size: 24px;

    font-weight: 500;

}



.package-desc{

    text-align: center;

    padding: 25px 5px !important;

    border-left: 1px solid #FF5404;

    border-right: 1px solid #FF5404;

    margin-right: 10px;

}





.package-table .table-striped>tbody>tr:nth-of-type(odd)>* {

    background-color: var(--white-text);

    --bs-table-bg-type:unset;

}



.package-table .table-striped>tbody>tr:nth-of-type(even)>* {

    background-color: #FFF6F2;

}

.package-table .table-striped>tbody>tr:last-child td {

    background-color: transparent;

}

.package-table .table-hover>tbody>tr:hover>* {

    --bs-table-bg-state: rgb(249 249 249);

    cursor: pointer;

}



.package-inner {

    color: rgb(33 43 54 / 70%);

    font-size: 20px;

    font-weight: 500;

}



.package-desc .sakkal-btn  {

    padding:0;

    border-radius: 50px;

}



.package-desc .sakkal-btn a{

    padding: 10px 34px;

}



.package-desc .sakkal-btn:hover {

    border:1px solid var(--primary-color);

}



.package-table tr:last-child td .package-desc{

    border-bottom: 1px solid #FF5404;

    border-bottom-left-radius: 20px;

    border-bottom-right-radius: 20px;

    background-color: #FFF6F2;

}



.package-table tr td:last-child .package-desc {

    margin-right: 0;

}

.package-table tr th:last-child .package-title {

    margin-right: 0;

}



.package-table tr td:first-child {

    vertical-align: middle;

    padding-left: 40px;

    padding-right: 40px;

}





/* ......................footer section css.......................  */



.footer-main {

    background-color: #15141B;

    position: relative;

     z-index: 2;

     overflow:hidden;

}



.footer-main::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    background-image: url(../image/footer-bg.png);

    height: 100%;

    width: 100%;

    background-repeat: no-repeat;

    z-index: -1;

    opacity: 0.4;

    animation: img-move 3s infinite alternate;

}





.footer-content {

    padding: 100px 0;

    text-align: center;

    margin: auto;

}



.footer-content h2 {

    color: var(--primary-color);

    font-size: 52px;

    font-weight: 700;

    padding: 0 8px;

    padding-bottom: 15px;

    border-bottom: 1px solid var(--white-text);

    margin-bottom: 16px;

    display: inline-block;

}

.footer-content p {

    color: var(--white-text);

    font-size: 18px;

    width: 70%;

    margin: auto;

    text-align: center;

    font-weight: 400;

    margin-bottom: 0;

}



.footer-social {

    display: flex;

    gap: 16px;

    align-items: center;

    justify-content: center;

    margin: 32px 0;

}



.footer-social li a {

    color: var(--white-text);

    font-size: 20px;

    transition: all 0.5s;

    display: inline-block;

}



.footer-social li a:hover {

    color: var(--primary-color);

    transform: translateY(-5px);

}



.copyright-section {

    padding: 15px 75px 22px;

    border-top: 1px solid var(--white-text);

    display: flex;

    justify-content: space-between;

}



.copyright-title span {

    font-size: 18px;

    color: rgb(255 255 255 / 80%);

    margin-bottom: 0;

    font-weight: 400;

    border-right: 1px solid rgb(255 255 255 / 80%);

    padding: 0 5px;

    display: inline-block;

}



.copyright-title span:last-child {

    border-right: 1px solid transparent;

}



.quick-links {

    display: flex;

    gap: 15px;

    margin-bottom:0;

}



.quick-links li {

    border-right: 1px solid rgb(255 255 255 / 80%);

    padding-right: 10px;

}



.quick-links li:last-child {

    border-right: 1px solid transparent;

}



.quick-links li a {

    color: rgb(255 255 255 / 80%);

    font-size: 18px;

    padding: 0 10px;

}



.quick-links li a:hover {

    color:var(--primary-color);

}







/* our service */



.our-service{

    background-color: var(--primary-color);

    padding: 100px 0px 100px;

    margin-top:-5px;

}



.title h3{

    font-size: 42px;

    font-weight: 600;

    text-transform: capitalize;

    color: var(--white-text);

    text-align: center;

    margin-bottom: 20px; 

}



.sub-title{

    font-size: 16px;

    color: var(--white-text);

    text-align: center;

    margin-bottom: 10px;

    /*padding: 0px 100px;  */

}



.our-service .sub-title {

    width:60%;

    margin:auto;

}



.services-box:hover .service-icon{

    transform:rotateY(360deg);

}



 .services-box{

    padding: 30px;

    border: 1px solid rgb(255 255 255 / 50%);

    margin-top: 40px;

    border-radius: 10px;

    transition:all 0.5s ease;

    cursor:pointer;

    box-shadow:unset;

    background-color: #fff;

}

.services-box:hover{

    transform:translateY(-5px) !important;

    box-shadow:1px 20px 30px rgba(0, 0, 0, .07);

}





 .service-icon{

    height: 75px;

    width: 75px;

    border-radius: 50%;

    padding: 20px;

    background-color: var(--primary-color);

    margin-bottom: 20px;

    transform:rotateY(0deg);

    transition:all 0.5s ease;

    animation: pulse-animation 2s infinite;

}



@keyframes icon-move {

    from {

        transform:rotateY(0deg);

    }

     to {

        transform:rotateY(360deg);

     }

}



.service-icon img{

    width: 100%;

    margin: auto;

    height: 100%;

    filter: brightness(10);

}



.services-title h4{

    font-size: 24px;

   color: var(--primary-color);

    margin-bottom: 15px;

}



.services-content p{

    font-size: 16px;

   color: var(--black-text);

    margin-bottom: 20px;  

}



.service-btn {

    margin:auto;

    text-align:center;

    margin-top:50px;

}



.service-btn a{

    display: inline-block;

    padding: 12px 30px;

      border: 1px solid var(--white-text);

    border-radius: 4px;

    text-align: center;

    transition: all 0.5s ease;

    font-size: 16px;

    font-weight: 500;

    cursor: pointer;

    text-transform: capitalize;

    color: var(--white-text);

    

}



.service-btn a:hover {

    background-color:var(--white-text);

    color:var(--primary-color);

}



.service-btn a i{

    transform: rotate(45deg);

    vertical-align: middle;

    font-size: 17px;

}



.services-box:hover .service-btn a{

    background: var(--primary-color);

    color: var(--white-text);

}





/* about us */



.about-us{

    margin: 80px 0px;

}



.about-us .about-image{

    height: 560px;

    /*border-radius: 50px 0 50px 0;*/

    cursor: pointer;

    /* overflow: hidden; */

    transition: all 0.5s;

    /* width: 95%; */

    /* margin-left: auto; */

    position: relative;

}



.about-image img{

    height: 100%;

    /*border-radius: 50px 0 50px 0;*/

    width: 100%;

    transition: all 0.5s;

    object-fit: contain;

}



.about-details{

    padding-left: 30px;

    padding-top: 5px;

}



.about-details .title h3{

    color: var(--black-text);

    text-align: left;

}



.about-info ul{

    list-style: none;

}



.about-info li img{

  width: 100%;

    

}



.about-info-details{

    display: flex;

    align-items: flex-start;

    margin-bottom: 5px;

}



.about-info-icon{

    width: 40px;

    height: 40px;

    padding: 10px;

    margin-right: 20px;

    border-radius: 50%;

    background-color: var(--white-text);

    border: 1px solid var(--primary-color);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.5s;

}



.about-info-details P{

    font-size: 16px;

    color: #7E7E7E;

    width: 90%;

}



.about-btn a{

    display: inline-block;

    padding: 15px 30px;

    border: 1px solid var(--primary-color);

    border-radius: 4px;

    text-align: center;

    transition: all 0.5s;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    text-transform: capitalize;

    color: var(--white-text);

    background: var(--primary-color);

    

}



.about-btn a:hover{

    background: var(--white-text);

    color: var(--primary-color);

}



.about-info-icon img {

    transition: all 0.5s;

}



.about-info li:hover .about-info-icon {

    background-color: var(--primary-color);

}

.about-info li:hover .about-info-icon img{

   filter: brightness(10);

}



.about-info li:hover {

    cursor: pointer;

}





.about-video-section img{

    transform:scale(1);

    transition:all 0.5s ease;

}

.about-video-section:hover img{

    transform:scale(1.05);

}







/* team member */



.team-member{

    background-color: var(--primary-color);

    padding: 140px 0px 160px;

}



.team-member-info .title h3{

    text-align: left;

}



.team-member-content{

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 24px 0px;

}



.team-member-content p{

    font-size: 16px;

    color: var(--white-text);

    width: 50%;

}



.team-member-btn a{

    background-color: var(--white-text);

    color: var(--primary-color);

    display: inline-block;

    padding: 15px 30px;

    border: 1px solid var(--primary-color);

    border-radius: 4px;

    text-align: center;

    transition: all 0.5s;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    text-transform: capitalize;

}



.team-member-btn a:hover{

    background-color: var(--primary-color);

    color: var(--white-text);

    border: 1px solid var(--white-text);

}



.team-box{

    position: relative;

    transition:all 0.5s ease;

    cursor:pointer;

}







.team-box .team-content{

    background-color: #FF5D28;

    color: var(--white-text);

    padding: 20px 0px;

    text-align: center;

    width: 85%;

    border-radius: 10px;

    bottom: -50px;

    box-shadow: 1px 20px 30px rgba(0, 0, 0, .07);

    display: block;

    margin: 0 auto;

    position: absolute;

    left: 50%;

    transform: translate(-50%);

    transition: .6s;

}



.team-box .team-image{

    overflow: hidden;

    border-radius: 10px;

    height:400px;

}



.team-box .team-image img{

    width: 100%;

    height: 100%;

    overflow: hidden;

    transition: all 0.5s ease;

    border-radius: 10px;

    object-fit:cover;

    object-position:top;

}



.team-content h3{

    font-size: 24px;

    text-transform: capitalize;

    font-weight: 600;

    margin-bottom: 2px;



}



.team-content span{

    font-size: 15px;

    text-transform: capitalize;

}



.team-box .social-icons{

    list-style: none;

    position: absolute;

    top:50%;

    transform:translateY(-50%);

    opacity: 0;

    z-index: 1;

    right:10px;

    transition: .3s ease-in-out;

}



.team-box .social-icons li a{

    align-items: center;

    background-color: var(--primary-color);

    box-shadow: 0 10px 30px rgba(0, 0, 0, .07);

    /* border: 1px solid var(--white-text); */

    color: var(--white-text);

    display: flex;

    font-size: 16px;

    height: 40px;

    justify-content: center;

    position: relative;

    text-align: center;

    transition: .6s;

    width: 40px;

    margin-bottom: 10px;

    transition:all 0.5s ease;

}



.team-box:hover .social-icons{

    right: 10px;

    opacity: 1;

}

.team-box .social-icons li a:hover{

    background-color:var(--white-text);

    color: var(--primary-color);

}





.team-box:hover .team-image img{

    transform: scale(1.05);

}





/* recent update */



.recent-update{

    /*margin: 80px 0px;*/

    padding: 140px 0;

}



.recent-update .title h3{

    color: var(--black-text);

    text-align: left;

}



.recent-update .team-member-content p {

    font-size: 16px;

    color: #7E7E7E;

    width: 50%;

}



.update-box {

  cursor:pointer;

  background: #fff;

  box-shadow: 0 0 5px #a3a3a32e;

  border-radius: 10px 10px 10px 10px;

  width:100%;

}

.recent-update-info .row .col-lg-4{

    display:flex;

}





.recent-update .recent-update-info .update-box .recent-update-image img{

    border-radius: 10px 10px 0px 0px;

    transition: all 0.5s ease;

    object-fit: cover;

    height: 100%;

    display: block;

}



.recent-update-details{

   padding: 25px 15px;

    border-radius: 0px 0px 10px 10px;

}



.recent-update-image{

    overflow: hidden;

    border-radius: 10px 10px 0px 0px;

    height: 280px;

}



.recent-update-details span{

    font-size: 14px;

    color: #7a7a7a;

    /* text-align: center; */

    display: block;

}



.recent-update-details h3{

    color: #212B36;

    font-size: 18px;

    font-weight: 600;

    margin: 10px 0px;

    /* text-align: center; */

    

}



.update-box:hover .recent-update-image img{

    transform: scale(1.05);

}



.update-box:hover h3{

    color: var(--primary-color);

}



.team-member-content .sakkal-btn {

    /*padding:16px 40px;*/

    /*margin-left:10px;*/

}



/* testimonials */



.testimonials .testimonial-box{

    background-color:white;

    padding: 30px;

    border-radius: 10px;

    border: 1px solid #FBD6C9;

    margin-right: 30px;

    margin-bottom: 40px;

}



.testimonial-content{

    border-bottom: 1px solid var(--white-text);

    padding-bottom: 30px;

}

.testimonial-content span{

    color:black;

}



.testimonial-image-info .client-image{

    margin-right: 20px;

    width: 80px;

    border-radius: 50%

}



.testimonial-image-info .client-image img{

    width: 100%;

    border-radius: 50%

}





.client-info span{

    color:black;

    font-size: 18px;

    font-weight: 500;

    text-transform: capitalize;

}



.client-info .rate{

    color:var(--primary-color);

    font-size: 15px;

    margin-top: 8px;

}



.testimonial-image-info{

    display: flex;

    justify-content: start;

    align-items: center;

    margin-top: 25px;

}



.testimonial-slider{

    margin-top: 60px;

}



.testimonial-slider .slick-dots li button:before {

    color: #fff;

    font-size: 12px;

}







.testimonial-slider .slick-dots .slick-active button {

    height: 8px;

    width: 50px;

    background-color: var(--white-text);

    transform: scaleX(1.5);

    border-radius: 4px;

}

.testimonial-slider .slick-dots li.slick-active button:before {

    opacity: 0;

    height: 0;

}

.testimonial-slider .slick-current.slick-active .testimonial-box {

   border: none ;

}

.testimonial-slider .slick-dots li{

    margin: 0;

}

.testimonial-slider .slick-dots li.slick-active{

    margin:0 20px;

    width: 50px;

}

.bg-portfolio .title h3{

    text-align:left;

}

.bg-portfolio .container{

    position: relative;

    z-index:1;

}

.bg-portfolio .sub-title{

    text-align:left;

}

.sub-title{

    font-size: 16px;

    color: var(--white-text);

    text-align: center;

    margin-bottom: 10px;  

}

.heading-flex{

    display: flex;

    justify-content: space-between;

    align-items:end;

}

.heading{

    width:80%;

}

.view-btn{

    width:20%;

}





.bg-portfolio{

    position: relative;

    padding-top: 140px;

    padding-bottom:250px;

    background-color:#01A870; /*FFE0D6;*/

    overflow:hidden;

}

.bg-portfolio:after{

    content: "";

    position: absolute;

    left:0;

    top:0;

    width: 100%;

    height: 100%;

    background-image:url(../image/Vector.png);

    background-repeat: no-repeat;

    background-size:100% 100%;

    z-index:0;

}

.view-btn a{

    display: block;

    width:150px;

    height:56px;

    padding: 16px 40px 16px 40px;

    font-size:16px;

    font-weight:600;

    color:var(--primary-color);

    background-color: var(--white-text);

    border-radius: 4px;

    text-transform:capitalize;

    margin-left:auto;

    transition:all 0.5s;

    border:1px solid transparent;

}



.view-btn a:hover {

    background-color: var(--primary-color);

    color: var(--white-text);

    border: 1px solid var(--white-text);

}



.portfolio{

    /*row-gap:30px;*/

    margin-top: 60px;

}

.portfolio-box{

    position: relative;

    overflow:hidden;

}



.portfolio-box:after{

    content: "";

    position: absolute;

    height: 100%;

    width: 100%;

    left: 170%;

    top: 0;

    transform: skewX(45deg);

    transition: all 0.55s ease-in-out;

    background: linear-gradient(to right, #02218f, #0e72e3, #02218f);

    opacity: 0.6;

    z-index: 1;

    background-size: 220% 150%;

}

.portfolio-box:hover:after{

    left: -100%;

    top: 0;

}

.content{

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 20px;

    padding: 10px 15px;

    transition: all 0.35s ease-in-out;

    z-index: 4;

}

.inner-content h3{

    margin-bottom: 5px;

    font-size: 20px;

    transform: translateY(-20px);

    transition: all 0.45s ease-in-out;

    opacity: 0;

    transition-delay: 150ms;

    position: relative;

    display: inline-block;

}

.portfolio-box:hover .content .inner-content h3{

    transform: translateY(0px);

    opacity:1;

}

.inner-content p{

    display: block;

    margin-bottom: -2px;

    text-transform: uppercase;

    color: var(--black-text);

    font-weight: 500;

    font-size: 14px;

    transition: all 0.45s ease-in-out;

    transform: translateX(30px);

    opacity: 0;

    transition-delay: 100ms;

    margin:3px 0px;

}

.portfolio-box:hover .content .inner-content p{

    transform: translateX(0px);

    opacity:1;

}

.content:after{

    position: absolute;

    left: 0;

    bottom: 0;

    content: "";

    height: 0;

    width: 100%;

    background: var(--white-text);

    z-index: -1;

    border-radius: 5px;

    transition: all 0.35s ease-in-out;

}



.portfolio-box:hover .content:after{

    height:100%;

}



.wedo-flex{

    display: flex;

    margin-bottom:16px;

    gap:24px;

}

.wedo-flex h2{

    font-size: 42px;

    font-weight: 700;

    line-height: 60px;

    text-align: left;

    margin-bottom:0px;

}


.wedo-information p{

    font-family: Poppins;

    font-size: 20px;

    font-weight: 400;

    line-height: 30px;

    text-align: left;

    margin-bottom:32px;

    color:#7E7E7E;

}

.our-promise .wedo-flex h2, .our-promise .wedo-information{
    color:var(--white-text);
}

.contact-btn{

    display:inline-block;

}



.contact-btn a{

  background-color:var(--primary-color);

  color:var(--white-text);

  Padding:10px 22px;

  border-radius:4px;

  text-transform:capitalize;

  font-weight:500;

  display: block;

}



.bg-we-do .row{

    justify-content:space-evenly;   

    align-items:center;

}

.bg-we-do {

    background: #01A870; /*FFE0D6;*/

    padding: 80px 0 130px 0px;

}

.faq-title h3{

    font-size: 40px;

    font-weight: 600;

    line-height: 60px;

    text-align: center;

    text-transform:capitalize;

}

.bg-faq-section{

    /*padding:140px 0px;*/

    padding:0 0 140px;

}

.bg-faq-section .card-header span{

    display:block;

    margin-right:30px;

}

.faq-section .card-header{

    padding:0px;

    background-color:#F9F9F9;

    border:none;

   

}



.faq-section .card{

    background-color: #F9F9F9;

    border: none;

    margin-bottom: 24px;

}



.faq-section .card-header a{

    display: block;

    text-align:start;

    border:none;

    font-size: 18px;

    font-weight: 500;

    line-height: 26px;

    padding:25px 25px 25px 25px;

    position: relative;

}

.faq-section .card-header a:after{

    content:"";

    position: absolute;

    right: 1.3rem;

    top:50%;

    height: 2px;

    width: 1rem;

    background-color:#052F5F;

}

.faq-section .card-header a.collapsed:before{

    content:"";

    position: absolute;

    top:40%;

    right:1.75rem;

    height: 1.0625rem;

    width: 0.125rem;

    border-style: none;

    background-color:#052F5F;

}



.faq-section .card-body {

    padding: 0px 25px 25px 25px;

}

.faq-section .card-body p{

    font-size: 16px;

    font-weight: 300;

    line-height: 23px;

    text-align: left;

    color:#212B36;

    margin-bottom:0px;

}

.bg-faq-section .row{

    justify-content:center;

}

.faq-title{

    margin-bottom: 50px;

}

.bg-contactus{

    background-color: #F9F9F9;

    padding:140px 0px;

    overflow:hidden;

}

.co-profile{

    display: flex;

    align-items:center;

    gap:36px;

}



.co-image{

    width:32%;

}

.co-address h2{

    font-size: 30px;

    font-weight: 600;

    line-height: 45px;

    text-align: left;

    margin-bottom:0px;

}

.co-address p{

    font-size: 14px;

    font-weight: 400;

    line-height: 24px;

    text-align: left;

    color:#646464;

    margin-bottom:12px;

}

.co-address ul li{

    display: flex;

    gap:10px;

    margin-bottom:12px;

}

.co-address ul li img{

    width:9%;

}

.co-address ul li a{

    font-size: 14px;

    font-weight:500;

    line-height: 20px;

    text-align: left;

    color:#00090F;

}



.profile-bottom{

    border-top:2px solid #F15A29;

    padding-top:30px;

    margin-top:30px;

}

.profile-bottom p{

    font-size: 16px;

    font-weight: 400;

    line-height: 24px;

    text-align: left;

    color:#646464;

}

.contact-form{

    background-color:var(--white-text);

    border-radius:10px;

}



.contact-form form h4{

    font-size: 24px;

    font-weight: 600;

    text-transform: capitalize;

    border-bottom: 1px solid #FFE8E0;

    margin-bottom:6px;

    padding-bottom: 5px;

    color:#1D1D27;

}



.co-input{

    margin:16px 0px;

}

.co-input label{

    font-size: 16px;

    font-weight: 400;

    line-height: 24px;

    text-align: left;

    display:block;

    margin-bottom:10px;

    text-transform:capitalize;

    color:#1D1D27;

}

.co-input input{

    width:100%;

    height:46px;

    border:1px solid #FFE8E0;

    border-radius:5px;

    padding:20px;

}



.co-input textarea{

    width: 100%;

    height: 150px;

    border-radius: 5px;

    padding: 20px;

    border:1px solid #FFE8E0;

}

.co-input input:focus{

    outline:none;

}

.co-input textarea:focus{

    outline:none;

}



.form-btn{

    font-size: 20px;

    font-weight: 500;

    line-height: 30px;

    text-align: center;

    width:100%;

    height:50PX;

    color:var(--white-text);

    background-color:var(--primary-color);

    border:none;

    border-radius:3px;

    transition:all 0.5s;

    border:1px solid transparent;

    cursor: pointer;

    position: relative;

    z-index: 2;

    overflow: hidden;

    display:inline-block;

    text-transform:capitalize;

}

.contact-form{

    padding:0px 30px 30px 30px;

}

.bg-contactus .row{

    justify-content:space-between;

}



.contact-form .form-btn:hover{

    color: var(--primary-color);

}



.contact-form .form-btn::before, .contact-form .form-btn::after {

    content: '';

    display: block;

    width: 50px;

    height: 50px;

    transform: translate(-50%, -50%);

    position: absolute;

    border-radius: 50%;

    z-index:-1;

    background-color: var(--white-text);

    transition: 0.7s ease;

}

   

  .contact-form .form-btn::before {

    top: -2em;

    left: -1em;

   }

   

  .contact-form .form-btn::after {

    left: calc(100% + 1em);

    top: calc(100% + 2em);

   }

   

 .contact-form  .form-btn:hover::before, .form-btn:hover::after {

    height: 620px;

    width: 620px;

   }

   



.banner-video .modal-dialog {

    max-width: 600px;

    width: 100%;

}



.banner-video .modal-dialog .modal-content {

    height: 500px;

    background-color: transparent;

    border: none;

}



.banner-video .modal-header {

    padding-bottom: 0;

    border-bottom: none;

}



.banner-video .modal-content .modal-body iframe {

    border-radius: 4px;

}



.close-popup {

    color: #fff !important;

    background-image: none;

    opacity: 1;

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: var(--primary-color);

    border-radius: 100%;

    box-shadow: none;

    border: 1px solid transparent;

    position: absolute;

    right: -20px;

    top: -15px;

}



.close-popup i {

    font-size: 20px;

}



.close-popup:focus {

    box-shadow: none;

}



.close-popup:hover {

    opacity: 1;

}



/*.........................team-listing page css......................*/



.inside-team-member .team-box{

    margin-bottom:100px;

}

.inside-team-member{

    background-color:var(--white-text);

}





.inside-team-member .team-member-info .title h3 {

    text-align: center;

    margin-bottom: 40px !important;

    color:var(--black-text);

}



/* about page css */



.bg-banner{

    position: relative;

    background-image:url('../image/about-banner.png');

    background-size:cover;

    padding:70px 0px;

}

.about-title h2{

    font-size:44px;

    font-weight:600;

    text-transform:capitalize;

    color:#212B36;

    text-align:center;

    margin-bottom:0px;

} 



.bg-crafting{

    padding:140px 0px 100px 0px;

    overflow:hidden;

}

.bg-crafting .row{

    align-items:center;

}

.crafting-info{

    padding-left:60px;

}

.crafting-info h2{

    color:#262036;

    font-size:42px;

    font-weight:600;

    text-transform:capitalize;

    margin-bottom:20px;

}

.crafting-info p{

    font-size:16px;

    font-weight:400;

    line-height:1.5;

    color:#3C2E61;

    margin-bottom:32px;

}

.bg-dynamic{

    padding-bottom:140px;

    overflow:hidden;

}

.bg-dynamic .row{

    align-items:center;

}

.bg-dynamic .crafting-info {

    padding-right: 60px;

    padding-left: 0px;

}

.bg-marketing{

    background-color:#F9F9F9;

    overflow:hidden;

}

.bg-marketing .row{

    align-items:center;

    padding-right:0px!important;

    padding-left:0px!important;

}

.bg-business{

    padding:120px 0px;

    overflow:hidden;

}

.bg-business .crafting-info{

    padding-left:0px;

    padding-right:60px;

}

.bg-business .row{

    align-items:center;

}

.marketing-info{

    padding:0px 135px 0px 85px;

}







.bg-benefit{

    padding:140px 0px;

    background-color:#F9F9F9;

    overflow:hidden;

}



.benefit{

    margin-bottom:60px;

}

.benefit-box{

    background-color:white;

    border-radius:10px;

    padding:30px 20px;

    border-top:5px solid var(--primary-color);

    position: relative;

    z-index:3;

    cursor: pointer;

}

.benefit-box:after{

    content:"";

    position: absolute;

    top:0px;

    left:0%;

    width:100%;

    height:0%;

    background-color:var(--primary-color);

    transition:all 0.45s ease;

    border-radius:5px 5px 10px 10px;

    z-index:-1;

}

.benefit-box:hover:after{

    height:100%;

}

.benefit-box:hover{

    color:white;

}

.benefit-box:hover p{

    color:white;

}

.benefit-box:hover .benefit-image {

    background-color:white;

}



.benefit-info h4{

    text-transform:capitalize;

    font-size:24px;

    font-weight:600;

    margin-bottom:12px;

}

.benefit-info p{

    color:#7E7E7E;

    font-size:15px;

    font-weight:400;

}

.benefit-image{

    width:70px;

    height:70px;

    border-radius:50%;

    background-color:rgba(101, 97, 221, 10%);

    margin-bottom:48px;

    text-align:center;

    line-height:70px;

}



.benefit-image img{

    width:45%;

}

.bg-benefit .row .col-lg-4:nth-child(2) .benefit-box .benefit-image{

    background-color:rgba(102, 194, 127,10%);

    transition:all 0.5s ease;

}

.bg-benefit .row .col-lg-4:nth-child(3) .benefit-box .benefit-image{

    background-color:rgba(187, 67, 205, 10%);

    transition:all 0.5s ease;

}

.bg-benefit .row .col-lg-4:nth-child(2):hover .benefit-box .benefit-image{

    background-color:white;

}

.bg-benefit .row .col-lg-4:nth-child(3):hover .benefit-box .benefit-image{

    background-color:white;

}

.about-video-section{

    padding:0px 60px;

    position:relative;

    overflow:hidden;

}

.about-video-heading{

    margin:auto  auto 60px auto;

    width:60%;

}

.about-video-heading .title h3{

    color:#282835;

}

.about-video-heading .sub-title{

     color:rgba(40, 40, 53, 60%);

}

.bg-about-video{

    padding:100px 0px;

    position:relative;

    overflow:hidden;

}



.bg-about-video::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    background-image: url(../image/about-bg.png);

    height: 100%;

    width: 100%;

    background-repeat: no-repeat;

    z-index:-1;

    opacity: 0.7;

    background-size: cover;

}



.about-recent{

    background-color:#f9f9f9;

}

.about-contact{

 background-color:white;   

}

.about-contact .contact-form{

    background-color:#f9f9f9;

}

.benefit .title h3{

    color:#282835;

}

.benefit .sub-title{

    color:rgba(40, 40, 53, 60%);

}

.about-watch-btn{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    z-index:2;

}



.about-watch-btn a i{

    width: 70px !important;

    height: 70px !important;

    border-radius: 50% !important;

    background-color: White !important;

    font-size: 24px !important;

    line-height: 70px !important;

    color: var(--primary-color) !important;

     animation: pulse-animation1 1.5s infinite;

}

.inner-video-section{

    overflow:hidden;

    position: relative;

    border-radius: 10px;

}



.inner-video-section::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    background: #000;

    opacity: 0.4;

    z-index: 0;

}



@keyframes pulse-animation1 {

    0% {

      box-shadow: 0 0 0 0px rgb(241 90 41 / 50%);

    }

    100% {

      box-shadow: 0 0 0 20px rgb(241 90 41 / 10%);

    }

}







/* ...........................services page css........................  */



.service-offering .services-head .title h3 {

    color: var(--black-text);

}

.service-offering .services-head .sub-title  {

    color: #7E7E7E;

    width: 60%;

    margin: auto;

}



.services-head {

    margin-bottom: 60px;

}



.service-offering .about-crafting {

    border-radius: 10px;

}

.service-offering .about-crafting img{

    border-radius: 10px;

    width: 100%;

}



.service-list {

    display: flex;

    flex-wrap: wrap;

    gap: 16px 5px;

    margin-bottom: 40px;

    justify-content:space-between;

}



.service-item {

    display: flex;

    align-items: center;

    column-gap: 10px;

    width: 49%;

}



.service-inner-icon {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 30px;

    width: 30px;

    border-radius: 50%;

    padding: 8px;

    background-color: rgba(241, 91, 41, 0.10);

}



.service-name {

    font-size: 20px;

    font-weight: 500;

    text-transform: capitalize;

    width: 80%;

}



.service-offering .crafting-info p {

    color: var(--services-text);

    margin-bottom: 24px;

}





.service-inner .about-crafting {

    border-radius: 10px;

}

.service-inner .about-crafting img{

    border-radius: 10px;

    width: 100%;

}



.services-main {

    padding: 140px 0;

    position: relative;

    background-color: #F9F9F9;

}



.services-main .services-head h2 {

    font-size: 42px;

    color: #262036;

    font-weight: 600;

    text-align: center;

}

.services-main .services-head span {

    color: var(--primary-color);

}



.services-inner>.row>.col-lg-3 {

    display: flex;

}



.provide-box {

    background-color: white;

    border-radius: 10px;

    padding: 30px 20px;

     transition: all 0.5s;

    cursor: pointer;

    border-bottom: 3px solid var(--primary-color);

}



.provide-box:hover {

    transform: translateY(-10px) !important;

}

.service-offering {

    padding: 100px 0;

}



.service-offering {

    overflow:hidden;

}



.service-inner {

    overflow:hidden;

}



.provide-icon{

    height: 60px;

    width: 60px;

    border-radius: 50%;

    padding: 15px;

    background-color: rgba(241, 91, 41, 0.10);

    margin-bottom: 40px;

    transition:all 0.5s ease;

}



.provide-icon img{

    width: 100%;

    margin: auto;

    height: 100%;

}



.provide-content span {

    color: #212B36;

    font-size: 16px;

    font-weight: 600;

    text-transform: capitalize;

    display: inline-block;

    margin-bottom: 16px;

}



.provide-content p {

    color: #7E7E7E;

    font-size: 14px;

    text-transform: capitalize;

    margin-bottom: 0;

}



.inner-we-do {

    background-color: var(--white-text);

    padding:80px 0 !important;

}



.inner-package-main {

    background-color: #F9F9F9;

}

.inner-package-main .package-table th {

    background-color:transparent;

}

.service-inner .crafting-info {

    padding-right: 60px;

    padding-left: 0;

}





/*------ Price Page CSS ------*/



.main_price{

    padding:100px 0;

    overflow:hidden;

}

.main_price .price_head .title h3 {

    color: var(--black-text);

    text-align: left;

    margin-bottom: 24px;

    line-height: 60px;

}

.main_price .price_head .sub-title  {

    color: #7E7E7E;

    width: 75%;

    text-align: left;

}



.pride_space {

    margin-bottom: 60px;

}



.pride_button a.active{

    background-color: var(--primary-color);

    transition: all 0.5s;

    border: 1px solid var(--primary-color);

    cursor: pointer;

    position: relative;

    overflow: hidden;

    display: inline-block;

    padding: 0;

    color: #fff;

}

.pride_button a.active{

    padding: 10px 22px;

    text-transform: capitalize;

    font-size: 16px;

    font-weight: 600;

    color: var(--white-text);

    display: inline-block;

    z-index: 2;

    position: relative;

}







/*.pride_button a.active::before, .pride_button a.active::after {*/

/*    content: '';*/

/*    display: block;*/

/*    width: 50px;*/

/*    height: 50px;*/

/*    transform: translate(-50%, -50%);*/

/*    position: absolute;*/

/*    border-radius: 50%;*/

/*    z-index: -1;*/

/*    background-color: var(--white-text);*/

/*    transition: 0.7s ease;*/

/*}*/

/*.pride_button a.active::before {*/

/*    top: -2em;*/

/*    left: -1em;*/

/*}*/

/*.pride_button a.active::after {*/

/*    left: calc(100% + 1em);*/

/*    top: calc(100% + 2em);*/

/*}*/



/*.pride_button a.active:hover::before, .pride_button a.active:hover::after {*/

/*    height: 215px;*/

/*    width: 215px;*/

/*}*/

/*.pride_button a.active:hover{*/

/*    color: var(--primary-color);*/

/*}*/



.pride_button a{

    background-color: #fff;

    transition: all 0.5s;

    border: 1px solid var(--primary-color);

    cursor: pointer;

    position: relative;

    overflow: hidden;

    display: inline-block;

    padding: 10px 22px;

    color: var(--primary-color);

    font-weight: 600;

}

/*.pride_button a:hover{*/

/*    background-color: var(--primary-color);*/

/*    color: #fff;*/

/*}*/



.price_box_head h3{

    font-weight: 500;

    font-size: 24px;

    line-height: 36px;

    color: #000;

    margin-bottom: 10px;

}

.price_box{

    border-radius: 10px;

    background-color: #FFF8F5;

    padding: 30px 0 44px 0;

}

.price_plan h4{

    display: inline-block;

    margin: 0;

    font-weight: 700;

    font-size: 44px;

    line-height: 66px;

    color: var(--primary-color);

}

.price_plan span{

    font-weight: 500;

    font-size: 24px;

    line-height: 36px;

    color: #000;

}

.price_box_head{

    padding: 0 20px 30px;

    border-bottom: 1px solid #FFDED8;

    margin-bottom: 24px;

}

.pricing_list{

    margin: 0;

    padding: 0 20px;

}

.pricing_list li{

    display: flex;

    align-items: center;

    font-size: 16px;

    line-height: 24px;

    font-weight: 400;

    color: #000;

    gap: 6px;

    padding: 3px 0;

    margin-bottom: 16px;

}

.pricing_list li:last-child{

    margin-bottom: 0;

}

.pricing_list li img{

    width: 20px;

    height: 20px;

}

.pricing_button{

    display: block;

    margin: 44px 36px 0;

    text-align: center;

    padding: 0;

}

.pricing_button a{

    padding: 10px 22px;

    display: block;

}

.price_box.price_box_border{

    border: 1px solid hsl(15deg 88% 55% / 50%);

}







/*------ Portfolio Page CSS ------*/

.project_details h3 a {

    color: #000;

}



.project_box:hover .project_details a {

    color: #fff;

}

.main_project{

    padding-top:100px;

    padding-bottom:50px;

}



.project_post{

    background-color: #F9F9F9;

}



.project_head .title h3 {

    color: var(--black-text);

    margin-bottom: 20px;

    /*line-height: 60px;*/

}

.project_head .sub-title  {

    color: #7E7E7E;

    width: 35%;

    margin: auto;

}

.project_tabs li a{

    display: inline-block;

    text-transform: capitalize;

    background: transparent;

    cursor: pointer;

    padding: 10px 55px;

    box-shadow: 0 2px 10px 0 #d8dde6;

    font-size: 16px;

    font-weight: 700;

    border-radius: 5px;

    margin: 0px 4px;

    color:black;

    text-decoration: none;

    letter-spacing: 0.3px;

}

.project_tabs li a.active {

    color: var(--white-text);

    background: var(--primary-color);

}

.project_tabs_container{

    margin-top: 60px;

}

.project_tabs{

    justify-content: center;

    margin-bottom: 30px;

}

.project_details{

    position: absolute;

    bottom: 40px;

    width: 80%;

    left: 50%;

    transform: translateX(-50%);

    margin: auto;

    padding: 10px 20px;

    background: #fff;

    border-radius: 12px;

    margin-top: 0;

    z-index: 1;

    text-align: center;

    box-shadow: 0px 10px 12px rgba(15, 53, 103, 0.1);

    margin-right: 40px;

    transition: all 0.4s ease-in-out;

}

.project_icon{

    position: absolute;

    top: -24px;

    right: 30px;

    background: var(--primary-color);

    border-radius: 50px;

    width: 55px;

    height: 55px;

    line-height: 55px;

    text-align: center;

}

.project_icon i{

    color: #fff;

}

.project_details h3 {

    font-size: 20px;

    line-height: 36px;

    margin-bottom: 0px;

    font-weight: 600;

    letter-spacing: 0;

}

.project_details p{

    margin: 0;

}

.image_box{

    position: relative;

    overflow: hidden;

    border-radius: 10px;

}

.project_box .image_box .zm_btn{

    position: absolute;

    width: 60px;

    height: 60px;

    z-index: 3;

    top: -100px;

    right: 40px;

    background: var(--primary-color);

    color: #fff;

    font-size: 24px;

    line-height: 60px;

    border-radius: 60px;

    text-align: center;

    transition: all 0.4s ease-in-out;

}

.project_box:hover .zm_btn {

    top: 40px;

    transition: all 0.4s ease-in-out;

}

.project_box:hover .project_details{

    background-color: var(--primary-color);

    color: #fff;

    transition: all 0.4s ease-in-out;

}

.project_box:hover .project_icon{

    background: #000;

    transition: all 0.4s ease-in-out;

}

.project_box .oh {

    position: absolute;

    content: "";

    width: 25%;

    height: 100%;

    left: 0;

    background: #000;

    transition: 0.3s ease-in-out;

    -ms-transition: 0.3s ease-in-out;

    -moz-transition: 0.3s ease-in-out;

    -o-transition: 0.3s ease-in-out;

    bottom: -50%;

    transform: translateY(50%);

    opacity: 0;

}



.project_box .oh.ho_2 {

    transition: 0.5s ease-in-out;

    -ms-transition: 0.5s ease-in-out;

    -moz-transition: 0.5s ease-in-out;

    -o-transition: 0.5s ease-in-out;

    left: 25%;

    transform: translateY(40%);

}

.project_box .oh.ho_3 {

    transition: 0.7s ease-in-out;

    -ms-transition: 0.7s ease-in-out;

    -moz-transition: 0.7s ease-in-out;

    -o-transition: 0.7s ease-in-out;

    left: 50%;

    transform: translateY(20%);

}

.project_box .oh.ho_4 {

    transition: 0.9s ease-in-out;

    -ms-transition: 0.9s ease-in-out;

    -moz-transition: 0.9s ease-in-out;

    -o-transition: 0.9s ease-in-out;

    transform: translateY(30%);

    left: 75%;

}

.project_box:hover .oh {

    opacity: 0.3;

    bottom: 0;

    transform: translateY(0%);

}

.project_box .image_box img{

    position: relative;

    transition: all 0.4s ease-in-out;

}

.project_box:hover .image_box img{

    transform: scale(1.1);

    transition: all 0.4s ease-in-out;

}

.project_box{

    position: relative;

    overflow: hidden;

    padding-bottom: 30px;

    transition: all 0.4s ease-in-out;

}



.newsletter-section{

    padding-bottom: 100px;

    padding-top:50px;

}

.newsletter-item{

    display: flex;

    margin: 0px 70px;

    background: rgb(241 90 41 / 10%);

    align-items: center;

    border-radius: 10px 250px 250px 10px;

}

.newsletter-content h3{

    font-size: 36px;

    font-weight: 500;

    line-height: 50px;

}

.newsletter-content{

    padding: 74px 70px;

}

.newsletter-img img{

    margin-top: -50px;

    width: 400px;

}

.btn-white {

    background-color: var(--white-text);

    margin-right: 12px;

    border: 1px solid var(--white-text);

}

.btn-white a {

    color: var(--primary-color);

}

.btn-white:hover a {

    color: var(--white-text);

}

.btn-white::before, .btn-white::after {

    background-color: var(--primary-color);

}





/*.....contact page css.....*/

.contact-info .title h3{

    color: var(--black-text);

    font-size: 40px;

    font-weight: 500;

    text-align: left;

}

.contact-info .title{

    border-bottom: 0.5px solid var(--primary-color);

}

.contact-info-box.row.align-items-start {

    padding: 52px 0 60px;

}

.contact-info-box .icon-box img{

    width: 20px;

}

.contact-info-box .icon-box>p{

    font-size: 16px;

    font-weight: 500;

    line-height: 30px;

    text-align: left;

    color: #00090F;

    margin:0;

}

.contact-info-box .icon-box div{

    margin-bottom: 10px;

}

.contact-info-box .icon-box div p{

    margin:0 0 0 12px;

    font-size: 14px;

    line-height: 21px;

}

.contact-info-box .icon-box a {

    font-size: 16px;

    font-weight: 500;

    line-height: 30px;

    text-align: left;

    color: #00090F;

    margin-top: 10px;

}

.contact-map iframe{

    border-radius: 10px;

}



.contact-info {

    padding:100px 0;

}



.main_project {

    overflow: hidden;

}

.newsletter-section {

    overflow: hidden;

}



.service-inner>.container>.row {

   align-items:center

}



    .package-main{

        overflow: hidden;

    }

    .about-us{

        overflow: hidden;

    }

    .bg-we-do{

        overflow: hidden; 

    }

    .package-main{

        overflow: hidden;

    }

    .bg-faq-section{

        overflow: hidden;

    }

    .our-service{

        overflow: hidden;

    }

    .recent-update{

       overflow: hidden;

    }





 

    /* ...................blog page css .................. */



.inner-blog .inner-blog-head .title h3{

    text-align: center;

}



.inner-blog .inner-blog-head .team-member-content {

    justify-content: center;

}



.inner-blog  .update-box {

    margin-bottom: 30px;

}





.expert-pagination {

    margin-top:40px;

}



.expert-pagination .pagination {

   display: flex;

   align-items: center;

   justify-content: center;

}

.expert-pagination .page-item {

   margin: 0px 6px;

}



.expert-pagination .page-link {

   padding: 0!important;

   margin-left: -1px;

   width: 35px;

   height: 35px;

   line-height: 35px!important;

   text-align: center;

   font-size: 16px;

   font-weight: 600;

   color: black!important;

   background-color: #8080802b!important;

   border-radius: unset!important;

}

.expert-pagination .page-link.active {

    color: white!important;

    background: var(--primary-color) !important;

    border-color: unset !important;

}

.expert-pagination .page-link:hover {

   color: white!important;

   background: var(--primary-color) !important;

}

.expert-pagination .page-link:focus{

    outline: none;

    box-shadow: unset!important;

}

.inner-blog .filter_form {

    position: relative;

    margin-bottom: 30px;

    width: 100%;

}



.inner-blog .filter_form input {

    width: 100%;

    padding: 10px 20px;

    border-radius: 5px;

    border: 2px solid var(--primary-color);



}



.inner-blog .search-btn {

    position: absolute;

    top: 0;

    right: 0;

    content: "";

    padding: 16px;

    border: none;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: none;

    border-radius: 0 5px 5px 0;

    color: var(--primary-color);

}



.blog-search>.row {

    justify-content: end;

}



.inner-blog .team-member-content p {

    

    width: 60%;

    text-align: center;

}



    .wedo-image {

        position: relative;

        z-index: 2;

        /*height:300px;*/

        /*width:300px;*/

        margin:auto;

    }

    /*.wedo-image .do-img{*/

    /*     background: #ffd4c6; */

    /*    background: #ffe7de;*/

    /*    padding: 10px;*/

    /*    height: 100%;*/

    /*    border-radius: 100%;*/

    /*    width: 100%;*/

    /*    margin: auto;*/

    /*    display: flex;*/

    /*    justify-content: center;*/

    /*    align-items: center;*/

    /*    position: relative;*/

    /*    z-index: 2;*/

    /*}*/

    /*.wedo-image .do-img img {*/

    /*    width: 180px;*/

    /*}*/

    .wedo-image::after {

        content: "";

        position: absolute;

        border: 12px solid var(--primary-color);

        right: -30px;

        top: 0px;

        height: 100%;

        width: 100%;

        border-radius: 100%;

        z-index: -1;

        animation: img-move 1.8s infinite alternate-reverse;

        display:none;

    }

    

    .inner-we-do .wedo-image .do-img {

        /*background:#fff7f4;*/

    }

    .wedo-image img {

        display:block;

        margin:auto;

    }



 /* ------------terms & condition-------------- */

   .termscondition-main{

      padding: 100px 0;

    }

    

    .termscondition-content p{

      margin-bottom: 20px;

      color: #7a7a7a;

    }

    

    .termscondition-content h3{

      margin-bottom: 30px;

      color: #7a7a7a;

    }

    

    .termscondition-content ul li{

       list-style-type: disc;

       margin-left: 16px;

       color: #7a7a7a;

    }

    

    

    

    

/* ...................blog details page css .................. */



.blog-details .recent-update-details h3{

 font-size: 30px;

 color: black;

}

.blog-details .recent-update-details{

    padding: 25px 0 0 0;

}

.blog-details .recent-update-image{

    border-radius: 0;

}

.blog-details .update-box{

box-shadow: none;

}

.recent-update-innercontent h4 {

    font-size: 24px;

    margin-top: 24px;

}



.blog-details .row .col-lg-4 {

    display: block;

}



.latest-blog {

    padding: 24px;

    border-radius: 5px;

    box-shadow: 0px 5px 30px 0px rgba(76, 88, 104, 0.1);

}



.latest-blog h4{

    font-size: 24px;

    margin-bottom: 24px;

}



.recent-blog-list {

    display: flex;

    gap: 16px;

    margin-bottom: 24px;

    border-bottom: 1px solid lightgray;

    padding-bottom: 16px;

}

.recent-blog-list:last-child{

    border: none;

    margin-bottom:0;

}



.recent-blog-list h3 {

    color: #212B36;

    font-size: 18px;

    font-weight: 600;

}



.recent-blog-list .left-image {

    width: 30%;

}



.recent-blog-list  h3:hover{

 color: var(--primary-color);

}

.blog-details .recent-update-image{

    height: 500px !important;

    

}

.blog-details .recent-update-image img{

    border-radius:10px !important;

}



.blog-details .inner-blog-head {

    margin-bottom: 50px;

}

.blog-right-desc {

    width:60%;

}



/*index page responsive css */



@media only screen and (min-width:1401px) and (max-width:1599px){

    .package-main{

        overflow: hidden;

    }

    .about-us{

        overflow: hidden;

    }

    .bg-we-do{

        overflow: hidden; 

    }

    .package-main{

        overflow: hidden;

    }

    .bg-faq-section{

        overflow: hidden;

    }

    .our-service{

        overflow: hidden;

    }

    .recent-update{

       overflow: hidden;

    }

}





@media only screen and (max-width: 1400px) {



    /* banner-main */

    .banner-main {

        margin-top: 30px;

    }



    .banner-content {

        width: 100%;

        top: 40%;

    }



    /* package */

    .package-main {

        padding: 80px 0;

       

    }

    .recent-update {

        padding: 80px 0;

    }

   



    /* team member */

    .team-member {

        padding: 80px 0 120px;

    }



    .team-box .team-content {

        bottom: -40px;

    }





    /* faq */

    .bg-faq-section {

        padding: 40px 0 80px;

    }



    /* bg-contactus */

    .bg-contactus {

        padding: 80px 0;

        overflow: hidden;

    }



    .banner-contentpos {

        top: 64%;

    }



}



@media only screen and (max-width: 1200px) {



    /* banner-main */

    .banner-content h2 {

        font-size: 30px;

    }

        .team-box .team-content {

            width: 85%;

        }



    /* service */

    .our-service .sub-title {

        width: 80%;

    }



    .services-title h4 {

        font-size: 21px;

    }



    /* what we do */

    .bg-we-do {

        padding: 50px 0 100px 0px;

    }



    /* package */

    .package-inner {

        font-size: 18px;

    }



    .package-desc .sakkal-btn a {

        padding: 10px 30px;

    }



    /* team member */

    .team-box .team-content {

        width: 70%;

        padding: 16px 0;

    }



    /* faq */

    .faq-title h3 {

        font-size: 30px;

    }



    .faq-title {

        margin-bottom: 30px;

    }

    /* testimation */

    .our-service{

        padding: 50px 0 80px;

    }

    

    /* contact */

    .contact-form {

        padding: 20px;

    }

     .highlight {

        top: -38%;

    }

    .banner-contentpos {

        top: 56%;

    }

}



@media only screen and (max-width: 992px) {



    /* navbar */

    .header-main .navbar-expand-md .navbar-nav .nav-link {

        padding-left: 5px;

        padding-right: 5px;

    }



    .header-main .navbar-expand-md .navbar-nav {

        gap: 8px;

    }

    



    .sakkal-btn a {

        padding: 8px 16px;

        font-size: 14px;

    }



    .main-menu li a {

        font-size: 16px;

    }

    

    .project_details {

        width: 85%;

        margin: auto;

        padding: 8px 12px;

        border-radius: 10px;

    }



    /* banner-main */

    .banner-content {

        position: relative;

        /*top: 0;*/

        /*transform: initial;*/

        top: 42%;

    }



    .highlight {

        top: -76%;

    }

    .banner-contentpos {

        top: 52%;

    }



    .banner-content h2 {

        font-size: 36px;

    }



    .banner-img img {

        width: 80%;

    }



    .banner-img {

        display: flex;

        justify-content: center;

        margin-top: 20px;

    }



    .banner-main::after {

        height: 80%;

        bottom: -1px;

    }





    .services-box {

        padding: 20px;

    }

    .title h3{

        font-size: 30px;

    }



    .about-image {

        display: flex;

        justify-content: center;

    }



    .about-image {

      width: 70%;

      margin: auto;

    }



    .about-details {

        padding-left: 0;

        padding-top: 20px;

    }

    

    .portfolio{

        row-gap: 0px;

    }





    .bg-we-do .row {

        justify-content: space-evenly;

    }



    /* packages */

    .package-main {

        padding: 80px 0;

    }



    .package-title {

        padding: 16px 5px;

        font-size: 16px;

    }



    .package-desc {

        padding: 16px 5px !important;

        min-height: 70px;

        height: 100%;

    }



    .package-table tr td:first-child {

        padding-left: 18px;

        padding-right: 18px;

    }



    .package-desc .sakkal-btn a {

        padding: 10px 16px;

    }



    .package-inner {

        font-size: 13px;

        white-space: nowrap;

    }



    .package-table {

        margin-top: 40px;

    }



    .package-desc .sakkal-btn a {

        font-size: 14px;

    }



    /* team member */

    .team-content h3 {

        font-size: 18px;

    }



    .team-box .team-content {

        width: 90%;

        padding: 12px 0;

    }



    .team-box .social-icons li a {

        width: 30px;

        height: 30px;

    }



  



    /* recent update */

    .recent-update .team-member-content p {

        width: 70%;

    }

    .team-member-content{

        margin: 16px 0;

        padding-bottom: 30px;

    }



    /* contact us */

    .contact-form {

        margin-top: 20px;

    }



    /* footer */

    .footer-content h2 {

        font-size: 40px;

    }



    .footer-content {

        padding: 80px 0;

    }



    .copyright-title span {

        font-size: 18px;

    }



    .copyright-section {

        flex-direction: column;

        align-items: center;

        gap: 16px;

    }



    .quick-links li a {

        font-size: 18px;

    }



    .copyright-title span {

        padding: 0 10px;

    }

    

    service-icon {

    height: 55px;

    width: 55px;

    border-radius: 50%;

    padding: 14px;

}

.service-btn a {

    padding: 10px 18px;

    font-size: 15px;

}

.services-title h4 {

        font-size: 18px;

    }

.team-box .team-image{

    height:350px;

}



    .our-service {

        margin-top: -2px;

    }

    .bg-portfolio {

        padding-top:80px;

    }

}



@media only screen and (min-width: 768px) and (max-width: 991px) {

     .team-member .row .col-lg-4 .team-box {

        margin-bottom: 60px !important;

    }

        .team-member .row .col-lg-4:last-child .team-box {

        margin-bottom: 0px !important;

    }

    

    .contact-information .co-profile {

        gap: 20px;

    }

    .contact-information .profile-bottom {

        padding-top: 20px;

        margin-top: 15px;

    }

    

    .contact-form {

        margin-top: 0;

        padding: 15px;

    }

    .co-input {

        margin: 8px 0px;

    }

    .co-input input {

        padding:8px;

    }

    .co-input label {

        margin-bottom:5px;

    }

    .wedo-information p{

        font-size:16px;

        margin-bottom:24px;

    }

    .wedo-image img {

        width: 100%!important;

    }

    .testimonial-content{

        padding-bottom:0px!important;

    }

    .testimonial-image-info{

        margin-top:20px;

    }

    .testimonial-image-info .client-image {

        margin-right: 14px;

        width: 70px;

    }

    .client-info .rate{

        margin-top:0px;

    }

    .testimonials .testimonial-box {

        padding: 20px 20px;

        border-radius: 10px;

        margin-right: 12px;

        margin-bottom: 25px;

    }

    

     .inner-blog .team-member-content {

        

        padding-bottom: 10px;

    }

        .recent-update-info .row .col-lg-4 .update-box {

        margin-bottom: 20px;

    }

    

    .banner-content {

        top: 4%;

        transform: unset;

    }

    .banner-content h2{

        font-size: 35px !important;

    }

    .banner-contentpos {

        top: 55%;

    }

    .highlight {

        top: -65%;

    }

    .banner-posmain {

        padding-bottom: 60px;

    }

    .banner-main {

        margin-top: 0;

    }

    

}









@media only screen and (max-width: 768px) {



    /* navbar */

    .header-main .navbar-expand-md .navbar-nav .nav-link {

        padding-left: 8px;

        padding-right: 8px;

    }



    .main-menu li a {

        font-size: 16px;

    }



    .header-main .navbar-expand-md .navbar-nav {

        margin: 16px 0;

    }



    .sakkal-btn a {

        padding: 12px 24px;

        font-size: 16px;

    }



    /* banner-main */

    .banner-content h2 {

        font-size: 30px;

    }



    .banner-main::after {

        height: 50%;

        background-size: cover;

         background-position: -100px bottom;

    }



    .banner-img {

        padding-bottom: 20px;

    }



    /* service */

    .services-title h4{

        font-size: 24px;

    }



    /* about us */

    .about-us .about-image {

        height: unset;

    }

    .about-image {

    width: 70%;

    margin: auto;

    }





    /* portfolio */

    .heading-flex {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 24px;

    }



    .heading {

        width: 100%;

    }



    /* what we do */

    .wedo-image {

        display: flex;

        justify-content: center;

        margin-top: 20px;

    }



    .wedo-image img {

        width: 60%;

    }



    .wedo-flex h2 {

        font-size: 36px;

    }



    .bg-we-do {

        padding: 50px 0 80px 0px;

    }

    /* packages */

    .package-desc .sakkal-btn a{

        white-space: nowrap;

    }



    /* team member */

    .team-member-content {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

    }



    .team-member-content p {

        width: 100%;

    }



    .team-member .row .col-lg-4 .team-box {

        margin-bottom: 50px;

    }



    .team-member .row .col-lg-4:last-child .team-box {

        margin-bottom: 0px;

    }





    .team-box .team-content {

        bottom: -30px;

    }



    /* faq */

    .bg-faq-section {

        padding: 0px 0 60px;

    }

    .faq-section .card-header a{

        padding: 20px;

    }



    /* testimation */

    .our-service .sub-title {

        width: 100%;

    }



    /* recent update */

    .recent-update .team-member-content p {

        width: 100%;

    }



    .recent-update-info .row .col-lg-4 .update-box {

        margin-bottom: 20px;

    }



    .recent-update-info .row .col-lg-4:last-child .update-box {

        margin-bottom: 0px;

    }



    .recent-update {

        padding: 60px 0;

    }



    /* footer */

    .footer-content h2 {

        font-size: 30px;

    }



    .footer-content p {

        width: 80%;

    }



    .footer-content {

        padding: 60px 0;

    }



    .copyright-title span {

        font-size: 16px;

    }



    .quick-links li a {

        font-size: 16px;

    }

    .bg-portfolio{

        padding-top:80px;

        padding-bottom:80px;

    }

    .recent-update-details {

        padding: 15px 15px;

    }

    .recent-update-image {

        height:200px;

    }



    .inner-blog .recent-update-info .row .col-lg-4:last-child .update-box {

        margin-bottom: 20px;

    }



}



@media only screen and (max-width:767px){

    .bg-portfolio:after{

        background-color:var(--primary-color);

        background-image:none!important;

    }

    .inner-we-do{

        padding:40px 0px!important;

    }

    .wedo-flex{

        gap:16px;

    }

    .wedo-flex h2{

        font-size:24px!important;

    }

    .wedo-flex span{

        width:14%;

    }

    .expert-pagination {

        margin-top: 10px;

    }

    .contact-info{

        padding:40px 0px;

    }

    .bg-portfolio {

        padding-top: 50px;

        padding-bottom: 50px;

    }

    .bg-we-do .row {

        flex-direction: column-reverse;

        gap: 12px 0px;

    }

    .close-popup{

        right:0px;

    }

    .banner-video .modal-dialog .modal-content{

        height:400px;

    }

    .banner-video .modal-dialog {

        max-width: 94%;

    }

    .team-box .team-content {

        width: 90%!important;

    }

    .our-service{

        padding:60px 0px 40px 0px!important;

    }

    .client-info .rate{

        margin-top:0px!important;

    }

    .blog-details .inner-blog-head {

        margin-bottom: 30px;

    }

     .banner-content {

        top: 5%;

        transform: unset;

    }

    .banner-contentpos {

        top: 50%;

    }

    .highlight {

        top: -64%;

    }

    .banner-main {

        margin-top: 0;

    }



    .banner-posmain {

        padding-bottom: 60px;

    }

}







@media only screen and (max-width: 576px) {



    /* navbar */

    .header-main .navbar-expand-md .navbar-nav {

        gap: 4px;

    }



    /* banner content */

    .banner-main::after {

        height: 40%;

        background-position: -150px bottom;

        background-size: cover;

    }

    .banner-img {

        padding-bottom:20px;

    }

    .banner-content h2 {

        font-size: 30px;

    }



    /* service */

    .our-service .sub-title {

        width: 100%;

    }



    .services-box {

        padding: 24px;

        margin-top: 30px;

    }



    .title h3 {

        font-size: 36px;

    }



    .our-service {

        padding: 60px 0px 60px;

    }



    /* about us */

    .about-us {

        margin: 60px 0px;

    }



    .inner-content h3{

        font-size: 14px;

    }

    .inner-content p{

        font-size: 12px;

    }



    /* service */

   .bg-we-do{

    padding: 60px 0 80px 0px;

   }



   /* packages */

   .package-main{

    padding: 60px 0;

   }



    /* team member */

    .team-member{

        padding: 60px 0;

    }

    .team-box .team-image {

        display: flex;

        justify-content: center;

    }



    .team-box:hover .social-icons {

        right: 16%;

    }

    .update-box{

        width: 100%;

       

        padding-top: 0px;

    }



    /* faq */

   

    .bg-faq-section {

        padding: 0px 0 60px;

    }

    .faq-section .card-header a{

        padding: 20px;

    }

    .faq-section .card-body{

        padding: 0px 20px 20px 20px;

    }

    .faq-section .card{

        margin-bottom: 20px;

    }



    /* testimation */

    .testimonial-details .title h3 {

        font-size: 30px;

    }

    .testimonial-slider{

        margin-top: 40px;

    }

    .testimonials .testimonial-box{

        margin-right: 8px;

    }



    /* recent update */

    .recent-update-details span {

        font-size: 16px;

    }



    .recent-update-details h3 {

        font-size: 16px;

        margin: 8px 0;

    }





    /* contact us */

    .bg-contactus {

        margin: 0;

        padding: 60px 0;

    }

    .co-address h2{

        font-size: 24px;

    }

    

    /* footer */

    .quick-links li a {

        font-size: 16px;

    }



    .copyright-section {

        padding: 16px 0px 16px;

    }

    

     .recent-update-image {

        height:250px;

    }

    .copyright-section{

        flex-direction: column!important;

        gap:5px!important;

    }

    .quick-links li a{

        font-size:13px!important;

    }

    .quick-links {

        gap: 5px!important;

        flex-direction: column!important;

        text-align:center!important;

    }

    .copyright-title span{

        padding:0px 8px!important;

        font-size:13px!important;

    }

    .inner-blog .team-member-content {

        margin: 16px 0;

        padding-bottom: 0;

    }

    

    .quick-links li {

        border-right:none;

    }

    .copyright-title {

        text-align:center;

    }

    .copyright-title span {

        border-right:none;

    }

     .banner-content {

        top: 5%;

        transform: unset;

    }

    .banner-contentpos {

        top: 60%;

    }

    .highlight {

        top: -70%;

    }

    .banner-posmain {

        padding-bottom: 60px;

    }

    .banner-main {

        margin-top: 0;

    }

}



@media only screen and (max-width: 425px) {



    /* navbar */

    .header-main .navbar-expand-md .navbar-nav {

        margin: 10px 0;

    }

    /* about us */

    .about-us {

        margin: 40px 0px;

      }



    /* team member */

    .team-box .team-image img {

        width: 100%;

    }



    .team-box .team-content {

        width: 70%;

    }



    .team-box:hover .social-icons {

        right: 8%;

    }



    /* service */

    .title h3 {

        font-size: 24px;

    }

    .services-title h4{

        font-size: 20px;

    }



    /* portfolio */

    .content{

        padding: 10px 10px;

    }

    .inner-content h3{

        font-size: 12px;

        margin-bottom: 0;

    }

    .inner-content p{

        margin-bottom: 0;

    }





    /* packages */

    .package-main{

        padding: 40px 0;

    }



    /* what we do */

    .wedo-information p {

        font-size: 16px;

        margin-bottom: 24px;

        line-height: normal;

        margin-bottom:24px;

    }



    .wedo-flex {

        margin-bottom: 0;

    }

    .wedo-flex h2{

        font-size: 30px;

    }

    .bg-we-do{

        padding: 40px 0;

    }



    /* team member */

    .team-member{

        padding: 60px 0;

    }



    /* faq */

    .faq-title h3 {

        line-height: 40px;

        font-size: 24px;

    }



    .faq-section .card-header a {

        padding: 16px;

        font-size: 16px;

    }



    .faq-section .card-body {

        padding: 0px 16px 16px 16px;

    }



    .faq-section .card {

        margin-bottom: 20px;

    }

    .bg-faq-section{

        padding: 0px 0 40px;

    }



    /* service */

    .our-service{

        padding: 40px 0px 40px !important;

    }



    /* testimation */

    .testimonial-details .title h3 {

        font-size: 22px;

    }

    .testimonials .testimonial-box{

        padding: 20px;

        margin-bottom: 30px;

    }

    .testimonial-content{

        padding-bottom: 20px;

    }



    /* recent update */

    .recent-update-details h3{

        font-size: 18px;

        margin: 8px 0;

    }

    .recent-update{

        padding: 40px 0;

    }



    /* contact */

    .co-profile {

        display: flex;

        flex-direction: column;

        gap: 16px;

    }

    .co-image{

        width: 50%;

    }

   



    .bg-contactus {

        padding: 40px 0;

    }





    /* footer */

    .footer-content h2 {

        font-size: 20px;

    }



    .footer-content p {

        width: 90%;

        font-size: 16px;

    }



    .copyright-section {

        padding: 20px;

    }

    .copyright-title span{

        font-size: 14px;

    }

    .quick-links li a{

        font-size: 14px;

        padding: 0px;

    }

    .footer-social{

        margin: 20px 0;

    }

    /* .recent-update-image {*/

    /*    height:280px;*/

    /*}*/

}





/*@media only screen and (max-width: 360px) {*/

    /* banner content */

/*    .banner-content h2{*/

/*        font-size: 20px;*/

/*    }*/

/*    .banner-content p{*/

/*        font-size: 14px;*/

/*    }*/

/*    .sakkal-btn a{*/

/*        padding: 8px 10px;*/

/*        font-size: 14px;*/

/*    }*/

    /* our service */

/*    .our-service{*/

/*        padding: 30px 0px 30px;*/

/*    }*/

/*    .sub-title{*/

/*        font-size: 14px;*/

/*    }*/

/*    .services-content p{*/

/*        font-size: 14px;*/

/*    }*/



    /* about */

/*    .about-info-details P{*/

/*        font-size: 14px;*/

/*    }*/

    /* what we do */

/*    .wedo-information p{*/

/*        font-size: 14px;*/

/*    }*/

    /* faq */

/*    .faq-section .card-header a{*/

/*        padding: 10px;*/

/*    }*/

/*    .faq-section .card-body p{*/

/*        font-size: 14px;*/

/*    }*/

    /* footer */

/*    .footer-content p{*/

/*        width: 100%;*/

/*    }*/

/*    .copyright-title span{*/

/*        font-size: 13px;*/

/*        padding: 0 5px;*/

/*    }*/

/*    .quick-links li a{*/

/*        font-size: 12px;*/

/*    }*/

/*    .quick-links{*/

/*        gap: 8px;*/

/*    }*/

/*    .quick-links li{*/

/*       padding-right: 7px;*/

/*    }*/

/*}*/







@media only screen and (max-width:375px){

    

    .bg-portfolio{

        overflow:hidden;

        padding-top: 50px;

        padding-bottom: 50px;

    }

    .team-box .team-image{

    height:350px;

    }

    .team-member {

        padding: 60px 0 80px 0px;

    }



    .bg-faq-section {

        padding: 0px 0 40px;

    }

    .faq-section .card-header a {

        padding: 16px 16px 16px 10px;

        font-size: 15px;

    }

    

    

}







@media only screen and (max-width:320px){

        

     .banner-content h2 {

        font-size: 24px;

    }



    .banner-btn {

        margin-top: 18px;

        gap: 16px;

    }



    .sakkal-btn a {

        padding: 10px 20px;

    }

    

       .wedo-image img {

        width: 80%;

    }

  .team-box .team-image {

     height: 300px;

  }

  .team-box .team-content {

            width: 90%;

  }

    .recent-update{

      /*padding:80px 0px;*/

    }

    .sub-title {

        font-size: 14px;

    }

    .service-icon {

        height: 60px;

        width: 60px;

        padding: 10px;

    }

    .services-content p {

         font-size: 14px;

    }

     .about-details {

        padding-top: 35px;

    }

    .project_details {

        padding:12px 12px;

    }

    

    .project_details h3{

        font-size:18px;

        line-height:normal;

        

    }

    .project_box .image_box .zm_btn {

        width: 50px;

        height: 50px;

        right: 20px;

        display: flex;

        align-items: center;

        justify-content: center;

        top:20px;

    }

        .sakkal-btn a {

        padding: 10px 8px;

    }

    .banner-video .modal-dialog .modal-content {

        height:350px;

    }

      .highlight {

        top: -55%;

    }

    .banner-contentpos {

        top: 45%;

    }

}









/*-----contact page responsive-----*/



@media only screen and (min-width: 1200px) and (max-width: 1440px){

    .contact-info .title h3 {

        font-size: 36px;

    }

    .bg-banner{

      padding:50px 0px;

    }

    .about-title h2{

       font-size:40px

    }

    .contact-info{

        padding:100px 0px;  

    }

    

    



}

@media only screen and (min-width: 992px) and (max-width: 1199px){

    

    .contact-info .title h3 {

        font-size: 32px;

    }

    .contact-info-box.row.align-items-start {

        padding: 30px 0 40px;

    }

    .bg-banner{

        padding:50px 0px;

    }

    .sakkal-btn a {

        padding: 16px 18px;

        font-size: 15px;

    }

    

    

    

    .about-title h2{

        font-size:40px;

    }

    .main-menu li a {

        font-size: 16px;

        padding: 0px 6px;

    }

    .main-menu {

        gap: 2px;

    }

}

@media only screen and (min-width: 768px) and (max-width: 991px){

    .contact-info .title h3 {

        font-size: 28px;

    }

    .contact-info-box.row.align-items-start {

        padding: 30px 0 30px;

    }

    .co-address h2 {

        font-size: 24px;

        line-height: normal;

    }

    .co-input textarea{

        padding:8px;

    }

    .about-title h2 {

        font-size: 36px;

        line-height: 40px;

    }

    .bg-banner{

        padding:35px 0px;

    }                         

    

    

    

    .banner-main::after {

        height:50%;

    }

    .banner-img {

        padding-bottom: 10px;

    }

}

@media only screen and (max-width: 767px){

    .contact-info .title h3 {

        font-size: 24px;

    }

    .portfolio{

        margin-top:35px;

    }

    

    .contact-info-box.row.align-items-start {

        padding: 30px 0 30px;

    }

    .contact-info-box .icon-box a {

        font-size: 14px;

        line-height: 24px;

        word-wrap: break-word;

    }

    .contact-info-box .icon-box>p {

        font-size: 14px;

        line-height: 24px;

    }

    .contact-map iframe {

        height: 300px;

    }

    .profile-bottom p{

        font-size:14px;

    }

    .bg-banner{

        padding:35px 0;

    }

    .about-title h2{

        font-size:30px;

    }

    .project_tabs{

        overflow-y: scroll;

        flex-wrap: nowrap;

        padding: 10px 5px;

        justify-content: space-around;

    }

}



@media only screen and (max-width: 575px){

    .contact-info-box.row.align-items-start {

        gap: 15px;

        padding: 25px 0 25px;

    }

    .contact-info-box .icon-box div {

        margin-bottom: 8px;

    }

    .service-btn {

        margin-top: 30px;

    }

    .banner-btn .watch-btn .play-icon {

        width: 35px !important;

        height: 35px !important;

    }

    .our-service {

        margin-top:-2px;

    }

}







/*--- Price Page Responsive CSS ---*/



@media only screen and (min-width:1366px) and (max-width:1440px){

    .pricing_list {

        padding: 0px 10px 0 20px;

    }

    .bg-contactus{

        padding:100px 0px;

    }

    /*.wedo-image  {*/

    /*    height:250px;*/

    /*    width:250px;*/

    /*}*/

    /*.wedo-image .do-img img {*/

    /*    width: 150px;*/

    /*}*/

}

@media only screen and (min-width:1200px) and (max-width:1365px){

    .pricing_list {

        padding: 0 10px;

    }

    /* .wedo-image  {*/

    /*    height:250px;*/

    /*    width:250px;*/

    /*}*/

    /*.wedo-image .do-img img {*/

    /*    width: 150px;*/

    /*}*/

}

@media only screen and (min-width:992px) and (max-width:1199px){

    .main_price .tab-content .row{

        justify-content: center;

    }

    .price_box{

        margin-bottom: 30px;

    }

    .main_price {

        padding: 80px 0;

    }

    .main_price .price_head .title h3 {

        line-height: inherit;

    }

    /* .wedo-image  {*/

    /*    height:220px;*/

    /*    width:220px;*/

    /*}*/

    /*.wedo-image .do-img img {*/

    /*    width: 120px;*/

    /*}*/

}

@media only screen and (min-width:768px) and (max-width:991px){

    .price_plan h4 {

        font-size: 40px;

        line-height: 60px;

    }

    .main_price .tab-content .row{

        justify-content: center;

    }

    .price_box_head {

        padding: 0 20px 24px;

    }

    .pricing_button {

        margin: 30px 36px 0;

    }

    .price_box {

        padding: 30px 0 35px 0;

        margin-bottom: 30px;

    }

    .main_price .price_head .sub-title {

        width: 100%;

    }

    .main_price {

        padding: 80px 0;

    }

    .main_price .price_head .title h3 {

        line-height: inherit;

         margin-bottom:14px;

    }

   

    .main_price .price_head .sub-title{

        width:100%;

    }

    .price_box_head h3{

        margin-bottom:0px;

    }

    .main_price .price_head .title h3 {

        line-height: inherit;

        font-size: 28px;

        font-weight: 600;

        margin-bottom: 14px;

    }

    .price_plan h4 {

        font-size: 34px;

        line-height: normal;

    }

      .wedo-image  {

        height:220px;

        width:220px;

    }

    /*.wedo-image .do-img img {*/

    /*    width: 100px !important;*/

    /*}*/



    /*.wedo-image::after {*/

    /*    right:-20px;*/

    /*}*/



}

@media only screen and (max-width:767px){

    .pride_space .nav.nav-pills.justify-content-end{

        justify-content: center !important;

        margin-top: 20px;

    }

    .pride_space {

        margin-bottom: 40px;

    }

    .main_price .price_head .title h3{

        text-align: center;

    }

    .main_price .price_head .sub-title{

        text-align: center;

        width: 100%;

    }

    .price_box {

        padding: 30px 0 35px 0;

        margin-bottom: 30px;

    }

    .main_price {

        padding: 40px 0;

    }

    .main_price .price_head .title h3 {

        line-height: inherit;

    }

    .price_box_head h3{

        margin-bottom:0px;

    }

    /*.wedo-image {*/

    /*    height:220px;*/

    /*    width:220px;*/

    /*}*/

    /*.wedo-image .do-img img {*/

    /*    width: 120px !important;*/

    /*}*/

}

@media only screen and (max-width:400px){

    .price_plan h4 {

        font-size: 32px;

        line-height: 44px;

    }

    .price_plan span {

        font-size: 18px;

        line-height: 30px;

    }

    .pricing_list {

        padding: 0 15px;

    }

    .pricing_button {

        margin: 30px 30px 0;

    }

    .price_box_head {

        padding: 0 20px 24px;

    }

    .main_price .price_head .title h3 {

    line-height: inherit;

    }

}



@media only screen and (max-width:320px){

    .pricing_list li{

        font-size:14px;

    }

    .pricing_list li {

        font-size: 14px;

        line-height: normal;

        margin-bottom: 10px;

    }

}







/* Portfolio Page Responsive CSS */



@media only screen and (min-width:1200px) and (max-width:1365px){

    .main_project {

        padding: 100px 0;

    }

    .newsletter-item {

        margin: 0px 0px;

    }

    .newsletter-section {

        padding-bottom: 100px;

    }

    .newsletter-content {

        padding: 60px 60px;

    }

}

@media only screen and (min-width:992px) and (max-width:1199px){

    .project_head .sub-title {

        width: 50%;

    }

    .main_project {

        padding: 80px 0 40px 0px;

    }

    .project_tabs_container {

        margin-top: 30px;

    }

    .newsletter-item {

        margin: 0px 0px;

    }

    .newsletter-section {

        padding-bottom:80px;

        padding-top:40px;

    }

    .newsletter-content {

        padding:45px 45px;

    }

    .newsletter-img img {

        margin-top: -40px;

        width: 100%;

    }

    .newsletter-content h3 {

    font-size: 32px;

    margin-bottom: 16px;

    }

}

@media only screen and (min-width:768px) and (max-width:991px){

    .main_project {

        padding-top:80px;

        padding-bottom:40px;

    }

    .project_head .sub-title {

        width: 70%;

    }

    .project_tabs_container {

        margin-top: 30px;

    }

    .newsletter-img img {

        margin-top: -50px;

        width: 276px;

    }

    .newsletter-content h3 {

        font-size: 24px;

        line-height: 35px;

    }

    .newsletter-content {

        padding: 50px 50px;

    }

    .newsletter-item {

        margin: 0px 0px;

    }

    .newsletter-section {

    padding-bottom: 100px;

    padding-top: 50px;

}



}



@media only screen and (max-width:767px){

    .project_head .sub-title {

        width: 100%;

    }

    .main_project {

        padding:40px 0!important;

    }

    .project_tabs_container {

        margin-top: 30px;

    }

    .newsletter-item {

        flex-wrap: wrap;

        margin: 0px 0px;

        border-radius: 0;

    }

    .newsletter-content {

        padding: 40px 40px;

        order: 2;

    }

    .newsletter-img {

        order: 1;

        margin: auto;

    }

    .newsletter-img img {

        margin-top: -50px;

        width: 100%;

    }

    .newsletter-section {

        padding-bottom: 60px;

    }

}

@media only screen and (max-width:460px){



    .project_tabs::-webkit-scrollbar {

      width: 0px;

      height: 0px;

    }

    .main_project {

        padding: 60px 0;

    }

    .project_tabs_container {

        margin-top: 30px;

    }

    .newsletter-content h3 {

        font-size: 24px;

        line-height: 28px;

    }

    .newsletter-content {

        padding: 30px 20px;

        order: 2;

    }

    .newsletter-content .d-flex{

        display: block !important;

    }

}





/*service page responsive css*/







/*-----services page responsive-----*/



@media only screen and (min-width: 1367px) and (max-width: 1440px){

   .service-offering{

    padding: 100px 0 !important;

   }

   .services-main{

    padding: 100px 0;

   }

}



@media only screen and (min-width: 1200px) and (max-width: 1366px){

    .bg-crafting {

        padding: 80px 0px 80px 0px;

    }

    .crafting-info {

        padding-left: 25px;

    }

    .service-offering .services-head .sub-title {

        width: 75%;

    }

    .services-head {

        margin-bottom: 50px;

    }

    .service-name {

        font-size: 18px;

    }

    .crafting-info h2 {

        font-size: 36px;

    }

    .services-main {

        padding:80px 0;

    }

    .service-inner .crafting-info {

    padding-right: 25px;

    padding-left: 0;

   }

}

@media only screen and (min-width: 992px) and (max-width: 1199px){

    .bg-crafting {

        padding: 60px 0px 60px 0px;

    }

    .crafting-info {

        padding-left: 15px;

    }

    .service-offering .services-head .sub-title {

        width: 80%;

    }

    .services-head {

        margin-bottom: 50px;

    }

    .service-name {

        font-size: 16px;

    }

    .crafting-info h2 {

        font-size: 32px;

    }

    .services-main {

         padding: 80px 0px 80px 0px;

    }

    .provide-icon {

        margin-bottom: 12px;

    }

     .services-main .services-head h2{

        font-size: 30px;

    }

    .bg-crafting .row{

        align-items: flex-start;

    }

    .inner-we-do {

        padding:80px 0;

    }

    .service-inner .crafting-info {

    padding-right: 15px;

    padding-left: 0;

   }

}

@media only screen and (min-width: 768px) and (max-width: 991px){

   

    

    

    

    .bg-crafting {

        padding: 50px 0px 50px 0px;

    }

    .crafting-info {

        padding-left: 0px;

        padding-top: 20px;

    }

   

    .service-offering .services-head .sub-title {

        width: 100%;

    }

    .services-head {

        margin-bottom: 30px;

    }

    .crafting-info h2 {

        font-size: 28px;

    }

    .services-main {

         padding: 50px 0px 50px 0px;

    }

    .crafting-info{

        padding-top: 0;

    }

    .service-name{

        font-size: 16px;

    }

    .service-offering .crafting-info p{

        margin-bottom: 16px;

    }

    .service-list{

        margin-bottom: 16px; 

        gap: 12px 5px;

    }

    .service-offering .crafting-info h2{

        font-size: 24px;

    }

    .service-inner .crafting-info h2{

        font-size: 24px;

    }

    .services-main .services-head h2{

        font-size: 30px;

    }

   

      .services-inner .row{

        gap: 20px 0;

   }

   .inner-we-do {

        padding:60px 0 !important;

    }

    .service-inner .crafting-info {

    padding-right: 0px;

    padding-left: 0;

  }

}



@media only screen and (min-width: 576px) and (max-width: 767px){

    .services-head{

        margin-bottom: 30px;

    }

    .service-offering .services-head .sub-title{

        width: 100%;

    }

    .service-inner .row{

        display: flex;

        flex-direction: column-reverse;

        gap: 16px;

    }

    .services-main{

        padding: 60px 0;

    }

    .services-main .services-head h2{

        font-size: 30px;

    }

    .provide-content span{

        font-size: 20px;

    }

    .services-inner .col-lg-3 .provide-box{

        margin-bottom: 20px;

    }

    .services-inner .col-lg-3:last-child .provide-box{

        margin-bottom: 0px;

    }

    .service-name{

        font-size: 18px;

    }

   .inner-we-do {

        padding:80px 0;

    }

    .service-inner .crafting-info {

    padding-right: 0px;

    padding-left: 0;

  }

   

}

@media only screen and (max-width:575px){

    .service-offering .services-head .title h3{

        font-size: 24px;

        margin-bottom: 16px;

    }

    .service-offering .services-head .sub-title{

        width: 100%;

    }

    .services-head{

        margin-bottom: 30px;

    }

    .service-inner .crafting-info h2{

        font-size: 20px;

    }

    .service-name{

        font-size: 16px;

    }

    .service-inner .row{

        display: flex;

        flex-direction: column-reverse;

        gap: 16px;

    }

    .services-main{

        padding: 30px 0;

    }

    .services-main .services-head h2{

        font-size: 24px;

    }

    .services-inner  .provide-icon{

        margin-bottom: 20px;

    }

    .services-inner .provide-content span{

        font-size: 18px;

    }

    .services-inner .row{

        gap: 16px;

    }

    .service-inner .crafting-info {

        padding-left:0;

        padding-right:0;

    }

}



@media only screen and (max-width: 375px) {

    .services-inner .provide-content span {

        font-size: 16px;

        margin-bottom: 6px;

    }

    .services-inner .provide-icon {

        margin-bottom: 12px;

    }

    .service-item { 

        width:100%;

        

    }

}



/*about page responsive css*/

@media only screen and (min-width:1366px) and (max-width: 1440px) {

    .bg-about-video {

        padding: 100px 0px;

    }

     .bg-benefit {

        padding: 100px 0px;

    }

    .bg-crafting {

        padding: 100px 0px 100px 0px;

    }

    .bg-business {

        padding: 100px 0px;

    }

    .bg-portfolio{

        padding:100px 0px 250px 0px;

    }

    .package-main{

        padding:100px 0px;

    }

    .team-member{

        padding:100px 0px 140px;

    }

    .bg-faq-section{

        padding:0px 0px 100px;

    }

    .recent-update{

        padding:100px 0px;

    }

}



@media only screen and (min-width: 1200px) and (max-width: 1399px){

    .bg-about-video {

        padding: 80px 0;

        overflow: hidden;

    }



    .bg-benefit {

        padding: 80px 0;

        overflow: hidden;

    }



    .benefit-box {

        padding: 18px;

    }



    .benefit-image {

        margin-bottom: 30px;

    }



    .benefit-info p {

        min-height: 70px;

        height: 100%;

        font-size: 16px;

    }



    .bg-crafting {

        padding: 80px 0px 100px 0px;

        overflow: hidden;

    }



    .bg-dynamic {

        padding-bottom: 80px;

        overflow: hidden;

    }

    .marketing-info {

        padding: 0px 10px 0px 20px;

    }

    .bg-business {

        padding: 40px 0;

        overflow: hidden;

    }

    .bg-about-video{

        overflow: hidden;

    }

    .bg-marketing{

        overflow: hidden;

    }

}



@media only screen and (min-width: 992px) and (max-width: 1199px){

    .about-video-heading {

        width: 80%;

    }



    .benefit-info h4 {

        font-size: 20px;

    }

   

    .marketing-info {

        padding: 16px 60px 16px 0px;

    }

    .bg-about-video{

        padding: 80px 0;

    }

    .bg-benefit{

        padding: 80px 0;

    }

    .bg-crafting{

        padding: 80px 0;

    }

    .bg-dynamic{

        padding-bottom: 80px;

    }

     .bg-dynamic .crafting-info{

        padding-right: 15px;

    }

    .bg-business .crafting-info{

         padding-right: 15px; 

    }

    .bg-business{

        padding: 80px 0;

    }

   

}

@media only screen and (min-width: 768px) and (max-width: 991px){

   

    .bg-about-video{

        padding: 60px 0;

    }

    .bg-benefit{

        padding: 60px 0;

    }

    .bg-crafting{

        padding: 60px 0;

    }

    .bg-benefit .row .col-lg-4{

        margin-bottom: 30px;

        display: flex;

    }

    .bg-benefit .row .col-lg-4:last-child{

        margin-bottom: 0px;

    }

    .crafting-info{

        padding-left: 0;

        padding-top:0;

    }

    .bg-crafting .row{

        align-items: flex-start;

    }

    .bg-dynamic .crafting-info{

        padding-right: 0;

    }

    .bg-dynamic{

        padding-bottom: 60px;

    }

    .crafting-info h2{

        font-size: 30px;

        margin-bottom: 10px;

    }

    .bg-dynamic .row{

        align-items: flex-start;

    }

    .bg-marketing .row{

        align-items: center;

    }

    .marketing-info{

        padding: 16px 16px 16px 0px;

    }

    .bg-business{

        padding: 60px 0px;

    }

    .bg-business .crafting-info{

        padding-right:0px;

    }

    .bg-business .row{

        align-items: flex-start;

    }

    .crafting-info p{

        margin-bottom: 16px;

    }

    .about-video-heading{

        width: 80%;

    }

    .benefit-image{

        margin-bottom: 24px;

    }

    

}

@media only screen and (min-width: 576px) and (max-width: 767px){

   

    .bg-about-video{

        padding: 60px 0;

    }

    .bg-benefit{

        padding: 60px 0;

    }

    .title h3{

        font-size: 36px;

    }

    .about-video-heading{

        width: 100%;

        margin-bottom: 30px;

    }

     .about-video-section{

        padding:0;

    }

    .benefit-image{

        margin-bottom: 30px;

    }

    .bg-benefit .row .col-lg-4{

        margin-bottom: 30px;

        display: flex;

    }

    .bg-benefit .row .col-lg-4:last-child{

        margin-bottom: 0px;

    }

    .bg-crafting{

        padding: 60px 0;

    }

    .crafting-info h2{

        font-size: 30px;

        margin-bottom:10px;

    }

    .crafting-info{

        padding-left: 0;

        padding-right:0 !important;

    }

    .bg-crafting .row{

        gap: 16px;

    }

    .bg-dynamic .row{

        gap: 16px;

    }

    .bg-dynamic{

        padding-bottom: 60px;

    }

    .bg-marketing{

        padding:60px 16px;

    }

    .bg-marketing .row{

        gap: 16px;

    }

    .marketing-info{

        padding: 0;

    }

    .bg-business{

        

        padding: 60px 0;

    }

    .bg-business .row{

        gap: 16px;

    }

}

@media only screen and (max-width: 575px){

    

    .bg-about-video{

        padding: 60px 0;

    }

    .title h3{

        font-size: 30px;

    }

    .about-video-heading{

        width: 100%;

    }

    .about-video-heading{

        margin: auto auto 30px auto;

    }

    .bg-benefit{

        padding: 60px 0;

    }

    .benefit{

        margin-bottom: 30px;

    }

    .benefit-box{

        padding: 20px;

    }

    .benefit-image{

        margin-bottom: 20px;

    }

    .bg-benefit .row .col-lg-4{

        margin-bottom: 20px;

        display: flex;

    }

    .bg-benefit .row .col-lg-4:last-child{

        margin-bottom: 0px;

    }

    .bg-crafting{

        padding: 60px 0px;

    }

    .bg-crafting .crafting-info{

        padding-left:0px;

    }

    .crafting-info h2{

        font-size: 30px;

    }

    .bg-business .crafting-info{

        padding-right: 0;

    }

    .bg-crafting .row{

        gap: 16px;

    }

    .crafting-info h2{

        margin-bottom: 16px;

    }

    .bg-dynamic .crafting-info{

        padding-right: 0;

    }

    .bg-dynamic .row{

        gap: 16px;

        

    }

    .crafting-info p{

        margin-bottom: 16px;

    }

    .bg-dynamic{

        padding-bottom: 30px;

    }

    .bg-marketing{

        padding:60px 16px;

    }

    .marketing-info{

        padding: 0;

    }

    .bg-marketing .row{

        gap: 16px;

    }

    .bg-business{

        padding: 60px 0;

    }

    .bg-business .row{

        gap: 16px;

    }

    .watch-btn .play-icon{

        width: 60px !important;

        height: 60px !important;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .about-video-section{

        padding: 0;

    }

}



@media only screen and (max-width:376px){

    .title h3{

        margin-bottom: 16px;

        font-size: 24px;

    }

    .crafting-info h2{

        font-size: 20px;

    }

   

    .bg-about-video{

        padding: 40px 0;

    }

    .bg-benefit{

        font-size:30px;

    }

    .benefit-info h4{

        font-size:20px;

    }

    .bg-benefit{

         padding: 40px 0;

    }

    .bg-crafting{

        padding: 40px 0;

    }

    .bg-marketing{

        padding:40px 16px;

    }

    .bg-business{

        padding: 40px 0;

    }

    

}



@media only screen and (max-width: 320px) {

    .watch-btn .play-icon {

        width: 45px !important;

        height: 45px !important;

    }

}



/*------------terms & condition responsive------------- */

    @media only screen and (min-width: 992px) and (max-width: 1199px){

        .termscondition-main{

            padding: 80px 0;

         }  

    }

    @media only screen and (min-width: 768px) and (max-width: 991px){

        .termscondition-main{

            padding: 60px 0;

         }  

    }

    @media only screen and (min-width: 576px) and (max-width: 767px){

        .termscondition-main{

            padding: 40px 0;

         }  

         .termscondition-content h3{

            margin-bottom: 24px;

         }

    }

    @media only screen and (max-width: 575px){

        .termscondition-main{

            padding: 30px 0;

        }

        .termscondition-content h3{

            margin-bottom: 20px;

            font-size: 20px;

        }

        .termscondition-content p{

            margin-bottom: 16px;

        }

    }

    @media only screen and (max-width: 375px){

        .termscondition-content p{

            font-size: 14px;

        }

        .termscondition-content h3{

            margin-bottom: 16px;

        }

    }

    

    /* blog details responsive */



@media only screen and (min-width:1200px) and (max-width:1399px) {

  

    .blog-details .recent-update-details h3{

        margin: 4px 0;

    }

    .blog-details .recent-update-details{

        padding: 24px 0 0 0;

    }

    

}



@media only screen and (min-width:992px) and (max-width:1199px) {

    .latest-blog{

        padding: 16px;

    } 

    .recent-blog-list h3{

        font-size: 15px;

        margin-bottom: 4px;

    }

    .recent-blog-list span{

        font-size: 14px;

    }

    .blog-details .recent-update-image {

        height: 400px !important;

    }

    .blog-details .recent-update-details h3{

        margin: 4px 0;

    }

   

}



@media only screen and (min-width:768px) and (max-width:991px) {

    .latest-blog{

        padding: 16px;

    }

    .recent-blog-list h3{

        font-size: 16px;

        margin-bottom: 0;

    }

    .recent-blog-list{

        gap: 8px;

        margin-bottom: 16px;

    }

    .recent-blog-list span{

        font-size: 14px;

    }

    .latest-blog h4{

        margin-bottom: 18px;

    }

    .blog-details .recent-update-details h3{

        font-size: 24px;

    }

    .recent-update-details h3{

        margin: 4px 0;

    }

    .recent-update-innercontent h4{

        font-size: 20px;

        margin-top: 16px;

    }

    .blog-details .recent-update-image{

        height: 300px !important;

    }

}

@media only screen and (min-width: 576px) and (max-width: 767px) {

    .blog-details .recent-update-image{

        height: 300px !important;

    }

    .blog-details .recent-update-details h3{

        font-size: 24px;

    }

    .recent-update-innercontent h4{

        font-size: 20px;

        margin-top: 20px;

    }

    .blog-details .recent-update-details{

        padding: 16px 0;

    }

    .blog-details  .update-box{

        margin-bottom: 10px !important;

    }

   

}



@media only screen and (max-width: 575px) {

    .blog-details .recent-update-image{

        height: 200px !important;

    } 

    .blog-details .recent-update-details{

        padding: 16px 0;

    }

    .blog-details .recent-update-details h3{

        font-size: 20px;

    }

    .recent-update-innercontent h4{

        font-size: 18px;

    }

   

    .latest-blog h4{

        margin-bottom: 16px;

    }

    .latest-blog{

        padding: 18px;

    }

    .recent-blog-list h3{

        font-size: 16px;

    }

    .recent-update-innercontent h4{

        margin-top: 16px;

    }

    .blog-details .recent-update-details h3{

        margin: 4px 0;

    }

    .recent-update-details span{

        font-size: 14px;

    }

    .blog-details  .update-box{

        margin-bottom: 10px !important;

    }

    .recent-blog-list:last-child{

        margin-bottom: 0;

    }

}