@font-face {
  font-family: Roman; /* set name */
  src: url(fonts/OPTITimes-Roman.otf); /* url of the font */
}

a { text-decoration: none !important; }

body {font-family: Roman;background: #1c2029;background-image: url(../images/bg.png);background-size: 100% 100%;background-attachment: fixed;}
p , li , label{ font-family: "Poppins", sans-serif;}
header .header  {padding: 10px 0;border-bottom: 1px solid #5f6063;box-shadow: 0 4px 20px 8px #000000;position: relative;z-index: 9;}
header .header img { width : 100%; height:auto }

header .header nav {text-align: right;}
header .header nav ul {display: inline-block;width: 100%;list-style: none;margin: 0;padding: 30px 0;}
header .header nav ul li  {display: inline;margin-left: 24px;}
header .header nav ul li a {color: #fff;text-decoration: none;font-size: 16px;}

.banner {position: relative;background-image : url(../images/banner.png);background-size: cover;background-repeat: no-repeat;height: 660px;}

.banner .main-img {width: 100%;height: auto;object-fit: cover;}

.banner h2 {color:#fff;font-size: 60px;}
.banner h3 {color:#ddb16d;font-size: 60px;}
.banner p {color:#fff;font-size: 20px;margin: 20px 0;width: 100%;}

.btn1{
 /* Background: Top light brown se bottom dark brown ka gradient */
 background: linear-gradient(
48deg, #764918 0%, #c08d3e 100%);
 color: white;
 font-weight: 500;
 font-size: 18px;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 padding: 12px 30px;
 border: 1px solid #ddb064;
 border-radius: 6px;
 cursor: pointer;

  /* Mazeed 3D feel ke liye box-shadow ko thoda solid rakhein */
 /* box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.4), 
    0 5px 0 #5d3f18,                       
    0 8px 10px rgba(0, 0, 0, 0.3); */         /* Ye zameen par shadow dikhayega */
 transition: all 0.1s ease;
 position: relative;
 outline: none;
 font-family: "Poppins", sans-serif;
 display: inline-block;
 margin-right: 12px;
 }


 .btn2{
 /* Background: Top light brown se bottom dark brown ka gradient */
 background: linear-gradient(48deg, #121520 0%, #343641 100%);
 color: white;
 font-weight: 500;
 font-size: 18px;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 padding: 12px 30px;
 border: 1px solid #7d8189;
 border-radius: 6px;
 cursor: pointer;

  /* Mazeed 3D feel ke liye box-shadow ko thoda solid rakhein */
 /* box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.4), 
    0 5px 0 #5d3f18,                       
    0 8px 10px rgba(0, 0, 0, 0.3); */         /* Ye zameen par shadow dikhayega */
 transition: all 0.1s ease;
 position: relative;
 outline: none;
 font-family: "Poppins", sans-serif;
 }

 .banner .content { display: table; width:100%; }
 .banner .content .cobtbox { display: table-cell; height: 660px; vertical-align: middle; }


.secondsection {text-align: center;padding: 20px 0;position: relative;}
.secondsection:before {content:"";background-image:url(../images/lin1.png);position: absolute;bottom: 0px;left: 0;right: 0;width: 80%;height: 4px;background-size: cover;width: 77%;margin: 0 auto;}
.secondsection label {font-family: "Poppins", sans-serif;color: #fff;font-size: 20px;display: inline-block;width: 100%;}

.secondsection label img {width: 54px;margin-right: 12px;}

label.bor {
    border-left: 1px solid #cfa26669;
    border-right: 1px solid #cfa26669;
}

.nopad { padding:0; }

.process {padding: 3% 0 2%;position: relative;}
.process h2 {text-align:center;color:#fff;font-weight: 600;font-size: 50px;position: relative;}
.process h2 span { color:#ddb16d }
.process h2:before {content:"";background-image:url("../images/lin2.png");position: absolute;top: 50%;left: 0;width: 420px;height: 1px;background-repeat: no-repeat;}
.process h2:after {content:"";background-image:url("../images/lin3.png");position: absolute;top: 50%;right: 0;width: 420px;height: 1px;background-repeat: no-repeat;}

.process ul {display:inline-block;width:100%;list-style: none;padding:0;margin:0;text-align: center;margin-top: 40px;}
.process ul li { font-family: "Poppins", sans-serif;position: relative; display: inline-block;color:#fff;font-size: 24px;width: 25%;float: left;}
.process ul li label {background:linear-gradient(48deg, #121520 0%, #343641 100%);border: 1px solid #5e626b;border-radius: 50%;width: 50px;height: 50px;text-align: center;color: #ddb16d;font-size: 26px;padding-top: 4px;margin-right: 10px;box-shadow: rgb(0 0 0) 10px 24px 39px -6px;box-shadow: rgb(0 0 0 / 51%) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;}


.process ul li:after {content:"";background-image:url("../images/a.png");position: absolute;right: -26px;width: 83px;height: 30px;background-repeat: no-repeat;background-size: 100% 100%;top: 10px;opacity: 0.3;box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;}

.process ul li:last-child:after{ display:none; } 

.process:after {content:"";background-image: url("../images/lin4.png");position:absolute;bottom: 0;left: 0;right: 0;width: 100%;margin: 0 auto;height: 2px;background-repeat: no-repeat;background-position: center center;}


.service {padding: 3% 0 2%;position: relative;}
.service h2 {text-align:center;color:#fff;font-weight: 600;font-size: 50px;position: relative;}
.service h2 span { color:#ddb16d }
.service h2:before {content:"";background-image:url("../images/lin2.png");position: absolute;top: 50%;left: 0;width: 420px;height: 1px;background-repeat: no-repeat;}
.service h2:after {content:"";background-image:url("../images/lin3.png");position: absolute;top: 50%;right: 0;width: 420px;height: 1px;background-repeat: no-repeat;}


section.service ul {
    padding: 0;
    margin: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    width: 100%;
    margin-top: 46px;
}

section.service ul li {
    width: 20%;
    float: left;
    padding: 0 10px;
}

section.service ul li .service-box {
    border: 2px solid #51535e;
    border-radius: 19px;
}

section.service ul li .service-box .top-cont label {
    display: inline-block;
    width: 100%;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

section.service ul li .service-box .top-cont label img {
    width: 60px;
    margin-right: 0;
    height: 40px;
    object-fit: contain;
}

section.service ul li .service-box .text p {
    color: #fff;
    font-size: 17px;
    height: 60px;
}

section.service ul li .service-box .service-image img {
    width: 100%;
    height: auto;
}

section.service ul li .service-box .text {
    border: 2px solid #51535e;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    padding: 20px;
    background: #211f253d;
}

section.service ul li .service-box .top-cont {
    padding: 16px 10px;
    background: #58424229;
    box-shadow: rgb(0 0 0 / 51%) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}



.service:after {content:"";background-image: url("../images/lin4.png");position:absolute;bottom: 0;left: 0;right: 0;width: 100%;margin: 0 auto;height: 2px;background-repeat: no-repeat;background-position: center center;}




.choose {padding: 3% 0 2%;position: relative;}
.choose h2 {text-align:center;color:#fff;font-weight: 600;font-size: 50px;position: relative;}
.choose h2 span { color:#ddb16d }
.choose h2:before {content:"";background-image:url("../images/lin2.png");position: absolute;top: 50%;left: 0;width: 420px;height: 1px;background-repeat: no-repeat;}
.choose h2:after {content:"";background-image:url("../images/lin3.png");position: absolute;top: 50%;right: 0;width: 420px;height: 1px;background-repeat: no-repeat;}

section.choose ul {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    margin-top: 30px;
}

section.choose ul li {
    display: inline-block;
    /* background-color: #ffffff52; */
    /* box-shadow: rgb(0 0 0 / 51%) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; */
    width: 25%;
    float: left;
    padding: 0 8px;
}

section.choose ul li label {
    box-shadow: rgb(0 0 0 / 51%) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    background: #58424229;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
}

section.choose ul li label i {
    color: #ddb16d;
    margin-right: 10px;
}


.choose:after {content:"";background-image: url("../images/lin4.png");position:absolute;bottom: 0;left: 0;right: 0;width: 100%;margin: 0 auto;height: 2px;background-repeat: no-repeat;background-position: center center;}



.testimonial {padding: 3% 0 2%;position: relative;}
.testimonial h2 {text-align:center;color:#fff;font-weight: 600;font-size: 50px;position: relative;margin-bottom: 50px;}
.testimonial h2 span { color:#ddb16d }
.testimonial h2:before {content:"";background-image:url("../images/lin2.png");position: absolute;top: 50%;left: 0;width: 420px;height: 1px;background-repeat: no-repeat;}
.testimonial h2:after {content:"";background-image:url("../images/lin3.png");position: absolute;top: 50%;right: 0;width: 420px;height: 1px;background-repeat: no-repeat;}

.testimonial .box1 {background-image:url(../images/box1.png);}
.testimonial .box2 {background-image:url(../images/box2.png);}
.testimonial .box3 {background-image:url(../images/box3.png);}
.testimonial .testbox {background-size: 100% 100%;}
.testimonial .testbox img { width:100%; height:auto; }
.testimonial .testbox h3 {font-family: "Poppins", sans-serif;color:#fff;font-size: 20px;padding-top: 14px;}
.testimonial .testbox p {font-family: "Poppins", sans-serif;color:#fff;font-size: 16px;padding-right: 10px;}

.become-author {background-image: url(../images/bg1.png);padding: 40px 0;text-align: center;background-size: 100% 100%;}
.become-author h2 {text-align:center;color:#fff;font-weight: 600;font-size: 50px;position: relative;margin-bottom: 50px;text-shadow: rgb(0 0 0 / 51%) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;box-shadow: rgb(0 0 0 / 51%) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 1;}
.become-author h2 span { color:#ddb16d }

.become-author .btn1 {font-size: 26px;}


section.footer {
    padding: 2% 0;
}

section.footer h3 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 22px;
}

section.footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
    width: 100%;
}

section.footer ul li {
    margin-bottom: 10px;
    width: 50%;
    float: left;
    padding: 0 8px;
}

section.footer ul li input {
    width: 100%;
    padding: 8px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    border: 1px solid #363a43;
    border-radius: 4px;
}

section.footer ul li input[type="submit"]{
    background: linear-gradient(
48deg, #764918 0%, #c08d3e 100%);
 color: white;
 font-weight: 500;
 font-size: 18px;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 padding: 12px 30px;
 border: 1px solid #ddb064;
 border-radius: 6px;
 cursor: pointer;

  /* Mazeed 3D feel ke liye box-shadow ko thoda solid rakhein */
 /* box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.4), 
    0 5px 0 #5d3f18,                       
    0 8px 10px rgba(0, 0, 0, 0.3); */         /* Ye zameen par shadow dikhayega */
 transition: all 0.1s ease;
 position: relative;
 outline: none;
 font-family: "Poppins", sans-serif;
 display: inline-block;
 margin-right: 12px;
}


section.footer img {
    width: 30%;
}

section.footer .social {
    margin-top: 20px;
}

section.footer .social a {
    color: #fff;
    font-size: 30px;
    margin: 0 12px;
}

section.footer p {
    color: #fff;
    font-size: 18px;
    margin-top: 20px;
}

/* Jab device ki scaling 150% (1.5 dppx) ho */
@media screen and (min-resolution: 1.5dppx), 
       screen and (-webkit-min-device-pixel-ratio: 1.5) {
    
    body {
        /* Yahan aap apni marzi ki CSS likh sakte hain */
        /* Misal ke taur par agar aap mazeed zoom out karna chahte hain */
        zoom: 0.9;
    }

    section.service ul li .service-box .text p {
    font-size: 14px;
}

section.service ul li .service-box .top-cont label {
    font-size: 14px;
}

section.choose ul li label {
    font-size: 16px;
}

.testimonial .testbox p {
    font-size: 13px;
}

.banner { background-size:contain; }
.banner .content .cobtbox { height:500px; }

.process h2:before , .process h2:after { width:370px; }
.service h2:before , .service h2:after { width:370px; }
.choose h2:before , .choose h2:after {width: 330px;}
.testimonial h2:before , .testimonial h2:after {width: 290px;}

}


@media only screen and (max-width: 768px) and (orientation: portrait) {
    
    
    header .header img {
    width: 50%;
}

header .header {
    text-align: center;
}

header .header nav {
    text-align: center;
}

header .header nav ul li {
    width: 100%;
    display: inline-block;
    margin-bottom: 10px;
    margin-left: 0;
}

.banner {
    height: auto;
    background-size: 100% 100%;
    padding: 12% 0;
}

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

.banner h3 {
    font-size: 29px;
}

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

.btns a {
    display: inline-block;
    width: 48%;
    text-align: center;
    font-size: 12px;
    padding: 10px;
}

.banner .content .cobtbox {
    height: auto;
}

.nopad {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

label.bor {
    border: none;
    margin: 35px 0;
    text-align: center;
}

::before {}

::before {
    display: none;
}

::after {
    display: none;
}

.process ul li {
    width: 50%;
    margin-bottom: 31px;
}

.process ul li label {
    display: block;
    margin: 0 auto;
    margin-bottom: 19px;
}

section.service ul li {
    width: 50%;
    margin-bottom: 18px;
}

section.choose ul li {
    width: 100%;
    margin-bottom: 18px;
}

.testimonial .testbox img {
    width: 40%;
}

.testimonial .testbox {
    padding: 20px;
    margin-bottom: 20px;
}

.become-author h2 {
    font-size: 38px;
}

section.footer h3 {
    margin-top: 40px;
}

section.footer ul li input[type="submit"] {
    padding: 8px;
    font-size: 14px;
}

section.footer ul {
    margin-bottom: 23px;
}

section.footer img {
    width: 60%;
}

section.footer .social a {
    display: inline-block;
}

section.footer .social a i {
    color: #fff;
    display: inline-block;
}
section.footer .social {
    display: none;
}
}